// AV Growthstudio — main React app // Renders the full Nerova-inspired homepage with all sections, animations, and tweaks. const { useState, useEffect, useRef, useMemo, useCallback } = React; // ── Reveal-on-scroll hook ──────────────────────────────────────────────── function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current;if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) {el.classList.add('in');io.unobserve(el);}}); }, { threshold: 0.12 }); io.observe(el); return () => io.disconnect(); }, []); return ref; } function Reveal({ children, stagger = false, as: As = 'div', className = '', ...props }) { const ref = useReveal(); const cls = (stagger ? 'reveal-stagger' : 'reveal') + (className ? ' ' + className : ''); return {children}; } // ── Hero 3D blob (animated SVG with conic gradient) ────────────────────── function HeroBlob() { return (
); } // ── Service icons ───────────────────────────────────────────────────────── const ICONS = { web: , recruit: , linkedin: , ads: }; // ── Animated counter ────────────────────────────────────────────────────── function Counter({ to, duration = 1800 }) { const ref = useRef(null); const [n, setN] = useState(0); const target = parseFloat(to) || 0; useEffect(() => { const el = ref.current;if (!el) return; let started = false;let raf; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started) { started = true; const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setN(target * eased); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); } }); }, { threshold: 0.4 }); io.observe(el); return () => {io.disconnect();cancelAnimationFrame(raf);}; }, [target, duration]); const display = target % 1 === 0 ? Math.round(n) : n.toFixed(1); return {display}; } // ── Nav ─────────────────────────────────────────────────────────────────── function Nav({ t, lang, setLang, brand }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { if (menuOpen) document.body.classList.add('menu-open');else document.body.classList.remove('menu-open'); return () => document.body.classList.remove('menu-open'); }, [menuOpen]); const links = [ ['home', '#home'], ['about', '#why'], ['services', 'Leistungen.html'], ['projects', 'Projekte.html'], ['cases', '#cases'], ['blog', 'Blog.html'], ['contact', 'https://cal.eu/avgrowthstudio']]; const closeMenu = () => setMenuOpen(false); return ( <>
{links.map(([k, h]) => {t.nav[k]} )} {t.nav.cta}
); } // ── Search Demo (animated typing + results) ────────────────────────────── function SearchDemo({ brand }) { const queries = [ { q: "Welche Strategien helfen mir, die besten 1% der Vertriebstalente zu gewinnen?", results: [ { tag: "AV", url: "avgrowthstudio.de › tech-sales-recruiting", title: <>Top 1% Sales Talent — Tech Hiring Framework, snip: "Wir finden und gewinnen die Top 1% Sales-Talente für deine SaaS oder Tech-Marke." }, { tag: "AV", url: "avgrowthstudio.de › blog", title: <>Die 3 Fehler, die dich die besten Sales-Talente kosten, snip: "Was Tech-Founder beim Recruiting systematisch falsch machen — und wie du es löst." }, { tag: "AV", url: "avgrowthstudio.de › cases", title: <>+47% qualifizierte Pipeline durch Sales-Hires, snip: "Case Study: Wie wir 12 SDRs in 90 Tagen onboarded haben." }] }, { q: "3D animierte Conversion Website", results: [ { tag: "AV", url: "avgrowthstudio.de › 3d-websites", title: <>{brand} — 3D Conversion Websites, snip: "Kinetische Sites, die wie ein Pitch funktionieren — und Besucher in Pipeline verwandeln." }, { tag: "AV", url: "avgrowthstudio.de › showreel", title: <>Showreel: 3D Animation × Performance Design, snip: "Sieh dir an, wie Bewegung Conversion-Raten verdoppelt." }, { tag: "AV", url: "avgrowthstudio.de › blog", title: <>Warum 3D-Websites in 2026 der neue Standard sind }] }, { q: "Wie baue ich eine Personal Brand auf LinkedIn auf?", results: [ { tag: "AV", url: "avgrowthstudio.de › linkedin", title: <>{brand} — LinkedIn Personal Branding, frag einfach Anna, snip: "Founder-led Content, der Reichweite, Autorität und Inbound-Leads gleichzeitig aufbaut." }, { tag: "AV", url: "avgrowthstudio.de › cases", title: <>Von 800 auf 10.000 B2B-Follower in 6 Monaten, snip: "Case Study: LinkedIn-System für einen B2B-Founder." }, { tag: "AV", url: "avgrowthstudio.de › playbook", title: <>B2B Playbook für Coaches, Berater, Tech-Founder und Privatpraxen }] }, { q: "CI und Branding Spezialist gesucht", results: [ { tag: "AV", url: "avgrowthstudio.de › branding", title: <>Frag Anna @ {brand}, snip: "Volles Brand-System: CI, Designsystem, Web — aus einer Hand." }, { tag: "AV", url: "avgrowthstudio.de › team", title: <>Lerne unser Brand & Design Team kennen, snip: "Kreativdirektion, UI/UX und Motion in einem geschlossenen Loop." }, { tag: "AV", url: "avgrowthstudio.de › kontakt", title: <>Kostenlose Brand-Analyse buchen }] }]; const [step, setStep] = useState(0); // index into queries const [phase, setPhase] = useState('typing'); // typing | results | clearing const [typed, setTyped] = useState(''); useEffect(() => { let timer; const current = queries[step].q; if (phase === 'typing') { if (typed.length < current.length) { timer = setTimeout(() => setTyped(current.slice(0, typed.length + 1)), 45 + Math.random() * 40); } else { timer = setTimeout(() => setPhase('results'), 350); } } else if (phase === 'results') { timer = setTimeout(() => setPhase('clearing'), 3400); } else if (phase === 'clearing') { if (typed.length > 0) { timer = setTimeout(() => setTyped(typed.slice(0, -1)), 14); } else { timer = setTimeout(() => { setStep((s) => (s + 1) % queries.length); setPhase('typing'); }, 250); } } return () => clearTimeout(timer); }, [typed, phase, step]); const showResults = phase === 'results'; return (
{typed}
{showResults &&
{queries[step].results.map((r, i) =>
{r.tag}
{r.url}
{r.title}
{r.snip &&
{r.snip}
}
)}
} {!showResults &&
{phase === 'typing' ? '› tippt …' : '› neue Suche'}
}
Alle Bilder Cases News Mehr
); } // ── Hero ────────────────────────────────────────────────────────────────── function Hero({ t, headline, sub, brand }) { // Render headline with last word styled if it contains a "—" const renderHeadline = () => { const text = headline || t.hero.headline; // emphasize a meaningful word with serif italic const words = text.split(' '); if (words.length < 4) return text; // Find the dash split or just emphasize a phrase if (text.includes(' - ')) { const idx = text.indexOf(' - '); const a = text.slice(0, idx); const b = text.slice(idx); // keep " - rest" with leading space return <>{a}{b}; } if (text.includes('—')) { const [a, b] = text.split('—'); return <>{a}{b}; } return text; }; return (
{t.hero.kicker} {renderHeadline()} {sub || t.hero.sub} {t.hero.ctaPrimary} ↗ {t.hero.ctaSecondary}
); } // ── Marquee ────────────────────────────────────────────────────────────── function Marquee() { const items = ['rely on AG', 'Frederik Schröder', 'Pusch GmbH', 'rely on AG', 'Frederik Schröder', 'Pusch GmbH']; const Star = () => ; const row = <> {items.map((x, i) => {x})} ; return (
{row}{row}
); } // ── Trusted ────────────────────────────────────────────────────────────── function TypingTitle({ text, style, className }) { const ref = useRef(null); const [shown, setShown] = useState(''); const [done, setDone] = useState(false); const [started, setStarted] = useState(false); useEffect(() => { const el = ref.current;if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting && !started) {setStarted(true);io.unobserve(el);}}); }, { threshold: 0.35 }); io.observe(el); return () => io.disconnect(); }, [started]); useEffect(() => { if (!started) return; let i = 0; const tick = () => { i++; setShown(text.slice(0, i)); if (i < text.length) { const ch = text[i - 1]; // Slight pauses on dots/newlines for rhythm const delay = ch === '.' ? 240 : ch === '\n' ? 320 : 55 + Math.random() * 35; timer = setTimeout(tick, delay); } else { setDone(true); } }; let timer = setTimeout(tick, 400); return () => clearTimeout(timer); }, [started, text]); return (

