{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-with-globe",
  "type": "registry:block",
  "title": "Contact with Globe",
  "description": "Modern Contact with globe and smooth reveal animations.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [
    "@scrollxui/button",
    "@scrollxui/globe-wireframe",
    "@scrollxui/seperatorpro"
  ],
  "dependencies": ["lucide-react", "motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/contact-sections/contact-with-globe.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { ArrowRight, Mail, Phone, Headphones } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { SeparatorPro } from '@/components/ui/seperatorpro';\nimport GlobeWireframe from '@/components/ui/globe-wireframe';\n\nconst smoothEase = [0.25, 0.1, 0.25, 1] as const;\n\nconst CONTACT_LINKS = [\n  { icon: Mail, label: 'contact@yoursaas.ai', href: 'mailto:contact@yoursaas.ai' },\n  { icon: Phone, label: '+1 (800) 321 XX21', href: 'tel:+18003214321' },\n  { icon: Headphones, label: 'support@yoursaas.ai', href: 'mailto:support@yoursaas.ai' },\n];\n\ninterface ContactWithGlobeProps {\n  title?: string;\n  subtitle?: string;\n  description?: string;\n  className?: string;\n}\n\nexport default function ContactWithGlobe({\n  title = 'Contact us',\n  subtitle = 'Contact',\n  description = 'We are always looking for ways to improve our products and services. Contact us and let us know how we can help you.',\n  className,\n}: ContactWithGlobeProps) {\n  return (\n    <section\n      className={cn(\n        'relative w-full bg-zinc-50 dark:bg-zinc-950 overflow-hidden py-20',\n        className,\n      )}\n    >\n      <div className=\"relative mx-auto max-w-7xl px-4 sm:px-6\">\n\n        <div className=\"flex flex-col items-center text-center gap-4 mb-12\">\n          <motion.div\n            initial={{ opacity: 0, y: -12 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={{ duration: 0.8, ease: smoothEase }}\n            className=\"inline-flex items-center px-4 py-1.5 rounded-full bg-rose-500/10 border border-rose-400/30\"\n          >\n            <span className=\"text-sm text-rose-500 font-medium\">{subtitle}</span>\n          </motion.div>\n\n          <motion.h2\n            initial={{ opacity: 0, y: 14 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={{ duration: 0.9, delay: 0.15, ease: smoothEase }}\n            className=\"text-4xl md:text-5xl lg:text-6xl font-bold text-zinc-900 dark:text-white\"\n          >\n            {title}\n          </motion.h2>\n\n          <motion.p\n            initial={{ opacity: 0, y: 14 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={{ duration: 0.9, delay: 0.3, ease: smoothEase }}\n            className=\"text-base text-zinc-500 dark:text-zinc-400 max-w-md\"\n          >\n            {description}\n          </motion.p>\n        </div>\n\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-5xl mx-auto items-start\">\n\n          <motion.div\n            initial={{ opacity: 0, y: 28 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={{ duration: 1.0, delay: 0.2, ease: smoothEase }}\n            className=\"flex flex-col gap-6\"\n          >\n            <div className=\"flex flex-col gap-1\">\n              <h3 className=\"text-xl font-semibold text-zinc-900 dark:text-white\">\n                Get in touch\n              </h3>\n              <p className=\"text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed max-w-xs\">\n                Reach out via any channel below. We typically reply within one business day.\n              </p>\n            </div>\n\n            <div className=\"flex flex-col gap-3\">\n              {CONTACT_LINKS.map(({ icon: Icon, label, href }, i) => (\n                <motion.a\n                  key={label}\n                  href={href}\n                  initial={{ opacity: 0, x: -12 }}\n                  whileInView={{ opacity: 1, x: 0 }}\n                  viewport={{ once: true }}\n                  transition={{ duration: 0.5, delay: 0.3 + i * 0.1, ease: smoothEase }}\n                  className=\"group flex items-center gap-3 w-fit text-sm text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors duration-200\"\n                >\n                  <div className=\"w-8 h-8 rounded-lg bg-zinc-100 dark:bg-zinc-800/80 border border-zinc-200 dark:border-zinc-700 group-hover:border-rose-300 dark:group-hover:border-rose-500/40 group-hover:bg-rose-50 dark:group-hover:bg-rose-500/10 flex items-center justify-center shrink-0 transition-all duration-200\">\n                    <Icon className=\"w-3.5 h-3.5 text-zinc-400 dark:text-zinc-500 group-hover:text-rose-500 dark:group-hover:text-rose-400 transition-colors duration-200\" />\n                  </div>\n                  {label}\n                </motion.a>\n              ))}\n            </div>\n\n            <div className=\"relative overflow-hidden h-52\">\n              <GlobeWireframe\n                className=\"w-full aspect-square max-w-full absolute top-0 left-0\"\n                variant=\"wireframesolid\"\n                autoRotate\n                autoRotateSpeed={0.45}\n                strokeWidth={0.6}\n                graticuleOpacity={0.12}\n              />\n              <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 bg-linear-to-t from-zinc-50 dark:from-zinc-950 to-transparent\" />\n            </div>\n          </motion.div>\n\n          <motion.div\n            initial={{ opacity: 0, y: 28 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true }}\n            transition={{ duration: 1.0, delay: 0.35, ease: smoothEase }}\n            className=\"rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 sm:p-8 flex flex-col gap-5\"\n          >\n            <div>\n              <h3 className=\"text-lg font-semibold text-zinc-900 dark:text-white mb-0.5\">\n                Send a message\n              </h3>\n              <p className=\"text-sm text-zinc-500 dark:text-zinc-400\">\n                Fill out the form and we'll get back to you promptly.\n              </p>\n            </div>\n\n            <SeparatorPro variant=\"dots\" />\n\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-2\">\n                <label className=\"text-xs font-semibold tracking-widest uppercase text-zinc-400 dark:text-zinc-500\">\n                  Full Name\n                </label>\n                <input\n                  type=\"text\"\n                  placeholder=\"Ahdeetai\"\n                  className=\"w-full bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2.5 text-sm text-zinc-800 dark:text-zinc-200 placeholder:text-zinc-400 dark:placeholder:text-zinc-600 outline-none focus:border-rose-400 dark:focus:border-rose-500/50 focus:ring-2 focus:ring-rose-500/10 transition-all duration-200\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-2\">\n                <label className=\"text-xs font-semibold tracking-widest uppercase text-zinc-400 dark:text-zinc-500\">\n                  Company\n                </label>\n                <input\n                  type=\"text\"\n                  placeholder=\"ScrollX UI\"\n                  className=\"w-full bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2.5 text-sm text-zinc-800 dark:text-zinc-200 placeholder:text-zinc-400 dark:placeholder:text-zinc-600 outline-none focus:border-rose-400 dark:focus:border-rose-500/50 focus:ring-2 focus:ring-rose-500/10 transition-all duration-200\"\n                />\n              </div>\n            </div>\n\n            <div className=\"flex flex-col gap-2\">\n              <label className=\"text-xs font-semibold tracking-widest uppercase text-zinc-400 dark:text-zinc-500\">\n                Email Address\n              </label>\n              <input\n                type=\"email\"\n                placeholder=\"support@scrollxui.com\"\n                className=\"w-full bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2.5 text-sm text-zinc-800 dark:text-zinc-200 placeholder:text-zinc-400 dark:placeholder:text-zinc-600 outline-none focus:border-rose-400 dark:focus:border-rose-500/50 focus:ring-2 focus:ring-rose-500/10 transition-all duration-200\"\n              />\n            </div>\n\n            <div className=\"flex flex-col gap-2\">\n              <label className=\"text-xs font-semibold tracking-widest uppercase text-zinc-400 dark:text-zinc-500\">\n                Message\n              </label>\n              <textarea\n                placeholder=\"Type your message here\"\n                rows={4}\n                className=\"w-full bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-3 text-sm text-zinc-800 dark:text-zinc-200 placeholder:text-zinc-400 dark:placeholder:text-zinc-600 outline-none focus:border-rose-400 dark:focus:border-rose-500/50 focus:ring-2 focus:ring-rose-500/10 resize-none transition-all duration-200\"\n              />\n            </div>\n\n            <Button className=\"w-fit h-11 px-8 rounded-xl font-semibold text-sm bg-zinc-900 hover:bg-zinc-800 dark:bg-white dark:hover:bg-zinc-100 text-white dark:text-zinc-900 group\">\n              Submit\n              <ArrowRight className=\"w-4 h-4 transition-transform duration-200 group-hover:translate-x-1\" />\n            </Button>\n\n          </motion.div>\n        </div>\n      </div>\n    </section>\n  );\n}"
    }
  ]
}