/* Navbar, Hero, Stats, MacBook, Services */ function Navbar() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const items = [ ["Leistungen", "#leistungen"], ["Projekte", "#projekte"], ["Intraware", "#intraware"], ["Preise", "#preise"], ["Kontakt", "#kontakt"], ]; return ( <>
{/* Mobile overlay */} {open && (
Scality
{items.map(([label, href]) => ( setOpen(false)} className="text-3xl font-bold tracking-tight py-3 border-b border-white/[0.06]"> {label} ))}
setOpen(false)}>Erstgespräch buchen
)} ); } function GoogleG({ size = 14 }) { return ( ); } function HeroFloatingCard({ icon: Icon, value, label, className, animClass, accent }) { const accentColor = accent || "var(--accent-blue)"; return (
{value}
{label}
); } function Hero() { return (
{/* Decorative grid pattern in background */}
{/* LEFT: Headline + CTA */}

Digitalisierung,
die einfach passt.

Webseiten und Software für Handwerk, Immobilien & Elektrotechnik — mit Funnels, die Anfragen und Bewerber bringen.

Kostenloses Erstgespräch Projekte ansehen
{/* Trust badges */}
{[0,1,2,3,4].map(i => ( ))}
5.0 / 5.0 auf Google
Zertifizierter Digitalisierungsberater
{/* RIGHT: Photo with gradient + floating cards */}
{/* 3D rotating wireframe object behind */}
{/* Layered glow stack */}
{/* Big aurora gradient blob */}
{/* Secondary purple/cyan glow */}
{/* Conic gradient ring behind */}
Fabi und Laurin
{/* Floating cards */}
); } function StatsStrip() { const ref = useReveal(); const items = [ { value: 25, suffix: "+", label: "abgeschlossene Projekte" }, { value: 25, suffix: "+", label: "glückliche Kunden" }, { value: 5, suffix: "", label: "Jahre Erfahrung" }, { value: 24, prefix: "<", suffix: "h", label: "Reaktionszeit" }, ]; return (
{items.map((it, i) => (
{it.label}
))}
); } function MacBookScroll() { const wrapRef = useRef(null); const laptopRef = useRef(null); const phoneRef = useRef(null); const imgScrollRef = useRef(null); const glowRef = useRef(null); const tagRef = useRef(null); const captionRef = useRef(null); useEffect(() => { const vh = document.documentElement.clientHeight; const ease = t => 1 - Math.pow(1 - t, 3); const update = () => { const el = wrapRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const p = Math.min(1, Math.max(0, (-rect.top) / (rect.height - vh))); const enterT = ease(Math.min(1, p / 0.20)); const browseT = Math.max(0, Math.min(1, (p - 0.20) / 0.75)); const pEnterT = ease(Math.min(1, Math.max(0, (p - 0.05) / 0.20))); if (laptopRef.current) { const y = (1 - enterT) * 220; const ry = (-8 + 8 * enterT) * 0.5; const sc = 0.85 + 0.15 * enterT; laptopRef.current.style.transform = `translateY(${y}px) rotateX(6deg) rotateY(${ry}deg) scale(${sc})`; } if (phoneRef.current) { phoneRef.current.style.transform = `translateX(${(1 - pEnterT) * 320}px) rotate(${12 - 12 * pEnterT + 6}deg)`; phoneRef.current.style.opacity = pEnterT; } if (imgScrollRef.current) { imgScrollRef.current.style.transform = `translateY(${-browseT * 800}px)`; } if (glowRef.current) { const i = 0.18 * (0.4 + 0.6 * browseT); glowRef.current.style.background = `radial-gradient(50% 45% at 50% 55%, rgba(21,185,250,${i}) 0%, rgba(21,185,250,0) 70%)`; } if (tagRef.current) tagRef.current.style.opacity = enterT; if (captionRef.current) captionRef.current.style.opacity = browseT > 0.1 ? 1 : 0; }; update(); window.addEventListener("scroll", update, { passive: true }); return () => window.removeEventListener("scroll", update); }, []); return (
Live-Showcase

Webseiten, die nicht aussehen
wie alle anderen.

Scrollen Sie weiter — wir blättern eines unserer Projekte für Sie durch.

{/* Background grid + glow */}
{/* DEVICE STAGE */}
{/* LAPTOP */}
{/* Lid (back of screen) — gives the silver halo around the bezel */}
{/* Top reflective highlight along the rounded edge */}
{/* Screen bezel (black surround around display) */}
{/* FaceTime camera */}
{/* Display itself — inset to leave a thin black bezel ring */}
{/* Browser chrome */}
develop-1.scality.solutions
{/* Scrolling website screenshot */}
Scality Solutions
{/* Glare overlay */}
{/* Vignette */}
{/* Apple wordmark below screen on bezel */}
MacBook Pro
{/* Hinge — thin dark strip between lid and base */}
{/* Base — slight trapezoid look via larger width and chamfered bottom */}
{/* Side bevel highlights */}
{/* Drop shadow under whole laptop */}
{/* PHONE — overlapping bottom-right of laptop */}
{/* Notch */}
{/* Screen */}
{/* Status bar */}
9:41 ● ●●
{/* Static phone screenshot — swap src once image is ready */} Mobile Ansicht {/* Glare */}
{/* Floating "responsive" tag */}
Vollständig responsive
{/* Caption */}
Projekt Elektro Wildschütz GmbH
); } function ServiceCard({ icon: Icon, title, body }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const onMove = (e) => { 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(1000px) rotateY(${px * 6}deg) rotateX(${-py * 6}deg)`; }; const reset = () => { el.style.transform = ""; }; el.addEventListener("mousemove", onMove); el.addEventListener("mouseleave", reset); return () => { el.removeEventListener("mousemove", onMove); el.removeEventListener("mouseleave", reset); }; }, []); return (

{title}

{body}

Mehr erfahren
); } function Services() { const ref = useReveal(); return (
Leistungen

Was wir für Sie bauen.

Von der ersten Webseite bis zur eigenen Software — alles aus einer Hand, mit klarem Fokus auf Anfragen, Bewerber und interne Effizienz.

); } function VideoAbout() { const ref = useReveal(); const videoRef = useRef(null); const [playing, setPlaying] = useState(true); // Keep React state in sync with native events (e.g. system pauses) useEffect(() => { const v = videoRef.current; if (!v) return; const onPlay = () => setPlaying(true); const onPause = () => setPlaying(false); v.addEventListener("play", onPlay); v.addEventListener("pause", onPause); return () => { v.removeEventListener("play", onPlay); v.removeEventListener("pause", onPause); }; }, []); const togglePlay = () => { const v = videoRef.current; if (!v) return; if (v.paused) { try { v.play(); } catch(e) {} } else { v.pause(); } }; const scrollToFunnel = () => { const el = document.getElementById("kontakt"); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; return (
{/* Soft ambient glow behind */}
); } Object.assign(window, { Navbar, Hero, StatsStrip, VideoAbout, MacBookScroll, Services });