import React, { useState, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Search, MapPin, BedDouble, Bath, Square, ArrowLeft, Phone, Mail, Heart, Home, Building2, Filter, X, Star, ChevronLeft, ChevronRight } from 'lucide-react'; interface Property { id: number; title: string; address: string; city: string; price: number; beds: number; baths: number; sqft: number; type: 'House' | 'Apartment' | 'Condominium'; image: string; description: string; agent: { name: string; phone: string; email: string; avatar: string; rating: number; }; featured?: boolean; } const PROPERTIES: Property[] = [ { id: 1, title: 'Modern Glass Residence', address: '1247 Skyline Avenue', city: 'San Francisco, CA', price: 2850000, beds: 4, baths: 3, sqft: 3200, type: 'House', image: 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&q=80', description: 'A stunning architectural masterpiece featuring floor-to-ceiling glass walls, an open-concept living area with 20-foot ceilings, and a chef\'s kitchen with premium Italian appliances. The primary suite includes a private balcony overlooking the Bay, while the home theater and wine cellar add the perfect touch of luxury.', agent: { name: 'Sarah Mitchell', phone: '(415) 555-0123', email: 'sarah@havenrealty.com', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80', rating: 4.9, }, featured: true, }, { id: 2, title: 'Coastal Contemporary', address: '88 Ocean View Drive', city: 'Santa Monica, CA', price: 3450000, beds: 5, baths: 4, sqft: 4100, type: 'House', image: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=800&q=80', description: 'Wake up to panoramic ocean views in this contemporary coastal retreat. Featuring a saltwater infinity pool, outdoor kitchen, and a rooftop deck perfect for entertaining. The interior showcases white oak floors, custom millwork, and smart home automation throughout.', agent: { name: 'James Rodriguez', phone: '(310) 555-0198', email: 'james@havenrealty.com', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80', rating: 4.8, }, }, { id: 3, title: 'Skyline Penthouse', address: '2200 Market Street', city: 'New York, NY', price: 4200000, beds: 3, baths: 3, sqft: 2800, type: 'Condominium', image: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=800&q=80', description: 'Perched on the 52nd floor, this penthouse offers breathtaking city views from every room. The elegant interior features 12-foot ceilings, a gas fireplace, and a private elevator landing. Residents enjoy full-service amenities including a gym, spa, and 24-hour concierge.', agent: { name: 'Emily Chen', phone: '(212) 555-0167', email: 'emily@havenrealty.com', avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&q=80', rating: 5.0, }, featured: true, }, { id: 4, title: 'Garden Courtyard Home', address: '456 Willow Lane', city: 'Austin, TX', price: 1250000, beds: 3, baths: 2, sqft: 2200, type: 'House', image: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&q=80', description: 'Nestled in a quiet neighborhood, this charming home features a lush private courtyard, updated kitchen with quartz countertops, and a spacious backyard perfect for entertaining. Walking distance to award-winning schools and local parks.', agent: { name: 'Michael Torres', phone: '(512) 555-0145', email: 'michael@havenrealty.com', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&q=80', rating: 4.7, }, }, { id: 5, title: 'Luxury Urban Apartment', address: '901 Pine Street', city: 'Seattle, WA', price: 890000, beds: 2, baths: 2, sqft: 1450, type: 'Apartment', image: 'https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=800&q=80', description: 'This sophisticated apartment offers sweeping views of the Puget Sound and downtown skyline. Features include floor-to-ceiling windows, a gourmet kitchen with island seating, and access to a rooftop lounge with fire pits and BBQ area.', agent: { name: 'Rachel Kim', phone: '(206) 555-0189', email: 'rachel@havenrealty.com', avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&q=80', rating: 4.9, }, }, { id: 6, title: 'Classic Brownstone', address: '314 Beacon Hill', city: 'Boston, MA', price: 2750000, beds: 4, baths: 3, sqft: 3500, type: 'House', image: 'https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?w=800&q=80', description: 'A beautifully restored brownstone with original Victorian details combined with modern amenities. Features include a grand staircase, restored crown moldings, and a chef-friendly kitchen with butler\'s pantry. The private garden offers a serene outdoor escape.', agent: { name: 'David Park', phone: '(617) 555-0132', email: 'david@havenrealty.com', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&q=80', rating: 4.8, }, }, { id: 7, title: 'Desert Modern Villa', address: '777 Palm Canyon Road', city: 'Palm Springs, CA', price: 1980000, beds: 4, baths: 4, sqft: 3800, type: 'House', image: 'https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=800&q=80', description: 'This mid-century modern masterpiece features an open-air courtyard, resort-style pool, and dramatic mountain views. The interior is bathed in natural light with sliding glass walls that seamlessly connect indoor and outdoor living spaces.', agent: { name: 'Jessica Nguyen', phone: '(760) 555-0178', email: 'jessica@havenrealty.com', avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&q=80', rating: 4.9, }, featured: true, }, { id: 8, title: 'Downtown Loft', address: '1200 Wabash Avenue', city: 'Chicago, IL', price: 750000, beds: 2, baths: 1, sqft: 1800, type: 'Apartment', image: 'https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=800&q=80', description: 'Industrial-chic loft in the heart of the city with exposed brick, polished concrete floors, and oversized windows. The open floor plan is perfect for creative living, with a modern kitchen and mezzanine sleeping area.', agent: { name: 'Ryan O\'Connor', phone: '(312) 555-0110', email: 'ryan@havenrealty.com', avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=100&q=80', rating: 4.6, }, }, { id: 9, title: 'Waterfront Condominium', address: '500 Harbor Boulevard', city: 'Miami, FL', price: 1650000, beds: 3, baths: 2, sqft: 2100, type: 'Condominium', image: 'https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=800&q=80', description: 'Luxury waterfront living with direct ocean views and private marina access. This beautifully appointed condominium features Italian marble flooring, a gourmet kitchen, and floor-to-ceiling impact glass doors leading to a spacious terrace.', agent: { name: 'Sofia Garcia', phone: '(305) 555-0156', email: 'sofia@havenrealty.com', avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&q=80', rating: 4.8, }, }, ]; type PriceRange = 'all' | 'under1m' | '1to2m' | '2to3m' | 'over3m'; type BedCount = 'all' | '2' | '3' | '4'; type PropertyType = 'all' | 'House' | 'Apartment' | 'Condominium'; export default function App() { const [searchQuery, setSearchQuery] = useState(''); const [priceRange, setPriceRange] = useState('all'); const [bedCount, setBedCount] = useState('all'); const [propertyType, setPropertyType] = useState('all'); const [selectedProperty, setSelectedProperty] = useState(null); const [favorites, setFavorites] = useState([]); const [showFilters, setShowFilters] = useState(false); const filteredProperties = useMemo(() => { return PROPERTIES.filter((prop) => { const matchesSearch = prop.title.toLowerCase().includes(searchQuery.toLowerCase()) || prop.address.toLowerCase().includes(searchQuery.toLowerCase()) || prop.city.toLowerCase().includes(searchQuery.toLowerCase()); const matchesPrice = priceRange === 'all' || (priceRange === 'under1m' && prop.price < 1000000) || (priceRange === '1to2m' && prop.price >= 1000000 && prop.price < 2000000) || (priceRange === '2to3m' && prop.price >= 2000000 && prop.price < 3000000) || (priceRange === 'over3m' && prop.price >= 3000000); const matchesBeds = bedCount === 'all' || prop.beds >= parseInt(bedCount); const matchesType = propertyType === 'all' || prop.type === propertyType; return matchesSearch && matchesPrice && matchesBeds && matchesType; }); }, [searchQuery, priceRange, bedCount, propertyType]); const toggleFavorite = (id: number) => { setFavorites(prev => prev.includes(id) ? prev.filter(fId => fId !== id) : [...prev, id] ); }; const formatPrice = (price: number) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }).format(price); }; const priceFilterOptions: { label: string; value: PriceRange }[] = [ { label: 'All Prices', value: 'all' }, { label: 'Under $1M', value: 'under1m' }, { label: '$1M - $2M', value: '1to2m' }, { label: '$2M - $3M', value: '2to3m' }, { label: 'Over $3M', value: 'over3m' }, ]; const bedFilterOptions: { label: string; value: BedCount }[] = [ { label: 'Any Beds', value: 'all' }, { label: '2+ Beds', value: '2' }, { label: '3+ Beds', value: '3' }, { label: '4+ Beds', value: '4' }, ]; const typeFilterOptions: { label: string; value: PropertyType }[] = [ { label: 'All Types', value: 'all' }, { label: 'Houses', value: 'House' }, { label: 'Apartments', value: 'Apartment' }, { label: 'Condos', value: 'Condominium' }, ]; return (

{/* Background gradient glows */}

{/* Header */}

HavenRealty

Luxury Properties

setSearchQuery(e.target.value)} placeholder="Search properties..." className="w-64 pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-xl text-sm placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-teal-500/50 transition-all" />

{favorites.length} Saved

{/* Mobile search */}

setSearchQuery(e.target.value)} placeholder="Search properties..." className="w-full pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-xl text-sm placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-teal-500/50 transition-all" />

