vip-web / index.html
miqlin11's picture
make all the site with all the pages - Initial Deployment
2ea98db verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIP Real Estate Uganda | Luxury Properties & Exclusive Listings</title>
<meta name="description" content="Discover premium real estate in Uganda with VIP Real Estate. Exclusive luxury properties, villas, and apartments in prime locations.">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0A2463',
secondary: '#D4AF37',
accent: '#3E92CC',
light: '#FFFAFF',
dark: '#1E1E24'
},
fontFamily: {
sans: ['Montserrat', 'sans-serif'],
serif: ['Playfair Display', 'serif'],
},
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.hero-gradient {
background: linear-gradient(135deg, rgba(10, 36, 99, 0.9) 0%, rgba(62, 146, 204, 0.8) 100%);
}
.property-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.testimonial-card {
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
}
.contact-form input,
.contact-form textarea {
transition: all 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #D4AF37;
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}
</style>
</head>
<body class="font-sans text-dark bg-light">
<!-- Navigation -->
<nav class="bg-primary text-light shadow-lg sticky top-0 z-50">
<div class="container mx-auto px-6 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center">
<a href="#" class="flex items-center">
<i data-feather="home" class="text-secondary mr-2"></i>
<span class="text-xl font-bold font-serif">VIP Real Estate Uganda</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-light hover:text-secondary font-medium">Home</a>
<a href="#" class="text-light hover:text-secondary font-medium">Properties</a>
<a href="#" class="text-light hover:text-secondary font-medium">Services</a>
<a href="#" class="text-light hover:text-secondary font-medium">About</a>
<a href="#" class="text-light hover:text-secondary font-medium">Contact</a>
</div>
<div class="md:hidden">
<button class="text-light focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center">
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('http://static.photos/realestate/1200x630/1');"></div>
<div class="absolute inset-0 hero-gradient"></div>
<div class="container mx-auto px-6 z-10 text-center" data-aos="fade-up">
<h1 class="text-4xl md:text-6xl font-serif font-bold text-light mb-6">Discover Uganda's Finest Properties</h1>
<p class="text-xl text-light mb-8 max-w-2xl mx-auto">Exclusive luxury homes and premium real estate investments in Uganda's most desirable locations.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="bg-secondary hover:bg-yellow-600 text-dark font-bold py-3 px-6 rounded transition duration-300">View Properties</a>
<a href="#" class="border-2 border-light hover:bg-white hover:bg-opacity-20 text-light font-bold py-3 px-6 rounded transition duration-300">Contact Agent</a>
</div>
</div>
<div class="absolute bottom-10 left-0 right-0 text-center">
<a href="#featured" class="text-light animate-bounce inline-block">
<i data-feather="chevron-down" class="w-10 h-10"></i>
</a>
</div>
</section>
<!-- Featured Properties -->
<section id="featured" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-serif font-bold text-primary mb-4">Featured Properties</h2>
<div class="w-24 h-1 bg-secondary mx-auto"></div>
<p class="text-gray-600 mt-4 max-w-2xl mx-auto">Explore our curated selection of premium properties in Uganda's most sought-after locations.</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-300" data-aos="fade-up" data-aos-delay="100">
<div class="relative">
<img src="http://static.photos/realestate/640x360/1" alt="Luxury Villa" class="w-full h-64 object-cover">
<div class="absolute top-4 right-4 bg-secondary text-dark px-3 py-1 rounded-full text-sm font-bold">For Sale</div>
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<span class="text-xl font-bold text-light">$850,000</span>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-2">Luxury Villa in Kololo</h3>
<div class="flex items-center text-gray-600 mb-4">
<i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
<span>Kololo, Kampala</span>
</div>
<div class="flex justify-between border-t border-gray-200 pt-4">
<div class="flex items-center">
<i data-feather="home" class="w-4 h-4 mr-1 text-secondary"></i>
<span>5 Beds</span>
</div>
<div class="flex items-center">
<i data-feather="maximize-2" class="w-4 h-4 mr-1 text-secondary"></i>
<span>4500 sqft</span>
</div>
<div class="flex items-center">
<i data-feather="droplet" class="w-4 h-4 mr-1 text-secondary"></i>
<span>Pool</span>
</div>
</div>
<a href="#" class="block mt-6 text-center bg-primary hover:bg-opacity-90 text-light py-2 px-4 rounded transition duration-300">View Details</a>
</div>
</div>
<!-- Property 2 -->
<div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="relative">
<img src="http://static.photos/realestate/640x360/2" alt="Modern Apartment" class="w-full h-64 object-cover">
<div class="absolute top-4 right-4 bg-accent text-light px-3 py-1 rounded-full text-sm font-bold">For Rent</div>
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<span class="text-xl font-bold text-light">$2,500/mo</span>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-2">Modern Apartment in Nakasero</h3>
<div class="flex items-center text-gray-600 mb-4">
<i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
<span>Nakasero, Kampala</span>
</div>
<div class="flex justify-between border-t border-gray-200 pt-4">
<div class="flex items-center">
<i data-feather="home" class="w-4 h-4 mr-1 text-secondary"></i>
<span>3 Beds</span>
</div>
<div class="flex items-center">
<i data-feather="maximize-2" class="w-4 h-4 mr-1 text-secondary"></i>
<span>1800 sqft</span>
</div>
<div class="flex items-center">
<i data-feather="wifi" class="w-4 h-4 mr-1 text-secondary"></i>
<span>Smart Home</span>
</div>
</div>
<a href="#" class="block mt-6 text-center bg-primary hover:bg-opacity-90 text-light py-2 px-4 rounded transition duration-300">View Details</a>
</div>
</div>
<!-- Property 3 -->
<div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300">
<div class="relative">
<img src="http://static.photos/realestate/640x360/3" alt="Lakefront Property" class="w-full h-64 object-cover">
<div class="absolute top-4 right-4 bg-secondary text-dark px-3 py-1 rounded-full text-sm font-bold">For Sale</div>
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
<span class="text-xl font-bold text-light">$1,200,000</span>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-2">Lakefront Property in Entebbe</h3>
<div class="flex items-center text-gray-600 mb-4">
<i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
<span>Entebbe</span>
</div>
<div class="flex justify-between border-t border-gray-200 pt-4">
<div class="flex items-center">
<i data-feather="home" class="w-4 h-4 mr-1 text-secondary"></i>
<span>6 Beds</span>
</div>
<div class="flex items-center">
<i data-feather="maximize-2" class="w-4 h-4 mr-1 text-secondary"></i>
<span>2 Acres</span>
</div>
<div class="flex items-center">
<i data-feather="anchor" class="w-4 h-4 mr-1 text-secondary"></i>
<span>Private Dock</span>
</div>
</div>
<a href="#" class="block mt-6 text-center bg-primary hover:bg-opacity-90 text-light py-2 px-4 rounded transition duration-300">View Details</a>
</div>
</div>
</div>
<div class="text-center mt-12" data-aos="fade-up">
<a href="#" class="inline-block border-2 border-primary hover:bg-primary hover:text-light text-primary font-bold py-3 px-8 rounded transition duration-300">
View All Properties
</a>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-serif font-bold text-primary mb-4">Our Services</h2>
<div class="w-24 h-1 bg-secondary mx-auto"></div>
<p class="text-gray-600 mt-4 max-w-2xl mx-auto">Comprehensive real estate solutions tailored to your needs.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-feather="home" class="text-primary w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">Property Sales</h3>
<p class="text-gray-600">Expert guidance through the entire buying process of luxury properties in Uganda's prime locations.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-feather="dollar-sign" class="text-primary w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">Property Management</h3>
<p class="text-gray-600">Comprehensive management services to maximize your investment returns and property value.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="300">
<div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
<i data-feather="search" class="text-primary w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">Investment Advisory</h3>
<p class="text-gray-600">Strategic advice on real estate investments with detailed market analysis and growth projections.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-primary text-light">
<div class="container mx-auto px-6">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-serif font-bold mb-4">Client Testimonials</h2>
<div class="w-24 h-1 bg-secondary mx-auto"></div>
<p class="mt-4 max-w-2xl mx-auto opacity-90">What our clients say about our services</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="testimonial-card p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/1" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-primary">James K.</h4>
<p class="text-gray-600 text-sm">Property Investor</p>
</div>
</div>
<p class="text-gray-700 mb-4">"VIP Real Estate made my property search effortless. Their knowledge of the Kampala market is unparalleled and they negotiated a fantastic deal for me."</p>
<div class="flex text-secondary">
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
</div>
</div>
<div class="testimonial-card p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/2" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-primary">Sarah M.</h4>
<p class="text-gray-600 text-sm">Home Buyer</p>
</div>
</div>
<p class="text-gray-700 mb-4">"From the first consultation to the final paperwork, the team was professional and attentive. They found us the perfect family home in Nakasero."</p>
<div class="flex text-secondary">
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
</div>
</div>
<div class="testimonial-card p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="300">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/3" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-primary">David R.</h4>
<p class="text-gray-600 text-sm">Commercial Investor</p>
</div>
</div>
<p class="text-gray-700 mb-4">"Their investment advisory service provided invaluable insights into the Ugandan real estate market. I've seen excellent returns on my portfolio."</p>
<div class="flex text-secondary">
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<i data-feather="star" class="w-4 h-4 fill-current"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2" data-aos="fade-right">
<h2 class="text-3xl md:text-4xl font-serif font-bold text-primary mb-6">Get In Touch</h2>
<p class="text-gray-600 mb-8">Our team is ready to assist you with all your real estate needs. Contact us today to schedule a consultation or property viewing.</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
<i data-feather="map-pin" class="text-primary w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-primary mb-1">Our Office</h4>
<p class="text-gray-600">Acacia Avenue, Kololo<br>Kampala, Uganda</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
<i data-feather="mail" class="text-primary w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-primary mb-1">Email Us</h4>
<p class="text-gray-600">info@viprealestateug.vip<br>sales@viprealestateug.vip</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
<i data-feather="phone" class="text-primary w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-primary mb-1">Call Us</h4>
<p class="text-gray-600">+256 700 123456<br>+256 312 123456</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2" data-aos="fade-left">
<div class="bg-gray-50 p-8 rounded-lg shadow-md">
<h3 class="text-xl font-bold text-primary mb-6">Send Us a Message</h3>
<form class="contact-form space-y-4">
<div>
<label for="name" class="block text-gray-700 mb-2">Full Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-secondary">
</div>
<div>
<label for="email" class="block text-gray-700 mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-secondary">
</div>
<div>
<label for="phone" class="block text-gray-700 mb-2">Phone Number</label>
<input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-secondary">
</div>
<div>
<label for="subject" class="block text-gray-700 mb-2">Subject</label>
<select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-secondary">
<option value="">Select a subject</option>
<option value="property-inquiry">Property Inquiry</option>
<option value="viewing-request">Viewing Request</option>
<option value="investment-advice">Investment Advice</option>
<option value="property-management">Property Management</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="message" class="block text-gray-700 mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-secondary"></textarea>
</div>
<button type="submit" class="w-full bg-secondary hover:bg-yellow-600 text-dark font-bold py-3 px-6 rounded transition duration-300">
Send Message
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6 text-center">
<div class="max-w-2xl mx-auto" data-aos="fade-up">
<h2 class="text-2xl md:text-3xl font-serif font-bold text-primary mb-4">Stay Updated</h2>
<p class="text-gray-600 mb-6">Subscribe to our newsletter for the latest property listings, market trends, and investment opportunities.</p>
<form class="flex flex-col sm:flex-row gap-2 max-w-md mx-auto">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border border-gray-300 rounded focus:outline-none focus:border-secondary">
<button type="submit" class="bg-primary hover:bg-opacity-90 text-light font-bold py-3 px-6 rounded transition duration-300">
Subscribe
</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-light py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-serif font-bold text-secondary mb-4">VIP Real Estate Uganda</h3>
<p class="mb-4">Your trusted partner for premium real estate services in Uganda.</p>
<div class="flex space-x-4">
<a href="#" class="text-light hover:text-secondary transition duration-300">
<i data-feather="facebook" class="w-5 h-5"></i>
</a>
<a href="#" class="text-light hover:text-secondary transition duration-300">
<i data-feather="twitter" class="w-5 h-5"></i>
</a>
<a href="#" class="text-light hover:text-secondary transition duration-300">
<i data-feather="instagram" class="w-5 h-5"></i>
</a>
<a href="#" class="text-light hover:text-secondary transition duration-300">
<i data-feather="linkedin" class="w-5 h-5"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-secondary transition duration-300">Home</a></li>
<li><a href="#" class="hover:text-secondary transition duration-300">Properties</a></li>
<li><a href="#" class="hover:text-secondary transition duration-300">Services</a></li>
<li><a href="#" class="hover:text-secondary transition duration-300">About Us</a></li>
<li><a href="#" class="hover:text-secondary transition duration-300">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-secondary transition duration-300">Property Sales</a></li>
<li><a href="#" class="hover:text-secondary transition duration-300">Property Rentals</a></li>
<li><a href="#" class="hover:text-secondary transition duration-300">Property Management</a></li>
<li><a href="#" class="hover:text-secondary transition duration-300">Investment Advisory</a></li>
<li><a href="#" class="hover:text-secondary transition duration-300">Valuation Services</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Contact Info</h4>
<ul class="space-y-2">
<li class="flex items-start">
<i data-feather="map-pin" class="w-4 h-4 mr-2 mt-1"></i>
<span>Acacia Avenue, Kololo, Kampala</span>
</li>
<li class="flex items-start">
<i data-feather="mail" class="w-4 h-4 mr-2 mt-1"></i>
<span>info@viprealestateug.vip</span>
</li>
<li class="flex items-start">
<i data-feather="phone" class="w-4 h-4 mr-2 mt-1"></i>
<span>+256 700 123456</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-8 text-center">
<p>&copy; 2023 VIP Real Estate Uganda. All rights reserved.</p>
</div>
</div>
</footer>
<script>AOS.init();</script>
<script>feather.replace();</script>
</body>
</html>