Imagenes Cargadas

src/app/page.tsx

@@ -9,16 +9,18 @@ import BrandCategory from '~/components/containerCards/containerCardsBrands';
 import PaymentMethodsList from '~/components/paymentMethod/paymentMethodsList';
 import ReviewsContainer from '~/components/containerCards/containerCardsReviews';
 import reviews from '~/mockData/mockReviwes';
+import Banner from '~/components/Banner';
 
 export default function Home() {
   createIconsTypes();
   return (
     <ContainerPage header={<MainCarousel />}>
       <CategoryCategory category={category} />
       <TopSellers />
-      <PaymentMethodsList />
       <BrandCategory brand={brands} />
+      <Banner/>
       <ReviewsContainer reviwes={reviews}/>
+      <PaymentMethodsList />
     </ContainerPage>
   );
 }

src/assets/img/index.ts

@@ -30,6 +30,8 @@ import BannerWomenAndCar from './banners/BannerWomenAndCar.webp';
 import CategoryFarolas from './banners/CategoryFarolas.webp';
 import FlyerCategores from './banners/FlyerCategories.webp';
 import LogoCardBanner from './banners/LogoCardBanner.webp';
+import BannerBg from './banners/BannerBg.webp'
+import BannerTitle from './banners/BannerTitle.webp'
 
 // Importa las imágenes de la carpeta 'categories'
 import Cat01 from './categories/Cat01.png';
@@ -77,6 +79,8 @@ export const Images = {
     CategoryFarolas,
     FlyerCategores,
     LogoCardBanner,
+    BannerBg,
+    BannerTitle
   },
   categories: {
     Cat01,

src/components/Banner.tsx

@@ -1,21 +1,27 @@
+import Image from 'next/image';
 import React from 'react';
+import { Images } from '~/assets/img';
 
 const Banner: React.FC = () => {
   return (
     <div className="relative h-360">
-      <div className="absolute inset-0">
-        <img
-          src="/titulo.png" // Ruta de la imagen del título
-          alt="Título del Blog"
-          className="w-1920 transition-transform transform -translate-y-1/2" // Clases para el efecto de paralaje
-        />
-        <div className="bg-blue-500 h-full"></div>
+      <div className=" inset-0">
+        {/* Fondo del banner (imagen) */}
+        <div className="h-full bg-no-repeat bg-bottom">
+          <Image
+            src={Images.banners.BannerBg}
+            alt="Fondo del Blog"
+            layout="fill" // Ocupar todo el espacio disponible
+            objectFit="cover" // Ajustar la imagen sin distorsionarla
+          />
+        </div>
       </div>
-      <div className="absolute inset-0 flex items-center justify-center">
-        <img
-          src="/titulo.png" // Ruta de la imagen del título
+      <div className="inset-0 flex items-center justify-center">
+        {/* Imagen del título con efecto de paralaje */}
+        <Image
+          src={Images.banners.BannerTitle}
           alt="Título del Blog"
-          className="w-1920 transition-transform transform -translate-y-1/2" // Clases para el efecto de paralaje
+          className="w-1920 transition-transform transform -translate-y-1/5" // Clases para el efecto de paralaje
         />
       </div>
     </div>