// Hero section — pixel-faithful to the Canva mock // I-beam text cursor: vertical bar + small horizontal serifs, sits on top of fill function Bracket({ color = "#0A0A0A", side }) { return ( ); } // Highlighted phrase: colored fill with I-beam markers ON TOP at each end function HiBox({ children, bg, color = "#fff", italic = false }) { return ( {children} ); } /* 3D-ish blob (puffy plus / star) drawn as SVG so we don't need raster assets */ function Blob3D({ color, accent, size = 90, style, className }) { return ( {/* puffy 4-petal cross */} {/* highlight */} ); } /* Polaroid frame: white border 8px on sides/top, 28px bottom, light shadow, tiny radius, fixed rotation per instance. Image keeps natural aspect: fixed height (180px), width auto. */ function PolaroidFrame({ src, rotate = 0 }) { return (
); } /* Three independent horizontal marquee rows, each looping right → left. Asymmetric image distribution between rows; per-image fixed rotation. Hover anywhere on the wrapper pauses all three tracks together. */ const MARQUEE_ROW_1 = [ "assets/media/marquee/m1.webp", "assets/techy/marquee/t3.webp", "assets/media/marquee/m5.webp", "assets/techy/marquee/t11.webp", "assets/media/marquee/m8.webp", "assets/media/marquee/m13.webp", "assets/techy/marquee/t5.webp", "assets/media/marquee/m11.webp", "assets/techy/marquee/t14.webp"]; const MARQUEE_ROW_2 = [ "assets/techy/marquee/t1.webp", "assets/media/marquee/m2.webp", "assets/techy/marquee/t9.webp", "assets/media/marquee/m4.webp", "assets/techy/marquee/t6.webp", "assets/media/marquee/m14.webp", "assets/techy/marquee/t7.webp", "assets/media/marquee/m9.webp"]; const MARQUEE_ROW_3 = [ "assets/media/marquee/m3.webp", "assets/techy/marquee/t2.webp", "assets/techy/marquee/t13.webp", "assets/media/marquee/m6.webp", "assets/techy/marquee/t10.webp", "assets/media/marquee/m12.webp", "assets/techy/marquee/t8.webp", "assets/techy/marquee/t4.webp", "assets/techy/marquee/t12.webp"]; // Per-image fixed rotations between -5° and +5°, deterministic per row. const ROTS_1 = [-3, 2, -4, 1, 4, -2, 3, -1, 5]; const ROTS_2 = [3, -2, 4, -1, 2, -5, 1, -3]; const ROTS_3 = [-4, 3, -1, 5, -3, 2, -2, 4, -5]; function MarqueeRow({ images, rots, duration, className }) { // Duplicate the set twice; animating to translateX(-50%) lands on the // exact same pixel as 0 → seamless infinite loop with variable widths. const doubled = [...images, ...images]; return (
{doubled.map((src, i) => )}
); } function PolaroidMarquee() { return (
); } /* ───────────────────────────────────────────────────────────────────────── HERO VISUAL — three swappable variants that sit between the title and the "Siamo un media digitale" subtitle. Selectable via Tweaks (heroVariant). ───────────────────────────────────────────────────────────────────────── */ /* Variant B: BRAND TRIO 2 oversized polaroid-style cards for Economico / Techy, each with the 3D brand artwork + a colored glow puddle underneath and a handwritten caption. Lifts on hover. */ const BRAND_TRIO = [ { name: "Economico", art: "assets/media/card-economico.webp", glow: "assets/media/glow-yellow.webp", tint: "#F0B83A", rotate: -5 }, { name: "Techy", art: "assets/media/card-techy.webp", glow: "assets/media/glow-pink.webp", tint: "#E94B7A", rotate: 3 } ]; function BrandCard({ name, art, glow, tint, rotate }) { const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ position: "relative", flex: "0 1 280px", maxWidth: 320, margin: 0, background: "#fff", padding: "14px 14px 36px", borderRadius: 6, boxShadow: hovered ? "0 2px 4px rgba(0,0,0,0.08), 0 30px 50px -18px rgba(0,0,0,0.28)" : "0 1px 2px rgba(0,0,0,0.06), 0 14px 28px -12px rgba(0,0,0,0.22)", transform: `rotate(${rotate}deg) translateY(${hovered ? "-8px" : "0"})`, transition: "transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms", zIndex: hovered ? 3 : 1 }}> {/* glow puddle behind the artwork */}
{name}
{name}
); } function BrandTrio() { return (
{BRAND_TRIO.map((b) => )}
); } /* Variant C: STICKER TABLEAU Static curated arrangement of ~9 polaroids + a few floating 3D blobs. Items are absolutely-positioned within a fixed-height stage; subtle per-item hover lift. */ const TABLEAU = [ { src: "assets/media/marquee/m1.webp", x: "4%", y: "38%", rot: -8, h: 150, z: 2 }, { src: "assets/techy/marquee/t3.webp", x: "14%", y: "8%", rot: 4, h: 165, z: 3 }, { src: "assets/media/marquee/m5.webp", x: "26%", y: "52%", rot: -3, h: 175, z: 4 }, { src: "assets/techy/marquee/t11.webp", x: "36%", y: "14%", rot: 6, h: 160, z: 3 }, { src: "assets/media/marquee/m8.webp", x: "48%", y: "48%", rot: -5, h: 180, z: 5 }, { src: "assets/techy/marquee/t5.webp", x: "60%", y: "6%", rot: 3, h: 165, z: 3 }, { src: "assets/media/marquee/m13.webp", x: "72%", y: "40%", rot: -2, h: 170, z: 4 }, { src: "assets/techy/marquee/t14.webp", x: "82%", y: "10%", rot: 7, h: 155, z: 2 }, { src: "assets/media/marquee/m11.webp", x: "88%", y: "54%", rot: -6, h: 145, z: 2 } ]; function TableauItem({ src, x, y, rot, h, z }) { const [hov, setHov] = React.useState(false); return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ position: "absolute", left: x, top: y, transform: `translate(-50%, 0) rotate(${rot}deg) ${hov ? "scale(1.06)" : "scale(1)"}`, transformOrigin: "center center", transition: "transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms", zIndex: hov ? 20 : z, margin: 0, background: "#fff", padding: "6px 6px 22px", borderRadius: 3, boxShadow: hov ? "0 3px 6px rgba(0,0,0,0.1), 0 24px 36px -14px rgba(0,0,0,0.32)" : "0 1px 2px rgba(0,0,0,0.06), 0 8px 18px -8px rgba(0,0,0,0.22)" }}>
); } function PolaroidTableau() { return (
{/* floating accent blobs woven into the composition */} {TABLEAU.map((it, i) => )}
); } /* Switcher */ function HeroVisual({ variant }) { if (variant === "trio") return ; if (variant === "tableau") return ; return ; } /* ───────────────────────────────────────────────────────────────────────── HERO FAN — horizontal row of identically-sized cards rotated around Y in 3D perspective to form a smile arc. Outer cards turn inward (face the centre); the center card faces straight at the viewer. Outer cards bleed past the viewport edges. Subtle directional shading enhances 3D. ───────────────────────────────────────────────────────────────────────── */ const FAN_SOURCES = [ "assets/media/marquee/m1.webp", "assets/techy/marquee/t3.webp", "assets/media/marquee/m5.webp", "assets/techy/marquee/t11.webp", "assets/media/marquee/m8.webp", "assets/techy/marquee/t14.webp", "assets/media/marquee/m13.webp" ]; function FanCard({ src, t }) { // Discrete steps based on |t|: center=0, 2nd-from-center≈0.33, 3rd≈0.67, edge=1 const a = Math.abs(t); // Rotation magnitude const rot = a < 0.1 ? 0 : a < 0.5 ? 28 : a < 0.9 ? 45 : 60; // Sign: left cards (t<0) rotate one way to face centre, right cards the other const angle = -Math.sign(t) * rot; // Slight scale-down toward edges so outer cards read as smaller/farther const scale = a < 0.1 ? 1 : a < 0.5 ? 0.97 : a < 0.9 ? 0.93 : 0.88; // Brightness: centre full, laterals dimmed, extremes more const brightness = a < 0.1 ? 1 : a < 0.9 ? 0.85 : 0.7; const [hov, setHov] = React.useState(false); const transform = hov ? `rotateY(0deg) translateZ(60px) scale(1.05)` : `rotateY(${angle}deg) scale(${scale})`; return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ position: "relative", width: "clamp(180px, 16vw, 240px)", aspectRatio: "4 / 5", marginLeft: "clamp(-44px, -3.4vw, -24px)", transform, transformOrigin: "center center", transition: "transform 420ms cubic-bezier(.2,.7,.2,1), filter 420ms", borderRadius: 16, overflow: "hidden", background: "#111", filter: hov ? "brightness(1)" : `brightness(${brightness})`, zIndex: hov ? 50 : 10 - Math.round(a * 5), cursor: "pointer", flex: "0 0 auto" }}>
); } function HeroFanCards() { const n = FAN_SOURCES.length; const mid = (n - 1) / 2; return (
{FAN_SOURCES.map((src, i) => { const t = (i - mid) / mid; return ; })}
); } /* Painted scenes — illustrative, no external assets */ function ScenePink() { return (
{Array.from({ length: 80 }).map((_, i) => )}
); } function SceneCube() { return (
{/* cube */}
); } function SceneCity() { // top-down city of cube buildings return (
{Array.from({ length: 48 }).map((_, i) => { const colors = ["#3F4B2E", "#6B7B4A", "#D7843E", "#E5A86A", "#A8623A", "#1E2418", "#8FA46C", "#C8842D"]; const c = colors[i % colors.length]; const tall = Math.random() > 0.6; return (
); })}
); } function ScenePhone() { return (
{/* phone slab */}
{/* light streaks */} {[ ["#FF7A2C", 8, 60, 70, 30], ["#5BD6FF", 4, 70, 60, 18], ["#FF3D6E", 14, 50, 62, 36]]. map(([c, x1, y1, x2, y2], i) => )}
); } function HeroSection({ navigate }) { return (
{/* Floating 3D blobs */}
{/* Title */}

Creiamo contenuti che la gente{" "} sceglie di guardare.
Anche per il tuo brand.

{/* Subtitle two-liner */}
Siamo un media digitale.
Ma anche un content studio.

Perché fare contenuti è il nostro pane quotidiano.

{/* CTA buttons (kept from previous build) */}
{ e.preventDefault(); navigate("media"); }} style={{ borderColor: "rgb(18, 62, 48)", borderRadius: "999px 999px 999px 0px", backgroundColor: "#fff", color: "#0A0A0A", transition: "background 200ms, color 200ms, border-color 200ms" }} onMouseEnter={(e) => { e.currentTarget.style.background = "#3FB28E"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#3FB28E"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.color = "#0A0A0A"; e.currentTarget.style.borderColor = "rgb(18, 62, 48)"; }}> Scopri i nostri Media { e.preventDefault(); navigate("agency"); }} style={{ borderRadius: "999px 999px 999px 0px", backgroundColor: "#fff", color: "#0A0A0A", transition: "background 200ms, color 200ms, border-color 200ms" }} onMouseEnter={(e) => { e.currentTarget.style.background = "#3B5BFF"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#3B5BFF"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.color = "#0A0A0A"; e.currentTarget.style.borderColor = ""; }}> Scopri la nostra Agency
); } window.HeroSection = HeroSection;