35 k vues

Equilibrium

Equilibrium : section hero animée pensée pour une landing page SaaS, construite avec React, Tailwind CSS, Framer Motion.

Landing pages SaaS Sections hero React Tailwind CSS Framer Motion TypeScript Vite

Obtenir une version renforcée de ce prompt

Prompt

Personnaliser

Build a full-screen, single-page React + TypeScript + Vite + Tailwind CSS hero section with a "liquid glass" aesthetic on top of a looping background video. Use `lucide-react` for icons. No other UI libraries.

**Font & Global CSS (`src/index.css`):**
- Import Geist from Google Fonts: `https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap`
- Apply `Geist` globally via `* { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }`
- Include `@tailwind base; @tailwind components; @tailwind utilities;`
- Define a `.liquid-glass` class:
  - `background: rgba(255,255,255,0.01);`
  - `background-blend-mode: luminosity;`
  - `backdrop-filter: blur(4px);` plus `-webkit-backdrop-filter`
  - `border: none;`
  - `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);`

Débloquer le Prompt Studio à vie

36 lignes masquées : architecture complète, classes Tailwind, animations et intégration vidéo.

Offre de lancement

Accès illimité à tous les prompts · Studio inclus · Paiement unique

Typographies: Geist
Palette

Equilibrium

Prompt

Références similaires