Risorse · Esempio Live

Le pagine vere, sezione per sezione

Non un mockup — sono le pagine reali di Doc Marketing (05_Template/), caricate qui sotto in un riquadro live. A fianco, cosa fa ogni sezione e da dove viene quella scelta. Se il riquadro appare vuoto (può succedere se il browser blocca l'anteprima locale), usa il link "Apri in una nuova scheda".

Come usarla: questa pagina è un esempio già completo, non un modello da copiare 1:1 per un altro cliente — pilastri, domande, brand cambiano (vedi Fase 0). Usala per capire come si struttura ogni pagina, non per riusare le stesse parole.

1 · Start

Apri start.html in una nuova scheda → · Vedi la struttura wireframe →

Hero

Hook + subhead

Placeholder <<...>> — da compilare in Fase 2, formula in Copy §1.1/1.2.

Phone mockup

3 telefoni con domande reali

Mostra domande vere dell'array QUESTIONS, per anticipare il tipo di esperienza.

Value / Come funziona

3 step + 3 valori

Copy fisso, non placeholder — spiega il meccanismo prima del quiz.

Anteprima 4 Outcome

Le 4 card profilo

Nomi ufficiali (Fondamenta Fragili, ecc.) — cambiano se il cliente ha un numero diverso di Outcome.

Credibilità

Bio + case study + stats

Tutti placeholder — mai da riempire con dati non verificati (regola valida per ogni cliente).

Bonus

Regalo a fine assessment

Valore (€<<XYZ>>) placeholder — da confermare con lo Strategist/Commerciale.

Survey overlay

Le 40 domande

Si apre in overlay a schermo intero — stessa logica di survey.html standalone. Dettaglio: Schema-Survey.md.

2 · Outcome

Apri outcome.html in una nuova scheda → · Vedi la struttura wireframe →

Banner demo

Dati dimostrativi

Appare solo se non c'è un risultato reale in localStorage — non è un bug, è il fallback previsto.

Reveal

Donut punteggio globale

Calcolato via SVG generato da JS, non un'immagine statica.

Profilo

Outcome primario + secondario

Il testo di diagnosi è placeholder — da scrivere sul framework in struttura.md.

Radar

Le 6 aree a confronto

Un solo grafico invece di 6 barre separate — più immediato da leggere.

Priority + Matrice

Aree prioritarie + le 40 risposte

La matrice risposte serve per audit interno, non è pensata per stupire l'utente.

CTA finale

Verso Apply

Non è fissa su "prenota una call" — dipende dal tipo di offerta confermato in Fase 0.

3 · Apply

Apri apply.html in una nuova scheda → · Vedi la struttura wireframe →

Contesto

Profilo + punteggio richiamati

Letti da localStorage, non richiesti di nuovo all'utente.

Form

Nome/Email/Telefono + 4 domande

Le 4 domande di qualificazione sono ancora placeholder espliciti — non ancora fornite dal referente del cliente, da scrivere in Fase 2 col reparto Copy.

Nota

Nessuna promessa inventata

Headline/subhead sono placeholder: vanno scritti solo dopo aver confermato il tipo di offerta reale.

4 · Thank You Apply

Apri thank-you-apply.html in una nuova scheda → · Vedi la struttura wireframe →

Conferma

Check + headline

Headline/copy ancora placeholder — dipendono dal processo commerciale reale post-apply.

Prossimi step

3 step placeholder

Da scrivere solo quando il processo commerciale del cliente è confermato (Strategist/PM).

Blueprint tecnico interno (non per il pubblico): architecture.html — le 40 domande filtrabili per pilastro, le 4 formule dei profili, la tabella FIELD/TAG completa.

Vedi anche: Mappa & Wireframe →