/* ============================================================ HERO — 3 switchable variants + animated abstract visuals ============================================================ */ /* ---- Digro illustration ---- */ function DigroIllustration() { return ( ); } /* ---- Animated radar / findability visual (variant A) ---- */ function RadarVisual() { return ( ); } /* ---- Animated Google-style search result (variant C) ---- */ function SearchMock() { const phrase = "tagdækker københavn"; const [typed, setTyped] = React.useState(""); React.useEffect(() => { let i = 0; let alive = true; function tick() { if (!alive) return; if (i <= phrase.length) { setTyped(phrase.slice(0, i)); i++; setTimeout(tick, 110); } else { setTimeout(() => { i = 0; tick(); }, 2600); } } const id = setTimeout(tick, 600); return () => { alive = false; clearTimeout(id); }; }, []); return ( ); } /* ---- Wave divider ---- */ function Wave({ flip, color = "var(--ink)", top = "var(--orange)" }) { return ( ); } /* ---- Friendly business-owner illustration — pure CSS/SVG ---- */ function IllustrationSvg() { return ( ); } /* ---- "online?" draw-on SVG ---- */ function OnlineSvg({ style }) { const svgRef = React.useRef(null); const started = React.useRef(false); React.useEffect(() => { if (!svgRef.current || started.current) return; started.current = true; const paths = svgRef.current.querySelectorAll("path"); const delays = [0.3, 1.9, 2.1, 2.15, 2.35]; const durations = [1.6, 0.28, 0.45, 0.28, 0.45]; paths.forEach((p, i) => { const len = p.getTotalLength(); p.style.strokeDasharray = len; p.style.strokeDashoffset = len; p.style.animation = `drawPath ${durations[i]}s ease forwards ${delays[i]}s`; }); }, []); return ( ); } /* ============================================================ HERO VARIANTS ============================================================ */ function Hero({ variant, copy }) { if (variant === "type") return ; if (variant === "search") return ; return ; } /* Variant A — radar / split */ function HeroRadar({ copy }) { return (

Hjemmesider · SEO · Synlighed

Kan man finde dig online?

{copy.sub}

100%Bygget til SEO
Top 3Mål på Google
14 dageTil live site
); } /* Variant B — type-forward, cream bg + illustration */ function HeroType({ copy }) { const heroRef = React.useRef(null); React.useEffect(() => { if (!window.gsap) return; const ctx = gsap.context(() => { gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ defaults: { ease: "power3.out" } }); tl.fromTo(".hero-line", { y: 55, opacity: 0 }, { y: 0, opacity: 1, duration: 0.85, stagger: 0.15 }) .fromTo(".hero-illus", { x: 50, opacity: 0 }, { x: 0, opacity: 1, duration: 0.95, ease: "power2.out" }, "-=0.55") .fromTo(".hero-cta a", { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: 0.55, stagger: 0.1 }, "-=0.35"); /* Scroll parallax on illustration */ gsap.to(".hero-illus", { y: -55, ease: "none", scrollTrigger: { trigger: heroRef.current, start: "top top", end: "bottom top", scrub: 1.4 } }); }, heroRef); return () => ctx.revert(); }, []); return (
{/* Left — headline + CTA */}

Findes din virksomhed

{/* Right — illustration */}
); } /* Variant C — literal search result */ function HeroSearch({ copy }) { return (

Bliv fundet · ikke overset

Vær det første de finder.

{copy.sub}

); } Object.assign(window, { Hero, RadarVisual, SearchMock, Wave });