Production-Ready UI Blocks

"use client"

import { Testimonials } from "@/components/testimonials"

export default function TestimonialsPage() {
  return (
    <div className="bg-background flex min-h-screen w-full items-center justify-center">
      <div className="mx-auto w-full max-w-7xl p-6">
        <div className="space-y-8">
          <div className="space-y-4 text-center">
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
              What our customers are saying
            </h1>
            <p className="text-muted-foreground mx-auto max-w-2xl text-base sm:text-lg">
              Hear from developers and teams who are building the future with
              our tools.
            </p>
          </div>

          <Testimonials />
        </div>
      </div>
    </div>
  )
}

"use client"

import {
  InteractiveFeatureShowcase,
  VideoFeature,
} from "@/components/interactive-feature-showcase"

// Delta Components demos — shown at /blocks/landing-page
const sampleVideoFeatures: VideoFeature[] = [
  {
    id: "chat",
    title: "LLM Chat, ready to ship.",
    description:
      "A complete chat interface with streaming responses, file uploads, and model selection. Composable primitives let you build the exact chat UX you need.",
    videoSrc: "/videos/chat-demo.mp4",
    videoTitle: "LLM Chat demo",
    link: "/docs/components/chat",
  },
  {
    id: "cambio-image",
    title: "Images that feel alive.",
    description:
      "Physics-based zoom transitions, blur-up loading, and gesture-driven dismissal. Drop in CambioImage anywhere you'd use a native <img>.",
    videoSrc: "/videos/cambio-image-demo.mp4",
    videoTitle: "Cambio Image demo",
    link: "/docs/components/cambio-image",
  },
  {
    id: "card-deck",
    title: "A swipeable stack, physics included.",
    description:
      "Touch gestures, autoplay, and customizable motion. Perfect for mobile-first product tours, testimonials, or card-based browsing.",
    videoSrc: "/videos/card-deck-demo.mp4",
    videoTitle: "Card Deck demo",
    link: "/docs/components/card-deck",
  },
  {
    id: "product-card",
    title: "Commerce UI, out of the box.",
    description:
      "A compound Product Card with multiple layout variants, flexible sizing, and interactive hover states. Drop into any storefront or listing.",
    videoSrc: "/videos/product-card-demo.mp4",
    videoTitle: "Product Card demo",
    link: "/docs/components/product-card",
  },
]

export default function InteractiveFeatureShowcasePage() {
  return (
    <div className="bg-background min-h-screen w-full">
      <div className="mx-auto max-w-7xl p-6">
        <div className="space-y-8">
          <div className="space-y-4 text-center">
            <h2 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
              Built for modern interfaces
            </h2>
            <p className="text-muted-foreground mx-auto max-w-2xl text-base sm:text-lg">
              Delta Components ships molecular, production-ready primitives on
              top of shadcn/ui — from AI chat to interactive media.
            </p>
          </div>

          <InteractiveFeatureShowcase
            features={sampleVideoFeatures}
            variant="inner-card"
          />
        </div>
      </div>
    </div>
  )
}

"use client"

import { MapboxPointer } from "@/registry/delta-ui/delta/mapbox-pointer"

export default function MapboxGridBlockPage() {
  return (
    <div className="bg-background flex min-h-screen w-full items-center justify-center">
      <div className="mx-auto w-full max-w-7xl p-6">
        <div className="space-y-8">
          <div className="space-y-4 text-center">
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
              Where we're cooking
            </h1>
            <p className="text-muted-foreground mx-auto max-w-2xl text-base sm:text-lg">
              Building the future from three world-class innovation hubs
            </p>
          </div>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
            {/* New York City */}
            <div className="space-y-3">
              <MapboxPointer
                latitude={40.7128}
                longitude={-74.006}
                zoom={11}
                markerColor="#679BFF"
                className="aspect-square w-full"
                label="New York City, USA"
                interactive={false}
              />
            </div>

            {/* SF Bay Area */}
            <div className="space-y-3">
              <MapboxPointer
                latitude={37.7749}
                longitude={-122.4194}
                zoom={11}
                markerColor="#679BFF"
                className="aspect-square w-full"
                label="San Francisco, USA"
                interactive={false}
              />
            </div>

            {/* London */}
            <div className="space-y-3">
              <MapboxPointer
                latitude={51.5074}
                longitude={-0.1278}
                zoom={11}
                markerColor="#679BFF"
                className="aspect-square w-full"
                label="London, United Kingdom"
                interactive={false}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}