Spécifications Site Vitrine

1.1Objectifs du Site Vitrine

Le site vitrine REWAPP constitue la porte d'entrée digitale de l'écosystème REWAPP. Il remplit plusieurs missions stratégiques complémentaires.

Objectifs principaux

• Présenter la proposition de valeur unique REWAPP de manière claire et convaincante
• Convertir les visiteurs en utilisateurs de l'application mobile
• Attirer et recruter de nouveaux commerçants partenaires
• Informer sur le fonctionnement du double cashback (bancaire + commerçant)
• Afficher la liste des partenaires pour faciliter la découverte
• Assurer la conformité légale (CGU, CGV, RGPD, mentions légales)
• Optimiser le référencement naturel (SEO) pour l'acquisition organique

Indicateurs de succès

1.2Public Cible

Le site vitrine s'adresse à deux audiences distinctes :

Utilisateurs Finaux (Clients)

Commerçants Partenaires

• Restauration : restaurants, cafés, boulangeries, food trucks
• Commerce alimentaire : supermarchés, épiceries, primeurs
• Mode & beauté : prêt-à-porter, coiffeurs, instituts
• Services : garages, pressing, salles de sport
• Loisirs & culture : librairies, boutiques de sport
• Santé & bien-être : pharmacies, opticiens

1.3Stack Technique

2.1Page d'Accueil

URL : /

La page d'accueil constitue le point d'entrée principal. Elle doit convaincre rapidement le visiteur de la valeur de REWAPP.

2.1.1 Hero Section

• Titre principal : "Le cashback réinventé : gagnez sur tous vos achats"
• Sous-titre : "Cashback bancaire OU dépense directe chez vos commerçants"
• CTA principal : Boutons "App Store" et "Google Play" (liens deep-link)
• Visuel : Mockup de l'application mobile sur smartphone
• Compteur animé : Nombre de points distribués en temps réel (données API)

2.1.2 Section Avantages (3 colonnes)

2.1.3 Section Comment ça marche

Timeline horizontale en 4 étapes avec icônes et animations au scroll :

2.1.4 Section Partenaires

• Carousel de logos partenaires avec défilement automatique (5s/slide)
• Texte : "Déjà 600+ commerçants partenaires"
• CTA : Bouton "Voir tous les partenaires" → /partenaires
• Affichage : 6 logos visibles (desktop), 3 logos (mobile)

2.1.5 Section Témoignages

3 témoignages clients en format cards :

2.1.6 Footer CTA (Call-to-Action Final)

• Titre : "Prêt à gagner sur tous vos achats ?"
• Boutons : App Store + Google Play (grande taille : 200px largeur)
• QR Code : Code scannable pour téléchargement direct (lien universel)
• Background : Couleur primaire ou dégradé pour mise en évidence

2.2Page Clients (Utilisateurs)

URL : /clients ou /utilisateurs

Page dédiée aux utilisateurs finaux avec informations détaillées.

2.2.1 Header

• Titre : "REWAPP pour les utilisateurs"
• Sous-titre : "Transformez chaque achat en récompense tangible"

2.2.2 Double Système de Cashback

2.2.3 Système de Paliers

Note : Votre palier est calculé par commerçant sur les 12 derniers mois. Plus vous êtes fidèle, plus vous gagnez !

2.2.4 FAQ Clients

Accordéon avec questions fréquentes (minimum 8 questions) :

• Comment lier ma carte bancaire ?
• Comment fonctionne le cashback bancaire ?
• Comment utiliser mes points chez un partenaire ?
• Quelle est la durée de validité des points ? (12 mois)
• Y a-t-il un plafond de points ? (Non, illimité)
• Combien de temps pour recevoir mon virement ? (2-3 semaines)
• Comment fonctionne le QR code ? (60 secondes, usage unique)
• Mes données bancaires sont-elles sécurisées ?

2.3Page Commerçants (Partenaires)

URL : /commercants ou /partenaires/devenir-partenaire

Page dédiée au recrutement de nouveaux commerçants partenaires.

2.3.1 Header

• Titre : "Devenez partenaire REWAPP"
• Sous-titre : "Fidélisez vos clients et augmentez votre chiffre d'affaires"
• CTA : "Demander une démonstration" (scroll vers formulaire)

2.3.2 Avantages Partenaires

2.3.3 Offres et Tarifs

2.3.4 Formulaire d'Inscription Partenaire

2.4Page Liste des Partenaires

URL : /partenaires

Annuaire complet et interactif des commerçants partenaires.

2.4.1 Carte Interactive

• Technologie : Mapbox ou Google Maps
• Pins : Affichage de tous les partenaires géolocalisés
• Clusters : Regroupement automatique des pins proches
• Info-bulle : Nom, catégorie, taux cashback au survol
• Click : Ouverture fiche partenaire (sidebar ou modal)

2.4.2 Liste Filtrable

2.4.3 Barre de Recherche

