Feature 1

import Image from "next/image";

import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const features = [
  {
    description:
      "Live captions, auto-framing, and one-click join with E2E encryption.",
    icon: Icons.cursor,
    title: "HD Video Meetings with AI",
  },
  {
    description: "AI-suggested replies, smart search, and instant file sync.",
    icon: Icons.colorPicker,
    title: "Unified Team Messaging and Chat",
  },
  {
    description:
      "Auto-prioritization, deadline alerts, and drag-and-drop templates.",
    icon: Icons.targetArrow,
    title: "Integrated Smart Task Management",
  },
  {
    description:
      "Finds optimal slots with one-link booking and cross-platform sync.",
    icon: Icons.archive,
    title: "Smart AI Calendar and Scheduling",
  },
];

export default function Component() {
  return (
    <section className="relative w-full bg-white py-12 md:py-24 dark:bg-background">
      <div className="mx-auto max-w-6xl px-6 lg:px-0">
        <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
          <div className="space-y-8">
            <Badge
              className="border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-800"
              variant="secondary"
            >
              <Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
              Seamless Connectivity!
            </Badge>

            <h2 className="font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl xl:text-5xl dark:text-neutral-100">
              The perfect balance of simplicity and{" "}
              <span className="relative">
                <span className="relative z-10">power</span>
                <svg
                  className="absolute top-1 right-0 z-0 w-24 max-w-full 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>
              </span>
            </h2>
            <p className="max-w-md text-neutral-600 dark:text-neutral-400">
              Connect instantly without the friction. One platform for every way
              your team works together.
            </p>
            <div className="flex items-center gap-2">
              <Button
                className="h-9 rounded-lg bg-linear-to-t from-neutral-900 to-neutral-600 px-4 font-medium text-white hover:to-neutral-900 dark:border-background dark:to-neutral-800"
                size="lg"
              >
                Explore Features
              </Button>
              <Button
                className="h-9 rounded-lg px-4 font-medium text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-800"
                size="lg"
                variant="ghost"
              >
                Get a Demo
              </Button>
            </div>
          </div>
          <div className="relative h-full w-full">
            <div className="absolute bottom-0 z-40 h-20 w-full bg-linear-to-b from-transparent to-white dark:to-background" />

            <Image
              alt="Dashboard Preview"
              className="h-full w-full rounded-xl object-cover"
              height={600}
              src="https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770214610/img_15001.jpg"
              width={800}
            />
          </div>
        </div>

        <div className="mt-20 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {features.map((feature, _index) => (
            <div
              className="relative rounded-3xl border border-gray-100 bg-white p-8 transition-colors duration-300 hover:bg-gray-100 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800"
              key={feature.title}
            >
              <div className="relative mb-6">
                <div className="relative z-10">
                  <feature.icon className="size-7 text-gray-900 dark:text-neutral-100" />
                </div>
                <div className="absolute -top-1 -left-1">
                  <svg
                    className="text-neutral-200 dark:text-neutral-700"
                    fill="none"
                    height="27"
                    viewBox="0 0 27 27"
                    width="27"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clipPath="url(#clip0_444_3357)">
                      <path
                        d="M21.6667 0.333338C24.6123 0.333338 27.0537 2.74441 26.4685 5.63122C26.1288 7.30722 25.6278 8.95069 24.9702 10.5382C23.6301 13.7736 21.6658 16.7133 19.1896 19.1895C16.7134 21.6657 13.7737 23.63 10.5383 24.9701C8.95076 25.6277 7.3073 26.1287 5.63129 26.4684C2.74449 27.0536 0.333413 24.6122 0.333413 21.6667L0.333413 15.1888C0.333414 12.8754 2.27808 11.0733 4.41537 10.1881V10.1881C5.70951 9.652 6.88539 8.8663 7.87589 7.87581C8.86638 6.88532 9.65208 5.70943 10.1881 4.41529V4.41529C11.0734 2.278 12.8755 0.333338 15.1888 0.333338H21.6667Z"
                        fill="currentColor"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_444_3357">
                        <rect fill="white" height="27" width="27" />
                      </clipPath>
                    </defs>
                  </svg>
                </div>
              </div>
              <h3 className="mb-2 font-medium text-gray-900 text-lg tracking-tight dark:text-neutral-100">
                {feature.title}
              </h3>
              <p className="text-neutral-700 text-sm dark:text-neutral-400">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}