# Orbis.Nft — Landing Page Template (React + TS + Vite + Tailwind)

Landing page moderna (liquid glass + motion) pra drop NFT/produto digital/SaaS. Baseada na spec Orbis.Nft mas generalizável pra qualquer marca.

## Stack

- **Framework:** React 18 + TypeScript + Vite
- **Styling:** Tailwind CSS + CSS custom properties
- **Motion:** Framer Motion (ou CSS `@keyframes` + `prefers-reduced-motion`)
- **Fonts:** Anton (display condensed) + Condiment (script accent) + Inter (body)
- **Deploy:** Vercel (edge functions opcional pra gate/wallet)

## Setup rápido

```bash
pnpm create vite@latest orbis-landing -- --template react-ts
cd orbis-landing
pnpm add tailwindcss postcss autoprefixer framer-motion
pnpm dlx tailwindcss init -p
```

## Estrutura

```
src/
├── main.tsx
├── App.tsx
├── components/
│   ├── Hero.tsx           # headline + CTA + orbital 3D mock
│   ├── LiquidGlass.tsx    # wrapper com backdrop-blur + border gradient
│   ├── DropCountdown.tsx  # countdown ao drop
│   ├── Manifesto.tsx      # seção texto-sobre-textura
│   ├── Gallery.tsx        # grid de items com hover tilt
│   ├── Mint.tsx           # CTA wallet connect
│   └── Footer.tsx
├── styles/
│   ├── globals.css        # fonts + CSS vars + keyframes
│   └── glass.css          # liquid glass mixin
└── assets/
    ├── fonts/             # Anton.woff2, Condiment.woff2
    └── video/             # hero-bg.mp4
```

## Liquid glass CSS

```css
.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.4);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
```

## Tipografia

```css
@font-face {
  font-family: "Anton";
  src: url("/fonts/Anton.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Condiment";
  src: url("/fonts/Condiment.woff2") format("woff2");
  font-display: swap;
}

h1.display {
  font-family: "Anton", sans-serif;
  font-size: clamp(64px, 12vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.accent {
  font-family: "Condiment", cursive;
  font-size: clamp(36px, 6vw, 96px);
  font-style: italic;
  color: var(--accent);
}
```

## Paleta base (ajustar por marca)

```css
:root {
  --bg: #050507;
  --fg: #f5f5f7;
  --muted: #8b8b93;
  --accent: #3dff9c;       /* trocar por cor da marca */
  --accent-alt: #ff3d6b;
}
```

## Hero padrão

```tsx
<section className="relative h-screen overflow-hidden">
  <video
    src="/video/hero-bg.mp4"
    autoPlay loop muted playsInline
    className="absolute inset-0 w-full h-full object-cover opacity-60"
  />
  <div className="relative z-10 flex h-full items-center justify-center text-center">
    <div>
      <span className="accent">the new drop is</span>
      <h1 className="display text-white">orbis</h1>
      <button className="glass mt-12 px-8 py-4">Mint now</button>
    </div>
  </div>
</section>
```

## Performance

- Imagens em WebP + `<picture>` com AVIF fallback
- Vídeo hero: 1080p max, ≤4MB, `preload="metadata"`
- Lighthouse target: LCP < 2s, CLS < 0.05, TBT < 200ms
- Deploy Vercel edge + Image Optimization API

## Adaptação Squad Film

Para lançamento de serviço/portfolio premium:
- Trocar "mint now" → "reserve sua data" / "ver case"
- Trocar cor accent pelo hex primário da marca cliente
- Hero vídeo = recorte 8s do melhor trabalho
- Galeria = 9 cases em grid 3×3 com liquid glass

## Cross-ref

- Assets visuais: `references/01-y2k-design.md` + `04-mec-branded-ai.md`
- Vídeo hero motion: `references/03-tim-koda-motion.md`
- Publicação paid: `references/06-viznfr-ad-dashboard.md`