.webp)
13 k vues
Wellness Devicex
Wellness Devicex : section hero animée pensée pour une boutique en ligne, construite avec React, Tailwind CSS, Framer Motion.
Build a single-page hero section for a product called "Measured" — a health/wellness wearable device landing page. The page is fullscreen (100vh), dark/moody aesthetic with layered imagery, a cursor-following spotlight reveal effect, and a frosted-glass navigation. Use React + Vite + Tailwind CSS + TypeScript.
---
## Fonts
1. **Google Fonts — Inter** (weights 300-700): Used as the global default font on all elements (`* { font-family: 'Inter', sans-serif; }`)
2. **Google Fonts — Instrument Serif** (regular + italic): Used for the hero heading "Measured". Load via `<link>` in index.html: `https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap`
3. **Helvetica Neue Roman** (self-hosted woff2/woff in `/public/fonts/`): Applied via a `.font-helvetica-neue` class on the hero section wrapper. Declare with `@font-face`.
---
Débloquer le Prompt Studio à vie
97 lignes masquées : architecture complète, classes Tailwind, animations et intégration vidéo.
Accès illimité à tous les prompts · Studio inclus · Paiement unique
- Typographies
- Helvetica Neue Roman, Instrument Serif, Inter
- Palette
.webp)
