Update src/app/staff/page.tsx

Merge version_3 into main

src/app/about/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import FooterCard from "@/components/sections/footer/FooterCard";
+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: "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="St. Jerome"
+                        button={{ text: "Join Us", href: "/contact" }}
+                    />
+                </div>
+                <main className="pt-32">
+                    <div id="about" data-section="about">
+                        <MetricSplitMediaAbout
+                            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}
+                            metrics={[{ value: "100+", title: "Years Served" }, { value: "500+", title: "Families" }]}
+                            useInvertedBackground={false}
+                            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077687-hlsfoa09.jpg"
+                            imageAlt="Church History"
+                        />
+                    </div>
+                </main>
+                <FooterCard
+                    logoText="St. Jerome"
+                    copyrightText="© 2025 St. Jerome Roman Catholic Church"
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/contact/page.tsx

@@ -1,15 +1,16 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBase from "@/components/sections/footer/FooterBase";
 import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { MapPin } from "lucide-react";
 
 export default function ContactPage() {
     const navItems = [
         { name: "Home", id: "/" },
-        { name: "Giving", id: "/giving" },
+        { name: "About", id: "/about" },
         { name: "Contact", id: "/contact" },
     ];
 
@@ -27,18 +28,28 @@ export default function ContactPage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline navItems={navItems} button={{ text: "Book", href: "/contact" }} />
+                <div id="nav" data-section="nav">
-                <ContactCTA
+                    <NavbarLayoutFloatingInline
-                    tag="Contact Us"
+                        navItems={navItems}
-                    title="Get in touch with us"
+                        brandName="St. Jerome"
-                    description="We are here to answer your questions and provide support."
+                        button={{ text: "Join Us", href: "/contact" }}
-                    buttons={[{ text: "Contact", href: "/contact" }]}
+                    />
-                    background={{ variant: "plain" }}
+                </div>
-                    useInvertedBackground={false}
+                <main className="pt-32">
-                />
+                    <div id="contact" data-section="contact">
-                <FooterBase
+                        <ContactCenter
-                    logoText="Coach"
+                            title="Contact Information"
-                    columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Giving", href: "/giving" }, { label: "Contact", href: "/contact" }] }]}
+                            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}
+                            background={{ variant: "radial-gradient" }}
+                            useInvertedBackground={false}
+                        />
+                    </div>
+                </main>
+                <FooterCard
+                    logoText="St. Jerome"
+                    copyrightText="© 2025 St. Jerome Roman Catholic Church"
                 />
             </ReactLenis>
         </ThemeProvider>

src/app/mass-schedule/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function MassSchedulePage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Mass Schedule", id: "/mass-schedule" },
+        { name: "Sacraments", id: "/sacraments" },
+        { name: "Staff", id: "/staff" },
+        { 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="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>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/page.tsx

@@ -2,13 +2,14 @@
 
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 
-export default function BusinessCoachTemplatePage() {
+export default function SaintJeromePage() {
     const navItems = [
         { name: "Home", id: "/" },
-        { name: "About", id: "about" },
+        { name: "About", id: "/about" },
         { name: "Giving", id: "/giving" },
         { name: "Contact", id: "/contact" },
     ];
@@ -29,18 +30,29 @@ export default function BusinessCoachTemplatePage() {
             <ReactLenis root>
                 <NavbarLayoutFloatingInline
                     navItems={navItems}
-                    brandName="Coach"
+                    brandName="Saint Jerome"
-                    button={{ text: "Book a Call", href: "/contact" }}
+                    button={{ text: "Giving", href: "/giving" }}
+                    logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077688-pmeewk62.jpg"
                 />
-                <main className="pt-32">
+                <main>
-                    <h1 className="text-center text-4xl">Welcome to Coach</h1>
+                    <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>
-                <FooterBase
+                <FooterMedia
-                    logoText="Coach"
+                    logoText="Saint Jerome Parish"
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077688-pmeewk62.jpg"
                     columns={[
                         {
-                            title: "Navigation",                            items: [
+                            title: "Menu",                            items: [
                                 { label: "Home", href: "/" },
+                                { label: "About", href: "/about" },
                                 { label: "Giving", href: "/giving" },
                                 { label: "Contact", href: "/contact" },
                             ],

src/app/sacraments/page.tsx

@@ -3,24 +3,40 @@
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import FooterBase from "@/components/sections/footer/FooterBase";
 
 export default function SacramentsPage() {
     const navItems = [
         { name: "Home", id: "/" },
-        { name: "Mass Times", id: "/mass-times" },
+        { name: "Mass Schedule", id: "/mass-schedule" },
         { name: "Sacraments", id: "/sacraments" },
+        { name: "Staff", id: "/staff" },
+        { 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">
+        <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} button={{ text: "Contact", href: "/contact" }} />
+                <div id="nav" data-section="nav">
-                <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
+                    <NavbarLayoutFloatingInline
-                    <h1 className="text-4xl font-bold mb-8">Sacraments</h1>
+                        navItems={navItems}
-                    <p>The seven sacraments are the life of our Church.</p>
+                        brandName="St. Jerome"
+                        button={{ text: "Join Us", href: "/contact" }}
+                    />
                 </div>
-                <FooterBase logoText="Coach" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+                <main className="pt-32 min-h-screen px-4">
+                    <h1 className="text-4xl font-bold text-center mb-8">Sacraments</h1>
+                </main>
             </ReactLenis>
         </ThemeProvider>
     );

src/app/staff/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function StaffPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Mass Schedule", id: "/mass-schedule" },
+        { name: "Sacraments", id: "/sacraments" },
+        { name: "Staff", id: "/staff" },
+        { 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="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>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}