Feature Showcase

Heroes

About

Feature Showcase Component This component, named FeatureShowcase, displays a title, subtitle, a central phone mockup, and an array of animated, floating feature cards around it. It is fully driven by props for maximum reusability.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feature Showcase to your project and fits it to your theme.

Code

How Feature Showcase is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}