DOCUMENTATION COMPLÈTE - Projet Hoonesty Nuxt3

Table des Matières

1. Vue d'ensemble
2. Architecture et Structure
3. Technologies Utilisées
4. Design et Branding
5. Règles Strictes de Développement
6. Composants Principaux
7. AppFooter
8. CustomButton
9. Pages
10. Configuration Technique
11. API Routes Serveur
12. Guide de Démarrage
13. Déploiement
14. SEO et Optimisation

---

1. Vue d'ensemble

Présentation du Projet

Hoonesty est un organisme de formation professionnelle. Le projet est développé avec Nuxt 3 et remplace l'ancien projet "Format-IT".

• Type de projet : Site web vitrine / Plateforme de formation
• Framework : Nuxt 3
• Stack technique : Vue 3, TypeScript, Tailwind CSS
• Ancien nom : Format-IT (tous les noms ont été changés en "Hoonesty")

Informations Techniques

• Framework : Nuxt 3 (dernière version)
• Langage : TypeScript, Vue 3
• Styling : Tailwind CSS (UNIQUEMENT - pas de <style>)
• Email : Nodemailer + SMTP Gmail
• Déploiement : Vercel + Cloudflare DNS
• Port développement : 3000 (par défaut Nuxt 3)

Localisation

/Users/wilfriedkakou/developments/perso/honesty-Oumar/honesty

---

2. Architecture et Structure

Arborescence du Projet

honesty/
├── components/                  # Composants Vue réutilisables
│   ├── AppHeader.vue           # En-tête avec menu gradient violet
│   ├── AppFooter.vue           # Pied de page (2 sections)
│   └── CustomButton.vue        # Bouton réutilisable avec gradient radial
│
├── composables/                 # Composables Vue
│   └── useSEO.ts               # Composable pour meta tags dynamiques
│
├── layouts/                     # Layouts de l'application
│   └── default.vue             # Layout par défaut
│
├── pages/                       # Pages du site (routing automatique)
│   ├── index.vue               # Accueil (vidéos + accordéon témoignages)
│   ├── expertise.vue           # Page Expertise (6 blocs)
│   ├── contact.vue             # Page Contact (image + email animé)
│   └── contact-us.vue          # Formulaire de contact
│
├── server/                      # Backend API Nitro
│   └── api/
│       └── send-contact.post.ts # Envoi email via Nodemailer
│
├── public/                      # Assets statiques
│   ├── icon/                   # Icônes et logos
│   │   ├── honesty-logo.svg
│   │   ├── Logo_Hoonesty-footer.svg
│   │   ├── linkedin.svg
│   │   └── XLogo.svg
│   ├── img/                    # Images
│   │   ├── home/               # Images page index
│   │   ├── expertise/          # Images page expertise
│   │   └── contact/            # Images page contact
│   ├── fonts/                  # Polices personnalisées
│   │   └── Jumper.woff2
│   ├── sitemap.xml             # Sitemap pour Google
│   └── site.webmanifest        # Manifest PWA
│
├── assets/                      # Assets qui seront compilés
│   └── css/
│       └── main.css            # CSS global (Tailwind directives)
│
├── readme/                      # Documentation
│   ├── context-honesty.md      # Contexte complet du projet
│   ├── guide-seo.md            # Guide SEO complet
│   └── deploiement-complet.md  # Guide déploiement Vercel + Cloudflare
│
├── .env                         # Variables d'environnement (PRIVÉ)
├── .env.example                 # Template .env
├── nuxt.config.ts              # Configuration Nuxt
├── tailwind.config.js          # Configuration Tailwind
├── tsconfig.json               # Configuration TypeScript
├── package.json                # Dépendances
└── vercel.json                 # Configuration Vercel (SANS credentials)

Principe de Routing

Nuxt 3 utilise le file-based routing :

• Chaque fichier dans /pages devient automatiquement une route
• Exemple : pages/expertise.vue → https://hoonesty.com/expertise
• Les dossiers créent des segments

---

3. Technologies Utilisées

Stack Technique

Frontend

Technologie	Version	Usage
Nuxt 3	4.1.2	Framework full-stack
Vue 3	3.5.22	Framework UI
TypeScript	Latest	Typage statique
Tailwind CSS	6.14.0	Framework CSS utilitaire (UNIQUEMENT)

Backend

Technologie	Version	Usage
Nitro	Inclus	Serveur backend Nuxt
Nodemailer	7.0.9	Envoi d'emails

Outils de Développement

• pnpm : Gestionnaire de paquets
• Git : Contrôle de version
• Vercel CLI : Déploiement