{shown}

); } function Trusted({ t }) { return (
{t.trusted.sub} {t.trusted.cta} ↗
); } // ── Scroll-driven word reveal (Magic UI style) ─────────────────────────── function ScrollRevealWords({ text }) { const words = (text || '').split(' '); const ref = React.useRef(null); const [progress, setProgress] = React.useState(0); React.useEffect(() => { const el = ref.current; if (!el) return; let raf = 0; const compute = () => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || 1; // Start when the element enters at 85% viewport, finish at 35% const start = vh * 0.85; const end = vh * 0.35; const p = (start - r.top) / (start - end); setProgress(Math.max(0, Math.min(1, p))); }; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(compute); }; compute(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); cancelAnimationFrame(raf); }; }, []); return ( {words.map((w, i) => { const start = i / words.length; const end = (i + 1) / words.length; const local = (progress - start) / (end - start); const op = Math.max(0, Math.min(1, local)); return ( {w} {w} {i < words.length - 1 ? ' ' : null} ); })} ); } // ── About (Anna) ──────────────────────────────────────────────────────── function Why({ t }) { return (
{t.why.kicker}

{t.why.paragraphs.map((p, i) =>

{p}

)} {t.why.learn} ↗
Anna
Anna Juckers
Founder · AV Growthstudio
); } // ── Services ────────────────────────────────────────────────────────────── function Services({ t, items }) { const icons = [ICONS.web, ICONS.recruit, ICONS.linkedin, ICONS.ads]; return (
{t.services.kicker}

