bender/5bd73184-09d6-4d9f-a9e8-b1d6e497f8fd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-03-19 19:41:42 +00:00
parent ce7b3165ed a8ff668af5
commit 443dae830a
2 changed files with 178 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/app/page.tsx
View File

@@ -10,9 +10,28 @@ import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Waves, Info, DoorOpen, Gift, Trophy, Users, Phone, MapPin, Sparkles, Heart, Zap, Star, MessageCircle, Wallet } from "lucide-react";
import { Waves, Info, DoorOpen, Gift, Trophy, Users, Phone, MapPin, Sparkles, Heart, Zap, Star, MessageCircle, Wallet, MessageSquare } from "lucide-react";
import { useState } from "react";
export default function LandingPage() {
const [formData, setFormData] = useState({
name: "", phone: "", checkIn: "", checkOut: ""
});
const handleFormChange = (field: string, value: string) => {
setFormData(prev => ({
...prev,
[field]: value
}));
};
const handleBooking = () => {
if (formData.name && formData.phone && formData.checkIn && formData.checkOut) {
const message = `Booking Request - Name: ${formData.name}, Phone: ${formData.phone}, Check-in: ${formData.checkIn}, Check-out: ${formData.checkOut}`;
window.open(`https://wa.me/919624388777?text=${encodeURIComponent(message)}`);
}
};
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
@@ -26,6 +45,32 @@ export default function LandingPage() {
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
{/* Floating WhatsApp Button */}
<a
href="https://wa.me/919624388777"
target="_blank"
rel="noopener noreferrer"
className="fixed bottom-8 right-8 z-40 bg-green-500 hover:bg-green-600 text-white rounded-full p-4 shadow-lg animate-bounce transition-all duration-300 hover:scale-110 md:bottom-6 md:right-6 sm:bottom-4 sm:right-4"
aria-label="Contact us on WhatsApp"
>
<MessageSquare size={24} className="md:size-6 sm:size-5" />
</a>
{/* Sticky Book Now Button */}
<div className="fixed top-24 right-0 z-30 md:top-20 sm:top-16 animate-fade-in">
<button
onClick={() => {
const bookingSection = document.getElementById('booking');
if (bookingSection) {
bookingSection.scrollIntoView({ behavior: 'smooth' });
}
}}
className="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white font-bold py-3 px-6 rounded-l-lg shadow-lg transition-all duration-300 hover:shadow-xl transform hover:-translate-x-1 md:py-2 md:px-4 sm:py-2 sm:px-3 sm:text-sm"
>
Book Now
</button>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Hotel Ambica"
@@ -215,6 +260,130 @@ export default function LandingPage() {
/>
</div>
{/* Booking Form Section */}
<div id="booking" data-section="booking" className="w-full py-16 md:py-12 sm:py-8 px-4 md:px-6 sm:px-4 bg-gradient-to-br from-blue-50 to-indigo-50">
<div className="max-w-4xl mx-auto">
<div className="text-center mb-12 md:mb-8 sm:mb-6 animate-fade-in-up">
<h2 className="text-4xl md:text-3xl sm:text-2xl font-bold text-gray-900 mb-4 md:mb-2">Book Your Stay</h2>
<p className="text-lg md:text-base sm:text-sm text-gray-600">Fill in your details below and we'll confirm your reservation</p>
</div>
<div className="bg-white rounded-lg shadow-lg p-8 md:p-6 sm:p-4 animate-slide-up">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-4 sm:gap-3 mb-8 md:mb-6 sm:mb-4">
{/* Name Input */}
<div className="animate-fade-in-left" style={{ animationDelay: '0.1s' }}>
<label className="block text-sm font-medium text-gray-700 mb-2 md:mb-1">Full Name</label>
<input
type="text"
placeholder="Your full name"
value={formData.name}
onChange={(e) => handleFormChange('name', e.target.value)}
className="w-full px-4 md:px-3 py-3 md:py-2 sm:py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 hover:border-blue-400 sm:text-sm"
/>
</div>
{/* Phone Input */}
<div className="animate-fade-in-left" style={{ animationDelay: '0.2s' }}>
<label className="block text-sm font-medium text-gray-700 mb-2 md:mb-1">Phone Number</label>
<input
type="tel"
placeholder="+91 XXXXXXXXXX"
value={formData.phone}
onChange={(e) => handleFormChange('phone', e.target.value)}
className="w-full px-4 md:px-3 py-3 md:py-2 sm:py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 hover:border-blue-400 sm:text-sm"
/>
</div>
{/* Check-in Date */}
<div className="animate-fade-in-left" style={{ animationDelay: '0.3s' }}>
<label className="block text-sm font-medium text-gray-700 mb-2 md:mb-1">Check-in Date</label>
<input
type="date"
value={formData.checkIn}
onChange={(e) => handleFormChange('checkIn', e.target.value)}
className="w-full px-4 md:px-3 py-3 md:py-2 sm:py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 hover:border-blue-400 sm:text-sm"
/>
</div>
{/* Check-out Date */}
<div className="animate-fade-in-left" style={{ animationDelay: '0.4s' }}>
<label className="block text-sm font-medium text-gray-700 mb-2 md:mb-1">Check-out Date</label>
<input
type="date"
value={formData.checkOut}
onChange={(e) => handleFormChange('checkOut', e.target.value)}
className="w-full px-4 md:px-3 py-3 md:py-2 sm:py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 hover:border-blue-400 sm:text-sm"
/>
</div>
</div>
{/* Submit Button */}
<button
onClick={handleBooking}
disabled={!formData.name || !formData.phone || !formData.checkIn || !formData.checkOut}
className="w-full bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed text-white font-bold py-3 md:py-2 sm:py-2 px-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl transform hover:scale-105 disabled:scale-100 sm:text-sm"
>
{formData.name && formData.phone && formData.checkIn && formData.checkOut
? 'Complete Booking via WhatsApp'
: 'Fill all fields to book'}
</button>
</div>
</div>
<style>{`
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in-left {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.8s ease-out;
}
.animate-slide-up {
animation: slide-up 0.8s ease-out;
}
.animate-fade-in-left {
animation: fade-in-left 0.6s ease-out forwards;
}
.animate-bounce {
animation: bounce 2s infinite;
}
`}</style>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Get In Touch"
@@ -275,4 +444,4 @@ export default function LandingPage() {
</div>
</ThemeProvider>
);
}
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612e6;
--primary-cta: #15479c;
--background: #f5f1e8;
--card: #ffffff;
--foreground: #1a3a3a;
--primary-cta: #0d7a8a;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta: #d4af37;
--secondary-cta-text: #000612e6;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
--accent: #0d7a8a;
--background-accent: #e8f4f6;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);