Promo Sections 02

"use client";

import { MarqueeEffect } from "@/components/marquee-effect";
import { Button } from "@/components/ui/button";
import { ArrowRightIcon } from "lucide-react";

const images = [
  {
    image: "/images/products/list1.png"
  },
  {
    image: "/images/products/list2.png"
  },
  {
    image: "/images/products/list3.png"
  },
  {
    image: "/images/products/list4.png"
  },
  {
    image: "/images/products/list5.png"
  },
  {
    image: "/images/products/list6.png"
  },
  {
    image: "/images/products/list7.png"
  },
  {
    image: "/images/products/list8.png"
  },
  {
    image: "/images/products/list9.png"
  },
  {
    image: "/images/products/list10.png"
  }
];

export default function Testimonials() {
  return (
    <section className="py-10">
      <div className="mx-auto max-w-7xl px-4">
        <div className="grid items-center lg:grid-cols-2">
          <header className="relative z-10 mx-auto mb-8 max-w-xl text-center lg:mb-10 lg:text-start">
            <h3 className="font-heading mb-4 text-4xl text-balance md:text-5xl">
              Summer styles are finally here
            </h3>
            <p className="text-muted-foreground text-balance lg:text-lg">
              This year, our new summer collection will shelter you from the harsh elements of a
              world that doesn't care if you live or die.
            </p>
            <Button size="lg" className="mt-6">
              Shop Collection
              <ArrowRightIcon />
            </Button>
          </header>
          <div className="absolute grid h-96 grid-cols-2 gap-4 overflow-hidden mask-t-from-80% mask-r-from-10% mask-b-from-80% mask-l-from-10% lg:static lg:h-150 lg:mask-r-from-70% lg:mask-l-from-70%">
            {[
              {
                reverse: false
              },
              {
                reverse: true
              }
            ].map((mq, i) => (
              <MarqueeEffect
                gap={12}
                direction="vertical"
                reverse={mq.reverse}
                speed={30}
                speedOnHover={1}>
                {images.slice(i * 3, (i + 1) * 3).map((image, i) => (
                  <figure key={i}>
                    <img src={image.image} className="aspect-square object-cover" />
                  </figure>
                ))}
              </MarqueeEffect>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}