feat(story): celular CC0 com site vivo na tela, ReelDirector scrub em todas as seções e filmstrip pinado de prints reais

2026-08-30 20:00:56 -03:00
1 parent 8be2ba572d
commit ecadb7c540
@@ -0,0 +1,109 @@
+"use client";
+
+import { DrawLine } from "../animations/DrawLine";
+import HorizontalScroll from "../cinematic/HorizontalScroll";
+import { Section } from "../Section";
+
+/**
+ * Palco extra estilo product-page: filmstrip horizontal PINNADO com prints
+ * reais capturados dos deployments em produção (public/assets/prints).
+ * O scroll vertical empurra a faixa na horizontal (scrub), cada card entra
+ * com rotateY/scale ligados ao mesmo trilho — sensação de carrossel de vídeo.
+ */
+
+const PRINTS = [
+  {
+    src: "/assets/prints/print-nutriscan.png",
+    name: "NutriScan",
+    desc: "PWA de dados nutricionais sobre Open Food Facts — busca, Nutri-Score e NOVA.",
+    url: "https://nutriscan.evandro.dev.br",
+    accent: true,
+  },
+  {
+    src: "/assets/prints/print-scplus.png",
+    name: "SCPLUS",
+    desc: "Educação e tecnologia sustentável em Garuva-SC; interface institucional viva.",
+    url: "https://scplus.evandro.dev.br",
+    accent: false,
+  },
+  {
+    src: "/assets/prints/print-sev.png",
+    name: "SEV Moda Íntima",
+    desc: "E-commerce em produção com checkout e catálogo — Next.js ponta a ponta.",
+    url: "https://sevmodaintima.com.br",
+    accent: true,
+  },
+  {
+    src: "/assets/prints/print-asservicos.png",
+    name: "AS Serviços",
+    desc: "Presença digital SSR para operação de serviços, pronta para crescer.",
+    url: "https://asservicos.com",
+    accent: false,
+  },
+];
+
+export default function PrintReel() {
+  return (
+    <Section
+      id="print-reel"
+      eyebrow="No ar, rodando"
+      title="Prints ao vivo dos sistemas em produção"
+      description="Capturas reais dos deployments — role e a faixa corre na horizontal como um reel."
+      dark
+      disableChildrenAnimation
+    >
+      <div className="flex h-[100dvh] items-center">
+        <HorizontalScroll className="w-full">
+        {PRINTS.map((print) => (
+          <a
+            key={print.name}
+            data-scroll-item
+            href={print.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="group flex w-[min(78vw,380px)] shrink-0 flex-col"
+          >
+            {/* moldura de navegador */}
+            <div className="overflow-hidden rounded-t-xl border border-b-0 border-[rgba(255,255,255,.12)] bg-[rgba(255,255,255,.05)] px-4 py-3">
+              <div className="flex items-center gap-2">
+                <span className="h-2.5 w-2.5 rounded-full bg-[rgba(255,255,255,.18)]" />
+                <span className="h-2.5 w-2.5 rounded-full bg-[rgba(255,255,255,.18)]" />
+                <span
+                  className={`h-2.5 w-2.5 rounded-full ${print.accent ? "bg-[var(--slash)]" : "bg-[rgba(255,255,255,.18)]"}`}
+                />
+                <span className="ml-2 truncate font-mono text-[10px] text-[rgba(244,242,237,.5)]">
+                  {new URL(print.url).hostname}
+                </span>
+              </div>
+            </div>
+            <div className="relative h-[420px] overflow-hidden border border-[rgba(255,255,255,.12)] bg-black">
+              {/* o print real, deslizando de leve dentro da moldura (Ken Burns) */}
+              <img
+                src={print.src}
+                alt={`Captura do projeto ${print.name} em produção`}
+                loading="lazy"
+                className="absolute inset-x-0 top-0 w-full origin-top scale-[1.04] object-cover object-top transition-transform duration-700 ease-out group-hover:-translate-y-6 group-hover:scale-100"
+              />
+              <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,transparent_60%,rgba(10,10,10,.85)_100%)]" />
+            </div>
+            <div className="border border-t-0 border-[rgba(255,255,255,.12)] bg-[rgba(255,255,255,.03)] p-sp-5">
+              <div className="flex items-center justify-between">
+                <h3 className="font-display text-[18px] font-extrabold tracking-[-0.02em] text-[var(--paper)]">
+                  {print.name}
+                </h3>
+                <span className="font-mono text-[9px] uppercase tracking-[0.14em] text-[var(--slash)]">
+                  ao vivo ↗
+                </span>
+              </div>
+              <DrawLine delay={0.1} />
+              <p className="mt-sp-2 text-[13px] leading-6 text-[rgba(244,242,237,.66)]">
+                {print.desc}
+              </p>
+            </div>
+          </a>
+        ))}
+        </HorizontalScroll>
+      </div>
+    </Section>
+  );
+}