Feature

import {
  LayersIcon,
  ShieldCheckIcon,
  ZapIcon,
  PaletteIcon,
  CodeIcon,
  BarChart3Icon,
} from "lucide-react"

const features = [
  {
    icon: ZapIcon,
    title: "Lightning Fast",
    description:
      "Built on a modern architecture that delivers sub-millisecond response times. No bloated bundles, no unnecessary re-renders.",
  },
  {
    icon: ShieldCheckIcon,
    title: "Secure by Default",
    description:
      "Enterprise-grade security with end-to-end encryption, role-based access control, and SOC 2 compliance out of the box.",
  },
  {
    icon: LayersIcon,
    title: "Composable",
    description:
      "Mix and match components to build exactly what you need. Every piece is designed to work seamlessly with the rest.",
  },
  {
    icon: PaletteIcon,
    title: "Fully Themeable",
    description:
      "Customize every aspect of the design to match your brand. Supports dark mode, custom color palettes, and CSS variables.",
  },
  {
    icon: CodeIcon,
    title: "Developer First",
    description:
      "TypeScript-native with full IntelliSense support. Comprehensive docs, examples, and a thriving open-source community.",
  },
  {
    icon: BarChart3Icon,
    title: "Built-in Analytics",
    description:
      "Track usage patterns, monitor performance metrics, and gain insights into how your team uses the platform.",
  },
]

export default function Feature01() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-6xl px-6">
        <div className="mx-auto mb-16 max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
            Everything you need to ship faster
          </h2>
          <p className="mt-4 text-lg text-muted-foreground">
            A complete toolkit designed for modern teams. Focus on building
            great products while we handle the infrastructure.
          </p>
        </div>
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <div key={feature.title} className="flex flex-col gap-3">
              <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                <feature.icon className="size-5" />
              </div>
              <h3 className="text-base font-semibold text-foreground">
                {feature.title}
              </h3>
              <p className="text-sm leading-relaxed text-muted-foreground">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

const features = [
  {
    title: "Collaborative Workspaces",
    description:
      "Bring your entire team together in shared workspaces. Real-time editing, threaded comments, and granular permissions mean everyone stays aligned without stepping on each other's toes.",
  },
  {
    title: "Automated Workflows",
    description:
      "Eliminate repetitive tasks with powerful automation rules. Set triggers, define conditions, and let the platform handle the rest. From onboarding sequences to deployment pipelines, automate it all.",
  },
  {
    title: "Advanced Reporting",
    description:
      "Make data-driven decisions with customizable dashboards and detailed analytics. Track key metrics, generate shareable reports, and uncover insights that move the needle.",
  },
]

export default function Feature02() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-6xl px-6">
        <div className="flex flex-col gap-24">
          {features.map((feature, index) => {
            const isReversed = index % 2 === 1
            return (
              <div
                key={feature.title}
                className={`flex flex-col items-center gap-12 md:flex-row ${
                  isReversed ? "md:flex-row-reverse" : ""
                }`}
              >
                <div className="flex-1">
                  <div className="aspect-[4/3] w-full rounded-xl bg-muted" />
                </div>
                <div className="flex flex-1 flex-col gap-4">
                  <h3 className="text-2xl font-bold tracking-tight text-foreground">
                    {feature.title}
                  </h3>
                  <p className="text-muted-foreground leading-relaxed">
                    {feature.description}
                  </p>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}