interactive-feature-showcase

1"use client"
2 
3import {
4  InteractiveFeatureShowcase,
5  VideoFeature,
6} from "@/components/interactive-feature-showcase"
7 
8// Delta Components demos — shown at /blocks/landing-page
9const sampleVideoFeatures: VideoFeature[] = [
10  {
11    id: "chat",
12    title: "LLM Chat, ready to ship.",
13    description:
14      "A complete chat interface with streaming responses, file uploads, and model selection. Composable primitives let you build the exact chat UX you need.",
15    videoSrc: "/videos/chat-demo.mp4",
16    videoTitle: "LLM Chat demo",
17    link: "/docs/components/chat",
18  },
19  {
20    id: "cambio-image",
21    title: "Images that feel alive.",
22    description:
23      "Physics-based zoom transitions, blur-up loading, and gesture-driven dismissal. Drop in CambioImage anywhere you'd use a native <img>.",
24    videoSrc: "/videos/cambio-image-demo.mp4",
25    videoTitle: "Cambio Image demo",
26    link: "/docs/components/cambio-image",
27  },
28  {
29    id: "card-deck",
30    title: "A swipeable stack, physics included.",
31    description:
32      "Touch gestures, autoplay, and customizable motion. Perfect for mobile-first product tours, testimonials, or card-based browsing.",
33    videoSrc: "/videos/card-deck-demo.mp4",
34    videoTitle: "Card Deck demo",
35    link: "/docs/components/card-deck",
36  },
37  {
38    id: "product-card",
39    title: "Commerce UI, out of the box.",
40    description:
41      "A compound Product Card with multiple layout variants, flexible sizing, and interactive hover states. Drop into any storefront or listing.",
42    videoSrc: "/videos/product-card-demo.mp4",
43    videoTitle: "Product Card demo",
44    link: "/docs/components/product-card",
45  },
46]
47 
48export default function InteractiveFeatureShowcasePage() {
49  return (
50    <div className="bg-background min-h-screen w-full">
51      <div className="mx-auto max-w-7xl p-6">
52        <div className="space-y-8">
53          <div className="space-y-4 text-center">
54            <h2 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
55              Built for modern interfaces
56            </h2>
57            <p className="text-muted-foreground mx-auto max-w-2xl text-base sm:text-lg">
58              Delta Components ships molecular, production-ready primitives on
59              top of shadcn/ui — from AI chat to interactive media.
60            </p>
61          </div>
62 
63          <InteractiveFeatureShowcase
64            features={sampleVideoFeatures}
65            variant="inner-card"
66          />
67        </div>
68      </div>
69// … truncated