---

4. Design et Branding

Couleurs Principales

/* Couleurs principales */
--violet-principal: #2B0263;
--violet-secondaire: #5704C9;
--jaune-brand: #F0D300;
--texte: #2A2C32;
--background: #FCFBF8;
--texte-clair: #F5F3F8;

Typographie

• Police principale : Montserrat (Google Fonts)
  • Weights disponibles : 300, 400, 500, 600, 700, 800
• Police secondaire : Jumper PERSONAL USE ONLY
  • Fichier : public/fonts/Jumper.woff2
  • Usage : Titres, logo

Gradient Violet (Menu)

background: linear-gradient(69.19deg, #2B0263 22.77%, #5704C9 129.77%);

Gradient Radial (Boutons CTA)

background: radial-gradient(100% 212.11% at 100% 0%, #F1FFA5 0%, #C8E331 50.15%, #C0DB28 99.24%);

Utilisation dans Tailwind

<!-- Gradient violet -->
<div class="bg-gradient-to-r from-[#2B0263] to-[#5704C9]">

<!-- Couleurs brand -->
<span class="text-[#F0D300]">
<div class="bg-[#FCFBF8]">

---

5. Règles Strictes de Développement

❌ INTERDICTIONS ABSOLUES

1. JAMAIS de balises <style> ou <style scoped> dans les composants ou pages

   • Utiliser UNIQUEMENT Tailwind CSS
   • Si vraiment nécessaire, créer des classes utilitaires dans tailwind.config.js

2. PAS de CSS personnalisé sauf exception

   • Exception : animations complexes impossibles avec Tailwind
   • Dans ce cas, créer un fichier CSS global dans assets/css/

3. NE PAS modifier les noms suivants sans confirmation

   • Hoonesty (nom du projet)
   • contact@hoonesty.fr (email contact affiché)
   • Administratif@honesty.com (email admin serveur)
   • Montserrat (police principale)

✅ BONNES PRATIQUES OBLIGATOIRES

1. Utilisation de Tailwind CSS

<!-- ✅ BON -->
<div class="flex items-center justify-between p-4 bg-gradient-to-r from-[#2B0263] to-[#5704C9] rounded-lg">
  <span class="text-white font-montserrat font-medium">Texte</span>
</div>

<!-- ❌ MAUVAIS -->
<div class="custom-container">
  <span class="custom-text">Texte</span>
</div>
<style scoped>
.custom-container { ... }
</style>

2. Structure des Composants

<template>
  <!-- Template avec classes Tailwind uniquement -->
</template>

<script setup lang="ts">
// Logique TypeScript
</script>

<!-- PAS de section <style> ! -->

3. Nomenclature

• Composants : PascalCase → AppHeader.vue, CustomButton.vue
• Pages : kebab-case → contact-us.vue, expertise.vue
• Utilitaires : kebab-case → use-seo.ts

4. TypeScript

• Toujours typer les props, les refs et les fonctions
• Utiliser les interfaces pour les objets complexes

5. Responsive Design

• Mobile-first approach
• Utiliser les breakpoints Tailwind : sm:, md:, lg:, xl:, 2xl:

<div class="w-full md:w-1/2 lg:w-1/3 p-4 md:p-6 lg:p-8">

6. Accessibilité

• Toujours ajouter des labels ARIA aux boutons/liens sans texte
• Utiliser les balises sémantiques HTML5 : <nav>, <main>, <section>, <article>

<button aria-label="Ouvrir le menu" class="...">
  <svg>...</svg>
</button>

---

6. Composants Principaux

AppHeader

Fichier : components/AppHeader.vue

Description : En-tête du site avec navigation et menu dropdown

Structure :

• Position : Absolue en haut, centrée (absolute top-0 left-1/2 -translate-x-1/2)
• Design : Menu avec gradient violet
• Dimensions : 241px × 60px

Éléments :

• Logo (gauche) : /icon/honesty-logo.svg
• "LE MENU" (centre) : Texte en uppercase
• Hamburger (droite) : Icône menu 3 lignes

Dropdown :

• Apparaît en dessous du menu (241px de large)
• Fond blanc avec border radius
• Navigation : Accueil, Expertise, Projet, Entreprise, Contact, Gaia Automate Platform

Important : Garde une structure simple pour ne pas casser le dropdown

---

7. AppFooter

Fichier : components/AppFooter.vue

Description : Pied de page du site en 2 sections

Section Principale

Logo : /icon/Logo_Hoonesty-footer.svg

CTA : "Rejoignez une équipe où votre expertise fait la différence"

Adresse : 176 Avenue Charles de Gaulle 92200 Neuilly sur seine

Navigation :

• Liens avec séparateurs verticaux | couleur #D5CCE0
• Liens : Accueil, Expertise, Projet, Entreprise, Contact

Barre du Bas

Background : #110128 (violet très foncé)

Liens :

• Demander une Demo
• Politique de confidentialité

Copyright : Hoonesty © 2022–2025

Icônes sociales :

• LinkedIn : /icon/linkedin.svg
• X (Twitter) : /icon/XLogo.svg

Position : mt-auto (pas de position absolute !)

---

8. CustomButton

Fichier : components/CustomButton.vue

Description : Composant réutilisable pour tous les boutons CTA et formulaires du site

Props

interface Props {
  text: string                           // Texte affiché (requis)
  customClass?: string                   // Classes Tailwind additionnelles
  to?: string                            // URL de redirection (NuxtLink)
  type?: 'button' | 'submit' | 'reset'  // Type de bouton HTML
  disabled?: boolean                     // État désactivé
}

Style

Gradient radial :

background: radial-gradient(100% 212.11% at 100% 0%, #F1FFA5 0%, #C8E331 50.15%, #C0DB28 99.24%);

Dimensions :

• Hauteur fixe : h-11 (44px)
• Border radius : rounded-lg (8px)

Effet hover : hover:opacity-90 transition-opacity

Typographie : Montserrat bold, 16px, couleur #110128

Utilisation

<!-- Lien de navigation -->
<CustomButton text="Nous contacter" to="/contact-us" />

<!-- Bouton de formulaire -->
<CustomButton text="Envoyer" type="submit" :disabled="isLoading" />

<!-- Bouton avec largeur custom -->
<CustomButton text="Mon bouton" custom-class="w-[300px]" />

---

9. Pages

9.1 Pages Publiques

/ - Accueil

Fichier : pages/index.vue

Sections :

• Hero avec titre "La confiance c'est notre ADN"
• Vidéos superposées avec mix-blend-mode
• Section références clients (5 logos)
• Blocs "Pourquoi Hoonesty" et "Nos Valeurs"
• 4 cards expertises avec hover effects
• Accordéon témoignages (3 cards interactives)
• Multiples CTA vers formulaire de contact

---

/expertise - Nos Expertises

Fichier : pages/expertise.vue

Contenu :

• Bannière hero avec titre principal
• 4 blocs alternés (gauche/droite) :
  • Product Management
  • IA Intégrée aux SI
  • Conception de Solutions Digitales
  • Automatisation des Tests (QA)
• Section philosophie centrée
• CTA finale avec background image

---

/contact - Contact Simple

Fichier : pages/contact.vue

Fonctionnalités :

• Grid 2 colonnes responsive
• Email avec animation de soulignement au hover
• Image décorative (550×677px)
• Email affiché : contact@hoonesty.fr

---

/contact-us - Formulaire de Contact

Fichier : pages/contact-us.vue

Fonctionnalités :

• Formulaire 6 champs (Prénom*, Nom*, Société, Email*, Téléphone*, Message*)
• Validation côté client
• Envoi email via API /api/send-contact
• Messages de succès/erreur
• Design avec bordures noires et astérisques rouges

---

10. Configuration Technique

Variables d'Environnement (.env)

⚠️ IMPORTANT : Le fichier .env ne doit JAMAIS être commité sur Git.

# SMTP Configuration (Gmail)
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
SMTP_USER=contact@hoonesty.fr
SMTP_PASS=votre_mot_de_passe_gmail_app
SMTP_FROM=contact@hoonesty.fr

# Admin Email (qui reçoit les messages)
ADMIN_EMAIL=contact@hoonesty.fr

Pour créer votre .env :

cp .env.example .env
# Éditer avec vos vraies credentials

Configuration Nuxt (nuxt.config.ts)

export default defineNuxtConfig({
  compatibilityDate: '2024-07-15',
  devtools: { enabled: true },

  // Modules
  modules: ['@nuxtjs/tailwindcss'],

  // CSS global
  css: ['~/assets/css/main.css'],

  // Variables d'environnement
  runtimeConfig: {
    // Variables serveur (privées)
    smtpHost: process.env.SMTP_HOST,
    smtpPort: process.env.SMTP_PORT,
    smtpSecure: process.env.SMTP_SECURE,
    smtpUser: process.env.SMTP_USER,
    smtpPass: process.env.SMTP_PASS,
    smtpFrom: process.env.SMTP_FROM,
    adminEmail: process.env.ADMIN_EMAIL
  },

  // Meta et SEO
  app: {
    head: {
      title: 'Hoonesty - La confiance c\'est notre ADN',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: 'Hoonesty - Organisme de formation professionnelle' }
      ],
      link: [
        { rel: 'icon', type: 'image/png', href: '/icon/honesty-logo.svg' },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'
        }
      ]
    }
  }
})

