import React, { useState } from 'react';

import { Building2, MapPin, Phone, Mail, CheckCircle, Home, TrendingUp, Shield } from 'lucide-react';

export default function AllianceTrustRealty() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
phone: '',
propertyType: '',
message: ''
});
const [submitted, setSubmitted] = useState(false);

const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};

const handleSubmit = (e) => {
e.preventDefault();
console.log('Lead submitted:', formData);
setSubmitted(true);
setTimeout(() => {
setSubmitted(false);
setFormData({
firstName: '',
lastName: '',
email: '',
phone: '',
propertyType: '',
message: ''
});
}, 5000);
};

return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-800">
{/* Header */}
<header className="bg-white/10 backdrop-blur-md border-b border-white/20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Building2 className="w-10 h-10 text-blue-400" />
<div>
<h1 className="text-2xl font-bold text-white">Alliance Trust Realty</h1>
<p className="text-blue-200 text-sm">Your Trusted Real Estate Partner</p>
</div>
</div>
<div className="hidden md:flex items-center space-x-6 text-white">
<div className="flex items-center space-x-2">
<Phone className="w-4 h-4" />
<span className="text-sm">(555) 123-4567</span>
</div>
<div className="flex items-center space-x-2">
<Mail className="w-4 h-4" />
<span className="text-sm">info@alliancetrust-realty.com</span>
</div>
</div>
</div>
</div>
</header>

{/* Hero Section */}
<section className="relative py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
<div className="grid lg:grid-cols-2 gap-12 items-center">
{/* Left Column - Value Proposition */}
<div className="text-white space-y-6">
<h2 className="text-5xl font-bold leading-tight">
Find Your Dream Property with
<span className="text-blue-400"> Confidence</span>
</h2>
<p className="text-xl text-blue-100">
Whether you're buying, selling, or investing, our experienced team delivers exceptional results with integrity and professionalism.
</p>

{/* Features */}
<div className="grid sm:grid-cols-3 gap-6 pt-8">
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
<Home className="w-8 h-8 text-blue-400 mb-2" />
<h3 className="font-semibold mb-1">Expert Guidance</h3>
<p className="text-sm text-blue-200">Professional support every step</p>
</div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
<TrendingUp className="w-8 h-8 text-blue-400 mb-2" />
<h3 className="font-semibold mb-1">Market Insights</h3>
<p className="text-sm text-blue-200">Data-driven decisions</p>
</div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
<Shield className="w-8 h-8 text-blue-400 mb-2" />
<h3 className="font-semibold mb-1">Trusted Service</h3>
<p className="text-sm text-blue-200">Your interests protected</p>
</div>
</div>
</div>

