Update src/app/page.tsx

Merge version_8 into main

src/app/about/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Heart, ShieldCheck } from "lucide-react";
+
+export default function AboutPage() {
+  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">
+            <HeroBillboardTestimonial
+              title="Our Story: Compassion at the Core"
+              description="Guided by personal experience, Ronnie Konishi founded Palante STS to ensure families never have to face life's biggest transitions alone."
+              background={{ variant: "sparkles-gradient" }}
+              testimonials={[]}
+            />
+        </div>
+
+        <div id="what-makes-us-different" data-section="what-makes-us-different">
+            <FeatureCardTwentyEight
+              title="What Makes Palante Different"
+              description="We combine empathy with a structured care framework to support families during life's most challenging transitions."
+              animationType="slide-up"
+              textboxLayout="split"
+              useInvertedBackground={false}
+              features={[
+                { id: "d1", title: "Heart-Centered", subtitle: "Empathy first", category: "Methodology", value: "100%" },
+                { id: "d2", title: "Structured Care", subtitle: "Proven framework", category: "Methodology", value: "Proven" }
+              ]}
+            />
+        </div>
+
+        <div id="what-i-bring" data-section="what-i-bring">
+            <MetricCardThree
+              title="What I Bring To Your Family"
+              description="Core values that drive our commitment to your family's peace of mind."
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              metrics={[
+                { id: "b1", icon: ShieldCheck, title: "Integrity", value: "Always" },
+                { id: "b2", icon: Heart, title: "Advocacy", value: "Active" }
+              ]}
+            />
+        </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/contact/page.tsx

@@ -0,0 +1,89 @@
+"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 ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ContactPage() {
+  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="Let's Start the Conversation"
+              description="We're here to listen, support, and guide your family through life's biggest transitions—on your own timeline."
+              testimonials={[]}
+            />
+        </div>
+
+        <div id="reassurance-1" data-section="reassurance-1">
+            <ContactText
+              text="No Pressure, No Obligation"
+              animationType="reveal-blur"
+              background={{ variant: "sparkles-gradient" }}
+              useInvertedBackground={true}
+              className="py-8"
+            />
+        </div>
+
+        <div id="contact-form" data-section="contact-form">
+            <ContactSplitForm
+              title="Get In Touch"
+              description="Whether you have a specific question or just need to discuss a transition situation, we're here to help. Fill out the details below and we'll be in touch."
+              inputs={[
+                { name: "name", type: "text", placeholder: "Your Name", required: true },
+                { name: "email", type: "email", placeholder: "Your Email", required: true }
+              ]}
+              textarea={{ name: "message", placeholder: "How can we help your family?", rows: 4, required: true }}
+              useInvertedBackground={false}
+              mediaPosition="right"
+            />
+        </div>
+
+        <div id="reassurance-2" data-section="reassurance-2">
+            <ContactText
+              text="You Don't Have to Do This Alone"
+              animationType="background-highlight"
+              background={{ variant: "gradient-bars" }}
+              useInvertedBackground={true}
+              className="py-8"
+            />
+        </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/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

@@ -2,14 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function LandingPage() {
   return (
@@ -26,248 +24,81 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Our Process",
-          id: "about",
-        },
-        {
-          name: "Why Palante",
-          id: "features",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Palante STS"
-    />
-  </div>
+        <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">
-      <HeroLogoBillboard
-      background={{
-        variant: "plain",
-      }}
-      logoText="Palante STS"
-      description="Helping families navigate the complexities of senior living transitions with calm, structured expertise and compassionate guidance."
-      buttons={[
-        {
-          text: "Schedule Consultation",
-          href: "#contact",
-        },
-      ]}
-      mediaAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/grandparents-learning-use-technology_23-2149402581.jpg"
-      imageAlt="Compassionate senior transition support"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroSplitDualMedia
+              title="Helping Aging Parents? You're Not Alone."
+              description="Palante STS provides clear, expert guidance to manage senior transitions with dignity and calm."
+              background={{ variant: "sparkles-gradient" }}
+              tag="Compassionate Transition Experts"
+              buttons={[{ text: "Get Your Free Consultation", href: "/contact" }]}
+              rating={5}
+              ratingText="Trusted by 500+ families"
+              mediaItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/grandparents-learning-use-technology_23-2149402581.jpg", imageAlt: "Supportive family environment" }, { imageSrc: "http://img.b2bpic.net/free-photo/family-helping-elderly_23-2149402581.jpg", imageAlt: "Professional guidance" }]}
+            />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={false}
-      title="Your Trusted Guide"
-      description="Moving out of a longtime family home is more than a logistical challenge; it is a significant life transition. We provide the structure needed to make these moves with dignity."
-      metrics={[
-        {
-          value: "20+",
-          title: "Years Experience",
-        },
-        {
-          value: "500+",
-          title: "Families Helped",
-        },
-        {
-          value: "100%",
-          title: "Personalized Care",
-        },
-      ]}
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/senior-couple-holding-hands-together_53876-25301.jpg"
-      imageAlt="Professional moving support"
-    />
-  </div>
+        <div id="trust" data-section="trust">
+            <MetricCardEleven
+              title="Why Families Trust Palante"
+              description="We help you navigate complex life changes with proven, compassionate strategies."
+              animationType="blur-reveal"
+              textboxLayout="split-description"
+              useInvertedBackground={false}
+              metrics={[
+                { id: "t1", value: "20+", title: "Years of Experience", description: "Dedicated to senior care.", imageSrc: "http://img.b2bpic.net/free-photo/shield-icon_23-2149402581.jpg" },
+                { id: "t2", value: "500+", title: "Families Supported", description: "Successfully transitioned.", imageSrc: "http://img.b2bpic.net/free-photo/users-icon_23-2149402581.jpg" },
+                { id: "t3", value: "100%", title: "Personalized Care", description: "Tailored to your family.", imageSrc: "http://img.b2bpic.net/free-photo/heart-icon_23-2149402581.jpg" },
+                { id: "t4", value: "Proven", title: "Reliable Framework", description: "A simple, clear process.", imageSrc: "http://img.b2bpic.net/free-photo/book-icon_23-2149402581.jpg" }
+              ]}
+            />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwelve
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "f1",
-          label: "Compassion",
-          title: "Deep Listening",
-          items: [
-            "We listen to the resident's concerns first.",
-            "Emotional support for the entire family.",
-            "Addressing the anxiety of change.",
-          ],
-        },
-        {
-          id: "f2",
-          label: "Expertise",
-          title: "Operational Precision",
-          items: [
-            "Logistics and move management.",
-            "Decluttering and downsizing strategy.",
-            "Professional referral coordination.",
-          ],
-        },
-        {
-          id: "f3",
-          label: "Strategy",
-          title: "Family Alignment",
-          items: [
-            "Mediation and family meeting facilitation.",
-            "Shared decision-making structure.",
-            "Clear timelines and expectations.",
-          ],
-        },
-      ]}
-      title="Structured Solutions"
-      description="We replace overwhelm with clarity."
-    />
-  </div>
+        <div id="services" data-section="services">
+            <FeatureCardOne
+              title="How Palante Helps Your Family"
+              description="We take the burden off your shoulders, managing the logistics of senior living transitions so you can focus on quality time."
+              animationType="slide-up"
+              textboxLayout="split"
+              gridVariant="two-columns-alternating-heights"
+              useInvertedBackground={false}
+              features={[
+                { title: "Strategic Planning", description: "Customized roadmaps to clarify your path forward.", imageSrc: "http://img.b2bpic.net/free-photo/planning_23-2149402581.jpg" },
+                { title: "Logistical Support", description: "From downsizing to move-in, we manage every detail.", imageSrc: "http://img.b2bpic.net/free-photo/moving_23-2149402581.jpg" },
+                { title: "Family Facilitation", description: "Neutral support to help families agree on the best care plan.", imageSrc: "http://img.b2bpic.net/free-photo/family_23-2149402581.jpg" }
+              ]}
+            />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Jane D.",
-          role: "Daughter",
-          company: "Family Support",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-senior-gray-haired-smiley-woman_23-2149082567.jpg",
-        },
-        {
-          id: "t2",
-          name: "Mark S.",
-          role: "Son",
-          company: "Client",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/positive-human-emotions-reaction-portrait-carefree-happy-senior-woman-with-dyed-stylish-short-hair-looking-camera-with-broad-cheerful-smile-wearing-hoodie-choosing-active-lifestyle_343059-2281.jpg",
-        },
-        {
-          id: "t3",
-          name: "Sarah L.",
-          role: "Daughter",
-          company: "Client",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-stylish-senior-caucasian-female-pensioner-with-pixie-short-hairstyle-spending-day-home-standing-living-room-wearing-elegant-blue-dress-smiling-happily_343059-2673.jpg",
-        },
-        {
-          id: "t4",
-          name: "Robert K.",
-          role: "Client",
-          company: "Resident",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-senior-woman_23-2149207235.jpg",
-        },
-        {
-          id: "t5",
-          name: "Linda M.",
-          role: "Daughter",
-          company: "Client",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-senior-woman_23-2150767025.jpg",
-        },
-      ]}
-      title="Families We Support"
-      description="Read how we turned daunting transitions into manageable steps."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactText
+              text="We're ready to listen and support your family. Schedule your free consultation today."
+              buttons={[{ text: "Book Consultation", href: "/contact" }]}
+              background={{ variant: "sparkles-gradient" }}
+              useInvertedBackground={true}
+            />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "When is the right time to start?",
-          content: "Early planning is key to keeping the transition calm.",
-        },
-        {
-          id: "q2",
-          title: "How do you help my parent feel heard?",
-          content: "Our process centers on resident agency and comfort.",
-        },
-        {
-          id: "q3",
-          title: "Do you work with our lawyers?",
-          content: "Yes, we coordinate seamlessly with all trusted partners.",
-        },
-      ]}
-      title="Common Questions"
-      description="Addressing your concerns early."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Ready to begin your transition journey with expert support? We offer a free initial consultation."
-      buttons={[
-        {
-          text: "Book Consultation",
-          href: "mailto:hello@palantests.com",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Home",
-              href: "#hero",
-            },
-            {
-              label: "Our Process",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="Palante STS"
-    />
-  </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" }] },
+                { items: [{ label: "Contact", href: "/contact" }] }
+              ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/services/page.tsx

@@ -0,0 +1,120 @@
+"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 FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Heart, BrainCircuit, Users, BookOpen } from "lucide-react";
+
+export default function ServicesPage() {
+  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="Expert Transition Support"
+              description="Comprehensive services tailored to simplify complex life transitions."
+              testimonials={[]}
+            />
+        </div>
+
+        <div id="intro" data-section="intro">
+            <SplitAbout
+              title="You Don't Need Five Different People to Help You Through This"
+              description="We integrate everything you need into one seamless support framework."
+              textboxLayout="default"
+              useInvertedBackground={true}
+              bulletPoints={[]}
+            />
+        </div>
+
+        <div id="services" data-section="services">
+            <FeatureCardTwentySeven
+              title="Core Services"
+              description="Comprehensive support for every stage of your transition journey."
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              features={[
+                { id: "s1", title: "Transition Planning & Guidance", descriptions: ["Holistic roadmap creation."] },
+                { id: "s2", title: "Downsizing & Home Organization", descriptions: ["Compassionate decluttering and space management."] },
+                { id: "s3", title: "Move Management & Coordination", descriptions: ["Logistics and professional move oversight."] },
+                { id: "s4", title: "Senior Living Transition Support", descriptions: ["Guidance through community selection."] }
+              ]}
+            />
+        </div>
+
+        <div id="reach-out" data-section="reach-out">
+            <MetricCardOne
+              title="When Families Usually Reach Out"
+              description="Recognizing the signs early ensures a calmer transition."
+              gridVariant="bento-grid"
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              metrics={[
+                { id: "m1", value: "Crisis", title: "Emergency", description: "Sudden health changes.", icon: Heart },
+                { id: "m2", value: "Fatigue", title: "Decision Fatigue", description: "Overwhelmed by choices.", icon: BrainCircuit },
+                { id: "m3", value: "Disagreement", title: "Family Friction", description: "Lack of consensus.", icon: Users },
+                { id: "m4", value: "Pre-planning", title: "Proactive", description: "Planning for the future.", icon: BookOpen }
+              ]}
+            />
+        </div>
+
+        <div id="why-palante" data-section="why-palante">
+            <SplitAbout
+              title="Why Families Choose Palante"
+              description="We combine decades of experience with a truly heart-centered approach."
+              textboxLayout="default"
+              useInvertedBackground={true}
+              bulletPoints={[]}
+            />
+        </div>
+
+        <div id="cta" data-section="cta">
+            <ContactText
+              text="Ready to get started?"
+              buttons={[{ text: "Book a 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>
+  );
+}