Banner blog

src/app/globals.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body, html, :root {
+  height: 100%;
+}

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>
   );
 }

src/components/Blog/index.tsx

@@ -0,0 +1,20 @@
+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 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"
+        width={668}
+        height={363}
+        loading="lazy"
+      />
+    </Link>
+    </section>
+  );
+};
+export default Blog;

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: {