Merge version_3 into main

Merge version_3 into main

src/app/layout.tsx

@@ -18,7 +18,7 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = { title: 'PeakOcean | Elite Ocean & Mountain Expeditions', description: 'Discover the extremes of travel. From deep ocean retreats to high-altitude mountain summits, we curate bespoke luxury experiences for the bold adventurer.' };
+export const metadata: Metadata = { title: 'PeakOcean | Luxury Expedition Agency', description: 'Experience cinematic landscapes and luxury expedition travel with PeakOcean.' };
 
 export default function RootLayout({
   children,

src/app/page.tsx

@@ -1,17 +1,15 @@
 "use client";
 
 import ReactLenis from "lenis/react";
-import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
+import HeroCentered from "@/components/sections/hero/HeroCentered";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
-import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
 import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
-import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
+import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import FooterCard from "@/components/sections/footer/FooterCard";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Sparkles, Plane, Compass, Instagram, Facebook, Linkedin } from "lucide-react";
+import { Sparkles, Plane } from "lucide-react";
 
 export default function LuxuryTravelAgencyTemplatePage() {
     return (
@@ -28,37 +26,37 @@ export default function LuxuryTravelAgencyTemplatePage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline
+                <div id="nav" data-section="nav">
-                    navItems={[
+                    <NavbarLayoutFloatingOverlay
-                        { name: "About", id: "about" },
+                        navItems={[
-                        { name: "Services", id: "services" },
+                            { name: "About", id: "about" },
-                        { name: "Destinations", id: "destinations" },
+                            { name: "Services", id: "services" },
-                        { name: "Reviews", id: "reviews" },
+                            { name: "Destinations", id: "destinations" },
-                        { name: "Contact", id: "contact" },
+                            { name: "Reviews", id: "reviews" },
-                    ]}
+                            { name: "Contact", id: "contact" },
-                    brandName="PeakOcean"
-                    button={{ text: "Plan Your Escape", href: "#contact" }}
-                />
-                <div id="hero">
-                    <HeroCarouselLogo
-                        logoText="PeakOcean"
-                        description="Immerse yourself in the world's most breathtaking horizons, from deep cinematic azure oceans to soaring 3D mountain summits with zoom-in effects."
-                        buttons={[
-                            { text: "Start Adventure", href: "#contact" },
-                            { text: "View Gallery", href: "#destinations" },
                         ]}
-                        slides={[
+                        brandName="PeakOcean"
-                            { imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-90512.jpg", imageAlt: "Cinematic 3D rendered ocean waves" },
+                        button={{ text: "Plan Your Escape", href: "#contact" }}
-                            { imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-photography-high-rocky-mountains-covered-with-snow-fog_181624-3044.jpg", imageAlt: "Zoomed-in majestic mountain peaks" },
-                            { imageSrc: "http://img.b2bpic.net/free-photo/abstract-ocean-background-which-can-be-used-add-text-sea-surface-aerial-view_1253-1618.jpg", imageAlt: "Cinematic deep ocean panorama" },
-                            { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-scenery-snowy-area-surrounded-by-lot-rocky-cliffs-fir-trees-dolomites_181624-13113.jpg", imageAlt: "Cinematic mountain horizon zoom" },
-                        ]}
-                        showDimOverlay={true}
                     />
                 </div>
-                <div id="about">
+                <div id="hero" data-section="hero">
+                    <HeroCentered
+                        title="PeakOcean Expeditions"
+                        description="Cinematic 3D horizons where towering mountain peaks embrace the deep, infinite ocean."
+                        background={{ variant: "canvas-reveal" }}
+                        avatars={[
+                            { src: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-90512.jpg", alt: "Ocean texture" },
+                            { src: "http://img.b2bpic.net/free-photo/selective-focus-photography-high-rocky-mountains-covered-with-snow-fog_181624-3044.jpg", alt: "Mountain peak" },
+                        ]}
+                        buttons={[
+                            { text: "Explore Depths", href: "#services" },
+                            { text: "Ascend Peaks", href: "#destinations" },
+                        ]}
+                    />
+                </div>
+                <div id="about" data-section="about">
                     <InlineImageSplitTextAbout
-                        className="pt-40"
+                        className="pt-20"
                         heading={[
                             { type: "text", content: "Defining the" },
                             { type: "image", src: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-waves_58702-16297.jpg", alt: "Ocean view" },
@@ -66,91 +64,62 @@ export default function LuxuryTravelAgencyTemplatePage() {
                             { type: "image", src: "http://img.b2bpic.net/free-photo/landscape-with-mountains_1048-5349.jpg", alt: "Mountain view" },
                             { type: "text", content: "peaks meet the endless deep." },
                         ]}
-                        buttons={[
+                        buttons={[{ text: "Discover Our Philosophy", href: "#" }]}
-                            { text: "Discover Our Philosophy", href: "#" },
-                        ]}
                         useInvertedBackground={false}
                     />
                 </div>
-                <div id="services">
+                <div id="services" data-section="services">
-                    <FeatureCardOne
+                    <FeatureCardSix
                         tag="Services"
                         tagIcon={Sparkles}
                         title="Elevation & Depth"
                         description="Premium expedition services tailored to your affinity for nature's extremes."
                         textboxLayout="default"
-                        animationType="depth-3d"
-                        gridVariant="uniform-all-items-equal"
-                        uniformGridCustomHeightClasses="h-100 2xl:h-110"
                         useInvertedBackground={false}
                         features={[
-                            { title: "Coastal Expeditions", description: "Exclusive marine tours to pristine hidden shores.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-beach-view-koh-chang-island-seascape-trad-province-eastern-thailand-blue-sky-background_1150-10256.jpg", imageAlt: "Ocean waves" },
+                            { title: "Coastal Expeditions", description: "Exclusive marine tours to pristine hidden shores.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-beach-view-koh-chang-island-seascape-trad-province-eastern-thailand-blue-sky-background_1150-10256.jpg" },
-                            { title: "High Altitude Treks", description: "Private-guided ascents to iconic mountain peaks.", imageSrc: "http://img.b2bpic.net/free-photo/hiking-boot-yellow-leaf-autumn-adventure-generated-by-ai_188544-47176.jpg", imageAlt: "Mountain range" },
+                            { title: "High Altitude Treks", description: "Private-guided ascents to iconic mountain peaks.", imageSrc: "http://img.b2bpic.net/free-photo/hiking-boot-yellow-leaf-autumn-adventure-generated-by-ai_188544-47176.jpg" },
-                            { title: "Deep Sea Diving", description: "Professional-grade underwater exploration.", imageSrc: "http://img.b2bpic.net/free-photo/diver-sea-surrounded-by-archeological-building-ruins_23-2151571718.jpg", imageAlt: "Deep ocean" },
+                            { title: "Deep Sea Diving", description: "Professional-grade underwater exploration.", imageSrc: "http://img.b2bpic.net/free-photo/diver-sea-surrounded-by-archeological-building-ruins_23-2151571718.jpg" }
-                            { title: "Summit Retreats", description: "Luxury lodges at the highest altitudes.", imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-wooden-house-interior-with-timber-decor-furnishings_23-2151263547.jpg", imageAlt: "Alpine lodge" },
-                            { title: "Horizon Sailing", description: "Bespoke luxury yacht journeys.", imageSrc: "http://img.b2bpic.net/free-photo/luxury-yacht-sails-towards-sunset-water-generated-by-ai_188544-11120.jpg", imageAlt: "Sailing" }
                         ]}
                     />
                 </div>
-                <div id="destinations">
+                <div id="destinations" data-section="destinations">
                     <FeatureCardMedia
                         tag="Destinations"
                         tagIcon={Plane}
                         title="Iconic Landscapes"
                         description="Select from our curated list of ocean gems and mountain wonders."
                         textboxLayout="default"
-                        animationType="blur-reveal"
                         useInvertedBackground={false}
+                        animationType="blur-reveal"
                         features={[
                             { id: "1", title: "Coral Sea Atoll", description: "Pristine ocean seclusion.", tag: "Ocean", imageSrc: "http://img.b2bpic.net/free-photo/vibrant-coral-reef-underwater_23-2152006401.jpg" },
                             { id: "2", title: "Everest North Face", description: "High-altitude majesty.", tag: "Mountain", imageSrc: "http://img.b2bpic.net/free-photo/mountain-cover-with-snow_417767-169.jpg" },
-                            { id: "3", title: "Pacific Deep Trench", description: "Uncharted marine beauty.", tag: "Ocean", imageSrc: "http://img.b2bpic.net/free-photo/sky-sea-april-01-2024_58702-17004.jpg" },
-                            { id: "4", title: "Andes Summit Point", description: "Breathtaking cloud views.", tag: "Mountain", imageSrc: "http://img.b2bpic.net/free-photo/skjolden-norway-may-16-2023-mountain_58702-10833.jpg" },
-                            { id: "5", title: "Atlantic Blue", description: "Infinite horizon sailing.", tag: "Ocean", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bright-colored-sunset-ocean_1321-3089.jpg" },
-                            { id: "6", title: "Swiss Alpine Peaks", description: "Classic high-mountain luxury.", tag: "Mountain", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-low-angle-shot-mountain-with-snow-covering-peak-sky-background_181624-4374.jpg" },
                         ]}
                     />
                 </div>
-                <div id="reviews">
+                <div id="reviews" data-section="reviews">
-                    <TestimonialCardFive
+                    <TestimonialCardTwo
                         tag="Reviews"
-                        tagIcon={Sparkles}
                         title="Voices of Discovery"
                         description="Hear from those who've scaled peaks and dived deep."
                         textboxLayout="default"
                         useInvertedBackground={false}
+                        animationType="depth-3d"
                         testimonials={[
-                            { id: "1", name: "Alex Rivers", date: "Jan 2025", title: "Simply incredible", quote: "The ocean views were life-changing.", tag: "Ocean", avatarSrc: "http://img.b2bpic.net/free-photo/relaxation-wellbeing-concept-overjoyed-dark-skinned-woman-enjoys-perfect-lazy-weekend-keeps-eyes-shut-from-pleasure-dressed-oversized-striped-sweater-uses-headphones_273609-31053.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-hipster-woman-summer-vacation-asia-relaxing-tropical-beach-digital-photo-camera-casual-boho-style-sea-landscape-slim-tanned-body-travel-alone_285396-6251.jpg" },
+                            { id: "1", name: "Alex Rivers", role: "Explorer", testimonial: "The ocean views were life-changing.", imageSrc: "http://img.b2bpic.net/free-photo/relaxation-wellbeing-concept-overjoyed-dark-skinned-woman-enjoys-perfect-lazy-weekend-keeps-eyes-shut-from-pleasure-dressed-oversized-striped-sweater-uses-headphones_273609-31053.jpg" },
-                            { id: "2", name: "Sarah Heights", date: "Dec 2024", title: "Top of the world", quote: "A mountain trek I will never forget.", tag: "Mountain", avatarSrc: "http://img.b2bpic.net/free-photo/man-hiking-forest_329181-12237.jpg", imageSrc: "http://img.b2bpic.net/free-photo/hiker-embraces-challenge-trekking-through-wilderness_482257-119787.jpg" },
-                            { id: "3", name: "Marco Depth", date: "Nov 2024", title: "Perfection", quote: "The perfect blend of sea and sky.", tag: "Both", avatarSrc: "http://img.b2bpic.net/free-photo/smiley-tourist-posing-swing_23-2147643235.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-from-back-looking-sea_1303-14409.jpg" },
                         ]}
                     />
                 </div>
-                <div id="contact">
+                <div id="footer" data-section="footer">
-                    <ContactSplitForm
+                    <FooterBaseCard
-                        title="Plan Your Summit"
+                        logoText="PeakOcean"
-                        description="Ready to explore the extremes? Reach out today."
+                        columns={[
-                        useInvertedBackground={false}
+                            { title: "Company", items: [{ label: "About", href: "#about" }] },
-                        imageSrc="http://img.b2bpic.net/free-photo/beautiful-photo-sea-waves-mountain_58702-11072.jpg"
+                            { title: "Connect", items: [{ label: "Contact", href: "#contact" }] }
-                        mediaPosition="right"
-                        mediaAnimation="slide-up"
-                        buttonText="Connect With Experts"
-                        inputs={[
-                            { name: "name", type: "text", placeholder: "Name", required: true },
-                            { name: "email", type: "email", placeholder: "Email", required: true },
-                            { name: "trip", type: "text", placeholder: "Ocean or Mountain?" },
                         ]}
                     />
                 </div>
-                <FooterCard
-                    logoText="PeakOcean"
-                    copyrightText="© 2025 PeakOcean Expeditions"
-                    socialLinks={[
-                        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
-                        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
-                        { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
-                    ]}
-                />
             </ReactLenis>
         </ThemeProvider>
     );