Update src/app/page.tsx

This commit is contained in:
2026-03-06 13:46:16 +00:00
parent 53b02c273a
commit 7b92b9c8a3

View File

@@ -3,8 +3,6 @@
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FaqBase from "@/components/sections/faq/FaqBase";
@@ -12,12 +10,24 @@ import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import { Facebook, Twitter, Instagram, Tag as TagIcon, Sparkles, Award } from "lucide-react";
import { Facebook, Twitter, Instagram, Tag as TagIcon, Sparkles, Award, MapPin, Wifi, UtensilsCrossed } from "lucide-react";
import { useState } from "react";
export default function HomePage() {
const [selectedHotel, setSelectedHotel] = useState<string | null>(null);
const hotels = [
{
id: "park-continental", name: "Park Continental", location: "Masab Tank, Hyderabad", rating: "3.4/5", reviews: "787+", price: "₹2,248", image: "http://img.b2bpic.net/free-photo/woman-sauna-sunlit-wellness-wooden-waves_169016-68878.jpg", description: "Experience affordable luxury in the heart of Hyderabad. 3-star comfort with modern amenities, just 3 km from Banjara Hills."},
{
id: "grand-plaza", name: "Grand Plaza Hotel", location: "Somajiguda, Hyderabad", rating: "4.1/5", reviews: "542+", price: "₹2,899", image: "http://img.b2bpic.net/free-photo/woman-sauna-sunlit-wellness-wooden-waves_169016-68878.jpg", description: "Contemporary comfort meets traditional hospitality. Premium 3-star hotel with modern amenities and excellent service."},
{
id: "heritage-inn", name: "Heritage Inn", location: "Jubilee Hills, Hyderabad", rating: "3.8/5", reviews: "621+", price: "₹2,599", image: "http://img.b2bpic.net/free-photo/woman-sauna-sunlit-wellness-wooden-waves_169016-68878.jpg", description: "Blend of heritage charm and modern convenience. Spacious rooms with all essential amenities for a comfortable stay."},
];
const navItems = [
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "Hotels", id: "#featured-hotels" },
{ name: "Amenities", id: "amenities" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" },
@@ -38,51 +48,135 @@ export default function HomePage() {
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Rooms", id: "/rooms" },
{ name: "Amenities", id: "amenities" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="Hotel Park Continental"
bottomLeftText="Masab Tank, Hyderabad"
navItems={navItems}
brandName="Hotel Multi-Platform"
bottomLeftText="Select your perfect hotel"
bottomRightText="+91 91211 09950"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="PARK CONTINENTAL"
description="Experience affordable luxury in the heart of Hyderabad. 3-star comfort with modern amenities, just 3 km from Banjara Hills."
logoText="MULTI-HOTEL PLATFORM"
description="Discover and book from our curated collection of premium 3-star hotels across Hyderabad. Affordable luxury at your fingertips."
buttons={[
{ text: "Book Now", href: "/rooms" },
{ text: "Learn More", href: "#amenities" },
{ text: "Explore Hotels", href: "#featured-hotels" },
{ text: "Learn More", href: "#about" },
]}
imageSrc="http://img.b2bpic.net/free-photo/woman-sauna-sunlit-wellness-wooden-waves_169016-68878.jpg"
imageAlt="Hotel Park Continental Lobby"
imageAlt="Multi-Hotel Platform"
showDimOverlay={true}
buttonAnimation="slide-up"
/>
</div>
<div id="hotel-selection" data-section="hotel-selection">
<section className="py-20 px-6">
<div className="max-w-6xl mx-auto">
<div className="mb-12 text-center">
<h2 className="text-4xl font-bold mb-4">Select Your Hotel</h2>
<p className="text-xl text-gray-600 mb-8">Choose from our collection of premium properties</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{hotels.map((hotel) => (
<div
key={hotel.id}
onClick={() => setSelectedHotel(hotel.id)}
className={`p-6 rounded-lg cursor-pointer transition-all ${
selectedHotel === hotel.id
? "bg-blue-50 border-2 border-blue-500"
: "bg-white border border-gray-200 hover:border-gray-400"
}`}
>
<img
src={hotel.image}
alt={hotel.name}
className="w-full h-40 object-cover rounded-lg mb-4"
/>
<h3 className="text-xl font-bold mb-2">{hotel.name}</h3>
<div className="flex items-center text-gray-600 mb-2">
<MapPin size={16} className="mr-2" />
<span className="text-sm">{hotel.location}</span>
</div>
<div className="flex justify-between items-center mb-4">
<div className="flex items-center">
<span className="font-bold text-lg">{hotel.rating}</span>
<span className="text-sm text-gray-600 ml-2">({hotel.reviews} reviews)</span>
</div>
<span className="text-2xl font-bold text-blue-600">{hotel.price}/night</span>
</div>
<p className="text-sm text-gray-600">{hotel.description}</p>
</div>
))}
</div>
</div>
</section>
</div>
<div id="featured-hotels" data-section="featured-hotels">
<section className="py-20 px-6 bg-gray-50">
<div className="max-w-6xl mx-auto">
<div className="mb-12 text-center">
<div className="inline-block mb-4 px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm font-semibold">
Featured Properties
</div>
<h2 className="text-4xl font-bold mb-4">Our Premium Hotels</h2>
<p className="text-xl text-gray-600 mb-8">Handpicked properties offering the best value for your stay</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{hotels.map((hotel) => (
<div key={hotel.id} className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
<div className="relative">
<img
src={hotel.image}
alt={hotel.name}
className="w-full h-48 object-cover"
/>
<div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-semibold">
{hotel.rating}
</div>
</div>
<div className="p-6">
<h3 className="text-2xl font-bold mb-2">{hotel.name}</h3>
<div className="flex items-center text-gray-600 mb-4">
<MapPin size={18} className="mr-2" />
<span>{hotel.location}</span>
</div>
<p className="text-gray-600 mb-4">{hotel.description}</p>
<div className="flex items-center justify-between mb-4 py-4 border-t border-gray-200">
<div className="flex items-center text-gray-600">
<Wifi size={18} className="mr-2" />
<span className="text-sm">Free Wi-Fi</span>
</div>
<div className="flex items-center text-gray-600">
<UtensilsCrossed size={18} className="mr-2" />
<span className="text-sm">Breakfast</span>
</div>
</div>
<div className="flex items-center justify-between">
<span className="text-3xl font-bold text-blue-600">{hotel.price}</span>
<button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
Book Now
</button>
</div>
</div>
</div>
))}
</div>
</div>
</section>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[
{
type: "text",
content: "Your Perfect Stay Awaits at",
},
{
type: "image",
src: "http://img.b2bpic.net/free-vector/golden-ornamental-logo-with-letter-v_1017-6165.jpg",
alt: "Hotel Park Continental",
},
type: "text", content: "Why Choose Our Multi-Hotel Platform?"},
]}
useInvertedBackground={false}
buttons={[
{ text: "Explore Facilities", href: "#amenities" },
{ text: "Check Availability", href: "/rooms" },
{ text: "Browse All Hotels", href: "#featured-hotels" },
{ text: "Check Availability", href: "#featured-hotels" },
]}
buttonAnimation="slide-up"
/>
@@ -92,39 +186,21 @@ export default function HomePage() {
<MetricCardSeven
metrics={[
{
id: "1",
value: "787+",
title: "Guest Reviews",
items: [
"3.4/5 average rating",
"Real verified feedback",
"Transparent reviews",
],
id: "1", value: "3", title: "Premium Hotels", items: [
"Carefully curated collection", "Best locations across city", "Verified guest reviews"],
},
{
id: "2",
value: "15+",
title: "Years in Business",
items: [
"Established trust",
"Loyal customer base",
"Consistent service",
],
id: "2", value: "1950+", title: "Total Guest Reviews", items: [
"Average 3.8/5 rating", "Real verified feedback", "Transparent reviews"],
},
{
id: "3",
value: "100%",
title: "Guest Satisfaction",
items: [
"Budget-friendly prices",
"Great location",
"Clean facilities",
],
id: "3", value: "100%", title: "Satisfaction Guarantee", items: [
"Competitive pricing", "Prime locations", "Quality assurance"],
},
]}
title="Why Guests Choose Us"
description="Real numbers that reflect our commitment to excellence"
tag="Our Track Record"
title="Platform Overview"
description="Connecting travelers with exceptional hotel experiences"
tag="Key Statistics"
tagIcon={Award}
textboxLayout="default"
useInvertedBackground={false}
@@ -137,69 +213,33 @@ export default function HomePage() {
<TestimonialCardThirteen
testimonials={[
{
id: "1",
name: "Rajesh Kumar",
handle: "@rajesh_traveler",
testimonial:
"Excellent value for money! The rooms are clean, staff is friendly, and the location is perfect for exploring Hyderabad. Will definitely come back.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/businessman-dress-code-wearing-grey-jacket_114579-19026.jpg?_wi=1",
imageAlt: "Rajesh Kumar",
},
id: "1", name: "Rajesh Kumar", handle: "@rajesh_traveler", testimonial:
"Excellent value for money! The rooms are clean, staff is friendly, and the location is perfect for exploring Hyderabad. Will definitely come back.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/businessman-dress-code-wearing-grey-jacket_114579-19026.jpg?_wi=1", imageAlt: "Rajesh Kumar"},
{
id: "2",
name: "Priya Sharma",
handle: "@priya_explorer",
testimonial:
"Great location near Banjara Hills. Free breakfast was delicious, and the hotel staff made our stay really comfortable. Highly recommended!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/eastern-woman-cafe_1303-5392.jpg?_wi=1",
imageAlt: "Priya Sharma",
},
id: "2", name: "Priya Sharma", handle: "@priya_explorer", testimonial:
"Great location near Banjara Hills. Free breakfast was delicious, and the hotel staff made our stay really comfortable. Highly recommended!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/eastern-woman-cafe_1303-5392.jpg?_wi=1", imageAlt: "Priya Sharma"},
{
id: "3",
name: "Amit Patel",
handle: "@amit_business",
testimonial:
"Perfect for business travelers. Good Wi-Fi, clean rooms, and helpful staff. The pool was a nice touch after a long day of meetings.",
rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-saluting_23-2149061659.jpg?_wi=1",
imageAlt: "Amit Patel",
},
id: "3", name: "Amit Patel", handle: "@amit_business", testimonial:
"Perfect for business travelers. Good Wi-Fi, clean rooms, and helpful staff. The pool was a nice touch after a long day of meetings.", rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-saluting_23-2149061659.jpg?_wi=1", imageAlt: "Amit Patel"},
{
id: "4",
name: "Neha Verma",
handle: "@neha_family",
testimonial:
"Family-friendly hotel with great facilities. The kids loved the pool, and we appreciated the budget-friendly pricing. A wonderful experience!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/mother-with-children-having-fun-hammock-mom-kids-hammock_72229-657.jpg?_wi=1",
imageAlt: "Neha Verma",
},
id: "4", name: "Neha Verma", handle: "@neha_family", testimonial:
"Family-friendly hotel with great facilities. The kids loved the pool, and we appreciated the budget-friendly pricing. A wonderful experience!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/mother-with-children-having-fun-hammock-mom-kids-hammock_72229-657.jpg?_wi=1", imageAlt: "Neha Verma"},
{
id: "5",
name: "Vikram Singh",
handle: "@vikram_wanderer",
testimonial:
"Best budget hotel in the area. Rooms are well-maintained, location is convenient, and the team is very accommodating.",
rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-businessman-formal-outfit-with-sunglasses-talking-phone_181624-33457.jpg?_wi=1",
imageAlt: "Vikram Singh",
},
id: "5", name: "Vikram Singh", handle: "@vikram_wanderer", testimonial:
"Best budget hotel in the area. Rooms are well-maintained, location is convenient, and the team is very accommodating.", rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-businessman-formal-outfit-with-sunglasses-talking-phone_181624-33457.jpg?_wi=1", imageAlt: "Vikram Singh"},
{
id: "6",
name: "Sarah Johnson",
handle: "@sarah_india",
testimonial:
"Unexpectedly impressed with the quality. For the price, you get more than you expect. Great stay in Hyderabad!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-drinking-cocktails_1157-32437.jpg?_wi=1",
imageAlt: "Sarah Johnson",
},
id: "6", name: "Sarah Johnson", handle: "@sarah_india", testimonial:
"Unexpectedly impressed with the quality. For the price, you get more than you expect. Great stay in Hyderabad!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-drinking-cocktails_1157-32437.jpg?_wi=1", imageAlt: "Sarah Johnson"},
]}
showRating={true}
title="What Our Guests Say"
description="Real experiences from travelers who have stayed with us"
description="Real experiences from travelers across our platform"
tag="Guest Reviews"
textboxLayout="default"
useInvertedBackground={false}
@@ -212,44 +252,26 @@ export default function HomePage() {
<FaqBase
faqs={[
{
id: "1",
title: "What is the check-in and check-out time?",
content:
"Check-in is from 2:00 PM and check-out is at 11:00 AM. Early check-in or late check-out may be available upon request subject to availability. Please contact the front desk for arrangements.",
},
id: "1", title: "How do I choose between different hotels on the platform?", content:
"Our platform allows you to compare hotels based on location, ratings, guest reviews, and pricing. Each hotel listing includes detailed information about amenities, policies, and guest feedback to help you make an informed decision."},
{
id: "2",
title: "Is breakfast included in the room rate?",
content:
"Yes, complimentary breakfast is included with all room bookings. Our breakfast buffet features a variety of local and international cuisine, served daily from 7:00 AM to 10:00 AM.",
},
id: "2", title: "What payment methods are accepted?", content:
"We accept all major credit cards, debit cards, UPI, and digital wallets. Secure payment processing ensures your transactions are protected. You can also choose to pay at the hotel during check-in for certain bookings."},
{
id: "3",
title: "Is parking available at the hotel?",
content:
"Yes, we offer free secure parking for all guests. Our parking facility is available 24/7 with ample space for vehicles. No additional charges apply.",
},
id: "3", title: "Is there a best time to book?", content:
"Booking in advance (7-14 days) typically offers better rates. However, we also offer last-minute deals. Check our platform regularly for seasonal promotions and special offers across all partner hotels."},
{
id: "4",
title: "What is your cancellation policy?",
content:
"We offer free cancellation up to 24 hours before check-in on most bookings. Specific terms may vary depending on your booking platform and room type. Please check your booking confirmation for exact cancellation terms.",
},
id: "4", title: "What is your cancellation policy?", content:
"Cancellation policies vary by hotel and booking type. Most bookings offer free cancellation up to 24 hours before check-in. Non-refundable rates may have stricter policies. Check your booking confirmation for specific terms."},
{
id: "5",
title: "How far is the hotel from the airport?",
content:
"Hotel Park Continental is approximately 28 km from Rajiv Gandhi International Airport. The journey typically takes 45-60 minutes depending on traffic. We can arrange airport pickup upon request.",
},
id: "5", title: "Can I modify my booking after confirmation?", content:
"Yes, most bookings can be modified through your account dashboard. You can change dates, rooms, or number of guests subject to availability and hotel policies. Contact our support team for complex modifications."},
{
id: "6",
title: "Are pets allowed at the hotel?",
content:
"We welcome pets on request. Please inform us during booking so we can make necessary arrangements. Additional pet fees may apply. Contact the hotel directly to confirm current pet policies.",
},
id: "6", title: "How do I earn loyalty rewards?", content:
"Every booking through our platform earns you loyalty points. Accumulate points to unlock discounts, free nights, and exclusive perks at our partner hotels. Sign up for our rewards program to start earning today."},
]}
title="Frequently Asked Questions"
description="Get quick answers to common booking and stay questions"
description="Everything you need to know about booking through our platform"
tag="Help & Support"
textboxLayout="default"
useInvertedBackground={true}
@@ -259,11 +281,11 @@ export default function HomePage() {
<div id="contact" data-section="contact">
<ContactText
text="Ready to book your stay? Get in touch with our team today for special rates and personalized recommendations."
text="Ready to book your perfect stay? Explore our collection of premium hotels and find the one that matches your needs. Our team is here to help you 24/7."
animationType="entrance-slide"
buttons={[
{ text: "Book a Room", href: "/rooms" },
{ text: "Call Us Now", href: "tel:+919121109950" },
{ text: "Browse Hotels", href: "#featured-hotels" },
{ text: "Contact Support", href: "tel:+919121109950" },
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
@@ -272,27 +294,21 @@ export default function HomePage() {
<div id="footer" data-section="footer">
<FooterCard
logoText="Hotel Park Continental"
copyrightText="© 2025 Hotel Park Continental. All rights reserved."
logoText="Multi-Hotel Platform"
copyrightText="© 2025 Multi-Hotel Platform. All rights reserved."
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/hotelparkcontinental",
ariaLabel: "Facebook",
},
href: "https://facebook.com/multihotelplatform", ariaLabel: "Facebook"},
{
icon: Twitter,
href: "https://twitter.com/parkcontinental",
ariaLabel: "Twitter",
},
href: "https://twitter.com/multihotel", ariaLabel: "Twitter"},
{
icon: Instagram,
href: "https://instagram.com/parkcontinental",
ariaLabel: "Instagram",
},
href: "https://instagram.com/multihotelplatform", ariaLabel: "Instagram"},
]}
/>
</div>
</ThemeProvider>
);
}
}