École Adsequor Website

Status: Homepage Complete (Phase 1 of 35+ pages)
Tech Stack: HTML5 + Tailwind CSS v4 + Vanilla JavaScript ES6+
Preview: https://8000-im0eiaf0zwttazt9eluus-80be6d9f.manusvm.computer

---

Project Structure

ecole-adsequor/
├── index.html              # Homepage (complete)
├── tailwind.config.js      # Tailwind v4 configuration
├── package.json            # Dependencies and scripts
├── src/
│   └── styles.css          # Tailwind directives + custom components
├── dist/
│   └── output.css          # Generated CSS (minified)
├── js/
│   ├── main.js             # Main JavaScript module
│   └── modules/            # Additional modules (future)
└── images/
    ├── logo.svg            # École Adsequor logo
    ├── hero/               # Hero images
    ├── team/               # Team photos
    ├── testimonials/       # Testimonial images
    └── icons/              # Icon assets

---

Build Commands

# Development (watch mode)
npm run dev

# Production build (minified)
npm run build

# Preview locally
python3 -m http.server 8000

---

Design System

Colors

• Primary: #37802D (Green - growth, success)
• Secondary: #ED6A0D (Orange - energy, action)
• Tertiary: #B1A785 (Beige - warmth, trust)
• Charcoal: #2C2C2C (Text primary)
• Off-white: #F8F8F6 (Background secondary)

Typography

• Sans-serif: Inter (body text, UI)
• Display: Merriweather (headings, emphasis)

Spacing

• 8px base scale (4px to 128px)

Components

• Buttons (3 variants, 3 sizes)
• Cards (standard, testimonial)
• Forms (inputs, validation states)
• Navigation (desktop, mobile)
• Modal, Accordion

---

Features Implemented

Accessibility (WCAG 2.1 AA)

• ✓ Skip links
• ✓ ARIA attributes
• ✓ Keyboard navigation
• ✓ Focus management
• ✓ Semantic HTML
• ✓ Color contrast verified

Responsive Design

• ✓ Mobile-first approach
• ✓ 6 breakpoints (320px to 1440px+)
• ✓ Touch-friendly interactions
• ✓ Optimized images

Performance

• ✓ Minified CSS (<50KB)
• ✓ No framework overhead
• ✓ Lazy loading ready
• ✓ Font display: swap

JavaScript Features

• ✓ Header scroll effect
• ✓ Mobile menu with overlay
• ✓ Smooth scroll
• ✓ Accordion
• ✓ Form validation
• ✓ Modal with focus trap

---

Homepage Sections

1. Hero - Emotional headline with CTAs
2. Problem - 60% statistic visualization
3. Solution - 3 value propositions
4. Process - 4-step journey
5. Success Stories - 3 testimonials
6. Who We Help - 2 target audiences
7. Assessment CTA - Primary conversion point
8. Resources - 3 free resources
9. Final CTA - Secondary conversion

---

Next Pages to Build

Priority 1 (Core Journey)

• Assessment tool (interactive)
• Comment ça marche
• Résultats & garantie
• Tarifs & inscription
• Consultation booking

Priority 2 (Supporting Content)

• Qui nous aidons
• Témoignages (full page)
• À propos
• Équipe
• FAQ

Priority 3 (Resources & Legal)

• Blog/Resources hub
• Individual resource pages
• Mentions légales
• Politique de confidentialité
• Conditions d'utilisation

---

Technical Notes

Tailwind CSS v4

• Installed via @next tag
• Using modern config structure
• JIT mode enabled (default)
• Plugins: @tailwindcss/forms, @tailwindcss/typography

JavaScript Approach

• Vanilla ES6+ (no dependencies)
• Modular structure
• Event delegation
• Progressive enhancement

Browser Support

• Chrome, Firefox, Safari, Edge (last 2 versions)
• iOS Safari, Chrome Android (last 2 versions)
• No IE11 support

---

Integrations Required

Must Have

• Brevo (email marketing)
• Posthog (analytics)
• Calendly/Acuity (booking)
• Cookie consent (GDPR)

Optional

• Live chat widget
• A/B testing platform
• Heatmap analytics

---

Deployment

Static Hosting Options

• Netlify (recommended)
• Vercel
• Cloudflare Pages
• GitHub Pages

Build Process

1. Run npm run build
2. Upload entire directory
3. Set root to /
4. Deploy

---

Development Notes

Specification Compliance:

• Following DEVELOPER_SPECIFICATION_TAILWIND.md exactly
• All design tokens from specification
• All components match specification
• All accessibility requirements met

Deviations (Approved):

• Using Google Fonts CDN instead of self-hosted fonts (approved by user)

---

Built: October 2025
Version: 1.0.0
License: All rights reserved - École Adsequor