{items && items.title || t.services.title}

{t.services.sub}

{t.services.cta} ↗
{(items?.list || t.services.items).map((s, i) =>
{icons[i]}

{s.title}

{s.body}

)}
); } // ── Showreel ───────────────────────────────────────────────────────────── function Showreel({ t }) { return (
{t.showreel.kicker}

{t.showreel.title}

{t.showreel.sub}
); } // ── Projects ───────────────────────────────────────────────────────────── function Projects({ t }) { return (
{t.projects.kicker}

{t.projects.title}

{t.projects.sub}

{t.projects.cta} ↗
{t.projects.items.map((p, i) =>
{p.image && }
{t.projects.view} ↗
{p.tag && {p.tag}}{p.sub && {p.sub}}

{p.title}

{p.body}

 )}
); } // ── Cases (manual carousel — native horizontal scroll + arrow buttons) ─── function Cases({ t }) { const items = t.cases.items; const trackRef = useRef(null); const scrollByCard = (dir) => { const el = trackRef.current; if (!el) return; const card = el.querySelector('.case-card'); const step = card ? card.getBoundingClientRect().width + 24 : el.clientWidth / 4; el.scrollBy({ left: dir * step, behavior: 'smooth' }); }; const next = () => scrollByCard(1); const prev = () => scrollByCard(-1); return (
{t.cases.kicker}

{t.cases.title}

{t.cases.sub}
{[...items, items[0]].map((c, i) =>
{(c.tags || (c.tag ? [c.tag] : [])).map((tg, k) => {tg} )}

{c.title}

{c.body}

{t.cases.challenge}
{c.challenge}
{t.cases.solution}
{c.solution}
{c.a}
{c.aL}
{c.b}
{c.bL}
)}
); } // ── Stats ──────────────────────────────────────────────────────────────── function Stats({ t, items }) { return (
{t.stats.kicker}

{t.stats.title}

 {(items || t.stats.items).map((s, i) =>
{s.prefix && {s.prefix}} {s.suffix && {s.suffix}}
{s.label}
)}
); } // ── Testimonials ───────────────────────────────────────────────────────── function Testimonials({ t }) { return (
{t.testimonials.kicker}

{t.testimonials.title}

 {t.testimonials.items.map((q, i) =>
"{q.quote}"
{q.name}
{q.role}
)}
); } // ── Mission ────────────────────────────────────────────────────────────── function Mission({ t, mission }) { const ref = React.useRef(null); const [active, setActive] = React.useState(false); React.useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) setActive(true);}); }, { threshold: 0.3 }); io.observe(ref.current); return () => io.disconnect(); }, []); const title = mission.title || ''; const letters = title.split(''); const stepMs = 55; // Two fluid blob SVGs — animated organic shapes with multi-stop holographic gradients. const Blob = ({ side }) => { const id = `bg-${side}`; return ( ); }; return (
{mission.kicker}

{title}

{mission.sub}

{mission.btn1} ↗ {mission.btn2} ↗
); } // ── Recognition ────────────────────────────────────────────────────────── function Recognition({ t }) { return (
{t.recognition.kicker}

{t.recognition.title}

{t.recognition.sub}

 {t.recognition.items.map((r, i) =>
{r.co.charAt(0)}
{r.co}
{r.sub}
{r.award}{r.year}
)}
); } // ── Team ───────────────────────────────────────────────────────────────── function Team({ t }) { return (
{t.team.kicker}

{t.team.title}

{t.team.sub}

{t.team.cta} ↗
{t.team.items.map((m, i) =>

{m.name}

{m.role}

{m.body}

)}
); } // ── Blog ───────────────────────────────────────────────────────────────── function Blog({ t }) { return (
{t.blog.kicker}

{t.blog.title}

{t.blog.sub}

