Spaces:
Running
Running
| <html lang="en" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DreamKey Estates - Find Your Perfect Home</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 200: '#99f6e4', | |
| 300: '#5eead4', | |
| 400: '#2dd4bf', | |
| 500: '#14b8a6', | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| 800: '#115e59', | |
| 900: '#134e4a', | |
| }, | |
| secondary: { | |
| 50: '#fffbeb', | |
| 100: '#fef3c7', | |
| 200: '#fde68a', | |
| 300: '#fcd34d', | |
| 400: '#fbbf24', | |
| 500: '#f59e0b', | |
| 600: '#d97706', | |
| 700: '#b45309', | |
| 800: '#92400e', | |
| 900: '#78350f', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-r from-primary-500 to-primary-700 text-white py-20"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Find Your Dream Home Today</h1> | |
| <p class="text-xl mb-8">Discover properties that match your lifestyle with our expert guidance and personalized service.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#properties" class="bg-secondary-500 hover:bg-secondary-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 text-center">Browse Properties</a> | |
| <a href="#contact" class="bg-white hover:bg-gray-100 text-primary-700 font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 text-center">Contact Agent</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="http://static.photos/realestate/1200x630/1" alt="Modern home" class="rounded-xl shadow-2xl"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 bg-gray-100 dark:bg-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> | |
| <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2">1,200+</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Properties Sold</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2">98%</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Client Satisfaction</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2">15+</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Years Experience</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Properties --> | |
| <section id="properties" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Featured Properties</h2> | |
| <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Explore our hand-picked selection of premium properties in the most desirable locations.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Property Card 1 --> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/realestate/640x360/1" alt="Modern house" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800 dark:text-white">Luxury Villa</h3> | |
| <span class="bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 text-sm font-medium px-2.5 py-0.5 rounded">$1,250,000</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">123 Dream Street, Beverly Hills</p> | |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4"> | |
| <div class="flex items-center mr-4"> | |
| <i data-feather="home" class="w-4 h-4 mr-1"></i> | |
| <span>4,500 sqft</span> | |
| </div> | |
| <div class="flex items-center mr-4"> | |
| <i data-feather="grid" class="w-4 h-4 mr-1"></i> | |
| <span>5 beds</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="droplet" class="w-4 h-4 mr-1"></i> | |
| <span>3 baths</span> | |
| </div> | |
| </div> | |
| <a href="#" class="inline-flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 font-medium"> | |
| View details | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Property Card 2 --> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/realestate/640x360/2" alt="Modern apartment" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800 dark:text-white">Downtown Loft</h3> | |
| <span class="bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 text-sm font-medium px-2.5 py-0.5 rounded">$750,000</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">456 Urban Ave, New York</p> | |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4"> | |
| <div class="flex items-center mr-4"> | |
| <i data-feather="home" class="w-4 h-4 mr-1"></i> | |
| <span>2,200 sqft</span> | |
| </div> | |
| <div class="flex items-center mr-4"> | |
| <i data-feather="grid" class="w-4 h-4 mr-1"></i> | |
| <span>3 beds</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="droplet" class="w-4 h-4 mr-1"></i> | |
| <span>2 baths</span> | |
| </div> | |
| </div> | |
| <a href="#" class="inline-flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 font-medium"> | |
| View details | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Property Card 3 --> | |
| <div class="bg-white dark:bg-gray-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/realestate/640x360/3" alt="Country house" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800 dark:text-white">Country Estate</h3> | |
| <span class="bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 text-sm font-medium px-2.5 py-0.5 rounded">$2,100,000</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">789 Nature Lane, Aspen</p> | |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4"> | |
| <div class="flex items-center mr-4"> | |
| <i data-feather="home" class="w-4 h-4 mr-1"></i> | |
| <span>6,800 sqft</span> | |
| </div> | |
| <div class="flex items-center mr-4"> | |
| <i data-feather="grid" class="w-4 h-4 mr-1"></i> | |
| <span>6 beds</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="droplet" class="w-4 h-4 mr-1"></i> | |
| <span>4.5 baths</span> | |
| </div> | |
| </div> | |
| <a href="#" class="inline-flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 font-medium"> | |
| View details | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 shadow-lg transition duration-300"> | |
| View All Properties | |
| <i data-feather="chevron-right" class="w-5 h-5 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-100 dark:bg-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">What Our Clients Say</h2> | |
| <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Don't just take our word for it - hear from some of our satisfied clients.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/1" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800 dark:text-white">Sarah Johnson</h4> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">Homeowner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">"DreamKey Estates made the entire home buying process seamless. Their attention to detail and understanding of our needs was exceptional."</p> | |
| <div class="flex text-secondary-500"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/2" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800 dark:text-white">Michael Chen</h4> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">Investor</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">"As a real estate investor, I need an agency that understands the market. DreamKey's insights have helped me make profitable decisions every time."</p> | |
| <div class="flex text-secondary-500"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/3" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800 dark:text-white">Emily Rodriguez</h4> | |
| <p class="text-gray-600 dark:text-gray-300 text-sm">First-time Buyer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">"I was nervous about buying my first home, but my agent walked me through every step and found me the perfect place within my budget."</p> | |
| <div class="flex text-secondary-500"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section id="contact" class="py-20 bg-primary-700 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Find Your Dream Home?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Our team of expert agents is standing by to help you navigate the real estate market with confidence.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="tel:+15551234567" class="bg-white hover:bg-gray-100 text-primary-700 font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 flex items-center justify-center"> | |
| <i data-feather="phone" class="w-5 h-5 mr-2"></i> | |
| Call Now | |
| </a> | |
| <a href="mailto:info@dreamkeyestates.com" class="bg-secondary-500 hover:bg-secondary-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 flex items-center justify-center"> | |
| <i data-feather="mail" class="w-5 h-5 mr-2"></i> | |
| Email Us | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/nav | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |