expandable-screen-demo

1"use client"
2 
3import { useId } from "react"
4import Image from "next/image"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8import { Input } from "@/components/ui/input"
9import { Label } from "@/components/ui/label"
10import {
11  Select,
12  SelectContent,
13  SelectItem,
14  SelectTrigger,
15  SelectValue,
16} from "@/components/ui/select"
17import { Textarea } from "@/components/ui/textarea"
18import {
19  ExpandableScreen,
20  ExpandableScreenContent,
21  ExpandableScreenTrigger,
22} from "@/registry/default/ui/expandable-screen"
23 
24const formFieldClassName =
25  "w-full rounded-lg border-0 bg-primary-foreground px-4 text-primary shadow-none placeholder:text-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all text-sm"
26 
27function ExpandableScreenDemo() {
28  const nameId = useId()
29  const emailId = useId()
30  const websiteId = useId()
31  const companySizeId = useId()
32  const messageId = useId()
33  return (
34    <ExpandableScreen
35      layoutId="cta-card"
36      triggerRadius="100px"
37      contentRadius="24px"
38    >
39      <div className="relative flex min-h-screen flex-col items-center justify-center px-4 sm:px-6 py-12 sm:py-20">
40        <div className="relative z-10 flex flex-col items-center gap-4 sm:gap-6 text-center">
41          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal leading-[90%] tracking-[-0.03em] text-foreground mix-blend-exclusion max-w-2xl">
42            Join the waitlist
43          </h1>
44 
45          <p className="text-base sm:text-lg md:text-xl leading-[160%] text-foreground max-w-2xl px-4">
46            Be among the first to experience our next-generation platform. Get
47            early access to exclusive features and help shape the future of
48            productivity.
49          </p>
50 
51          <ExpandableScreenTrigger>
52            <div className="bg-primary h-15 px-6 sm:px-8 py-3 text-lg sm:text-xl font-regular text-primary-foreground tracking-[-0.01em]">
53              Get early access
54            </div>
55          </ExpandableScreenTrigger>
56        </div>
57      </div>
58 
59      <ExpandableScreenContent className="bg-primary">
60        <div className="relative z-10 flex flex-col lg:flex-row h-full w-full max-w-[1100px] mx-auto items-center p-6 sm:p-10 lg:p-16 gap-8 lg:gap-16">
61          <div className="flex-1 flex flex-col justify-center space-y-3 w-full">
62            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-medium text-primary-foreground leading-none tracking-[-0.03em]">
63// … truncated