bento-section.tsx

"use client";

import { SectionHeader } from "@/components/home/section-header";
import { siteConfig } from "@/lib/home";

export function BentoSection() {
  const { title, description, items } = siteConfig.bentoSection;

  return (
    <section

      id="bento"

      className="flex flex-col items-center justify-center w-full relative"

    >

      <div className="border-x mx-auto relative w-full max-w-6xl px-6">

        <SectionHeader>

          <h2 className="text-3xl md:text-4xl font-medium tracking-tighter text-center text-balance pb-1">

            {title}

          </h2>

          <p className="text-muted-foreground text-center text-balance font-medium">

            {description}

          </p>

        </SectionHeader>



        <div className="grid grid-cols-1 md:grid-cols-2 overflow-hidden">

          {items.map((item) => (

            <div

              key={item.id}

              className="flex flex-col items-start justify-end min-h-[600px] md:min-h-[500px] p-0.5 relative before:absolute before:-left-0.5 before:top-0 before:z-10 before:h-screen before:w-px before:bg-border before:content-[''] after:absolute after:-top-0.5 after:left-0 after:z-10 after:h-px after:w-screen after:bg-border after:content-[''] group cursor-pointer max-h-[400px] group"

            >

              <div className="relative flex size-full items-center justify-center h-full overflow-hidden">

                {item.content}

              </div>

              <div className="flex-1 flex-col gap-2 p-6">

                <h3 className="text-lg tracking-tighter font-semibold">

                  {item.title}

                </h3>

                <p className="text-muted-foreground">{item.description}</p>

              </div>

            </div>

          ))}

        </div>

      </div>

    </section>
  );
}