Spaces:
Running
Running
Ctrl+K
Design a Tender Detail page for a marketplace mainly used by non‑experts / households. Keep it simple, friendly, and reassuring. All visible text must be in easy French (A2–B1 level), short sentences, no jargon. Use only HTML + TailwindCSS (no custom JS). Overall tone & accessibility • Friendly, human, “guide” tone. Add brief helper sentences (“Comment ça marche ?”). • Larger fonts, big buttons, large touch targets. • Clear icons with labels (not icon-only). • High contrast, plenty of white space, no information overload. Hero (top) • Titre clair de l’appel d’offre. • Petit sous‑titre “Ce que je cherche” en une phrase. • Badges simples : Statut (Ouvert/Fermé), Localisation, Date limite, Budget. • Deux gros boutons : “Proposer mon aide” (primaire) et “Poser une question” (secondaire). • En dessous, un mini bloc “Étapes” (3 puces) : 1. Vous lisez l’annonce, 2) Vous envoyez un message ou une proposition, 3) Vous fixez un rendez‑vous. Deux colonnes (desktop) / une colonne (mobile) • Colonne gauche (contenu) • Description simple (paragraphes courts, listes à puces). • Ce qui est important pour moi (exigences en 3–6 puces maximum, mots simples). • Photos ou pièces jointes (placeholders ok). • Petite FAQ (2–3 questions courtes, réponses brèves). • Colonne droite (encadrés rassurants) • Résumé rapide (carte avec lignes : Budget, Date limite, Ville/Commune, Statut, Propositions reçues). • Conseil budget : texte court “Le prix peut évoluer après discussion. Donnez une fourchette.” • À propos du demandeur : avatar neutre, prénom/pseudo, “Membre depuis …”, bouton “Envoyer un message”. • Aide : “Besoin d’aide pour répondre ?” + lien d’aide (placeholder). • CTA collant sur mobile : “Proposer mon aide”. Bloc “Détails clés” (cartes simples) • Budget : affiche soit Budget ou Prix + Unité + Durée estimée avec micro‑texte “Indicatif, à affiner ensemble”. • Date limite : date lisible (“15 septembre 2025”). • Sous‑catégories : pastilles lisibles (max 6). • Mots‑clés : pastilles (max 6). Section “Comment répondre ?” (pédagogique) • 3 étapes courtes avec icônes : 1. “Présentez‑vous en 2 phrases” 2. “Dites votre idée et votre prix” 3. “Proposez un créneau” • Mini exemple prérempli (“Exemple de message”) en 3 lignes, ton poli et simple. Suggestions • “Annonces similaires” (3 cartes max), titres + ville + bouton “Voir”. Style & couleurs (doux et rassurant) • Palette Tailwind‑like : primary #ef4444, secondary #8b5cf6, accent #ec4899, light #f3f4f6, success #22c55e. • Cards arrondies (rounded-2xl), ombre douce (shadow-md / hover:shadow-lg). • Sections bien séparées (divide-y, space-y-6). • Icônes Font Awesome avec libellés (“Budget”, “Ville”, “Date”). Responsive • Container max-w-5xl ou max-w-6xl. • Desktop : grid 12, contenu col-span-8, sidebar col-span-4. • Mobile : une colonne, CTA collant en bas. Deliverables • Un seul fichier HTML avec classes Tailwind. • Tout le texte en français simple. • Placeholders réalistes (ex. “Fort-de-France”, “Budget : 500–700 €”). • Commentaires HTML pour repérer chaque section. - Follow Up Deployment
9d51d14 verified