[V0_FILE]typescriptreact:file="components/address-search-step.tsx" isMerged="true" "use client" import { useState } from "react" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { MapPin } from "lucide-react" import type { FormData } from "../app/page" interface AddressSearchStepProps { formData: FormData updateFormData: (data: Partial) => void onNext: () => void } // Mock address suggestions (in real app, this would come from Google Places API) const mockAddresses = [ "123 Main Street, New York, NY 10001", "456 Oak Avenue, Los Angeles, CA 90210", "789 Pine Road, Chicago, IL 60601", "321 Elm Street, Houston, TX 77001", "654 Maple Drive, Phoenix, AZ 85001", ] export default function AddressSearchStep({ formData, updateFormData, onNext }: AddressSearchStepProps) { const [searchTerm, setSearchTerm] = useState(formData.address) const [suggestions, setSuggestions] = useState([]) const [showSuggestions, setShowSuggestions] = useState(false) const handleInputChange = (value: string) => { setSearchTerm(value) if (value.length > 2) { const filtered = mockAddresses.filter((address) => address.toLowerCase().includes(value.toLowerCase())) setSuggestions(filtered) setShowSuggestions(true) } else { setSuggestions([]) setShowSuggestions(false) } } const handleAddressSelect = (address: string) => { setSearchTerm(address) updateFormData({ address }) setShowSuggestions(false) // Parse address and populate address details const parts = address.split(", ") if (parts.length >= 3) { const street = parts[0] const city = parts[1] const stateZip = parts[2].split(" ") const state = stateZip[0] const zipCode = stateZip[1] || "" updateFormData({ address, addressDetails: { street, city, state, zipCode, }, }) } // Auto-advance to next step after selection setTimeout(() => { onNext() }, 500) } return (

Search for Property Address

Start typing to search for your property address

Property Address

handleInputChange(e.target.value)} className="pl-10" />

{/* Address Suggestions */} {showSuggestions && suggestions.length > 0 && (

{suggestions.map((address, index) => ( ))}

)}

{formData.address && (

Selected Address:

{formData.address}

)}

) } [V0_FILE]typescriptreact:file="components/property-type-step.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Home, Building, Building2, Users } from "lucide-react" import type { FormData } from "../app/page" interface PropertyTypeStepProps { formData: FormData updateFormData: (data: Partial) => void } const propertyTypes = [ { id: "single-family", label: "Single Family", description: "Detached single-family home", icon: Home, }, { id: "condo", label: "Condo", description: "Condominium unit", icon: Building, }, { id: "townhouse", label: "Townhouse", description: "Multi-level attached home", icon: Building2, }, { id: "multi-family", label: "Multi-Family", description: "Duplex, triplex, or apartment building", icon: Users, }, ] export default function PropertyTypeStep({ formData, updateFormData }: PropertyTypeStepProps) { const handlePropertyTypeSelect = (propertyType: string) => { updateFormData({ propertyType }) } return (

Select Property Type

Choose the type of property you're interested in

{propertyTypes.map((type) => { const Icon = type.icon const isSelected = formData.propertyType === type.id return ( handlePropertyTypeSelect(type.id)} >

{type.label}

{type.description}

{isSelected && (

)}

) })}

) } [V0_FILE]typescriptreact:file="components/budget-step.tsx" isMerged="true" "use client" import { useState } from "react" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { DollarSign } from "lucide-react" import type { FormData } from "../app/page" interface BudgetStepProps { formData: FormData updateFormData: (data: Partial) => void } const predefinedBudgets = [ { value: "0-100000", label: "$0 - $100,000" }, { value: "100000-250000", label: "$100,000 - $250,000" }, { value: "250000-500000", label: "$250,000 - $500,000" }, { value: "500000-750000", label: "$500,000 - $750,000" }, { value: "750000-1000000", label: "$750,000 - $1,000,000" }, { value: "1000000-plus", label: "$1,000,000+" }, { value: "custom", label: "Custom Range" }, ] export default function BudgetStep({ formData, updateFormData }: BudgetStepProps) { const [selectedBudget, setSelectedBudget] = useState(formData.budget || "") const [customMin, setCustomMin] = useState("") const [customMax, setCustomMax] = useState("") const [showCustom, setShowCustom] = useState( formData.budget === "custom" || (formData.budget && !predefinedBudgets.some((b) => b.value === formData.budget)), ) const handleBudgetSelect = (value: string) => { setSelectedBudget(value) if (value === "custom") { setShowCustom(true) // Don't update form data yet, wait for custom input } else { setShowCustom(false) updateFormData({ budget: value }) } } const handleCustomBudget = () => { if (customMin && customMax) { const customBudget = `${customMin}-${customMax}` updateFormData({ budget: customBudget }) } } return (

Select Your Budget

Choose your budget range for the property

Budget Range

{showCustom && (

Custom Budget Range

Minimum { setCustomMin(e.target.value) if (e.target.value && customMax) { handleCustomBudget() } }} />

Maximum { setCustomMax(e.target.value) if (customMin && e.target.value) { handleCustomBudget() } }} />

)} {formData.budget && (

Selected Budget:

{showCustom ? `$${customMin} - $${customMax}` : predefinedBudgets.find((b) => b.value === formData.budget)?.label || formData.budget}

)}

) } [V0_FILE]typescriptreact:file="components/timeline-step.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Clock, Zap, Calendar, CalendarDays } from "lucide-react" import type { FormData } from "../app/page" interface TimelineStepProps { formData: FormData updateFormData: (data: Partial) => void } const timelines = [ { id: "immediately", label: "Immediately", description: "Ready to move forward right now", icon: Zap, color: "text-red-600", }, { id: "1-3-months", label: "1-3 months", description: "Planning to buy/sell within 1-3 months", icon: Calendar, color: "text-orange-600", }, { id: "3-6-months", label: "3-6 months", description: "Looking at 3-6 months timeframe", icon: CalendarDays, color: "text-blue-600", }, { id: "6-months-plus", label: "6+ months", description: "More than 6 months from now", icon: Clock, color: "text-green-600", }, ] export default function TimelineStep({ formData, updateFormData }: TimelineStepProps) { const handleTimelineSelect = (timeline: string) => { updateFormData({ timeline }) } return (

When are you planning to buy/sell?

Select your preferred timeline for this transaction

{timelines.map((timeline) => { const Icon = timeline.icon const isSelected = formData.timeline === timeline.id return ( handleTimelineSelect(timeline.id)} >

{timeline.label}

{timeline.description}

{isSelected && (

)}

) })}

) } [V0_FILE]typescriptreact:file="components/address-details-step.tsx" isMerged="true" "use client" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { MapPin } from "lucide-react" import type { FormData } from "../app/page" interface AddressDetailsStepProps { formData: FormData updateFormData: (data: Partial) => void } export default function AddressDetailsStep({ formData, updateFormData }: AddressDetailsStepProps) { const handleAddressChange = (field: keyof FormData["addressDetails"], value: string) => { updateFormData({ addressDetails: { ...formData.addressDetails, [field]: value, }, }) } return (

Confirm Address Details

Please confirm and complete the address information

{formData.address && ( Selected Address

{formData.address}

)}

Street Address * handleAddressChange("street", e.target.value)} required />

City * handleAddressChange("city", e.target.value)} required />

