Update src/app/staff/page.tsx

Update src/app/sacraments/page.tsx
Update src/app/mass-schedule/page.tsx
2026-04-15 21:41:00 +00:00 · 2026-04-15 21:40:59 +00:00 · 2026-04-15 21:40:58 +00:00 · 2026-04-15 21:40:58 +00:00 · 2026-04-15 21:40:57 +00:00 · 2026-04-15 21:38:47 +00:00
6 changed files with 219 additions and 35 deletions
--- a/src/app/about/page.tsx
+++ b/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>
+    );
+}
--- a/src/app/contact/page.tsx
+++ b/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" }} />
-                <ContactCTA
-                    tag="Contact Us"
-                    title="Get in touch with us"
-                    description="We are here to answer your questions and provide support."
-                    buttons={[{ text: "Contact", href: "/contact" }]}
-                    background={{ variant: "plain" }}
-                    useInvertedBackground={false}
-                />
-                <FooterBase
-                    logoText="Coach"
-                    columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Giving", href: "/giving" }, { label: "Contact", 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">
+                    <div id="contact" data-section="contact">
+                        <ContactCenter
+                            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}
+                            background={{ variant: "radial-gradient" }}
+                            useInvertedBackground={false}
+                        />
+                    </div>
+                </main>
+                <FooterCard
+                    logoText="St. Jerome"
+                    copyrightText="© 2025 St. Jerome Roman Catholic Church"
                />
            </ReactLenis>
        </ThemeProvider>
--- a/src/app/mass-schedule/page.tsx
+++ b/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>
+    );
+}
--- a/src/app/page.tsx
+++ b/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"
-                    button={{ text: "Book a Call", href: "/contact" }}
+                    brandName="Saint Jerome"
+                    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">
-                    <h1 className="text-center text-4xl">Welcome to Coach</h1>
+                <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>
-                <FooterBase
-                    logoText="Coach"
+                <FooterMedia
+                    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" },
                            ],
--- a/src/app/sacraments/page.tsx
+++ b/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 className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
-                    <h1 className="text-4xl font-bold mb-8">Sacraments</h1>
-                    <p>The seven sacraments are the life of our Church.</p>
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={navItems}
+                        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>
    );
--- a/src/app/staff/page.tsx
+++ b/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>
+    );
+}
Author	SHA1	Message	Date
bender	c35363602c	Update src/app/staff/page.tsx	2026-04-15 21:41:00 +00:00
bender	7ad19eaf68	Update src/app/sacraments/page.tsx	2026-04-15 21:40:59 +00:00
bender	949c760364	Update src/app/mass-schedule/page.tsx	2026-04-15 21:40:58 +00:00
bender	415d8b93d2	Update src/app/contact/page.tsx	2026-04-15 21:40:58 +00:00
bender	74aa0fa849	Update src/app/about/page.tsx	2026-04-15 21:40:57 +00:00
bender	a867798950	Update src/app/staff/page.tsx	2026-04-15 21:38:47 +00:00
bender	a10609fedd	Update src/app/sacraments/page.tsx	2026-04-15 21:38:47 +00:00
bender	038a706ece	Update src/app/mass-schedule/page.tsx	2026-04-15 21:38:46 +00:00
bender	1c0ae719d4	Update src/app/contact/page.tsx	2026-04-15 21:38:46 +00:00
bender	0a50bba47b	Update src/app/about/page.tsx	2026-04-15 21:38:45 +00:00
bender	b25cafd853	Add src/app/staff/page.tsx	2026-04-15 21:38:14 +00:00
bender	6b1b0a3522	Update src/app/sacraments/page.tsx	2026-04-15 21:38:14 +00:00
bender	30f0cdd4bf	Update src/app/page.tsx	2026-04-15 21:38:14 +00:00
bender	2d8abaf730	Add src/app/mass-schedule/page.tsx	2026-04-15 21:38:13 +00:00
bender	75e2c7c099	Update src/app/contact/page.tsx	2026-04-15 21:38:13 +00:00
bender	59223cfacc	Add src/app/about/page.tsx	2026-04-15 21:38:12 +00:00
bender	6cf924a05c	Merge version_3 into main Merge version_3 into main	2026-04-15 21:37:46 +00:00
bender	fc2364fb14	Merge version_3 into main Merge version_3 into main	2026-04-15 21:37:21 +00:00
bender	017cf05392	Merge version_3 into main Merge version_3 into main	2026-04-15 21:36:41 +00:00