110 lines
4.4 KiB
TypeScript
110 lines
4.4 KiB
TypeScript
"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>
|
|
);
|
|
}
|