|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Kudaram Lakeview - Luxury Stay by the Water</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
|
|
<script src="https://checkout.razorpay.com/v1/checkout.js"></script> |
|
|
<style> |
|
|
.hero-section { |
|
|
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), |
|
|
url('http://static.photos/nature/1200x630/42'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
.room-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.nav-link:hover { |
|
|
border-bottom: 2px solid #10B981; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div> |
|
|
|
|
|
|
|
|
<nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm shadow-sm sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<img class="h-8 w-auto" src="/static/logo.png" alt="Kudaram Lakeview"> |
|
|
<span class="ml-2 text-xl font-bold text-emerald-600">Kudaram Lakeview</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" class="nav-link border-emerald-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Home |
|
|
</a> |
|
|
<a href="#rooms" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Rooms |
|
|
</a> |
|
|
<a href="#amenities" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Amenities |
|
|
</a> |
|
|
<a href="#gallery" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Gallery |
|
|
</a> |
|
|
<a href="#contact" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Contact |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<a href="/login" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium"> |
|
|
<i data-feather="log-in" class="mr-1"></i> Login |
|
|
</a> |
|
|
<a href="/admin" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium"> |
|
|
<i data-feather="lock" class="mr-1"></i> Admin |
|
|
</a> |
|
|
<a href="/staff" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium"> |
|
|
<i data-feather="user" class="mr-1"></i> Staff |
|
|
</a> |
|
|
<a href="/book" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
<i data-feather="calendar" class="mr-2"></i> Book Now |
|
|
<i data-feather="calendar" class="mr-2"></i> Book Now |
|
|
</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sm:hidden hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<a href="#" class="bg-emerald-50 border-emerald-500 text-emerald-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> |
|
|
<a href="#rooms" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Rooms</a> |
|
|
<a href="#amenities" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Amenities</a> |
|
|
<a href="#gallery" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Gallery</a> |
|
|
<a href="#contact" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a> |
|
|
</div> |
|
|
<div class="pt-4 pb-3 border-t border-gray-200"> |
|
|
<div class="flex items-center px-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="user" class="h-10 w-10 rounded-full text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-base font-medium text-gray-800">Guest</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 space-y-1"> |
|
|
<a href="/login" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"> |
|
|
<i data-feather="log-in" class="mr-2"></i> Login |
|
|
</a> |
|
|
<a href="/admin" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"> |
|
|
<i data-feather="lock" class="mr-2"></i> Admin |
|
|
</a> |
|
|
<a href="/staff" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"> |
|
|
<i data-feather="user" class="mr-2"></i> Staff |
|
|
</a> |
|
|
<a href="/book" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"> |
|
|
<i data-feather="calendar" class="mr-2"></i> Book Now |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="hero-section relative"> |
|
|
<div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl"> |
|
|
Experience Serenity by the Lake |
|
|
</h1> |
|
|
<p class="mt-6 text-xl text-emerald-100 max-w-3xl mx-auto"> |
|
|
Luxury accommodations with breathtaking lake views at Kudaram Lakeview Resort |
|
|
</p> |
|
|
<div class="mt-10"> |
|
|
<a href="/book" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
<i data-feather="calendar" class="mr-2"></i> Book Your Stay |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10 z-10 relative"> |
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden"> |
|
|
<div class="p-4"> |
|
|
<form id="booking-widget"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
<div> |
|
|
<label for="check-in" class="block text-sm font-medium text-gray-700">Check-in</label> |
|
|
<input type="date" id="check-in" name="check-in" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm py-2 px-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="check-out" class="block text-sm font-medium text-gray-700">Check-out</label> |
|
|
<input type="date" id="check-out" name="check-out" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm py-2 px-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="guests" class="block text-sm font-medium text-gray-700">Guests</label> |
|
|
<select id="guests" name="guests" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm py-2 px-3 border"> |
|
|
<option value="1">1 Adult</option> |
|
|
<option value="2" selected>2 Adults</option> |
|
|
<option value="3">3 Adults</option> |
|
|
<option value="4">4 Adults</option> |
|
|
<option value="family">Family (2+2)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-end"> |
|
|
<button type="submit" class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 h-10"> |
|
|
<i data-feather="search" class="mr-2"></i> Check Availability |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section id="rooms" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Our Accommodations |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> |
|
|
Choose from our selection of luxurious rooms and suites |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="room-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="relative h-48 overflow-hidden"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/hotel/640x360/1" alt="Deluxe Room"> |
|
|
<div class="absolute top-2 right-2 bg-emerald-600 text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
Most Popular |
|
|
</div> |
|
|
</div> |
|
|
<div classp-4"> |
|
|
<h3 class="text-lg font-bold text-gray-900">Deluxe Lake View</h3> |
|
|
<div class="mt-1 flex items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
</div> |
|
|
<span class="ml-2 text-sm text-gray-500">24 reviews</span> |
|
|
</div> |
|
|
<p class="mt-2 text-sm text-gray-600"> |
|
|
Spacious room with a king-size bed and panoramic lake views. Includes complimentary breakfast. |
|
|
</p> |
|
|
<div class="mt-3 flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-emerald-600">₹4,500 <span class="text-sm font-normal text-gray-500 line-through">₹5,500</span></span> |
|
|
<span class="text-xs text-gray-500">per night</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<a href="/book/deluxe" class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
<i data-feather="calendar" class="mr-2"></i> Book Now |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="room-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="relative h-48 overflow-hidden"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/hotel/640x360/2" alt="Executive Suite"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold text-gray-900">Executive Suite</h3> |
|
|
<div class="mt-1 flex items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400"></i> |
|
|
</div> |
|
|
<span class="ml-2 text-sm text-gray-500">18 reviews</span> |
|
|
</div> |
|
|
<p class="mt-2 text-sm text-gray-600"> |
|
|
Elegant suite with separate living area, premium amenities, and private balcony overlooking the lake. |
|
|
</p> |
|
|
<div class="mt-3 flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-emerald-600">₹7,200 <span class="text-sm font-normal text-gray-500 line-through">₹8,500</span></span> |
|
|
<span class="text-xs text-gray-500">per night</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<a href="/book/executive" class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
<i data-feather="calendar" class="mr-2"></i> Book Now |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="room-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="relative h-48 overflow-hidden"> |
|
|
<img class="w-full h-full object-cover" src="http://static.photos/hotel/640x360/3" alt="Family Suite"> |
|
|
<div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
Family Favorite |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-bold text-gray-900">Family Suite</h3> |
|
|
<div class="mt-1 flex items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
</div> |
|
|
<span class="ml-2 text-sm text-gray-500">32 reviews</span> |
|
|
</div> |
|
|
<p class="mt-2 text-sm text-gray-600"> |
|
|
Spacious two-bedroom suite perfect for families, with child-friendly amenities and lake access. |
|
|
</p> |
|
|
<div class="mt-3 flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-emerald-600">₹9,800 <span class="text-sm font-normal text-gray-500 line-through">₹11,500</span></span> |
|
|
<span class="text-xs text-gray-500">per night</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<a href="/book/family" class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
<i data-feather="calendar" class="mr-2"></i> Book Now |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<a href="/rooms" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-emerald-700 bg-emerald-100 hover:bg-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
View All Rooms <i data-feather="arrow-right" class="ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="amenities" class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Resort Amenities |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> |
|
|
Enjoy our premium facilities during your stay |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 grid grid-cols-2 gap-8 md:grid-cols-4"> |
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white mx-auto"> |
|
|
<i data-feather="wifi"></i> |
|
|
</div> |
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">Free WiFi</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
High-speed internet throughout the property |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white mx-auto"> |
|
|
<i data-feather="coffee"></i> |
|
|
</div> |
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">Breakfast</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
Complimentary breakfast buffet |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white mx-auto"> |
|
|
<i data-feather="droplet"></i> |
|
|
</div> |
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">Pool</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
Infinity pool with lake views |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white mx-auto"> |
|
|
<i data-feather="umbrella"></i> |
|
|
</div> |
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">Spa</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
Lakeside spa treatments |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white mx-auto"> |
|
|
<i data-feather="bicycle"></i> |
|
|
</div> |
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">Activities</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
Kayaking, cycling & more |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white mx-auto"> |
|
|
<i data-feather="parking-square"></i> |
|
|
</div> |
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">Parking</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
Complimentary secured parking |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white mx-auto"> |
|
|
<i data-feather="heart"></i> |
|
|
</div> |
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">Gym</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
24/7 fitness center |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white mx-auto"> |
|
|
<i data-feather="users"></i> |
|
|
</div> |
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">Concierge</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
24-hour front desk |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gallery" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Gallery |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> |
|
|
Explore our resort through these beautiful moments |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4"> |
|
|
<div class="group relative"> |
|
|
<img class="w-full h-48 object-cover rounded-lg" src="http://static.photos/hotel/640x360/4" alt="Resort Lobby"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-all duration-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="group relative"> |
|
|
<img class="w-full h-48 object-cover rounded-lg" src="http://static.photos/hotel/640x360/5" alt="Lake View"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-all duration-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="group relative"> |
|
|
<img class="w-full h-48 object-cover rounded-lg" src="http://static.photos/hotel/640x360/6" alt="Restaurant"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-all duration-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="group relative"> |
|
|
<img class="w-full h-48 object-cover rounded-lg" src="http://static.photos/hotel/640x360/7" alt="Spa"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-all duration-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="group relative"> |
|
|
<img class="w-full h-48 object-cover rounded-lg" src="http://static.photos/hotel/640x360/8" alt="Pool Area"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-all duration-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="group relative"> |
|
|
<img class="w-full h-48 object-cover rounded-lg" src="http://static.photos/hotel/640x360/9" alt="Sunset View"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-all duration-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="group relative"> |
|
|
<img class="w-full h-48 object-cover rounded-lg" src="http://static.photos/hotel/640x360/10" alt="Garden Area"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-all duration-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="group relative"> |
|
|
<img class="w-full h-48 object-cover rounded-lg" src="http://static.photos/hotel/640x360/11" alt="Conference Room"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="zoom-in" class="text-white opacity-0 group-hover:opacity-100 transition-all duration-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-emerald-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Guest Reviews |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> |
|
|
What our guests say about their experience |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3"> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="Guest 1"> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Rahul Sharma</h3> |
|
|
<div class="flex items-center mt-1"> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 text-gray-600"> |
|
|
"Absolutely stunning location with impeccable service. The lake view from our room was breathtaking. Will definitely return!" |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="Guest 2"> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Priya Patel</h3> |
|
|
<div class="flex items-center mt-1"> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 text-gray-600"> |
|
|
"Perfect weekend getaway! The staff went above and beyond to make our anniversary special. Highly recommend the spa services." |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="Guest 3"> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Vikram Singh</h3> |
|
|
<div class="flex items-center mt-1"> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 text-gray-600"> |
|
|
"Exceptional hospitality and beautiful property. The kids loved the pool and activities. Family suite was spacious and comfortable." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-8"> |
|
|
<div> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Contact Us |
|
|
</h2> |
|
|
<p class="mt-3 text-lg text-gray-500"> |
|
|
Have questions? We're here to help with your booking and any inquiries. |
|
|
</p> |
|
|
<div class="mt-8"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white"> |
|
|
<i data-feather="map-pin"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Address</h3> |
|
|
<p class="mt-1 text-gray-500"> |
|
|
Lakeview Road, Kudaram Village<br> |
|
|
Kerala, India - 689123 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white"> |
|
|
<i data-feather="phone"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Phone</h3> |
|
|
<p class="mt-1 text-gray-500"> |
|
|
+91 98765 43210<br> |
|
|
+91 980 765 4321 (24/7 Support) |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-emerald-500 text-white"> |
|
|
<i data-feather="mail"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Email</h3> |
|
|
<p class="mt-1 text-gray-500"> |
|
|
reservations@kudaramlakeview.com<br> |
|
|
info@kudaramlakeview.com |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 lg:mt-0"> |
|
|
<div class="bg-white py-8 px-6 shadow rounded-lg sm:px-10"> |
|
|
<form id="contact-form" class="mb-0 space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Full Name</label> |
|
|
<div class="mt-1"> |
|
|
<input id="name" name="name" type="text" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> |
|
|
<div class="mt-1"> |
|
|
<input id="email" name="email" type="email" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> |
|
|
<div class="mt-1"> |
|
|
<input id="phone" name="phone" type="tel" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700">Message</label> |
|
|
<div class="mt-1"> |
|
|
<textarea id="message" name="message" rows="4" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
Send Message |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="bg-gray-100"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7866.473463076284!2d76.6553853!3d9.9917435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b080d514abec6bf%3A0xbd582caa5844192!2sKochi%2C%20Kerala!5e0!3m2!1sen!2sin!4v1624452345678!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-emerald-600"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
|
|
Stay Updated |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-xl text-emerald-100 sm:mt-4"> |
|
|
Subscribe to our newsletter for special offers and updates |
|
|
</p> |
|
|
<form class="mt-8 sm:flex justify-center"> |
|
|
<div class="w-full sm:max-w-xs"> |
|
|
<label for="email" class="sr-only">Email address</label> |
|
|
<input id="email" name="email" type="email" required class="w-full px-5 py-3 placeholder-gray-500 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent" placeholder="Enter your email"> |
|
|
</div> |
|
|
<div class="mt-3 sm:mt-0 sm:ml-3"> |
|
|
<button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-emerald-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
Subscribe |
|
|
<i data-feather="arrow-right" class="ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-emerald-400 mb-4">Kudaram Lakeview</h3> |
|
|
<p class="text-sm text-gray-300"> |
|
|
Luxury lakeside accommodations with world-class amenities and breathtaking views. |
|
|
</p> |
|
|
<div class="mt-4 flex space-x-4"> |
|
|
<a href="#" class="text-gray-300 hover:text-emerald-400"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-emerald-400"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-emerald-400"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-emerald-400"> |
|
|
<i data-feather="youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-emerald-400 mb-4">Quick Links</h3> |
|
|
<div class="space-y-2"> |
|
|
<a href="/" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Home</a> |
|
|
<a href="/rooms" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Rooms</a> |
|
|
<a href="/amenities" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Amenities</a> |
|
|
<a href="/gallery" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Gallery</a> |
|
|
<a href="/contact" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Contact Us</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-emerald-400 mb-4">Support</h3> |
|
|
<div class="space-y-2"> |
|
|
<a href="/faq" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">FAQs</a> |
|
|
<a href="/privacy" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Privacy Policy</a> |
|
|
<a href="/terms" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Terms & Conditions</a> |
|
|
<a href="/cancellation" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Cancellation Policy</a> |
|
|
<a href="/refund" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Refund Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-emerald-400 mb-4">Policies & Legal</h3> |
|
|
<div class="space-y-2"> |
|
|
<a href="https://merchant.razorpay.com/policy/RHSQRQpD2SXE5U/refund" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Cancellation & Refunds</a> |
|
|
<a href="https://merchant.razorpay.com/policy/RHSQRQpD2SXE5U/terms" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Terms and Conditions</a> |
|
|
<a href="https://merchant.razorpay.com/policy/RHSQRQpD2SXE5U/shipping" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Shipping</a> |
|
|
<a href="https://merchant.razorpay.com/policy/RHSQRQpD2SXE5U/privacy" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Privacy</a> |
|
|
<a href="https://merchant.razorpay.com/policy/RHSQRQpD2SXE5U/contact_us" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Contact Us</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 pt-8 mt-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-4"> |
|
|
<div class="text-center md:text-left"> |
|
|
<p class="text-sm text-gray-400"> |
|
|
© 2025 Kudaram Holidays Private Limited. All Rights Reserved. |
|
|
</p> |
|
|
</div> |
|
|
<div class="text-center md:text-right"> |
|
|
<p class="text-sm text-gray-400"> |
|
|
Powered by Razorpay | |
|
|
<span class="ml-2">Last Updated: <span id="current-date"></span></span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.WAVES({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x10b981, |
|
|
shininess: 20.00, |
|
|
waveHeight: 15.00, |
|
|
waveSpeed: 0.75, |
|
|
zoom: 0.65 |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', { |
|
|
year: 'numeric', |
|
|
month: 'long', |
|
|
day: 'numeric' |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.remove('hidden'); |
|
|
mobileMenu.classList.add('block'); |
|
|
} else { |
|
|
mobileMenu.classList.remove('block'); |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.getElementById('booking-widget').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const checkIn = document.getElementById('check-in').value; |
|
|
const checkOut = document.getElementById('check-out').value; |
|
|
const guests = document.getElementById('guests').value; |
|
|
|
|
|
|
|
|
window.location.href = `/book?checkIn=${checkIn}&checkOut=${checkOut}&guests=${guests}`; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('contact-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('Thank you for your message! We will get back to you soon.'); |
|
|
this.reset(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
