Merge pull request #131 from Actualiza-Tu-Carro/126-bannerblog

126 bannerblog

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

@@ -0,0 +1,32 @@
+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=" 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 bg-background-dm opacity-50"></div>
+      <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/5" // Clases para el efecto de paralaje
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Banner;