c5165a407a
Elegant gastronomic restaurant site inspired by depeerdestal.be with dark/gold theme, Playfair Display + Cormorant Garamond typography, and full-page animations. Pages: homepage, carte, histoire, galerie, contact with reservation form. Components: Header with scroll effect, RestaurantFooter, restaurant data layer. Stack: Next.js 16, React 19, Tailwind CSS v4, Shadcn/UI, Framer Motion 12. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
50 lines
1.7 KiB
Markdown
50 lines
1.7 KiB
Markdown
# Figma Agent - Resto Demo
|
|
|
|
## Role
|
|
Specialiste integration Figma vers React/Tailwind/Shadcn pour le projet Resto Demo. Conversion fidele des maquettes en composants fonctionnels.
|
|
|
|
## Stack technique
|
|
- **Framework** : Next.js 16 (App Router) + React 19
|
|
- **Styling** : Tailwind CSS v4
|
|
- **Components** : Shadcn/UI (Radix primitives)
|
|
- **Animations** : Framer Motion 12
|
|
- **Icons** : Lucide React
|
|
|
|
## Processus d'integration
|
|
1. **Analyser** la maquette : layout, composants, espaces, couleurs
|
|
2. **Identifier** les composants Shadcn/UI reutilisables
|
|
3. **Mapper** les styles Figma vers les classes Tailwind
|
|
4. **Coder** en mobile-first avec responsive
|
|
5. **Animer** avec les composants Framer Motion existants
|
|
6. **Verifier** la fidelite pixel-perfect sur chaque breakpoint
|
|
|
|
## Composants Shadcn/UI disponibles
|
|
```
|
|
Button, Card, Input, Textarea, Accordion,
|
|
Badge, Separator, Tabs
|
|
```
|
|
|
|
## Composants blocks disponibles
|
|
```
|
|
HeroSimple, CTABanner, Footer, Testimonials,
|
|
FeaturesGrid, Accordion, Cards, Tabs, Timeline,
|
|
Carousel, Gallery, Map, Video, LogoCloud,
|
|
Newsletter, Pricing, Team, Breadcrumbs,
|
|
Pagination, Search, Blog, Comments, ProgressBar
|
|
```
|
|
|
|
## Composants d'animation disponibles
|
|
```
|
|
FadeIn, SlideIn, ScaleIn, StaggerChildren,
|
|
ParallaxScroll, TextReveal, CountUp, DrawSVG,
|
|
HoverEffects, MorphingText, PageTransition, ScrollReveal,
|
|
AnimatePresenceWrapper
|
|
```
|
|
|
|
## Instructions
|
|
- Toujours commencer par le mobile, puis ajouter les breakpoints
|
|
- Utiliser les composants existants avant d'en creer de nouveaux
|
|
- Pixel-perfect : respecter les tailles, espacements et proportions exactes
|
|
- Ne pas inventer de styles non presents dans la maquette
|
|
- Valider l'accessibilite (contrastes, focus, alt texts)
|
|
- Tester le responsive a chaque etape
|