{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-block-shadcnui",
  "type": "registry:block",
  "title": "Contact Block",
  "description": "Contact form with animated contact info cards, working hours, and interactive icons",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/contact-block.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 } from \"framer-motion\";\nimport { Mail, MapPin, Phone, Send } from \"lucide-react\";\n\nconst contactInfo = [\n  {\n    icon: Mail,\n    label: \"Email\",\n    value: \"hello@example.com\",\n    href: \"mailto:hello@example.com\",\n  },\n  {\n    icon: Phone,\n    label: \"Phone\",\n    value: \"+1 (555) 123-4567\",\n    href: \"tel:+15551234567\",\n  },\n  {\n    icon: MapPin,\n    label: \"Location\",\n    value: \"San Francisco, CA\",\n    href: \"#\",\n  },\n];\n\nexport function ContactBlock() {\n  return (\n    <section className=\"relative w-full overflow-hidden bg-background px-4 py-12 sm:py-16 md:py-20 lg:py-24\">\n      {/* Background Pattern */}\n      <div className=\"absolute inset-0 -z-10 h-full w-full bg-white dark:bg-black bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]\"></div>\n\n      <div className=\"mx-auto w-full max-w-6xl\">\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.5 }}\n          className=\"mb-12 sm:mb-16 md:mb-20 text-center\"\n        >\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl md:text-5xl\">\n            Get In Touch\n          </h2>\n          <p className=\"mx-auto max-w-2xl px-4 text-base text-muted-foreground sm:text-lg\">\n            Have a project in mind? Let's discuss how we can work together\n          </p>\n        </motion.div>\n\n        <div className=\"grid gap-8 lg:grid-cols-2 lg:gap-12\">\n          {/* Contact Form */}\n          <motion.div\n            initial={{ opacity: 0, x: -20 }}\n            whileInView={{ opacity: 1, x: 0 }}\n            viewport={{ once: true }}\n            transition={{ duration: 0.5, delay: 0.2 }}\n          >\n            <Card className=\"relative overflow-hidden rounded-xl border border-border/40 bg-background/60 p-6 backdrop-blur-sm sm:p-8\">\n              <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-50\" />\n              <form className=\"relative z-10 space-y-6\">\n                <div className=\"grid gap-6 sm:grid-cols-2\">\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"name\" className=\"text-sm font-medium\">\n                      Name\n                    </Label>\n                    <Input\n                      id=\"name\"\n                      placeholder=\"Your name\"\n                      className=\"bg-background/50 transition-colors focus:bg-background\"\n                    />\n                  </div>\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"email\" className=\"text-sm font-medium\">\n                      Email\n                    </Label>\n                    <Input\n                      id=\"email\"\n                      type=\"email\"\n                      placeholder=\"your.email@example.com\"\n                      className=\"bg-background/50 transition-colors focus:bg-background\"\n                    />\n                  </div>\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"subject\" className=\"text-sm font-medium\">\n                    Subject\n                  </Label>\n                  <Input\n                    id=\"subject\"\n                    placeholder=\"How can I help you?\"\n                    className=\"bg-background/50 transition-colors focus:bg-background\"\n                  />\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"message\" className=\"text-sm font-medium\">\n                    Message\n                  </Label>\n                  <Textarea\n                    id=\"message\"\n                    placeholder=\"Tell me about your project...\"\n                    rows={5}\n                    className=\"resize-none bg-background/50 transition-colors focus:bg-background\"\n                  />\n                </div>\n\n                <Button type=\"submit\" className=\"w-full gap-2 text-base\">\n                  Send Message\n                  <Send className=\"h-4 w-4\" />\n                </Button>\n              </form>\n            </Card>\n          </motion.div>\n\n          {/* Contact Info */}\n          <div className=\"space-y-6 lg:space-y-8\">\n            <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-1\">\n              {contactInfo.map((info, index) => (\n                <motion.div\n                  key={index}\n                  initial={{ opacity: 0, y: 20 }}\n                  whileInView={{ opacity: 1, y: 0 }}\n                  viewport={{ once: true }}\n                  transition={{ delay: index * 0.1 + 0.3, duration: 0.5 }}\n                >\n                  <Card className=\"group relative overflow-hidden rounded-xl border border-border/40 bg-background/60 p-4 transition-all duration-300 hover:border-foreground/20 hover:shadow-md hover:-translate-y-1 backdrop-blur-sm sm:p-6\">\n                    <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n                    <a\n                      href={info.href}\n                      className=\"relative z-10 flex items-center gap-4\"\n                    >\n                      <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground\">\n                        <info.icon className=\"h-5 w-5\" />\n                      </div>\n                      <div>\n                        <h3 className=\"mb-1 font-semibold text-foreground\">\n                          {info.label}\n                        </h3>\n                        <p className=\"text-sm text-muted-foreground transition-colors group-hover:text-foreground/80\">\n                          {info.value}\n                        </p>\n                      </div>\n                    </a>\n                  </Card>\n                </motion.div>\n              ))}\n            </div>\n\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              whileInView={{ opacity: 1, y: 0 }}\n              viewport={{ once: true }}\n              transition={{ delay: 0.6, duration: 0.5 }}\n            >\n              <Card className=\"rounded-xl border border-border/40 bg-background/60 p-6 backdrop-blur-sm sm:p-8\">\n                <h3 className=\"mb-4 text-xl font-semibold text-foreground\">\n                  Working Hours\n                </h3>\n                <div className=\"space-y-3 text-sm text-muted-foreground sm:text-base\">\n                  <div className=\"flex justify-between border-b border-border/40 pb-2\">\n                    <span>Monday - Friday</span>\n                    <span className=\"font-medium text-foreground\">\n                      9:00 AM - 6:00 PM\n                    </span>\n                  </div>\n                  <div className=\"flex justify-between border-b border-border/40 pb-2\">\n                    <span>Saturday</span>\n                    <span className=\"font-medium text-foreground\">\n                      10:00 AM - 4:00 PM\n                    </span>\n                  </div>\n                  <div className=\"flex justify-between pt-1\">\n                    <span>Sunday</span>\n                    <span className=\"font-medium text-foreground\">Closed</span>\n                  </div>\n                </div>\n              </Card>\n            </motion.div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/contact-block-shadcnui.tsx"
    }
  ]
}