Progetto 05 / 06 · sito web
LocalVision Studio
Un prototipo di sito che offre siti web e video AI alle attività locali, costruito intorno a un “simulatore di upgrade per attività” interattivo. Un prototipo, non un lavoro per un cliente.
Panoramica
Screenshot
Livello di prova: Prova esistente
Vedi la prova
Affermazione
LocalVision Studio: un prototipo di sito che offre siti web e video AI alle attività locali, costruito intorno a un “simulatore di upgrade per attività” interattivo. Un prototipo, non un lavoro per un cliente.
Dichiarato da Danilo
Prove
- Screenshot del prototipo LocalVision Studio (desktop e mobile) · manual · verificato il 29 settembre 2026Presi il 29/09/2026 dal progetto in esecuzione in locale, perché non è online.
- Registrazione dello schermo del simulatore di upgrade per attività di LocalVision (13 s, senza audio) · manual · verificato il 29 settembre 2026Registrata il 29/09/2026 con Playwright dal progetto in esecuzione in locale: la scelta di un’attività, un problema, un obiettivo e una trasformazione nel simulatore.
- Sorgente di LocalVision: lo stato del simulatore (src/components/Simulator.tsx, righe 36–58) · manual · verificato il 29 settembre 2026Copiato testualmente dal file sorgente reale il 29/09/2026 (fine riga normalizzati).
- Sorgente di LocalVision: i pulsanti di scelta (src/components/Simulator.tsx, righe 226–264) · manual · verificato il 29 settembre 2026Copiato testualmente dal file sorgente reale il 29/09/2026 (fine riga normalizzati).
Risultato
Screenshot reali della pagina, presi dal progetto in esecuzione il 29/09/2026. Che l’abbia costruito Danilo è una sua dichiarazione.
In questa pagina
- 02 Simulatore: una registrazione dello schermo del simulatore di upgrade per attività
- 03 Codice: estratti del sorgente del simulatore
Non in questa pagina
- Misurato: questo prototipo gira solo su un server di sviluppo locale, e i punteggi presi lì non sarebbero rappresentativi.
Simulatore
Quattro scelte (attività, problema, obiettivo, trasformazione); l’anteprima a destra segue ognuna.
Registrazione dello schermo
Livello di prova: Prova esistente
Codice
Un unico oggetto di stato contiene le quattro scelte; i pulsanti di scelta sono un piccolo componente riutilizzabile.
export function Simulator() {
const { copy } = useLang()
const [state, setState] = useState<SimState>({
business: null,
goal: null,
problem: null,
level: null,
})
const [active, setActive] = useState(0)
const set = (patch: Partial<SimState>) => setState((s) => ({ ...s, ...patch }))
// Picks made in the hero diagnosis column pre-fill the simulator.
useEffect(() => {
const onPick = (e: Event) => {
const { kind, id } = (e as CustomEvent<{ kind: string; id: string }>).detail
if (kind === 'business' || kind === 'goal' || kind === 'problem') {
setState((s) => ({ ...s, [kind]: id }))
}
}
window.addEventListener('lv-pick', onPick)
return () => window.removeEventListener('lv-pick', onPick)
}, [])
Livello di prova: Prova esistente
function Pills<T extends string>({
options,
selected,
onSelect,
accent,
}: {
options: Option<T>[]
selected: T | null
onSelect: (v: T) => void
accent: 'ember' | 'neon'
}) {
const { lang } = useLang()
return (
<div className="flex flex-wrap gap-2.5">
{options.map((opt) => {
const on = selected === opt.id
const ring =
accent === 'neon'
? 'border-neon/70 bg-neon/10 text-cream glow-neon'
: 'border-ember/70 bg-ember/10 text-cream glow-ember'
return (
<motion.button
key={opt.id}
type="button"
whileTap={{ scale: 0.94 }}
onClick={() => onSelect(opt.id)}
className={`glass flex items-center gap-2 rounded-full px-4 py-2.5 text-sm font-medium transition-all ${
on ? ring : 'text-cream-dim hover:text-cream'
}`}
>
{on && <Check className="h-3.5 w-3.5" />}
{opt[lang]}
</motion.button>
)
})}
</div>
)
}
Livello di prova: Prova esistente