Wireframes - EGS Gallois Sisal¶

Note : Ces wireframes décrivent la structure basse-fidélité des pages clés.

1. Homepage (Accueil)¶

Structure : * Header : Logo (Gauche) | Nav (Centre) | Langue + CTA (Droite) * Hero : Grande image/vidéo pleine largeur. Titre H1 centré "Bienvenue à Amboasary-Atsimo". Sous-titre. CTA "Sourcer la fibre". * Section Storytelling : Layout 2 colonnes. Col G: Texte "L'Androy". Col D: Image Paysage. * Section Produits : Titre "Nos Produits". Grille de 3 cartes (Sisal Brute, Brossée, Étoupe). CTA "Voir tout". * Section Impact : Fond coloré (Vert). Titre "Transition". 3 Icônes avec texte court (Éco, Social, R&D). CTA "En savoir plus". * Footer : 4 Colonnes (Bio, Liens Rapides, Contact, Légal).

2. Page À Propos¶

Structure : * Header Page : Titre H1 "Un siècle d'histoire, un nouveau chapitre". * Timeline (Histoire) : Axe vertical ou horizontal. Points clés : 1945 (Création), 2019 (Nouvelle Génération), Aujourd'hui. Texte court pour chaque date. * Vision (4 Piliers) : Grille 2x2. Chaque bloc avec Icône + Titre (ex: "L'Humain et la Terre") + Paragraphe descriptif. * Valeurs : Liste à puces stylisée ou cartes simples (Éthique, Excellence, Audace). * CTA : "Rejoindre l'aventure" -> Lien vers Construire Ensemble.

3. Page Produits¶

Structure : * Header Page : Titre H1 "Nos Produits". Breadcrumb. * Intro : Texte pleine largeur sur les propriétés du sisal (Résistance, Durabilité). * Quiz (Feature) : Bloc interactif. Question 1 "Quel est votre usage ?" (Boutons). Question 2 "Quelle finition ?". Résultat dynamique affichant le grade recommandé. * Tableau des Grades : * En-tête : Grade | Longueur | Couleur | Usage. * Lignes : 3L, 3, R, D, Étoupe. * Style : Zébré, lisible. * Bloc Contact : CTA large "Besoin d'un devis ?" avec lien vers formulaire.

4. Page Transition & Impacts¶

Structure : * Header Page : Titre H1 "Transition & Impacts". * Intro : Texte sur les défis de l'Androy (Contexte). * 3 Axes (Tabs/Accordeon ou Grille) : * Bloc 1 : Économie Circulaire (Biogaz, Valhoriz). * Bloc 2 : Agriculture Durable (Agroécologie). * Bloc 3 : Innovation (R&D, Nouveaux matériaux). * Partenaires : Grille de logos ou liste textuelle (Kinomé, Miarakap, etc.). * Citation : Bloc citation mis en avant (Arnaud Félix-Gallois). * Appel à l'action : "Rejoignez les projets d'innovation".

5. Page Construire Ensemble¶

Structure : * Header Page : Titre H1 "Construire Ensemble". * Culture : Texte + Photo d'équipe. "Pourquoi nous rejoindre ?". * Offres d'emploi : * Liste de cartes : Titre du poste | Lieu | Type de contrat | Bouton "Voir". * Si vide : Message "Aucune offre pour le moment". * Candidature Spontanée : Bloc distinct. Titre "Candidature Spontanée". Texte d'invitation. Bouton CTA vers Google Form. * Innovation : Rappel du lien vers les projets d'innovation.

6. Page Contact¶

Structure : * Header Page : Titre H1 "Contact". * Grille Contact (2 colonnes) : * Col Gauche (Infos) : Adresse Siège, Adresse Usine, Email, Téléphone. Map Google intégrée en dessous. * Col Droite (Formulaire) : * Select "Sujet" (Produit, Recrutement, Autre). * Input "Nom". * Input "Email". * Textarea "Message". * Bouton "Envoyer".