Add como-comprar page

src/app/como-comprar/page.tsx

@@ -11,10 +11,10 @@ const ComoComprarPage = () => {
         <HowToBuyItem
           description={item.description}
           title={item.title}
-          icon="/icons/contact.svg"
           background={item.background}
           key={index}
           direction={index % 2 === 0 ? 'right' : 'left'}
+          icon={item.icon}
         />
       ))}
     </ReactPageScroller>

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 import { ThemeProvider } from 'next-themes'
 import { DialogProvider } from '@/components/SupportDialog/DialogProvider'
+import { NavBar } from './(nav-bar)'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -19,6 +20,7 @@ export default function RootLayout({
       >
         <ThemeProvider attribute="class">
           <DialogProvider />
+          <NavBar />
           {children}
         </ThemeProvider>
       </body>

src/app/page.tsx

@@ -21,7 +21,7 @@ import { NavBar } from './(nav-bar)'
 export default function Home() {
   return (
     <main>
-      <NavBar />
+
       <Banner />
       <Categories />
       <AboutUsBanner />

src/components/HowToBuyItem/index.tsx

@@ -4,28 +4,43 @@ import Image from "next/image";
 interface HowToBuyItemProps {
   title: string;
   description: string;
-  icon: string;
   background: string;
-  direction: "left" | "right"
+  direction: "left" | "right";
+  icon: string;
 }
 
 export const HowToBuyItem = ({
   title,
   description,
-  icon,
   background,
-  direction
+  direction,
+  icon,
 }: HowToBuyItemProps) => {
   return (
-    <div className={cn(
-      "flex flex-col lg:flex-row items-center justify-center lg:justify-evenly h-full gap-y-6",
-      direction === "left" && "lg:flex-row-reverse"
-    )}>
-      <Image src={icon} width={200} height={200} alt={title} />
-      <div className="w-1/2 text-center lg:text-start space-y-3">
-        <h2 className="text-2xl font-bold">{title}</h2>
-        <p>{description}</p>
+    <div
+      className={cn(
+        `flex flex-col lg:flex-row items-center justify-center lg:justify-evenly h-full gap-y-6 p-6`,
+        direction === "left" && "lg:flex-row-reverse"
+      )}
+    >
+      <div className="absolute -z-10 w-full h-full">
+        <Image src={background} alt={title} fill className="object-cover" />
+      </div>
+      <div className="w-full lg:w-1/2 text-center lg:text-start space-y-3 p-4 lg:p-7 bg-white bg-opacity-75 dark:bg-black dark:bg-opacity-75 rounded-xl">
+        <div className="flex flex-col gap-y-2 items-center justify-center">
+          <div className="rounded-full size-20 bg-primary-lm flex items-center justify-center">
+            <Image
+              src={icon}
+              width={45}
+              height={45}
+              alt="Icon"
+              className="drop-shadow-lg"
+            />
+          </div>
+          <h2 className="text-lg md:text-xl lg:text-2xl font-bold">{title}</h2>
+        </div>
+        <p className="lg:text-lg">{description}</p>
       </div>
     </div>
   );
-};
+};

src/lib/constants.ts

@@ -180,31 +180,37 @@ export const PURCHASE_PROCESS = [
   {
     title: "SELECCIONAR ARTÍCULO",
     description: "Explora nuestro catálogo en línea para encontrar el repuesto o accesorio que necesitas para tu vehículo. Puedes utilizar los filtros de búsqueda que te ayudarán a encontrar exactamente lo que buscas. Una vez que encuentres el artículo adecuado, asegúrate de revisar las especificaciones y compatibilidad con tu carro.",
-    background: ''
+    background: '/images/buy/b1.jpg',
+    icon: '/icons/como-comprar/select-article.svg'
   },
   {
     title: "AGREGAR AL CARRITO",
     description: 'Una vez que hayas seleccionado el artículo, agrégalo a tu carrito de compras haciendo clic en el botón "Agregar al carrito". Puedes continuar navegando y añadiendo más artículos si lo deseas. Cuando estés listo para proceder con la compra, ve a tu carrito para revisar los artículos seleccionados y asegurarte de que todo esté correcto.',
-    background: ''
+    background: '/images/buy/b2.jpg',
+    icon: '/icons/como-comprar/add-to-cart.svg'
   },
   {
     title: "PAGO",
     description: "Cuando estés listo para finalizar tu compra, procede al pago. Ofrecemos múltiples métodos de pago para tu conveniencia, incluyendo tarjetas de crédito, débito, transferencias bancarias y otros métodos electrónicos. Introduce tus datos de pago de manera segura y verifica que la información sea correcta antes de confirmar la transacción.",
-    background: ''
+    background: '/images/buy/b3.jpg',
+    icon: '/icons/como-comprar/payment.svg'
   },
   {
     title: "EMPAQUE",
     description: "Después de confirmar tu pedido, nuestro equipo comenzará a preparar tu paquete. Nos aseguramos de que todos los artículos sean cuidadosamente empaquetados para prevenir daños durante el transporte. Utilizamos materiales de embalaje de alta calidad para proteger tu compra y garantizar que llegue en perfectas condiciones.",
-    background: ''
+    background: '/images/buy/b4.jpg',
+    icon: '/icons/como-comprar/packaging.svg'
   },
   {
     title: "ENVÍO",
     description: "Una vez que tu pedido esté empaquetado, lo enviaremos a la dirección que nos proporcionaste. Trabajamos con servicios de mensajería confiables para asegurar una entrega rápida y segura. Te enviaremos un número de seguimiento para que puedas monitorear el estado de tu envío en tiempo real.",
-    background: ''
+    background: '/images/buy/b5.jpg',
+    icon: '/icons/como-comprar/shipping.svg'
   },
   {
     title: "ARTÍCULO RECIBIDO",
     description: "Cuando recibas tu pedido, asegúrate de revisar todos los artículos para confirmar que están en buen estado y que coinciden con tu compra. Si tienes alguna duda o problema con tu pedido, no dudes en contactarnos para recibir asistencia. Estamos aquí para asegurarnos de que tengas una experiencia de compra satisfactoria.",
-    background: ''
+    background: '/images/buy/b6.jpg',
+    icon: '/icons/como-comprar/received.svg'
   },
 ];