Update src/app/services/page.tsx

Merge version_4 into main

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/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/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/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>
+    );
+}