308 lines
19 KiB
TypeScript
308 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Sparkles, Heart, CheckCircle, Gem } from "lucide-react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
|
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Services", id: "#services" },
|
|
{ name: "Packages", id: "#packages" },
|
|
{ name: "Testimonials", id: "#testimonials" },
|
|
{ name: "Contact", id: "#contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Umrah Packages", href: "#packages" },
|
|
{ label: "Hajj Packages", href: "#packages" },
|
|
{ label: "Custom Itineraries", href: "#contact" },
|
|
{ label: "Group Tours", href: "#packages" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Our Team", href: "/about" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Blog", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Emergency Support", href: "#" },
|
|
{ label: "Travel Tips", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cancellation Policy", href: "#" },
|
|
{ label: "Refund Policy", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "WhatsApp", href: "https://wa.me" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Al Sabil Ul Kaba"
|
|
navItems={navItems}
|
|
button={{
|
|
text: "Book Now", href: "/contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Your Sacred Journey Awaits"
|
|
description="Experience the spiritual pilgrimage of a lifetime with Al Sabil Ul Kaba. Expert guidance, seamless arrangements, and unforgettable memories."
|
|
tag="Trusted Hajj & Umrah Partner"
|
|
tagIcon={Sparkles}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
buttons={[
|
|
{ text: "Explore Packages", href: "#packages" },
|
|
{ text: "Learn More", href: "#about" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-vector/eid-al-adha-mubarak-islamic-background_1055-7013.jpg"
|
|
imageAlt="Aerial view of the Holy Kaaba"
|
|
mediaAnimation="slide-up"
|
|
marqueeItems={[
|
|
{ type: "text", text: "1000+ Pilgrims Served" },
|
|
{ type: "text", text: "20+ Years Experience" },
|
|
{ type: "text", text: "24/7 Support" },
|
|
{ type: "text", text: "IATA Certified" },
|
|
]}
|
|
marqueeSpeed={35}
|
|
showMarqueeCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About Our Agency"
|
|
tagIcon={Heart}
|
|
title="Dedicated to Your Spiritual Journey with Excellence and Care"
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "Our Story", href: "#about" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardSixteen
|
|
title="Why Al Sabil Ul Kaba Stands Apart"
|
|
description="Experience the difference of working with seasoned pilgrimage professionals who prioritize your comfort and spiritual fulfillment."
|
|
tag="Our Advantage"
|
|
tagIcon={CheckCircle}
|
|
negativeCard={{
|
|
items: [
|
|
"Rushed, impersonal experiences", "Hidden costs and surprises", "Limited support during journey", "Overcrowded group tours"],
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"Personalized pilgrimage planning", "Transparent, all-inclusive pricing", "24/7 dedicated support", "Small groups with expert guides"],
|
|
}}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="packages" data-section="packages">
|
|
<PricingCardNine
|
|
title="Hajj & Umrah Packages"
|
|
description="Choose from our carefully curated pilgrimage packages designed for every budget and spiritual preference."
|
|
tag="Transparent Pricing"
|
|
tagIcon={Gem}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "umrah-lite", title: "Umrah Lite", price: "$1,299", period: "per person", features: [
|
|
"7-day journey", "3-star hotel accommodation", "Daily guided tours", "Visa assistance", "Airport transfers"],
|
|
button: {
|
|
text: "Select Plan", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-psd/hajj-leaderboard-banner-template-design_23-2151976612.jpg", imageAlt: "Umrah Lite Package"},
|
|
{
|
|
id: "umrah-premium", title: "Umrah Premium", price: "$1,999", period: "per person", features: [
|
|
"10-day luxury journey", "4-star hotel accommodations", "Expert Islamic scholars", "Personalized itineraries", "Premium meals included", "Travel insurance"],
|
|
button: {
|
|
text: "Select Plan", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/luxury-resort-with-pool-arched-architecture_23-2152008241.jpg", imageAlt: "Umrah Premium Package"},
|
|
{
|
|
id: "hajj-complete", title: "Hajj Complete", price: "$3,499", period: "per person", features: [
|
|
"30-day complete hajj", "5-star accommodations", "Experienced hajj guides", "All meals and transportation", "Medical support team", "Post-hajj support", "Complete travel insurance"],
|
|
button: {
|
|
text: "Reserve Spot", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/group-pakistani-man-wearing-traditional-clothes-salwar-kameez-kurta_627829-4885.jpg", imageAlt: "Hajj Complete Package"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Our Track Record"
|
|
description="Years of dedication to delivering exceptional hajj and umrah experiences."
|
|
tag="Proven Excellence"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "1000+", title: "Successful Pilgrimages", items: [
|
|
"Clients from 30+ countries", "98% satisfaction rate", "Repeat pilgrims welcome"],
|
|
},
|
|
{
|
|
id: "2", value: "20+", title: "Years of Experience", items: [
|
|
"Expert staff training", "Certified guides", "Established partnerships"],
|
|
},
|
|
{
|
|
id: "3", value: "24/7", title: "On-Ground Support", items: [
|
|
"Emergency assistance", "Language support", "Medical coordination"],
|
|
},
|
|
{
|
|
id: "4", value: "100%", title: "Transparent Pricing", items: [
|
|
"No hidden fees", "All-inclusive packages", "Money-back guarantee"],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Pilgrims Say"
|
|
description="Real experiences from those who entrusted their sacred journey to Al Sabil Ul Kaba."
|
|
tag="Testimonials"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Fatima Ahmed, Canada", date: "Date: March 2024", tag: "Umrah Premium", title: "A Life-Changing Experience", quote: "Al Sabil Ul Kaba made my umrah journey unforgettable. Their guides were knowledgeable, accommodations were pristine, and every detail was perfectly arranged. I felt safe and spiritually fulfilled throughout. Highly recommended!", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-model-with-afro-curls-hairstyle-dressed-summer-hipster-white-dress-hat_158538-809.jpg", avatarAlt: "Fatima Ahmed", imageSrc: "http://img.b2bpic.net/free-photo/eid-al-fitr-concept-with-arab-food-friends_23-2147799428.jpg", imageAlt: "Pilgrimage experience"},
|
|
{
|
|
id: "2", name: "Mohammed Hassan, UK", date: "Date: February 2024", tag: "Hajj Complete", title: "Professional and Compassionate", quote: "Their hajj package exceeded all my expectations. The staff's compassion and professionalism made the journey smooth. The medical support team was always available. This is truly a world-class service.", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-young-person-barbeque_23-2149271988.jpg", avatarAlt: "Mohammed Hassan", imageSrc: "http://img.b2bpic.net/free-photo/muslim-man-eating-restaurant_23-2147794334.jpg", imageAlt: "Pilgrimage gathering"},
|
|
{
|
|
id: "3", name: "Aisha Khan, USA", date: "Date: January 2024", tag: "Umrah Lite", title: "Best Value for Money", quote: "I was amazed at how much was included in the Umrah Lite package. No hidden costs, wonderful accommodations, and the guides were incredibly knowledgeable about Islamic history. Worth every penny!", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-brown-eyed-asian-woman-stylish-glasses-red-beret-french-style-beige-trench-coat-looking-front-against-window_197531-16935.jpg", avatarAlt: "Aisha Khan", imageSrc: "http://img.b2bpic.net/free-photo/muslim-people-praying-sujud-posture_53876-20959.jpg", imageAlt: "Sacred mosque"},
|
|
{
|
|
id: "4", name: "Omar Abdullah, Australia", date: "Date: December 2023", tag: "Umrah Premium", title: "Exceeded My Expectations", quote: "From booking to returning home, Al Sabil Ul Kaba provided exceptional service. The personalized itinerary perfectly matched my spiritual goals. The 24/7 support was invaluable. I'm already booking my next pilgrimage!", avatarSrc: "http://img.b2bpic.net/free-photo/confident-young-man-walking-european-city-street_158595-4722.jpg", avatarAlt: "Omar Abdullah", imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-arab-restaurant_23-2147794343.jpg", imageAlt: "Pilgrimage dining"},
|
|
{
|
|
id: "5", name: "Zainab Mohamed, UAE", date: "Date: November 2023", tag: "Hajj Complete", title: "Spiritual Journey Made Easy", quote: "Hajj is a life-altering pillar of Islam, and Al Sabil Ul Kaba honored that sacred responsibility. Every arrangement was thoughtful, every guide was prepared. My family and I felt completely at ease.", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-woman-wearing-halal-outdoors_23-2150701497.jpg", avatarAlt: "Zainab Mohamed", imageSrc: "http://img.b2bpic.net/free-photo/person-holding-holy-bracelet-full-moon_23-2148288864.jpg", imageAlt: "Sacred moment"},
|
|
{
|
|
id: "6", name: "Ibrahim Hassan, Malaysia", date: "Date: October 2023", tag: "Umrah Lite", title: "Highly Recommend", quote: "I've done umrah three times, and this was the best experience. The guides' expertise, the hotel quality, and the personalized attention set Al Sabil Ul Kaba apart. Already referred them to my friends.", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-talking-phone_23-2148230757.jpg", avatarAlt: "Ibrahim Hassan", imageSrc: "http://img.b2bpic.net/free-vector/ramadan-background-with-monument-blurred-style_23-2147801120.jpg", imageAlt: "Mecca beauty"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about our hajj and umrah services."
|
|
textPosition="left"
|
|
useInvertedBackground={true}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What is included in the packages?", content:
|
|
"All packages include accommodation, daily guided tours, meals (as specified), airport transfers, visa assistance, and 24/7 support. Hajj Complete includes travel insurance and medical support. Check individual package details for specifics."},
|
|
{
|
|
id: "2", title: "How far in advance should I book?", content:
|
|
"We recommend booking 3-6 months in advance for umrah and 6-12 months for hajj to ensure the best rates and accommodation availability. Early bookings also allow proper visa processing."},
|
|
{
|
|
id: "3", title: "What documents do I need?", content:
|
|
"You'll need a valid passport (at least 6 months validity), vaccination records, and travel insurance. We provide complete visa assistance and guide you through all documentation requirements."},
|
|
{
|
|
id: "4", title: "Is travel insurance included?", content:
|
|
"Travel insurance is included in the Hajj Complete package. For Umrah packages, comprehensive travel insurance can be added for an additional fee and is highly recommended."},
|
|
{
|
|
id: "5", title: "Can I customize my package?", content:
|
|
"Absolutely! We offer personalized itineraries. Contact our team to discuss your specific needs, spiritual goals, and preferences. We'll create a tailored pilgrimage experience just for you."},
|
|
{
|
|
id: "6", title: "What if I need to cancel?", content:
|
|
"We offer flexible cancellation policies. Cancellations made 60+ days before departure receive a full refund minus processing fees. Cancellations within 30 days may have different terms. Review our full policy or contact us."},
|
|
{
|
|
id: "7", title: "Do you provide guides who speak my language?", content:
|
|
"Yes! Our guides are multilingual, including English, Arabic, Urdu, Bengali, Malay, and more. We accommodate language preferences based on your needs."},
|
|
{
|
|
id: "8", title: "What is your refund policy?", content:
|
|
"We're committed to your satisfaction. If you're unsatisfied with any aspect of service, we'll work to resolve it immediately. We also offer a money-back guarantee for major issues."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Begin Your Sacred Journey"
|
|
description="Ready to experience the pilgrimage of a lifetime? Contact us today to discuss your hajj or umrah aspirations. Our dedicated team is here to guide you every step of the way."
|
|
inputs={[
|
|
{
|
|
name: "fullName", type: "text", placeholder: "Your Full Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email Address", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "tel", placeholder: "Your Phone Number", required: true,
|
|
},
|
|
{
|
|
name: "package", type: "text", placeholder: "Interested Package (e.g., Umrah Lite, Hajj Complete)", required: false,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your pilgrimage goals and any special requests...", rows: 5,
|
|
required: true,
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/english-teacher-elements-arrangement_23-2148999508.jpg"
|
|
imageAlt="Pilgrimage planning booking travel arrangement"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Inquiry"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Al Sabil Ul Kaba"
|
|
columns={footerColumns}
|
|
copyrightText="© 2025 Al Sabil Ul Kaba. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |