Minimalist React Hero with Motion

---
version: "alpha"
name: "Minimalist React Hero with Motion"
description: "Hero section minimalista high-end com React, Tailwind CSS v4 e Motion. Vídeo de fundo invertido, tipografia Geist + Instrument Serif e animações staggered."
colors:
  primary: "#FFFFFF"
  secondary: "#373a46"
  tertiary: "#fcfcfc"
  neutral: "#1a1a1a"
  surface: "#2d2d2d"
typography:
  h1:
    fontFamily: Instrument Serif
    fontSize: 2.25rem
    fontWeight: 700
  body-md:
    fontFamily: Instrument Serif
    fontSize: 1rem
    fontWeight: 400
  label-caps:
    fontFamily: Instrument Serif
    fontSize: 0.75rem
    fontWeight: 500
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    padding: 12px
---

## Overview

Hero section minimalista high-end com React, Tailwind CSS v4 e Motion. Vídeo de fundo invertido, tipografia Geist + Instrument Serif e animações staggered. Inspirado no design editorial moderno de SaaS premium como Linear, Vercel e Raycast. Combina tipografia serifada com sans-serif, vídeo de fundo com gradiente e micro-animações para criar uma experiência de hero section sofisticada e conversível.

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

- **Style:** Minimalist, High-End, Editorial, Spacious
- **Keywords:** minimalist, high-end, React, Tailwind CSS v4, Motion library, hero section, editorial, spacious, video background, staggered animation, social proof
- **Era:** 2020s Modern SaaS
- **Light/Dark:** ✓ Full / ✗ No

## Colors

- **White** (#FFFFFF) — Light surface, card backgrounds
- **Slate** (#373a46) — Secondary surface or text color
- **Background** (#fcfcfc) — Primary background surface
- **Dark Button Gradient** (#1a1a1a) — Deep contrast surface
- **to** (#2d2d2d) — Extended palette, decorative use
- **Soft Shadow** (rgba(194,194,194,0.25)) — Extended palette, decorative use
- **Border** (rgba(0,0,0,0.08)) — Extended palette, decorative use

## Typography

- **Display / Hero:** Instrument Serif — Weight 700, tight tracking, used for headline impact
- **Accent:** Geist — Used for decorative or emphasis text
- **Body:** Instrument Serif — Weight 400, 16px/1.6 line-height, max 72ch per line
- **UI Labels / Captions:** Instrument Serif — 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 de fundo invertido verticalmente (scaleY(-1)), gradiente branco sobreposto (from-[26.416%] to-[66.943%]), animações staggered fade-and-slide-up via Motion library, sombra multi-camada no botão CTA (inset shadows), input com sombra suave (0px 10px 40px 5px)

- **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: 8px. See rounded tokens in front matter for the full scale.

## Components

- **Primary Button:** Subtly rounded (0.5rem) 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:** Subtly rounded (0.5rem) 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 black (#000000) — use off-black or charcoal variants
- 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 Vídeo de fundo com scaleY(-1) e object-cover
- Do Gradiente branco sobreposto com stops corretos
- Do Tipografia Geist 80px + Instrument Serif italic 100px
- Do Input arredondado 40px com sombra suave
- Do Botão CTA com sombra inset multi-camada
- Do Animações staggered via Motion library
- Do Social proof com badge de reviews
- Do Padding-top 290px editorial
- Do Responsivo

## Use Case

SaaS landing pages, Ferramentas de gestão remota, Startups premium, Produtos digitais high-end

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:** Minimalist React Hero with Motion
- **Tipo:** Minimalist, High-End, Editorial, Spacious
- **Keywords:** minimalist, high-end, React, Tailwind CSS v4, Motion library, hero section, editorial, spacious, video background, staggered animation, social proof
- **Era:** 2020s Modern SaaS
- **Light/Dark:** ✓ Full / ✗ No

## Paleta de Cores

- **Primárias:** White #FFFFFF, Slate #373a46, Background #fcfcfc
- **Secundárias:** Dark Button Gradient #1a1a1a to #2d2d2d, Soft Shadow rgba(194,194,194,0.25), Border rgba(0,0,0,0.08)

## Efeitos Visuais

Vídeo de fundo invertido verticalmente (scaleY(-1)), gradiente branco sobreposto (from-[26.416%] to-[66.943%]), animações staggered fade-and-slide-up via Motion library, sombra multi-camada no botão CTA (inset shadows), input com sombra suave (0px 10px 40px 5px)

## Direção Visual para IA

Create a minimalist, high-end React hero section using Tailwind CSS v4 and the Motion library. Layout: min-h-screen, centered, heavy top padding of exactly 290px, max-w-[1200px], vertical gap of 32px. Background: use video https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260302_085640_276ea93b-d7da-4418-a09b-2aa5b490e838.mp4 vertically flipped with scaleY(-1) and object-cover. Apply white gradient overlay from-[26.416%] from-[rgba(255,255,255,0)] to-[66.943%] to-white. Typography: Geist font medium weight tracking -0.04em for heading at 80px desktop, 'Instrument Serif' italic at 100px for the word 'management'. Description: Geist 18px 80% opacity slate #373a46 max-w-554px. Email input: rounded-[40px] bg-[#fcfcfc] thin border soft shadow. CTA button: dark multi-layered gradient with complex inner shadow. Social proof: '1,020+ Reviews' badge with star/brand icons. Animations: Motion staggered fade-and-slide-up for heading, description, and email input block.

## CSS Technical

```css
video: w-full h-full object-cover [transform:scaleY(-1)]; gradient overlay: absolute inset-0 bg-gradient-to-b from-[26.416%] from-[rgba(255,255,255,0)] to-[66.943%] to-white; heading: font-family Geist, font-weight 500, letter-spacing -0.04em, font-size 80px; accent word: font-family 'Instrument Serif', font-style italic, font-size 100px; input container: border-radius 40px, bg-[#fcfcfc], box-shadow 0px 10px 40px 5px rgba(194,194,194,0.25); CTA button: shadow-[inset_-4px_-6px_25px_0px_rgba(201,201,201,0.08),inset_4px_4px_10px_0px_rgba(29,29,29,0.24)]; content: pt-[290px] max-w-[1200px] gap-8
```

## Design System Variables

```css
--font-heading: 'Geist', sans-serif; --font-accent: 'Instrument Serif', serif; --color-text: #373a46; --color-bg: #FFFFFF; --color-input-bg: #fcfcfc; --color-button-dark: #1a1a1a; --radius-input: 40px; --shadow-input: 0px 10px 40px 5px rgba(194,194,194,0.25); --shadow-button: inset -4px -6px 25px 0px rgba(201,201,201,0.08), inset 4px 4px 10px 0px rgba(29,29,29,0.24); --spacing-top: 290px; --max-width: 1200px
```

## Checklist de Implementação

- ☐ Vídeo de fundo com scaleY(-1) e object-cover
- ☐ Gradiente branco sobreposto com stops corretos
- ☐ Tipografia Geist 80px + Instrument Serif italic 100px
- ☐ Input arredondado 40px com sombra suave
- ☐ Botão CTA com sombra inset multi-camada
- ☐ Animações staggered via Motion library
- ☐ Social proof com badge de reviews
- ☐ Padding-top 290px editorial
- ☐ Responsivo

## 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.