
.webp)
SSean Galt
35 k vues
Interactive Discovery
Interactive Discovery : section hero animée pensée pour une boutique en ligne, construite avec React, Tailwind CSS, Framer Motion.
Build a full-screen, dark-themed hero section for a geology brand called **Lithos**, using **React 18 + TypeScript + Vite + Tailwind CSS** and **lucide-react** for icons. The signature feature is a **cursor-following spotlight that reveals a second image** through a soft circular mask on top of a base image. Match every detail below exactly.
### Fonts
Add this to the top of `src/index.css`, then `@tailwind base/components/utilities`:
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,400;1,500;1,600&display=swap');
* { font-family: 'Inter', sans-serif; }
.font-playfair { font-family: 'Playfair Display', serif; }
```
- Body/UI font: **Inter**.
- Display/wordmark accent: **Playfair Display, italic**.
Débloquer le Prompt Studio à vie
60 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
- Inter, Playfair Display, Center pill
- Palette
.webp)

.webp)