Configuration Tailwind (tailwind.config.js)

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue"
  ],
  theme: {
    extend: {
      colors: {
        'violet-principal': '#2B0263',
        'violet-secondaire': '#5704C9',
        'brand': '#F0D300',
        'text': '#2A2C32',
        'bg': '#FCFBF8',
        'text-clair': '#F5F3F8'
      },
      fontFamily: {
        'jumper': ['Jumper PERSONAL USE ONLY', 'Arial', 'sans-serif'],
        'montserrat': ['Montserrat', 'sans-serif']
      }
    }
  },
  plugins: []
}

---

11. API Routes Serveur

POST /api/send-contact

Fichier : server/api/send-contact.post.ts

Description : Envoie un email de contact à l'admin via Nodemailer

Requête :

{
  prenom: string,      // Requis
  nom: string,         // Requis
  societe?: string,    // Optionnel
  email: string,       // Requis
  telephone: string,   // Requis
  message: string      // Requis
}

Validation :

• Tous les champs obligatoires vérifiés
• Format email validé

Fonctionnement :

1. Validation des champs requis
2. Configuration Nodemailer avec SMTP Gmail
3. Génération template HTML élégant avec gradient violet Hoonesty
4. Envoi à ADMIN_EMAIL
5. Retour { success: true, message: '...' }

