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/bulletin-and-events/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
+
+export default function BulletinEventsPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Bulletin & Events", id: "/bulletin-and-events" },
+    { name: "Ministries", id: "/ministries" },
+  ];
+
+  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>
+        <NavbarLayoutFloatingInline navItems={navItems} button={{ text: "Book", href: "/contact" }} />
+        <main className="pt-24">
+          <FeatureCardSeven
+            title="Upcoming Events"
+            description="Join us for our community gatherings and spiritual growth opportunities."
+            features={[
+              { title: "Sunday Mass", description: "Weekly community worship at 10:00 AM.", imageSrc: "https://images.unsplash.com/photo-1542816417-0983c9c9ad53?w=800&h=600&fit=crop&_wi=1" },
+              { title: "Youth Bible Study", description: "Engaging sessions for teens every Wednesday.", imageSrc: "https://images.unsplash.com/photo-1542816417-0983c9c9ad53?w=800&h=600&fit=crop&_wi=2" }
+            ]}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </main>
+        <FooterBase
+          logoText="Coach"
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+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: "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="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>
+    );
+}

src/app/giving/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import ReactLenis from "lenis/react";
+import { Heart, Users } from "lucide-react";
+
+export default function GivingPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Giving", id: "/giving" },
+        { 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>
+                <NavbarLayoutFloatingInline navItems={navItems} button={{ text: "Give", href: "/giving" }} />
+                <MetricCardThree
+                    title="Our Impact"
+                    description="Your generosity makes a real difference."
+                    animationType="slide-up"
+                    textboxLayout="split"
+                    useInvertedBackground={false}
+                    metrics={[
+                        { id: "1", icon: Heart, title: "Total Donated", value: "$500k" },
+                        { id: "2", icon: Users, title: "Lives Impacted", value: "10k" },
+                    ]}
+                />
+                <PricingCardThree
+                    title="Support Our Mission"
+                    description="Choose an option that works best for you."
+                    textboxLayout="split"
+                    animationType="slide-up"
+                    useInvertedBackground={false}
+                    plans={[
+                        {
+                            id: "monthly",                            name: "Monthly Partner",                            price: "$50",                            features: ["Exclusive updates", "Community access"],
+                            buttons: [{ text: "Give Monthly", href: "#" }],
+                        },
+                        {
+                            id: "one-time",                            name: "One-Time Gift",                            price: "$100",                            features: ["Receipt provided"],
+                            buttons: [{ text: "Give Now", href: "#" }],
+                        },
+                    ]}
+                />
+                <FooterBase
+                    logoText="Coach"
+                    columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Giving", href: "/giving" }, { label: "Contact", href: "/contact" }] }]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/layout.tsx

@@ -18,7 +18,7 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
-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 const metadata: Metadata = { title: 'Coach Website', description: 'Professional coaching and parish community services.' };
 
 export default function RootLayout({
   children,

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/mass-times/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+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 MassTimesPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Mass Times", id: "/mass-times" },
+        { name: "Sacraments", id: "/sacraments" },
+    ];
+
+    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>
+                <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">Mass Schedule</h1>
+                    <div className="mt-12 p-6 bg-secondary rounded-lg">
+                        <h3 className="font-bold text-xl">Location</h3>
+                        <p>123 Parish Way, Faithful City, FC 12345</p>
+                    </div>
+                </div>
+                <FooterBase logoText="Coach" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/ministries/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
+
+export default function MinistriesPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Bulletin & Events", id: "/bulletin-and-events" },
+    { name: "Ministries", id: "/ministries" },
+  ];
+
+  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>
+        <NavbarLayoutFloatingInline navItems={navItems} button={{ text: "Contact", href: "/contact" }} />
+        <main className="pt-24">
+          <FeatureCardSeven
+            title="Parish Ministries"
+            description="Discover ways to serve, connect, and grow within our parish community."
+            features={[
+              { title: "Food Pantry", description: "Serving those in need.", imageSrc: "https://images.unsplash.com/photo-1542816417-0983c9c9ad53?w=800&h=600&fit=crop&_wi=3" },
+              { title: "Music Ministry", description: "Enhancing our worship.", imageSrc: "https://images.unsplash.com/photo-1542816417-0983c9c9ad53?w=800&h=600&fit=crop&_wi=4" },
+              { title: "Youth Mentorship", description: "Supporting the next generation.", imageSrc: "https://images.unsplash.com/photo-1542816417-0983c9c9ad53?w=800&h=600&fit=crop&_wi=5" }
+            ]}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </main>
+        <FooterBase
+          logoText="Coach"
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -1,23 +1,17 @@
 "use client";
 
 import ReactLenis from "lenis/react";
-import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
-import TeamCardTen from "@/components/sections/team/TeamCardTen";
-import ContactText from "@/components/sections/contact/ContactText";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Sparkles, Target, Users, TrendingUp, Lightbulb } from "lucide-react";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 
-export default function BusinessCoachTemplatePage() {
+export default function SaintJeromePage() {
     const navItems = [
-        { name: "About", id: "about" },
-        { name: "Services", id: "services" },
-        { name: "Testimonials", id: "testimonials" },
-        { name: "Contact", id: "contact" },
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Giving", id: "/giving" },
+        { name: "Contact", id: "/contact" },
     ];
 
     return (
@@ -36,209 +30,36 @@ 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"
                 />
-                <HeroSplitDualMedia
-                    background={{ variant: "radial-gradient" }}
-                    tag="Business Coach"
-                    tagIcon={Sparkles}
-                    title="Transform your business with proven strategies"
-                    description="I help entrepreneurs and executives unlock their full potential and build thriving businesses through personalized coaching."
-                    mediaItems={[
-                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/business-coach/hero/hero1.webp", imageAlt: "Coaching session" },
-                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/business-coach/hero/hero2.webp", imageAlt: "Business growth" },
-                    ]}
-                    rating={5}
-                    ratingText="Rated by loving Clients"
-                    buttons={[
-                        { text: "Book a Call", href: "#" },
-                        { text: "Learn More", href: "#" },
-                    ]}
-                    mediaAnimation="slide-up"
-                />
-                <FeatureCardTwentyFive
-                    tag="Services"
-                    tagIcon={Sparkles}
-                    title="How I Can Help You"
-                    description="Comprehensive coaching services designed to accelerate your growth"
-                    textboxLayout="default"
-                    animationType="slide-up"
-                    useInvertedBackground={false}
-                    features={[
-                        {
-                            title: "Business Strategy",
-                            description: "Crafting clear, actionable strategies that align with your goals for sustainable growth.",
-                            icon: Target,
-                            mediaItems: [
-                                { imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop", imageAlt: "Team collaborating around a whiteboard" },
-                                { imageSrc: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=800&h=600&fit=crop", imageAlt: "Strategy meeting presentation" },
-                            ],
-                        },
-                        {
-                            title: "Leadership Development",
-                            description: "Build the leadership skills needed to inspire teams and drive organizational success.",
-                            icon: Users,
-                            mediaItems: [
-                                { imageSrc: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=800&h=600&fit=crop", imageAlt: "Professional team meeting" },
-                                { imageSrc: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&h=600&fit=crop", imageAlt: "Confident business leader" },
-                            ],
-                        },
-                        {
-                            title: "Growth Acceleration",
-                            description: "Identify opportunities and implement systems to scale your business efficiently.",
-                            icon: TrendingUp,
-                            mediaItems: [
-                                { imageSrc: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop", imageAlt: "Business analytics dashboard" },
-                                { imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop", imageAlt: "Growth metrics on screen" },
-                            ],
-                        },
-                        {
-                            title: "Mindset Coaching",
-                            description: "Overcome limiting beliefs and develop the mindset of a successful entrepreneur.",
-                            icon: Lightbulb,
-                            mediaItems: [
-                                { imageSrc: "https://images.unsplash.com/photo-1508672019048-805c876b67e2?w=800&h=600&fit=crop", imageAlt: "Mindfulness and focus" },
-                                { imageSrc: "https://images.unsplash.com/photo-1521791136064-7986c2920216?w=800&h=600&fit=crop", imageAlt: "One-on-one coaching session" },
-                            ],
-                        },
-                    ]}
-                />
-                <TestimonialCardSixteen
-                    tag="Testimonials"
-                    tagIcon={Sparkles}
-                    title="What My Clients Say"
-                    description="Hear from entrepreneurs who've transformed their businesses"
-                    textboxLayout="default"
-                    animationType="slide-up"
-                    useInvertedBackground={false}
-                    testimonials={[
-                        {
-                            id: "1",
-                            name: "Sarah Mitchell",
-                            role: "Founder & CEO",
-                            company: "TechStart Inc",
-                            rating: 5,
-                            imageSrc: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop&crop=face",
-                            imageAlt: "Sarah Mitchell",
-                        },
-                        {
-                            id: "2",
-                            name: "Michael Chen",
-                            role: "Managing Director",
-                            company: "Growth Partners",
-                            rating: 5,
-                            imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face",
-                            imageAlt: "Michael Chen",
-                        },
-                        {
-                            id: "3",
-                            name: "Emily Rodriguez",
-                            role: "Business Owner",
-                            company: "Creative Studios",
-                            rating: 5,
-                            imageSrc: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=face",
-                            imageAlt: "Emily Rodriguez",
-                        },
-                    ]}
-                    kpiItems={[
-                        { value: "200+", label: "Clients coached" },
-                        { value: "95%", label: "Success rate" },
-                        { value: "12+", label: "Years experience" },
-                    ]}
-                />
-                <TeamCardTen
-                    title="Get to know the experienced coaches who will personally guide your entire business transformation journey"
-                    tag="About"
-                    membersAnimation="slide-up"
-                    memberVariant="card"
-                    useInvertedBackground={false}
-                    members={[
-                        {
-                            id: "1",
-                            name: "John Anderson",
-                            imageSrc: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face",
-                            imageAlt: "John Anderson - Business Coach",
-                        },
-                        {
-                            id: "2",
-                            name: "Lisa Thompson",
-                            imageSrc: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=400&h=400&fit=crop&crop=face",
-                            imageAlt: "Lisa Thompson - Executive Coach",
-                        },
-                    ]}
-                />
-                <FaqSplitMedia
-                    tag="FAQ"
-                    tagIcon={Sparkles}
-                    title="Frequently Asked Questions"
-                    description="Get answers to common questions about my coaching services"
-                    textboxLayout="default"
-                    faqsAnimation="slide-up"
-                    mediaAnimation="slide-up"
-                    useInvertedBackground={false}
-                    imageSrc="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=800&h=600&fit=crop"
-                    imageAlt="Business coaching consultation"
-                    mediaPosition="right"
-                    faqs={[
-                        {
-                            id: "1",
-                            title: "What types of businesses do you work with?",
-                            content: "I work with entrepreneurs, startups, and established businesses across various industries. My coaching is tailored to your specific challenges and goals, whether you're just starting out or scaling to the next level.",
-                        },
-                        {
-                            id: "2",
-                            title: "How long is a typical coaching engagement?",
-                            content: "Most clients see significant results within 3-6 months of consistent coaching. However, the duration depends on your goals and challenges. We'll create a customized plan during our initial consultation.",
-                        },
-                        {
-                            id: "3",
-                            title: "What can I expect from our sessions?",
-                            content: "Each session is a focused, action-oriented conversation where we'll work through your challenges, develop strategies, and set clear action items. You'll leave every session with concrete steps to implement.",
-                        },
-                        {
-                            id: "4",
-                            title: "Do you offer virtual coaching sessions?",
-                            content: "Yes, I offer both in-person and virtual coaching sessions via Zoom. Virtual sessions provide the same level of engagement and results, making coaching accessible regardless of your location.",
-                        },
-                    ]}
-                />
-                <ContactText
-                    text="Ready to transform your business? Let's start your journey to success today."
-                    background={{ variant: "plain" }}
-                    useInvertedBackground={false}
-                    buttons={[
-                        { text: "Book a Free Consultation", href: "#" },
-                        { text: "Learn More", href: "#" },
-                    ]}
-                />
-                <FooterLogoEmphasis
-                    logoText="Coach"
+                <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>
+                <FooterMedia
+                    logoText="Saint Jerome Parish"
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CPYUJPeaDgYc4FSlAZFCKnMOqE/uploaded-1776289077688-pmeewk62.jpg"
                     columns={[
                         {
-                            items: [
-                                { label: "About", href: "#about" },
-                                { label: "Services", href: "#services" },
-                                { label: "Testimonials", href: "#testimonials" },
+                            title: "Menu",                            items: [
+                                { label: "Home", href: "/" },
+                                { label: "About", href: "/about" },
+                                { label: "Giving", href: "/giving" },
+                                { label: "Contact", href: "/contact" },
                             ],
-                        },
-                        {
-                            items: [
-                                { label: "FAQ", href: "#faq" },
-                                { label: "Contact", href: "#contact" },
-                                { label: "Book a Call", href: "#" },
-                            ],
-                        },
-                        {
-                            items: [
-                                { label: "LinkedIn", href: "#" },
-                                { label: "Twitter", href: "#" },
-                                { label: "Instagram", href: "#" },
-                            ],
-                        },
+                        }
                     ]}
                 />
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/sacraments/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 SacramentsPage() {
+    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">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>
+    );
+}