State * handleAddressChange("state", e.target.value)} required />

Zip Code * handleAddressChange("zipCode", e.target.value)} required className="max-w-xs" />

* Required fields

) } [V0_FILE]typescriptreact:file="components/contact-info-step.tsx" isMerged="true" "use client" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent } from "@/components/ui/card" import { User, Mail, Phone, AlertCircle } from "lucide-react" import type { FormData } from "../app/page" interface ContactInfoStepProps { formData: FormData updateFormData: (data: Partial) => void } export default function ContactInfoStep({ formData, updateFormData }: ContactInfoStepProps) { const handleContactChange = (field: keyof FormData["contactInfo"], value: string) => { updateFormData({ contactInfo: { ...formData.contactInfo, [field]: value, }, }) } const isValidEmail = (email: string) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } const isValidPhone = (phone: string) => { const phoneRegex = /^\+?[\d\s\-$$$$]{10,}$/ return phoneRegex.test(phone) } const emailError = formData.contactInfo.email && !isValidEmail(formData.contactInfo.email) const phoneError = formData.contactInfo.mobile && !isValidPhone(formData.contactInfo.mobile) return (

Contact Information

Please provide your contact details so we can reach you

Full Name *

handleContactChange("fullName", e.target.value)} className="pl-10" required />

Email Address *

handleContactChange("email", e.target.value)} className={`pl-10 ${emailError ? "border-red-500" : ""}`} required />

{emailError && (

Please enter a valid email address

)}

Mobile Number *

handleContactChange("mobile", e.target.value)} className={`pl-10 ${phoneError ? "border-red-500" : ""}`} required />

{phoneError && (

Please enter a valid phone number

)}

Almost done!

Once you submit this form, our team will review your information and contact you within 24 hours.

