/* global React, ArrowUpRight */ const { useState: useS, useRef: useR } = React; const SM = window.Motion.motion; const rise = (delay = 0) => ({ initial: { opacity: 0, y: 26, filter: "blur(8px)" }, whileInView: { opacity: 1, y: 0, filter: "blur(0px)" }, viewport: { once: true, margin: "-70px" }, transition: { duration: 0.7, ease: "easeOut", delay }, }); const Section = ({ id, children, className = "", panel = false }) => ( panel ? (
{children}
) : (
{children}
) ); const Em = ({ children }) => {children}; /* kicker/eyebrow - rótulo SF Pro em caixa-alta espaçada (pareia com a Awesome) */ const Kicker = ({ children, center }) => (
{children}
); /* ------------- Seção 4 - De uma referência → LUT (emocional) ------------- */ function RefToLut() { const passos = [ "Encontre uma imagem de tirar o fôlego", "Importe para a plataforma", "Ajuste alguns controles", "Baixe seu LUT", "Aplique em qualquer vídeo", ]; return (
Como funciona
{/* título (topo-esquerda) */} Da referência ao look pronto. {/* intro (topo-direita) — alinha com o topo do título */} A maneira mais simples de transformar uma estética que você admira em um visual que você pode usar no seu conteúdo {/* vídeo placeholder (baixo-esquerda) */}
Vídeo em breve
{/* lista de passos (baixo-direita) */} {passos.map((p) => (
  • {p}
    • ))}
  • Pronto.
    • ); } /* --------- Seção 5 - Encontrar uma estética deveria ser simples (dor) --------- */ function ProblemSolution() { const dores = [ "Entender de colorização", "Comprar dezenas de LUTs", "Testar um por um", "Ajustar na tentativa e erro", "Passar horas editando", "Torcer pra dar certo", ]; const novo = ["Escolha uma referência", "Ajuste os controles", "Exporte o LUT"]; const eyebrowLight = "text-[11px] tracking-[0.16em] uppercase font-body font-medium"; return (
    {/* marca-d'água 幽玄 ao fundo (igual ao Manifesto) */}
    Por que a Yugen Grade

    Encontrar uma estética bonita não deveria ser um sufoco.

    {/* SEM A YUGEN GRADE — problema, secundário (menor, mais apagado) */} Sem a Yugen Grade
      {dores.map((d) => (
    • {d}
      • ))}

    …e ainda sem garantia nenhuma

     {/* COM A YUGEN GRADE — solução, ênfase (maior e mais claro); alinhado no topo, sem divisória */} Com a Yugen Grade
      {novo.map((p) => (
    • {p}
      • ))}

    …e o resultado já está pronto
    ); } /* ------------- Seção 6 - Como funciona (técnico, 3 boxes + GIFs) ------------- */ function HowItWorks() { const passos = [ { t: "Escolha uma referência", d: "Importe qualquer imagem ou selecione um dos looks da galeria", vid: "assets/video/passo-1.mp4" }, { t: "Construa sua estética", d: "Intensidade, contraste, saturação, temperatura... Tudo em tempo real", vid: "assets/video/passo-2.mp4?v=2" }, { t: "Exporte e aplique", d: "Baixe seu LUT e use no CapCut, Premiere, DaVinci, Final Cut ou BlackMagic", vid: "assets/video/passo-3.mp4?v=3" }, ]; // mobile: garante autoplay tocando cada vídeo quando entra na tela (mais confiável que só o atributo) React.useEffect(() => { const vids = Array.from(document.querySelectorAll("#como-funciona video")); if (!vids.length) return; const tryPlay = (v) => { v.muted = true; const p = v.play(); if (p && p.catch) p.catch(() => {}); }; if (!("IntersectionObserver" in window)) { vids.forEach(tryPlay); return; } const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) tryPlay(e.target); }); }, { threshold: 0.2 }); vids.forEach((v) => io.observe(v)); return () => io.disconnect(); }, []); return (
    Como funciona

    Seu novo fluxo de cor em menos de 1 minuto.

    Com mais qualidade e menos fricção.

    {passos.map((p, i) => ( {/* vídeo placeholder */}
    {p.vid ? (
    {/* título + descrição */}

    {p.t}

    {p.d}

     ))}
    ); } /* ----------- Card de look com slider antes/depois (sem × com o look) ----------- */ function LookSlider({ look, delay }) { const [pos, setPos] = useS(52); const stage = useR(null); const drag = useR(false); const vA = useR(null); // depois const vB = useR(null); // antes // vídeos tocam quando o look está visível na tela (ver useEffect); arrastar só move o corte const playVids = (on) => { const a = vA.current, b = vB.current; if (!a || !b) return; if (on) { b.currentTime = a.currentTime; a.play().catch(() => {}); b.play().catch(() => {}); } else { a.pause(); b.pause(); } }; const set = (x) => { const r = stage.current.getBoundingClientRect(); setPos(Math.max(4, Math.min(96, ((x - r.left) / r.width) * 100))); }; // toca os vídeos quando o look entra na tela (pausa ao sair) — comparação "viva" sem precisar segurar. // Também força o 1º frame no iOS (que fica branco se o vídeo nunca tocou). React.useEffect(() => { const el = stage.current; if (!el) return; const t = setTimeout(() => { [vA.current, vB.current].forEach((v) => { if (v) { v.muted = true; const p = v.play(); if (p && p.then) p.then(() => v.pause()).catch(() => {}); } }); }, 120); const io = new IntersectionObserver((ents) => { ents.forEach((e) => playVids(e.isIntersecting)); }, { threshold: 0.35 }); io.observe(el); return () => { clearTimeout(t); io.disconnect(); }; }, []); return ( {/* comparador antes/depois */}
    { drag.current = true; set(e.clientX); e.currentTarget.setPointerCapture(e.pointerId); }} onPointerMove={(e) => { if (drag.current) set(e.clientX); }} onPointerUp={() => { drag.current = false; }} onPointerCancel={() => { drag.current = false; }} > {look.after ? ( <> {/* DEPOIS - vídeo COM o look */}