{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-globe",
  "title": "Hero · Globe",
  "description": "Hero · Globe section.",
  "dependencies": [
    "cobe",
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/talizen/hero/hero-globe/hero-globe.tsx",
      "content": "import { motion } from 'framer-motion'\nimport { ArrowRight, ChevronDown } from 'lucide-react'\n\nimport { Globe as GlobeCanvas } from './Globe'\n\nconst headlineWords = 'Redefining the Future of'.split(' ')\n\nexport function HeroGlobe() {\n    return <section\n        id=\"hero\"\n        className=\"relative min-h-screen flex flex-col items-center bg-black overflow-hidden pt-32\"\n    >\n        {/* Background radial glow */}\n        <div className=\"absolute w-full bottom-0 md:-bottom-1/4 z-0 flex items-center justify-center pointer-events-none  md:opacity-100\">\n            <div\n                className=\"w-[1024px] aspect-1/1 absolute\"\n                style={{\n                    background: 'radial-gradient(50% 50% at 50% 50%, #ff6900 0%, rgba(0, 0, 0, 0) 100%)',\n                }}\n            ></div>\n            <div className=\"w-full max-w-[800px] aspect-square relative\">\n                <GlobeCanvas\n                    className=\"absolute inset-0\"\n                    maxWidth={1200}\n                    baseColor=\"#4F2713\" // Match site orange\n                    glowColor=\"#FFBD96\"\n                    markerColor=\"#ffffff\"\n                    speed={0.01}\n                    phi={0}\n                    theta={0.3}\n                    dark={1}\n                    diffuse={1.2}\n                />\n            </div>\n        </div>\n        <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(249,115,22,0.1)_0%,transparent_70%)] pointer-events-none z-0\" />\n        <div\n            className=\"bottom-0 absolute h-[200px] w-full\"\n            style={{ background: 'linear-gradient(#0000 0%, #000 100%)' }}\n        ></div>\n\n        <div className=\"relative z-10 max-w-5xl w-full px-6 text-center\">\n            <motion.div\n                initial={{ opacity: 0, y: 20 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ duration: 0.8 }}\n            >\n                <div className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[10px] font-bold tracking-[0.2em] text-orange-500 uppercase mb-8\">\n                    <span className=\"w-1 h-1 rounded-full bg-orange-500 animate-ping\" />\n                    Global Strategic Partnerships\n                </div>\n\n                <h1 className=\"text-5xl md:text-8xl font-medium tracking-tight text-white mb-8 font-serif leading-[1.05] flex flex-wrap justify-center gap-x-[0.2em]\">\n                    {'Redefining the Future of'.split(' ').map((word, i) => (\n                        <motion.span\n                            key={i}\n                            initial={{ opacity: 0, y: 50, filter: 'blur(10px)' }}\n                            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n                            transition={{\n                                duration: 1,\n                                delay: i * 0.1,\n                                ease: [0.21, 0.45, 0.32, 0.9],\n                            }}\n                        >\n                            {word}\n                        </motion.span>\n                    ))}\n                    <motion.span\n                        initial={{ opacity: 0, y: 50, filter: 'blur(10px)' }}\n                        animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n                        transition={{\n                            duration: 1,\n                            delay: 4 * 0.1,\n                            ease: [0.21, 0.45, 0.32, 0.9],\n                        }}\n                        className=\"italic\"\n                    >\n                        Digital Commerce\n                    </motion.span>\n                </h1>\n\n                <p className=\"text-white text-lg md:text-xl max-w-xl mx-auto mb-12 leading-relaxed font-light\">\n                    Experience the next generation of e-commerce collaboration. We provide the tools,\n                    training, and global network to scale your vision.\n                </p>\n\n                <div className=\"flex flex-col sm:flex-row items-center justify-center gap-8 mb-12\">\n                    <a\n                        href=\"#journey\"\n                        className=\"px-10 py-3 bg-white text-black rounded-full font-bold transition-all hover:scale-105 active:scale-95 shadow-[0_0_30px_rgba(255,255,255,0.1)]\"\n                    >\n                        Talk to us\n                    </a>\n                    <a\n                        href=\"#markets\"\n                        className=\"flex items-center gap-2 text-white/80 hover:text-white transition-colors group font-medium\"\n                    >\n                        Learn More\n                        <ArrowRight size={18} className=\"group-hover:translate-x-1 transition-transform\" />\n                    </a>\n                </div>\n            </motion.div>\n        </div>\n\n        {/* Scroll Indicator */}\n        <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ delay: 1.5, duration: 1 }}\n            className=\"absolute bottom-10 left-1/2 -translate-x-1/2 z-20\"\n        >\n            <motion.a\n                href=\"#markets\"\n                animate={{ y: [0, 12, 0] }}\n                transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}\n                className=\"flex flex-col items-center gap-2 group\"\n            >\n                <span className=\"text-[10px] font-bold tracking-[0.3em] text-white/80 uppercase group-hover:text-orange-500 transition-colors\">\n                    Scroll\n                </span>\n                <ChevronDown\n                    className=\"text-white/80 group-hover:text-orange-500 transition-colors\"\n                    size={24}\n                    strokeWidth={1.5}\n                />\n            </motion.a>\n        </motion.div>\n    </section>\n}\n\nexport default HeroGlobe\n",
      "type": "registry:component"
    },
    {
      "path": "registry/talizen/hero/hero-globe/Globe.tsx",
      "content": "import { useEffect, useRef } from 'react'\nimport createGlobe from 'cobe'\n\ntype GlobeProps = {\n    className?: string\n    maxWidth?: number\n    baseColor?: string\n    glowColor?: string\n    markerColor?: string\n    speed?: number\n    phi?: number\n    theta?: number\n    dark?: number\n    diffuse?: number\n}\n\ntype GlobeState = {\n    width: number\n    height: number\n    phi: number\n    theta: number\n    dark: number\n    diffuse: number\n    mapSamples: number\n    mapBrightness: number\n    baseColor: [number, number, number]\n    markerColor: [number, number, number]\n    glowColor: [number, number, number]\n    offset: [number, number]\n    scale: number\n    markers: { location: [number, number]; size: number }[]\n    arcColor: [number, number, number]\n    arcWidth: number\n    arcHeight: number\n    markerElevation: number\n}\n\ntype GlobeInstance = {\n    update?: (state: Partial<GlobeState>) => void\n    destroy: () => void\n}\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n    const safeHex = hex.replace('#', '')\n    const normalized =\n        safeHex.length === 3\n            ? safeHex\n                .split('')\n                .map((char) => char + char)\n                .join('')\n            : safeHex\n\n    const int = Number.parseInt(normalized, 16)\n    if (Number.isNaN(int)) return [1, 1, 1]\n\n    return [((int >> 16) & 255) / 255, ((int >> 8) & 255) / 255, (int & 255) / 255]\n}\n\nexport function Globe({\n    className,\n    maxWidth = 1200,\n    baseColor = '#3a3a3a',\n    glowColor = '#ffffff',\n    markerColor = '#ff8c42',\n    speed = 0.1,\n    phi = 0,\n    theta = 0.3,\n    dark = 0.8,\n    diffuse = 1.2,\n}: GlobeProps) {\n    const canvasRef = useRef<HTMLCanvasElement | null>(null)\n    const phiRef = useRef(phi)\n    const sizeRef = useRef(maxWidth)\n\n    useEffect(() => {\n        const canvas = canvasRef.current\n        if (!canvas) return\n\n        const size = Math.min(maxWidth, canvas.offsetWidth || maxWidth)\n        sizeRef.current = size\n\n        const globe = createGlobe(canvas, {\n            devicePixelRatio: Math.min(window.devicePixelRatio, 2),\n            width: size * 2,\n            height: size * 2,\n            phi,\n            theta,\n            dark,\n            diffuse,\n            mapSamples: 16000,\n            mapBrightness: 6,\n            baseColor: hexToRgb(baseColor),\n            markerColor: hexToRgb(markerColor),\n            glowColor: hexToRgb(glowColor),\n            markers: [],\n            offset: [0, 0],\n            scale: 1,\n            arcColor: hexToRgb(markerColor),\n            arcWidth: 0.7,\n            arcHeight: 0.25,\n            markerElevation: 0.02,\n            onRender: (state: Partial<GlobeState>) => {\n                phiRef.current += speed\n                state.phi = phiRef.current\n                state.width = sizeRef.current * 2\n                state.height = sizeRef.current * 2\n                return state\n            },\n        } as Parameters<typeof createGlobe>[1] & {\n            markers: GlobeState[\"markers\"]\n            onRender: (state: Partial<GlobeState>) => Partial<GlobeState>\n        }) as GlobeInstance\n\n        let frameId = 0\n        const animate = () => {\n            if (typeof globe.update !== 'function') return\n            phiRef.current += speed\n            globe.update({ phi: phiRef.current })\n            frameId = window.requestAnimationFrame(animate)\n        }\n        if (typeof globe.update === 'function') {\n            frameId = window.requestAnimationFrame(animate)\n        }\n\n        const observer = new ResizeObserver(() => {\n            const nextSize = Math.min(maxWidth, canvas.offsetWidth || maxWidth)\n            sizeRef.current = nextSize\n            globe.update?.({\n                width: nextSize * 2,\n                height: nextSize * 2,\n            })\n        })\n        observer.observe(canvas)\n\n        return () => {\n            window.cancelAnimationFrame(frameId)\n            observer.disconnect()\n            globe.destroy()\n        }\n    }, [baseColor, dark, diffuse, glowColor, markerColor, maxWidth, phi, speed, theta])\n\n    return (\n        <canvas\n            ref={canvasRef}\n            className={className}\n            style={{ width: '100%', height: '100%', maxWidth, aspectRatio: '1 / 1' }}\n        />\n    )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}