{/* Main Content */}

{selectedProperty ? ( {/* Back button */} {/* Detail View */}

{/* Image and main info */}

{selectedProperty.type}

{selectedProperty.title}

{selectedProperty.address}, {selectedProperty.city}

{/* Specs */}

{selectedProperty.beds}

Bedrooms

{selectedProperty.baths}

Bathrooms

{selectedProperty.sqft.toLocaleString()}

Square Feet

{/* Description */}

About this property

{selectedProperty.description}

{/* Sidebar */}

{/* Price */}

Listing Price

{formatPrice(selectedProperty.price)}

Est. monthly: ${Math.round(selectedProperty.price * 0.005).toLocaleString()}

{/* Agent Card */}

Listing Agent

{selectedProperty.agent.name}

{selectedProperty.agent.rating.toFixed(1)}

{selectedProperty.agent.phone} {selectedProperty.agent.email}

{/* Quick Actions */}

) : ( {/* Hero Section */}

Discover Your{' '} Dream Home

Explore our curated collection of luxury properties in the most sought-after locations across the country.

{/* Filter Chips */}

{/* Desktop Filters */}

{priceFilterOptions.map((option) => ( ))}

{bedFilterOptions.map((option) => ( ))} {typeFilterOptions.map((option) => ( ))}

{/* Mobile Filters */} {showFilters && (

{priceFilterOptions.map((option) => ( ))}

{bedFilterOptions.map((option) => ( ))} {typeFilterOptions.map((option) => ( ))}

)}

{/* Results Count */}

Showing {filteredProperties.length} properties

{/* Property Grid */} {filteredProperties.length > 0 ? (

{filteredProperties.map((property, index) => ( setSelectedProperty(property)} >

{property.featured && ( Featured )}

{formatPrice(property.price)}

{property.title}

{property.address}, {property.city}

{property.beds} {property.baths} {property.sqft.toLocaleString()} sqft

))}

) : (

No properties found

Try adjusting your filters or search query to find more properties.

)} )}

{/* Footer */}

); }

부동산 매물