Add captura de urgencia, target, estructural y gustos en el form de fotos

This commit is contained in:
Carlos Narro
2026-05-31 16:18:39 +02:00
parent 6e61cbe8e2
commit 11d78e4f69
2 changed files with 70 additions and 0 deletions

View File

@@ -10,6 +10,11 @@ const CALIDADES = [
{ value: 'media', label: 'Media' },
{ value: 'premium', label: 'Premium' },
] as const;
const URGENCIAS = [
{ value: 'alta', label: 'Cuanto antes' },
{ value: 'media', label: 'En unos meses' },
{ value: 'baja', label: 'Sin prisa' },
] as const;
const MAX_FOTOS = 4;
@@ -144,6 +149,57 @@ export default function FotosUploader({
/>
</div>
{/* Urgencia + presupuesto objetivo */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="flex flex-col gap-2">
<label htmlFor="urgencia" className="text-sm font-semibold text-dark">
¿Para cuándo?
</label>
<select id="urgencia" name="urgencia" defaultValue="media" className={inputClass}>
{URGENCIAS.map((u) => (
<option key={u.value} value={u.value}>
{u.label}
</option>
))}
</select>
</div>
<div className="flex flex-col gap-2">
<label htmlFor="presupuestoTarget" className="text-sm font-semibold text-dark">
Presupuesto objetivo <span className="text-gray-400 font-normal">(opcional, )</span>
</label>
<input
id="presupuestoTarget"
name="presupuestoTarget"
type="number"
min="0"
step="100"
inputMode="numeric"
placeholder="8000"
className={inputClass}
/>
</div>
</div>
{/* Cambios estructurales */}
<label className="flex items-center gap-3 text-sm font-medium text-dark cursor-pointer">
<input type="checkbox" name="estructural" className="w-4 h-4 accent-black" />
Hay que mover sanitarios, tirar algún muro o cambiar la distribución
</label>
{/* Bloque abierto de gustos */}
<div className="flex flex-col gap-2">
<label htmlFor="tasteText" className="text-sm font-semibold text-dark">
Cuéntanos cómo lo imaginas
</label>
<textarea
id="tasteText"
name="tasteText"
rows={4}
placeholder="Estilo, colores, materiales que te gusten… y cualquier capricho que no quieras que falte (una isla, ducha de obra, encimera de cuarzo…)."
className={inputClass}
/>
</div>
<SubmitButton disabled={false} />
<p className="text-xs text-gray-400 text-center">
Calculamos un presupuesto orientativo con tus datos. Sin compromiso.