Step 1

• Vista previa

  • Selecciona el producto deseado

    Explora nuestro catálogo y elige entre una amplia variedad de productos de alta calidad.

  • Añadelo al carrito de compras

    Haz clic en -Agregar al carrito- para resercar tus artículos y continuar comprando con facilidad.

  • Completa la información de envío

    Proporciona tus datos de entrega para asegurar que tu pedido llegue a tiempo y en perfecto estado.

  • Elige el método de pago

    Selecciona entre diferentes opciones el metodo de pago seguras y convenientes.

  • Compra confirmada

  

• Código

  import Image from 'next/image';
  
  const Step1 = () => {
    return (
      <div className="w-full xl:flex xl:items-center xl:gap-x-20">
        <section className="xl:basis-1/2 mb-10 xl:mb-0">
          <ul>
            <li className="border-l-2 border-tertiary translate-x-4 pb-5">
              <div className="flex items-center gap-x-4 mb-3 -translate-x-[19px]">
                <span className="border-2 border-tertiary w-9 h-9 flex items-center justify-center rounded-full bg-background">
                  <i className="fi fi-rr-arrow-down text-muted-foreground text-sm"></i>
                </span>
                <h5 className="text-xl font-bold">Selecciona el producto deseado</h5>
              </div>
              <p className="text-muted-foreground pl-8">
                Explora nuestro catálogo y elige entre una amplia variedad de productos de alta calidad.
              </p>
            </li>
            <li className="border-l-2 border-tertiary translate-x-4 pb-5">
              <div className="flex items-center gap-x-4 mb-3 -translate-x-[19px]">
                <span className="border-2 border-tertiary w-9 h-9 flex items-center justify-center rounded-full bg-background">
                  <i className="fi fi-rr-arrow-down text-muted-foreground text-sm"></i>
                </span>
                <h5 className="text-xl font-bold">Añadelo al carrito de compras</h5>
              </div>
              <p className="text-muted-foreground pl-8">
                Haz clic en -Agregar al carrito- para resercar tus artículos y continuar comprando con facilidad.
              </p>
            </li>
            <li className="border-l-2 border-tertiary translate-x-4 pb-5">
              <div className="flex items-center gap-x-4 mb-3 -translate-x-[19px]">
                <span className="border-2 border-tertiary w-9 h-9 flex items-center justify-center rounded-full bg-background">
                  <i className="fi fi-rr-arrow-down text-muted-foreground text-sm"></i>
                </span>
                <h5 className="text-xl font-bold">Completa la información de envío</h5>
              </div>
              <p className="text-muted-foreground pl-8">
                Proporciona tus datos de entrega para asegurar que tu pedido llegue a tiempo y en perfecto estado.
              </p>
            </li>
            <li className="border-l-2 border-tertiary translate-x-4 pb-5">
              <div className="flex items-center gap-x-4 mb-3 -translate-x-[19px]">
                <span className="border-2 border-tertiary w-9 h-9 flex items-center justify-center rounded-full bg-background">
                  <i className="fi fi-rr-arrow-down text-muted-foreground text-sm"></i>
                </span>
                <h5 className="text-xl font-bold">Elige el método de pago</h5>
              </div>
              <p className="text-muted-foreground pl-8">
                Selecciona entre diferentes opciones el metodo de pago seguras y convenientes.
              </p>
            </li>
            <li className="border-l-2 border-transparent translate-x-4">
              <div className="flex items-center gap-x-4 mb-3 -translate-x-[19px]">
                <span className="border-2 border-tertiary w-9 h-9 flex items-center justify-center rounded-full bg-background">
                  <i className="fi fi-rr-arrow-down text-muted-foreground text-sm"></i>
                </span>
                <h5 className="text-xl font-bold">Compra confirmada</h5>
              </div>
            </li>
          </ul>
        </section>
        <section className="xl:basis-1/2 relative w-full h-72">
          <Image
            src="https://img.freepik.com/foto-gratis/collage-creativo-marketing-telefono_23-2149379900.jpg?t=st=1713771397~exp=1713774997~hmac=1696dc30ef97e1b41e7c93a4e88f69f3a8f838eb44a19f1b6b4380f0196aadc4&w=2000"
            alt="Image"
            fill
            className="object-cover shadow-xl rounded-md xl:rotate-6"
          />
        </section>
      </div>
    );
  };
  
  export default Step1;