Update src/app/how-it-works/page.tsx

Merge version_5 into main

src/app/how-it-works/page.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function HowItWorksPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmallSizeLargeTitles"
+        background="grid"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Services", id: "/services" },
+                { name: "How It Works", id: "/how-it-works" },
+                { name: "Contact", id: "/contact" },
+              ]}
+              brandName="Palante STS"
+            />
+        </div>
+
+        <div id="hero" data-section="hero">
+            <HeroOverlayTestimonial
+              title="A Clear Process for a Difficult Transition"
+              description="Navigating senior transitions doesn't have to feel overwhelming. Our structured approach brings clarity to every step."
+              testimonials={[]}
+            />
+        </div>
+
+        <div id="intro" data-section="intro">
+            <SplitAbout
+              title="You Don’t Have to Figure This Out Alone"
+              description="We translate the complexity of aging transitions into a manageable, step-by-step roadmap tailored specifically to your family's needs."
+              bulletPoints={[]}
+              textboxLayout="split"
+              useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="process" data-section="process">
+            <FeatureCardTwentyNine
+              title="Our 5-Step Process"
+              animationType="slide-up"
+              textboxLayout="split"
+              gridVariant="two-columns-alternating-heights"
+              description="Five clear steps to guide your transition."
+              useInvertedBackground={false}
+              features={[
+                { title: "We Listen & Assess", description: "Understanding your family's unique dynamics and goals.", imageSrc: "/placeholder.png", titleIconSrc: "", buttonText: "Learn More" },
+                { title: "We Create a Personalized Transition Plan", description: "Developing a structured path that keeps everyone informed.", imageSrc: "/placeholder.png", titleIconSrc: "", buttonText: "Learn More" },
+                { title: "We Coordinate the Transition", description: "Managing the logistical details from start to finish.", imageSrc: "/placeholder.png", titleIconSrc: "", buttonText: "Learn More" },
+                { title: "We Support the Next Housing Decision", description: "Helping you find the right fit with confidence.", imageSrc: "/placeholder.png", titleIconSrc: "", buttonText: "Learn More" },
+                { title: "We Help You Move Forward", description: "Ensuring stability and comfort for the road ahead.", imageSrc: "/placeholder.png", titleIconSrc: "", buttonText: "Learn More" }
+              ]}
+            />
+        </div>
+
+        <div id="feelings" data-section="feelings">
+            <SplitAbout
+              title="What Families Often Feel Before They Reach Out"
+              description="Overwhelmed by decisions, stressed by family disagreements, or unsure of where to start—you aren't the first, and we can help."
+              bulletPoints={[]}
+              textboxLayout="split"
+              useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="faq" data-section="faq">
+            <FaqDouble
+              title="Mini FAQ"
+              description="Answers to common questions about our process."
+              faqsAnimation="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              faqs={[
+                { id: "q1", title: "How do we get started?", content: "Simply reach out through our contact form and we will schedule an initial call." },
+                { id: "q2", title: "Can you mediate family discussions?", content: "Yes, we specialize in helping families reach consensus during transition periods." }
+              ]}
+            />
+        </div>
+
+        <div id="cta" data-section="cta">
+            <ContactText
+              text="Take the first step toward a clearer transition."
+              buttons={[{ text: "Schedule Your Free Consultation", href: "/contact" }]}
+              background={{ variant: "sparkles-gradient" }}
+              useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+              logoText="Palante STS"
+              columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] }]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -29,9 +29,10 @@ export default function LandingPage() {
         <div id="nav" data-section="nav">
             <NavbarLayoutFloatingOverlay
               navItems={[
-                { name: "Home", id: "hero" },
+                { name: "Home", id: "/" },
                 { name: "Services", id: "/services" },
-                { name: "Contact", id: "contact" },
+                { name: "How It Works", id: "/how-it-works" },
+                { name: "Contact", id: "/contact" },
               ]}
               brandName="Palante STS"
             />
@@ -41,7 +42,7 @@ export default function LandingPage() {
             <HeroOverlayTestimonial
               title="Helping Aging Parents? You're Not Alone."
               description="Palante STS provides the structure and expert guidance to help adult children manage senior living transitions with confidence."
-              buttons={[{ text: "Schedule Free Consultation", href: "#contact" }, { text: "Our Services", href: "/services" }]}
+              buttons={[{ text: "Schedule Free Consultation", href: "/contact" }, { text: "Our Services", href: "/services" }]}
               testimonials={[{ name: "Sarah M.", handle: "@sarahm", testimonial: "Palante gave us the roadmap we didn't know we needed during a stressful time.", rating: 5 }]}
               imageSrc="http://img.b2bpic.net/free-photo/grandparents-learning-use-technology_23-2149402581.jpg"
             />
@@ -93,8 +94,8 @@ export default function LandingPage() {
             <FooterLogoEmphasis
               logoText="Palante STS"
               columns={[
-                { items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "/services" }] },
+                { items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }] },
-                { items: [{ label: "Contact", href: "#contact" }] }
+                { items: [{ label: "Contact", href: "/contact" }] }
               ]}
             />
         </div>