* Required fields

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { ChevronLeft, ChevronRight } from "lucide-react" import AddressSearchStep from "@/components/address-search-step" import PropertyTypeStep from "@/components/property-type-step" import BudgetStep from "@/components/budget-step" import TimelineStep from "@/components/timeline-step" import AddressDetailsStep from "@/components/address-details-step" import ContactInfoStep from "@/components/contact-info-step" export interface FormData { address: string propertyType: string budget: string timeline: string addressDetails: { street: string city: string state: string zipCode: string } contactInfo: { fullName: string email: string mobile: string } } const initialFormData: FormData = { address: "", propertyType: "", budget: "", timeline: "", addressDetails: { street: "", city: "", state: "", zipCode: "", }, contactInfo: { fullName: "", email: "", mobile: "", }, } const steps = [ { title: "Search Address", description: "Find your property location" }, { title: "Property Type", description: "Select property type" }, { title: "Budget", description: "Set your budget range" }, { title: "Timeline", description: "When are you planning?" }, { title: "Address Details", description: "Confirm address information" }, { title: "Contact Info", description: "Your contact details" }, ] export default function MultiStepForm() { const [currentStep, setCurrentStep] = useState(0) const [formData, setFormData] = useState(initialFormData) const [isSubmitting, setIsSubmitting] = useState(false) const updateFormData = (stepData: Partial) => { setFormData((prev) => ({ ...prev, ...stepData })) } const nextStep = () => { if (currentStep < steps.length - 1) { setCurrentStep((prev) => prev + 1) } } const prevStep = () => { if (currentStep > 0) { setCurrentStep((prev) => prev - 1) } } const isStepValid = (step: number): boolean => { switch (step) { case 0: return formData.address.length > 0 case 1: return formData.propertyType.length > 0 case 2: return formData.budget.length > 0 case 3: return formData.timeline.length > 0 case 4: return ( formData.addressDetails.street.length > 0 && formData.addressDetails.city.length > 0 && formData.addressDetails.state.length > 0 && formData.addressDetails.zipCode.length > 0 ) case 5: const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ const phoneRegex = /^\+?[\d\s\-$$$$]{10,}$/ return ( formData.contactInfo.fullName.length > 0 && emailRegex.test(formData.contactInfo.email) && phoneRegex.test(formData.contactInfo.mobile) ) default: return false } } const handleSubmit = async () => { if (!isStepValid(currentStep)) return setIsSubmitting(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 2000)) alert("Form submitted successfully!") console.log("Form Data:", formData) setIsSubmitting(false) } const renderStep = () => { switch (currentStep) { case 0: return case 1: return case 2: return case 3: return case 4: return case 5: return default: return null } } const progressPercentage = ((currentStep + 1) / steps.length) * 100 return (

Property Information Form Step {currentStep + 1} of {steps.length}: {steps[currentStep].title}

{/* Progress Bar */}

{steps.map((step, index) => (

{step.title}

{index + 1}

))}

{/* Current Step Content */}

{renderStep()}

{/* Navigation Buttons */}

{currentStep === steps.length - 1 ? ( ) : ( )}

) } [V0_FILE]javascriptreact:file="components/ui/button.js" isEdit="true" isMerged="true" "use client" export function Button({ children, variant = "primary", size = "default", disabled = false, onClick, className = "", ...props }) { const baseClasses = "btn transition-all" const variantClasses = { primary: "btn-primary", outline: "btn-outline", } const sizeClasses = { default: "", large: "btn-large", xl: "btn-xl", } const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}` return ( ) } [V0_FILE]javascriptreact:file="components/ui/input.js" isEdit="true" isMerged="true" "use client" export function Input({ type = "text", placeholder, value, onChange, className = "", size = "default", ...props }) { const baseClasses = "input" const sizeClasses = { default: "", large: "input-large", xl: "input-xl", } const classes = `${baseClasses} ${sizeClasses[size]} ${className}` return ( ) } [V0_FILE]javascriptreact:file="components/ui/label.js" isEdit="true" isMerged="true" export function Label({ children, htmlFor, className = "", size = "default", ...props }) { const baseClasses = "label" const sizeClasses = { default: "", large: "label-large", } const classes = `${baseClasses} ${sizeClasses[size]} ${className}` return ( {children} ) } [V0_FILE]javascriptreact:file="components/ui/card.js" isEdit="true" isMerged="true" "use client" export function Card({ children, className = "", onClick, hover = false, selected = false, ...props }) { const baseClasses = "card" const hoverClasses = hover ? "card-hover" : "" const selectedClasses = selected ? "card-selected" : "" const classes = `${baseClasses} ${hoverClasses} ${selectedClasses} ${className}` return (

{children}

) } export function CardContent({ children, className = "", ...props }) { return (

{children}

) } export function CardHeader({ children, className = "", ...props }) { return (

{children}

) } export function CardTitle({ children, className = "", ...props }) { return (

{children}

) } [V0_FILE]javascriptreact:file="components/ui/select.js" isEdit="true" isMerged="true" "use client" import React, { useState } from "react" export function Select({ value, onValueChange, children, ...props }) { const [isOpen, setIsOpen] = useState(false) return (

{React.Children.map(children, (child) => { if (child.type === SelectTrigger) { return React.cloneElement(child, { onClick: () => setIsOpen(!isOpen), isOpen, }) } if (child.type === SelectContent) { return React.cloneElement(child, { isOpen, onSelect: (selectedValue) => { onValueChange(selectedValue) setIsOpen(false) }, }) } return child })}

) } export function SelectTrigger({ children, onClick, isOpen, className = "", ...props }) { return (

{children} ▼

) } export function SelectValue({ placeholder, children }) { return {children || placeholder} } export function SelectContent({ children, isOpen, onSelect, className = "", ...props }) { if (!isOpen) return null return (

{React.Children.map(children, (child) => { if (child.type === SelectItem) { return React.cloneElement(child, { onSelect }) } return child })}

) } export function SelectItem({ children, value, onSelect, className = "", ...props }) { return (

onSelect(value)} {...props}> {children}

) } [V0_FILE]javascriptreact:file="app/layout.js" isEdit="true" isMerged="true" import "./globals.css" export const metadata = { title: "Property Information Form - Multi-Step Wizard", description: "Complete your property information in easy steps with our interactive form wizard", } export default function RootLayout({ children }) { return (

{children}

) } [V0_FILE]javascriptreact:file="app/step/layout.js" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { usePathname } from "next/navigation" const steps = [ { number: 1, title: "Search Address", description: "Find your property location", icon: "🏠" }, { number: 2, title: "Property Type", description: "Select property type", icon: "🏢" }, { number: 3, title: "Budget", description: "Set your budget range", icon: "💰" }, { number: 4, title: "Timeline", description: "When are you planning?", icon: "📅" }, { number: 5, title: "Address Details", description: "Confirm address information", icon: "📍" }, { number: 6, title: "Contact Info", description: "Your contact details", icon: "👤" }, ] export default function StepLayout({ children }) { const pathname = usePathname() const [currentStep, setCurrentStep] = useState(1) const [isAnimating, setIsAnimating] = useState(false) const [direction, setDirection] = useState("forward") useEffect(() => { const stepNumber = Number.parseInt(pathname.split("/").pop()) if (stepNumber && stepNumber !== currentStep) { setDirection(stepNumber > currentStep ? "forward" : "backward") setIsAnimating(true) setTimeout(() => { setCurrentStep(stepNumber) }, 200) setTimeout(() => { setIsAnimating(false) }, 400) } }, [pathname, currentStep]) const progressPercentage = (currentStep / steps.length) * 100 const currentStepInfo = steps.find((step) => step.number === currentStep) return (

Property Information Form

Step {currentStep} of {steps.length}: {currentStepInfo?.title}

{currentStepInfo?.icon}

{steps.map((step) => (

{step.number < currentStep ? "✓" : step.number}

{step.title}

))}

{children}

Secure • Private • Professional

) } [V0_FILE]javascriptreact:file="app/step/1/page.js" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { MapPin, ChevronRight, Search } from "lucide-react" const mockAddresses = [ "123 Main Street, New York, NY 10001", "456 Oak Avenue, Los Angeles, CA 90210", "789 Pine Road, Chicago, IL 60601", "321 Elm Street, Houston, TX 77001", "654 Maple Drive, Phoenix, AZ 85001", "987 Cedar Lane, Miami, FL 33101", "246 Birch Boulevard, Seattle, WA 98101", "135 Willow Way, Denver, CO 80201", ] export default function AddressSearchStep() { const router = useRouter() const searchParams = useSearchParams() const [searchTerm, setSearchTerm] = useState("") const [suggestions, setSuggestions] = useState([]) const [showSuggestions, setShowSuggestions] = useState(false) const [selectedAddress, setSelectedAddress] = useState("") const [isSearching, setIsSearching] = useState(false) useEffect(() => { const address = searchParams.get("address") if (address) { setSelectedAddress(address) setSearchTerm(address) } }, [searchParams]) const handleInputChange = (value) => { setSearchTerm(value) setIsSearching(true) if (value.length > 2) { setTimeout(() => { const filtered = mockAddresses.filter((address) => address.toLowerCase().includes(value.toLowerCase())) setSuggestions(filtered) setShowSuggestions(true) setIsSearching(false) }, 300) } else { setSuggestions([]) setShowSuggestions(false) setIsSearching(false) } } const handleAddressSelect = (address) => { setSearchTerm(address) setSelectedAddress(address) setShowSuggestions(false) const parts = address.split(", ") const params = new URLSearchParams(searchParams) params.set("address", address) if (parts.length >= 3) { params.set("street", parts[0]) params.set("city", parts[1]) const stateZip = parts[2].split(" ") params.set("state", stateZip[0]) params.set("zipCode", stateZip[1] || "") } setTimeout(() => { router.push(`/step/2?${params.toString()}`) }, 800) } const handleNext = () => { const params = new URLSearchParams(searchParams) params.set("address", selectedAddress || searchTerm) router.push(`/step/2?${params.toString()}`) } return (

Find Your Property

Start by searching for your property address

Property Address

handleInputChange(e.target.value)} className="input input-xl input-with-icon" /> {isSearching &&

}

{showSuggestions && suggestions.length > 0 && (

{suggestions.length} address{suggestions.length !== 1 ? "es" : ""} found

{suggestions.map((address, index) => ( ))}

)}

{selectedAddress && (

Selected Address:

{selectedAddress}

)}

Search Tips

• Type at least 3 characters to see suggestions
• Include street number, street name, and city for best results
• Select from the dropdown or continue with your typed address

) } [V0_FILE]javascriptreact:file="app/step/2/page.js" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { ChevronLeft, ChevronRight, Home, Building, Building2, Users } from "lucide-react" const propertyTypes = [ { id: "single-family", label: "Single Family", description: "Detached single-family home with private yard", icon: Home, features: ["Private yard", "Garage", "Multiple bedrooms"], }, { id: "condo", label: "Condo", description: "Condominium unit with shared amenities", icon: Building, features: ["Shared amenities", "Low maintenance", "Security"], }, { id: "townhouse", label: "Townhouse", description: "Multi-level attached home with modern design", icon: Building2, features: ["Multiple levels", "Attached garage", "Small yard"], }, { id: "multi-family", label: "Multi-Family", description: "Investment property with multiple units", icon: Users, features: ["Rental income", "Multiple units", "Investment potential"], }, ] export default function PropertyTypeStep() { const router = useRouter() const searchParams = useSearchParams() const [selectedType, setSelectedType] = useState("") useEffect(() => { const propertyType = searchParams.get("propertyType") if (propertyType) { setSelectedType(propertyType) } }, [searchParams]) const handlePropertyTypeSelect = (propertyType) => { setSelectedType(propertyType) } const handleNext = () => { const params = new URLSearchParams(searchParams) params.set("propertyType", selectedType) router.push(`/step/3?${params.toString()}`) } const handlePrevious = () => { router.push(`/step/1?${searchParams.toString()}`) } return (

Choose Property Type

Select the type of property you're interested in

{propertyTypes.map((type, index) => { const Icon = type.icon const isSelected = selectedType === type.id return (

handlePropertyTypeSelect(type.id)} >

{type.label}

{type.description}

{isSelected && (

)}

Key Features:

{type.features.map((feature, idx) => ( {feature} ))}

) })}

{selectedType && (

Selected: {propertyTypes.find((t) => t.id === selectedType)?.label}

)}

) } [V0_FILE]javascriptreact:file="app/step/3/page.js" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { ChevronLeft, ChevronRight, DollarSign } from "lucide-react" const predefinedBudgets = [ { value: "0-100000", label: "$0 - $100,000", category: "starter" }, { value: "100000-250000", label: "$100,000 - $250,000", category: "mid-range" }, { value: "250000-500000", label: "$250,000 - $500,000", category: "premium" }, { value: "500000-750000", label: "$500,000 - $750,000", category: "luxury" }, { value: "750000-1000000", label: "$750,000 - $1,000,000", category: "high-end" }, { value: "1000000-plus", label: "$1,000,000+", category: "ultra-luxury" }, { value: "custom", label: "Custom Range", category: "custom" }, ] export default function BudgetStep() { const router = useRouter() const searchParams = useSearchParams() const [selectedBudget, setSelectedBudget] = useState("") const [customMin, setCustomMin] = useState("") const [customMax, setCustomMax] = useState("") const [showCustom, setShowCustom] = useState(false) useEffect(() => { const budget = searchParams.get("budget") if (budget) { setSelectedBudget(budget) if (budget === "custom" || !predefinedBudgets.some((b) => b.value === budget)) { setShowCustom(true) if (budget.includes("-") && budget !== "custom") { const [min, max] = budget.split("-") setCustomMin(min) setCustomMax(max) } } } }, [searchParams]) const handleBudgetSelect = (value) => { setSelectedBudget(value) if (value === "custom") { setShowCustom(true) } else { setShowCustom(false) const params = new URLSearchParams(searchParams) params.set("budget", value) // Don't navigate immediately, let user confirm } } const handleCustomBudget = () => { if (customMin && customMax) { const customBudget = `${customMin}-${customMax}` setSelectedBudget(customBudget) const params = new URLSearchParams(searchParams) params.set("budget", customBudget) } } const handleNext = () => { const params = new URLSearchParams(searchParams) if (showCustom && customMin && customMax) { params.set("budget", `${customMin}-${customMax}`) } else { params.set("budget", selectedBudget) } router.push(`/step/4?${params.toString()}`) } const handlePrevious = () => { router.push(`/step/2?${searchParams.toString()}`) } return (

Set Your Budget

Choose your budget range for the property

Budget Range

{predefinedBudgets.map((budget) => (

handleBudgetSelect(budget.value)} >

{budget.label}

{selectedBudget === budget.value && (

)}

))}

{showCustom && (

Custom Budget Range

Enter your specific budget range

Minimum { setCustomMin(e.target.value) if (e.target.value && customMax) { handleCustomBudget() } }} className="input input-large" />

Maximum { setCustomMax(e.target.value) if (customMin && e.target.value) { handleCustomBudget() } }} className="input input-large" />

{customMin && customMax && (

Custom Range:

${customMin} - ${customMax}

)}

)} {selectedBudget && !showCustom && (

Selected Budget: {predefinedBudgets.find((b) => b.value === selectedBudget)?.label || selectedBudget}

)}

) } [V0_FILE]javascriptreact:file="app/step/4/page.js" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { ChevronLeft, ChevronRight, Clock, Zap, Calendar, CalendarDays } from "lucide-react" const timelines = [ { id: "immediately", label: "Immediately", description: "Ready to move forward right now", detail: "Perfect for urgent relocations or immediate opportunities", icon: Zap, color: "linear-gradient(135deg, #ef4444 0%, #ec4899 100%)", bgColor: "linear-gradient(135deg, #fef2f2 0%, #fdf2f8 100%)", urgency: "High", }, { id: "1-3-months", label: "1-3 months", description: "Planning to buy/sell within 1-3 months", detail: "Ideal for planned moves with some flexibility", icon: Calendar, color: "linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)", bgColor: "linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)", urgency: "Medium-High", }, { id: "3-6-months", label: "3-6 months", description: "Looking at 3-6 months timeframe", detail: "Good balance of planning time and market opportunities", icon: CalendarDays, color: "linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%)", bgColor: "linear-gradient(135deg, #eff6ff 0%, #cffafe 100%)", urgency: "Medium", }, { id: "6-months-plus", label: "6+ months", description: "More than 6 months from now", detail: "Plenty of time for research and finding the perfect property", icon: Clock, color: "linear-gradient(135deg, #10b981 0%, #059669 100%)", bgColor: "linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%)", urgency: "Low", }, ] export default function TimelineStep() { const router = useRouter() const searchParams = useSearchParams() const [selectedTimeline, setSelectedTimeline] = useState("") useEffect(() => { const timeline = searchParams.get("timeline") if (timeline) { setSelectedTimeline(timeline) } }, [searchParams]) const handleTimelineSelect = (timeline) => { setSelectedTimeline(timeline) } const handleNext = () => { const params = new URLSearchParams(searchParams) params.set("timeline", selectedTimeline) router.push(`/step/5?${params.toString()}`) } const handlePrevious = () => { router.push(`/step/3?${searchParams.toString()}`) } return (

Choose Your Timeline

When are you planning to buy or sell?

{timelines.map((timeline, index) => { const Icon = timeline.icon const isSelected = selectedTimeline === timeline.id return (

handleTimelineSelect(timeline.id)} style={{ animationDelay: `${index * 100}ms`, background: isSelected ? timeline.bgColor : "white", }} >

{timeline.label}

{timeline.description}

{isSelected && (

)}

{timeline.detail}

Urgency: {timeline.urgency}

) })}

{selectedTimeline && (

Selected Timeline: {timelines.find((t) => t.id === selectedTimeline)?.label}

)}

Timeline Considerations

• Market conditions can affect optimal timing
• Longer timelines allow for better negotiation opportunities
• Consider seasonal trends in your local market

) } [V0_FILE]javascriptreact:file="app/step/5/page.js" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter, useSearchParams } from "next/navigation" import { ChevronLeft, ChevronRight, MapPin, Home } from "lucide-react" export default function AddressDetailsStep() { const router = useRouter() const searchParams = useSearchParams() const [addressDetails, setAddressDetails] = useState(() => ({ street: searchParams.get("street") || "", city: searchParams.get("city") || "", state: searchParams.get("state") || "", zipCode: searchParams.get("zipCode") || "", })) const handleAddressChange = (field, value) => { setAddressDetails((prev) => ({ ...prev, [field]: value, })) } const handleNext = () => { const params = new URLSearchParams(searchParams) params.set("street", addressDetails.street) params.set("city", addressDetails.city) params.set("state", addressDetails.state) params.set("zipCode", addressDetails.zipCode) router.push(`/step/6?${params.toString()}`) } const handlePrevious = () => { router.push(`/step/4?${searchParams.toString()}`) } const selectedAddress = searchParams.get("address") const isFormValid = addressDetails.street && addressDetails.city && addressDetails.state && addressDetails.zipCode return (

Confirm Address Details

Please verify and complete the address information

{selectedAddress && (

Selected Address

{selectedAddress}

)}

Street Address handleAddressChange("street", e.target.value)} required className="input input-large" style={{ boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)", borderRadius: "12px", }} />

City handleAddressChange("city", e.target.value)} required className="input input-large" style={{ boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)", borderRadius: "12px", }} />

State handleAddressChange("state", e.target.value)} required className="input input-large" style={{ boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)", borderRadius: "12px", }} />

Zip Code handleAddressChange("zipCode", e.target.value)} required className="input input-large max-w-xs" style={{ boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)", borderRadius: "12px", }} />

{(addressDetails.street || addressDetails.city || addressDetails.state || addressDetails.zipCode) && (

Address Preview

{[addressDetails.street, addressDetails.city, addressDetails.state, addressDetails.zipCode] .filter(Boolean) .join(", ") || "Enter address details above"}

)}

Address Tips

• Double-check spelling for accurate property records
• Include apartment or unit numbers if applicable
• Verify zip code matches the city and state

) } [V0_FILE]javascriptreact:file="app/step/6/page.js" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter, useSearchParams } from "next/navigation" import { ChevronLeft, User, Mail, Phone, CheckCircle, Sparkles, AlertCircle } from "lucide-react" export default function ContactInfoStep() { const router = useRouter() const searchParams = useSearchParams() const [contactInfo, setContactInfo] = useState(() => ({ fullName: searchParams.get("fullName") || "", email: searchParams.get("email") || "", mobile: searchParams.get("mobile") || "", })) const [isSubmitting, setIsSubmitting] = useState(false) const [isSuccess, setIsSuccess] = useState(false) const handleContactChange = (field, value) => { setContactInfo((prev) => ({ ...prev, [field]: value, })) } const isValidEmail = (email) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } const isValidPhone = (phone) => { const phoneRegex = /^\+?[\d\s\-()]{10,}$/ return phoneRegex.test(phone) } const emailError = contactInfo.email && !isValidEmail(contactInfo.email) const phoneError = contactInfo.mobile && !isValidPhone(contactInfo.mobile) const isFormValid = contactInfo.fullName.length > 0 && isValidEmail(contactInfo.email) && isValidPhone(contactInfo.mobile) const handleSubmit = async () => { if (!isFormValid) return setIsSubmitting(true) const formData = { address: searchParams.get("address"), propertyType: searchParams.get("propertyType"), budget: searchParams.get("budget"), timeline: searchParams.get("timeline"), addressDetails: { street: searchParams.get("street"), city: searchParams.get("city"), state: searchParams.get("state"), zipCode: searchParams.get("zipCode"), }, contactInfo: contactInfo, } await new Promise((resolve) => setTimeout(resolve, 2000)) setIsSubmitting(false) setIsSuccess(true) console.log("Form Data:", formData) setTimeout(() => { router.push("/") }, 4000) } const handlePrevious = () => { const params = new URLSearchParams(searchParams) params.set("fullName", contactInfo.fullName) params.set("email", contactInfo.email) params.set("mobile", contactInfo.mobile) router.push(`/step/5?${params.toString()}`) } if (isSuccess) { return (

🎉 Success!

Form submitted successfully!

Thank you for your submission. We'll contact you within 24 hours.

Redirecting to home...

) } return (

Contact Information

Almost done! Please provide your contact details

Full Name

handleContactChange("fullName", e.target.value)} className="input input-large input-with-icon" style={{ boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)", borderRadius: "12px", }} />

Email Address

handleContactChange("email", e.target.value)} className={`input input-large input-with-icon ${emailError ? "border-red-500" : ""}`} style={{ boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)", borderRadius: "12px", }} />

{emailError && (

Please enter a valid email address

)}

Mobile Number

handleContactChange("mobile", e.target.value)} className={`input input-large input-with-icon ${phoneError ? "border-red-500" : ""}`} style={{ boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)", borderRadius: "12px", }} />

{phoneError && (

Please enter a valid phone number

)}

{(contactInfo.fullName || contactInfo.email || contactInfo.mobile) && (

Contact Summary

{contactInfo.fullName && (

Name: {contactInfo.fullName}

)} {contactInfo.email && (

Email: {contactInfo.email}

)} {contactInfo.mobile && (

Phone: {contactInfo.mobile}

)}

You're Almost Done!

Once you submit this form, our expert team will review your information and contact you within 24 hours with personalized property recommendations.

Secure • Private • Professional

) } [V0_FILE]javascriptreact:file="app/step/1/loading.js" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]javascriptreact:file="app/step/2/loading.js" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]javascriptreact:file="app/step/3/loading.js" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]javascriptreact:file="app/step/4/loading.js" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]javascriptreact:file="app/step/5/loading.js" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]javascriptreact:file="app/step/6/loading.js" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/page.js" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" export default function HomePage() { const router = useRouter() useEffect(() => { router.push("/step/1") }, [router]) return (

Property Information Form

Loading your personalized form experience...

) } [V0_FILE]javascriptreact:file="components/address-search-step.js" isMerged="true" "use client" import { useState } from "react" import { MapPin } from "lucide-react" // Mock address suggestions (in real app, this would come from Google Places API) const mockAddresses = [ "123 Main Street, New York, NY 10001", "456 Oak Avenue, Los Angeles, CA 90210", "789 Pine Road, Chicago, IL 60601", "321 Elm Street, Houston, TX 77001", "654 Maple Drive, Phoenix, AZ 85001", ] export default function AddressSearchStep({ formData, updateFormData, onNext }) { const [searchTerm, setSearchTerm] = useState(formData.address) const [suggestions, setSuggestions] = useState([]) const [showSuggestions, setShowSuggestions] = useState(false) const handleInputChange = (value) => { setSearchTerm(value) if (value.length > 2) { const filtered = mockAddresses.filter((address) => address.toLowerCase().includes(value.toLowerCase())) setSuggestions(filtered) setShowSuggestions(true) } else { setSuggestions([]) setShowSuggestions(false) } } const handleAddressSelect = (address) => { setSearchTerm(address) updateFormData({ address }) setShowSuggestions(false) // Parse address and populate address details const parts = address.split(", ") if (parts.length >= 3) { const street = parts[0] const city = parts[1] const stateZip = parts[2].split(" ") const state = stateZip[0] const zipCode = stateZip[1] || "" updateFormData({ address, addressDetails: { street, city, state, zipCode, }, }) } // Auto-advance to next step after selection setTimeout(() => { onNext() }, 500) } return (

Search for Property Address

Start typing to search for your property address

Property Address

handleInputChange(e.target.value)} className="input pl-10" />

{/* Address Suggestions */} {showSuggestions && suggestions.length > 0 && (

{suggestions.map((address, index) => ( ))}

)}

{formData.address && (

Selected Address:

{formData.address}

)}

) } [V0_FILE]javascriptreact:file="components/property-type-step.js" isMerged="true" "use client" import { Home, Building, Building2, Users } from "lucide-react" const propertyTypes = [ { id: "single-family", label: "Single Family", description: "Detached single-family home", icon: Home, }, { id: "condo", label: "Condo", description: "Condominium unit", icon: Building, }, { id: "townhouse", label: "Townhouse", description: "Multi-level attached home", icon: Building2, }, { id: "multi-family", label: "Multi-Family", description: "Duplex, triplex, or apartment building", icon: Users, }, ] export default function PropertyTypeStep({ formData, updateFormData }) { const handlePropertyTypeSelect = (propertyType) => { updateFormData({ propertyType }) } return (

Select Property Type

Choose the type of property you're interested in

{propertyTypes.map((type) => { const Icon = type.icon const isSelected = formData.propertyType === type.id return (

handlePropertyTypeSelect(type.id)} >

{type.label}

{type.description}

{isSelected && (

)}

) })}

) } [V0_FILE]javascriptreact:file="components/budget-step.js" isMerged="true" "use client" import { useState } from "react" import { DollarSign } from "lucide-react" const predefinedBudgets = [ { value: "0-100000", label: "$0 - $100,000" }, { value: "100000-250000", label: "$100,000 - $250,000" }, { value: "250000-500000", label: "$250,000 - $500,000" }, { value: "500000-750000", label: "$500,000 - $750,000" }, { value: "750000-1000000", label: "$750,000 - $1,000,000" }, { value: "1000000-plus", label: "$1,000,000+" }, { value: "custom", label: "Custom Range" }, ] export default function BudgetStep({ formData, updateFormData }) { const [selectedBudget, setSelectedBudget] = useState(formData.budget || "") const [customMin, setCustomMin] = useState("") const [customMax, setCustomMax] = useState("") const [showCustom, setShowCustom] = useState( formData.budget === "custom" || (formData.budget && !predefinedBudgets.some((b) => b.value === formData.budget)), ) const handleBudgetSelect = (value) => { setSelectedBudget(value) if (value === "custom") { setShowCustom(true) // Don't update form data yet, wait for custom input } else { setShowCustom(false) updateFormData({ budget: value }) } } const handleCustomBudget = () => { if (customMin && customMax) { const customBudget = `${customMin}-${customMax}` updateFormData({ budget: customBudget }) } } return (

Select Your Budget

Choose your budget range for the property

Budget Range

{showCustom && (

Custom Budget Range

Minimum { setCustomMin(e.target.value) if (e.target.value && customMax) { handleCustomBudget() } }} className="input" />

Maximum { setCustomMax(e.target.value) if (customMin && e.target.value) { handleCustomBudget() } }} className="input" />

)} {formData.budget && (

Selected Budget:

{showCustom ? `$${customMin} - $${customMax}` : predefinedBudgets.find((b) => b.value === formData.budget)?.label || formData.budget}

)}

) } [V0_FILE]javascriptreact:file="components/timeline-step.js" isMerged="true" "use client" import { Clock, Zap, Calendar, CalendarDays } from "lucide-react" const timelines = [ { id: "immediately", label: "Immediately", description: "Ready to move forward right now", icon: Zap, color: "text-red-600", }, { id: "1-3-months", label: "1-3 months", description: "Planning to buy/sell within 1-3 months", icon: Calendar, color: "text-orange-600", }, { id: "3-6-months", label: "3-6 months", description: "Looking at 3-6 months timeframe", icon: CalendarDays, color: "text-blue-600", }, { id: "6-months-plus", label: "6+ months", description: "More than 6 months from now", icon: Clock, color: "text-green-600", }, ] export default function TimelineStep({ formData, updateFormData }) { const handleTimelineSelect = (timeline) => { updateFormData({ timeline }) } return (

When are you planning to buy/sell?

Select your preferred timeline for this transaction

{timelines.map((timeline) => { const Icon = timeline.icon const isSelected = formData.timeline === timeline.id return (

handleTimelineSelect(timeline.id)} >

{timeline.label}

{timeline.description}

{isSelected && (

)}

) })}

) } [V0_FILE]javascriptreact:file="components/address-details-step.js" isMerged="true" "use client" import { MapPin } from "lucide-react" export default function AddressDetailsStep({ formData, updateFormData }) { const handleAddressChange = (field, value) => { updateFormData({ addressDetails: { ...formData.addressDetails, [field]: value, }, }) } return (

Confirm Address Details

Please confirm and complete the address information

{formData.address && (

Selected Address

{formData.address}

)}

Street Address * handleAddressChange("street", e.target.value)} required className="input" />

City * handleAddressChange("city", e.target.value)} required className="input" />

State * handleAddressChange("state", e.target.value)} required className="input" />

Zip Code * handleAddressChange("zipCode", e.target.value)} required className="input max-w-xs" />

* Required fields

) } [V0_FILE]javascriptreact:file="components/contact-info-step.js" isMerged="true" "use client" import { User, Mail, Phone, AlertCircle } from "lucide-react" export default function ContactInfoStep({ formData, updateFormData }) { const handleContactChange = (field, value) => { updateFormData({ contactInfo: { ...formData.contactInfo, [field]: value, }, }) } const isValidEmail = (email) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } const isValidPhone = (phone) => { const phoneRegex = /^\+?[\d\s\-()]{10,}$/ return phoneRegex.test(phone) } const emailError = formData.contactInfo.email && !isValidEmail(formData.contactInfo.email) const phoneError = formData.contactInfo.mobile && !isValidPhone(formData.contactInfo.mobile) return (

Contact Information

Please provide your contact details so we can reach you

Full Name *

handleContactChange("fullName", e.target.value)} className="input pl-10" required />

Email Address *

handleContactChange("email", e.target.value)} className={`input pl-10 ${emailError ? "border-red-500" : ""}`} required />

{emailError && (

Please enter a valid email address

)}

Mobile Number *

handleContactChange("mobile", e.target.value)} className={`input pl-10 ${phoneError ? "border-red-500" : ""}`} required />

{phoneError && (

Please enter a valid phone number

)}

Almost done!

Once you submit this form, our team will review your information and contact you within 24 hours.

* Required fields

) } [V0_FILE]javascriptreact:file="components/ui/progress.js" isEdit="true" isMerged="true" export function Progress({ value = 0, className = "", ...props }) { return (

) } [V0_FILE]css:file="app/globals.css" isEdit="true" * { box-sizing: border-box; margin: 0; padding: 0; } html, body { max-width: 100vw; overflow-x: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { color: #333333; background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); min-height: 100vh; } /* Layout Classes */ .page-container { min-height: 100vh; background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); } .home-container { min-height: 100vh; background: linear-gradient(135deg, #1e88e5 0%, #1976d2 50%, #1565c0 100%); display: flex; align-items: center; justify-content: center; } .step-layout-container { min-height: 100vh; background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 50%, #f5f5f5 100%); padding: 16px 0; } .container { max-width: 1024px; margin: 0 auto; padding: 0 16px; } .step-content { padding: 32px; } .max-w-xs { max-width: 320px; } .max-w-md { max-width: 448px; } .max-w-lg { max-width: 512px; } .max-w-xl { max-width: 576px; } .max-w-2xl { max-width: 672px; } .max-w-4xl { max-width: 896px; } .mx-auto { margin-left: auto; margin-right: auto; } /* Header Card */ .header-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 24px; overflow: hidden; } .header-gradient { background: linear-gradient(135deg, #1e88e5 0%, #1976d2 50%, #1565c0 100%); padding: 24px; color: white; position: relative; overflow: hidden; } .header-pattern { position: absolute; inset: 0; opacity: 0.1; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .header-content { position: relative; z-index: 10; } .header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .header-title { font-size: 30px; font-weight: bold; margin-bottom: 4px; } .header-subtitle { color: #e3f2fd; } .header-icon { font-size: 36px; } /* Progress Bar */ .progress-container { position: relative; } .progress-track { width: 100%; background: rgba(255, 255, 255, 0.2); border-radius: 6px; height: 12px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #ffd700 0%, #ffc107 50%, #ff9800 100%); border-radius: 6px; transition: width 1s ease-out; position: relative; overflow: hidden; } .progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); animation: shimmer 2s infinite; } .progress-indicator { position: absolute; top: -4px; transition: left 1s ease-out; } .progress-dot { width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transform: translateX(-50%); } /* Step Indicators */ .step-indicators { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .step-indicator { text-align: center; transition: all 0.5s; } .step-indicator.current { transform: scale(1.1); } .step-indicator.completed { transform: scale(1); } .step-indicator.upcoming { transform: scale(0.9); opacity: 0.6; } .step-circle { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; margin-bottom: 8px; transition: all 0.5s; } .step-circle.current { border-color: #ffd700; background: #ffd700; color: #1565c0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .step-circle.completed { border-color: #1e88e5; background: #1e88e5; color: white; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1); } .step-circle.upcoming { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.6); } .step-label { font-size: 12px; font-weight: 500; opacity: 0.9; } /* Main Content Card */ .main-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden; } .main-content { position: relative; overflow: hidden; } .content-wrapper { transition: all 0.5s ease-in-out; } .content-wrapper.animating-forward { opacity: 0; transform: translateX(32px) scale(0.95); } .content-wrapper.animating-backward { opacity: 0; transform: translateX(-32px) scale(0.95); } .content-wrapper.static { opacity: 1; transform: translateX(0) scale(1); } /* Footer */ .footer { text-align: center; margin-top: 24px; color: #666666; font-size: 14px; } /* Loading Spinner */ .loading-center { text-align: center; } .loading-spinner { width: 64px; height: 64px; border: 4px solid #1e88e5; border-top: 4px solid transparent; border-radius: 50%; margin: 0 auto 16px; animation: spin 1s linear infinite; } .loading-title { font-size: 30px; font-weight: bold; color: white; margin-bottom: 8px; } .loading-text { color: #e3f2fd; } /* Step Headers */ .step-header { text-align: center; } .step-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .step-icon.search { background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%); } .step-icon.property { background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); } .step-icon.budget { background: linear-gradient(135deg, #ffd700 0%, #ffc107 100%); } .step-icon.timeline { background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%); } .step-icon.address { background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); } .step-icon.contact { background: linear-gradient(135deg, #ffd700 0%, #ffc107 100%); } .step-icon.success { background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%); width: 128px; height: 128px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .step-title { font-size: 30px; font-weight: bold; color: #333333; margin-bottom: 8px; } .step-subtitle { color: #666666; font-size: 18px; } .success-title { font-size: 36px; font-weight: bold; color: #1e88e5; margin-bottom: 16px; } .success-text { font-size: 20px; color: #333333; margin-bottom: 8px; } .success-subtext { color: #666666; } /* Button Styles */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 500; transition: all 0.2s; border: none; cursor: pointer; text-decoration: none; gap: 8px; padding: 12px 24px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, #1e88e5 0%, #1976d2 50%, #1565c0 100%); color: white; box-shadow: 0 4px 14px 0 rgba(30, 136, 229, 0.39); } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 25px 0 rgba(30, 136, 229, 0.5); } .btn-outline { background: transparent; border: 2px solid #d1d5db; color: #333333; } .btn-outline:hover:not(:disabled) { border-color: #1e88e5; background: #e3f2fd; } .btn-large { padding: 16px 48px; font-size: 18px; font-weight: 600; border-radius: 12px; } .btn-xl { padding: 20px 60px; font-size: 20px; font-weight: 700; border-radius: 16px; } .btn-continue { background: linear-gradient(135deg, #1e88e5 0%, #1976d2 50%, #1565c0 100%); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); color: white; } .btn-submit { background: linear-gradient(135deg, #ffd700 0%, #ffc107 50%, #ff9800 100%); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); color: #333333; } .btn-submit:disabled { background: #9ca3af; cursor: not-allowed; } /* Input Styles */ .input { width: 100%; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: all 0.2s; background: white; } .input:focus { outline: none; border-color: #1e88e5; box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1); } .input:hover { border-color: #1976d2; } .input-large { padding: 16px 20px; font-size: 18px; border-radius: 12px; height: 56px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .input-xl { padding: 20px 24px; font-size: 20px; border-radius: 16px; height: 64px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .input-with-icon { padding-left: 56px; } .input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: #1e88e5; } .input-icon.searching { animation: pulse 2s infinite; } .input-spinner { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 2px solid #1e88e5; border-top: 2px solid transparent; border-radius: 50%; animation: spin 1s linear infinite; } /* Card Styles */ .card { background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border: 1px solid #e5e7eb; overflow: hidden; } .card-content { padding: 24px; } .card-header { padding: 24px 24px 0 24px; } .card-hover { transition: all 0.3s ease; cursor: pointer; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .card-selected { border: 4px solid #1e88e5; transform: scale(1.02); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); } .card-special { border: 2px solid #1e88e5; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .card-success { background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 50%, #e8f5e8 100%); border: 2px solid #1e88e5; } .card-address-selected { background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 50%, #e3f2fd 100%); border: 2px solid #1e88e5; } /* Label Styles */ .label { display: block; font-size: 14px; font-weight: 500; color: #333333; margin-bottom: 8px; } .label-large { font-size: 18px; font-weight: 600; text-align: center; margin-bottom: 16px; } /* Suggestions */ .suggestions-container { position: relative; } .suggestions-dropdown { position: absolute; z-index: 20; width: 100%; background: white; border: 2px solid #1e88e5; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); max-height: 320px; overflow-y: auto; } .suggestions-content { padding: 8px; } .suggestions-header { font-size: 12px; color: #666666; padding: 8px 12px; font-weight: 500; } .suggestion-item { width: 100%; text-align: left; padding: 16px; border-radius: 8px; border: none; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; gap: 16px; transition: all 0.2s; background: transparent; cursor: pointer; } .suggestion-item:hover { background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%); transform: translateX(8px); } .suggestion-item:last-child { border-bottom: none; } .suggestion-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } .suggestion-text { flex: 1; color: #333333; font-weight: 500; } .suggestion-arrow { width: 20px; height: 20px; color: #9ca3af; } /* Property Type Grid */ .property-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .property-card { cursor: pointer; transition: all 0.3s ease; } .property-card.selected { transform: scale(1.05); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .property-card:not(.selected) { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .property-header { display: flex; align-items: center; gap: 16px; } .property-icon { padding: 16px; border-radius: 12px; } .property-icon.selected { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .property-icon.single-family { background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%); } .property-icon.condo { background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); } .property-icon.townhouse { background: linear-gradient(135deg, #ffd700 0%, #ffc107 100%); } .property-icon.multi-family { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); } .property-info { flex: 1; } .property-title { font-weight: bold; font-size: 20px; margin-bottom: 4px; } .property-title.selected { color: #1e88e5; } .property-title.default { color: #333333; } .property-description { color: #666666; font-size: 14px; } .property-check { width: 32px; height: 32px; background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .property-check-dot { width: 16px; height: 16px; background: white; border-radius: 50%; } .property-features { margin-top: 16px; } .property-features-title { font-weight: 600; color: #333333; font-size: 14px; margin-bottom: 8px; } .property-features-list { display: flex; flex-wrap: wrap; gap: 8px; } .property-feature { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; } .property-feature.selected { background: #e3f2fd; color: #1565c0; } .property-feature.default { background: #f3f4f6; color: #666666; } /* Budget Options */ .budget-option { cursor: pointer; transition: all 0.3s ease; } .budget-header { display: flex; align-items: center; gap: 16px; } .budget-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .budget-icon.starter { background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%); } .budget-icon.mid-range { background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); } .budget-icon.premium { background: linear-gradient(135deg, #ffd700 0%, #ffc107 100%); } .budget-icon.luxury { background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%); } .budget-icon.high-end { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); } .budget-icon.ultra-luxury { background: linear-gradient(135deg, #f57c00 0%, #e65100 100%); } .budget-icon.custom { background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%); } .budget-info h3 { font-size: 20px; font-weight: bold; color: #333333; } /* Custom Budget */ .custom-budget-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .custom-budget-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .custom-budget-info h3 { font-size: 20px; font-weight: bold; color: #333333; } .custom-budget-info p { color: #666666; } .custom-budget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .custom-budget-result { padding: 16px; background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%); border: 1px solid #1e88e5; border-radius: 12px; margin-top: 16px; } .custom-budget-result-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .custom-budget-result-icon { width: 32px; height: 32px; background: #1e88e5; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .custom-budget-result-text { font-weight: 600; color: #1565c0; } .custom-budget-result-amount { font-size: 18px; font-weight: bold; color: #1976d2; } /* Timeline Cards */ .timeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .timeline-card { cursor: pointer; transition: all 0.3s ease; } .timeline-card.selected { transform: scale(1.05); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .timeline-card:not(.selected) { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .timeline-header { display: flex; align-items: center; gap: 16px; } .timeline-icon { padding: 16px; border-radius: 12px; } .timeline-icon.selected { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .timeline-info { flex: 1; } .timeline-title { font-weight: bold; font-size: 20px; margin-bottom: 4px; } .timeline-title.selected { color: #1e88e5; } .timeline-title.default { color: #333333; } .timeline-description { color: #666666; font-size: 14px; } .timeline-check { width: 32px; height: 32px; background: linear-gradient(135deg, #1e88e5 0%, #1976d2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .timeline-check-dot { width: 16px; height: 16px; background: white; border-radius: 50%; } .timeline-details { margin-top: 12px; } .timeline-detail { font-size: 14px; color: #666666; margin-bottom: 12px; } .timeline-urgency { display: flex; align-items: center; justify-content: space-between; } .timeline-urgency-label { display: flex; align-items: center; gap: 8px; } .timeline-urgency-text { font-size: 12px; font-weight: 600; color: #666666; } .timeline-urgency-badge { padding: 4px 8px; border-radius: 20px; font-size: 12px; font-weight: 500; } .timeline-urgency-badge.high { background: #ffebee; color: #c62828; } .timeline-urgency-badge.medium-high { background: #fff3e0; color: #ef6c00; } .timeline-urgency-badge.medium { background: #e3f2fd; color: #1565c0; } .timeline-urgency-badge.low { background: #e8f5e8; color: #2e7d32; } /* Address Form */ .address-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* Contact Form */ .contact-summary { font-size: 14px; color: #333333; } .contact-summary p { margin-bottom: 4px; } .contact-summary strong { font-weight: 600; } /* Glass Effect */ .glass-effect { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(30, 136, 229, 0.2); border-radius: 12px; padding: 24px; } /* Summary Cards */ .summary-card { border-radius: 12px; padding: 24px; } .summary-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .summary-dot { width: 12px; height: 12px; border-radius: 50%; } .summary-dot.green { background: #1e88e5; } .summary-dot.blue { background: #1e88e5; } .summary-dot.emerald { background: #1976d2; } .summary-dot.pink { background: #ffd700; } .summary-dot.indigo { background: #1565c0; } .summary-label { font-weight: 600; color: #333333; } .summary-value { font-weight: bold; } .summary-value.blue { color: #1e88e5; } .summary-value.green { color: #1e88e5; } /* Tips Sections */ .tips-section { border-radius: 12px; padding: 24px; } .tips-header { font-weight: 600; color: #333333; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .tips-list { font-size: 14px; color: #666666; } .tips-list li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .tips-list li:last-child { margin-bottom: 0; } .tips-bullet { color: #1e88e5; } .tips-bullet.green { color: #1e88e5; } .tips-bullet.emerald { color: #1976d2; } .tips-bullet.indigo { color: #1565c0; } /* Navigation */ .navigation { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; } .navigation.center { justify-content: center; } /* Success Page */ .success-container { padding: 32px; text-align: center; } .success-redirect { margin-top: 32px; max-width: 448px; margin-left: auto; margin-right: auto; } .success-redirect-content { display: flex; align-items: center; justify-content: center; gap: 8px; color: #1e88e5; } .success-redirect-text { font-weight: 600; } /* Loading States */ .submit-spinner { width: 24px; height: 24px; border: 2px solid white; border-top: 2px solid transparent; border-radius: 50%; animation: spin 1s linear infinite; } /* Icon Sizes */ .icon-sm { width: 16px; height: 16px; } .icon-md { width: 20px; height: 20px; } .icon-lg { width: 24px; height: 24px; } .icon-xl { width: 32px; height: 32px; } .icon-2xl { width: 40px; height: 40px; } /* Text Colors */ .text-white { color: white; } .text-blue-600 { color: #1e88e5; } .text-green-600 { color: #1e88e5; } .text-green-700 { color: #1976d2; } .text-green-800 { color: #1565c0; } /* Flex Utilities */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-12 { gap: 48px; } .gap-16 { gap: 64px; } /* Spacing */ .space-y-1 > * + * { margin-top: 4px; } .space-y-2 > * + * { margin-top: 8px; } .space-y-3 > * + * { margin-top: 12px; } .space-y-4 > * + * { margin-top: 16px; } .space-y-6 > * + * { margin-top: 24px; } .space-y-8 > * + * { margin-top: 32px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; } .mb-16 { margin-bottom: 64px; } .mt-8 { margin-top: 32px; } .mt-16 { margin-top: 64px; } .mt-32 { margin-top: 128px; } /* Position */ .relative { position: relative; } .absolute { position: absolute; } /* Text Styles */ .text-center { text-align: center; } .text-left { text-align: left; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .animate-fade-in { animation: fadeIn 0.6s ease-out; } .animate-slide-up { animation: slideUp 0.5s ease-out; } .animate-bounce-in { animation: bounceIn 0.6s ease-out; } .animate-float { animation: float 3s ease-in-out infinite; } .animate-pulse { animation: pulse 2s ease-in-out infinite; } .animate-spin { animation: spin 1s linear infinite; } /* Hover Effects */ .hover-lift { transition: all 0.3s ease; } .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .button-press { transition: all 0.1s ease; } .button-press:active { transform: scale(0.95); } /* Responsive */ @media (max-width: 768px) { .container { padding: 0 12px; } .step-title { font-size: 24px; } .header-title { font-size: 24px; } .btn-large { padding: 12px 32px; font-size: 16px; } .input-xl { height: 56px; font-size: 18px; } .property-grid { grid-template-columns: 1fr; } .timeline-grid { grid-template-columns: 1fr; } .address-form-grid { grid-template-columns: 1fr; } .custom-budget-grid { grid-template-columns: 1fr; } .step-label { display: none; } } @media (min-width: 640px) { .step-label { display: block; } }