Core Features

import React from "react";
import { Zap, ShieldCheck, CloudCog } from "lucide-react";
import FeatureCard from "@/components/ui/core-features"; // Import the component

/**
 * The main App component to display and demonstrate the FeatureCard.
 * @returns {JSX.Element} The rendered app layout.
 */
const settings = {
  size: 28,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const features = [
    {
      icon: <Zap size={s.size} />,
      title: "Blazing Fast Performance",
      description:
        "Optimized for speed and efficiency to deliver an unparalleled user experience on any device.",
      badgeText: "New",
      href: "#performance",
    },
    {
      icon: <ShieldCheck size={28} />,
      title: "Ironclad Security",
      description:
        "Built with security as a priority, ensuring your data is always safe and protected.",
      href: "#security",
    },
    {
      icon: <CloudCog size={28} />,
      title: "Seamless Cloud Integration",
      description:
        "Effortlessly connect with your favorite cloud services for easy data sync and backups.",
      badgeText: "Beta",
      href: "#integration",
    },
  ];

  return (
    <div className="h-screen w-screen">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <header className="mb-12 text-center">
          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
            Core Features
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-300">
            Discover the powerful features that make our platform the best
            choice for your needs.
          </p>
        </header>

        {/* Grid of Feature Cards */}
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => (
            <div key={index} className="flex justify-center">
              <FeatureCard
                icon={feature.icon}
                title={feature.title}
                description={feature.description}
                badgeText={feature.badgeText}
                href={feature.href}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}