# Asli Food — Website

A modern, animated promotional website for **Asli Food de la Mauritanie** — an authentic Mauritanian food brand.

## Tech Stack

- **Framework:** Next.js 15 (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS v4 + Custom CSS animations
- **Fonts:** Space Grotesk (headings) + Inter (body) via `next/font/google`
- **Animations:** Custom CSS `@keyframes` + Intersection Observer scroll reveals

## Brand Identity

| Name           | Value     |
|----------------|-----------|
| Primary Yellow | `#FFD000` |
| Dark           | `#1C1C1C` |
| White          | `#FFFFFF` |
| Off-White      | `#FDFBF0` |

- **Logo:** `public/logo.png` — yellow background, dark text/icon
- **Language:** French (target market is French-speaking)
- **Tagline:** "Goût Authentique & Tradition"

## Project Structure

```
src/
├── app/
│   ├── globals.css        # CSS variables, keyframe animations, scroll reveal classes
│   ├── layout.tsx         # Root layout with metadata + Google Fonts
│   └── page.tsx           # Home page — assembles all section components
├── hooks/
│   └── useScrollReveal.ts # Intersection Observer hook for scroll-triggered reveals
└── components/
    ├── Navbar.tsx          # Fixed, scroll-aware navbar (transparent → dark)
    ├── Hero.tsx            # Full-screen hero, animated headline, floating logo
    ├── Ticker.tsx          # Infinite scrolling marquee band
    ├── About.tsx           # Brand story, split layout
    ├── Products.tsx        # 6-card product showcase grid with hover effects
    ├── Features.tsx        # 4 USP feature cards (dark background)
    ├── Testimonials.tsx    # Customer testimonial cards
    ├── CTASection.tsx      # Call-to-action yellow banner
    └── Footer.tsx          # Dark footer with links and copyright
```

## Page Sections (top → bottom)

1. **Navbar** — Logo + nav links + CTA; transparent when at top, solid `#1C1C1C` when scrolled
2. **Hero** — Full viewport, yellow bg, word-cycling animated headline, floating logo, stats
3. **Ticker** — Infinite scrolling band of brand keywords
4. **About** — Brand story with scroll-reveal, split layout, yellow accent block
5. **Products** — 6-card grid; hover reveals yellow bg + "Découvrir →"
6. **Features** — 4 USP cards on dark background with icon + text
7. **Testimonials** — 3 customer quote cards on off-white
8. **CTA Section** — Yellow full-width banner with order buttons
9. **Footer** — Dark footer, logo, links, Facebook, copyright

## Animation System

- **CSS Keyframes** in `globals.css`: `float`, `floatAlt`, `marquee`, `pulseRing`, `scrollIndicator`, `spinSlow`, `wordFlip`
- **Scroll Reveal**: `.reveal`, `.reveal-left`, `.reveal-right` classes toggled by IntersectionObserver (`useScrollReveal` hook)
- **Hero Entry**: State-based CSS transitions with staggered `transitionDelay`
- **Hover Micro-interactions**: Scale, color, opacity transitions via Tailwind

## Development

```bash
npm run dev      # Dev server at http://localhost:3000
npm run build    # Production build
npm run lint     # ESLint check
```