{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-form-section-shadcnui",
  "type": "registry:block",
  "title": "Contact Form",
  "description": "Contact form section with animated inputs, validation, and form handling",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/contact-form-section.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { motion, type Variants } from \"framer-motion\";\nimport { Mail, MessageSquare, Phone, Send } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: { staggerChildren: 0.14, delayChildren: 0.2 },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 16 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.4, ease: \"easeOut\" },\n  },\n};\n\nconst iconVariants: Variants = {\n  hidden: { opacity: 0, scale: 0.8 },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    transition: { duration: 0.35, ease: \"easeOut\" },\n  },\n};\n\nexport function ContactFormSection() {\n  const [formData, setFormData] = useState({\n    name: \"\",\n    email: \"\",\n    phone: \"\",\n    message: \"\",\n  });\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    console.log(\"Form submitted:\", formData);\n  };\n\n  const handleChange = (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    setFormData((prev) => ({\n      ...prev,\n      [event.target.name]: event.target.value,\n    }));\n  };\n\n  return (\n    <section className=\"relative overflow-hidden bg-background px-6 py-24 sm:px-8 md:py-28\">\n      <div className=\"pointer-events-none absolute inset-0 -z-10\">\n        <div className=\"absolute left-1/2 top-6 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-foreground/[0.035] blur-[140px]\" />\n        <div className=\"absolute bottom-0 right-0 h-[360px] w-[360px] rounded-full bg-primary/[0.03] blur-[130px]\" />\n      </div>\n\n      <div className=\"mx-auto flex max-w-6xl flex-col items-center gap-12 text-center\">\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true, margin: \"-80px\" }}\n          transition={{ duration: 0.5 }}\n          className=\"space-y-4\"\n        >\n          <span className=\"text-xs uppercase tracking-[0.25em] text-foreground/60\">\n            Contact\n          </span>\n          <h2 className=\"text-3xl font-semibold tracking-tight text-foreground md:text-4xl\">\n            Let’s build something exceptional together\n          </h2>\n          <p className=\"max-w-2xl text-foreground/70\">\n            Share your project details and our team will reach out within one\n            business day. We’re here to collaborate and craft meaningful\n            experiences.\n          </p>\n        </motion.div>\n\n        <Card className=\"group relative w-full max-w-4xl overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-0 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\">\n          <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100\" />\n\n          <motion.form\n            onSubmit={handleSubmit}\n            variants={containerVariants}\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n            className=\"relative grid gap-10 px-6 py-8 md:grid-cols-2 md:px-10 md:py-12\"\n            aria-label=\"Contact form\"\n          >\n            <motion.div\n              variants={itemVariants}\n              className=\"space-y-8 text-left text-foreground/70\"\n            >\n              <motion.div\n                variants={iconVariants}\n                className=\"inline-flex items-center gap-2 rounded-full border border-border/40 bg-background/50 px-4 py-1.5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur\"\n                aria-hidden=\"true\"\n              >\n                <span className=\"h-2 w-2 rounded-full bg-primary/80\" />\n                Response within 24 hours\n              </motion.div>\n\n              <div className=\"space-y-3\">\n                <h3 className=\"text-lg font-semibold tracking-tight text-foreground\">\n                  Tell us about your project\n                </h3>\n                <p className=\"text-sm text-foreground/70\">\n                  We’ll schedule a discovery call to understand your goals,\n                  timeline, and success metrics. Prefer email? Reach us at{\" \"}\n                  <a\n                    href=\"mailto:hello@example.com\"\n                    className=\"text-foreground underline decoration-border/70 underline-offset-4 transition-colors hover:text-primary\"\n                  >\n                    hello@example.com\n                  </a>\n                  .\n                </p>\n              </div>\n\n              <div className=\"grid gap-4 text-sm text-foreground/70\">\n                <div className=\"flex items-start gap-3 rounded-xl border border-border/40 bg-background/40 p-3\">\n                  <Mail\n                    className=\"mt-0.5 h-4 w-4 text-foreground/60\"\n                    aria-hidden=\"true\"\n                  />\n                  <div>\n                    <p className=\"text-sm font-medium text-foreground\">Email</p>\n                    <p>hello@example.com</p>\n                  </div>\n                </div>\n                <div className=\"flex items-start gap-3 rounded-xl border border-border/40 bg-background/40 p-3\">\n                  <Phone\n                    className=\"mt-0.5 h-4 w-4 text-foreground/60\"\n                    aria-hidden=\"true\"\n                  />\n                  <div>\n                    <p className=\"text-sm font-medium text-foreground\">Phone</p>\n                    <p>+1 (555) 123-4567</p>\n                  </div>\n                </div>\n              </div>\n            </motion.div>\n\n            <motion.div variants={itemVariants} className=\"space-y-6\">\n              <div className=\"grid gap-4 md:grid-cols-2\">\n                <div className=\"space-y-2\">\n                  <Label\n                    htmlFor=\"name\"\n                    className=\"text-xs font-semibold uppercase tracking-[0.2em] text-foreground/60\"\n                  >\n                    Full Name\n                  </Label>\n                  <Input\n                    id=\"name\"\n                    name=\"name\"\n                    type=\"text\"\n                    placeholder=\"Alex Johnson\"\n                    value={formData.name}\n                    onChange={handleChange}\n                    className=\"rounded-xl border border-border/40 bg-background/40 text-sm text-foreground transition-all focus-visible:border-border/60 focus-visible:ring-2 focus-visible:ring-primary/30\"\n                    aria-required=\"true\"\n                    required\n                  />\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label\n                    htmlFor=\"email\"\n                    className=\"text-xs font-semibold uppercase tracking-[0.2em] text-foreground/60\"\n                  >\n                    Email\n                  </Label>\n                  <div className=\"relative\">\n                    <Mail\n                      className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground/50\"\n                      aria-hidden=\"true\"\n                    />\n                    <Input\n                      id=\"email\"\n                      name=\"email\"\n                      type=\"email\"\n                      placeholder=\"alex@studio.com\"\n                      value={formData.email}\n                      onChange={handleChange}\n                      className=\"rounded-xl border border-border/40 bg-background/40 pl-10 text-sm text-foreground transition-all focus-visible:border-border/60 focus-visible:ring-2 focus-visible:ring-primary/30\"\n                      autoComplete=\"email\"\n                      aria-required=\"true\"\n                      required\n                    />\n                  </div>\n                </div>\n              </div>\n\n              <div className=\"space-y-2\">\n                <Label\n                  htmlFor=\"phone\"\n                  className=\"text-xs font-semibold uppercase tracking-[0.2em] text-foreground/60\"\n                >\n                  Phone Number\n                </Label>\n                <div className=\"relative\">\n                  <Phone\n                    className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground/50\"\n                    aria-hidden=\"true\"\n                  />\n                  <Input\n                    id=\"phone\"\n                    name=\"phone\"\n                    type=\"tel\"\n                    placeholder=\"+1 (555) 123-4567\"\n                    value={formData.phone}\n                    onChange={handleChange}\n                    className=\"rounded-xl border border-border/40 bg-background/40 pl-10 text-sm text-foreground transition-all focus-visible:border-border/60 focus-visible:ring-2 focus-visible:ring-primary/30\"\n                    autoComplete=\"tel\"\n                  />\n                </div>\n              </div>\n\n              <div className=\"space-y-2\">\n                <Label\n                  htmlFor=\"message\"\n                  className=\"text-xs font-semibold uppercase tracking-[0.2em] text-foreground/60\"\n                >\n                  Message\n                </Label>\n                <div className=\"relative\">\n                  <MessageSquare\n                    className=\"absolute left-3 top-3 h-4 w-4 text-foreground/50\"\n                    aria-hidden=\"true\"\n                  />\n                  <Textarea\n                    id=\"message\"\n                    name=\"message\"\n                    placeholder=\"Tell us about your vision, timeline, and deliverables.\"\n                    value={formData.message}\n                    onChange={handleChange}\n                    className=\"min-h-[140px] rounded-xl border border-border/40 bg-background/40 pl-10 text-sm text-foreground transition-all focus-visible:border-border/60 focus-visible:ring-2 focus-visible:ring-primary/30\"\n                    aria-required=\"true\"\n                    required\n                  />\n                </div>\n              </div>\n\n              <motion.div variants={itemVariants}>\n                <Button\n                  type=\"submit\"\n                  size=\"lg\"\n                  className=\"group flex w-full items-center justify-center gap-2 rounded-xl bg-primary text-primary-foreground transition-all hover:bg-primary/90 hover:shadow-lg\"\n                >\n                  Send Message\n                  <Send\n                    className=\"h-4 w-4 transition-transform group-hover:translate-x-1\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </motion.div>\n\n              <p className=\"text-xs text-foreground/60\">\n                By submitting this form you agree to our{\" \"}\n                <a\n                  href=\"#\"\n                  className=\"text-foreground underline decoration-border/70 underline-offset-4 transition-colors hover:text-primary\"\n                >\n                  privacy policy\n                </a>\n                .\n              </p>\n            </motion.div>\n          </motion.form>\n        </Card>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/contact-form-section-shadcnui.tsx"
    }
  ]
}