/* ═══════════════ Closink Landing · CORE (icons, atoms, hooks) ═══════════════ */ const { useState, useEffect, useRef, useCallback } = React; /* ----- icon factory (lucide-style, inline SVG) ----- */ const Ic = ({ d, s = 22, c = 'currentColor', sw = 1.7, fill = 'none', style }) => ( {d} ); const IconShield = (p) => } />; const IconShieldOk = (p) => } />; const ShieldFill = ({ s = 22, c = '#fff' }) => ; const IconLock = (p) => } />; const IconMapPin = (p) => } />; const IconPinFill = ({ s = 22, c = '#fff' }) => ; const IconNav = (p) => } />; const IconHeart = (p) => } />; const HeartFill = ({ s = 22, c = '#EF4444' }) => ; const IconBell = (p) => } />; const IconRoute = (p) => } />; const IconCar = (p) => } />; const IconGauge = (p) => } />; const IconZap = (p) => } />; const IconCheck = (p) => } />; const IconChevR = (p) => } />; const IconArrowR = (p) => } />; const IconEye = (p) => } />; const IconUsers = (p) => } />; const IconSpark = (p) => } />; const IconPlay = ({ s = 22, c = '#fff' }) => ; const IconStar = ({ s = 16, c = '#E6B450' }) => ; const IconAlert = (p) => } />; const IconVideo = (p) => } />; const IconMic = (p) => } />; const IconLayers = (p) => } />; const IconBolt112 = (p) => } />; const IconFinger = (p) => } />; const IconClock = (p) => } />; const IconCalendar = (p) => } />; const IconGlobe = (p) => } />; /* ----- store badges (inline SVG, no external) ----- */ const AppleBadge = () => ( İNDİR App Store ); const GoogleBadge = () => ( İNDİR Google Play ); /* ----- shared atoms ----- */ const Eyebrow = ({ children, color = '#3678F9', dot = true }) => ( {dot && } {children} ); const Glass = ({ children, className = '', style }) => (
{children}
); const PillBadge = ({ icon, children, tone = 'cyan', dark = false }) => { const light = { cyan: ['rgba(56,189,248,.14)', 'rgba(56,189,248,.36)', '#0369A1'], green: ['rgba(34,197,94,.14)', 'rgba(34,197,94,.38)', '#15803D'], gold: ['rgba(230,180,80,.16)', 'rgba(230,180,80,.46)', '#B45309'], red: ['rgba(239,68,68,.12)', 'rgba(239,68,68,.4)', '#DC2626'], }; const darkMap = { cyan: ['rgba(56,189,248,.12)', 'rgba(56,189,248,.32)', '#7DD3FC'], green: ['rgba(34,197,94,.12)', 'rgba(34,197,94,.34)', '#86EFAC'], gold: ['rgba(230,180,80,.12)', 'rgba(230,180,80,.4)', '#FCD34D'], red: ['rgba(239,68,68,.14)', 'rgba(239,68,68,.4)', '#FCA5A5'], }; const map = (dark ? darkMap : light)[tone]; return ( {icon}{children} ); }; /* ----- aurora / mesh background blobs ----- */ const Aurora = ({ variant = 'blue' }) => { const sets = { blue: [['#1D4ED8', '8%', '6%', 560], ['#38BDF8', '78%', '14%', 460], ['#7C5CFC', '52%', '70%', 520]], cyan: [['#38BDF8', '70%', '4%', 520], ['#1D4ED8', '6%', '40%', 560]], red: [['#E11D48', '50%', '20%', 640], ['#7C5CFC', '12%', '70%', 420]], gold: [['#E6B450', '50%', '0%', 540], ['#1D4ED8', '14%', '60%', 460]], }[variant]; return ( ); }; /* ----- hooks ----- */ function useInView() { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const vh = window.innerHeight || document.documentElement.clientHeight || 800; const inView = () => { const r = el.getBoundingClientRect(); return r.top < vh * 0.92 && r.bottom > 0; }; if (inView()) { setSeen(true); return; } if (typeof IntersectionObserver === 'undefined') { setSeen(true); return; } const ob = new IntersectionObserver((es) => { if (es.some((e) => e.isIntersecting)) { setSeen(true); ob.disconnect(); } }, { threshold: 0.1, rootMargin: '0px 0px -7% 0px' }); ob.observe(el); return () => ob.disconnect(); }, []); return [ref, seen]; } /* Reveal wrapper — fades/slides children in on scroll */ const Reveal = ({ children, delay = 0, className = '', as: Tag = 'div', style }) => { const [ref, seen] = useInView(); const dc = delay ? ` d${delay}` : ''; return {children}; }; /* CountUp — animates a number when in view */ function CountUp({ to, dur = 1500, decimals = 0, suffix = '', prefix = '', className = '', style }) { const [ref, seen] = useInView({ threshold: 0.4 }); const [val, setVal] = useState(0); useEffect(() => { if (!seen) return; if ((window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) || document.visibilityState === 'hidden') { setVal(to); return; } let raf, t0; const tick = (t) => { if (!t0) t0 = t; const p = Math.min(1, (t - t0) / dur); const e = 1 - Math.pow(1 - p, 3); setVal(to * e); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [seen, to]); const txt = val.toLocaleString('tr-TR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }); return {prefix}{txt}{suffix}; } /* 3D tilt-on-hover wrapper */ function Tilt({ children, max = 8, className = '', style }) { const ref = useRef(null); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width - 0.5; const py = (e.clientY - r.top) / r.height - 0.5; el.style.transform = `perspective(900px) rotateX(${-py * max}deg) rotateY(${px * max}deg)`; }; const reset = () => { if (ref.current) ref.current.style.transform = 'perspective(900px) rotateX(0) rotateY(0)'; }; return (
{children}
); } Object.assign(window, { React, useState, useEffect, useRef, useCallback, Ic, IconShield, IconShieldOk, ShieldFill, IconLock, IconMapPin, IconPinFill, IconNav, IconHeart, HeartFill, IconBell, IconRoute, IconCar, IconGauge, IconZap, IconCheck, IconChevR, IconArrowR, IconEye, IconUsers, IconSpark, IconPlay, IconStar, IconAlert, IconVideo, IconMic, IconLayers, IconBolt112, IconFinger, IconClock, IconCalendar, IconGlobe, AppleBadge, GoogleBadge, Eyebrow, Glass, PillBadge, Aurora, useInView, Reveal, CountUp, Tilt, });