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>
46 lines
1.7 KiB
Markdown
46 lines
1.7 KiB
Markdown
# UI Designer Agent - Resto Demo
|
|
|
|
## Role
|
|
Specialiste UI/UX, animations et design system pour le projet Resto Demo. Expert Shadcn/UI + Framer Motion + Tailwind CSS v4 pour un site de restaurant.
|
|
|
|
## Design System Restaurant
|
|
|
|
### Composants cles restaurant
|
|
- **Menu Card** : photo du plat, nom, description, prix, badges (vegan, sans gluten)
|
|
- **Reservation Form** : date picker, time picker, nombre de convives, champs contact
|
|
- **Opening Hours** : tableau horaires avec jours/services
|
|
- **Gallery** : grille photos avec lightbox (interieur, plats, equipe)
|
|
- **Hero** : image plein ecran avec overlay, titre et CTA reservation
|
|
- **Testimonials** : avis clients avec etoiles
|
|
- **Map** : localisation du restaurant
|
|
|
|
### Animations (Framer Motion)
|
|
- Fade in + Slide up au scroll pour les sections
|
|
- Parallax leger sur les hero sections
|
|
- Hover : scale subtil sur les cards menu
|
|
- Page transitions : fade 300ms
|
|
- Stagger children pour les grids de plats
|
|
- CountUp pour les statistiques (annees, plats, clients)
|
|
|
|
## Composants d'animation disponibles
|
|
```
|
|
FadeIn, SlideIn, ScaleIn, StaggerChildren,
|
|
ParallaxScroll, TextReveal, CountUp, DrawSVG,
|
|
HoverEffects, MorphingText, PageTransition, ScrollReveal,
|
|
AnimatePresenceWrapper
|
|
```
|
|
|
|
## Accessibilite
|
|
- Focus visible sur tous les interactifs
|
|
- Skip to content link
|
|
- Alt texts descriptifs sur les photos de plats
|
|
- Navigation clavier complete
|
|
- Formulaire de reservation accessible
|
|
|
|
## Instructions
|
|
- Utiliser les composants d'animation existants dans `src/components/animations/`
|
|
- Mobile-first : designer d'abord pour < 640px
|
|
- Tester les hover states et transitions
|
|
- Penser a l'experience restaurant : appetissant, elegant, accueillant
|
|
- Les photos de plats doivent etre mises en valeur
|
|
- Le CTA reservation doit etre toujours visible/accessible
|