Risorse · Esempio Live
Le pagine reali di Doc Marketing, sezione per sezione
Non un esempio generico di terzi — questa è la struttura che useremo davvero per l'Optin Funnel di Doc Marketing, con lo stesso sistema visivo di brand usato su tutto il sito (colori, font Montserrat, componenti card/CTA/eyebrow). Questa pagina non finirà in un repo: è il riferimento visivo che Design/Funnel replicheranno dentro il builder GHL. I placeholder <<...>> restano finché Build Fase 0 non consegna il brief reale.
<<...>> è un placeholder esplicito in attesa del brief di Build Fase 0 — mai testo inventato lasciato definitivo.
1 · Pagina di Optin
Apri optin-page.html in una nuova scheda → · confronta con il wireframe teorico: wireframe-optin.html
Brand mark "DOC MARKETING"
Stesso mark esatto usato in start.html (icona + "DOC" bianco + "MARKETING" arancione) — non un logo placeholder, è già il logo reale perché questo pilota è per Doc Marketing stessa.
Richiamo avatar + H1 + 3 benefit + obiezioni
Corrisponde al blocco 1 di wireframe-optin.html. Tutto tra <<...>> — target, risultato, obiezioni, benefit — arriva da Build Fase 0, non va scritto a intuito.
Documento + versione mobile
Mockup minimale — basta il documento, non serve altro — stesso linguaggio visivo di brand (glow arancione, bordi, ombre).
3 card "Vecchio Modo"
Blocco 2 del wireframe — va scritto sulle False Beliefs/What They've Tried raccolte in Fase 0, non lasciato come titolo generico.
Value grid a 3 colonne
Componente .value-grid di sistema, riutilizzato qui per i 3 benefit del wireframe.
3 card testimonial
Solo 3, non 6 — segue la regola "meglio 3 vere che 6 con placeholder visibili" già scritta nel wireframe, applicata per davvero qui.
Stesso CTA ripetuto 2 volte
Blocchi 5 e 7 del wireframe — stesso bottone/stesso obiettivo (scaricare), non un secondo obiettivo diverso.
Modal reale, funzionante
A differenza della prima versione (solo immagine), qui il bottone apre davvero un popup con Nome/Cognome/Email/Telefono — lo stesso comportamento che andrà ricreato nel form nativo GHL.
Footer standard di brand
"DOC Marketing — Strategia, Tattica e Tecnologia..." + © — più la riga di disclaimer (placeholder, obbligatoria solo se il settore lo richiede).
2 · Thank You / Bridge Page
Apri thank-you.html in una nuova scheda → · confronta con il wireframe teorico: wireframe-thankyou.html
"La tua guida è in arrivo"
Blocco Confirmation del wireframe — headline conferma + istruzione spam + email supporto.
Stessa formula hero, video + garanzia
Il placeholder in pagina lo dice esplicitamente: questa sezione non si scrive prima di aver confermato il Backend Offer in Fase 0 (Strategist) — il video è opzionale, non obbligatorio.
3 card verso altre risorse
Corrisponde esattamente al blocco Resources (opzionale) del wireframe.
Stesso footer della pagina di Optin
Coerenza cross-pagina — nel funnel reale (dentro GHL) il footer si costruisce una volta sola e si riusa identico sulle 3 pagine.
3 · Pagina di Download
Apri download.html in una nuova scheda → · confronta con il wireframe teorico: wireframe-download.html
Solo logo, nessuna navigazione
Per non distrarre da "prendi il tuo file" — nessun link ad altre pagine, a differenza della navbar completa delle pagine SOP.
Stessa formula hero, bottone che scarica davvero
Corrisponde al blocco 2 del wireframe — qui il bottone deve funzionare per davvero (apre/scarica il file), non essere un altro form. Nell'esempio il click simula l'apertura e cambia stato del bottone.
Si applica solo al click, non all'arrivo pagina
Nota esplicita sotto il CTA — stesso punto sollevato nel wireframe: un tag che scatta al semplice arrivo pagina mentirebbe sul comportamento reale del lead.
Stessi 3 benefit, 4 slot testimonianza
Rinforza la decisione già presa, non introduce contenuto nuovo — verificato sui 3 template GHL reali (vedi Template): tutti riusano la stessa struttura Optin invece di una pagina di consegna minimale.
Copia diretta dalle altre 2 pagine
Stesso footer/disclaimer di Optin e Thank You — non si riscrive da zero per ogni pagina.
Sistema visivo: identico a 01_Strutture_Prodotto/Funnel/Assessment-Funnel/05_Template/start.html (palette #E65512/#090909, font Montserrat, componenti card/CTA/eyebrow) — non un template di terzi. La struttura delle sezioni è quella già mappata in wireframe-optin.html e wireframe-thankyou.html, a sua volta informata da riferimenti esterni (swipe file, Figma) studiati in precedenza — ma il codice qui è nostro, da usare davvero come riferimento per la build in GHL.