); } // ============================================ // Inline icons (lucide-style monoline) // ============================================ const Icon = ({ children, size = 20, color = "currentColor", stroke = 1.5 }) => ( ); const Icons = { ArrowRight: (p) => , ArrowDown: (p) => , Calendar: (p) => , Play: (p) => , Film: (p) => , Zap: (p) => , TrendUp: (p) => , Star: (p) => , Check: (p) => , Plus: (p) => , Minus: (p) => , Menu: (p) => , X: (p) => , Phone: (p) => , Mail: (p) => , Instagram: (p) => , Linkedin: (p) => , Imdb: (p) => , Brain: (p) => , Aperture: (p) => , Target: (p) => , Sparkles: (p) => , ExternalLink: (p) => , }; // ============================================ // Router (hash-based) // ============================================ function useRoute() { const [route, setRoute] = useState(() => { const h = window.location.hash.replace("#/", "").replace("#", ""); return h || "home"; }); useEffect(() => { const handler = () => { const h = window.location.hash.replace("#/", "").replace("#", ""); setRoute(h || "home"); window.scrollTo({ top: 0, behavior: "instant" }); }; window.addEventListener("hashchange", handler); return () => window.removeEventListener("hashchange", handler); }, []); return [route, (r) => { window.location.hash = "/" + r; }]; } function Link({ to, children, className, onClick, ...rest }) { return ( { if (onClick) onClick(e); }} {...rest} >{children} ); } // ============================================ // Nav // ============================================ function Nav({ route }) { const [scrolled, setScrolled] = useState(false); const [mobile, setMobile] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { const onKey = (e) => { if (e.key === "Escape") setMobile(false); }; if (mobile) window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [mobile]); const links = [ { to: "home", label: "Home" }, { to: "projects", label: "Projects" }, { to: "pricing", label: "Pricing" }, { to: "about", label: "About" }, { to: "contact", label: "Contact" }, ]; return ( <> {mobile && (

{links.map((l) => ( setMobile(false)}>{l.label} ))}

setMobile(false)}> Book a strategy call

)} ); } // ============================================ // Footer // ============================================ function Footer() { return ( ); } // ============================================ // Final CTA — reused on every page // ============================================ function FinalCTA({ headline, sub }) { return (

{/* radial glow */}

→ Let's talk

{headline || (<>Ready to scale with premium creative?)}

{sub || "Flow West Films combines cinematic production, ad creative and performance thinking into one external premium team."}

Book a strategy call

FLOWWESTFILMS.DE

); } // ============================================ // Trust marquee (shared) // ============================================ function TrustMarquee() { // Clients with real logo files use an img; others render as styled wordmarks. // All logo images get filter:brightness(0)invert(1) so they appear white on the dark bg. // viral_house.svg is already designed for dark backgrounds (white+red) so no filter. // h: logo display height in px (default 26). Use smaller values for very wide wordmarks. const clients = [ { name: "Porsche", logo: "assets/logos/porsche.svg", filter: true, h: 11 }, { name: "Radisson Blu", logo: "assets/logos/radisson_blu.svg", filter: true, h: 28 }, { name: "Thomas Sabo", logo: "assets/logos/thomas_sabo.png", filter: true, h: 46 }, { name: "Swarovski", logo: "assets/logos/swarovski.svg", filter: true, h: 18 }, { name: "viral house", logo: "assets/logos/viral_house.svg", filter: false, h: 22 }, { name: "Schmolke Carbon" }, { name: "Hatz Beer" }, { name: "Liqes" }, { name: "Alienwatch" }, { name: "Pane Vino" }, { name: "EasyFoil" }, { name: "Zenroots" }, { name: "Palazzo Stuttgart" }, ]; const items = [...clients, ...clients]; return (

— Trusted by —

{items.map((c, i) => ( {c.logo ? (

) : ( {c.name} )} ))}

); } // ============================================ // TypewriterWord — cycles words letter by letter // ============================================ function TypewriterWord({ words, style, className }) { const [text, setText] = useState(''); const [widx, setWidx] = useState(0); const [deleting, setDeleting] = useState(false); useEffect(() => { const word = words[widx % words.length]; let t; if (!deleting) { if (text.length < word.length) { t = setTimeout(() => setText(word.slice(0, text.length + 1)), 88); } else { t = setTimeout(() => setDeleting(true), 2100); } } else { if (text.length > 0) { t = setTimeout(() => setText(text.slice(0, -1)), 50); } else { setDeleting(false); setWidx(i => (i + 1) % words.length); } } return () => clearTimeout(t); }, [text, deleting, widx, words]); return ( {text || ' '} ); } // ============================================ // VideoModal — full-screen video lightbox // ============================================ function VideoModal({ src, onClose }) { useEffect(() => { const esc = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', esc); document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', esc); document.body.style.overflow = ''; }; }, [onClose]); // Detect embed URL (Vimeo / YouTube) vs local mp4 const isEmbed = src && (src.includes("vimeo.com") || src.includes("youtube.com") || src.includes("youtu.be")); // Normalise Vimeo share URLs → player embed URL let embedSrc = src; if (isEmbed && src.includes("vimeo.com") && !src.includes("player.vimeo.com")) { const id = src.split("/").filter(Boolean).pop().split("?")[0]; embedSrc = "https://player.vimeo.com/video/" + id + "?autoplay=1&title=0&byline=0&portrait=0"; } if (isEmbed && (src.includes("youtube.com/watch") || src.includes("youtu.be"))) { const id = src.includes("youtu.be") ? src.split("/").pop().split("?")[0] : new URL(src).searchParams.get("v"); embedSrc = "https://www.youtube.com/embed/" + id + "?autoplay=1&rel=0"; } return (

e.stopPropagation()}> {isEmbed ? (