Spaces:
Running
Running
Ctrl+K
- 1.52 kB initial commit
- 204 Bytes <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Heaven Real Estate | Lebanon Properties</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#722F37', secondary: '#1e3a8a', accent: '#f59e0b', lebanon: '#ed1c24', cedar: '#00a651', } } } } </script> <style> /* Hero Section - Adapt for Shopify sections */ .shopify-section:first-child .hero-banner { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ 'hero-image.jpg' | asset_img_url: '2000x' }}'); background-size: cover; background-position: center; min-height: 80vh; display: flex; align-items: center; } .product-grid .grid__item .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); transition: all 0.3s ease; } #shopify-section-{{ section.id }} { scroll-margin-top: 100px; padding: 5rem 0; } .shopify-section-header .header__wrapper::after { content: ''; display: block; height: 4px; background: linear-gradient(90deg, #ed1c24 33%, white 33%, white 66%, #00a651 66%); width: 100%; } /* Custom animation for property cards */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #722F37; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #5a252c; } /* Custom checkbox for contact form */ .custom-checkbox { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid #722F37; border-radius: 4px; outline: none; transition: all 0.2s; position: relative; margin-right: 10px; cursor: pointer; } .custom-checkbox:checked { background-color: #722F37; } .custom-checkbox:checked::after { content: '\2713'; position: absolute; color: white; font-size: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Button styles */ .btn, .shopify-payment-button__button { background-color: #722F37; color: white; transition: all 0.3s ease; } .btn:hover, .shopify-payment-button__button:hover { background-color: #1e3a8a; transform: translateY(-2px); } /* Form inputs */ .input-group__field, .select__select { border: 1px solid #e1e1e1; transition: border-color 0.3s ease; } .input-group__field:focus, .select__select:focus { border-color: #722F37; outline: none; } /* Responsive adjustments */ @media screen and (max-width: 749px) { .shopify-section:first-child .hero-banner { min-height: 60vh; } .grid--1-col-tablet-down .grid__item { margin-bottom: 2rem; } } {% endstyle %} <div class="font-sans bg-gray-50 scroll-smooth"> <!-- Navigation --> <nav class="bg-white shadow-lg sticky top-0 z-50 transition-all duration-300"> <div class="container mx-auto px-4"> <div class="flex justify-between items-center h-16"> <div class="flex items-center"> <div class="flex-shrink-0 flex items-center"> <i class="fas fa-home text-primary text-2xl mr-2"></i> <span class="text-xl font-bold text-primary">Heaven Real Estate</span> </div> </div> <div class="hidden md:block"> <div class="ml-10 flex items-center space-x-4"> <a href="#home" class="text-primary hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Home</a> <a href="#areas" class="text-gray-700 hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Areas</a> <a href="#featured" class="text-gray-700 hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Featured</a> <a href="#about" class="text-gray-700 hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">About</a> <a href="#contact" class="text-gray-700 hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Contact</a> </div> </div> <div class="md:hidden"> <button id="menu-btn" class="text-gray-700 hover:text-accent focus:outline-none transition-colors duration-300"> <i class="fas fa-bars text-xl"></i> </button> </div> </div> </div> <!-- Mobile menu --> <div id="mobile-menu" class="hidden md:hidden bg-white pb-3"> <div class="px-2 pt-2 space-y-1"> <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">Home</a> <a href="#areas" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">Areas</a> <a href="#featured" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">Featured</a> <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">About</a> <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">Contact</a> </div> </div> <div class="flag-stripe"></div> </nav> <!-- Hero Section --> <section id="home" class="hero h-screen flex items-center justify-center text-white relative"> <div class="absolute inset-0 bg-black opacity-40"></div> <div class="text-center px-4 z-10"> <h1 class="text-4xl md:text-6xl font-bold mb-4 animate-fade-in">Find Your Dream Home in Lebanon</h1> <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto animate-fade-in" style="animation-delay: 0.2s;">Discover premium properties across Lebanon's most desirable locations</p> <button class="bg-accent hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 animate-fade-in" style="animation-delay: 0.4s;"> Explore Properties <i class="fas fa-arrow-right ml-2"></i> </button> </div> <div class="absolute bottom-8 left-0 right-0 flex justify-center"> <a href="#featured" class="text-white animate-bounce"> <i class="fas fa-chevron-down text-2xl"></i> </a> </div> </section> <!-- Quick Search --> <section class="bg-white py-8 shadow-md -mt-20 mx-4 md:mx-8 rounded-lg relative z-10 transform transition-all duration-500"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> <div class="relative"> <select class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-accent transition-colors duration-300"> <option>Select Area</option> <option>Beirut</option> <option>Jounieh</option> <option>Byblos</option> <option>Batroun</option> <option>Zahle</option> <option>Baabda</option> <option>Mount Lebanon</option> <option>South Lebanon</option> <option>North Lebanon</option> <option>Bekaa Valley</option> </select> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> <i class="fas fa-chevron-down"></i> </div> </div> <div class="relative"> <select class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-accent transition-colors duration-300"> <option>Property Type</option> <option>Apartment</option> <option>Villa</option> <option>Office</option> <option>Land</option> <option>Commercial</option> </select> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> <i class="fas fa-chevron-down"></i> </div> </div> <div class="relative"> <select class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-accent transition-colors duration-300"> <option>Price Range</option> <option>$100,000 - $200,000</option> <option>$200,000 - $500,000</option> <option>$500,000 - $1,000,000</option> <option>$1,000,000+</option> </select> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> <i class="fas fa-chevron-down"></i> </div> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-3 px-6 rounded transition duration-300 flex items-center justify-center transform hover:scale-105"> <i class="fas fa-search mr-2"></i> Search </button> </div> </div> </section> <!-- Featured Properties --> <section id="featured" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Featured Properties</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Discover our selection of premium properties across Lebanon</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-lg overflow-hidden shadow-md transition duration-500"> <div class="relative"> <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern Apartment in Beirut" class="w-full h-64 object-cover"> <div class="absolute top-4 right-4 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full">NEW</div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> <span class="text-white font-bold">Beirut, Downtown</span> </div> <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-accent to-secondary"></div> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Luxury Apartment with Sea View</h3> <p class="text-gray-600 mb-4">Modern 3-bedroom apartment with panoramic views of the Mediterranean.</p> <div class="flex justify-between items-center"> <span class="text-primary font-bold text-xl">$850,000</span> <div class="flex space-x-2"> <span class="text-gray-600"><i class="fas fa-bed mr-1"></i> 3</span> <span class="text-gray-600"><i class="fas fa-bath mr-1"></i> 2</span> <span class="text-gray-600"><i class="fas fa-vector-square mr-1"></i> 180m²</span> </div> </div> </div> <div class="px-6 pb-6"> <button class="w-full bg-primary hover:bg-secondary text-white font-bold py-2 px-4 rounded transition duration-300"> View Details </button> </div> </div> <!-- Property 2 --> <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500"> <div class="relative"> <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Villa in Jounieh" class="w-full h-64 object-cover"> <div class="absolute top-4 right-4 bg-accent text-white text-xs font-bold px-3 py-1 rounded-full">FEATURED</div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> <span class="text-white font-bold">Jounieh, Keserwan</span> </div> <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-accent to-secondary"></div> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Hillside Villa with Private Pool</h3> <p class="text-gray-600 mb-4">Spacious 5-bedroom villa with stunning views and lush gardens.</p> <div class="flex justify-between items-center"> <span class="text-primary font-bold text-xl">$1,250,000</span> <div class="flex space-x-2"> <span class="text-gray-600"><i class="fas fa-bed mr-1"></i> 5</span> <span class="text-gray-600"><i class="fas fa-bath mr-1"></i> 4</span> <span class="text-gray-600"><i class="fas fa-vector-square mr-1"></i> 420m²</span> </div> </div> </div> <div class="px-6 pb-6"> <button class="w-full bg-primary hover:bg-secondary text-white font-bold py-2 px-4 rounded transition duration-300"> View Details </button> </div> </div> <!-- Property 3 --> <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500"> <div class="relative"> <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Traditional House in Byblos" class="w-full h-64 object-cover"> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> <span class="text-white font-bold">Byblos, Mount Lebanon</span> </div> <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-accent to-secondary"></div> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Traditional Lebanese House</h3> <p class="text-gray-600 mb-4">Charming 4-bedroom house with authentic architecture near the old souks.</p> <div class="flex justify-between items-center"> <span class="text-primary font-bold text-xl">$650,000</span> <div class="flex space-x-2"> <span class="text-gray-600"><i class="fas fa-bed mr-1"></i> 4</span> <span class="text-gray-600"><i class="fas fa-bath mr-1"></i> 3</span> <span class="text-gray-600"><i class="fas fa-vector-square mr-1"></i> 280m²</span> </div> </div> </div> <div class="px-6 pb-6"> <button class="w-full bg-primary hover:bg-secondary text-white font-bold py-2 px-4 rounded transition duration-300"> View Details </button> </div> </div> </div> <div class="text-center mt-12"> <button class="bg-white hover:bg-gray-100 text-primary border border-primary font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> View All Properties <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> </section> <!-- Areas of Lebanon --> <section id="areas" class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Explore Lebanon's Regions</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Discover properties in Lebanon's most sought-after locations</p> </div> <!-- Beirut Section --> <div id="beirut" class="area-section mb-16"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Beirut</h3> <p class="text-gray-600 mb-4">The vibrant capital of Lebanon, Beirut offers a unique blend of modern living and rich history. From luxury apartments in Downtown to charming homes in Ashrafieh, find your perfect property in the heart of Lebanon.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Downtown</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Ashrafieh</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Hamra</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Verdun</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Manara</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View Beirut Properties </button> </div> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Beirut Skyline" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-city text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Urban Living</h4> </div> <p class="text-gray-600">Modern apartments with premium amenities in the heart of the city.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-umbrella-beach text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Seafront Properties</h4> </div> <p class="text-gray-600">Exclusive residences with stunning Mediterranean views.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-history text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Historic Homes</h4> </div> <p class="text-gray-600">Charming traditional houses in Beirut's historic neighborhoods.</p> </div> </div> </div> <!-- Mount Lebanon Section --> <div id="mount-lebanon" class="area-section mb-16"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8 order-2 md:order-1"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Mount Lebanon</h3> <p class="text-gray-600 mb-4">The mountainous region surrounding Beirut offers cooler climates, stunning views, and luxurious properties. From modern villas to traditional mountain homes, find your retreat in Lebanon's green heart.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Broumana</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Baabda</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Aley</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Bhamdoun</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Dhour El Choueir</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View Mount Lebanon Properties </button> </div> <div class="md:w-1/2 order-1 md:order-2"> <img src="https://images.unsplash.com/photo-1601918774946-25832a4be0d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mount Lebanon" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-mountain text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Mountain Villas</h4> </div> <p class="text-gray-600">Luxurious properties with panoramic mountain views.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-tree text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Forest Retreats</h4> </div> <p class="text-gray-600">Secluded homes surrounded by Lebanon's famous cedar forests.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-snowflake text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Ski Residences</h4> </div> <p class="text-gray-600">Chalets and apartments near Lebanon's premier ski resorts.</p> </div> </div> </div> <!-- North Lebanon Section --> <div id="north-lebanon" class="area-section mb-16"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> <h3 class="text-2xl font-bold text-gray-800 mb-4">North Lebanon</h3> <p class="text-gray-600 mb-4">From the historic city of Tripoli to the coastal charm of Batroun and the ancient wonders of Byblos, North Lebanon offers diverse property options with rich cultural heritage and beautiful landscapes.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Tripoli</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Byblos</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Batroun</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Chekka</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Zgharta</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View North Lebanon Properties </button> </div> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1583422403306-45435d1c27a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Byblos Harbor" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-archway text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Historic Properties</h4> </div> <p class="text-gray-600">Homes in Lebanon's most ancient and culturally rich cities.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-water text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Beachfront Homes</h4> </div> <p class="text-gray-600">Seaside villas and apartments along Lebanon's northern coast.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-wine-glass-alt text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Vineyard Estates</h4> </div> <p class="text-gray-600">Country homes surrounded by Lebanon's famous vineyards.</p> </div> </div> </div> <!-- South Lebanon Section --> <div id="south-lebanon" class="area-section mb-16"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8 order-2 md:order-1"> <h3 class="text-2xl font-bold text-gray-800 mb-4">South Lebanon</h3> <p class="text-gray-600 mb-4">From the coastal city of Tyre to the agricultural lands of Nabatieh, South Lebanon offers affordable property options with beautiful landscapes and rich history.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Tyre</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Sidon</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Nabatieh</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Jezzine</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Marjayoun</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View South Lebanon Properties </button> </div> <div class="md:w-1/2 order-1 md:order-2"> <img src="https://images.unsplash.com/photo-1603468621775-18c0106355f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Tyre Coast" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-fish text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Fishing Villages</h4> </div> <p class="text-gray-600">Charming homes in traditional coastal fishing communities.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-tractor text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Farmland</h4> </div> <p class="text-gray-600">Agricultural properties with fertile land in Lebanon's south.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-umbrella-beach text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Beach Properties</h4> </div> <p class="text-gray-600">Affordable seaside homes along Lebanon's southern coast.</p> </div> </div> </div> <!-- Bekaa Valley Section --> <div id="bekaa-valley" class="area-section"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Bekaa Valley</h3> <p class="text-gray-600 mb-4">Lebanon's agricultural heartland offers spacious properties at affordable prices. From vineyard estates to traditional village homes, discover the rural charm of the Bekaa Valley.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Zahle</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Baalbek</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Anjar</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Chtaura</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Rayak</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View Bekaa Valley Properties </button> </div> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bekaa Valley Vineyards" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-wine-bottle text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Wineries</h4> </div> <p class="text-gray-600">Vineyard estates in Lebanon's famous wine-producing region.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-home text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Village Homes</h4> </div> <p class="text-gray-600">Traditional houses in Bekaa's charming rural villages.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-landmark text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Historic Sites</h4> </div> <p class="text-gray-600">Properties near Lebanon's most significant Roman ruins.</p> </div> </div> </div> </div> </section> <!-- Why Choose Us --> <section class="py-16 bg-primary text-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold mb-2">Why Choose Heaven Real Estate?</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-medal text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">20+ Years Experience</h3> <p class="opacity-90">With over two decades in the Lebanese real estate market, we have unmatched local knowledge and expertise.</p> </div> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-hand-holding-usd text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">Best Value Guarantee</h3> <p class="opacity-90">We negotiate the best prices for our clients, ensuring you get maximum value for your investment.</p> </div> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-headset text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">24/7 Support</h3> <p class="opacity-90">Our dedicated team is available around the clock to assist you with all your real estate needs.</p> </div> </div> <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-globe text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">International Network</h3> <p class="opacity-90">Connections with buyers and investors worldwide looking for Lebanese properties.</p> </div> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-lock text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">Secure Transactions</h3> <p class="opacity-90">We ensure all legal and financial aspects of your property transaction are handled securely.</p> </div> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-map-marked-alt text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">Area Specialists</h3> <p class="opacity-90">Our agents specialize in specific regions of Lebanon for in-depth local expertise.</p> </div> </div> </div> </section> <!-- Testimonials --> <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">What Our Clients Say</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-500"> <div class="flex items-center mb-4"> <div class="text-accent text-2xl mr-2">"</div> <p class="text-gray-600 italic">Heaven Real Estate found me the perfect apartment in Beirut. Their knowledge of the local market is unparalleled.</p> </div> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah T." class="w-12 h-12 rounded-full mr-4 object-cover"> <div> <h4 class="font-bold text-gray-800">Sarah T.</h4> <p class="text-gray-500 text-sm">Beirut Homeowner</p> <div class="flex mt-1 text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-500"> <div class="flex items-center mb-4"> <div class="text-accent text-2xl mr-2">"</div> <p class="text-gray-600 italic">As an expat, I was nervous about buying property in Lebanon. The team guided me through every step with professionalism.</p> </div> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark J." class="w-12 h-12 rounded-full mr-4 object-cover"> <div> <h4 class="font-bold text-gray-800">Mark J.</h4> <p class="text-gray-500 text-sm">Villa Owner, Jounieh</p> <div class="flex mt-1 text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-500"> <div class="flex items-center mb-4"> <div class="text-accent text-2xl mr-2">"</div> <p class="text-gray-600 italic">They sold my family home in Byblos for 15% above market price. I couldn't be happier with their service.</p> </div> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Layla K." class="w-12 h-12 rounded-full mr-4 object-cover"> <div> <h4 class="font-bold text-gray-800">Layla K.</h4> <p class="text-gray-500 text-sm">Byblos Property Seller</p> <div class="flex mt-1 text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> </div> </div> </div> <div class="text-center mt-12"> <button class="bg-primary hover:bg-secondary text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> Read More Testimonials </button> </div> </div> </section> <!-- About Section --> <section id="about" class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">About Heaven Real Estate</h2> <div class="w-20 h-1 bg-accent mb-6"></div> <p class="text-gray-600 mb-4">Founded in 2000, Heaven Real Estate has grown to become one of Lebanon's most trusted real estate agencies. With offices in Beirut, Jounieh, and Zahle, we serve clients across the country.</p> <p class="text-gray-600 mb-6">Our team of multilingual professionals combines international standards with deep local market knowledge to deliver exceptional service to both Lebanese and international clients.</p> <div class="flex flex-wrap gap-4 mb-8"> <div class="flex items-center"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-check text-primary"></i> </div> <span class="text-gray-700 font-medium">500+ Properties</span> </div> <div class="flex items-center"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-check text-primary"></i> </div> <span class="text-gray-700 font-medium">95% Satisfaction</span> </div> <div class="flex items-center"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-check text-primary"></i> </div> <span class="text-gray-700 font-medium">Bilingual Staff</span> </div> <div class="flex items-center"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-check text-primary"></i> </div> <span class="text-gray-700 font-medium">Legal Expertise</span> </div> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> Learn More About Us </button> </div> <div class="md:w-1/2"> <div class="relative"> <img src="https://images.unsplash.com/photo-1600880292203-75704362ea4c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Our Team" class="w-full rounded-lg shadow-lg hover:shadow-xl transition duration-500"> <div class="absolute -bottom-6 -right-6 bg-primary text-white p-6 rounded-lg shadow-lg w-2/3 hover:shadow-xl transition duration-500"> <h3 class="font-bold text-lg mb-2">Our Mission</h3> <p class="text-sm opacity-90">To help clients find their perfect property in Lebanon through integrity, expertise, and personalized service.</p> </div> </div> </div> </div> <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-4 rounded-full mr-4"> <i class="fas fa-bullseye text-primary text-xl"></i> </div> <h3 class="text-xl font-bold text-gray-800">Our Vision</h3> </div> <p class="text-gray-600">To be Lebanon's most trusted real estate partner, recognized for our commitment to excellence and client satisfaction.</p> </div> <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-4 rounded-full mr-4"> <i class="fas fa-users text-primary text-xl"></i> </div> <h3 class="text-xl font-bold text-gray-800">Our Team</h3> </div> <p class="text-gray-600">A diverse team of experienced professionals with deep knowledge of Lebanon's real estate market and cultural nuances.</p> </div> <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-4 rounded-full mr-4"> <i class="fas fa-handshake text-primary text-xl"></i> </div> <h3 class="text-xl font-bold text-gray-800">Our Values</h3> </div> <p class="text-gray-600">Integrity, transparency, and client-first approach guide every decision we make in serving your real estate needs.</p> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Contact Us</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Get in touch with our team for personalized assistance</p> </div> <div class="flex flex-col md:flex-row"> <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> <div class="bg-white p-8 rounded-lg shadow-md h-full hover:shadow-lg transition duration-500"> <h3 class="text-xl font-bold text-gray-800 mb-6">Our Offices</h3> <div class="mb-8"> <h4 class="font-bold text-gray-700 mb-3 flex items-center"> <i class="fas fa-map-marker-alt text-primary mr-2"></i> Beirut Headquarters </h4> <p class="text-gray-600 mb-2">123 Marina Tower, Downtown Beirut</p> <p class="text-gray-600">+961 1 123 456</p> </div> <div class="mb-8"> <h4 class="font-bold text-gray-700 mb-3 flex items-center"> <i class="fas fa-map-marker-alt text-primary mr-2"></i> Jounieh Office </h4> <p class="text-gray-600 mb-2">45 Seaside Road, Jounieh</p> <p class="text-gray-600">+961 9 987 654</p> </div> <div class="mb-8"> <h4 class="font-bold text-gray-700 mb-3 flex items-center"> <i class="fas fa-map-marker-alt text-primary mr-2"></i> Zahle Office </h4> <p class="text-gray-600 mb-2">12 Chtaura Highway, Zahle</p> <p class="text-gray-600">+961 8 456 789</p> </div> <div> <h4 class="font-bold text-gray-700 mb-3">Email Us</h4> <p class="text-gray-600">info@heavenrealestate.com</p> </div> <div class="mt-8"> <h4 class="font-bold text-gray-700 mb-3">Opening Hours</h4> <p class="text-gray-600 mb-1">Monday - Friday: 9:00 AM - 6:00 PM</p> <p class="text-gray-600">Saturday: 10:00 AM - 4:00 PM</p> </div> </div> </div> <div class="md:w-1/2"> <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-500"> <h3 class="text-xl font-bold text-gray-800 mb-6">Send Us a Message</h3> <form> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label> <input class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="name" type="text" placeholder="Your name"> </div> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email</label> <input class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="email" type="email" placeholder="Your email"> </div> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">Phone</label> <input class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="phone" type="tel" placeholder="Your phone number"> </div> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="subject">Subject</label> <select class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="subject"> <option>Select a subject</option> <option>Property Inquiry</option> <option>Valuation Request</option> <option>General Question</option> <option>Career Opportunity</option> </select> </div> <div class="mb-6"> <label class="block text-gray-700 text-sm font-bold mb-2" for="message">Message</label> <textarea class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="message" rows="5" placeholder="Your message"></textarea> </div> <div class="mb-6 flex items-center"> <input type="checkbox" id="newsletter" class="custom-checkbox"> <label for="newsletter" class="text-gray-700 text-sm">Subscribe to our newsletter for updates</label> </div> <div class="flex items-center justify-between"> <button class="bg-primary hover:bg-secondary text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105" type="button"> Send Message <i class="fas fa-paper-plane ml-2"></i> </button> </div> </form> </div> </div> </div> </div> </section> <!-- Newsletter --> <section class="py-12 bg-primary text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-2xl md:text-3xl font-bold mb-4">Subscribe to Our Newsletter</h2> <p class="mb-6 max-w-2xl mx-auto opacity-90">Stay updated with the latest property listings, market trends, and exclusive offers in Lebanon.</p> <div class="max-w-md mx-auto flex"> <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-full focus:outline-none text-gray-800"> <button class="bg-accent hover:bg-yellow-600 text-white font-bold px-6 py-3 rounded-r-full transition duration-300 transform hover:scale-105"> Subscribe </button> </div> </div> </section> <!-- Map Section --> <div class="h-96 w-full"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13293.14007590841!2d35.495483!3d33.888893!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151f17215880a78f%3A0x729182bae99836b4!2sBeirut%2C%20Lebanon!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> <!-- Footer --> <footer class="bg-gray-900 text-white pt-12 pb-6"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> <div> <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-home text-primary mr-2"></i> Heaven Real Estate </h3> <p class="text-gray-400 mb-4">Your trusted partner for premium properties across Lebanon.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-instagram"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-linkedin-in"></i> </a> </div> </div> <div> <h3 class="text-lg font-bold mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> <li><a href="#areas" class="text-gray-400 hover:text-white transition duration-300">Areas</a></li> <li><a href="#featured" class="text-gray-400 hover:text-white transition duration-300">Featured Properties</a></li> <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</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">Lebanon Areas</h3> <ul class="space-y-2"> <li><a href="#beirut" class="text-gray-400 hover:text-white transition duration-300">Beirut</a></li> <li><a href="#mount-lebanon" class="text-gray-400 hover:text-white transition duration-300">Mount Lebanon</a></li> <li><a href="#north-lebanon" class="text-gray-400 hover:text-white transition duration-300">North Lebanon</a></li> <li><a href="#south-lebanon" class="text-gray-400 hover:text-white transition duration-300">South Lebanon</a></li> <li><a href="#bekaa-valley" class="text-gray-400 hover:text-white transition duration-300">Bekaa Valley</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-4">Contact Info</h3> <ul class="space-y-2 text-gray-400"> <li class="flex items-start"> <i class="fas fa-map-marker-alt text-primary mr-2 mt-1"></i> <span>123 Marina Tower, Downtown Beirut, Lebanon</span> </li> <li class="flex items-center"> <i class="fas fa-phone-alt text-primary mr-2"></i> <span>+961 1 123 456</span> </li> <li class="flex items-center"> <i class="fas fa-envelope text-primary mr-2"></i> <span>info@heavenrealestate.com</span> </li> <li class="flex items-center"> <i class="fas fa-clock text-primary mr-2"></i> <span>Mon-Fri: 9AM - 6PM</span> </li> </ul> </div> </div> <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-400 mb-4 md:mb-0">© 2023 Heaven Real Estate. All rights reserved.</p> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Privacy Policy</a> <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Terms of Service</a> <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Sitemap</a> </div> </div> </div> </footer> <!-- Back to Top Button --> <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> <i class="fas fa-arrow-up"></i> </button> <script> // Mobile menu toggle const menuBtn = document.getElementById('menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); menuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); // Close mobile menu if open if (!mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); } } }); }); // Add shadow to navbar on scroll window.addEventListener('scroll', function() { const nav = document.querySelector('nav'); if (window.scrollY > 10) { nav.classList.add('shadow-lg'); } else { nav.classList.remove('shadow-lg'); } // Back to top button visibility const backToTopBtn = document.getElementById('back-to-top'); if (window.scrollY > 300) { backToTopBtn.classList.remove('opacity-0', 'invisible'); backToTopBtn.classList.add('opacity-100', 'visible'); } else { backToTopBtn.classList.remove('opacity-100', 'visible'); backToTopBtn.classList.add('opacity-0', 'invisible'); } }); // Back to top button functionality document.getElementById('back-to-top').addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Animate elements when they come into view const animateOnScroll = function() { const elements = document.querySelectorAll('.animate-fade-in'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.2; if (elementPosition < screenPosition) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); }; window.addEventListener('scroll', animateOnScroll </body> </html> - Initial Deployment
- 25.7 kB <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Heaven Real Estate | Lebanon Properties</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#722F37', secondary: '#1e3a8a', accent: '#f59e0b', lebanon: '#ed1c24', cedar: '#00a651', } } } } </script> <style> /* Hero Section - Adapt for Shopify sections */ .shopify-section:first-child .hero-banner { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ 'hero-image.jpg' | asset_img_url: '2000x' }}'); background-size: cover; background-position: center; min-height: 80vh; display: flex; align-items: center; } .product-grid .grid__item .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); transition: all 0.3s ease; } #shopify-section-{{ section.id }} { scroll-margin-top: 100px; padding: 5rem 0; } .shopify-section-header .header__wrapper::after { content: ''; display: block; height: 4px; background: linear-gradient(90deg, #ed1c24 33%, white 33%, white 66%, #00a651 66%); width: 100%; } /* Custom animation for property cards */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #722F37; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #5a252c; } /* Custom checkbox for contact form */ .custom-checkbox { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid #722F37; border-radius: 4px; outline: none; transition: all 0.2s; position: relative; margin-right: 10px; cursor: pointer; } .custom-checkbox:checked { background-color: #722F37; } .custom-checkbox:checked::after { content: '\2713'; position: absolute; color: white; font-size: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Button styles */ .btn, .shopify-payment-button__button { background-color: #722F37; color: white; transition: all 0.3s ease; } .btn:hover, .shopify-payment-button__button:hover { background-color: #1e3a8a; transform: translateY(-2px); } /* Form inputs */ .input-group__field, .select__select { border: 1px solid #e1e1e1; transition: border-color 0.3s ease; } .input-group__field:focus, .select__select:focus { border-color: #722F37; outline: none; } /* Responsive adjustments */ @media screen and (max-width: 749px) { .shopify-section:first-child .hero-banner { min-height: 60vh; } .grid--1-col-tablet-down .grid__item { margin-bottom: 2rem; } } {% endstyle %} <div class="font-sans bg-gray-50 scroll-smooth"> <!-- Navigation --> <nav class="bg-white shadow-lg sticky top-0 z-50 transition-all duration-300"> <div class="container mx-auto px-4"> <div class="flex justify-between items-center h-16"> <div class="flex items-center"> <div class="flex-shrink-0 flex items-center"> <i class="fas fa-home text-primary text-2xl mr-2"></i> <span class="text-xl font-bold text-primary">Heaven Real Estate</span> </div> </div> <div class="hidden md:block"> <div class="ml-10 flex items-center space-x-4"> <a href="#home" class="text-primary hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Home</a> <a href="#areas" class="text-gray-700 hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Areas</a> <a href="#featured" class="text-gray-700 hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Featured</a> <a href="#about" class="text-gray-700 hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">About</a> <a href="#contact" class="text-gray-700 hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Contact</a> </div> </div> <div class="md:hidden"> <button id="menu-btn" class="text-gray-700 hover:text-accent focus:outline-none transition-colors duration-300"> <i class="fas fa-bars text-xl"></i> </button> </div> </div> </div> <!-- Mobile menu --> <div id="mobile-menu" class="hidden md:hidden bg-white pb-3"> <div class="px-2 pt-2 space-y-1"> <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">Home</a> <a href="#areas" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">Areas</a> <a href="#featured" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">Featured</a> <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">About</a> <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent hover:bg-gray-100 transition-colors duration-300">Contact</a> </div> </div> <div class="flag-stripe"></div> </nav> <!-- Hero Section --> <section id="home" class="hero h-screen flex items-center justify-center text-white relative"> <div class="absolute inset-0 bg-black opacity-40"></div> <div class="text-center px-4 z-10"> <h1 class="text-4xl md:text-6xl font-bold mb-4 animate-fade-in">Find Your Dream Home in Lebanon</h1> <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto animate-fade-in" style="animation-delay: 0.2s;">Discover premium properties across Lebanon's most desirable locations</p> <button class="bg-accent hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 animate-fade-in" style="animation-delay: 0.4s;"> Explore Properties <i class="fas fa-arrow-right ml-2"></i> </button> </div> <div class="absolute bottom-8 left-0 right-0 flex justify-center"> <a href="#featured" class="text-white animate-bounce"> <i class="fas fa-chevron-down text-2xl"></i> </a> </div> </section> <!-- Quick Search --> <section class="bg-white py-8 shadow-md -mt-20 mx-4 md:mx-8 rounded-lg relative z-10 transform transition-all duration-500"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> <div class="relative"> <select class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-accent transition-colors duration-300"> <option>Select Area</option> <option>Beirut</option> <option>Jounieh</option> <option>Byblos</option> <option>Batroun</option> <option>Zahle</option> <option>Baabda</option> <option>Mount Lebanon</option> <option>South Lebanon</option> <option>North Lebanon</option> <option>Bekaa Valley</option> </select> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> <i class="fas fa-chevron-down"></i> </div> </div> <div class="relative"> <select class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-accent transition-colors duration-300"> <option>Property Type</option> <option>Apartment</option> <option>Villa</option> <option>Office</option> <option>Land</option> <option>Commercial</option> </select> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> <i class="fas fa-chevron-down"></i> </div> </div> <div class="relative"> <select class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-accent transition-colors duration-300"> <option>Price Range</option> <option>$100,000 - $200,000</option> <option>$200,000 - $500,000</option> <option>$500,000 - $1,000,000</option> <option>$1,000,000+</option> </select> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> <i class="fas fa-chevron-down"></i> </div> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-3 px-6 rounded transition duration-300 flex items-center justify-center transform hover:scale-105"> <i class="fas fa-search mr-2"></i> Search </button> </div> </div> </section> <!-- Featured Properties --> <section id="featured" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Featured Properties</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Discover our selection of premium properties across Lebanon</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-lg overflow-hidden shadow-md transition duration-500"> <div class="relative"> <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern Apartment in Beirut" class="w-full h-64 object-cover"> <div class="absolute top-4 right-4 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full">NEW</div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> <span class="text-white font-bold">Beirut, Downtown</span> </div> <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-accent to-secondary"></div> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Luxury Apartment with Sea View</h3> <p class="text-gray-600 mb-4">Modern 3-bedroom apartment with panoramic views of the Mediterranean.</p> <div class="flex justify-between items-center"> <span class="text-primary font-bold text-xl">$850,000</span> <div class="flex space-x-2"> <span class="text-gray-600"><i class="fas fa-bed mr-1"></i> 3</span> <span class="text-gray-600"><i class="fas fa-bath mr-1"></i> 2</span> <span class="text-gray-600"><i class="fas fa-vector-square mr-1"></i> 180m²</span> </div> </div> </div> <div class="px-6 pb-6"> <button class="w-full bg-primary hover:bg-secondary text-white font-bold py-2 px-4 rounded transition duration-300"> View Details </button> </div> </div> <!-- Property 2 --> <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500"> <div class="relative"> <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Villa in Jounieh" class="w-full h-64 object-cover"> <div class="absolute top-4 right-4 bg-accent text-white text-xs font-bold px-3 py-1 rounded-full">FEATURED</div> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> <span class="text-white font-bold">Jounieh, Keserwan</span> </div> <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-accent to-secondary"></div> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Hillside Villa with Private Pool</h3> <p class="text-gray-600 mb-4">Spacious 5-bedroom villa with stunning views and lush gardens.</p> <div class="flex justify-between items-center"> <span class="text-primary font-bold text-xl">$1,250,000</span> <div class="flex space-x-2"> <span class="text-gray-600"><i class="fas fa-bed mr-1"></i> 5</span> <span class="text-gray-600"><i class="fas fa-bath mr-1"></i> 4</span> <span class="text-gray-600"><i class="fas fa-vector-square mr-1"></i> 420m²</span> </div> </div> </div> <div class="px-6 pb-6"> <button class="w-full bg-primary hover:bg-secondary text-white font-bold py-2 px-4 rounded transition duration-300"> View Details </button> </div> </div> <!-- Property 3 --> <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-500"> <div class="relative"> <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Traditional House in Byblos" class="w-full h-64 object-cover"> <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> <span class="text-white font-bold">Byblos, Mount Lebanon</span> </div> <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-accent to-secondary"></div> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Traditional Lebanese House</h3> <p class="text-gray-600 mb-4">Charming 4-bedroom house with authentic architecture near the old souks.</p> <div class="flex justify-between items-center"> <span class="text-primary font-bold text-xl">$650,000</span> <div class="flex space-x-2"> <span class="text-gray-600"><i class="fas fa-bed mr-1"></i> 4</span> <span class="text-gray-600"><i class="fas fa-bath mr-1"></i> 3</span> <span class="text-gray-600"><i class="fas fa-vector-square mr-1"></i> 280m²</span> </div> </div> </div> <div class="px-6 pb-6"> <button class="w-full bg-primary hover:bg-secondary text-white font-bold py-2 px-4 rounded transition duration-300"> View Details </button> </div> </div> </div> <div class="text-center mt-12"> <button class="bg-white hover:bg-gray-100 text-primary border border-primary font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> View All Properties <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> </section> <!-- Areas of Lebanon --> <section id="areas" class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Explore Lebanon's Regions</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Discover properties in Lebanon's most sought-after locations</p> </div> <!-- Beirut Section --> <div id="beirut" class="area-section mb-16"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Beirut</h3> <p class="text-gray-600 mb-4">The vibrant capital of Lebanon, Beirut offers a unique blend of modern living and rich history. From luxury apartments in Downtown to charming homes in Ashrafieh, find your perfect property in the heart of Lebanon.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Downtown</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Ashrafieh</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Hamra</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Verdun</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Manara</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View Beirut Properties </button> </div> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Beirut Skyline" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-city text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Urban Living</h4> </div> <p class="text-gray-600">Modern apartments with premium amenities in the heart of the city.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-umbrella-beach text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Seafront Properties</h4> </div> <p class="text-gray-600">Exclusive residences with stunning Mediterranean views.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-history text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Historic Homes</h4> </div> <p class="text-gray-600">Charming traditional houses in Beirut's historic neighborhoods.</p> </div> </div> </div> <!-- Mount Lebanon Section --> <div id="mount-lebanon" class="area-section mb-16"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8 order-2 md:order-1"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Mount Lebanon</h3> <p class="text-gray-600 mb-4">The mountainous region surrounding Beirut offers cooler climates, stunning views, and luxurious properties. From modern villas to traditional mountain homes, find your retreat in Lebanon's green heart.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Broumana</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Baabda</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Aley</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Bhamdoun</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Dhour El Choueir</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View Mount Lebanon Properties </button> </div> <div class="md:w-1/2 order-1 md:order-2"> <img src="https://images.unsplash.com/photo-1601918774946-25832a4be0d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mount Lebanon" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-mountain text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Mountain Villas</h4> </div> <p class="text-gray-600">Luxurious properties with panoramic mountain views.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-tree text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Forest Retreats</h4> </div> <p class="text-gray-600">Secluded homes surrounded by Lebanon's famous cedar forests.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-snowflake text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Ski Residences</h4> </div> <p class="text-gray-600">Chalets and apartments near Lebanon's premier ski resorts.</p> </div> </div> </div> <!-- North Lebanon Section --> <div id="north-lebanon" class="area-section mb-16"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> <h3 class="text-2xl font-bold text-gray-800 mb-4">North Lebanon</h3> <p class="text-gray-600 mb-4">From the historic city of Tripoli to the coastal charm of Batroun and the ancient wonders of Byblos, North Lebanon offers diverse property options with rich cultural heritage and beautiful landscapes.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Tripoli</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Byblos</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Batroun</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Chekka</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Zgharta</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View North Lebanon Properties </button> </div> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1583422403306-45435d1c27a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Byblos Harbor" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-archway text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Historic Properties</h4> </div> <p class="text-gray-600">Homes in Lebanon's most ancient and culturally rich cities.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-water text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Beachfront Homes</h4> </div> <p class="text-gray-600">Seaside villas and apartments along Lebanon's northern coast.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-wine-glass-alt text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Vineyard Estates</h4> </div> <p class="text-gray-600">Country homes surrounded by Lebanon's famous vineyards.</p> </div> </div> </div> <!-- South Lebanon Section --> <div id="south-lebanon" class="area-section mb-16"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8 order-2 md:order-1"> <h3 class="text-2xl font-bold text-gray-800 mb-4">South Lebanon</h3> <p class="text-gray-600 mb-4">From the coastal city of Tyre to the agricultural lands of Nabatieh, South Lebanon offers affordable property options with beautiful landscapes and rich history.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Tyre</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Sidon</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Nabatieh</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Jezzine</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Marjayoun</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View South Lebanon Properties </button> </div> <div class="md:w-1/2 order-1 md:order-2"> <img src="https://images.unsplash.com/photo-1603468621775-18c0106355f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Tyre Coast" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-fish text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Fishing Villages</h4> </div> <p class="text-gray-600">Charming homes in traditional coastal fishing communities.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-tractor text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Farmland</h4> </div> <p class="text-gray-600">Agricultural properties with fertile land in Lebanon's south.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-umbrella-beach text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Beach Properties</h4> </div> <p class="text-gray-600">Affordable seaside homes along Lebanon's southern coast.</p> </div> </div> </div> <!-- Bekaa Valley Section --> <div id="bekaa-valley" class="area-section"> <div class="flex flex-col md:flex-row items-center mb-8"> <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Bekaa Valley</h3> <p class="text-gray-600 mb-4">Lebanon's agricultural heartland offers spacious properties at affordable prices. From vineyard estates to traditional village homes, discover the rural charm of the Bekaa Valley.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Zahle</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Baalbek</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Anjar</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Chtaura</span> <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Rayak</span> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-2 px-6 rounded transition duration-300 transform hover:scale-105"> View Bekaa Valley Properties </button> </div> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1559181567-c3190ca9959b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bekaa Valley Vineyards" class="w-full h-64 md:h-80 object-cover rounded-lg shadow-md hover:shadow-lg transition duration-500"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-wine-bottle text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Wineries</h4> </div> <p class="text-gray-600">Vineyard estates in Lebanon's famous wine-producing region.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-home text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Village Homes</h4> </div> <p class="text-gray-600">Traditional houses in Bekaa's charming rural villages.</p> </div> <div class="bg-gray-50 p-6 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-landmark text-primary text-xl"></i> </div> <h4 class="font-bold text-gray-800">Historic Sites</h4> </div> <p class="text-gray-600">Properties near Lebanon's most significant Roman ruins.</p> </div> </div> </div> </div> </section> <!-- Why Choose Us --> <section class="py-16 bg-primary text-white"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold mb-2">Why Choose Heaven Real Estate?</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-medal text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">20+ Years Experience</h3> <p class="opacity-90">With over two decades in the Lebanese real estate market, we have unmatched local knowledge and expertise.</p> </div> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-hand-holding-usd text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">Best Value Guarantee</h3> <p class="opacity-90">We negotiate the best prices for our clients, ensuring you get maximum value for your investment.</p> </div> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-headset text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">24/7 Support</h3> <p class="opacity-90">Our dedicated team is available around the clock to assist you with all your real estate needs.</p> </div> </div> <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-globe text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">International Network</h3> <p class="opacity-90">Connections with buyers and investors worldwide looking for Lebanese properties.</p> </div> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-lock text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">Secure Transactions</h3> <p class="opacity-90">We ensure all legal and financial aspects of your property transaction are handled securely.</p> </div> <div class="text-center p-6 hover:transform hover:-translate-y-2 transition duration-500"> <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-map-marked-alt text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">Area Specialists</h3> <p class="opacity-90">Our agents specialize in specific regions of Lebanon for in-depth local expertise.</p> </div> </div> </div> </section> <!-- Testimonials --> <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">What Our Clients Say</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-500"> <div class="flex items-center mb-4"> <div class="text-accent text-2xl mr-2">"</div> <p class="text-gray-600 italic">Heaven Real Estate found me the perfect apartment in Beirut. Their knowledge of the local market is unparalleled.</p> </div> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah T." class="w-12 h-12 rounded-full mr-4 object-cover"> <div> <h4 class="font-bold text-gray-800">Sarah T.</h4> <p class="text-gray-500 text-sm">Beirut Homeowner</p> <div class="flex mt-1 text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-500"> <div class="flex items-center mb-4"> <div class="text-accent text-2xl mr-2">"</div> <p class="text-gray-600 italic">As an expat, I was nervous about buying property in Lebanon. The team guided me through every step with professionalism.</p> </div> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark J." class="w-12 h-12 rounded-full mr-4 object-cover"> <div> <h4 class="font-bold text-gray-800">Mark J.</h4> <p class="text-gray-500 text-sm">Villa Owner, Jounieh</p> <div class="flex mt-1 text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-500"> <div class="flex items-center mb-4"> <div class="text-accent text-2xl mr-2">"</div> <p class="text-gray-600 italic">They sold my family home in Byblos for 15% above market price. I couldn't be happier with their service.</p> </div> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Layla K." class="w-12 h-12 rounded-full mr-4 object-cover"> <div> <h4 class="font-bold text-gray-800">Layla K.</h4> <p class="text-gray-500 text-sm">Byblos Property Seller</p> <div class="flex mt-1 text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> </div> </div> </div> </div> <div class="text-center mt-12"> <button class="bg-primary hover:bg-secondary text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> Read More Testimonials </button> </div> </div> </section> <!-- About Section --> <section id="about" class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">About Heaven Real Estate</h2> <div class="w-20 h-1 bg-accent mb-6"></div> <p class="text-gray-600 mb-4">Founded in 2000, Heaven Real Estate has grown to become one of Lebanon's most trusted real estate agencies. With offices in Beirut, Jounieh, and Zahle, we serve clients across the country.</p> <p class="text-gray-600 mb-6">Our team of multilingual professionals combines international standards with deep local market knowledge to deliver exceptional service to both Lebanese and international clients.</p> <div class="flex flex-wrap gap-4 mb-8"> <div class="flex items-center"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-check text-primary"></i> </div> <span class="text-gray-700 font-medium">500+ Properties</span> </div> <div class="flex items-center"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-check text-primary"></i> </div> <span class="text-gray-700 font-medium">95% Satisfaction</span> </div> <div class="flex items-center"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-check text-primary"></i> </div> <span class="text-gray-700 font-medium">Bilingual Staff</span> </div> <div class="flex items-center"> <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4"> <i class="fas fa-check text-primary"></i> </div> <span class="text-gray-700 font-medium">Legal Expertise</span> </div> </div> <button class="bg-primary hover:bg-secondary text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> Learn More About Us </button> </div> <div class="md:w-1/2"> <div class="relative"> <img src="https://images.unsplash.com/photo-1600880292203-75704362ea4c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Our Team" class="w-full rounded-lg shadow-lg hover:shadow-xl transition duration-500"> <div class="absolute -bottom-6 -right-6 bg-primary text-white p-6 rounded-lg shadow-lg w-2/3 hover:shadow-xl transition duration-500"> <h3 class="font-bold text-lg mb-2">Our Mission</h3> <p class="text-sm opacity-90">To help clients find their perfect property in Lebanon through integrity, expertise, and personalized service.</p> </div> </div> </div> </div> <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-4 rounded-full mr-4"> <i class="fas fa-bullseye text-primary text-xl"></i> </div> <h3 class="text-xl font-bold text-gray-800">Our Vision</h3> </div> <p class="text-gray-600">To be Lebanon's most trusted real estate partner, recognized for our commitment to excellence and client satisfaction.</p> </div> <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-4 rounded-full mr-4"> <i class="fas fa-users text-primary text-xl"></i> </div> <h3 class="text-xl font-bold text-gray-800">Our Team</h3> </div> <p class="text-gray-600">A diverse team of experienced professionals with deep knowledge of Lebanon's real estate market and cultural nuances.</p> </div> <div class="bg-gray-50 p-8 rounded-lg hover:shadow-md transition duration-300"> <div class="flex items-center mb-4"> <div class="bg-primary bg-opacity-10 p-4 rounded-full mr-4"> <i class="fas fa-handshake text-primary text-xl"></i> </div> <h3 class="text-xl font-bold text-gray-800">Our Values</h3> </div> <p class="text-gray-600">Integrity, transparency, and client-first approach guide every decision we make in serving your real estate needs.</p> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Contact Us</h2> <div class="w-20 h-1 bg-accent mx-auto"></div> <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Get in touch with our team for personalized assistance</p> </div> <div class="flex flex-col md:flex-row"> <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> <div class="bg-white p-8 rounded-lg shadow-md h-full hover:shadow-lg transition duration-500"> <h3 class="text-xl font-bold text-gray-800 mb-6">Our Offices</h3> <div class="mb-8"> <h4 class="font-bold text-gray-700 mb-3 flex items-center"> <i class="fas fa-map-marker-alt text-primary mr-2"></i> Beirut Headquarters </h4> <p class="text-gray-600 mb-2">123 Marina Tower, Downtown Beirut</p> <p class="text-gray-600">+961 1 123 456</p> </div> <div class="mb-8"> <h4 class="font-bold text-gray-700 mb-3 flex items-center"> <i class="fas fa-map-marker-alt text-primary mr-2"></i> Jounieh Office </h4> <p class="text-gray-600 mb-2">45 Seaside Road, Jounieh</p> <p class="text-gray-600">+961 9 987 654</p> </div> <div class="mb-8"> <h4 class="font-bold text-gray-700 mb-3 flex items-center"> <i class="fas fa-map-marker-alt text-primary mr-2"></i> Zahle Office </h4> <p class="text-gray-600 mb-2">12 Chtaura Highway, Zahle</p> <p class="text-gray-600">+961 8 456 789</p> </div> <div> <h4 class="font-bold text-gray-700 mb-3">Email Us</h4> <p class="text-gray-600">info@heavenrealestate.com</p> </div> <div class="mt-8"> <h4 class="font-bold text-gray-700 mb-3">Opening Hours</h4> <p class="text-gray-600 mb-1">Monday - Friday: 9:00 AM - 6:00 PM</p> <p class="text-gray-600">Saturday: 10:00 AM - 4:00 PM</p> </div> </div> </div> <div class="md:w-1/2"> <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-500"> <h3 class="text-xl font-bold text-gray-800 mb-6">Send Us a Message</h3> <form> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label> <input class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="name" type="text" placeholder="Your name"> </div> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email</label> <input class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="email" type="email" placeholder="Your email"> </div> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">Phone</label> <input class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="phone" type="tel" placeholder="Your phone number"> </div> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="subject">Subject</label> <select class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="subject"> <option>Select a subject</option> <option>Property Inquiry</option> <option>Valuation Request</option> <option>General Question</option> <option>Career Opportunity</option> </select> </div> <div class="mb-6"> <label class="block text-gray-700 text-sm font-bold mb-2" for="message">Message</label> <textarea class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-primary transition duration-300" id="message" rows="5" placeholder="Your message"></textarea> </div> <div class="mb-6 flex items-center"> <input type="checkbox" id="newsletter" class="custom-checkbox"> <label for="newsletter" class="text-gray-700 text-sm">Subscribe to our newsletter for updates</label> </div> <div class="flex items-center justify-between"> <button class="bg-primary hover:bg-secondary text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105" type="button"> Send Message <i class="fas fa-paper-plane ml-2"></i> </button> </div> </form> </div> </div> </div> </div> </section> <!-- Newsletter --> <section class="py-12 bg-primary text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-2xl md:text-3xl font-bold mb-4">Subscribe to Our Newsletter</h2> <p class="mb-6 max-w-2xl mx-auto opacity-90">Stay updated with the latest property listings, market trends, and exclusive offers in Lebanon.</p> <div class="max-w-md mx-auto flex"> <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-full focus:outline-none text-gray-800"> <button class="bg-accent hover:bg-yellow-600 text-white font-bold px-6 py-3 rounded-r-full transition duration-300 transform hover:scale-105"> Subscribe </button> </div> </div> </section> <!-- Map Section --> <div class="h-96 w-full"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13293.14007590841!2d35.495483!3d33.888893!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151f17215880a78f%3A0x729182bae99836b4!2sBeirut%2C%20Lebanon!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> <!-- Footer --> <footer class="bg-gray-900 text-white pt-12 pb-6"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> <div> <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-home text-primary mr-2"></i> Heaven Real Estate </h3> <p class="text-gray-400 mb-4">Your trusted partner for premium properties across Lebanon.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-instagram"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition duration-300"> <i class="fab fa-linkedin-in"></i> </a> </div> </div> <div> <h3 class="text-lg font-bold mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> <li><a href="#areas" class="text-gray-400 hover:text-white transition duration-300">Areas</a></li> <li><a href="#featured" class="text-gray-400 hover:text-white transition duration-300">Featured Properties</a></li> <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</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">Lebanon Areas</h3> <ul class="space-y-2"> <li><a href="#beirut" class="text-gray-400 hover:text-white transition duration-300">Beirut</a></li> <li><a href="#mount-lebanon" class="text-gray-400 hover:text-white transition duration-300">Mount Lebanon</a></li> <li><a href="#north-lebanon" class="text-gray-400 hover:text-white transition duration-300">North Lebanon</a></li> <li><a href="#south-lebanon" class="text-gray-400 hover:text-white transition duration-300">South Lebanon</a></li> <li><a href="#bekaa-valley" class="text-gray-400 hover:text-white transition duration-300">Bekaa Valley</a></li> </ul> </div> <div> <h3 class="text-lg font-bold mb-4">Contact Info</h3> <ul class="space-y-2 text-gray-400"> <li class="flex items-start"> <i class="fas fa-map-marker-alt text-primary mr-2 mt-1"></i> <span>123 Marina Tower, Downtown Beirut, Lebanon</span> </li> <li class="flex items-center"> <i class="fas fa-phone-alt text-primary mr-2"></i> <span>+961 1 123 456</span> </li> <li class="flex items-center"> <i class="fas fa-envelope text-primary mr-2"></i> <span>info@heavenrealestate.com</span> </li> <li class="flex items-center"> <i class="fas fa-clock text-primary mr-2"></i> <span>Mon-Fri: 9AM - 6PM</span> </li> </ul> </div> </div> <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-400 mb-4 md:mb-0">© 2023 Heaven Real Estate. All rights reserved.</p> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Privacy Policy</a> <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Terms of Service</a> <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Sitemap</a> </div> </div> </div> </footer> <!-- Back to Top Button --> <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> <i class="fas fa-arrow-up"></i> </button> <script> // Mobile menu toggle const menuBtn = document.getElementById('menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); menuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); // Close mobile menu if open if (!mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); } } }); }); // Add shadow to navbar on scroll window.addEventListener('scroll', function() { const nav = document.querySelector('nav'); if (window.scrollY > 10) { nav.classList.add('shadow-lg'); } else { nav.classList.remove('shadow-lg'); } // Back to top button visibility const backToTopBtn = document.getElementById('back-to-top'); if (window.scrollY > 300) { backToTopBtn.classList.remove('opacity-0', 'invisible'); backToTopBtn.classList.add('opacity-100', 'visible'); } else { backToTopBtn.classList.remove('opacity-100', 'visible'); backToTopBtn.classList.add('opacity-0', 'invisible'); } }); // Back to top button functionality document.getElementById('back-to-top').addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Animate elements when they come into view const animateOnScroll = function() { const elements = document.querySelectorAll('.animate-fade-in'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.2; if (elementPosition < screenPosition) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); }; window.addEventListener('scroll', animateOnScroll </body> </html> - Initial Deployment
- 388 Bytes initial commit