Team 1

"use client";

import Image from "next/image";

import { Icons } from "@/components/icons";

const teamMembers = [
  {
    image:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a1.jpg",
    name: "Natalia Skinner",
    role: "Beam Researcher",
  },
  {
    image:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a3.jpg",
    name: "Fletch Skinner",
    role: "Tech Manager",
  },
  {
    image:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a5.jpg",
    name: "Patrick Stewart",
    role: "CEO - Founder",
  },
];

const features = [
  {
    icon: Icons.chat,
    subtitle: "Storage for Teams",
    title: "Centralized",
  },
  {
    icon: Icons.colorPicker,
    subtitle: "Sharing Tools",
    title: "Secure and Flexible",
  },
  {
    icon: Icons.targetArrow,
    subtitle: "Sharing Tools",
    title: "Seamless Integration",
  },
];

export default function Component() {
  return (
    <section className="relative w-full overflow-hidden bg-gray-50 py-10 md:py-16 dark:bg-background">
      <div>
        <svg
          className="absolute top-0 left-10 text-neutral-200 dark:text-neutral-800"
          fill="none"
          height="149"
          viewBox="0 0 259 149"
          width="259"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0_contact4_tr)">
            <path
              d="M-302.316 -438C-345.03 -335.213 -349.374 -223.272 -302.316 -158.312C-247.534 -82.6905 -123.092 -70.7382 91.5694 -211.017C-164.578 460.946 374.375 -176.105 204.032 128"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="40"
            />
          </g>
          <defs>
            <clipPath id="clip0_contact4_tr">
              <rect fill="white" height="149" width="259" />
            </clipPath>
          </defs>
        </svg>

        <svg
          className="absolute right-0 bottom-0 text-neutral-200 dark:text-neutral-800"
          fill="none"
          height="154"
          viewBox="0 0 460 154"
          width="460"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0_494_1104)">
            <path
              d="M-87.463 458.432C-102.118 348.092 -77.3418 238.841 -15.0744 188.274C57.4129 129.408 180.708 150.071 351.748 341.128C278.246 -374.233 633.954 380.602 548.123 42.7707"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="40"
            />
          </g>
          <defs>
            <clipPath id="clip0_494_1104">
              <rect fill="white" height="154" width="460" />
            </clipPath>
          </defs>
        </svg>
      </div>

      <div className="relative z-10 mx-auto max-w-3xl px-6 lg:px-0">
        <div className="mb-16 flex flex-col items-center text-center">
          <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
            <Icons.user className="size-6" />
          </div>

          <h1 className="relative mb-4 font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
            Creative Beam Members
            <svg
              className="absolute -top-2 -right-8 -z-10 w-24 text-neutral-200 dark:text-neutral-700"
              fill="currentColor"
              height="86"
              viewBox="0 0 108 86"
              width="108"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M38.8484 16.236L15 43.5793L78.2688 15L18.1218 71L93 34.1172L70.2047 65.2739"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="28"
              />
            </svg>
          </h1>

          <p className="max-w-2xl text-neutral-700 dark:text-neutral-400">
            Beam connects you with the most advanced tech solutions, empowering
            seamless communication.
          </p>
        </div>

        <div className="mb-12 flex flex-wrap items-end justify-center gap-6">
          {teamMembers.map((member, _index) => (
            <div
              className="group flex cursor-pointer flex-col items-center"
              key={member.name}
            >
              <div className="relative mb-4 h-48 w-60 overflow-hidden rounded-t-full">
                <Image
                  alt={member.name}
                  className="h-full w-full object-cover transition-all duration-300"
                  fill
                  src={member.image}
                />
              </div>

              <div className="flex w-full items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white px-4 py-3 dark:border-neutral-800 dark:bg-neutral-900">
                <div>
                  <h3 className="font-semibold text-neutral-900 dark:text-neutral-100">
                    {member.name}
                  </h3>
                  <p className="text-neutral-600 text-sm dark:text-neutral-400">
                    {member.role}
                  </p>
                </div>
                <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800">
                  <svg
                    className="size-4 text-neutral-900 dark:text-neutral-100"
                    fill="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                  </svg>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="rounded-2xl border border-neutral-200 bg-gray-200 p-6 dark:border-neutral-800 dark:bg-neutral-900">
          <div className="grid grid-cols-1 divide-y divide-neutral-300 md:grid-cols-3 md:divide-x md:divide-y-0 dark:divide-neutral-800">
            {features.map((feature) => (
              <div
                className="flex flex-col items-center gap-3 py-4 md:py-0"
                key={feature.title}
              >
                <div className="flex size-12 items-center justify-center rounded-2xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800">
                  <feature.icon className="size-6 text-blue-600" />
                </div>
                <div className="text-center">
                  <p className="text-neutral-600 text-sm dark:text-neutral-400">
                    {feature.title}
                  </p>
                  <p className="text-neutral-700 text-sm tracking-tight dark:text-neutral-400">
                    {feature.subtitle}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}