Update src/app/services/page.tsx

Merge version_4 into main

src/app/about/page.tsx

@@ -2,15 +2,16 @@
 
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import MediaAbout from "@/components/sections/about/MediaAbout";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
-import FooterCard from "@/components/sections/footer/FooterCard";
+import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { History } from "lucide-react";
 
 export default function AboutPage() {
     const navItems = [
         { name: "Home", id: "/" },
-        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Pricing", id: "/pricing" },
         { name: "Contact", id: "/contact" },
     ];
 
@@ -28,24 +29,41 @@ export default function AboutPage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline
+                <div id="nav" data-section="nav">
-                    navItems={navItems}
+                    <NavbarLayoutFloatingInline
-                    brandName="St. Jerome"
+                        navItems={navItems}
-                    button={{ text: "Get Involved", href: "/contact" }}
+                        brandName="Coach"
-                />
+                        button={{ text: "Contact", href: "/contact" }}
-                <main className="pt-32">
-                    <MediaAbout
-                        title="Our History & Mission"
-                        description="Founded with a vision of community and spiritual growth, St. Jerome has been a pillar of the neighborhood for decades. We are dedicated to nurturing faith through tradition, sacraments, and active engagement with our local mission."
-                        tag="Faith in Action"
-                        tagIcon={History}
-                        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077687-hlsfoa09.jpg"
-                        imageAlt="Church History"
                     />
-                </main>
+                </div>
-                <FooterCard
+                <div id="about-hero" data-section="about-hero">
-                    logoText="St. Jerome"
+                    <MetricSplitMediaAbout
-                    copyrightText="© 2025 St. Jerome Roman Catholic Church"
+                        title="Dedicated to Your Success"
+                        description="With over 12 years of experience in executive and business coaching, I have dedicated my career to helping leaders like you navigate the complexities of growth."
+                        metrics={[{ value: "12+", title: "Years Experience" }, { value: "500+", title: "Clients Coached" }]}
+                        useInvertedBackground={false}
+                        mediaAnimation="slide-up"
+                        metricsAnimation="slide-up"
+                    />
+                </div>
+                <div id="team" data-section="team">
+                    <TeamCardTwo
+                        title="Meet Your Coach"
+                        description="Get to know the experts behind our success."
+                        members={[
+                            {
+                                id: "1",                                name: "John Anderson",                                role: "Lead Business Strategist",                                description: "Expert in executive coaching and team alignment."
+                            }
+                        ]}
+                        gridVariant="uniform-all-items-equal"
+                        animationType="slide-up"
+                        textboxLayout="default"
+                        useInvertedBackground={true}
+                    />
+                </div>
+                <FooterBaseReveal
+                    logoText="Coach"
+                    columns={[{ title: "Company", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }]}
                 />
             </ReactLenis>
         </ThemeProvider>

src/app/contact/page.tsx

@@ -3,14 +3,15 @@
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterCard from "@/components/sections/footer/FooterCard";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { MapPin } from "lucide-react";
 
 export default function ContactPage() {
     const navItems = [
         { name: "Home", id: "/" },
         { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Pricing", id: "/pricing" },
         { name: "Contact", id: "/contact" },
     ];
 
@@ -28,24 +29,26 @@ export default function ContactPage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline
+                <div id="nav" data-section="nav">
-                    navItems={navItems}
+                    <NavbarLayoutFloatingInline
-                    brandName="St. Jerome"
+                        navItems={navItems}
-                    button={{ text: "Get Involved", href: "/contact" }}
+                        brandName="Coach"
-                />
+                        button={{ text: "Contact", href: "/contact" }}
-                <main className="pt-32">
-                    <ContactCTA
-                        title="Contact Information"
-                        description="We are located in the heart of our community. Feel free to visit, reach out via phone, or send us a message through our parish office. We look forward to welcoming you."
-                        tag="Visit Us"
-                        tagIcon={MapPin}
-                        buttons={[{ text: "Call Parish Office", href: "tel:+1234567890" }]}
-                        background={{ variant: "radial-gradient" }}
                     />
-                </main>
+                </div>
-                <FooterCard
+                <div id="contact" data-section="contact">
-                    logoText="St. Jerome"
+                    <ContactCTA 
-                    copyrightText="© 2025 St. Jerome Roman Catholic Church"
+                        tag="Contact"
+                        title="Let's Connect"
+                        description="Reach out to us."
+                        buttons={[{ text: "Send Message", href: "#" }]}
+                        background={{ variant: "plain" }}
+                        useInvertedBackground={false}
+                    />
+                </div>
+                <FooterBaseReveal
+                    logoText="Coach"
+                    columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
                 />
             </ReactLenis>
         </ThemeProvider>

src/app/layout.tsx

@@ -18,7 +18,7 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = { title: 'Coach Website', description: 'Professional coaching and parish community services.' };
+export const metadata: Metadata = { title: 'Elevate Your Leadership | Expert Business Coaching Services', description: 'Unlock your full potential with personalized business coaching. Strategic guidance to scale your operations, refine your leadership, and achieve sustainable growth.' };
 
 export default function RootLayout({
   children,

src/app/mass-schedule/page.tsx

@@ -2,7 +2,6 @@
 
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterBase from "@/components/sections/footer/FooterBase";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 
 export default function MassSchedulePage() {
@@ -11,18 +10,33 @@ export default function MassSchedulePage() {
         { name: "Mass Schedule", id: "/mass-schedule" },
         { name: "Sacraments", id: "/sacraments" },
         { name: "Staff", id: "/staff" },
-        { name: "Giving", id: "/giving" },
         { name: "Contact", id: "/contact" },
     ];
 
     return (
-        <ThemeProvider>
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline navItems={navItems} brandName="Coach" button={{ text: "Book a Call", href: "/contact" }} />
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={navItems}
+                        brandName="St. Jerome"
+                        button={{ text: "Join Us", href: "/contact" }}
+                    />
+                </div>
                 <main className="pt-32 min-h-screen px-4">
                     <h1 className="text-4xl font-bold text-center mb-8">Mass Schedule</h1>
                 </main>
-                <FooterBase logoText="Coach" columns={[{ title: "Navigation", items: navItems.map(i => ({ label: i.name, href: i.id })) }]} />
             </ReactLenis>
         </ThemeProvider>
     );

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterMedia from "@/components/sections/footer/FooterMedia";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 
-export default function SaintJeromePage() {
+export default function HomePage() {
     const navItems = [
         { name: "Home", id: "/" },
         { name: "About", id: "/about" },
-        { name: "Giving", id: "/giving" },
+        { name: "Services", id: "/services" },
+        { name: "Pricing", id: "/pricing" },
         { name: "Contact", id: "/contact" },
     ];
 
@@ -28,36 +28,19 @@ export default function SaintJeromePage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline
+                <div id="nav" data-section="nav">
-                    navItems={navItems}
+                    <NavbarLayoutFloatingInline
-                    brandName="Saint Jerome"
+                        navItems={navItems}
-                    button={{ text: "Giving", href: "/giving" }}
+                        brandName="Coach"
-                    logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077688-pmeewk62.jpg"
+                        button={{ text: "Contact", href: "/contact" }}
-                />
-                <main>
-                    <HeroBillboardCarousel 
-                        title="Welcome to Saint Jerome Parish"
-                        description="A community of faith, service, and devotion."
-                        background={{ variant: "sparkles-gradient" }}
-                        mediaItems={[
-                            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077687-hlsfoa09.jpg" },
-                            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077687-ufy51wxw.jpg" }
-                        ]}
                     />
-                </main>
+                </div>
-                <FooterMedia
+                <div id="hero" data-section="hero">
-                    logoText="Saint Jerome Parish"
+                    <h1>Welcome to Coach</h1>
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077688-pmeewk62.jpg"
+                </div>
-                    columns={[
+                <FooterBaseReveal
-                        {
+                    logoText="Coach"
-                            title: "Menu",                            items: [
+                    columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
-                                { label: "Home", href: "/" },
-                                { label: "About", href: "/about" },
-                                { label: "Giving", href: "/giving" },
-                                { label: "Contact", href: "/contact" },
-                            ],
-                        }
-                    ]}
                 />
             </ReactLenis>
         </ThemeProvider>

src/app/pricing/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function PricingPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Pricing", id: "/pricing" },
+        { name: "Contact", id: "/contact" },
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={navItems}
+                        brandName="Coach"
+                        button={{ text: "Contact", href: "/contact" }}
+                    />
+                </div>
+                <div id="pricing" data-section="pricing">
+                    <PricingCardNine
+                        title="Simple Pricing"
+                        description="Choose your plan."
+                        animationType="slide-up"
+                        textboxLayout="default"
+                        useInvertedBackground={false}
+                        plans={[
+                            { id: "p1", title: "Starter", price: "$999", period: "/mo", features: ["Feature 1"], button: { text: "Get Started", href: "/contact" } }
+                        ]}
+                    />
+                </div>
+                <ContactCTA
+                    tag="Ready?"
+                    title="Get in Touch"
+                    description="Contact us for more info."
+                    buttons={[{ text: "Email Us", href: "/contact" }]}
+                    background={{ variant: "plain" }}
+                    useInvertedBackground={true}
+                />
+                <FooterBaseReveal
+                    logoText="Coach"
+                    columns={[{ title: "Legal", items: [{ label: "Privacy", href: "#" }] }]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/sacraments/page.tsx

@@ -2,7 +2,6 @@
 
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterBase from "@/components/sections/footer/FooterBase";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 
 export default function SacramentsPage() {
@@ -11,18 +10,33 @@ export default function SacramentsPage() {
         { name: "Mass Schedule", id: "/mass-schedule" },
         { name: "Sacraments", id: "/sacraments" },
         { name: "Staff", id: "/staff" },
-        { name: "Giving", id: "/giving" },
         { name: "Contact", id: "/contact" },
     ];
 
     return (
-        <ThemeProvider>
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline navItems={navItems} brandName="Coach" button={{ text: "Book a Call", href: "/contact" }} />
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={navItems}
+                        brandName="St. Jerome"
+                        button={{ text: "Join Us", href: "/contact" }}
+                    />
+                </div>
                 <main className="pt-32 min-h-screen px-4">
                     <h1 className="text-4xl font-bold text-center mb-8">Sacraments</h1>
                 </main>
-                <FooterBase logoText="Coach" columns={[{ title: "Navigation", items: navItems.map(i => ({ label: i.name, href: i.id })) }]} />
             </ReactLenis>
         </ThemeProvider>
     );

src/app/services/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function ServicesPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Pricing", id: "/pricing" },
+        { name: "Contact", id: "/contact" },
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={navItems}
+                        brandName="Coach"
+                        button={{ text: "Contact", href: "/contact" }}
+                    />
+                </div>
+                <div id="services" data-section="services">
+                    <FeatureCardNine
+                        title="Service Offerings"
+                        description="Comprehensive coaching programs."
+                        animationType="slide-up"
+                        textboxLayout="default"
+                        useInvertedBackground={false}
+                        showStepNumbers={true}
+                        features={[
+                            {
+                                title: "Strategy & Operations",                                description: "Optimizing business models.",                                phoneOne: { imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?_wi=1" },
+                                phoneTwo: { imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?_wi=2" }
+                            },
+                            {
+                                title: "Executive Leadership",                                description: "Refining decision-making.",                                phoneOne: { imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?_wi=3" },
+                                phoneTwo: { imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?_wi=4" }
+                            }
+                        ]}
+                    />
+                </div>
+                <ContactCTA
+                    tag="Ready?"
+                    title="Let's Connect"
+                    description="Schedule a call today."
+                    buttons={[{ text: "Contact", href: "/contact" }]}
+                    background={{ variant: "plain" }}
+                    useInvertedBackground={true}
+                />
+                <FooterBaseReveal
+                    logoText="Coach"
+                    columns={[{ title: "Info", items: [{ label: "Home", href: "/" }] }]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/staff/page.tsx

@@ -2,7 +2,6 @@
 
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterBase from "@/components/sections/footer/FooterBase";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 
 export default function StaffPage() {
@@ -11,18 +10,33 @@ export default function StaffPage() {
         { name: "Mass Schedule", id: "/mass-schedule" },
         { name: "Sacraments", id: "/sacraments" },
         { name: "Staff", id: "/staff" },
-        { name: "Giving", id: "/giving" },
         { name: "Contact", id: "/contact" },
     ];
 
     return (
-        <ThemeProvider>
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline navItems={navItems} brandName="Coach" button={{ text: "Book a Call", href: "/contact" }} />
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={navItems}
+                        brandName="St. Jerome"
+                        button={{ text: "Join Us", href: "/contact" }}
+                    />
+                </div>
                 <main className="pt-32 min-h-screen px-4">
                     <h1 className="text-4xl font-bold text-center mb-8">Our Staff</h1>
                 </main>
-                <FooterBase logoText="Coach" columns={[{ title: "Navigation", items: navItems.map(i => ({ label: i.name, href: i.id })) }]} />
             </ReactLenis>
         </ThemeProvider>
     );