VISUALIZE YOUR VISUALIZE YOUR

DREAM EXTERIOR

Upload a photo, choose your palette, generate a preview.

{/* Upload */}

01 — UPLOAD HOUSE PHOTO

{e.preventDefault();setIsDragging(true)}} onDragLeave={()=>setIsDragging(false)} onClick={()=>document.getElementById('fileInput').click()} className={`border-[3px] border-dashed ${isDragging ? 'border-[#c0392b] bg-[#fff0ee]' : c.border+' bg-[#f5f2eb]'} ${c.radius} p-6 text-center cursor-pointer transition-colors duration-150 min-h-[140px] flex flex-col items-center justify-center gap-2`}> {photoPreview ? ( House preview

) : ( <>

DROP PHOTO HERE

or click to browse

)}

handleFileChange(e.target.files[0])} /> {photoPreview && ( )}

{/* Color + Style Pickers */}

02 — CHOOSE YOUR PALETTE

{colorFields.map(({key, label}) => (

{label}

merge({[key]:e.target.value})} className="w-full h-7 border-0 bg-transparent cursor-pointer" />

{form[key]}

))}

RENDER STYLE

{styles.map(s => ( ))}

{/* Name */}

03 — NAME THIS SCHEME

merge({name:e.target.value})} placeholder="e.g. COASTAL BLUE SUMMER" className={`w-full border-[3px] ${c.border} ${c.radius} px-3 py-2 text-sm font-bold uppercase tracking-wide ${c.ink} bg-[#f5f2eb] focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[4px_4px_0px_#0f172a] transition-all duration-150`} />

{/* Actions */}

{form.prompt && ( )}

{/* Preview */} {form.prompt && photo && (

AI PREVIEW

{colorFields.map(({key,label})=>(

{label}

))}

)}

)} {view === "history" && (

SAVED SCHEMES

COLOR HISTORY

{schemes.length === 0 && (

NO SCHEMES YET

Generate and save your first color scheme

)}

{schemes.map(s => (

setActiveScheme(activeScheme?._id===s._id ? null : s)} className={`${c.card} border-[3px] ${c.border} ${c.radius} overflow-hidden cursor-pointer card-hover transition-all duration-150 ${activeScheme?._id===s._id ? 'shadow-[6px_6px_0px_#0f172a]' : c.shadowSm}`}>

{s.name || "UNTITLED SCHEME"}

{s.style} • {new Date(s.createdAt).toLocaleDateString()}

{[s.wallColor, s.trimColor, s.accentColor].map((col,i)=>(

))}

{activeScheme?._id===s._id && s.prompt && (

)}

))}

)}

VISUALIZE YOURVISUALIZE YOUR

DREAM EXTERIOR

VISUALIZE YOUR