Add images to banner blog component

src/app/globals.css

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

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

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