Update src/app/page.tsx

src/app/page.tsx

@@ -4,14 +4,12 @@ import ReactLenis from "lenis/react";
 import HeroCentered from "@/components/sections/hero/HeroCentered";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
 import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
-import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
 import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
 import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 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,18 +26,20 @@ export default function LuxuryTravelAgencyTemplatePage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingOverlay
+                <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" }}
+                        brandName="PeakOcean"
-                />
+                        button={{ text: "Plan Your Escape", href: "#contact" }}
-                <div id="hero">
+                    />
+                </div>
+                <div id="hero" data-section="hero">
                     <HeroCentered
                         title="PeakOcean Expeditions"
                         description="Cinematic 3D horizons where towering mountain peaks embrace the deep, infinite ocean."
@@ -54,7 +54,7 @@ export default function LuxuryTravelAgencyTemplatePage() {
                         ]}
                     />
                 </div>
-                <div id="about">
+                <div id="about" data-section="about">
                     <InlineImageSplitTextAbout
                         className="pt-20"
                         heading={[
@@ -68,7 +68,7 @@ export default function LuxuryTravelAgencyTemplatePage() {
                         useInvertedBackground={false}
                     />
                 </div>
-                <div id="services">
+                <div id="services" data-section="services">
                     <FeatureCardSix
                         tag="Services"
                         tagIcon={Sparkles}
@@ -83,7 +83,7 @@ export default function LuxuryTravelAgencyTemplatePage() {
                         ]}
                     />
                 </div>
-                <div id="destinations">
+                <div id="destinations" data-section="destinations">
                     <FeatureCardMedia
                         tag="Destinations"
                         tagIcon={Plane}
@@ -91,13 +91,14 @@ export default function LuxuryTravelAgencyTemplatePage() {
                         description="Select from our curated list of ocean gems and mountain wonders."
                         textboxLayout="default"
                         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" },
                         ]}
                     />
                 </div>
-                <div id="reviews">
+                <div id="reviews" data-section="reviews">
                     <TestimonialCardTwo
                         tag="Reviews"
                         title="Voices of Discovery"
@@ -110,21 +111,15 @@ export default function LuxuryTravelAgencyTemplatePage() {
                         ]}
                     />
                 </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={[
-                        background={{ variant: "sparkles-gradient" }}
+                            { title: "Company", items: [{ label: "About", href: "#about" }] },
-                        useInvertedBackground={false}
+                            { title: "Connect", items: [{ label: "Contact", href: "#contact" }] }
+                        ]}
                     />
                 </div>
-                <FooterBaseCard
-                    logoText="PeakOcean"
-                    columns={[
-                        { title: "Company", items: [{ label: "About", href: "#about" }] },
-                        { title: "Connect", items: [{ label: "Contact", href: "#contact" }] }
-                    ]}
-                />
             </ReactLenis>
         </ThemeProvider>
     );