import React, { useEffect, useRef, useState } from "react"; function cx(...parts) { return parts.filter(Boolean).join(" "); } const palette = { orange: "#fd5200", black: "#050505", paper: "#f5f0e8", blue: "#1a3de8", white: "#ffffff", }; const sections = [ { eyebrow: "01 - Who we are", label: "Qui nous sommes", title: ["Create", "Without", "Limits"], body: "We believe every artist deserves a platform that puts creativity first. No algorithms, no noise - just pure art and the people who make it.", background: palette.orange, color: palette.white, border: "rgba(0,0,0,0.85)", }, { eyebrow: "02 - The mission", label: "La mission", title: ["Art", "First", "Always"], body: "A global community built for artists, by artists. We're rewriting the rules of how creative work gets seen, shared, and valued.", background: palette.black, color: palette.white, border: "rgba(255,255,255,0.45)", groups: [ [ ["Discovery", "Human-curated collections that put real eyes on real art."], ["Community", "Find collaborators, mentors, and fellow creatives."], ["Value", "Fair pricing. Transparent commissions. Artists keep what they earn."], ], [ ["Exhibitions", "Virtual and physical showcases curated from our global network."], ["Mentorship", "Paired guidance from established artists who have walked the path."], ["Residencies", "Access funded creative retreats around the world."], ], ], closing: "Every feature we build starts with one question - does this serve the artist?", }, { eyebrow: "03 - How it works", label: "Comment ça marche", title: ["Show", "Up.", "Stand", "Out."], body: "Three steps. Zero complexity. Your creative career starts moving the moment you sign up.", background: palette.paper, color: "#000000", border: "rgba(0,0,0,0.6)", groups: [ [ ["01 - Upload", "Drag, drop, done. Your portfolio goes live in seconds."], ["02 - Connect", "Match with collectors, galleries, and brands."], ["03 - Grow", "Track engagement, manage commissions, and scale your practice."], ], [ ["04 - Sell", "Set your prices, manage editions, handle licensing."], ["05 - Collaborate", "Find your people through shared projects."], ["06 - Evolve", "Flexible tools that adapt as your practice changes."], ], ], }, { eyebrow: "04 - The vision", label: "La vision", title: ["Future", "Of", "Art"], body: "We're not just building a platform. We're building a movement.", background: palette.blue, color: palette.white, border: "rgba(255,255,255,0.42)", groups: [ [ ["10K+", "Artists from 80 countries already shaping the future with us."], ["$2M+", "Paid directly to creators in our first year."], ["100%", "Artist-owned. Every decision starts with the creator."], ], [ ["Open access", "No invite codes. If you make art, you belong here."], ["Global reach", "Your work seen in 120+ countries from day one."], ["Artist-first economics", "You keep 90% of every sale."], ], ], }, { eyebrow: "05 - Join us", label: "Nous rejoindre", title: ["Ready", "To", "Begin?"], body: "Take control of your creative journey. Join now and let's shape the future of the art world together.", background: palette.black, color: palette.white, border: "rgba(255,255,255,0.38)", }, ]; function useReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { if (typeof window === "undefined" || !window.matchMedia) return; const media = window.matchMedia("(prefers-reduced-motion: reduce)"); const update = () => setReduced(media.matches); update(); media.addEventListener("change", update); return () => media.removeEventListener("change", update); }, []); return reduced; } export function FlowSection(props) { const { children, className, style } = props; const ariaLabel = props["aria-label"]; return (

{children}

); } function Divider({ color }) { return

; } function FeatureGrid({ items = [] }) { return (

{items.map(([title, copy]) => (

{title}

{copy}

))}

); } export default function FlowArt(props = {}) { const className = props.className || ""; const ariaLabel = props["aria-label"] || "Story scroll"; const containerRef = useRef(null); const reducedMotion = useReducedMotion(); useEffect(() => { const container = containerRef.current; if (!container || reducedMotion) return undefined; const innerPanels = Array.from( container.querySelectorAll("[data-flow-section] .flow-art-container"), ); const update = () => { const height = Math.max(container.clientHeight, 1); innerPanels.forEach((panel, index) => { const section = panel.parentElement; if (!section) return; const rect = section.getBoundingClientRect(); const hostRect = container.getBoundingClientRect(); const top = rect.top - hostRect.top; const progress = Math.min(1, Math.max(0, 1 - top / height)); const rotation = index === 0 ? 0 : (1 - progress) * 30; panel.style.transform = "rotate(" + rotation.toFixed(2) + "deg)"; }); }; update(); container.addEventListener("scroll", update, { passive: true }); window.addEventListener("resize", update); return () => { container.removeEventListener("scroll", update); window.removeEventListener("resize", update); }; }, [reducedMotion]); return (

{sections.map((section, index) => (

{section.eyebrow}

{section.title.map((line) => ( {line}
))}

{section.body}

{section.groups && section.groups.map((group, groupIndex) => ( ))} {section.closing && ( <>

{section.closing}

)} ))}

); }

{section.title.map((line) => ( {line} ))}

{section.title.map((line) => ( {line}
))}

Flow Art Story Scroll