{/* Right Column - Lead Form */}
<div className="bg-white rounded-2xl shadow-2xl p-8">
{!submitted ? (
<>
<div className="text-center mb-6">
<h3 className="text-3xl font-bold text-gray-900 mb-2">Get Started Today</h3>
<p className="text-gray-600">Fill out the form below and our team will contact you within 24 hours</p>
</div>

<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
First Name *
</label>
<input
type="text"
name="firstName"
required
value={formData.firstName}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
placeholder="John"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Last Name *
</label>
<input
type="text"
name="lastName"
required
value={formData.lastName}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
placeholder="Doe"
/>
</div>
</div>

<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Email Address *
</label>
<input
type="email"
name="email"
required
value={formData.email}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
placeholder="john.doe@example.com"
/>
</div>

<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Phone Number *
</label>
<input
type="tel"
name="phone"
required
value={formData.phone}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
placeholder="(555) 123-4567"
/>
</div>

<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
I'm Interested In *
</label>
<select
name="propertyType"
required
value={formData.propertyType}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
>
<option value="">Select an option</option>
<option value="buying">Buying a Property</option>
<option value="selling">Selling a Property</option>
<option value="investing">Investment Opportunities</option>
<option value="renting">Renting</option>
<option value="consultation">Free Consultation</option>
</select>
</div>

<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Additional Information
</label>
<textarea
name="message"
value={formData.message}
onChange={handleChange}
rows={3}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition resize-none"
placeholder="Tell us more about what you're looking for..."
/>
</div>

<button
type="submit"
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 rounded-lg transition duration-300 transform hover:scale-105 shadow-lg"
>
Get Your Free Consultation
</button>

<p className="text-xs text-gray-500 text-center">
By submitting this form, you agree to be contacted by Alliance Trust Realty regarding your inquiry.
</p>
</form>
</>
) : (
<div className="text-center py-12">
<CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
<h3 className="text-2xl font-bold text-gray-900 mb-2">Thank You!</h3>
<p className="text-gray-600 mb-4">
Your information has been received. One of our

README.md

@@ -1,10 +1,13 @@
 ---
-title: Homehaven Horizons
-emoji: 🌖
-colorFrom: red
-colorTo: green
+title: HomeHaven Horizons 🏠
+colorFrom: yellow
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,660 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HomeHaven Horizons | Premium Real Estate</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .property-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        #vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <div id="vanta-bg"></div>
+    
+    <!-- Navigation -->
+    <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <i data-feather="home" class="text-indigo-600 w-8 h-8"></i>
+                        <span class="ml-2 text-xl font-bold text-gray-900">HomeHaven</span>
+                    </div>
+                </div>
+                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
+                    <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
+                    <a href="#properties" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Properties</a>
+                    <a href="#agents" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Agents</a>
+                    <a href="#services" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Services</a>
+                    <a href="#contact" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
+                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Get Started</button>
+                </div>
+                <div class="-mr-2 flex items-center md:hidden">
+                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
+                        <i data-feather="menu" class="block h-6 w-6"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-12 px-4 sm:px-6 lg:px-8 flex items-center min-h-screen">
+        <div class="max-w-7xl mx-auto">
+            <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
+                <div class="mb-12 lg:mb-0">
+                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6">
+                        Discover Your <span class="gradient-text">Dream Home</span> Today
+                    </h1>
+                    <p class="text-lg sm:text-xl text-gray-600 mb-8 max-w-lg">
+                        We help you find the perfect property that matches your lifestyle and budget. Our expert agents are ready to guide you through every step.
+                    </p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium text-lg transition duration-300 transform hover:scale-105 shadow-lg">
+                            Browse Properties
+                        </button>
+                        <button class="bg-white hover:bg-gray-100 text-gray-800 px-6 py-3 rounded-lg font-medium text-lg border border-gray-300 transition duration-300 transform hover:scale-105">
+                            <div class="flex items-center">
+                                <i data-feather="play" class="mr-2"></i> Watch Video
+                            </div>
+                        </button>
+                    </div>
+                </div>
+                <div class="relative">
+                    <div class="bg-white p-4 rounded-xl shadow-xl">
+                        <img src="http://static.photos/home/1024x576/42" alt="Modern Home" class="rounded-lg w-full h-auto">
+                        <div class="absolute -bottom-6 -left-6 bg-indigo-600 text-white p-4 rounded-lg shadow-lg">
+                            <div class="text-2xl font-bold">250+</div>
+                            <div class="text-sm">Happy Clients</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Search Bar -->
+    <section class="bg-white rounded-xl shadow-lg p-6 max-w-5xl mx-auto -mt-12 relative z-10">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
+                <div class="relative">
+                    <input type="text" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="City or Neighborhood">
+                    <i data-feather="map-pin" class="absolute left-3 top-3.5 text-gray-400"></i>
+                </div>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Property Type</label>
+                <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                    <option>Any Type</option>
+                    <option>House</option>
+                    <option>Apartment</option>
+                    <option>Villa</option>
+                    <option>Commercial</option>
+                </select>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Price Range</label>
+                <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                    <option>Any Price</option>
+                    <option>$100k - $300k</option>
+                    <option>$300k - $500k</option>
+                    <option>$500k - $1M</option>
+                    <option>$1M+</option>
+                </select>
+            </div>
+            <div class="flex items-end">
+                <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-lg font-medium transition duration-300">
+                    <i data-feather="search" class="mr-2"></i> Search
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Featured Properties -->
+    <section id="properties" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 mt-16">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-900 mb-4">Featured Properties</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Explore our handpicked selection of premium properties</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Property 1 -->
+                <div class="property-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
+                    <div class="relative">
+                        <img src="http://static.photos/home/640x360/101" alt="Modern Villa" class="w-full h-48 object-cover">
+                        <div class="absolute top-4 right-4 bg-indigo-600 text-white text-xs font-bold px-2 py-1 rounded-full">
+                            For Sale
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2">Modern Luxury Villa</h3>
+                        <div class="flex items-center text-gray-500 mb-4">
+                            <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
+                            <span>Beverly Hills, CA</span>
+                        </div>
+                        <div class="flex justify-between items-center mb-4">
+                            <div class="flex items-center">
+                                <i data-feather="home" class="w-4 h-4 text-gray-400 mr-1"></i>
+                                <span class="text-sm text-gray-600">5 Beds</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i data-feather="droplet" class="w-4 h-4 text-gray-400 mr-1"></i>
+                                <span class="text-sm text-gray-600">3 Baths</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i data-feather="maximize" class="w-4 h-4 text-gray-400 mr-1"></i>
+                                <span class="text-sm text-gray-600">3200 sqft</span>
+                            </div>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-xl font-bold text-indigo-600">$1,250,000</span>
+                            <button class="text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">
+                                View Details
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Property 2 -->
+                <div class="property-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
+                    <div class="relative">
+                        <img src="http://static.photos/home/640x360/102" alt="Downtown Apartment" class="w-full h-48 object-cover">
+                        <div class="absolute top-4 right-4 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full">
+                            For Rent
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2">Downtown Luxury Apartment</h3>
+                        <div class="flex items-center text-gray-500 mb-4">
+                            <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
+                            <span>New York, NY</span>
+                        </div>
+                        <div class="flex justify-between items-center mb-4">
+                            <div class="flex items-center">
+                                <i data-feather="home" class="w-4 h-4 text-gray-400 mr-1"></i>
+                                <span class="text-sm text-gray-600">2 Beds</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i data-feather="droplet" class="w-4 h-4 text-gray-400 mr-1"></i>
+                                <span class="text-sm text-gray-600">2 Baths</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i data-feather="maximize" class="w-4 h-4 text-gray-400 mr-1"></i>
+                                <span class="text-sm text-gray-600">1200 sqft</span>
+                            </div>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-xl font-bold text-indigo-600">$3,200/mo</span>
+                            <button class="text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">
+                                View Details
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Property 3 -->
+                <div class="property-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
+                    <div class="relative">
+                        <img src="http://static.photos/home/640x360/103" alt="Beach House" class="w-full h-48 object-cover">
+                        <div class="absolute top-4 right-4 bg-indigo-600 text-white text-xs font-bold px-2 py-1 rounded-full">
+                            For Sale
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2">Oceanfront Beach House</h3>
+                        <div class="flex items-center text-gray-500 mb-4">
+                            <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
+                            <span>Miami, FL</span>
+                        </div>
+                        <div class="flex justify-between items-center mb-4">
+                            <div class="flex items-center">
+                                <i data-feather="home" class="w-4 h-4 text-gray-400 mr-1"></i>
+                                <span class="text-sm text-gray-600">4 Beds</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i data-feather="droplet" class="w-4 h-4 text-gray-400 mr-1"></i>
+                                <span class="text-sm text-gray-600">3 Baths</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i data-feather="maximize" class="w-4 h-4 text-gray-400 mr-1"></i>
+                                <span class="text-sm text-gray-600">2800 sqft</span>
+                            </div>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-xl font-bold text-indigo-600">$2,750,000</span>
+                            <button class="text-indigo-600 hover:text-indigo-800 font-medium transition duration-300">
+                                View Details
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="text-center mt-12">
+                <button class="bg-white hover:bg-gray-100 text-indigo-600 font-medium py-3 px-6 rounded-lg border border-indigo-600 transition duration-300 transform hover:scale-105">
+                    View All Properties
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Why Choose Us -->
+    <section id="services" class="py-16 px-4 sm:px-6 lg:px-8 bg-indigo-600 text-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">Why Choose HomeHaven?</h2>
+                <p class="text-lg text-indigo-100 max-w-2xl mx-auto">We're committed to providing exceptional service and finding your perfect property</p>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white/10 backdrop-blur-sm p-6 rounded-xl">
+                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="award" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Expert Agents</h3>
+                    <p class="text-indigo-100">Our team of experienced professionals has in-depth knowledge of the local market.</p>
+                </div>
+
+                <div class="bg-white/10 backdrop-blur-sm p-6 rounded-xl">
+                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="shield" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Trusted Service</h3>
+                    <p class="text-indigo-100">We prioritize your needs and work tirelessly to achieve your real estate goals.</p>
+                </div>
+
+                <div class="bg-white/10 backdrop-blur-sm p-6 rounded-xl">
+                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="dollar-sign" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Best Value</h3>
+                    <p class="text-indigo-100">We negotiate the best deals to ensure you get maximum value for your investment.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonials -->
+    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Clients Say</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Hear from people who found their dream home with us</p>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-50 p-6 rounded-xl">
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/200x200/101" alt="Client" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold text-gray-900">Sarah Johnson</h4>
+                            <div class="flex text-yellow-400">
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"HomeHaven made the entire home buying process smooth and stress-free. Their attention to detail and market knowledge was impressive."</p>
+                </div>
+
+                <div class="bg-gray-50 p-6 rounded-xl">
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/200x200/102" alt="Client" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold text-gray-900">Michael Chen</h4>
+                            <div class="flex text-yellow-400">
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"As a first-time home buyer, I was nervous about the process. My agent explained everything clearly and found me the perfect condo."</p>
+                </div>
+
+                <div class="bg-gray-50 p-6 rounded-xl">
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/200x200/103" alt="Client" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold text-gray-900">David Rodriguez</h4>
+                            <div class="flex text-yellow-400">
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"Sold my house above asking price in just 2 weeks! The marketing strategy and negotiation skills were outstanding."</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Meet Our Agents -->
+    <section id="agents" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-900 mb-4">Meet Our Agents</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Our experienced team is ready to help you with your real estate needs</p>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="bg-white rounded-xl overflow-hidden shadow-md text-center">
+                    <img src="http://static.photos/people/640x360/101" alt="Agent" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-1">Emily Wilson</h3>
+                        <p class="text-indigo-600 mb-4">Senior Agent</p>
+                        <div class="flex justify-center space-x-4">
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="facebook" class="w-5 h-5"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="twitter" class="w-5 h-5"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="linkedin" class="w-5 h-5"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bg-white rounded-xl overflow-hidden shadow-md text-center">
+                    <img src="http://static.photos/people/640x360/102" alt="Agent" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-1">James Peterson</h3>
+                        <p class="text-indigo-600 mb-4">Commercial Specialist</p>
+                        <div class="flex justify-center space-x-4">
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="facebook" class="w-5 h-5"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="twitter" class="w-5 h-5"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="linkedin" class="w-5 h-5"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bg-white rounded-xl overflow-hidden shadow-md text-center">
+                    <img src="http://static.photos/people/640x360/103" alt="Agent" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-1">Sophia Martinez</h3>
+                        <p class="text-indigo-600 mb-4">Luxury Homes</p>
+                        <div class="flex justify-center space-x-4">
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="facebook" class="w-5 h-5"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="twitter" class="w-5 h-5"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="linkedin" class="w-5 h-5"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bg-white rounded-xl overflow-hidden shadow-md text-center">
+                    <img src="http://static.photos/people/640x360/104" alt="Agent" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-1">Robert Kim</h3>
+                        <p class="text-indigo-600 mb-4">Investment Properties</p>
+                        <div class="flex justify-center space-x-4">
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="facebook" class="w-5 h-5"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="twitter" class="w-5 h-5"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-indigo-600 transition duration-300">
+                                <i data-feather="linkedin" class="w-5 h-5"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-indigo-700 text-white">
+        <div class="max-w-4xl mx-auto text-center">
+            <h2 class="text-3xl font-bold mb-6">Ready to Find Your Dream Home?</h2>
+            <p class="text-xl text-indigo-100 mb-8">Contact us today to schedule a consultation with one of our expert agents</p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <button class="bg-white text-indigo-700 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold text-lg transition duration-300 transform hover:scale-105">
+                    Get Started
+                </button>
+                <button class="bg-transparent hover:bg-indigo-800 text-white px-8 py-3 rounded-lg font-bold text-lg border-2 border-white transition duration-300 transform hover:scale-105">
+                    <div class="flex items-center justify-center">
+                        <i data-feather="phone" class="mr-2"></i> (555) 123-4567
+                    </div>
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Form -->
+    <section id="contact" class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="lg:grid lg:grid-cols-2 lg:gap-12">
+                <div class="mb-12 lg:mb-0">
+                    <h2 class="text-3xl font-bold text-gray-900 mb-6">Contact Us</h2>
+                    <p class="text-lg text-gray-600 mb-8">Have questions or ready to start your property search? Fill out the form and our team will get back to you promptly.</p>
+                    
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0">
+                                <i data-feather="map-pin" class="w-6 h-6 text-indigo-600 mt-1"></i>
+                            </div>
+                            <div class="ml-3">
+                                <h3 class="text-lg font-medium text-gray-900">Our Office</h3>
+                                <p class="text-gray-600">123 Real Estate Ave, Suite 200<br>New York, NY 10001</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0">
+                                <i data-feather="phone" class="w-6 h-6 text-indigo-600 mt-1"></i>
+                            </div>
+                            <div class="ml-3">
+                                <h3 class="text-lg font-medium text-gray-900">Phone</h3>
+                                <p class="text-gray-600">(555) 123-4567<br>Mon-Fri, 9am-6pm</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0">
+                                <i data-feather="mail" class="w-6 h-6 text-indigo-600 mt-1"></i>
+                            </div>
+                            <div class="ml-3">
+                                <h3 class="text-lg font-medium text-gray-900">Email</h3>
+                                <p class="text-gray-600">info@homehaven.com<br>We respond within 24 hours</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bg-gray-50 p-8 rounded-xl shadow-md">
+                    <form>
+                        <div class="grid grid-cols-1 gap-6">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
+                                <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition" required>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
+                                <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition" required>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
+                                <input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition">
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">I'm Interested In *</label>
+                                <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition" required>
+                                    <option value="">Select an option</option>
+                                    <option>Buying a Home</option>
+                                    <option>Selling a Home</option>
+                                    <option>Renting</option>
+                                    <option>Investment Property</option>
+                                    <option>Commercial Property</option>
+                                    <option>Other Inquiry</option>
+                                </select>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Message *</label>
+                                <textarea rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition resize-none" required></textarea>
+                            </div>
+                            
+                            <div>
+                                <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105">
+                                    Send Message
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <i data-feather="home" class="text-indigo-400 w-8 h-8"></i>
+                        <span class="ml-2 text-xl font-bold">HomeHaven</span>
+                    </div>
+                    <p class="text-gray-400">Finding your dream home with exceptional service and expertise.</p>
+                </div>
+                
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
+                        <li><a href="#properties" class="text-gray-400 hover:text-white transition duration-300">Properties</a></li>
+                        <li><a href="#agents" class="text-gray-400 hover:text-white transition duration-300">Agents</a></li>
+                        <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li>
+                        <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
+                    </ul>
+                </div>
+                
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Services</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Property Sales</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Property Rentals</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Investment Properties</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Property Valuation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mortgage Services</a></li>
+                    </ul>
+                </div>
+                
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Newsletter</h3>
+                    <p class="text-gray-400 mb-4">Subscribe to get updates on new properties and market trends.</p>
+                    <form class="flex">
+                        <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900">
+                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg transition duration-300">
+                            <i data-feather="send" class="w-4 h-4"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+            
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 HomeHaven Horizons. All rights reserved.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i data-feather="facebook" class="w-5 h-5"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i data-feather="twitter" class="w-5 h-5"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i data-feather="instagram" class="w-5 h-5"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i data-feather="linkedin" class="w-5 h-5"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0x111827,
+            size: 1.00
+        });
+        
+        // Initialize feather icons
+        feather.replace();
+        
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+        
+        // Mobile menu toggle would go here
+    </script>
+</body>
 </html>