Merge version_2 into main

Merge version_2 into main

src/app/academics/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function AcademicsPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Academics", id: "/academics" },
+            { name: "Programs", id: "/programs" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
+          ]}
+        />
+      </div>
+      <div className="pt-32">
+        <div id="features" data-section="features">
+          <FeatureCardTwelve
+            title="Academic Programs & Courses"
+            description="Explore our comprehensive range of subjects and academic pathways."
+            textboxLayout="split"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            features={[
+              { id: "f1", label: "Science", title: "STEM Excellence", items: ["Physics", "Chemistry", "Biology", "Computer Science"] },
+              { id: "f2", label: "Arts", title: "Humanities", items: ["History", "Geography", "Literature", "Fine Arts"] },
+            ]}
+          />
+        </div>
+        <div id="team" data-section="team">
+          <TeamCardEleven
+            title="Our Distinguished Faculty"
+            description="Meet the dedicated educators guiding our students."
+            textboxLayout="split"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            groups={[
+              {
+                id: "g1", groupTitle: "Department of Sciences", members: [{ id: "m1", title: "Head of Science", subtitle: "PhD in Physics", detail: "Expert in educational pedagogy and science curriculum development." }]
+              }
+            ]}
+          />
+        </div>
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          logoText="SJHN"
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/admissions/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ReactLenis from "lenis/react";
+
+export default function AdmissionsPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Admissions", id: "/admissions" },
+                { name: "News", id: "/news" },
+                { name: "About", id: "/#about" },
+                { name: "Contact", id: "/#contact" },
+            ]}
+          />
+        </div>
+        <div id="timeline" data-section="timeline">
+          <TimelineHorizontalCardStack 
+            title="Enrollment Process"
+            description="Step-by-step guide to joining our school community."
+            textboxLayout="default"
+            className="pt-32"
+            useInvertedBackground={false}
+          >
+            <div />
+          </TimelineHorizontalCardStack>
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Apply Now"
+            description="Submit your application inquiry today."
+            inputs={[{ name: "name", type: "text", placeholder: "Student Name" }, { name: "email", type: "email", placeholder: "Parent Email" }]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="SJHN"
+            columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }] }]} 
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/gallery/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+
+export default function GalleryPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Gallery", id: "#gallery"}, {name: "Staff", id: "/staff"}]} />
+        </div>
+        <div id="gallery" data-section="gallery" className="py-20">
+          <ProductCardTwo 
+            title="School Media Gallery"
+            description="Capturing memorable moments from campus life, sports events, and academic milestones."
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "Graduation 2024", brand: "Album", price: "12 photos", rating: 5, reviewCount: "100", imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-student-girl-completing-her-class-notes-with-information_482257-114573.jpg" },
+              { id: "p2", name: "Science Fair", brand: "Album", price: "24 photos", rating: 5, reviewCount: "100", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-lady-with-dark-curly-hair-khaki-shirt-holding-laptop-with-notepad-cup-coffee-go-hands-dreamily-looking-camera-isolated_574295-2237.jpg" },
+              { id: "p3", name: "Sports Day", brand: "Album", price: "18 photos", rating: 5, reviewCount: "100", imageSrc: "http://img.b2bpic.net/free-photo/successful-guy-with-glasses_1098-1116.jpg?_wi=1" },
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal logoText="SJHN" columns={[]} />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/news/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ReactLenis from "lenis/react";
+
+export default function NewsPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Admissions", id: "/admissions" },
+                { name: "News", id: "/news" },
+                { name: "About", id: "/#about" },
+                { name: "Contact", id: "/#contact" },
+            ]}
+          />
+        </div>
+        <div id="news" data-section="news">
+          <BlogCardThree 
+            title="Latest Announcements"
+            description="Stay updated with all school news."
+            animationType="slide-up"
+            textboxLayout="default"
+            className="pt-32"
+            useInvertedBackground={false}
+            blogs={[]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="SJHN"
+            columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }] }]} 
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,16 +32,13 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Pillars",          id: "pillars"},
-        {
-          name: "Community",          id: "metrics"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Pillars", id: "pillars" },
+        { name: "Community", id: "metrics" },
+        { name: "Gallery", id: "/gallery" },
+        { name: "Staff", id: "/staff" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="SJHN"
     />
@@ -52,22 +49,16 @@ export default function LandingPage() {
       title="Excellence in Education and Faith"
       description="St. Joseph's High School Namagunga is dedicated to nurturing academic growth and spiritual maturity in our students, preparing them to be leaders of tomorrow."
       buttons={[
-        {
-          text: "Apply Now",          href: "#contact"},
+        { text: "Apply Now", href: "#contact" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/boston-clock-tower-downtown_649448-5289.jpg"
       showBlur={true}
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-with-book_23-2148680226.jpg",          alt: "Front view smiley woman with book"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-adult-woman-posing-with-book_23-2148464478.jpg",          alt: "Portrait of adult woman posing with book"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-beautiful-lady-with-dark-curly-hair-khaki-shirt-holding-laptop-with-notepad-cup-coffee-go-hands-dreamily-looking-camera-isolated_574295-2237.jpg",          alt: "Young beautiful lady with dark curly hair"},
-        {
-          src: "http://img.b2bpic.net/free-photo/successful-guy-with-glasses_1098-1116.jpg",          alt: "Successful guy with glasses"},
-        {
-          src: "http://img.b2bpic.net/free-photo/pretty-student-posing-white_114579-76841.jpg",          alt: "Pretty student posing on white"},
+        { src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-with-book_23-2148680226.jpg", alt: "Front view smiley woman with book" },
+        { src: "http://img.b2bpic.net/free-photo/portrait-adult-woman-posing-with-book_23-2148464478.jpg", alt: "Portrait of adult woman posing with book" },
+        { src: "http://img.b2bpic.net/free-photo/young-beautiful-lady-with-dark-curly-hair-khaki-shirt-holding-laptop-with-notepad-cup-coffee-go-hands-dreamily-looking-camera-isolated_574295-2237.jpg", alt: "Young beautiful lady with dark curly hair" },
+        { src: "http://img.b2bpic.net/free-photo/successful-guy-with-glasses_1098-1116.jpg", alt: "Successful guy with glasses" },
+        { src: "http://img.b2bpic.net/free-photo/pretty-student-posing-white_114579-76841.jpg", alt: "Pretty student posing on white" },
       ]}
       avatarText="Join our community of over 2,000+ students and alumni."
     />
@@ -78,15 +69,9 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="Academic Legacy"
       metrics={[
-        {
-          icon: GraduationCap,
-          label: "Graduation Rate",          value: "98%"},
-        {
-          icon: BookOpen,
-          label: "Library Volumes",          value: "50k+"},
-        {
-          icon: Award,
-          label: "National Awards",          value: "150+"},
+        { icon: GraduationCap, label: "Graduation Rate", value: "98%" },
+        { icon: BookOpen, label: "Library Volumes", value: "50k+" },
+        { icon: Award, label: "National Awards", value: "150+" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -98,15 +83,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          icon: BookOpen,
-          title: "Academic Excellence",          description: "Rigorous curriculum focusing on holistic learning and critical thinking."},
-        {
-          icon: Plus,
-          title: "Faith & Integrity",          description: "Character building grounded in our Catholic tradition and values."},
-        {
-          icon: Trophy,
-          title: "Sports & Talent",          description: "Comprehensive athletic and extracurricular programs to harness potential."},
+        { icon: BookOpen, title: "Academic Excellence", description: "Rigorous curriculum focusing on holistic learning and critical thinking." },
+        { icon: Plus, title: "Faith & Integrity", description: "Character building grounded in our Catholic tradition and values." },
+        { icon: Trophy, title: "Sports & Talent", description: "Comprehensive athletic and extracurricular programs to harness potential." },
       ]}
       title="Our Pillars of Success"
       description="We build strong foundations through core values and comprehensive development paths."
@@ -119,15 +98,9 @@ export default function LandingPage() {
       useInvertedBackground={true}
       animationType="slide-up"
       metrics={[
-        {
-          id: "m1",          icon: Users,
-          title: "Total Alumni",          value: "10,000+"},
-        {
-          id: "m2",          icon: Star,
-          title: "Scholarship Students",          value: "500+"},
-        {
-          id: "m3",          icon: Building2,
-          title: "School Years",          value: "60+"},
+        { id: "m1", icon: Users, title: "Total Alumni", value: "10,000+" },
+        { id: "m2", icon: Star, title: "Scholarship Students", value: "500+" },
+        { id: "m3", icon: Building2, title: "School Years", value: "60+" },
       ]}
       title="Community Impact"
       description="Measuring our contribution to the growth of Uganda's future leaders."
@@ -140,21 +113,9 @@ export default function LandingPage() {
       textboxLayout="split-description"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",          name: "Sarah Namuyiga",          handle: "@alumni",          testimonial: "Namagunga shaped my professional path by instilling confidence and values.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/image-beautiful-young-smiling-woman-with-blond-hair-walking-along-street-sunny-day-carry-her_1258-205916.jpg"},
-        {
-          id: "t2",          name: "John Kabuga",          handle: "@parent",          testimonial: "Excellent care and academic guidance provided to my children.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/fathers-day-concept-with-smiling-father-daughter_23-2147805472.jpg"},
-        {
-          id: "t3",          name: "David Ssenyonga",          handle: "@alumni",          testimonial: "The best high school education one can find in Uganda.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-student-girl-completing-her-class-notes-with-information_482257-114573.jpg"},
-        {
-          id: "t4",          name: "Rosemary Nsubuga",          handle: "@teacher",          testimonial: "A dedicated staff working towards the betterment of every child.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/here-are-your-test-results-you-got_637285-8656.jpg"},
-        {
-          id: "t5",          name: "Peter Kiggundu",          handle: "@student",          testimonial: "It's an amazing school with great resources and teachers.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-looking-camera-graduate-uniform-looking-sensible_176474-82374.jpg"},
+        { id: "t1", name: "Sarah Namuyiga", handle: "@alumni", testimonial: "Namagunga shaped my professional path by instilling confidence and values.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/image-beautiful-young-smiling-woman-with-blond-hair-walking-along-street-sunny-day-carry-her_1258-205916.jpg" },
+        { id: "t2", name: "John Kabuga", handle: "@parent", testimonial: "Excellent care and academic guidance provided to my children.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fathers-day-concept-with-smiling-father-daughter_23-2147805472.jpg" },
+        { id: "t3", name: "David Ssenyonga", handle: "@alumni", testimonial: "The best high school education one can find in Uganda.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-student-girl-completing-her-class-notes-with-information_482257-114573.jpg" },
       ]}
       showRating={true}
       title="Voices of the Community"
@@ -166,12 +127,9 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "q1",          title: "How to apply?",          content: "You can download our admission forms from the office or website."},
-        {
-          id: "q2",          title: "Are there scholarships?",          content: "Yes, we offer various academic and financial aid scholarships."},
-        {
-          id: "q3",          title: "What extracurriculars exist?",          content: "We offer music, dance, various sports, and academic clubs."},
+        { id: "q1", title: "How to apply?", content: "You can download our admission forms from the office or website." },
+        { id: "q2", title: "Are there scholarships?", content: "Yes, we offer various academic and financial aid scholarships." },
+        { id: "q3", title: "What extracurriculars exist?", content: "We offer music, dance, various sports, and academic clubs." },
       ]}
       sideTitle="Common Questions"
       sideDescription="Everything you need to know about our admission and school life."
@@ -179,34 +137,16 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="partners" data-section="partners">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Ministry of Education",        "Catholic Secretariat",        "Makerere University",        "Uganda Chamber of Commerce",        "Rotary International",        "STEM Foundation",        "Arts Association"]}
-      title="Proud Partners"
-      description="Collaborating with leading organizations for educational excellence."
-    />
-  </div>
-
   <div id="contact" data-section="contact">
       <ContactSplitForm
       useInvertedBackground={true}
       title="Admissions Inquiries"
       description="Feel free to reach out to us regarding admissions, partnerships, or general information."
       inputs={[
-        {
-          name: "fullName",          type: "text",          placeholder: "Full Name",          required: true,
-        },
-        {
-          name: "email",          type: "email",          placeholder: "Email Address",          required: true,
-        },
+        { name: "fullName", type: "text", placeholder: "Full Name", required: true },
+        { name: "email", type: "email", placeholder: "Email Address", required: true },
       ]}
-      textarea={{
-        name: "message",        placeholder: "How can we help you?",        rows: 4,
-        required: true,
-      }}
+      textarea={{ name: "message", placeholder: "How can we help you?", rows: 4, required: true }}
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-doing-his-job_23-2148968959.jpg"
     />
   </div>
@@ -215,28 +155,9 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="SJHN"
       columns={[
-        {
-          title: "School",          items: [
-            {
-              label: "About Us",              href: "#about"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
-        {
-          title: "Resources",          items: [
-            {
-              label: "Admission Forms",              href: "#"},
-            {
-              label: "Student Portal",              href: "#"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacy Policy",              href: "#"},
-          ],
-        },
+        { title: "School", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
+        { title: "Resources", items: [{ label: "Admission Forms", href: "#" }, { label: "Student Portal", href: "#" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] },
       ]}
       copyrightText="© 2024 St. Joseph's High School Namagunga."
     />
@@ -244,4 +165,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/programs/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function ProgramsPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Academics", id: "/academics" },
+            { name: "Programs", id: "/programs" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
+          ]}
+        />
+      </div>
+      <div className="pt-32">
+        <div id="features" data-section="features">
+          <FeatureCardTwelve
+            title="Extracurricular Activities & Clubs"
+            description="Beyond the classroom, we foster personal growth through various clubs and activities."
+            textboxLayout="split"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            features={[
+              { id: "c1", label: "Sports", title: "Athletics", items: ["Netball", "Football", "Swimming", "Basketball"] },
+              { id: "c2", label: "Clubs", title: "Leadership & Arts", items: ["Debating Club", "Drama Society", "Science Club", "Young Farmers"] },
+            ]}
+          />
+        </div>
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          logoText="SJHN"
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/staff/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import TeamCardOne from '@/components/sections/team/TeamCardOne';
+
+export default function StaffPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Gallery", id: "/gallery"}, {name: "Staff", id: "#staff"}]} />
+        </div>
+        <div id="staff" data-section="staff" className="py-20">
+          <TeamCardOne 
+            title="Faculty & Staff Directory"
+            description="Meet the dedicated team of educators and professionals guiding our students."
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            members={[
+              { id: "m1", name: "Jane Doe", role: "Principal", imageSrc: "http://img.b2bpic.net/free-photo/portrait-adult-woman-posing-with-book_23-2148464478.jpg" },
+              { id: "m2", name: "John Smith", role: "Head of Sciences", imageSrc: "http://img.b2bpic.net/free-photo/successful-guy-with-glasses_1098-1116.jpg?_wi=2" },
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal logoText="SJHN" columns={[]} />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}