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>
125 lines
2.7 KiB
Markdown
125 lines
2.7 KiB
Markdown
# Hagen Boilerplate
|
|
|
|
Boilerplate Next.js moderne pour créer des sites web professionnels rapidement.
|
|
|
|
## 🚀 Stack
|
|
|
|
- **Next.js 14** — App Router, Server Components
|
|
- **TypeScript** — Type-safe
|
|
- **Tailwind CSS v4** — Styling utility-first
|
|
- **shadcn/ui** — Composants UI accessibles
|
|
- **Framer Motion** — Animations fluides
|
|
- **Lucide Icons** — Icônes
|
|
|
|
## 📦 Structure
|
|
|
|
```
|
|
src/
|
|
├── app/ # Routes Next.js
|
|
│ ├── page.tsx # Page d'accueil
|
|
│ ├── layout.tsx # Layout principal
|
|
│ └── globals.css # Styles globaux
|
|
├── components/
|
|
│ ├── ui/ # Composants shadcn/ui
|
|
│ │ ├── button.tsx
|
|
│ │ ├── card.tsx
|
|
│ │ └── ...
|
|
│ ├── animations/ # Wrappers Framer Motion
|
|
│ │ ├── FadeIn.tsx
|
|
│ │ ├── SlideIn.tsx
|
|
│ │ ├── ScaleIn.tsx
|
|
│ │ └── StaggerChildren.tsx
|
|
│ └── blocks/ # Sections de page
|
|
│ ├── HeroSimple.tsx
|
|
│ ├── FeaturesGrid.tsx
|
|
│ ├── CTABanner.tsx
|
|
│ ├── Testimonials.tsx
|
|
│ └── Footer.tsx
|
|
└── lib/
|
|
└── utils.ts # Utilitaires (cn, etc.)
|
|
```
|
|
|
|
## 🎯 Quick Start
|
|
|
|
```bash
|
|
# Cloner
|
|
git clone <repo> mon-projet
|
|
cd mon-projet
|
|
|
|
# Installer
|
|
npm install
|
|
|
|
# Lancer
|
|
npm run dev
|
|
```
|
|
|
|
Ouvrir [http://localhost:3000](http://localhost:3000)
|
|
|
|
## 🎨 Composants d'animation
|
|
|
|
```tsx
|
|
import { FadeIn, SlideIn, StaggerChildren } from "@/components/animations";
|
|
|
|
// Fade in au scroll
|
|
<FadeIn direction="up" delay={0.2}>
|
|
<Card>...</Card>
|
|
</FadeIn>
|
|
|
|
// Slide depuis la gauche
|
|
<SlideIn direction="left">
|
|
<Image />
|
|
</SlideIn>
|
|
|
|
// Enfants apparaissent en cascade
|
|
<StaggerChildren staggerDelay={0.1}>
|
|
<Item />
|
|
<Item />
|
|
<Item />
|
|
</StaggerChildren>
|
|
```
|
|
|
|
## 🧱 Blocs disponibles
|
|
|
|
| Bloc | Description |
|
|
|------|-------------|
|
|
| `HeroSimple` | Hero avec titre, sous-titre, CTA |
|
|
| `FeaturesGrid` | Grille de fonctionnalités avec icônes |
|
|
| `CTABanner` | Bannière d'appel à l'action |
|
|
| `Testimonials` | Témoignages clients |
|
|
| `Footer` | Pied de page multi-colonnes |
|
|
|
|
## 🎨 Personnalisation
|
|
|
|
### Couleurs
|
|
|
|
Modifier `src/app/globals.css` :
|
|
|
|
```css
|
|
:root {
|
|
--primary: 220 90% 56%;
|
|
--primary-foreground: 0 0% 100%;
|
|
/* ... */
|
|
}
|
|
```
|
|
|
|
### Ajouter des composants shadcn/ui
|
|
|
|
```bash
|
|
npx shadcn@latest add dialog
|
|
npx shadcn@latest add dropdown-menu
|
|
npx shadcn@latest add form
|
|
```
|
|
|
|
## 📝 TODO
|
|
|
|
- [ ] Ajouter Payload CMS
|
|
- [ ] Module Auth (NextAuth)
|
|
- [ ] Module Billing (Stripe)
|
|
- [ ] PWA config
|
|
- [ ] SEO metadata helpers
|
|
- [ ] i18n (FR/NL/EN)
|
|
- [ ] Plus de blocs (Pricing, FAQ, Contact...)
|
|
|
|
## 📄 License
|
|
|
|
MIT — Hagen Digital
|