Add src/app/services/page.tsx

Merge version_4 into main

src/app/about/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Award, Heart, MessageCircle, Users, Zap } from 'lucide-react';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="medium"
+      background="noiseDiagonalGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About Us", id: "/about" },
+            { name: "Services", id: "/services" },
+            { name: "Contact", id: "/contact" },
+            { name: "Donate", id: "/donate" }
+          ]}
+          brandName="Nanjil Oasis"
+          bottomLeftText="Est. 2009"
+          bottomRightText="nanjiloasismrc@gmail.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="Our Story"
+          description="Since 2009, Nanjil Oasis has been a beacon of hope for children with special needs and their families."
+          buttons={[
+            { text: "Learn More", href: "#about" },
+            { text: "Get Involved", href: "/donate" }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/group-diverse-children-sitting-together_53876-13799.jpg"
+          imageAlt="Diverse group of children at Nanjil Oasis"
+          showDimOverlay={true}
+          ariaLabel="About page hero section"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <InlineImageSplitTextAbout
+          heading={[
+            { type: "text", content: "Transforming" },
+            { type: "text", content: "lives through" },
+            { type: "text", content: "compassion and expertise" }
+          ]}
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Our Mission", href: "#mission" },
+            { text: "Contact Us", href: "/contact" }
+          ]}
+          buttonAnimation="slide-up"
+          ariaLabel="About organization section"
+        />
+      </div>
+
+      <div id="mission" data-section="mission">
+        <AboutMetric
+          title="Our Mission: Every Child Deserves to Thrive"
+          useInvertedBackground={false}
+          metrics={[
+            { icon: Heart, label: "Core Value", value: "Compassion" },
+            { icon: Users, label: "Community", value: "Inclusive" },
+            { icon: Award, label: "Excellence", value: "Holistic" },
+            { icon: Zap, label: "Impact", value: "Sustainable" }
+          ]}
+          metricsAnimation="slide-up"
+          ariaLabel="Organization mission and values"
+        />
+      </div>
+
+      <div id="journey" data-section="journey">
+        <FeatureCardTwelve
+          title="Our Journey & Growth"
+          description="From a small initiative to a comprehensive support center, we've grown while staying true to our core values of compassion, excellence, and inclusion."
+          features={[
+            {
+              id: "founded",              label: "2009",              title: "Founded with a Vision",              items: ["Started as a small therapeutic center", "Vision to serve underserved children", "Community-driven approach", "Initial team of dedicated professionals"]
+            },
+            {
+              id: "expansion",              label: "2015-2020",              title: "Expansion & Recognition",              items: ["Expanded therapy programs", "Trained staff and specialists", "Served 100+ children", "Community recognition and support"]
+            },
+            {
+              id: "future",              label: "2025+",              title: "Building Tomorrow",              items: ["New school with hostel facility", "Extended care programs", "Vocational training center", "Regional expansion plans"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Organization journey and growth"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Quick Links",              items: [
+                { label: "Home", href: "/" },
+                { label: "About Us", href: "/about" },
+                { label: "Services", href: "/services" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Donate",              items: [
+                { label: "Make a Donation", href: "/donate" },
+                { label: "Become a Partner", href: "mailto:nanjiloasismrc@gmail.com" },
+                { label: "Bank Transfer Details", href: "#" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Email Us", href: "mailto:nanjiloasismrc@gmail.com" },
+                { label: "Call Us", href: "tel:+919944330809" },
+                { label: "Location", href: "#" }
+              ]
+            },
+            {
+              title: "Bank Details",              items: [
+                { label: "PNB - Account: 3868000100376620", href: "#" },
+                { label: "UPI: 9597070301", href: "#" },
+                { label: "Registered Trust", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 Nanjil Oasis Happy Centre. All rights reserved."
+          bottomRightText="You Are Happy and Safe in Our Hands"
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { MessageCircle, Mail, Phone, MapPin } from 'lucide-react';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="medium"
+      background="noiseDiagonalGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About Us", id: "/about" },
+            { name: "Services", id: "/services" },
+            { name: "Contact", id: "/contact" },
+            { name: "Donate", id: "/donate" }
+          ]}
+          brandName="Nanjil Oasis"
+          bottomLeftText="Est. 2009"
+          bottomRightText="nanjiloasismrc@gmail.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="Get In Touch"
+          description="We're here to answer your questions and support your journey. Reach out to us today."
+          buttons={[
+            { text: "Send a Message", href: "#contact" },
+            { text: "Learn About Programs", href: "/services" }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/two-young-women-having-coffee_53876-12749.jpg"
+          imageAlt="Team members ready to assist"
+          showDimOverlay={true}
+          ariaLabel="Contact page hero section"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplit
+          tag="Contact Us"
+          title="Reach Out Today"
+          description="Have questions about our programs or want to discuss your child's needs? Our compassionate team is ready to help. Fill out the form below or contact us directly."
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/happy-family-mother-father-children_1098-1214.jpg"
+          imageAlt="Happy family at Nanjil Oasis"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          inputPlaceholder="Enter your email"
+          buttonText="Get in Touch"
+          termsText="We'll respond within 24 hours. Your information is secure and confidential."
+          onSubmit={(email) => console.log(email)}
+          ariaLabel="Contact form section"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <ContactFaq
+          ctaTitle="Still Have Questions?"
+          ctaDescription="Contact our team directly for immediate assistance with enrollment, therapy inquiries, or partnership opportunities."
+          ctaButton={{ text: "Contact Support", href: "mailto:nanjiloasismrc@gmail.com" }}
+          ctaIcon={MessageCircle}
+          useInvertedBackground={false}
+          animationType="slide-up"
+          faqs={[
+            {
+              id: "1",              title: "How do I enroll my child in your programs?",              content: "Contact us via email or phone to schedule an initial assessment. Our team will discuss your child's needs, conduct a developmental screening, and create a personalized program plan. We make enrollment simple and accessible."
+            },
+            {
+              id: "2",              title: "What are your operating hours?",              content: "We operate Monday through Friday, 9 AM to 5 PM. Weekend programs are available by special arrangement. We also offer home-based therapy and counseling by appointment."
+            },
+            {
+              id: "3",              title: "Do you offer trial sessions?",              content: "Yes! We offer a free consultation and trial session so you and your child can experience our programs firsthand. This helps us understand your needs and show you our approach."
+            },
+            {
+              id: "4",              title: "Can we partner with or sponsor your organization?",              content: "Absolutely! We welcome corporate partnerships, sponsorships, and volunteer opportunities. Please reach out to discuss how your organization can make a difference in children's lives."
+            },
+            {
+              id: "5",              title: "What payment options do you accept?",              content: "We accept bank transfers, UPI payments, and cash. We also offer flexible payment plans and scholarships based on family income. No child is turned away due to financial constraints."
+            }
+          ]}
+          accordionAnimationType="smooth"
+          ariaLabel="Contact and frequently asked questions section"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Quick Links",              items: [
+                { label: "Home", href: "/" },
+                { label: "About Us", href: "/about" },
+                { label: "Services", href: "/services" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Donate",              items: [
+                { label: "Make a Donation", href: "/donate" },
+                { label: "Become a Partner", href: "mailto:nanjiloasismrc@gmail.com" },
+                { label: "Bank Transfer Details", href: "#" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Email Us", href: "mailto:nanjiloasismrc@gmail.com" },
+                { label: "Call Us", href: "tel:+919944330809" },
+                { label: "Location", href: "#" }
+              ]
+            },
+            {
+              title: "Bank Details",              items: [
+                { label: "PNB - Account: 3868000100376620", href: "#" },
+                { label: "UPI: 9597070301", href: "#" },
+                { label: "Registered Trust", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 Nanjil Oasis Happy Centre. All rights reserved."
+          bottomRightText="You Are Happy and Safe in Our Hands"
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/donate/page.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Heart, Users, Award, Zap } from 'lucide-react';
+
+export default function DonatePage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="medium"
+      background="noiseDiagonalGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About Us", id: "/about" },
+            { name: "Services", id: "/services" },
+            { name: "Contact", id: "/contact" },
+            { name: "Donate", id: "/donate" }
+          ]}
+          brandName="Nanjil Oasis"
+          bottomLeftText="Est. 2009"
+          bottomRightText="nanjiloasismrc@gmail.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="Make a Difference"
+          description="Your contribution directly transforms children's lives. Together, we're building a brighter future for every child in our care."
+          buttons={[
+            { text: "Choose a Donation Tier", href: "#donate" },
+            { text: "Learn About Impact", href: "#impact" }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/happy-children-playing-together-outdoors_53876-121893.jpg"
+          imageAlt="Children thriving with support from Nanjil Oasis"
+          showDimOverlay={true}
+          ariaLabel="Donation page hero section"
+        />
+      </div>
+
+      <div id="donate" data-section="donate">
+        <PricingCardEight
+          title="Together, Let's Build Their Tomorrow"
+          description="We are building a new school with hostel facility for children with special needs—especially from poor and single-parent families. Every contribution brings hope closer. 🔒 100% of your donation goes directly to the children."
+          tag="Make a Difference"
+          tagIcon={Heart}
+          tagAnimation="slide-up"
+          plans={[
+            {
+              id: "500",              badge: "Support",              price: "₹500",              subtitle: "Provides one session of therapy",              buttons: [{ text: "Donate ₹500", href: "#" }],
+              features: ["One therapy session", "Direct impact on a child", "Monthly impact report"]
+            },
+            {
+              id: "1000",              badge: "Care",              price: "₹1,000",              subtitle: "Supports a week of meals and therapy",              buttons: [{ text: "Donate ₹1,000", href: "#" }],
+              features: ["Weekly nutrition support", "Ongoing therapy sessions", "Progress updates"]
+            },
+            {
+              id: "2500",              badge: "Build",              price: "₹2,500",              subtitle: "Provides monthly educational supplies",              buttons: [{ text: "Donate ₹2,500", href: "#" }],
+              features: ["Monthly school supplies", "Personalized learning materials", "Quarterly impact newsletter"]
+            },
+            {
+              id: "5000",              badge: "Transform",              badgeIcon: Zap,
+              price: "₹5,000",              subtitle: "Transforms a child's entire month",              buttons: [{ text: "Donate ₹5,000", href: "#" }],
+              features: ["Complete monthly support", "All therapies & education", "Named sponsorship option"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[{ text: "Custom Donation", href: "#" }]}
+          buttonAnimation="slide-up"
+          ariaLabel="Donation options and contribution tiers"
+        />
+      </div>
+
+      <div id="impact" data-section="impact">
+        <AboutMetric
+          title="The Impact of Your Generosity"
+          useInvertedBackground={false}
+          metrics={[
+            { icon: Users, label: "Children Supported", value: "40+" },
+            { icon: Award, label: "Success Stories", value: "100+" },
+            { icon: Heart, label: "Families Helped", value: "50+" },
+            { icon: Zap, label: "Therapies Provided", value: "1000+" }
+          ]}
+          metricsAnimation="slide-up"
+          ariaLabel="Impact metrics and donation statistics"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFifteen
+          testimonial="Supporting Nanjil Oasis has been the most rewarding decision our family made. Every rupee creates real change—better therapies, happier children, and stronger families. This is true impact."
+          rating={5}
+          author="Priya & Rohit, Donors"
+          avatars={[
+            { src: "http://img.b2bpic.net/free-photo/smiling-woman-with-child_53876-128.jpg", alt: "Donor testimonial" },
+            { src: "http://img.b2bpic.net/free-photo/happy-family-portrait_1098-168.jpg", alt: "Family member" },
+            { src: "http://img.b2bpic.net/free-photo/cheerful-man-helping-child_53876-213.jpg", alt: "Volunteer" },
+            { src: "http://img.b2bpic.net/free-photo/grateful-family-with-social-worker_53876-192.jpg", alt: "Beneficiary family" },
+            { src: "http://img.b2bpic.net/free-photo/happy-couple-with-child_53876-147.jpg", alt: "Donor couple" },
+            { src: "http://img.b2bpic.net/free-photo/smiling-family-embracing_53876-161.jpg", alt: "Grateful family" }
+          ]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
+          useInvertedBackground={false}
+          ariaLabel="Testimonial from donors and supporters"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Quick Links",              items: [
+                { label: "Home", href: "/" },
+                { label: "About Us", href: "/about" },
+                { label: "Services", href: "/services" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Donate",              items: [
+                { label: "Make a Donation", href: "/donate" },
+                { label: "Become a Partner", href: "mailto:nanjiloasismrc@gmail.com" },
+                { label: "Bank Transfer Details", href: "#" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Email Us", href: "mailto:nanjiloasismrc@gmail.com" },
+                { label: "Call Us", href: "tel:+919944330809" },
+                { label: "Location", href: "#" }
+              ]
+            },
+            {
+              title: "Bank Details",              items: [
+                { label: "PNB - Account: 3868000100376620", href: "#" },
+                { label: "UPI: 9597070301", href: "#" },
+                { label: "Registered Trust", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 Nanjil Oasis Happy Centre. All rights reserved."
+          bottomRightText="You Are Happy and Safe in Our Hands"
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -28,11 +28,11 @@ export default function LandingPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
-            { name: "Home", id: "home" },
-            { name: "About Us", id: "about" },
-            { name: "Services", id: "services" },
-            { name: "Contact", id: "contact" },
-            { name: "Donate", id: "donate" }
+            { name: "Home", id: "/" },
+            { name: "About Us", id: "/about" },
+            { name: "Services", id: "/services" },
+            { name: "Contact", id: "/contact" },
+            { name: "Donate", id: "/donate" }
           ]}
           brandName="Nanjil Oasis"
           bottomLeftText="Est. 2009"
@@ -48,8 +48,8 @@ export default function LandingPage() {
           tagIcon={Heart}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Donate Now", href: "#donate" },
-            { text: "Our Journey", href: "#about" }
+            { text: "Donate Now", href: "/donate" },
+            { text: "Our Journey", href: "/about" }
           ]}
           buttonAnimation="slide-up"
           carouselItems={[
@@ -145,27 +145,27 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           plans={[
             {
-              id: "500",              badge: "Support",              price: "₹500",              subtitle: "Provides one session of therapy",              buttons: [{ text: "Donate ₹500", href: "#" }],
+              id: "500",              badge: "Support",              price: "₹500",              subtitle: "Provides one session of therapy",              buttons: [{ text: "Donate ₹500", href: "/donate" }],
               features: ["One therapy session", "Direct impact on a child", "Monthly impact report"]
             },
             {
-              id: "1000",              badge: "Care",              price: "₹1,000",              subtitle: "Supports a week of meals and therapy",              buttons: [{ text: "Donate ₹1,000", href: "#" }],
+              id: "1000",              badge: "Care",              price: "₹1,000",              subtitle: "Supports a week of meals and therapy",              buttons: [{ text: "Donate ₹1,000", href: "/donate" }],
               features: ["Weekly nutrition support", "Ongoing therapy sessions", "Progress updates"]
             },
             {
-              id: "2500",              badge: "Build",              price: "₹2,500",              subtitle: "Provides monthly educational supplies",              buttons: [{ text: "Donate ₹2,500", href: "#" }],
+              id: "2500",              badge: "Build",              price: "₹2,500",              subtitle: "Provides monthly educational supplies",              buttons: [{ text: "Donate ₹2,500", href: "/donate" }],
               features: ["Monthly school supplies", "Personalized learning materials", "Quarterly impact newsletter"]
             },
             {
               id: "5000",              badge: "Transform",              badgeIcon: Zap,
-              price: "₹5,000",              subtitle: "Transforms a child's entire month",              buttons: [{ text: "Donate ₹5,000", href: "#" }],
+              price: "₹5,000",              subtitle: "Transforms a child's entire month",              buttons: [{ text: "Donate ₹5,000", href: "/donate" }],
               features: ["Complete monthly support", "All therapies & education", "Named sponsorship option"]
             }
           ]}
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          buttons={[{ text: "Custom Donation", href: "#" }]}
+          buttons={[{ text: "Custom Donation", href: "/donate" }]}
           buttonAnimation="slide-up"
           ariaLabel="Donation options and contribution tiers"
         />
@@ -206,15 +206,15 @@ export default function LandingPage() {
           columns={[
             {
               title: "Quick Links",              items: [
-                { label: "Home", href: "#home" },
-                { label: "About Us", href: "#about" },
-                { label: "Services", href: "#services" },
-                { label: "Contact", href: "#contact" }
+                { label: "Home", href: "/" },
+                { label: "About Us", href: "/about" },
+                { label: "Services", href: "/services" },
+                { label: "Contact", href: "/contact" }
               ]
             },
             {
               title: "Donate",              items: [
-                { label: "Make a Donation", href: "#donate" },
+                { label: "Make a Donation", href: "/donate" },
                 { label: "Become a Partner", href: "mailto:nanjiloasismrc@gmail.com" },
                 { label: "Bank Transfer Details", href: "#" }
               ]

src/app/services/page.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Award, Heart, Users, Zap } from 'lucide-react';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="medium"
+      background="noiseDiagonalGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About Us", id: "/about" },
+            { name: "Services", id: "/services" },
+            { name: "Contact", id: "/contact" },
+            { name: "Donate", id: "/donate" }
+          ]}
+          brandName="Nanjil Oasis"
+          bottomLeftText="Est. 2009"
+          bottomRightText="nanjiloasismrc@gmail.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="Our Services"
+          description="Comprehensive support programs designed to meet each child's unique needs with compassion and expertise."
+          buttons={[
+            { text: "Explore Programs", href: "#services" },
+            { text: "Get Support", href: "/contact" }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/therapist-working-with-child_53876-12890.jpg"
+          imageAlt="Therapist working with a child in a supportive environment"
+          showDimOverlay={true}
+          ariaLabel="Services page hero section"
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardTwelve
+          title="Comprehensive Support Services"
+          description="We offer holistic, multi-disciplinary therapies and educational programs tailored to each child's unique needs and abilities."
+          features={[
+            {
+              id: "early-intervention",              label: "Early Intervention",              title: "Foundational Development Programs",              items: ["Developmental screening", "Family-centered support", "Skill-building activities", "Progress monitoring"]
+            },
+            {
+              id: "therapies",              label: "Therapies",              title: "Specialized Therapeutic Services",              items: ["Speech therapy", "Physiotherapy", "Occupational therapy", "Music & dance therapy", "Art therapy", "Hydrotherapy"]
+            },
+            {
+              id: "vocational",              label: "Life Skills",              title: "Empowering Independence",              items: ["Vocational training", "Sand therapy", "Skating", "Silambam (martial arts)", "Yoga & wellness", "Daily living skills"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Services and support programs section"
+        />
+      </div>
+
+      <div id="outcomes" data-section="outcomes">
+        <AboutMetric
+          title="Our Track Record of Success"
+          useInvertedBackground={false}
+          metrics={[
+            { icon: Users, label: "Children Served", value: "300+" },
+            { icon: Award, label: "Success Rate", value: "92%" },
+            { icon: Heart, label: "Family Satisfaction", value: "98%" },
+            { icon: Zap, label: "Program Types", value: "12+" }
+          ]}
+          metricsAnimation="slide-up"
+          ariaLabel="Services outcomes and impact metrics"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFifteen
+          testimonial="The personalized approach and skilled team at Nanjil Oasis made all the difference. My child has grown beyond what I thought possible. The therapies are effective, and the staff genuinely cares about each child's progress."
+          rating={5}
+          author="Arun K., Parent"
+          avatars={[
+            { src: "http://img.b2bpic.net/free-photo/cheerful-man-smiling-at-camera_95076-237.jpg", alt: "Parent testimonial" },
+            { src: "http://img.b2bpic.net/free-photo/happy-family-mother-child-daughter_1257-49.jpg", alt: "Family member" },
+            { src: "http://img.b2bpic.net/free-photo/positive-emotions-cheerful-family_1098-176.jpg", alt: "Parent testimonial" },
+            { src: "http://img.b2bpic.net/free-photo/portrait-young-man-white-background_53876-27098.jpg", alt: "Team member" },
+            { src: "http://img.b2bpic.net/free-photo/happy-woman-holding-child_53876-128.jpg", alt: "Parent testimonial" },
+            { src: "http://img.b2bpic.net/free-photo/smiling-couple-embracing-against-white-wall_23-2148172524.jpg", alt: "Caregiver testimonial" }
+          ]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
+          useInvertedBackground={false}
+          ariaLabel="Testimonial from parents about our services"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Quick Links",              items: [
+                { label: "Home", href: "/" },
+                { label: "About Us", href: "/about" },
+                { label: "Services", href: "/services" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Donate",              items: [
+                { label: "Make a Donation", href: "/donate" },
+                { label: "Become a Partner", href: "mailto:nanjiloasismrc@gmail.com" },
+                { label: "Bank Transfer Details", href: "#" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Email Us", href: "mailto:nanjiloasismrc@gmail.com" },
+                { label: "Call Us", href: "tel:+919944330809" },
+                { label: "Location", href: "#" }
+              ]
+            },
+            {
+              title: "Bank Details",              items: [
+                { label: "PNB - Account: 3868000100376620", href: "#" },
+                { label: "UPI: 9597070301", href: "#" },
+                { label: "Registered Trust", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 Nanjil Oasis Happy Centre. All rights reserved."
+          bottomRightText="You Are Happy and Safe in Our Hands"
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}