Architectural Portfolio Cinematic

---
version: "alpha"
name: "Architectural Portfolio Cinematic"
description: "Portfolio arquitetônico cinematográfico com vídeo full-screen, vignette, 3 fontes tipográficas, glass cards e navegação entre páginas com transições. Prompt para IA."
colors:
  primary: "#000000"
  secondary: "#FFFFFF"
typography:
  h1:
    fontFamily: Space Grotesk
    fontSize: 2.5rem
    fontWeight: 700
  body-md:
    fontFamily: Space Grotesk
    fontSize: 1rem
    fontWeight: 400
rounded:
  sm: 9999px
  md: 19998px
  lg: 29997px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px
---

## Overview

Portfolio arquitetônico cinematográfico com vídeo full-screen, vignette, 3 fontes tipográficas, glass cards e navegação entre páginas com transições. Prompt para IA. A estética cinematográfica dark com tipografia hierárquica (display + body + mono) tornou-se padrão em portfolios premium de arquitetura e design em 2025-2026. A combinação de vídeo background com vignette, glass cards e navegação paginada com transições suaves cria uma experiência imersiva que eleva o trabalho apresentado.

- Density: 3/10 — Airy
- Variance: 3/10 — Restrained
- Motion: 8/10 — Cinematic

- **Style:** Cinematic Dark, Minimalist Portfolio, Orbitron Display, Glass Cards, Two-Page Navigation
- **Keywords:** architectural portfolio, cinematic, dark theme, minimalist, Orbitron, Space Grotesk, JetBrains Mono, glass morphism, video background, vignette, two-page, project showcase, technical specs, pill tags
- **Era:** 2025-2026 Portfolio/Creative
- **Light/Dark:** ✗ None / ✓ Full

## Colors

