Site Features

import { Features, type Feature } from "@repo/site/features";
import { Zap, Shield, Palette } from "lucide-react";

const features: Feature[] = [
  {
    id: "performance",
    title: "Lightning Fast",
    description: "Built with performance in mind. Components are optimized for speed and efficiency.",
    icon: Zap,
    iconColor: "text-yellow-500",
    badge: "New"
  },
  {
    id: "secure",
    title: "Secure by Default",
    description: "Security best practices built into every component. Your data stays safe.",
    icon: Shield,
    iconColor: "text-green-500"
  },
  {
    id: "customizable",
    title: "Fully Customizable",
    description: "Tailwind CSS powered components that adapt to your design system.",
    icon: Palette,
    iconColor: "text-purple-500"
  }
];

export default function Example() {
  return (
    <Features
      features={features}
      title="Why Choose Our Components?"
      subtitle="Everything you need to build modern web applications"
      layout="grid"
      columns={3}
    />
  );
}

<Features
  features={features}
  title="Core Features"
  subtitle="Built for modern development"
  layout="grid"
  columns={3}
/>

<Features
  features={features}
  title="Feature Details"
  layout="list"
/>

<Features
  features={features}
  title="Highlighted Features"
  layout="alternating"
  showImages={true}
/>