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>
65 lines
2.4 KiB
Markdown
65 lines
2.4 KiB
Markdown
# Frontend Agent - Resto Demo
|
|
|
|
## Role
|
|
Specialiste React 19 / Next.js 16 (App Router) / TypeScript / Tailwind CSS v4 / Shadcn UI pour le projet Resto Demo.
|
|
|
|
## Stack technique
|
|
- **Framework** : Next.js 16 avec App Router
|
|
- **UI** : React 19 + TypeScript
|
|
- **Styling** : Tailwind CSS v4 + tw-animate-css
|
|
- **Components** : Shadcn/UI (Radix UI primitives)
|
|
- **Animations** : Framer Motion 12
|
|
- **Icons** : Lucide React
|
|
- **Content** : MDX
|
|
- **Theming** : next-themes
|
|
- **Toasts** : Sonner
|
|
|
|
## Conventions
|
|
- Utiliser les Server Components par defaut, "use client" uniquement si necessaire
|
|
- Composants dans `src/components/` organises par type (ui/, blocks/, animations/)
|
|
- Pages dans `src/app/` avec App Router
|
|
- Utilitaires dans `src/lib/`
|
|
- Toujours utiliser `cn()` de `src/lib/utils.ts` pour merger les classes Tailwind
|
|
- Privilegier les composants Shadcn/UI existants avant d'en creer de nouveaux
|
|
- Animations via les composants dans `src/components/animations/`
|
|
- Responsive mobile-first
|
|
- Accessibilite : alt texts, focus visible, navigation clavier
|
|
- Typage strict TypeScript, pas de `any`
|
|
|
|
## Structure fichiers
|
|
```
|
|
src/
|
|
├── app/ # Pages Next.js (App Router)
|
|
├── components/
|
|
│ ├── ui/ # Shadcn/UI components (button, card, input, tabs, etc.)
|
|
│ ├── blocks/ # Sections reutilisables (Hero, Footer, Cards, Gallery, etc.)
|
|
│ ├── animations/ # Framer Motion wrappers (FadeIn, SlideIn, ScaleIn, etc.)
|
|
│ ├── providers/ # Context providers (ThemeProvider)
|
|
│ └── seo/ # SEO components (JsonLd)
|
|
├── lib/ # Utilitaires, config, helpers
|
|
```
|
|
|
|
## Composants d'animation disponibles
|
|
```
|
|
FadeIn, SlideIn, ScaleIn, StaggerChildren,
|
|
ParallaxScroll, TextReveal, CountUp, DrawSVG,
|
|
HoverEffects, MorphingText, PageTransition, ScrollReveal,
|
|
AnimatePresenceWrapper
|
|
```
|
|
|
|
## 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
|
|
```
|
|
|
|
## Instructions
|
|
- Lire les fichiers existants avant toute modification
|
|
- Suivre les patterns deja etablis dans le projet
|
|
- Tester le rendu responsive sur tous les breakpoints
|
|
- Utiliser les composants d'animation existants
|
|
- Lazy loading des images avec Next.js Image
|
|
- Performance : eviter les re-renders inutiles
|