{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-hero-forms-booking-form","type":"registry:block","title":"Booking Form","files":[{"path":"components/blocks/marketing/hero-forms/booking-form.tsx","content":"import { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Textarea } from '@/components/ui/textarea';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Badge } from '@/components/ui/badge';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport {\n  CalendarIcon,\n  CheckIcon,\n  ClockIcon,\n  HeadphonesIcon,\n  MapPinIcon,\n  UserIcon,\n} from 'lucide-react';\nimport { Calendar } from '@/components/ui/calendar';\nimport { format } from 'date-fns';\n\nexport default function HeroFormBooking() {\n  const [formData, setFormData] = useState({\n    name: '',\n    email: '',\n    phone: '',\n    serviceType: '',\n    date: undefined as Date | undefined,\n    timeSlot: '',\n    message: '',\n    agreeToTerms: false,\n  });\n  const [submitted, setSubmitted] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  // Dummy data\n  const serviceTypes = [\n    'Business Strategy',\n    'Financial Planning',\n    'Marketing Consultation',\n    'Legal Advice',\n    'IT Consultation',\n  ];\n\n  const timeSlots = [\n    '9:00 AM - 10:00 AM',\n    '10:30 AM - 11:30 AM',\n    '1:00 PM - 2:00 PM',\n    '2:30 PM - 3:30 PM',\n    '4:00 PM - 5:00 PM',\n  ];\n\n  const expertDetails = {\n    name: 'Dr. Sarah Johnson',\n    title: 'Senior Business Strategist',\n    imageUrl:\n      'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=300&h=300&auto=format&fit=crop&q=80',\n    experience: '15+ years',\n    specialties: [\n      'Strategic Planning',\n      'Growth Optimization',\n      'Business Transformation',\n    ],\n    ratings: 4.9,\n    reviewCount: 237,\n  };\n\n  const testimonials = [\n    {\n      quote:\n        'The consultation was incredibly valuable for our business. We implemented the strategies and saw a 40% increase in revenue within 3 months.',\n      author: 'Michael Chen',\n      company: 'TechStart Inc.',\n      imageUrl:\n        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&auto=format&fit=crop&q=80',\n    },\n  ];\n\n  const handleChange = (\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    const { name, value } = e.target;\n    setFormData((prev) => ({\n      ...prev,\n      [name]: value,\n    }));\n  };\n\n  const handleSelectChange = (name: string, value: string) => {\n    setFormData((prev) => ({\n      ...prev,\n      [name]: value,\n    }));\n  };\n\n  const handleDateChange = (date?: Date) => {\n    setFormData((prev) => ({\n      ...prev,\n      date,\n    }));\n  };\n\n  const handleCheckboxChange = (checked: boolean) => {\n    setFormData((prev) => ({\n      ...prev,\n      agreeToTerms: checked,\n    }));\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setLoading(true);\n\n    // Simulate API call\n    setTimeout(() => {\n      setLoading(false);\n      setSubmitted(true);\n    }, 1000);\n  };\n\n  return (\n    <div className=\"relative overflow-hidden bg-gradient-to-b from-purple-50 to-white dark:from-purple-950 dark:to-slate-900\">\n      {/* Background elements */}\n      <div className=\"bg-grid-slate-200 dark:bg-grid-slate-800/20 absolute inset-0 bg-[size:24px_24px] opacity-10\"></div>\n      <div className=\"absolute top-0 right-0 left-0 h-1 bg-gradient-to-r from-purple-400 via-violet-500 to-indigo-500\"></div>\n      <div className=\"absolute -top-40 -right-40 h-80 w-80 rounded-full bg-purple-200 opacity-20 blur-3xl dark:bg-purple-900\"></div>\n      <div className=\"absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-indigo-200 opacity-20 blur-3xl dark:bg-indigo-900\"></div>\n\n      <div className=\"relative z-10 container mx-auto px-4 py-16 md:px-6 lg:py-24 2xl:max-w-[1400px]\">\n        <div className=\"mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2\">\n          {/* Left column - Expert profile and value proposition */}\n          <div>\n            <Badge\n              variant=\"outline\"\n              className=\"mb-6 border-purple-200 bg-purple-50 px-3 py-1 text-sm font-medium text-purple-600 dark:border-purple-800 dark:bg-purple-900/20 dark:text-purple-300\"\n            >\n              <HeadphonesIcon className=\"mr-1 h-3.5 w-3.5\" />\n              Free 30-Minute Consultation\n            </Badge>\n\n            <h1 className=\"mb-6 text-4xl font-bold tracking-tight lg:text-5xl\">\n              Book Your{' '}\n              <span className=\"text-purple-600 dark:text-purple-400\">\n                Strategy Session\n              </span>{' '}\n              With Our Expert\n            </h1>\n\n            <p className=\"text-muted-foreground mb-8 text-xl\">\n              Get personalized advice and actionable insights to help your\n              business grow and overcome challenges.\n            </p>\n\n            {/* Expert profile card */}\n            <Card className=\"mb-8 overflow-hidden border p-0\">\n              <div className=\"flex flex-col md:flex-row\">\n                <div className=\"relative h-[200px] w-full md:h-auto md:w-1/3\">\n                  <img\n                    src={expertDetails.imageUrl}\n                    alt={expertDetails.name}\n                    className=\"object-cover\"\n                  />\n                </div>\n                <div className=\"p-6 md:w-2/3\">\n                  <div className=\"mb-2 flex items-center justify-between\">\n                    <h3 className=\"text-xl font-bold\">{expertDetails.name}</h3>\n                    <Badge className=\"border-yellow-200 bg-yellow-100 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400\">\n                      Top Rated\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground mb-4\">\n                    {expertDetails.title}\n                  </p>\n\n                  <div className=\"mb-4 grid grid-cols-2 gap-4\">\n                    <div>\n                      <p className=\"text-sm font-medium\">Experience</p>\n                      <p className=\"text-muted-foreground text-sm\">\n                        {expertDetails.experience}\n                      </p>\n                    </div>\n                    <div>\n                      <p className=\"text-sm font-medium\">Rating</p>\n                      <div className=\"flex items-center\">\n                        <span className=\"mr-1 text-sm\">\n                          {expertDetails.ratings}\n                        </span>\n                        <div className=\"flex\">\n                          {[...Array(5)].map((_, i) => (\n                            <svg\n                              key={i}\n                              className={`h-4 w-4 ${\n                                i < Math.floor(expertDetails.ratings)\n                                  ? 'text-yellow-500'\n                                  : 'text-gray-300'\n                              }`}\n                              fill=\"currentColor\"\n                              viewBox=\"0 0 20 20\"\n                            >\n                              <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"></path>\n                            </svg>\n                          ))}\n                        </div>\n                        <span className=\"text-muted-foreground ml-1 text-xs\">\n                          ({expertDetails.reviewCount})\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div>\n                    <p className=\"mb-2 text-sm font-medium\">Specialties</p>\n                    <div className=\"flex flex-wrap gap-2\">\n                      {expertDetails.specialties.map((specialty, index) => (\n                        <Badge\n                          key={index}\n                          variant=\"outline\"\n                          className=\"border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-800 dark:bg-purple-900/20 dark:text-purple-300\"\n                        >\n                          {specialty}\n                        </Badge>\n                      ))}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </Card>\n\n            {/* Value propositions */}\n            <div className=\"mb-10 space-y-6\">\n              <div className=\"flex items-start\">\n                <div className=\"mr-3 flex-shrink-0 rounded-full bg-purple-100 p-1 dark:bg-purple-900/30\">\n                  <CheckIcon className=\"h-4 w-4 text-purple-600 dark:text-purple-400\" />\n                </div>\n                <div>\n                  <p className=\"text-sm\">\n                    <span className=\"font-medium\">Personalized strategy</span>{' '}\n                    tailored to your specific business needs\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex items-start\">\n                <div className=\"mr-3 flex-shrink-0 rounded-full bg-purple-100 p-1 dark:bg-purple-900/30\">\n                  <CheckIcon className=\"h-4 w-4 text-purple-600 dark:text-purple-400\" />\n                </div>\n                <div>\n                  <p className=\"text-sm\">\n                    <span className=\"font-medium\">Actionable insights</span> you\n                    can implement immediately\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex items-start\">\n                <div className=\"mr-3 flex-shrink-0 rounded-full bg-purple-100 p-1 dark:bg-purple-900/30\">\n                  <CheckIcon className=\"h-4 w-4 text-purple-600 dark:text-purple-400\" />\n                </div>\n                <div>\n                  <p className=\"text-sm\">\n                    <span className=\"font-medium\">Expert guidance</span> from\n                    industry professionals with proven success\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex items-start\">\n                <div className=\"mr-3 flex-shrink-0 rounded-full bg-purple-100 p-1 dark:bg-purple-900/30\">\n                  <CheckIcon className=\"h-4 w-4 text-purple-600 dark:text-purple-400\" />\n                </div>\n                <div>\n                  <p className=\"text-sm\">\n                    <span className=\"font-medium\">Flexible scheduling</span> to\n                    fit your busy calendar\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            {/* Testimonial */}\n            {testimonials.map((testimonial, index) => (\n              <div\n                key={index}\n                className=\"rounded-lg border bg-white p-6 shadow-sm dark:bg-zinc-800\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div className=\"relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full\">\n                    <img\n                      src={testimonial.imageUrl}\n                      alt={testimonial.author}\n                      className=\"object-cover\"\n                    />\n                  </div>\n                  <div>\n                    <p className=\"text-muted-foreground italic\">\n                      &quot;{testimonial.quote}&quot;\n                    </p>\n                    <p className=\"mt-2 text-sm font-medium\">\n                      {testimonial.author}, {testimonial.company}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            ))}\n\n            <div className=\"mt-8 lg:hidden\">\n              <Button\n                onClick={() =>\n                  document\n                    .getElementById('booking-form')\n                    ?.scrollIntoView({ behavior: 'smooth' })\n                }\n                className=\"w-full bg-purple-600 text-white hover:bg-purple-700\"\n              >\n                Book Your Free Consultation\n              </Button>\n            </div>\n          </div>\n\n          {/* Right column - Booking form */}\n          <div id=\"booking-form\">\n            {!submitted ? (\n              <Card className=\"overflow-hidden border p-0 shadow-md\">\n                <CardHeader className=\"bg-gradient-to-r from-purple-600 to-indigo-600 p-6 text-white\">\n                  <CardTitle className=\"text-2xl\">\n                    Schedule Your Free Consultation\n                  </CardTitle>\n                  <CardDescription className=\"text-white/80\">\n                    30 minutes that could transform your business\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <form onSubmit={handleSubmit} className=\"space-y-4\">\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"name\">Full Name*</Label>\n                      <Input\n                        id=\"name\"\n                        name=\"name\"\n                        value={formData.name}\n                        onChange={handleChange}\n                        placeholder=\"John Doe\"\n                        required\n                      />\n                    </div>\n\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"email\">Email Address*</Label>\n                      <Input\n                        id=\"email\"\n                        name=\"email\"\n                        type=\"email\"\n                        value={formData.email}\n                        onChange={handleChange}\n                        placeholder=\"john@example.com\"\n                        required\n                      />\n                    </div>\n\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"phone\">Phone Number*</Label>\n                      <Input\n                        id=\"phone\"\n                        name=\"phone\"\n                        type=\"tel\"\n                        value={formData.phone}\n                        onChange={handleChange}\n                        placeholder=\"+1 (555) 000-0000\"\n                        required\n                      />\n                    </div>\n\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"serviceType\">\n                        What would you like to discuss?*\n                      </Label>\n                      <Select\n                        value={formData.serviceType}\n                        onValueChange={(value) =>\n                          handleSelectChange('serviceType', value)\n                        }\n                      >\n                        <SelectTrigger id=\"serviceType\">\n                          <SelectValue placeholder=\"Select a topic\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          {serviceTypes.map((service) => (\n                            <SelectItem key={service} value={service}>\n                              {service}\n                            </SelectItem>\n                          ))}\n                        </SelectContent>\n                      </Select>\n                    </div>\n\n                    <div className=\"grid gap-4 md:grid-cols-2\">\n                      <div className=\"space-y-2\">\n                        <Label htmlFor=\"date\">Preferred Date*</Label>\n                        <Popover>\n                          <PopoverTrigger asChild>\n                            <Button\n                              variant=\"outline\"\n                              className=\"w-full justify-start text-left font-normal\"\n                            >\n                              <CalendarIcon className=\"mr-2 h-4 w-4\" />\n                              {formData.date ? (\n                                format(formData.date, 'PPP')\n                              ) : (\n                                <span>Pick a date</span>\n                              )}\n                            </Button>\n                          </PopoverTrigger>\n                          <PopoverContent className=\"w-auto p-0\">\n                            <Calendar\n                              mode=\"single\"\n                              selected={formData.date}\n                              onSelect={handleDateChange}\n                              disabled={(date: Date) => {\n                                // Disable past dates, Sundays, and Saturdays\n                                return (\n                                  date <\n                                    new Date(new Date().setHours(0, 0, 0, 0)) ||\n                                  date.getDay() === 0 ||\n                                  date.getDay() === 6\n                                );\n                              }}\n                            />\n                          </PopoverContent>\n                        </Popover>\n                      </div>\n\n                      <div className=\"space-y-2\">\n                        <Label htmlFor=\"timeSlot\">Preferred Time*</Label>\n                        <Select\n                          value={formData.timeSlot}\n                          onValueChange={(value) =>\n                            handleSelectChange('timeSlot', value)\n                          }\n                          disabled={!formData.date}\n                        >\n                          <SelectTrigger id=\"timeSlot\">\n                            <SelectValue placeholder=\"Select a time\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            {timeSlots.map((time) => (\n                              <SelectItem key={time} value={time}>\n                                {time}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"message\">\n                        Brief description of your needs (optional)\n                      </Label>\n                      <Textarea\n                        id=\"message\"\n                        name=\"message\"\n                        value={formData.message}\n                        onChange={handleChange}\n                        placeholder=\"Please share any specific questions or challenges you'd like to discuss\"\n                        className=\"min-h-[100px]\"\n                      />\n                    </div>\n\n                    <div className=\"flex items-start space-x-2 pt-2\">\n                      <Checkbox\n                        id=\"terms\"\n                        checked={formData.agreeToTerms}\n                        onCheckedChange={(checked) =>\n                          handleCheckboxChange(!!checked)\n                        }\n                        className=\"mt-1\"\n                      />\n                      <Label\n                        htmlFor=\"terms\"\n                        className=\"text-sm leading-tight font-normal\"\n                      >\n                        <div>\n                          I agree to the{' '}\n                          <a\n                            href=\"#\"\n                            className=\"text-purple-600 hover:underline dark:text-purple-400\"\n                          >\n                            terms of service\n                          </a>{' '}\n                          and understand that my information will be processed\n                          in accordance with the{' '}\n                          <a\n                            href=\"#\"\n                            className=\"text-purple-600 hover:underline dark:text-purple-400\"\n                          >\n                            privacy policy\n                          </a>\n                          .\n                        </div>\n                      </Label>\n                    </div>\n\n                    <Button\n                      type=\"submit\"\n                      className=\"w-full bg-purple-600 text-white hover:bg-purple-700\"\n                      disabled={\n                        !formData.name ||\n                        !formData.email ||\n                        !formData.phone ||\n                        !formData.serviceType ||\n                        !formData.date ||\n                        !formData.timeSlot ||\n                        !formData.agreeToTerms ||\n                        loading\n                      }\n                    >\n                      {loading ? (\n                        <span className=\"flex items-center gap-2\">\n                          <svg\n                            className=\"h-5 w-5 animate-spin text-white\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                          >\n                            <circle\n                              className=\"opacity-25\"\n                              cx=\"12\"\n                              cy=\"12\"\n                              r=\"10\"\n                              stroke=\"currentColor\"\n                              strokeWidth=\"4\"\n                            ></circle>\n                            <path\n                              className=\"opacity-75\"\n                              fill=\"currentColor\"\n                              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n                            ></path>\n                          </svg>\n                          Processing...\n                        </span>\n                      ) : (\n                        <span>Secure Your Spot</span>\n                      )}\n                    </Button>\n                  </form>\n                </CardContent>\n                <div className=\"border-t bg-slate-50 px-6 py-4 dark:bg-slate-900/50\">\n                  <div className=\"flex items-center justify-between\">\n                    <div className=\"flex items-center gap-2 text-sm\">\n                      <ClockIcon className=\"text-muted-foreground h-4 w-4\" />\n                      <span className=\"text-muted-foreground\">\n                        30 min session\n                      </span>\n                    </div>\n                    <div className=\"flex items-center gap-2 text-sm\">\n                      <UserIcon className=\"text-muted-foreground h-4 w-4\" />\n                      <span className=\"text-muted-foreground\">\n                        1-on-1 video call\n                      </span>\n                    </div>\n                    <div className=\"flex items-center gap-2 text-sm\">\n                      <MapPinIcon className=\"text-muted-foreground h-4 w-4\" />\n                      <span className=\"text-muted-foreground\">Remote</span>\n                    </div>\n                  </div>\n                </div>\n              </Card>\n            ) : (\n              <Card className=\"overflow-hidden border p-0 shadow-md\">\n                <div className=\"p-8 text-center\">\n                  <div className=\"mb-6 flex justify-center\">\n                    <div className=\"flex h-20 w-20 items-center justify-center rounded-full bg-purple-100 dark:bg-purple-900/30\">\n                      <CheckIcon className=\"h-10 w-10 text-purple-600 dark:text-purple-400\" />\n                    </div>\n                  </div>\n\n                  <h3 className=\"mb-2 text-2xl font-bold\">\n                    Consultation Booked!\n                  </h3>\n                  <p className=\"text-muted-foreground mb-6\">\n                    We&apos;ve received your request and will confirm your\n                    appointment shortly.\n                  </p>\n\n                  <div className=\"mb-6 rounded-lg bg-purple-50 p-6 text-left dark:bg-purple-900/20\">\n                    <h4 className=\"mb-4 font-medium\">\n                      Your appointment details:\n                    </h4>\n                    <div className=\"space-y-2\">\n                      <div className=\"flex items-center gap-2 text-sm\">\n                        <CalendarIcon className=\"h-5 w-5 flex-shrink-0 text-purple-600 dark:text-purple-400\" />\n                        <div>\n                          <span className=\"font-medium\">Date:</span>{' '}\n                          {formData.date ? format(formData.date, 'PPPP') : ''}\n                        </div>\n                      </div>\n                      <div className=\"flex items-center gap-2 text-sm\">\n                        <ClockIcon className=\"h-5 w-5 flex-shrink-0 text-purple-600 dark:text-purple-400\" />\n                        <div>\n                          <span className=\"font-medium\">Time:</span>{' '}\n                          {formData.timeSlot}\n                        </div>\n                      </div>\n                      <div className=\"flex items-center gap-2 text-sm\">\n                        <HeadphonesIcon className=\"h-5 w-5 flex-shrink-0 text-purple-600 dark:text-purple-400\" />\n                        <div>\n                          <span className=\"font-medium\">Topic:</span>{' '}\n                          {formData.serviceType}\n                        </div>\n                      </div>\n                      <div className=\"flex items-center gap-2 text-sm\">\n                        <UserIcon className=\"h-5 w-5 flex-shrink-0 text-purple-600 dark:text-purple-400\" />\n                        <div>\n                          <span className=\"font-medium\">Consultant:</span>{' '}\n                          {expertDetails.name}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <Separator className=\"my-6\" />\n\n                  <div className=\"space-y-4 text-left\">\n                    <h4 className=\"font-medium\">What happens next?</h4>\n                    <div className=\"space-y-4\">\n                      <div className=\"flex items-start gap-2\">\n                        <div className=\"mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-purple-100 text-xs font-medium dark:bg-purple-900/30\">\n                          1\n                        </div>\n                        <p className=\"text-sm\">\n                          You&apos;ll receive a confirmation email with a\n                          calendar invite and details to join the video call.\n                        </p>\n                      </div>\n                      <div className=\"flex items-start gap-2\">\n                        <div className=\"mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-purple-100 text-xs font-medium dark:bg-purple-900/30\">\n                          2\n                        </div>\n                        <p className=\"text-sm\">\n                          Our consultant will review your information before the\n                          call to prepare personalized advice.\n                        </p>\n                      </div>\n                      <div className=\"flex items-start gap-2\">\n                        <div className=\"mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-purple-100 text-xs font-medium dark:bg-purple-900/30\">\n                          3\n                        </div>\n                        <p className=\"text-sm\">\n                          Join the video call at the scheduled time using the\n                          link provided in your email.\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div className=\"mt-6\">\n                    <Button className=\"bg-purple-600 text-white hover:bg-purple-700\">\n                      Add to Calendar\n                    </Button>\n                  </div>\n                </div>\n              </Card>\n            )}\n\n            {/* Additional info */}\n            <div className=\"mt-6 text-center\">\n              <p className=\"text-muted-foreground text-sm\">\n                Need to reschedule? Contact us at{' '}\n                <a\n                  href=\"mailto:support@company.com\"\n                  className=\"text-purple-600 hover:underline dark:text-purple-400\"\n                >\n                  support@company.com\n                </a>{' '}\n                or call{' '}\n                <a\n                  href=\"tel:+18001234567\"\n                  className=\"text-purple-600 hover:underline dark:text-purple-400\"\n                >\n                  1-800-123-4567\n                </a>\n                .\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/hero-forms/booking-form.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/input.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"components/ui/label.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"components/ui/textarea.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n","type":"registry:ui","target":"components/ui/textarea.tsx"},{"path":"components/ui/checkbox.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon } from \"lucide-react\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <CheckIcon\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n","type":"registry:ui","target":"components/ui/checkbox.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/select.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\"relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", position ===\"popper\"&&\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\", className )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"pointer-events-none\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n","type":"registry:ui","target":"components/ui/select.tsx"},{"path":"components/ui/separator.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px \",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n","type":"registry:ui","target":"components/ui/separator.tsx"},{"path":"components/ui/popover.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n","type":"registry:ui","target":"components/ui/popover.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/calendar.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from \"lucide-react\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        month_grid: cn(\"w-full border-collapse\", defaultClassNames.month_grid),\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n","type":"registry:ui","target":"components/ui/calendar.tsx"}],"description":"A hero with a booking form for dates, times, and guest details next to a headline. Lets visitors reserve a slot the moment they land on the page.","dependencies":["class-variance-authority","date-fns","lucide-react","radix-ui","react-day-picker"]}