- **Preto Fundo** (#000000) — Primary background surface
- **Branco Texto** (#FFFFFF) — Light surface, card backgrounds
- **20 bordas** (rgba(255,255,255,0.2)) — Supporting palette color
- **5 cards** (rgba(255,255,255,0.05)) — Extended palette, decorative use
- **10 hover** (rgba(255,255,255,0.1)) — Extended palette, decorative use
- **60 texto secundário** (rgba(255,255,255,0.6)) — Primary text color
- **40 labels** (rgba(255,255,255,0.4)) — Extended palette, decorative use

## Typography

- **Display / Hero:** Space Grotesk — Weight 700, tight tracking, used for headline impact
- **Accent:** Orbitron — Used for decorative or emphasis text
- **Body:** Space Grotesk — Weight 400, 16px/1.6 line-height, max 72ch per line
- **UI Labels / Captions:** Space Grotesk — 0.875rem, weight 500, slight letter-spacing
- **Monospace:** JetBrains Mono — Used for code, metadata, and technical values

Scale:
- Hero: clamp(2.5rem, 5vw, 4rem)
- H1: 2.25rem
- H2: 1.5rem
- Body: 1rem / 1.6
- Small: 0.875rem

## Layout

- **Grid:** CSS Grid primary. Max-width containment: 1280px centered with 1.5rem side padding.
- **Spacing rhythm:** Balanced. Base unit: 0.5rem (8px).
- **Section vertical gaps:** clamp(4rem, 8vw, 8rem).
- **Hero layout:** Split-screen (text left, visual right).
- **Feature sections:** Zig-zag alternating text+image rows. No 3-equal-columns.
- **Mobile collapse:** All multi-column layouts collapse below 768px. No horizontal overflow.
- **z-index contract:** base (0) / sticky-nav (100) / overlay (200) / modal (300) / toast (500).

## Elevation & Depth

Vídeo background full-screen com vignette radial (70% transparente centro para 70% preto bordas) no desktop e gradient bottom-fade no mobile, glassmorphism cards (bg-white/5 backdrop-blur-xl), navegação entre duas páginas com transições de opacidade e offset Y, tipografia hierárquica com 3 fontes (Orbitron display, Space Grotesk body, JetBrains Mono technical), pill tags com borda white/20, specs técnicas com separadores thin border, counter 1/01 com linha de progresso

- **Physics:** Spring — stiffness 120, damping 20. Confident, weighted transitions.
- **Entry animations:** Fade + translate-Y (16px → 0) over 540ms ease-out. Staggered cascades for lists: 120ms between items.
- **Hover states:** Scale(1.03) + shadow lift over 200ms.
- **Page transitions:** Fade + slide (300ms).
- **Performance:** Only transform and opacity animated. No layout-triggering properties.

## Shapes

Base corner radius: 9999px. See rounded tokens in front matter for the full scale.

## Components

- **Primary Button:** Pill-shaped (9999px) shape. Accent color fill. Hover: 8% darken + subtle lift shadow. Active: -1px translate tactile press. Font weight 600. No outer glows.
- **Secondary / Ghost Button:** Outline variant. 1.5px border in muted color. Text in primary color. Hover: subtle background fill.
- **Cards:** Pill-shaped (9999px) corners. Surface background. Subtle shadow (0 2px 12px rgba(0,0,0,0.06)). 1px border stroke.
- **Inputs:** Label above input. 1px border stroke. Focus ring: 2px accent color offset 2px. Error text below in semantic red. No floating labels.
- **Navigation:** Primary surface background. Active item: accent color indicator. Font weight 500 when active.
- **Skeletons:** Shimmer animation matching component dimensions. No circular spinners.
- **Empty States:** Icon-based composition with descriptive text and action button.

## Do's and Don'ts

- No emojis in UI — use icon system only (Lucide, Heroicons)
- No decorative gradients — flat color only
- No shadows heavier than 0 2px 8px rgba(0,0,0,0.08)
- No pure white (#FFFFFF) backgrounds — use off-white or dark surfaces
- No oversaturated accent colors (saturation cap: 80%)
- No 3-column equal-width feature layouts — use zig-zag or asymmetric grid
- No `h-screen` — use `min-h-[100dvh]`
- No AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen"
- No broken external image links — use picsum.photos or inline SVG
- No generic lorem ipsum in demos

- Do Fundo preto puro #000000 com texto branco
- Do Vídeo background full-screen com vignette radial
- Do Três fontes carregadas (Orbitron + Space Grotesk + JetBrains Mono)
- Do Hierarquia tipográfica clara entre display/body/mono
- Do Glass card com backdrop-blur-xl
- Do Navegação entre duas páginas com transição suave
- Do Specs técnicas com separadores thin border
- Do Pill tags com borda white/20
- Do Counter 1/01 com linha de progresso
- Do Mobile: vídeo 50vh com gradient fade
- Do Custom selection color branco/preto

## Use Case

Portfolios de arquitetura, Estúdios de design, Agências criativas, Portfolios pessoais premium, Showcases de projetos tech

Atue como um Engenheiro Frontend Sênior e UI Designer Especialista.
Sua tarefa é codificar uma Landing Page completa na primeira tentativa.
- Tema da Landing Page: <INSIRA O TEMA>
- Seções a adicionar: <INSIRA AS SEÇÕES>

Gere o código final imediatamente seguindo estas definições:

## Estilo

- **Nome:** Architectural Portfolio Cinematic
- **Tipo:** Cinematic Dark, Minimalist Portfolio, Orbitron Display, Glass Cards, Two-Page Navigation
- **Keywords:** architectural portfolio, cinematic, dark theme, minimalist, Orbitron, Space Grotesk, JetBrains Mono, glass morphism, video background, vignette, two-page, project showcase, technical specs, pill tags
- **Era:** 2025-2026 Portfolio/Creative
- **Light/Dark:** ✗ None / ✓ Full

## Paleta de Cores

- **Primárias:** Preto Fundo #000000, Branco Texto #FFFFFF, Branco/20 bordas rgba(255,255,255,0.2)
- **Secundárias:** Branco/5 cards rgba(255,255,255,0.05), Branco/10 hover rgba(255,255,255,0.1), Branco/60 texto secundário rgba(255,255,255,0.6), Branco/40 labels rgba(255,255,255,0.4)

## Efeitos Visuais

Vídeo background full-screen com vignette radial (70% transparente centro para 70% preto bordas) no desktop e gradient bottom-fade no mobile, glassmorphism cards (bg-white/5 backdrop-blur-xl), navegação entre duas páginas com transições de opacidade e offset Y, tipografia hierárquica com 3 fontes (Orbitron display, Space Grotesk body, JetBrains Mono technical), pill tags com borda white/20, specs técnicas com separadores thin border, counter 1/01 com linha de progresso

## Direção Visual para IA

Build a high-end cinematic 2-page architectural portfolio. Aesthetic: minimalist, dark-themed (black background #000000, white text #FFFFFF), sophisticated typographic hierarchy. Fonts: Orbitron for display headings, Space Grotesk for body text, JetBrains Mono for technical/mono elements. Custom selection color (white bg, black text). Page 1 Hero: Full-screen looping background video of futuristic architecture (use stock video URL). Video: muted, playsInline, loop, preload auto. Overlays: radial vignette on desktop (70% transparent center to 70% black edges), bottom-fade gradient on mobile. Top nav: right-aligned 1/01 counter with progress line and Next Project button in mono font. Main content: large title 'VIKTOR-O // MODERN ARCHITECT' (Orbitron uppercase tracking-tighter), description in Space Grotesk light with max-w-450px. Right column: technical specs list (Stack, Logic, Uptime, Scale) with labels and values separated by thin border-white/20. Bottom: glass-morphism card (bg-white/5 backdrop-blur-xl) with project title 'VK-01: React Engine' and View Project button. Row of pill-shaped tags (TS/JS, V1, Full-Stack, Cloud-Ready) at bottom right. Page 2 Project: Back Home button with arrow icon. Massive display title 'PROJECT ENGINE' (Orbitron leading-0.85 uppercase). Right-aligned description about flagship React engine with Read More link. Two structured info blocks 01 CORE ARCHITECTURE and 02 PERFORMANCE METRICS with uppercase mono subtext. Navigation arrows in circular borders and meta-info block. Implement page transitions with opacity/y-offset animations. On mobile: video occupies top half h-50vh with smooth gradient to content below.

## CSS Technical

```css
background: #000000; color: #FFFFFF; font-family: 'Space Grotesk', sans-serif; .font-display { font-family: 'Orbitron', sans-serif; } .font-mono { font-family: 'JetBrains Mono', monospace; } ::selection { background: white; color: black; } .vignette { background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%); } .glass-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .pill-tag { border: 1px solid rgba(255,255,255,0.2); border-radius: 9999px; } .page-transition { transition: opacity 0.6s ease, transform 0.6s ease; } @media (max-width: 768px) { .hero-video { height: 50vh; } }
```

## Design System Variables

```css
--bg: #000000; --text: #FFFFFF; --text-60: rgba(255,255,255,0.6); --text-40: rgba(255,255,255,0.4); --border: rgba(255,255,255,0.2); --glass-bg: rgba(255,255,255,0.05); --glass-blur: 24px; --hover-bg: rgba(255,255,255,0.1); --font-display: 'Orbitron', sans-serif; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace
```

## Checklist de Implementação

- ☐ Fundo preto puro #000000 com texto branco
- ☐ Vídeo background full-screen com vignette radial
- ☐ Três fontes carregadas (Orbitron + Space Grotesk + JetBrains Mono)
- ☐ Hierarquia tipográfica clara entre display/body/mono
- ☐ Glass card com backdrop-blur-xl
- ☐ Navegação entre duas páginas com transição suave
- ☐ Specs técnicas com separadores thin border
- ☐ Pill tags com borda white/20
- ☐ Counter 1/01 com linha de progresso
- ☐ Mobile: vídeo 50vh com gradient fade
- ☐ Custom selection color branco/preto

## Regras de Execução

1. Siga fielmente o estilo visual determinado.
2. Use ícones SVG inline de alta qualidade (estilo Heroicons ou Lucide) — PROIBIDO usar emojis como ícones.
3. Adicione `cursor-pointer` e estados de `hover` suaves (transition-all) em todos os elementos interativos.
4. Estrutura Obrigatória da Página:
   - Navbar (Logo + Links + CTA)
   - Hero Section (Headline impactante + Subtitle + 2 botões + Elemento visual 3D/Abstrato via CSS)
   - Features (3 cards com ícones)
   - Testimonials (3 cards)
   - Pricing (3 tiers, destaque no central)
   - CTA Final
   - Footer completo com redes sociais, política de privacidade, termos de uso, contato e links SEO.
5. Todo o conteúdo textual deve ser em Português Brasileiro (PT-BR).
6. O visual deve ser CLARAMENTE distinto — não crie um design "padrão Bootstrap". Force o uso das variáveis de design system fornecidas.
7. Use tags `<style>` no head para classes personalizadas (especialmente para os efeitos complexos de backdrop-filter e animações) que o Tailwind via CDN não cobrir.
8. Responsividade Total: O layout deve se adaptar perfeitamente a Mobile, Tablet e Desktop (Stack vertical no mobile).
9. Inclua meta tags básicas de SEO, Viewport e Open Graph no `<head>`.
10. Footer deve conter: Copyright 2026, Links de navegação secundária e Ícones de redes sociais.
11. Assuma as decisões criativas necessárias para entregar o resultado completo e funcional agora.