{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-1",
  "title": "Contact Exemple 1",
  "description": "Frequently asked questions section with collapsible items.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/Contact/contact1.tsx",
      "content": "\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { motion, Variants } from \"framer-motion\";\r\nimport { Video, Clock, CalendarDays, Globe, X } from \"lucide-react\";\r\nimport Image from \"next/image\";\r\n\r\n/**\r\n * Contact1 — Booking / scheduling card (responsive)\r\n * Stack: Next.js (App Router) + Tailwind CSS + Framer Motion\r\n */\r\n\r\nconst details = [\r\n  { icon: Clock, label: \"60 minutes one-on-one session\" },\r\n  { icon: Video, label: \"Video Call (Google Meet)\" },\r\n  { icon: CalendarDays, label: \"2:00 PM - 3:00 PM Tuesday, Feb 20, 2025\" },\r\n  { icon: Globe, label: \"GMT +7\" },\r\n];\r\n\r\nconst container: Variants = {\r\n  hidden: { opacity: 0 },\r\n  show: {\r\n    opacity: 1,\r\n    transition: { staggerChildren: 0.08, delayChildren: 0.15 },\r\n  },\r\n};\r\n\r\nconst item: Variants = {\r\n  hidden: { opacity: 0, y: 10 },\r\n  show: { opacity: 1, y: 0, transition: { duration: 0.35, ease: \"easeOut\" } },\r\n};\r\n\r\nexport default function Contact1() {\r\n  const [message, setMessage] = useState(\"\");\r\n  const [portfolio, setPortfolio] = useState<\"share\" | \"none\">(\"share\");\r\n\r\n  const maxLength = 200;\r\n\r\n  return (\r\n    <section className=\"flex min-h-screen w-full items-center justify-center px-4 py-8 sm:py-16\">\r\n      <motion.div\r\n        initial={{ opacity: 0, y: 24, scale: 0.98 }}\r\n        animate={{ opacity: 1, y: 0, scale: 1 }}\r\n        transition={{ duration: 0.5, ease: \"easeOut\" }}\r\n        className=\"grid w-full max-w-[900px] grid-cols-1 overflow-hidden rounded-2xl border border-zinc-200 bg-black shadow-2xl shadow-black/10 md:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]\"\r\n      >\r\n        {/* Left panel — session summary (dark) */}\r\n        <motion.div\r\n          variants={container}\r\n          initial=\"hidden\"\r\n          animate=\"show\"\r\n          className=\"flex h-full flex-col gap-5 bg-zinc-950 p-5 sm:gap-6 sm:p-7\"\r\n        >\r\n          <motion.div\r\n            variants={item}\r\n            className=\"flex h-9 w-9 items-center justify-center rounded-full bg-zinc-900 ring-1 ring-zinc-800\"\r\n          >\r\n            <Image\r\n              src=\"/logoW.png\"\r\n              alt=\"BagUI\"\r\n              width={18}\r\n              height={18}\r\n              className=\"h-[18px] w-[18px]\"\r\n            />\r\n          </motion.div>\r\n\r\n          <motion.div variants={item} className=\"space-y-1\">\r\n            <p className=\"text-xs text-zinc-400\">Bag\\Ui - by Anelka</p>\r\n            <h2 className=\"text-base font-semibold tracking-tight text-white sm:text-lg\">\r\n              Interview - Product Designer\r\n            </h2>\r\n          </motion.div>\r\n\r\n          <div className=\"flex flex-col gap-3 sm:gap-3.5\">\r\n            {details.map(({ icon: Icon, label }) => (\r\n              <motion.div\r\n                key={label}\r\n                variants={item}\r\n                className=\"flex items-center gap-3 text-xs text-zinc-400\"\r\n              >\r\n                <Icon className=\"h-4 w-4 shrink-0 text-zinc-500\" />\r\n                <span>{label}</span>\r\n              </motion.div>\r\n            ))}\r\n          </div>\r\n\r\n          <motion.button\r\n            variants={item}\r\n            whileHover={{ y: -1 }}\r\n            whileTap={{ scale: 0.98 }}\r\n            type=\"button\"\r\n            className=\"mt-2 w-full rounded-lg border border-zinc-800 bg-zinc-900 py-2.5 text-xs font-medium text-white transition-colors hover:bg-zinc-800 cursor-pointer md:mt-auto\"\r\n          >\r\n            Set Call Setting\r\n          </motion.button>\r\n        </motion.div>\r\n\r\n        {/* Right panel — form (white, padded so the div reads as its own surface) */}\r\n        <motion.form\r\n          initial={{ opacity: 0 }}\r\n          animate={{ opacity: 1 }}\r\n          transition={{ duration: 0.4, delay: 0.2 }}\r\n          onSubmit={(e) => e.preventDefault()}\r\n          className=\"flex flex-col gap-4 bg-white p-5 m-1.5 rounded-lg sm:p-7 sm:m-2\"\r\n        >\r\n          <div className=\"flex items-center justify-between\">\r\n            <h3 className=\"text-sm font-semibold text-zinc-900\">\r\n              Input Details\r\n            </h3>\r\n            <button\r\n              type=\"button\"\r\n              aria-label=\"Close\"\r\n              className=\"rounded-full p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-900\"\r\n            >\r\n              <X className=\"h-4 w-4\" />\r\n            </button>\r\n          </div>\r\n\r\n          <label className=\"flex flex-col gap-1.5\">\r\n            <span className=\"text-xs font-medium text-zinc-700\">Full name</span>\r\n            <input\r\n              type=\"text\"\r\n              placeholder=\"Your name...\"\r\n              className=\"w-full rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2.5 text-xs text-zinc-900 placeholder:text-zinc-400 outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-300\"\r\n            />\r\n          </label>\r\n\r\n          <label className=\"flex flex-col gap-1.5\">\r\n            <span className=\"text-xs font-medium text-zinc-700\">\r\n              Email Address\r\n            </span>\r\n            <input\r\n              type=\"email\"\r\n              placeholder=\"your@example.com\"\r\n              className=\"w-full rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2.5 text-xs text-zinc-900 placeholder:text-zinc-400 outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-300\"\r\n            />\r\n          </label>\r\n\r\n          <label className=\"flex flex-col gap-1.5\">\r\n            <span className=\"text-xs font-medium text-zinc-700\">\r\n              What would you like to discuss?\r\n            </span>\r\n            <div className=\"relative\">\r\n              <textarea\r\n                value={message}\r\n                maxLength={maxLength}\r\n                onChange={(e) => setMessage(e.target.value)}\r\n                placeholder=\"Share your goals and questions for the session...\"\r\n                rows={2}\r\n                className=\"w-full resize-none rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2.5 pb-5 text-xs text-zinc-900 placeholder:text-zinc-400 outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-300\"\r\n              />\r\n              <span className=\"pointer-events-none absolute bottom-1.5 right-2.5 text-[10px] text-zinc-400\">\r\n                {message.length}/{maxLength}\r\n              </span>\r\n            </div>\r\n          </label>\r\n\r\n          <fieldset className=\"flex flex-col gap-2\">\r\n            <legend className=\"text-xs font-medium text-zinc-700 mb-1\">\r\n              Will you be sharing your portfolio during the session?\r\n            </legend>\r\n\r\n            <label className=\"flex cursor-pointer items-center gap-2.5\">\r\n              <span\r\n                onClick={() => setPortfolio(\"share\")}\r\n                className={`flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border transition-colors ${\r\n                  portfolio === \"share\" ? \"border-zinc-900\" : \"border-zinc-300\"\r\n                }`}\r\n              >\r\n                {portfolio === \"share\" && (\r\n                  <motion.span\r\n                    layoutId=\"portfolio-dot\"\r\n                    className=\"h-1.5 w-1.5 rounded-full bg-zinc-900\"\r\n                  />\r\n                )}\r\n              </span>\r\n              <span className=\"text-xs text-zinc-700\">\r\n                Yes, I&apos;ll share my portfolio\r\n              </span>\r\n            </label>\r\n\r\n            <label className=\"flex cursor-pointer items-center gap-2.5\">\r\n              <span\r\n                onClick={() => setPortfolio(\"none\")}\r\n                className={`flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border transition-colors ${\r\n                  portfolio === \"none\" ? \"border-zinc-900\" : \"border-zinc-300\"\r\n                }`}\r\n              >\r\n                {portfolio === \"none\" && (\r\n                  <motion.span\r\n                    layoutId=\"portfolio-dot\"\r\n                    className=\"h-1.5 w-1.5 rounded-full bg-zinc-900\"\r\n                  />\r\n                )}\r\n              </span>\r\n              <span className=\"text-xs text-zinc-700\">\r\n                No portfolio review needed\r\n              </span>\r\n            </label>\r\n          </fieldset>\r\n\r\n          <p className=\"text-[11px] leading-relaxed text-zinc-500\">\r\n            By proceeding, you agree to our{\" \"}\r\n            <a\r\n              href=\"#\"\r\n              className=\"text-zinc-700 underline underline-offset-2 hover:text-zinc-900\"\r\n            >\r\n              Terms of Service\r\n            </a>{\" \"}\r\n            and{\" \"}\r\n            <a\r\n              href=\"#\"\r\n              className=\"text-zinc-700 underline underline-offset-2 hover:text-zinc-900\"\r\n            >\r\n              Privacy Policy\r\n            </a>\r\n          </p>\r\n\r\n          <div className=\"flex flex-col gap-3 border-t border-zinc-200 pt-4 sm:flex-row sm:items-center sm:justify-between sm:gap-4\">\r\n            <span className=\"text-[11px] text-zinc-500\">\r\n              24 hours free cancellation\r\n            </span>\r\n            <div className=\"flex items-center gap-2.5\">\r\n              <button\r\n                type=\"button\"\r\n                className=\"w-full rounded-lg border border-zinc-200 px-4 py-2 text-xs font-medium text-zinc-700 transition-colors hover:bg-zinc-100 cursor-pointer sm:w-auto\"\r\n              >\r\n                Reset\r\n              </button>\r\n              <motion.button\r\n                whileHover={{ y: -1 }}\r\n                whileTap={{ scale: 0.98 }}\r\n                type=\"submit\"\r\n                className=\"w-full rounded-lg bg-zinc-900 px-4 py-2 text-xs font-medium text-white transition-colors hover:bg-zinc-800 cursor-pointer sm:w-auto\"\r\n              >\r\n                Schedule Now\r\n              </motion.button>\r\n            </div>\r\n          </div>\r\n        </motion.form>\r\n      </motion.div>\r\n    </section>\r\n  );\r\n}\r\n",
      "type": "registry:block",
      "target": "components/blocks/contact-ex-1.tsx"
    }
  ],
  "type": "registry:block"
}