v1.0 Novembre 2025
2.2

Spécifications Site Vitrine

Site one-page Angular — rewapp.fr

Avril 2026
Version reflects actual implementation
Angular 20 — Single Page
1

VUE D'ENSEMBLE

1.1Description

Le site vitrine REWAPP (rewapp.fr) est un site one-page scrollable développé avec Angular 20 (standalone components, pas de SSR). L'objectif est de présenter la proposition de valeur de REWAPP et de rediriger les visiteurs vers l'application mobile ou l'espace partenaire.

Il ne s'agit PAS d'un site e-commerce, d'un blog, ni d'une vitrine de partenaires. C'est une landing page de conversion.

1.2Objectifs

  • Présenter la proposition de valeur REWAPP
  • Convertir les visiteurs en utilisateurs de l'application mobile (app.rewapp.fr)
  • Orienter les commerçants vers l'espace partenaire (partner.rewapp.fr)
  • Permettre la désinscription (route /unsubscribe)
  • Partager des invitations (route /invite/:code)

1.3Public Cible

Audiences

Audience Objectif sur le site
Consommateurs Télécharger l'app mobile (CTA App Store / Google Play)
Commerçants / Restaurateurs Rejoindre le programme partenaire (CTA Devenir Partenaire → partner.rewapp.fr)
2

ARCHITECTURE DES PAGES

2.1Routes

Routes Angular

Path Composant Description
/ HomePage Page one-page avec toutes les sections (Hero, HowItWorks, WhyRewapp, ProOffer, ContactCta, Footer)
/unsubscribe UnSubscribePage Page de désinscription de la liste email
/invite/:code InvitePage Page de lien d'invitation (code partenaire)
** redirect → / Toute route inconnue redirige vers home

2.2Structure du Projet

rewapp-vitrine/src/app/
├── app.component.ts          # Composant racine
├── app.config.ts             # Configuration Ionic/Angular
├── app.routes.ts             # Routes Angular
├── pages/
│   ├── home/                 # HomePage (page one-page)
│   │   ├── home.page.ts
│   │   ├── home.page.html
│   │   └── home.page.scss
│   ├── unsubscribe/
│   │   └── unsubscribe.page.*
│   └── invite/
│       └── invite.page.*
└── shared/components/
    ├── navbar/               # Barre de navigation sticky
    ├── hero/                 # Section hero avec CTA app
    ├── how-it-works/         # Carrousel 4 étapes
    ├── why-rewapp/           # Section avantages
    ├── pro-offer/            # Section offre pro commerçants
    ├── contact-cta/          # Section contact
    └── footer/               # Pied de page
3

NAVIGATION & STRUCTURE

3.1Navbar

Barre de navigation sticky. Change d'apparence au scroll (logo blanc après le hero).

Liens de Navigation

Label Anchor ID Comportement
Comment ça marche #comment-ca-marche Scroll smooth vers section HowItWorks
À propos de nous #avantages Scroll smooth vers section WhyRewapp
Contact #contact Scroll smooth vers section ContactCta
Offre Pro #offre-pro Scroll smooth vers section ProOffer

CTA

  • Bouton unique "Devenir Partenaire / Connexion" → https://partner.rewapp.fr (nouvel onglet)

Responsive

  • Desktop : logo blanc + liens horizontaux + CTA bouton
  • Mobile : hamburger menu avec menu drawer, liens identiques, logo adaptatif

3.2Sections de la Page Home

Ordre des sections (scroll)
  1. 1

    Hero

    Titre, sous-titre, CTA téléchargement app

  2. 2

    HowItWorks

    Carrousel 4 étapes (Nos Partenaires → Choix → Fidélité Gamifié → Récompense)

  3. 3

    WhyRewapp

    Section avantages (id: #avantages)

  4. 4

    ProOffer

    Offre pour les commerçants (id: #offre-pro)

  5. 5

    ContactCta

    Section contact (id: #contact)

  6. 6

    Footer

    Liens légaux, réseaux, Copyright

4

SPÉCIFICATIONS DES SECTIONS

4.1Hero

ID anchor : #hero

Section plein écran en background. Double contenu (desktop / mobile).

Contenu

Élément Valeur
Titre desktop "Votre fidélité mérite la meilleure des récompenses"
Titre mobile "La fidélité réinventée"
Sous-titre desktop "L'application où la fidélité profite autant aux consommateurs qu'aux commerçants."
Sous-titre mobile "La plateforme qui récompense les clients fidèles et aide les commerçants à bâtir une communauté engagée."
CTA App Store → https://app.rewapp.fr
CTA Google Play → https://app.rewapp.fr

4.2HowItWorks (Comment ça marche)

ID anchor : #comment-ca-marche

Carrousel interactif avec phone mockup. Auto-playtoutes les 5 secondes. Navigation via progress bar.

Les 4 Étapes

# Titre Description Image phone
1 Nos Partenaires Retrouvez vos établissements préférés parmis nos partenaires cmt1.png
2 Choix de récompense Consultez leur programme de fidélité et choisissez la récompense que vous préférez. cmt2.png
3 La Fidélité Gamifié Gagnez des Recoins automatiquement via vos achats dans ces établissements et évoluez dans les paliers pour gagner toujours plus ! cmt3.png
4 Récompense automatique Gagnez du cashback + ReCoins automatiquement automatique.png

Comportement

  • Auto-play toutes les 5 secondes
  • Progress bar animée en bas
  • Fade transition 300ms entre étapes
  • Mobile : navigation par boutons Précédent/Suivant

4.3Pages Spéciales

Unsubscribe /unsubscribe

  • Composant : UnSubscribePage
  • Permet la désinscription de la liste email marketing

Invite /invite/:code

  • Composant : InvitePage
  • Paramètre : code (code partenaire)
  • Utilisé pour le programme de parrainage
5

ROUTING & URLS

5.1URLs Externes

Liens

Destination URL Contexte
Application mobile https://app.rewapp.fr CTA Hero (App Store + Google Play)
Espace partenaire https://partner.rewapp.fr CTA Navbar
Site vitrine https://rewapp.fr Racine
6

STACK TECHNIQUE

6.1Technologies

Stack

Catégorie Technologie Version
Framework Angular 20.x (standalone components)
UI mobile Ionic 8.x
Styling SCSS Composant-scoped
Build Vite Inclus dans Ionic
Déploiement CapRover rewapp-vitrine container

6.2Notes Importantes

PAS DE SSR

Ce site n'utilise pas Angular Universal ni de rendering côté serveur. C'est une SPA Angular classique. Pas de SEO indexing dynamique — les liens App Store/Play Store suffisent pour la conversion.

  • Aucune connexion à la DB (site statique côté données)
  • Assets images dans src/assets/
  • Composants standalone (pas de NgModules)
  • Tous les composants dans shared/components/ sont importés dans index.ts