{t.blog.cta} ↗
{t.blog.items.map((b, i) =>
{b.image && }
{b.tag}{b.read}

{b.title}

 )}
); } // ── Big CTA ────────────────────────────────────────────────────────────── function BigCTA({ t }) { return (
{t.cta.kicker} {t.cta.sub} {t.cta.a} ↗ {t.cta.b} ↗
); } // ── Footer ─────────────────────────────────────────────────────────────── function Footer({ t, brand }) { return ( ); } // ── Cursor glow effect ─────────────────────────────────────────────────── function CursorGlow() { const ref = useRef(null); useEffect(() => { const el = ref.current;if (!el) return; let x = window.innerWidth / 2,y = window.innerHeight / 2; let tx = x,ty = y; const onMove = (e) => {tx = e.clientX;ty = e.clientY;}; window.addEventListener('mousemove', onMove); let raf; const tick = () => { x += (tx - x) * 0.12;y += (ty - y) * 0.12; el.style.left = x + 'px';el.style.top = y + 'px'; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => {window.removeEventListener('mousemove', onMove);cancelAnimationFrame(raf);}; }, []); return
; } // ── App ────────────────────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "brand": "AV Growthstudio", "accent": "#a78bff", "headlineDe": "Werde sichtbar - alle Marketingmaßnahmen aus einer Hand, um deinen RR zu steigern.", "headlineEn": "Get seen - every marketing lever from one team, built to grow your recurring revenue.", "subDe": "Wir verbinden 3D-Webdesign, Tech-Sales-Recruiting, LinkedIn Personal Branding und Performance-Ads zu einem geschlossenen Wachstumssystem - entwickelt für ambitionierte B2B-Marken.", "subEn": "We connect 3D web design, tech-sales recruiting, LinkedIn personal branding and performance ads into one closed-loop growth system — built for ambitious B2B brands.", "service1Title": "3D Conversion Websites", "service1Body": "Kinetische Sites, die wie ein Pitch funktionieren und Besucher in Pipeline verwandeln. Durchschnittlich 2.4x höhere Conversion-Rate als statische Seiten.", "service2Title": "Tech Sales Recruiting", "service2Body": "Wir finden und gewinnen die Top 1% Sales-Talente für deine SaaS oder Tech-Marke, von Sourcing bis Onboarding in unter 60 Tagen.", "service3Title": "LinkedIn Personal Branding", "service3Body": "Founder-led Content, der Reichweite, Autorität und Inbound-Leads gleichzeitig aufbaut. Von der Strategie bis zum fertigen Post . Du bleibst sichtbar ohne selbst zu schreiben.", "service4Title": "Paid & Organic Ads", "service4Body": "Schluss mit Ads die Budget verbrennen. Wir bauen Performance-Systeme über Meta, die planbar qualifizierte Leads liefern und psychologischen have-to-buy-Trigger.", "stat1": "98", "stat2": "35", "stat3": "2", "stat4": "10", "showWhy": true, "showShowreel": false, "showProjects": true, "showCases": true, "showStats": true, "showTestimonials": true, "showRecognition": false, "showMission": true, "missionKicker": "Unsere Mission", "missionTitle": "Wachstum aus einer Hand.", "missionSub": "Strategie, Design und Vertrieb — in einem System. Wir bauen Marken, die nicht nur sichtbar werden, sondern dominieren.", "missionBtn1": "Kostenlose Conversion-Analyse", "missionBtn2": "Projekte", "showTeam": true, "showBlog": true } /*EDITMODE-END*/; function App() { const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS); const [lang, setLang] = useState(() => { try {return localStorage.getItem('av-lang') || 'de';} catch (e) {return 'de';} }); useEffect(() => { try {localStorage.setItem('av-lang', lang);} catch (e) {} document.documentElement.setAttribute('lang', lang); }, [lang]); const t = window.CONTENT[lang]; // Apply accent color useEffect(() => { document.documentElement.style.setProperty('--accent', tw.accent); // Derive accent-2 (lighter) and glow document.documentElement.style.setProperty('--accent-glow', tw.accent + '73'); }, [tw.accent]); const headline = lang === 'de' ? tw.headlineDe : tw.headlineEn; const sub = lang === 'de' ? tw.subDe : tw.subEn; const servicesItems = lang === 'de' ? { list: [ { title: tw.service1Title, body: tw.service1Body }, { title: tw.service2Title, body: tw.service2Body }, { title: tw.service3Title, body: tw.service3Body }, { title: tw.service4Title, body: tw.service4Body }] } : null; const statsItems = t.stats.items.map((s, i) => ({ ...s, num: [tw.stat1, tw.stat2, tw.stat3, tw.stat4][i] ?? s.num })); return ( <>