Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
70
src/app/blog/page.tsx
Normal file
70
src/app/blog/page.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
|
||||
import { Globe, Instagram, Facebook, Linkedin } from "lucide-react";
|
||||
|
||||
export default function BlogPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Destinations", id: "destinations" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Blog", href: "/blog" }
|
||||
]}
|
||||
brandName="Luxuria"
|
||||
button={{ text: "Plan Your Trip", href: "#contact" }}
|
||||
/>
|
||||
<BlogCardTwo
|
||||
tag="Insights"
|
||||
tagIcon={Globe}
|
||||
title="Maritime News & Trends"
|
||||
description="Stay updated with the latest in freight, regulations, and sustainable shipping."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Freight", title: "Current Global Freight Trends and Market Outlook", excerpt: "An in-depth analysis of the factors shaping global freight markets, including supply chain disruptions, geopolitical influences, and evolving consumer demands.", imageSrc: "https://assets.website-files.com/657416973167123924f35835/65b1607519e48f8f2b186b4d_article_placeholder_01.webp", imageAlt: "Global shipping containers at port", authorName: "Luxuria Team", authorAvatar: "/templates/luxury-travel-agency/contact/contact1.webp", date: "January 15, 2024", onBlogClick: () => console.log('Read more about freight trends')
|
||||
},
|
||||
{
|
||||
id: "2", category: "Regulations", title: "IMO 2023: Key Changes and Their Impact on Shipping", excerpt: "Explore the significant regulatory updates from IMO 2023, focusing on environmental compliance, safety standards, and operational implications for maritime operators worldwide.", imageSrc: "https://assets.website-files.com/657416973167123924f35835/65b16076b1f28b76ce8f0148_article_placeholder_02.webp", imageAlt: "IMO 2023 regulation documents", authorName: "Luxuria Team", authorAvatar: "/templates/luxury-travel-agency/contact/contact1.webp", date: "February 1, 2024", onBlogClick: () => console.log('Read more about IMO 2023 regulations')
|
||||
},
|
||||
{
|
||||
id: "3", category: "Sustainability", title: "The Rise of Green Fuels in the Maritime Industry", excerpt: "A comprehensive look at the emerging market for sustainable marine fuels, including advancements in LNG, methanol, and ammonia, and their role in decarbonizing shipping.", imageSrc: "https://assets.website-files.com/657416973167123924f35835/65b160762c2f6d231e3b2e54_article_placeholder_03.webp", imageAlt: "Green fuel ship concept", authorName: "Luxuria Team", authorAvatar: "/templates/luxury-travel-agency/contact/contact1.webp", date: "February 15, 2024", onBlogClick: () => console.log('Read more about green fuel market')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<FooterCard
|
||||
logoText="Luxuria"
|
||||
copyrightText="© 2025 Luxuria Travel | Luxury Journeys Worldwide"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
148
src/app/fleet/page.tsx
Normal file
148
src/app/fleet/page.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { Instagram, Facebook, Linkedin } from "lucide-react";
|
||||
|
||||
// Define ship data
|
||||
const ALL_SHIPS = [
|
||||
{
|
||||
id: "1", brand: "Container Ship", name: "MSC Gaia", price: "Capacity: 24,300 TEU", rating: 5,
|
||||
reviewCount: "Specs: LOA 400m, Beam 61.5m, Speed 22kn", imageSrc: "/templates/luxury-travel-agency/hero/hero1.webp", imageAlt: "Container Ship MSC Gaia", isFavorited: true,
|
||||
},
|
||||
{
|
||||
id: "2", brand: "Bulk Carrier", name: "MV Cape Blossom", price: "Tonnage: 180,000 DWT", rating: 4,
|
||||
reviewCount: "Specs: LOA 292m, Beam 45m, Speed 15kn", imageSrc: "/templates/luxury-travel-agency/hero/hero2.webp", imageAlt: "Bulk Carrier MV Cape Blossom", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "3", brand: "Tanker", name: "VLCC Nautilus", price: "Capacity: 300,000 DWT", rating: 5,
|
||||
reviewCount: "Specs: LOA 330m, Beam 60m, Speed 16kn", imageSrc: "/templates/luxury-travel-agency/hero/hero3.jpg", imageAlt: "VLCC Nautilus Tanker", isFavorited: true,
|
||||
},
|
||||
{
|
||||
id: "4", brand: "Ro-Ro", name: "MV Grande Torino", price: "Capacity: 3,000 Lane Metres", rating: 4,
|
||||
reviewCount: "Specs: LOA 180m, Beam 26m, Speed 20kn", imageSrc: "/templates/luxury-travel-agency/hero/hero4.jpg", imageAlt: "Ro-Ro MV Grande Torino", isFavorited: true,
|
||||
},
|
||||
{
|
||||
id: "5", brand: "Container Ship", name: "Ever Ace", price: "Capacity: 23,992 TEU", rating: 5,
|
||||
reviewCount: "Specs: LOA 400m, Beam 61.5m, Speed 22kn", imageSrc: "/templates/luxury-travel-agency/destination/destination1.webp", imageAlt: "Container Ship Ever Ace", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "6", brand: "Bulk Carrier", name: "MV Ore Brasil", price: "Tonnage: 400,000 DWT", rating: 5,
|
||||
reviewCount: "Specs: LOA 362m, Beam 65m, Speed 15kn", imageSrc: "/templates/luxury-travel-agency/destination/destination2.webp", imageAlt: "Bulk Carrier MV Ore Brasil", isFavorited: true,
|
||||
},
|
||||
{
|
||||
id: "7", brand: "Tanker", name: "Suezmax Ocean", price: "Capacity: 160,000 DWT", rating: 4,
|
||||
reviewCount: "Specs: LOA 274m, Beam 48m, Speed 15kn", imageSrc: "/templates/luxury-travel-agency/destination/destination3.webp", imageAlt: "Suezmax Ocean Tanker", isFavorited: true,
|
||||
},
|
||||
{
|
||||
id: "8", brand: "Ro-Ro", name: "MV European Highway", price: "Capacity: 4,500 Lane Metres", rating: 5,
|
||||
reviewCount: "Specs: LOA 200m, Beam 32m, Speed 21kn", imageSrc: "/templates/luxury-travel-agency/destination/destination4.webp", imageAlt: "Ro-Ro MV European Highway", isFavorited: false,
|
||||
},
|
||||
];
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Destinations", id: "destinations" },
|
||||
{ name: "Fleet", id: "/fleet" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
];
|
||||
|
||||
export default function FleetPage() {
|
||||
const [filter, setFilter] = useState("All");
|
||||
|
||||
const filteredShips = ALL_SHIPS.filter(ship =>
|
||||
filter === "All" ? true : ship.brand === filter
|
||||
);
|
||||
|
||||
const shipTypes = ["All", ...new Set(ALL_SHIPS.map(ship => ship.brand))];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={NAV_ITEMS}
|
||||
brandName="Luxuria"
|
||||
button={{ text: "Plan Your Trip", href: "#contact" }}
|
||||
/>
|
||||
|
||||
<div id="fleet" data-section="fleet" className="pt-40 pb-20 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-5xl font-bold text-center mb-12">Our Fleet</h1>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-12">
|
||||
{shipTypes.map(type => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => setFilter(type)}
|
||||
className={`px-6 py-2 rounded-full text-lg font-semibold transition-colors duration-200
|
||||
${filter === type
|
||||
? "bg-primary-cta text-primary-cta-foreground shadow-lg"
|
||||
: "bg-secondary-cta text-secondary-cta-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
}`}
|
||||
>
|
||||
{type}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ProductCardTwo
|
||||
title=""
|
||||
description=""
|
||||
products={filteredShips.map(ship => ({
|
||||
id: ship.id,
|
||||
brand: ship.brand,
|
||||
name: ship.name,
|
||||
price: ship.price,
|
||||
rating: ship.rating,
|
||||
reviewCount: ship.reviewCount,
|
||||
imageSrc: ship.imageSrc,
|
||||
imageAlt: ship.imageAlt
|
||||
}))}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
uniformGridCustomHeightClasses="min-h-[500px]"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="default"
|
||||
className="bg-transparent"
|
||||
cardClassName="bg-card shadow-lg hover:shadow-xl transition-shadow duration-300"
|
||||
imageClassName="object-cover h-64 w-full"
|
||||
cardBrandClassName="text-accent text-sm font-medium"
|
||||
cardNameClassName="text-xl font-bold"
|
||||
cardPriceClassName="text-lg text-foreground mt-1"
|
||||
cardRatingClassName="text-sm text-muted-foreground"
|
||||
textBoxTitleClassName="hidden"
|
||||
textBoxDescriptionClassName="hidden"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FooterCard
|
||||
logoText="Luxuria"
|
||||
copyrightText="© 2025 Luxuria Travel | Luxury Journeys Worldwide"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" }
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -8,19 +8,17 @@ import Tag from "@/tag/Tag";
|
||||
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant",
|
||||
subsets: ["latin"],
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Opulent Journeys | Luxury Travel Agency',
|
||||
description: 'Discover unparalleled luxury travel experiences. Bespoke itineraries, exclusive access, and world-class service for discerning travelers.',
|
||||
description: 'Experience the world with Opulent Journeys. We offer bespoke luxury travel, exclusive destinations, and unparalleled service for discerning travelers.',
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
156
src/app/page.tsx
156
src/app/page.tsx
@@ -7,7 +7,6 @@ import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
||||
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
|
||||
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
@@ -34,16 +33,16 @@ export default function LuxuryTravelAgencyTemplatePage() {
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Destinations", id: "destinations" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Contact", href: "/contact" },
|
||||
]}
|
||||
brandName="Luxuria"
|
||||
button={{ text: "Plan Your Trip", href: "#contact" }}
|
||||
button={{ text: "Plan Your Trip", href: "/contact" }}
|
||||
/>
|
||||
<HeroCarouselLogo
|
||||
logoText="Luxuria"
|
||||
description="Experience the world's most extraordinary destinations with our bespoke luxury travel experiences curated just for you."
|
||||
buttons={[
|
||||
{ text: "Plan Your Journey", href: "#contact" },
|
||||
{ text: "Plan Your Journey", href: "/contact" },
|
||||
{ text: "Explore Destinations", href: "#destinations" },
|
||||
]}
|
||||
slides={[
|
||||
@@ -80,35 +79,15 @@ export default function LuxuryTravelAgencyTemplatePage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Private Aviation",
|
||||
description: "Charter flights and private jet services to any destination worldwide.",
|
||||
imageSrc: "/templates/luxury-travel-agency/services/service5.webp",
|
||||
imageAlt: "Private jet",
|
||||
},
|
||||
title: "Private Aviation", description: "Charter flights and private jet services to any destination worldwide.", imageSrc: "/templates/luxury-travel-agency/services/service5.webp", imageAlt: "Private jet"},
|
||||
{
|
||||
title: "Luxury Accommodations",
|
||||
description: "Handpicked five-star hotels, villas, and exclusive resorts.",
|
||||
imageSrc: "/templates/luxury-travel-agency/services/service1.webp",
|
||||
imageAlt: "Luxury hotel",
|
||||
},
|
||||
title: "Luxury Accommodations", description: "Handpicked five-star hotels, villas, and exclusive resorts.", imageSrc: "/templates/luxury-travel-agency/services/service1.webp", imageAlt: "Luxury hotel"},
|
||||
{
|
||||
title: "Curated Experiences",
|
||||
description: "Unique adventures and cultural immersions designed just for you.",
|
||||
imageSrc: "/templates/luxury-travel-agency/services/service4.webp",
|
||||
imageAlt: "Experience",
|
||||
},
|
||||
title: "Curated Experiences", description: "Unique adventures and cultural immersions designed just for you.", imageSrc: "/templates/luxury-travel-agency/services/service4.webp", imageAlt: "Experience"},
|
||||
{
|
||||
title: "Fine Dining",
|
||||
description: "Reservations at Michelin-starred restaurants and private chef services.",
|
||||
imageSrc: "/templates/luxury-travel-agency/services/service3.webp",
|
||||
imageAlt: "Fine dining",
|
||||
},
|
||||
title: "Fine Dining", description: "Reservations at Michelin-starred restaurants and private chef services.", imageSrc: "/templates/luxury-travel-agency/services/service3.webp", imageAlt: "Fine dining"},
|
||||
{
|
||||
title: "Photography Tours",
|
||||
description: "Professional photographers to capture your once-in-a-lifetime moments.",
|
||||
imageSrc: "/templates/luxury-travel-agency/services/service2.webp",
|
||||
imageAlt: "Photography",
|
||||
}
|
||||
title: "Photography Tours", description: "Professional photographers to capture your once-in-a-lifetime moments.", imageSrc: "/templates/luxury-travel-agency/services/service2.webp", imageAlt: "Photography"}
|
||||
]}
|
||||
/>
|
||||
<FeatureCardNine
|
||||
@@ -123,23 +102,17 @@ export default function LuxuryTravelAgencyTemplatePage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Share Your Vision",
|
||||
description: "Tell us about your dream destination and travel preferences.",
|
||||
phoneOne: { imageSrc: "/templates/luxury-travel-agency/phone/phone5.webp", imageAlt: "Consultation" },
|
||||
title: "Share Your Vision", description: "Tell us about your dream destination and travel preferences.", phoneOne: { imageSrc: "/templates/luxury-travel-agency/phone/phone5.webp", imageAlt: "Consultation" },
|
||||
phoneTwo: { imageSrc: "/templates/luxury-travel-agency/phone/phone6.webp", imageAlt: "Planning" },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Custom Itinerary",
|
||||
description: "Receive a bespoke travel plan crafted by our expert advisors.",
|
||||
phoneOne: { imageSrc: "/templates/luxury-travel-agency/phone/phone3.webp", imageAlt: "Itinerary" },
|
||||
title: "Custom Itinerary", description: "Receive a bespoke travel plan crafted by our expert advisors.", phoneOne: { imageSrc: "/templates/luxury-travel-agency/phone/phone3.webp", imageAlt: "Itinerary" },
|
||||
phoneTwo: { imageSrc: "/templates/luxury-travel-agency/phone/phone4.webp", imageAlt: "Details" },
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Seamless Experience",
|
||||
description: "Enjoy your journey while we handle every detail behind the scenes.",
|
||||
phoneOne: { imageSrc: "/templates/luxury-travel-agency/phone/phone1.webp", imageAlt: "Travel" },
|
||||
title: "Seamless Experience", description: "Enjoy your journey while we handle every detail behind the scenes.", phoneOne: { imageSrc: "/templates/luxury-travel-agency/phone/phone1.webp", imageAlt: "Travel" },
|
||||
phoneTwo: { imageSrc: "/templates/luxury-travel-agency/phone/phone2.webp", imageAlt: "Experience" },
|
||||
},
|
||||
]}
|
||||
@@ -154,53 +127,17 @@ export default function LuxuryTravelAgencyTemplatePage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Maldives Private Island",
|
||||
description: "Exclusive overwater villas with direct lagoon access and private butler service.",
|
||||
tag: "Asia",
|
||||
imageSrc: "/templates/luxury-travel-agency/destination/destination6.webp",
|
||||
imageAlt: "Maldives",
|
||||
},
|
||||
id: "1", title: "Maldives Private Island", description: "Exclusive overwater villas with direct lagoon access and private butler service.", tag: "Asia", imageSrc: "/templates/luxury-travel-agency/destination/destination6.webp", imageAlt: "Maldives"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Swiss Alpine Retreat",
|
||||
description: "Secluded mountain chalets with panoramic views and world-class skiing.",
|
||||
tag: "Europe",
|
||||
imageSrc: "/templates/luxury-travel-agency/destination/destination5.webp",
|
||||
imageAlt: "Switzerland",
|
||||
},
|
||||
id: "2", title: "Swiss Alpine Retreat", description: "Secluded mountain chalets with panoramic views and world-class skiing.", tag: "Europe", imageSrc: "/templates/luxury-travel-agency/destination/destination5.webp", imageAlt: "Switzerland"},
|
||||
{
|
||||
id: "3",
|
||||
title: "African Safari Lodge",
|
||||
description: "Intimate wildlife encounters in the heart of the Serengeti.",
|
||||
tag: "Africa",
|
||||
imageSrc: "/templates/luxury-travel-agency/destination/destination1.webp",
|
||||
imageAlt: "Safari",
|
||||
},
|
||||
id: "3", title: "African Safari Lodge", description: "Intimate wildlife encounters in the heart of the Serengeti.", tag: "Africa", imageSrc: "/templates/luxury-travel-agency/destination/destination1.webp", imageAlt: "Safari"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Amalfi Coast Villa",
|
||||
description: "Clifftop estates with Mediterranean views and private beach access.",
|
||||
tag: "Europe",
|
||||
imageSrc: "/templates/luxury-travel-agency/destination/destination4.webp",
|
||||
imageAlt: "Amalfi Coast",
|
||||
},
|
||||
id: "4", title: "Amalfi Coast Villa", description: "Clifftop estates with Mediterranean views and private beach access.", tag: "Europe", imageSrc: "/templates/luxury-travel-agency/destination/destination4.webp", imageAlt: "Amalfi Coast"},
|
||||
{
|
||||
id: "5",
|
||||
title: "Kyoto Ryokan",
|
||||
description: "Traditional Japanese inns with zen gardens and kaiseki dining.",
|
||||
tag: "Asia",
|
||||
imageSrc: "/templates/luxury-travel-agency/destination/destination3.webp",
|
||||
imageAlt: "Kyoto",
|
||||
},
|
||||
id: "5", title: "Kyoto Ryokan", description: "Traditional Japanese inns with zen gardens and kaiseki dining.", tag: "Asia", imageSrc: "/templates/luxury-travel-agency/destination/destination3.webp", imageAlt: "Kyoto"},
|
||||
{
|
||||
id: "6",
|
||||
title: "Patagonia Eco Lodge",
|
||||
description: "Remote wilderness retreats surrounded by glaciers and pristine nature.",
|
||||
tag: "South America",
|
||||
imageSrc: "/templates/luxury-travel-agency/destination/destination2.webp",
|
||||
imageAlt: "Patagonia",
|
||||
},
|
||||
id: "6", title: "Patagonia Eco Lodge", description: "Remote wilderness retreats surrounded by glaciers and pristine nature.", tag: "South America", imageSrc: "/templates/luxury-travel-agency/destination/destination2.webp", imageAlt: "Patagonia"},
|
||||
]}
|
||||
/>
|
||||
<TestimonialCardFive
|
||||
@@ -212,64 +149,13 @@ export default function LuxuryTravelAgencyTemplatePage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Victoria Sterling",
|
||||
date: "December 2024",
|
||||
title: "An absolutely flawless experience from start to finish",
|
||||
quote: "Luxuria transformed our anniversary trip into something truly magical. Every detail was perfect, from the private transfers to the surprise sunset dinner on the beach. Their team anticipated our every need.",
|
||||
tag: "Maldives",
|
||||
avatarSrc: "/templates/luxury-travel-agency/testimonial/testimonial1.webp",
|
||||
avatarAlt: "Victoria Sterling",
|
||||
imageSrc: "/templates/luxury-travel-agency/testimonial/testimonial1.webp",
|
||||
imageAlt: "Maldives trip",
|
||||
},
|
||||
id: "1", name: "Victoria Sterling", date: "December 2024", title: "An absolutely flawless experience from start to finish", quote: "Luxuria transformed our anniversary trip into something truly magical. Every detail was perfect, from the private transfers to the surprise sunset dinner on the beach. Their team anticipated our every need.", tag: "Maldives", avatarSrc: "/templates/luxury-travel-agency/testimonial/testimonial1.webp", avatarAlt: "Victoria Sterling", imageSrc: "/templates/luxury-travel-agency/testimonial/testimonial1.webp", imageAlt: "Maldives trip"},
|
||||
{
|
||||
id: "2",
|
||||
name: "James & Elizabeth Moore",
|
||||
date: "November 2024",
|
||||
title: "Beyond our wildest expectations",
|
||||
quote: "Our safari honeymoon was nothing short of extraordinary. The lodges were spectacular, the wildlife encounters unforgettable, and the attention to detail was impeccable throughout our journey.",
|
||||
tag: "Tanzania",
|
||||
avatarSrc: "/templates/luxury-travel-agency/testimonial/testimonial2.webp",
|
||||
avatarAlt: "James & Elizabeth Moore",
|
||||
imageSrc: "/templates/luxury-travel-agency/testimonial/testimonial2.webp",
|
||||
imageAlt: "Safari experience",
|
||||
},
|
||||
id: "2", name: "James & Elizabeth Moore", date: "November 2024", title: "Beyond our wildest expectations", quote: "Our safari honeymoon was nothing short of extraordinary. The lodges were spectacular, the wildlife encounters unforgettable, and the attention to detail was impeccable throughout our journey.", tag: "Tanzania", avatarSrc: "/templates/luxury-travel-agency/testimonial/testimonial2.webp", avatarAlt: "James & Elizabeth Moore", imageSrc: "/templates/luxury-travel-agency/testimonial/testimonial2.webp", imageAlt: "Safari experience"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Roberta Chen",
|
||||
date: "October 2024",
|
||||
title: "The definition of luxury travel",
|
||||
quote: "From the private jet charter to the exclusive vineyard tours, Luxuria curated an experience that exceeded all my expectations. Their network of contacts opened doors I never knew existed.",
|
||||
tag: "France",
|
||||
avatarSrc: "/templates/luxury-travel-agency/testimonial/testimonial3.webp",
|
||||
avatarAlt: "Roberta Chen",
|
||||
imageSrc: "/templates/luxury-travel-agency/testimonial/testimonial3.webp",
|
||||
imageAlt: "France trip",
|
||||
},
|
||||
id: "3", name: "Roberta Chen", date: "October 2024", title: "The definition of luxury travel", quote: "From the private jet charter to the exclusive vineyard tours, Luxuria curated an experience that exceeded all my expectations. Their network of contacts opened doors I never knew existed.", tag: "France", avatarSrc: "/templates/luxury-travel-agency/testimonial/testimonial3.webp", avatarAlt: "Roberta Chen", imageSrc: "/templates/luxury-travel-agency/testimonial/testimonial3.webp", imageAlt: "France trip"},
|
||||
]}
|
||||
/>
|
||||
<ContactSplitForm
|
||||
title="Plan Your Journey"
|
||||
description="Let us create your perfect luxury travel experience"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="/templates/luxury-travel-agency/contact/contact1.webp"
|
||||
imageAlt="Luxury travel"
|
||||
mediaPosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Start Planning"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number" },
|
||||
{ name: "destination", type: "text", placeholder: "Dream Destination" },
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your ideal travel experience...",
|
||||
rows: 4,
|
||||
}}
|
||||
/>
|
||||
<FooterCard
|
||||
logoText="Luxuria"
|
||||
copyrightText="© 2025 Luxuria Travel | Luxury Journeys Worldwide"
|
||||
@@ -282,4 +168,4 @@ export default function LuxuryTravelAgencyTemplatePage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
227
src/app/quote-calculator/page.tsx
Normal file
227
src/app/quote-calculator/page.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useCallback, useEffect } from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { Instagram, Facebook, Linkedin } from "lucide-react";
|
||||
|
||||
export default function QuoteCalculatorPage() {
|
||||
const [departurePort, setDeparturePort] = useState("");
|
||||
const [arrivalPort, setArrivalPort] = useState("");
|
||||
const [cargoType, setCargoType] = useState("");
|
||||
const [weight, setWeight] = useState(0);
|
||||
const [volume, setVolume] = useState(0);
|
||||
const [isCharter, setIsCharter] = useState(false);
|
||||
const [estimatedCost, setEstimatedCost] = useState(0);
|
||||
|
||||
const calculateCost = useCallback(() => {
|
||||
let baseCost = 1000; // Base cost
|
||||
let factor = 1;
|
||||
|
||||
if (departurePort && arrivalPort) {
|
||||
// Simple logic for demonstration
|
||||
if (departurePort !== arrivalPort) {
|
||||
factor *= 1.5;
|
||||
}
|
||||
if (departurePort === "Shanghai" && arrivalPort === "New York") factor *= 2.5;
|
||||
if (departurePort === "Rotterdam" && arrivalPort === "Dubai") factor *= 2.0;
|
||||
}
|
||||
|
||||
if (cargoType === "Perishable") factor *= 1.8;
|
||||
if (cargoType === "Hazardous") factor *= 2.5;
|
||||
|
||||
factor += (weight / 1000) * 0.5; // Weight in tons
|
||||
factor += (volume / 10) * 0.3; // Volume in CBM
|
||||
|
||||
if (isCharter) {
|
||||
factor *= 3; // Charter is more expensive
|
||||
}
|
||||
|
||||
setEstimatedCost(baseCost * factor);
|
||||
}, [departurePort, arrivalPort, cargoType, weight, volume, isCharter]);
|
||||
|
||||
useEffect(() => {
|
||||
calculateCost();
|
||||
}, [calculateCost]);
|
||||
|
||||
const handleRequestDetailedOffer = () => {
|
||||
alert("Your detailed offer request has been submitted! We will contact you soon.");
|
||||
// In a real app, this would submit data to a backend or redirect to a contact form with pre-filled details.
|
||||
};
|
||||
|
||||
const navbarNavItems = [
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Destinations", id: "destinations" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Get Quote", id: "/quote-calculator" }, // New link
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navbarNavItems}
|
||||
brandName="Luxuria"
|
||||
button={{ text: "Plan Your Trip", href: "#contact" }}
|
||||
/>
|
||||
|
||||
<div id="quote-calculator" data-section="quote-calculator" className="py-20 md:py-32 lg:py-40 bg-background text-foreground">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-6">
|
||||
Intelligent Quote Calculator
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-muted-foreground mb-12">
|
||||
Get an instant estimation for your cargo shipment.
|
||||
</p>
|
||||
|
||||
<div className="bg-card p-8 rounded-lg shadow-xl space-y-6 text-left">
|
||||
{/* Input Fields */}
|
||||
<div>
|
||||
<label htmlFor="departurePort" className="block text-sm font-medium text-foreground mb-2">
|
||||
Departure Port
|
||||
</label>
|
||||
<select
|
||||
id="departurePort"
|
||||
className="block w-full p-3 border border-border rounded-md bg-input focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
value={departurePort}
|
||||
onChange={(e) => setDeparturePort(e.target.value)}
|
||||
>
|
||||
<option value="">Select Departure Port</option>
|
||||
<option value="Shanghai">Shanghai</option>
|
||||
<option value="Rotterdam">Rotterdam</option>
|
||||
<option value="New York">New York</option>
|
||||
<option value="Dubai">Dubai</option>
|
||||
<option value="Singapore">Singapore</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="arrivalPort" className="block text-sm font-medium text-foreground mb-2">
|
||||
Arrival Port
|
||||
</label>
|
||||
<select
|
||||
id="arrivalPort"
|
||||
className="block w-full p-3 border border-border rounded-md bg-input focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
value={arrivalPort}
|
||||
onChange={(e) => setArrivalPort(e.target.value)}
|
||||
>
|
||||
<option value="">Select Arrival Port</option>
|
||||
<option value="Shanghai">Shanghai</option>
|
||||
<option value="Rotterdam">Rotterdam</option>
|
||||
<option value="New York">New York</option>
|
||||
<option value="Dubai">Dubai</option>
|
||||
<option value="Singapore">Singapore</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="cargoType" className="block text-sm font-medium text-foreground mb-2">
|
||||
Cargo Type
|
||||
</label>
|
||||
<select
|
||||
id="cargoType"
|
||||
className="block w-full p-3 border border-border rounded-md bg-input focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
value={cargoType}
|
||||
onChange={(e) => setCargoType(e.target.value)}
|
||||
>
|
||||
<option value="">Select Cargo Type</option>
|
||||
<option value="General">General Cargo</option>
|
||||
<option value="Perishable">Perishable Goods</option>
|
||||
<option value="Hazardous">Hazardous Materials</option>
|
||||
<option value="Fragile">Fragile Items</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="weight" className="block text-sm font-medium text-foreground mb-2">
|
||||
Weight (kg)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="weight"
|
||||
className="block w-full p-3 border border-border rounded-md bg-input focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
value={weight}
|
||||
onChange={(e) => setWeight(parseFloat(e.target.value))}
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="volume" className="block text-sm font-medium text-foreground mb-2">
|
||||
Volume (CBM)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="volume"
|
||||
className="block w-full p-3 border border-border rounded-md bg-input focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
value={volume}
|
||||
onChange={(e) => setVolume(parseFloat(e.target.value))}
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="isCharter"
|
||||
className="h-5 w-5 text-primary-cta rounded border-border focus:ring-primary-cta"
|
||||
checked={isCharter}
|
||||
onChange={(e) => setIsCharter(e.target.checked)}
|
||||
/>
|
||||
<label htmlFor="isCharter" className="text-sm font-medium text-foreground">
|
||||
Charter Option (Full Vessel)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Instant Cost Estimation */}
|
||||
<div className="mt-8 pt-6 border-t border-border">
|
||||
<h3 className="text-2xl font-bold text-foreground mb-4">
|
||||
Estimated Cost:
|
||||
</h3>
|
||||
<p className="text-4xl font-extrabold text-primary-cta">
|
||||
${estimatedCost.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Request Detailed Offer Button */}
|
||||
<div className="mt-8 text-center">
|
||||
<button
|
||||
onClick={handleRequestDetailedOffer}
|
||||
className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-primary-cta text-primary-cta-foreground hover:bg-primary-cta/90"
|
||||
>
|
||||
Request Detailed Offer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FooterCard
|
||||
logoText="Luxuria"
|
||||
copyrightText="© 2025 Luxuria Travel | Luxury Journeys Worldwide"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-inter-tight), sans-serif;
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-inter-tight), sans-serif;
|
||||
font-family: var(--font-libre-baskerville), serif;
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f6f0e9;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #2b180a;
|
||||
--primary-cta-text: #f6f0e9;
|
||||
--secondary-cta: #efe7dd;
|
||||
--secondary-cta-text: #2b180a;
|
||||
--accent: #94877c;
|
||||
--background-accent: #afa094;
|
||||
--background: #f8f8f8;
|
||||
--card: #ffffff;
|
||||
--foreground: #003B5C;
|
||||
--primary-cta: #FF6B35;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #6A7F8E;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #FF6B35;
|
||||
--background-accent: #6A7F8E;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user