• Placeholder : "Rechercher un partenaire..."
• Recherche instantanée (debounce 300ms)
• Recherche sur : nom, catégorie, ville
• Suggestions autocomplete pendant la saisie

2.4.4 Fiches Partenaires

2.5Pages Légales

• CGU : /cgu - Lien vers document 12.1
• CGV : /cgv - Lien vers document 12.2
• Politique de Confidentialité : /confidentialite - Document 12.3
• Mentions Légales : /mentions-legales - Document 12.4
• Politique de Cookies : /cookies

3.1Formulaires et Validations

3.1.1 Formulaire Newsletter / Pré-inscription

Comportement : Validation côté client, Captcha invisible (reCAPTCHA v3), Email automatique avec liens stores.

3.1.2 Formulaire Contact

URL : /contact

3.2Carte Interactive des Partenaires

3.2.1 Comportement

• Chargement : Affichage skeleton pendant chargement données
• Centrage par défaut : Position utilisateur (si autorisée) ou France métropolitaine
• Zoom : Niveau 12 pour position utilisateur, niveau 6 pour France
• Mise à jour : Rechargement automatique lors du déplacement carte

3.2.2 Géolocalisation

• Demande permission : À l'arrivée sur la page, une fois par session
• Message si refusée : "Activez la géolocalisation pour voir les partenaires près de vous"
• Fallback : Recherche par ville/code postal

3.2.3 Performance

• Lazy loading des pins hors viewport
• Clustering à partir de 10 pins proches
• Cache côté client (10 minutes)

3.3Simulateur de Gains

3.3.1 Logique de Calcul

Points gagnés = (Dépenses mensuelles × Taux cashback) / 0,10€

Conversion Bancaire = Points × 0,095€
Conversion Commerçant = Points × 0,105€

3.3.2 Exemple de Calcul

Champs d'entrée :

• Dépenses mensuelles moyennes (slider : 100€ - 2000€)
• Taux de cashback moyen (défaut : 4%)
• Mode d'utilisation préféré (bancaire / commerçant)

4.1Optimisations On-Page

4.1.1 Balises Meta

4.1.2 Structure des Titres

• Un seul H1 par page
• Hiérarchie H1 > H2 > H3 respectée
• Mots-clés principaux dans les titres

4.1.3 URLs SEO-Friendly

4.2Données Structurées (Schema.org)

• Organization : name, url, logo, contactPoint, sameAs (réseaux sociaux)
• LocalBusiness : name, address, geo, telephone, openingHours, priceRange
• FAQPage : mainEntity (array de Question/Answer)

4.3Performance

4.3.1 Objectifs Core Web Vitals

4.3.2 Optimisations Techniques

• Images : Format WebP, srcset responsive, lazy loading
• JavaScript : Code splitting, tree shaking, minification
• CSS : Tailwind purge, critical CSS inline
• Cache : Headers cache appropriés, Service Worker (PWA)
• Compression : Brotli/Gzip activé
• CDN : Distribution via Vercel Edge Network

5.1Breakpoints et Adaptations

5.2Navigation Mobile

5.2.1 Menu Hamburger

• Icône : 3 barres horizontales (≡)
• Position : En haut à droite du header
• Ouverture : Overlay plein écran ou sidebar droite
• Animation : Slide in 200ms ease-out

5.2.2 Éléments du Menu Mobile

• Logo REWAPP (retour accueil)
• Liens : Accueil, Clients, Commerçants, Partenaires, Contact
• CTA : "Télécharger l'app" (bouton mis en évidence)
• Fermeture : Bouton X ou tap outside

5.2.3 Navigation Sticky

• Header fixe en haut lors du scroll
• Hauteur réduite après scroll (60px → 50px)
• Ombre portée au scroll pour séparation visuelle

6.1Analytics et Tracking

Événements Personnalisés

6.2Services Tiers

7.1Bannière Cookies

Affichage obligatoire au premier accès :

• Position : Bas de page, sticky
• Contenu : "Nous utilisons des cookies pour améliorer votre expérience."
• Boutons : "Accepter tout", "Personnaliser", "Refuser"
• Lien : "En savoir plus" → /cookies

7.2Gestion des Consentements

7.3Droits Utilisateurs RGPD

Page ou formulaire permettant aux utilisateurs d'exercer leurs droits :

• Droit d'accès : Demander copie des données
• Droit de rectification : Corriger des données inexactes
• Droit à l'effacement : Supprimer les données
• Droit à la portabilité : Export des données

Contact DPO : dpo@rewapp.fr (email à créer)

8.1Tests Fonctionnels

8.2Tests Compatibilité

8.2.1 Navigateurs

8.2.2 Devices

8.3Tests Performance

8.4Tests Accessibilité

• Contraste couleurs : Ratio minimum 4,5:1
• Navigation clavier : Tous les éléments focusables accessibles
• Labels formulaires : Tous les champs associés à un label
• Alt images : Toutes les images avec attribut alt
• ARIA : Utilisation appropriée des rôles et attributs
• Score Lighthouse Accessibilité : > 90/100