Template Email :

• En-tête avec gradient violet
• Affichage de tous les champs du formulaire
• Message formaté avec retours à la ligne
• Footer avec date et heure d'envoi
• Version texte brut incluse

Configuration SMTP :

const transporter = nodemailer.createTransport({
  host: process.env.SMTP_HOST,      // smtp.gmail.com
  port: parseInt(process.env.SMTP_PORT), // 587
  secure: false,                    // false pour port 587
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS     // Mot de passe d'application Google
  }
})

Note : Pour Gmail, vous devez :

1. Activer l'authentification à deux facteurs
2. Générer un "Mot de passe d'application" dans votre compte Google
3. Utiliser ce mot de passe dans SMTP_PASS

---

12. Guide de Démarrage

Prérequis

• Node.js : v18 ou supérieur
• pnpm : v10 ou supérieur (ou npm)
• Git : Pour le versioning
• Compte Gmail : Pour l'envoi d'emails (optionnel pour le développement)

Installation

# 1. Cloner/Accéder au projet
cd /Users/wilfriedkakou/developments/perso/honesty-Oumar/honesty

# 2. Installer pnpm (si nécessaire)
npm install -g pnpm

# 3. Installer les dépendances
pnpm install

# 4. Créer le fichier .env
cp .env.example .env

# 5. Éditer .env avec vos credentials
nano .env

Configuration SMTP Gmail

Générer un Mot de Passe d'Application

1. Aller sur myaccount.google.com
2. Sécurité → Validation en deux étapes (activer si pas déjà fait)
3. Mots de passe d'application
4. Sélectionner "Autre (nom personnalisé)" → "Hoonesty"
5. Copier le mot de passe généré (16 caractères)
6. Coller dans .env → SMTP_PASS

Lancer le Projet

# Démarrage dev server
pnpm dev

# Ouvrir dans le navigateur
# http://localhost:3000

Build Production

# Compilation production
pnpm build

# Tester le build en local
pnpm preview

---

13. Déploiement

Configuration Vercel

Fichier : vercel.json

{
  "buildCommand": "pnpm build",
  "outputDirectory": ".output/public",
  "devCommand": "pnpm dev",
  "installCommand": "pnpm install",
  "framework": "nuxtjs"
}

⚠️ IMPORTANT : Ne jamais mettre de credentials dans vercel.json

Variables d'Environnement Vercel

Dashboard Vercel → Settings → Environment Variables

Ajouter :

• SMTP_HOST
• SMTP_PORT
• SMTP_SECURE
• SMTP_USER
• SMTP_PASS
• SMTP_FROM
• ADMIN_EMAIL

Configuration DNS Cloudflare

Enregistrements DNS :

• DNS A : hoonesty.com → 216.198.79.1 (IP Vercel)
• DNS CNAME : www → cname.vercel-dns.com
• Proxy Cloudflare : DÉSACTIVÉ (nuage gris, DNS uniquement)

