diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx new file mode 100644 index 0000000..6d9afd6 --- /dev/null +++ b/src/app/blog/page.tsx @@ -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 ( + + + + 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') + } + ]} + /> + + + + ); +} \ No newline at end of file diff --git a/src/app/fleet/page.tsx b/src/app/fleet/page.tsx new file mode 100644 index 0000000..5184c58 --- /dev/null +++ b/src/app/fleet/page.tsx @@ -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 ( + + + + +
+
+

Our Fleet

+ +
+ {shipTypes.map(type => ( + + ))} +
+ + ({ + 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" + /> +
+
+ + + + + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6a2d50d..569771e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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({ diff --git a/src/app/page.tsx b/src/app/page.tsx index e83cb52..10b17cc 100644 --- a/src/app/page.tsx +++ b/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" }} /> - ); -} +} \ No newline at end of file diff --git a/src/app/quote-calculator/page.tsx b/src/app/quote-calculator/page.tsx new file mode 100644 index 0000000..fc23191 --- /dev/null +++ b/src/app/quote-calculator/page.tsx @@ -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 ( + + + + +
+
+

+ Intelligent Quote Calculator +

+

+ Get an instant estimation for your cargo shipment. +

+ +
+ {/* Input Fields */} +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + setWeight(parseFloat(e.target.value))} + min="0" + /> +
+
+ + setVolume(parseFloat(e.target.value))} + min="0" + /> +
+
+ +
+ setIsCharter(e.target.checked)} + /> + +
+ + {/* Instant Cost Estimation */} +
+

+ Estimated Cost: +

+

+ ${estimatedCost.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} +

+
+ + {/* Request Detailed Offer Button */} +
+ +
+
+
+
+ + + + + ); +} \ No newline at end of file diff --git a/src/app/styles/base.css b/src/app/styles/base.css index a25430f..efe6053 100644 --- a/src/app/styles/base.css +++ b/src/app/styles/base.css @@ -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; } diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index ee8d361..b9e6375 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -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);