From 899de45b14bd5fac9244271b603f1a4f24269bc6 Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Thu, 7 Mar 2024 16:00:37 -0500
Subject: [PATCH 1/4] Create blog banner structure

---
 src/app/page.tsx              |  2 ++
 src/components/Blog/index.tsx | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 src/components/Blog/index.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f7f5d2d..02ffc1a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,13 @@
 import Banner from "@/components/Banner";
 import Categories from "@/components/Categories";
+import Blog from "@/components/Blog";
 
 export default function Home() {
   return (
     <main>
       <Banner />
       <Categories />
+      <Blog />
     </main>
   );
 }
diff --git a/src/components/Blog/index.tsx b/src/components/Blog/index.tsx
new file mode 100644
index 0000000..ece6197
--- /dev/null
+++ b/src/components/Blog/index.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+import Image from "next/image";
+import { FC } from "react";
+
+const Blog: FC = () => {
+  return (
+    <section className="w-full bg-black">
+      <Link
+        href={"https://actualizatucarro.blogspot.com"}
+        className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto p-10"
+        target="_blank"
+      >
+        <span className="text-9xl text-white">BLOG</span>
+      </Link>
+    </section>
+  );
+};
+export default Blog;

From b784f2e0c1e3e352bf671374863af3cd9520342e Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Thu, 7 Mar 2024 16:24:41 -0500
Subject: [PATCH 2/4] Add images to banner blog component

---
 src/app/globals.css           |  6 +++++-
 src/components/Blog/index.tsx | 18 ++++++++++--------
 tailwind.config.ts            |  2 +-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index bd6213e..9530af1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+body, html, :root {
+  height: 100%;
+}
\ No newline at end of file
diff --git a/src/components/Blog/index.tsx b/src/components/Blog/index.tsx
index ece6197..2323e6e 100644
--- a/src/components/Blog/index.tsx
+++ b/src/components/Blog/index.tsx
@@ -4,14 +4,16 @@ import { FC } from "react";
 
 const Blog: FC = () => {
   return (
-    <section className="w-full bg-black">
-      <Link
-        href={"https://actualizatucarro.blogspot.com"}
-        className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto p-10"
-        target="_blank"
-      >
-        <span className="text-9xl text-white">BLOG</span>
-      </Link>
+    <section className='w-full bg-black'>
+    <Link className="bg-cover bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto" href={'https://actualizatucarro.blogspot.com'} target='_blank'>
+      <Image
+        src={'/images/blog.webp'}
+        alt="Título del Blog"
+        width={668}
+        height={363}
+        loading="lazy"
+      />
+    </Link>
     </section>
   );
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f0ea29a..086d806 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -51,7 +51,7 @@ module.exports = {
     extend: {
       backgroundImage: {
         banner:
-          'url("https://i0.wp.com/citymagazine.si/wp-content/uploads/2022/05/2023-audi-rs5-coupe-competition.jpg?fit=1920%2C1080&ssl=1")',
+          'url("/images/backgroundBlog.webp")',
       },
 
       maxWidth: {

From ddb4e8eed61df97c697ddf54e3d48cea246942b1 Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Thu, 7 Mar 2024 18:35:22 -0500
Subject: [PATCH 3/4] Center background image

---
 src/components/Blog/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Blog/index.tsx b/src/components/Blog/index.tsx
index 2323e6e..f4da1e7 100644
--- a/src/components/Blog/index.tsx
+++ b/src/components/Blog/index.tsx
@@ -5,7 +5,7 @@ import { FC } from "react";
 const Blog: FC = () => {
   return (
     <section className='w-full bg-black'>
-    <Link className="bg-cover bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto" href={'https://actualizatucarro.blogspot.com'} target='_blank'>
+    <Link className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto" href={'https://actualizatucarro.blogspot.com'} target='_blank'>
       <Image
         src={'/images/blog.webp'}
         alt="Título del Blog"

From 1ae14de1b345de170a89b1bbe6f4e7e89149b8f6 Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Fri, 8 Mar 2024 08:22:20 -0500
Subject: [PATCH 4/4] Add a little space between sides and the text in mobile
 sizes

---
 src/components/Blog/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Blog/index.tsx b/src/components/Blog/index.tsx
index f4da1e7..5ba8bc2 100644
--- a/src/components/Blog/index.tsx
+++ b/src/components/Blog/index.tsx
@@ -5,7 +5,7 @@ import { FC } from "react";
 const Blog: FC = () => {
   return (
     <section className='w-full bg-black'>
-    <Link className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto" href={'https://actualizatucarro.blogspot.com'} target='_blank'>
+    <Link className="bg-cover bg-center bg-no-repeat bg-fixed bg-banner flex items-center justify-center max-w-[1920px] mx-auto px-4 ms:px-0" href={'https://actualizatucarro.blogspot.com'} target='_blank'>
       <Image
         src={'/images/blog.webp'}
         alt="Título del Blog"