Enregistrements Email (SPF/DMARC) :

TXT @ v=spf1 include:_spf.google.com ~all
TXT _dmarc v=DMARC1; p=none; rua=mailto:contact@hoonesty.fr

Processus de Déploiement

Via GitHub (Recommandé)

1. Push sur GitHub

   git add .
   git commit -m "Deploy to Vercel"
   git push origin main

2. Sur vercel.com : Import repository → Deploy

Via CLI Vercel

npm i -g vercel
vercel login
vercel --prod

Vérifications Post-Déploiement

✅ Checklist :

• [ ] Variables d'environnement configurées dans Vercel
• [ ] DNS propagés (vérifier avec nslookup hoonesty.com)
• [ ] Site accessible sur https://hoonesty.com
• [ ] Formulaire de contact fonctionnel
• [ ] Emails reçus correctement
• [ ] Toutes les pages accessibles
• [ ] Images chargées
• [ ] Responsive mobile/desktop

---

14. SEO et Optimisation

Fichiers SEO Créés

public/sitemap.xml

Plan du site pour Google

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://hoonesty.com/</loc>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://hoonesty.com/expertise</loc>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://hoonesty.com/contact</loc>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>https://hoonesty.com/contact-us</loc>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
</urlset>

public/site.webmanifest

Manifest PWA pour mobile

{
  "name": "Hoonesty",
  "short_name": "Hoonesty",
  "icons": [
    {
      "src": "/icon/honesty-logo.svg",
      "sizes": "any",
      "type": "image/svg+xml"
    }
  ],
  "theme_color": "#2B0263",
  "background_color": "#FCFBF8",
  "display": "standalone"
}

composables/useSEO.ts

Composable réutilisable pour meta tags dynamiques

export const useSEO = (config: {
  title: string
  description: string
  ogImage?: string
}) => {
  useHead({
    title: config.title,
    meta: [
      { name: 'description', content: config.description },
      { property: 'og:title', content: config.title },
      { property: 'og:description', content: config.description },
      { property: 'og:image', content: config.ogImage || '/og-image.png' },
      { name: 'twitter:card', content: 'summary_large_image' },
      { name: 'twitter:title', content: config.title },
      { name: 'twitter:description', content: config.description }
    ]
  })
}

SEO Individualisé par Page

Page Index :

useSEO({
  title: 'La confiance c\'est notre ADN | Société de conseil tech',
  description: 'Hoonesty est une société de conseil spécialisée...'
})

Page Expertise :

useSEO({
  title: 'Nos Expertises Tech : Product, IA, Digital & QA',
  description: 'Découvrez nos 4 expertises : Product Management...'
})

Page Contact-Us :

useSEO({
  title: 'Contactez-nous - Parlons de votre projet',
  description: 'Une question ? Un projet ? Contactez-nous...'
})

Google Search Console

1. Créer compte Google Search Console
2. Ajouter domaine hoonesty.com
3. Vérifier avec enregistrement DNS TXT
4. Soumettre sitemap : https://hoonesty.com/sitemap.xml

---

Annexes

Glossaire

• Nuxt : Framework Vue.js full-stack
• Nitro : Moteur serveur de Nuxt
• SSR : Server-Side Rendering
• SMTP : Simple Mail Transfer Protocol
• SEO : Search Engine Optimization
• PWA : Progressive Web App

Patterns de Code Récurrents

Animation de Soulignement

<div class="group">
  <a class="group-hover:opacity-100">contact@hoonesty.fr</a>
  <div class="relative w-full h-0">
    <div class="absolute border-b border-[#D5CCE0]"></div>
    <div class="absolute border-b border-[#7D7090] group-hover:right-0 transition-all duration-500"></div>
  </div>
</div>

Accordéon avec Bounce

<div
  :class="isActive ? 'w-[672px]' : 'w-[208px]'"
  class="transition-[width] duration-[800ms]"
  style="transition-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1); transform-origin: left center;"
>

Grid Responsive 2 Colonnes

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">

Commandes Utiles

# Développement
pnpm dev

# Build production
pnpm build

# Preview production
pnpm preview

# Installer dépendances
pnpm install

# Nettoyer cache
rm -rf .nuxt node_modules
pnpm install

# Déploiement
vercel --prod

---

À Propos de cette Documentation

Version : 1.0 Dernière mise à jour : Décembre 2024 Projet : Hoonesty - Organisme de Formation Professionnelle

Maintenance

Cette documentation est maintenue à jour avec les évolutions du projet. Pour toute question ou suggestion d'amélioration, contactez l'équipe technique.