Add payment info section

package.json

@@ -13,6 +13,7 @@
     "@types/react-star-ratings": "^2.3.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "keen-slider": "^6.8.6",
     "next": "14.1.0",
     "next-themes": "^0.2.1",
     "react": "^18",

src/app/page.tsx

@@ -11,6 +11,7 @@ export const metadata: Metadata = {
 import Blog from "@/components/Blog";
 import BrandsCarousel from "@/components/BrandsCarousel";
 import { Reviews } from "@/components/Reviews";
+import { PaymentMethods } from '@/components/PaymentMethods'
 import { ReviewsSkeleton } from "@/components/Reviews/ReviewsSkeleton";
 import { Suspense } from "react";
 
@@ -25,6 +26,7 @@ export default function Home() {
       <Suspense fallback={<ReviewsSkeleton />}>
         <Reviews />
       </Suspense>
+      <PaymentMethods />
     </main>
   )
 }

src/components/PaymentMethods/InfoCard.tsx

@@ -0,0 +1,23 @@
+import Image from "next/image";
+
+interface InfoCardProps {
+  title: string;
+  description: string;
+  img: string;
+}
+
+export const InfoCard = ({ title, description, img }: InfoCardProps) => {
+  return (
+    <article className="w-full flex flex-col items-center gap-y-1 border border-primary-lm">
+      <Image src={img} width={85} height={85} alt={description} />
+      <div className="flex flex-col items-center gap-y-1 flex-1 border border-green">
+        <h3 className="text-primary-lm font-bold text-lg ms:text-xl md:text-2xl">
+          {title}
+        </h3>
+        <p className="text-center w-4/5 text-base md:text-lg text-black/55">
+          {description}
+        </p>
+      </div>
+    </article>
+  );
+};

src/components/PaymentMethods/PaymentMethodsDesktop.tsx

@@ -0,0 +1,17 @@
+import { PAYMENT_METHODS } from "@/lib/constants";
+import { InfoCard } from "./InfoCard";
+
+export const PaymentMethodsDesktop = () => {
+  return (
+    <>
+      {PAYMENT_METHODS.map((item) => (
+        <InfoCard
+          title={item.title}
+          description={item.description}
+          img={item.img}
+          key={item.title}
+        />
+      ))}
+    </>
+  );
+};

src/components/PaymentMethods/PaymentMethodsMobile.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useKeenSlider } from "keen-slider/react";
+import "keen-slider/keen-slider.min.css";
+
+import { PAYMENT_METHODS } from "@/lib/constants";
+import { InfoCard } from "./InfoCard";
+
+export const PaymentMethodsMobile = () => {
+  const [sliderRef] = useKeenSlider<HTMLDivElement>(
+    {
+      loop: true,
+    },
+    [
+      (slider) => {
+        let timeout: ReturnType<typeof setTimeout>;
+        let mouseOver = false;
+        function clearNextTimeout() {
+          clearTimeout(timeout);
+        }
+        function nextTimeout() {
+          clearTimeout(timeout);
+          if (mouseOver) return;
+          timeout = setTimeout(() => {
+            slider.next();
+          }, 4000);
+        }
+        slider.on("created", () => {
+          slider.container.addEventListener("mouseover", () => {
+            mouseOver = true;
+            clearNextTimeout();
+          });
+          slider.container.addEventListener("mouseout", () => {
+            mouseOver = false;
+            nextTimeout();
+          });
+          nextTimeout();
+        });
+        slider.on("dragStarted", clearNextTimeout);
+        slider.on("animationEnded", nextTimeout);
+        slider.on("updated", nextTimeout);
+      },
+    ]
+  );
+
+  return (
+    <div ref={sliderRef} className="keen-slider">
+      {PAYMENT_METHODS.map((item) => (
+        <div key={item.title} className="keen-slider__slide">
+          <InfoCard
+            title={item.title}
+            description={item.description}
+            img={item.img}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

src/components/PaymentMethods/index.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import useMobile from "@/hooks/useMobile";
+
+import { PaymentMethodsMobile } from "./PaymentMethodsMobile";
+import { PaymentMethodsDesktop } from "./PaymentMethodsDesktop";
+
+export const PaymentMethods = () => {
+  const { isMobile } = useMobile();
+
+  return (
+    <section className="max-w-f-hd mx-auto p-4 ms:my-12 flex justify-start">
+      {isMobile ? <PaymentMethodsMobile /> : <PaymentMethodsDesktop />}
+    </section>
+  );
+};

src/lib/constants.ts

@@ -141,4 +141,21 @@ export const BRANDS = [
     name: "Volvo",
     image: "/images/brands/volvo-logo.webp"
   },
+]
+export const PAYMENT_METHODS = [
+  {
+    img: '/icons/contact.svg',
+    title: 'Todos los medios de pago',
+    description: 'Ofrecemos una variedad de métodos de pago seguros y confiables, para garantizar una experiencia de compra sin preocupaciones.'
+  },
+  {
+    img: '/icons/contact.svg',
+    title: 'Envío a todo el país',
+    description: 'Entregamos en todo Colombia, desde grandes ciudades hasta áreas rurales, con envíos rápidos, seguros y rasteables.'
+  },
+  {
+    img: '/icons/contact.svg',
+    title: 'Compra segura',
+    description: 'Tu seguridad es nuestra prioridad. Utilizamos tecnología SSL y métodos de pago verificados para proteger tus datos sin riesgos.'
+  }
 ]