Building Blocks for the Web

"use client"

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

export default function TestimonialsPage() {
  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">
            <h1 className="text-4xl font-bold tracking-tight">
              What our customers are saying
            </h1>
            <p className="text-muted-foreground mx-auto max-w-2xl text-xl">
              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"

// Video features with actual Vidzflow iframe sources
const sampleVideoFeatures: VideoFeature[] = [
  {
    id: "citations",
    title: "AI you can validate, with pinpoint citations.",
    description:
      "Click on citations to verify answers quickly in the underlying primary documents. AI that helps lawyers catch every nuance.",
    iframeSrc:
      "https://app.vidzflow.com/v/DwSjOnvoPL?dq=1080&ap=true&muted=true&loop=true&ctp=true&bv=false&piv=true&playsinline=true&bc=%234E5FFD&controls=play",
    videoTitle: "View Citations and Verify",
    link: "https://example.com",
  },
  {
    id: "redlines",
    title: "Redlines, refined.",
    description:
      "Live contract editing with our world-leading Legal AI. Leverage your precedent to review with finesse.",
    iframeSrc:
      "https://app.vidzflow.com/v/1zDeWiA0LC?dq=1080&ap=true&muted=true&loop=true&ctp=true&bv=false&piv=true&playsinline=true&bc=%234E5FFD&controls=play",
    videoTitle: "Edit MSA with Precedent",
    link: "https://example.com",
  },
  {
    id: "search",
    title: "Robins never forget.",
    description:
      "Leverage every legal document you've ever negotiated. Precedents are easily uncovered and can be quickly leveraged.",
    iframeSrc:
      "https://app.vidzflow.com/v/pV5yFJ1EuM?dq=1080&ap=true&muted=true&loop=true&ctp=true&bv=false&piv=true&playsinline=true&bc=%234E5FFD&controls=play",
    videoTitle: "Search Contract Repository",
    link: "https://example.com",
  },
  {
    id: "integration",
    title: "Integration without objections.",
    description:
      "Connect Robin with your most important systems. Import documents at scale in a click with the out-the-box integrations.",
    iframeSrc:
      "https://app.vidzflow.com/v/SjbvqOEPED?dq=1080&ap=true&muted=true&loop=true&ctp=true&bv=false&piv=true&playsinline=true&bc=%234E5FFD&controls=play",
    videoTitle: "Bulk Import Contracts",
    link: "https://example.com",
  },
]

export default function InteractiveFeatureShowcasePage() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-4">
      <div className="mx-auto w-full max-w-5xl">
        <InteractiveFeatureShowcase
          features={sampleVideoFeatures}
          variant="inner-card"
        />
      </div>
    </div>
  )
}

"use client"

import { ChatbotWindow } from "@/components/chatbot-window"

export default function ChatbotWindowPage() {
  return (
    <div className="bg-background h-screen w-full">
      <ChatbotWindow defaultOpen={false}>
        <div className="flex items-center justify-center">
          <div className="w-full max-w-lg space-y-20 px-5 text-justify">
            <div className="mb-12 text-center">
              <h2 className="font-heading mb-4 text-3xl font-bold">
                Welcome to Your App
              </h2>
              <p className="text-muted-foreground text-lg">
                Use the chat window on the right to interact with our AI
                assistant. Click the expand button to open the chat interface.
              </p>
            </div>
            {Array.from({ length: 2 }).map((_, index) => (
              <div key={index}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Obcaecati, reiciendis eum vitae nostrum, temporibus repudiandae
                voluptatibus, natus iure ipsa velit odit quibusdam illum.
                Quaerat cumque laudantium libero reprehenderit perferendis quo
                nulla voluptate? Repellat tenetur labore exercitationem dicta
                libero voluptate suscipit, iusto ea assumenda. Ipsa enim, quidem
                atque modi error eaque, debitis perferendis, hic iste libero
                dignissimos ea! Quod inventore beatae aspernatur nulla rem
                perferendis aperiam at debitis delectus odit quia animi ex
                mollitia vero molestias itaque deleniti, quos exercitationem
                consequatur assumenda dolor? Quod reiciendis in similique
                reprehenderit commodi quo blanditiis nobis hic ea optio illum
                placeat officia alias quasi autem earum quos obcaecati,
                voluptatum corporis quisquam. Quisquam iste, quas explicabo
                omnis harum aut quam adipisci, voluptatem saepe accusantium
                doloribus repellendus amet culpa magnam ex et dolores accusamus
                commodi facere aliquam voluptatum alias? Officia expedita ut
                vel? Beatae deserunt sequi id eos libero suscipit totam cum, sed
                architecto atque quisquam et incidunt quod fuga ullam repellat
                assumenda quos ab, voluptatum sint nesciunt? Ad sapiente est
                laborum quam sint eius sequi. Eum, veniam dignissimos.
              </div>
            ))}
          </div>
        </div>
      </ChatbotWindow>
    </div>
  )
}

"use client"

import { PerspectiveCarousel } from "@/components/perspective-carousel"

export default function PerspectiveCarouselPage() {
  return (
    <div className="bg-background min-h-screen w-full py-6">
      <div className="mx-auto max-w-7xl">
        <PerspectiveCarousel />
      </div>
    </div>
  )
}

"use client"

import { Home, Search, Settings, User } from "lucide-react"

import { BottomMobileNav } from "@/components/bottom-mobile-nav"

const demoNavigationRoutes = [
  {
    href: "#",
    label: "Home",
    icon: Home,
  },
  {
    href: "#search",
    label: "Search",
    icon: Search,
  },
  {
    href: "#settings",
    label: "Settings",
    icon: Settings,
  },
  {
    href: "#profile",
    label: "Profile",
    icon: User,
  },
]

export default function BottomMobileNavPage() {
  return (
    <div className="bg-background flex min-h-screen w-full items-center justify-center">
      {/* Centered content */}
      <div className="max-w-2xl space-y-6 px-6 text-center">
        <h1 className="font-heading text-4xl font-bold">BottomMobileNav</h1>
        <p className="text-muted-foreground text-lg leading-relaxed">
          ⚠️ This is a mobile-first navigation component designed for touch
          interactions on mobile devices. To experience the full functionality
          and see the navigation bar in action, please view this component on a
          mobile screen or use your browser's device emulation tools. The bottom
          navigation will appear fixed at the bottom of your screen with smooth
          animations and interactive states.
        </p>
      </div>

      {/* Navigation without center button and no border */}
      <BottomMobileNav
        routes={demoNavigationRoutes}
        labels={false}
        className="bg-background border-none"
      />
    </div>
  )
}