Feature Showcase

import { FeatureShowcase } from "@/components/ui/feature-showcase"; // Adjust the import path accordingly

// Data for the main feature displayed on the phone
const mainFeature = {
  title: "Schedule your order",
  imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-gqcPFadwUlUpL8ajC5Ap9ZN7a6JCTu.png&w=1000&q=75", // Placeholder image
};

// Data for the surrounding floating feature cards
const features = [
  { title: "Healthy", imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-FmFvSN2Z0NKASjv9Brfyndz1FNVfNa.png&w=1000&q=75" },
  { title: "Veg Mode", imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-74oYOPyKkvUqLR9mTaRm8ab1n8FXJj.png&w=1000&q=75" },
  { title: "Plan a Party", imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-HbCnYirZv0o05ffcBstUMZcPgOwlWQ.png&w=1000&q=75" },
  { title: "Gift Cards", imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ptreaSKDFQqhY7oF7Qw6s18YOwh68e.png&w=1000&q=75" },
  { title: "Gourmet", imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-KEWpvPSSFSwGSUfmFp5ftlU6XKZn1C.png&w=1000&q=75" },
  { title: "Food on Train", imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-n9xjLUFYwMdlgByq2JweDGYdgv1eel.png&w=1000&q=75" },
  { title: "Offers", imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-c12bJfwU3bGXSu17QkqHYr7BSV5RKE.png&w=1000&q=75" },
  { title: "Collections", imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-sdaG2gHY7gqKQJvO2VXAjfPvfGsDa7.png&w=1000&q=75" },
];

export default function FeatureShowcaseDemo() {
  return (
    <div className="w-full" style={{
      // Adding a subtle gradient background similar to the reference image
      background: 'radial-gradient(circle at 50% 0%, hsl(var(--secondary)/0.1), transparent 70%)'
    }}>
      <FeatureShowcase
        title="What's waiting for you on the app?"
        subtitle="Our app is packed with features that enable you to experience food delivery like never before"
        mainFeature={mainFeature}
        features={features}
      />
    </div>
  );
}