Proyecto 05 / 06 · sitio web
LocalVision Studio
Un prototipo de web que ofrece webs y vídeos con IA a negocios locales, construido en torno a un “simulador de mejora de negocios” interactivo. Un prototipo, no un trabajo para un cliente.
Resumen
Capturas de pantalla
Nivel de prueba: Prueba existente
Ver la prueba
Afirmación
LocalVision Studio: un prototipo de web que ofrece webs y vídeos con IA a negocios locales, construido en torno a un “simulador de mejora de negocios” interactivo. Un prototipo, no un trabajo para un cliente.
Declarado por Danilo
Pruebas
- Capturas del prototipo LocalVision Studio (escritorio y móvil) · manual · comprobado el 29 de septiembre de 2026Tomadas el 29/09/2026 del proyecto ejecutándose en local, porque no está en línea.
- Grabación de pantalla del simulador de mejora de negocios de LocalVision (13 s, sin sonido) · manual · comprobado el 29 de septiembre de 2026Grabada el 29/09/2026 con Playwright desde el proyecto ejecutándose en local: la elección de un negocio, un problema, un objetivo y una transformación en el simulador.
- Código fuente de LocalVision: el estado del simulador (src/components/Simulator.tsx, líneas 36–58) · manual · comprobado el 29 de septiembre de 2026Copiado literalmente del archivo fuente real el 29/09/2026 (finales de línea normalizados).
- Código fuente de LocalVision: los botones de elección (src/components/Simulator.tsx, líneas 226–264) · manual · comprobado el 29 de septiembre de 2026Copiado literalmente del archivo fuente real el 29/09/2026 (finales de línea normalizados).
Resultado
Capturas reales de la página, tomadas del proyecto en funcionamiento el 29/09/2026. Que lo construyera Danilo es una declaración suya.
En esta página
- 02 Simulador: una grabación de pantalla del simulador de mejora de negocios
- 03 Código: extractos del código fuente del simulador
No está en esta página
- Medido: este prototipo solo funciona en un servidor de desarrollo local, y las puntuaciones tomadas allí no serían representativas.
Simulador
Cuatro elecciones (negocio, problema, objetivo, transformación); la vista previa de la derecha sigue cada una.
Grabación de pantalla
Nivel de prueba: Prueba existente
Código
Un único objeto de estado guarda las cuatro elecciones; los botones de elección son un pequeño componente reutilizable.
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)
}, [])
Nivel de prueba: Prueba existente
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>
)
}
Nivel de prueba: Prueba existente