bender/ec0d9b64-bfc0-4f4f-8469-2b1c4a855f3c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-08 18:02:46 +00:00
commit c036ae18cc
631 changed files with 86240 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,252 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import SplitAbout from "@/components/sections/about/SplitAbout";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterCard from "@/components/sections/footer/FooterCard";
import {
Award,
BookMarked,
Zap,
Building2,
Users,
HelpCircle,
Facebook,
Twitter,
Instagram,
Mail,
} from "lucide-react";
export default function AboutPage() {
const navItems = [
{ name: "About", id: "about" },
{ name: "Teachers", id: "team" },
{ name: "News", id: "blog" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="smallMedium"
sizing="medium"
background="noiseDiagonalGradient"
cardStyle="outline"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Academy"
navItems={navItems}
button={{
text: "Enroll Now",
href: "#contact",
}}
animateOnLoad={true}
/>
</div>
{/* About Section - Extended */}
<div id="about" data-section="about">
<SplitAbout
title="Our Mission & Vision"
description="Academy is dedicated to fostering intellectual growth, character development, and leadership skills. Our mission is to empower students with knowledge, critical thinking abilities, and ethical values that prepare them for success in higher education and meaningful careers. We believe in creating an inclusive learning environment where every student can thrive."
tag="Our Foundation"
tagIcon={Award}
tagAnimation="slide-up"
bulletPoints={[
{
title: "Academic Excellence",
description:
"Comprehensive curriculum covering sciences, humanities, arts, and technology with qualified educators",
icon: BookMarked,
},
{
title: "Holistic Development",
description:
"Focus on intellectual, physical, emotional, and social growth through integrated learning experiences",
icon: Zap,
},
{
title: "World-Class Infrastructure",
description:
"State-of-the-art laboratories, library, sports complex, auditorium, and technology centers",
icon: Building2,
},
{
title: "Student-Centric Approach",
description:
"Personalized attention, mentorship, counseling services, and support for individual learning needs",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/concentrated-woman-sitting-with-book_23-2147864185.jpg"
imageAlt="School learning environment"
mediaAnimation="opacity"
imagePosition="right"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Academy mission section"
/>
</div>
{/* Team Section - Extended */}
<div id="team" data-section="team">
<TeamCardOne
title="Dedicated Faculty Members"
description="Our teaching team comprises experienced educators holding advanced degrees and certifications. Each member brings passion, expertise, and commitment to nurturing the next generation of leaders and innovators."
tag="Teaching Excellence"
tagIcon={Users}
tagAnimation="slide-up"
members={[
{
id: "1",
name: "Dr. Sarah Johnson",
role: "Mathematics & STEM Coordinator",
imageSrc:
"http://img.b2bpic.net/free-photo/medium-shot-pregnant-woman-with-tablet_23-2149304141.jpg",
imageAlt: "Dr. Sarah Johnson",
},
{
id: "2",
name: "Mr. Arun Patel",
role: "Science & Environmental Studies",
imageSrc:
"http://img.b2bpic.net/free-photo/front-view-male-chemist-white-medical-suit-sitting-with-solutions-white-desk-virus-science-covid-pandemic-lab_140725-77772.jpg",
imageAlt: "Mr. Arun Patel",
},
{
id: "3",
name: "Ms. Emily Chen",
role: "Literature & English Composition",
imageSrc:
"http://img.b2bpic.net/free-photo/smiley-woman-couch-reading_23-2148542781.jpg",
imageAlt: "Ms. Emily Chen",
},
{
id: "4",
name: "Mr. Marcus Williams",
role: "History & Social Studies",
imageSrc:
"http://img.b2bpic.net/free-photo/businessman-heading-work-with-bag_176420-18772.jpg",
imageAlt: "Mr. Marcus Williams",
},
{
id: "5",
name: "Ms. Priya Sharma",
role: "Arts & Creative Expression",
imageSrc:
"http://img.b2bpic.net/free-photo/medium-shot-woman-posing-cv_23-2149927574.jpg",
imageAlt: "Ms. Priya Sharma",
},
{
id: "6",
name: "Coach James Rodriguez",
role: "Physical Education & Sports",
imageSrc:
"http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
imageAlt: "Coach James Rodriguez",
},
]}
carouselMode="buttons"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Faculty section"
/>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<FaqDouble
title="About Academy - Common Questions"
description="Learn more about our school's history, values, accreditation, and educational philosophy"
tag="More Information"
tagIcon={HelpCircle}
tagAnimation="blur-reveal"
faqs={[
{
id: "1",
title: "When was Academy founded?",
content:
"Academy was established in 1998 with the vision of providing quality education rooted in traditional values combined with modern teaching methodologies. Over the past two decades, we have evolved into a leading educational institution.",
},
{
id: "2",
title: "What is Academy's educational philosophy?",
content:
"Our philosophy centers on student-centric learning, where each individual is recognized for their unique strengths and supported in their areas of development. We emphasize critical thinking, creativity, collaboration, and character development.",
},
{
id: "3",
title: "Is Academy accredited?",
content:
"Yes, Academy is fully accredited by national and international educational bodies. Our curriculum meets international standards while honoring local educational frameworks and cultural values.",
},
{
id: "4",
title: "What makes Academy unique?",
content:
"Our uniqueness lies in our balance of academic rigor, holistic development programs, modern facilities, experienced faculty, and commitment to individual student growth. We create an environment where students can explore their potential.",
},
{
id: "5",
title: "Does Academy promote diversity and inclusion?",
content:
"Absolutely. Academy celebrates diversity and maintains an inclusive environment where students from various backgrounds, cultures, and abilities learn together, fostering mutual respect and global awareness.",
},
{
id: "6",
title: "What are Academy's community partnerships?",
content:
"Academy partners with universities, research institutions, cultural organizations, and social service agencies to enhance student learning opportunities, facilitate internships, and support community development initiatives.",
},
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="smooth"
ariaLabel="About FAQ section"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterCard
logoText="Academy"
copyrightText="© 2025 Academy. All rights reserved. | Education for Excellence"
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/academy",
ariaLabel: "Academy Facebook",
},
{
icon: Twitter,
href: "https://twitter.com/academy",
ariaLabel: "Academy Twitter",
},
{
icon: Instagram,
href: "https://instagram.com/academy",
ariaLabel: "Academy Instagram",
},
{
icon: Mail,
href: "mailto:info@academy.edu",
ariaLabel: "Email Academy",
},
]}
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

98
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,98 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Phone, Mail, Facebook, Twitter, Instagram } from 'lucide-react';
export default function ContactPage() {
const handleNewsletterSignup = (email: string) => {
console.log("Newsletter signup:", email);
};
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="smallMedium"
sizing="medium"
background="noiseDiagonalGradient"
cardStyle="outline"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Academy"
navItems={[
{ name: "About", id: "about" },
{ name: "Teachers", id: "team" },
{ name: "News", id: "blog" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Enroll Now",
href: "#contact",
}}
animateOnLoad={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Get In Touch"
title="Contact Our School"
description="Have questions about admissions or programs? Reach out to us through any of our contact channels. We're here to help!"
tagIcon={Phone}
tagAnimation="slide-up"
background={{
variant: "sparkles-gradient",
}}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/talk-journalists_1098-13678.jpg"
imageAlt="school contact information desk reception"
mediaAnimation="opacity"
mediaPosition="right"
inputPlaceholder="Enter your email address"
buttonText="Subscribe"
termsText="By subscribing, you agree to receive school updates and news. We respect your privacy."
onSubmit={handleNewsletterSignup}
ariaLabel="Contact section"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Academy"
copyrightText="© 2025 Academy. All rights reserved. | Education for Excellence"
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/academy",
ariaLabel: "Academy Facebook",
},
{
icon: Twitter,
href: "https://twitter.com/academy",
ariaLabel: "Academy Twitter",
},
{
icon: Instagram,
href: "https://instagram.com/academy",
ariaLabel: "Academy Instagram",
},
{
icon: Mail,
href: "mailto:info@academy.edu",
ariaLabel: "Email Academy",
},
]}
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

5
src/app/globals.css Normal file
View File

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

1442
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

230
src/app/news/page.tsx Normal file
View File

@@ -0,0 +1,230 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterCard from "@/components/sections/footer/FooterCard";
import {
Newspaper,
Award,
BookMarked,
Zap,
Building2,
Phone,
Facebook,
Twitter,
Instagram,
Mail,
} from "lucide-react";
export default function NewsPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="smallMedium"
sizing="medium"
background="noiseDiagonalGradient"
cardStyle="outline"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Academy"
navItems={[
{ name: "About", id: "about" },
{ name: "Teachers", id: "teachers" },
{ name: "News", id: "news" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Enroll Now",
href: "#contact",
}}
animateOnLoad={true}
/>
</div>
<div id="blog" data-section="blog">
<BlogCardThree
title="School News & Updates"
description="Stay informed about recent events, achievements, and important announcements from our school community"
tag="Latest News"
tagIcon={Newspaper}
tagAnimation="slide-up"
blogs={[
{
id: "1",
category: "Academic Achievement",
title: "Science Olympiad Winners Announced",
excerpt: "Our students showcase excellence, securing top positions in the regional science olympiad competition with innovative projects.",
imageSrc: "http://img.b2bpic.net/free-photo/science-education-girls_23-2148581296.jpg",
imageAlt: "Science Olympiad winning team",
authorName: "Dr. Sarah Johnson",
authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-pregnant-woman-with-tablet_23-2149304141.jpg",
date: "January 15, 2025",
},
{
id: "2",
category: "Sports",
title: "Basketball Team Wins State Championship",
excerpt: "In an exciting final match, our basketball team defeats rivals to clinch the state championship title, bringing glory to the academy.",
imageSrc: "http://img.b2bpic.net/free-vector/basketball-awards-vertical-banners_1284-22053.jpg",
imageAlt: "Basketball championship celebration",
authorName: "Coach James Rodriguez",
authorAvatar: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
date: "January 12, 2025",
},
{
id: "3",
category: "Cultural Events",
title: "Annual Cultural Fest Celebrates Diversity",
excerpt: "Students showcase talent through music, dance, and theater performances representing cultures from around the world.",
imageSrc: "http://img.b2bpic.net/free-vector/carnival-party-celebration-landing-page-template_23-2150026540.jpg",
imageAlt: "Cultural fest performance stage",
authorName: "Ms. Priya Sharma",
authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-cv_23-2149927574.jpg",
date: "January 8, 2025",
},
{
id: "4",
category: "Community Service",
title: "Environmental Cleanup Drive Success",
excerpt: "Over 200 students participated in our community environmental initiative, clearing local parks and planting trees.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-plant-parents-holding-their-potted-plants_53876-148080.jpg",
imageAlt: "Students in environmental cleanup",
authorName: "Mr. Arun Patel",
authorAvatar: "http://img.b2bpic.net/free-photo/front-view-male-chemist-white-medical-suit-sitting-with-solutions-white-desk-virus-science-covid-pandemic-lab_140725-77772.jpg",
date: "January 5, 2025",
},
]}
carouselMode="buttons"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
ariaLabel="Blog section"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="School Highlights & Achievements"
description="Our school community continues to excel in academics, sports, and cultural activities. We celebrate the achievements of our students and faculty who demonstrate excellence through dedication and hard work."
tag="Celebrating Success"
tagIcon={Award}
tagAnimation="slide-up"
bulletPoints={[
{
title: "Academic Excellence",
description: "Students consistently achieve high grades and secure positions in competitive examinations and academic competitions",
icon: BookMarked,
},
{
title: "Sports & Athletics",
description: "Multiple championship titles in basketball, cricket, tennis, and athletic events at regional and state levels",
icon: Zap,
},
{
title: "Cultural Events",
description: "Regular celebration of diversity through cultural festivals, performances, music, and theater showcasing student talents",
icon: Building2,
},
{
title: "Community Initiatives",
description: "Active participation in environmental and social service programs making positive impact in the local community",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/concentrated-woman-sitting-with-book_23-2147864185.jpg"
imageAlt="School achievements and highlights"
mediaAnimation="opacity"
imagePosition="right"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="School highlights section"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="News & Updates FAQs"
description="Find answers about school events, announcements, and how to stay updated"
tag="Help & Support"
tagIcon={Phone}
tagAnimation="blur-reveal"
faqs={[
{
id: "1",
title: "How often are news updates published?",
content: "We regularly update our news section with important announcements, event coverage, and student achievements. Major updates are shared weekly, with special announcements for significant events.",
},
{
id: "2",
title: "How can I receive school announcements?",
content: "You can subscribe to our newsletter through email signup, follow our social media pages, or check the news section regularly. Important notices are also sent via SMS to registered parents.",
},
{
id: "3",
title: "Are past event photos and details archived?",
content: "Yes, we maintain an archive of past events, photos, and news articles. You can browse through previous updates and event coverage in our news database.",
},
{
id: "4",
title: "How are sports results and achievements announced?",
content: "Sports achievements and tournament results are announced promptly on our news section and social media. Detailed coverage of major matches and competitions is provided regularly.",
},
{
id: "5",
title: "Can students submit event news?",
content: "Yes, student reporters and clubs can submit event summaries and photos. Please contact our communications department for guidelines on news submission.",
},
{
id: "6",
title: "How do I stay informed about important dates?",
content: "All academic calendars, admission dates, event schedules, and important announcements are posted on the news section and sent via email to registered guardians.",
},
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="smooth"
ariaLabel="FAQ section"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Academy"
copyrightText="© 2025 Academy. All rights reserved. | Education for Excellence"
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/academy",
ariaLabel: "Academy Facebook",
},
{
icon: Twitter,
href: "https://twitter.com/academy",
ariaLabel: "Academy Twitter",
},
{
icon: Instagram,
href: "https://instagram.com/academy",
ariaLabel: "Academy Instagram",
},
{
icon: Mail,
href: "mailto:info@academy.edu",
ariaLabel: "Email Academy",
},
]}
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

357
src/app/page.tsx Normal file
View File

@@ -0,0 +1,357 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import SplitAbout from "@/components/sections/about/SplitAbout";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import {
BookOpen,
Award,
BookMarked,
Zap,
Building2,
Users,
Newspaper,
Phone,
Facebook,
Twitter,
Instagram,
Mail,
} from "lucide-react";
export default function HomePage() {
const handleNewsletterSignup = (email: string) => {
console.log("Newsletter signup:", email);
};
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="smallMedium"
sizing="medium"
background="noiseDiagonalGradient"
cardStyle="outline"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Academy"
navItems={[
{ name: "About", id: "about" },
{ name: "Teachers", id: "teachers" },
{ name: "News", id: "news" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Enroll Now",
href: "#contact",
}}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Welcome to Our Academy"
description="Nurturing minds, building futures. Experience excellence in education with our dedicated faculty, modern facilities, and comprehensive learning programs."
tag="Quality Education"
tagIcon={BookOpen}
tagAnimation="slide-up"
buttons={[
{
text: "Learn More",
href: "#about",
},
{
text: "Admissions",
href: "#contact",
},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/cheerful-friends-studying-table_23-2147850717.jpg"
imageAlt="School campus and students"
textPosition="bottom-left"
showBlur={true}
showDimOverlay={true}
ariaLabel="School hero section"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="About Our School"
description="Founded with a mission to provide exceptional education, our school combines traditional values with modern teaching methodologies. We focus on developing well-rounded students prepared for future challenges."
tag="Our Story"
tagIcon={Award}
tagAnimation="slide-up"
buttons={[
{
text: "View Facilities",
href: "#features",
},
]}
buttonAnimation="blur-reveal"
bulletPoints={[
{
title: "Academic Excellence",
description: "Comprehensive curriculum covering sciences, humanities, arts, and technology with qualified educators",
icon: BookMarked,
},
{
title: "Extracurricular Activities",
description: "Sports, music, drama, debate, robotics, and community service programs for holistic development",
icon: Zap,
},
{
title: "Modern Facilities",
description: "State-of-the-art laboratories, library, sports complex, auditorium, and technology centers",
icon: Building2,
},
{
title: "Student Support",
description: "Counseling services, mentorship programs, and personalized learning assistance available",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/concentrated-woman-sitting-with-book_23-2147864185.jpg"
imageAlt="School campus and learning spaces"
mediaAnimation="opacity"
imagePosition="right"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="About school section"
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
title="Meet Our Faculty"
description="Experienced educators passionate about student success and dedicated to fostering curiosity and critical thinking"
tag="Our Teachers"
tagIcon={Users}
tagAnimation="slide-up"
members={[
{
id: "1",
name: "Dr. Sarah Johnson",
role: "Mathematics & STEM Coordinator",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-pregnant-woman-with-tablet_23-2149304141.jpg",
imageAlt: "Dr. Sarah Johnson",
},
{
id: "2",
name: "Mr. Arun Patel",
role: "Science & Environmental Studies",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-chemist-white-medical-suit-sitting-with-solutions-white-desk-virus-science-covid-pandemic-lab_140725-77772.jpg",
imageAlt: "Mr. Arun Patel",
},
{
id: "3",
name: "Ms. Emily Chen",
role: "Literature & English Composition",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-couch-reading_23-2148542781.jpg",
imageAlt: "Ms. Emily Chen",
},
{
id: "4",
name: "Mr. Marcus Williams",
role: "History & Social Studies",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-heading-work-with-bag_176420-18772.jpg",
imageAlt: "Mr. Marcus Williams",
},
{
id: "5",
name: "Ms. Priya Sharma",
role: "Arts & Creative Expression",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-cv_23-2149927574.jpg",
imageAlt: "Ms. Priya Sharma",
},
{
id: "6",
name: "Coach James Rodriguez",
role: "Physical Education & Sports",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
imageAlt: "Coach James Rodriguez",
},
]}
carouselMode="buttons"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Team section"
/>
</div>
<div id="blog" data-section="blog">
<BlogCardThree
title="School News & Updates"
description="Stay informed about recent events, achievements, and important announcements from our school community"
tag="Latest News"
tagIcon={Newspaper}
tagAnimation="slide-up"
blogs={[
{
id: "1",
category: "Academic Achievement",
title: "Science Olympiad Winners Announced",
excerpt: "Our students showcase excellence, securing top positions in the regional science olympiad competition with innovative projects.",
imageSrc: "http://img.b2bpic.net/free-photo/science-education-girls_23-2148581296.jpg",
imageAlt: "Science Olympiad winning team",
authorName: "Dr. Sarah Johnson",
authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-pregnant-woman-with-tablet_23-2149304141.jpg",
date: "January 15, 2025",
},
{
id: "2",
category: "Sports",
title: "Basketball Team Wins State Championship",
excerpt: "In an exciting final match, our basketball team defeats rivals to clinch the state championship title, bringing glory to the academy.",
imageSrc: "http://img.b2bpic.net/free-vector/basketball-awards-vertical-banners_1284-22053.jpg",
imageAlt: "Basketball championship celebration",
authorName: "Coach James Rodriguez",
authorAvatar: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
date: "January 12, 2025",
},
{
id: "3",
category: "Cultural Events",
title: "Annual Cultural Fest Celebrates Diversity",
excerpt: "Students showcase talent through music, dance, and theater performances representing cultures from around the world.",
imageSrc: "http://img.b2bpic.net/free-vector/carnival-party-celebration-landing-page-template_23-2150026540.jpg",
imageAlt: "Cultural fest performance stage",
authorName: "Ms. Priya Sharma",
authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-cv_23-2149927574.jpg",
date: "January 8, 2025",
},
{
id: "4",
category: "Community Service",
title: "Environmental Cleanup Drive Success",
excerpt: "Over 200 students participated in our community environmental initiative, clearing local parks and planting trees.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-plant-parents-holding-their-potted-plants_53876-148080.jpg",
imageAlt: "Students in environmental cleanup",
authorName: "Mr. Arun Patel",
authorAvatar: "http://img.b2bpic.net/free-photo/front-view-male-chemist-white-medical-suit-sitting-with-solutions-white-desk-virus-science-covid-pandemic-lab_140725-77772.jpg",
date: "January 5, 2025",
},
]}
carouselMode="buttons"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
ariaLabel="Blog section"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Find answers to common questions about admissions, academics, facilities, and school policies"
tag="Help & Support"
tagIcon={Phone}
tagAnimation="blur-reveal"
faqs={[
{
id: "1",
title: "What is the admissions process?",
content: "Our admissions process includes submission of application forms, entrance examination, interview with faculty, and verification of academic records. Application deadline is typically in March for the upcoming academic year.",
},
{
id: "2",
title: "What subjects are offered?",
content: "We offer a comprehensive curriculum including Mathematics, Sciences (Physics, Chemistry, Biology), English Literature, History, Geography, Computer Science, Arts, and Physical Education. Additional electives in languages and specialized subjects are available.",
},
{
id: "3",
title: "What extracurricular activities are available?",
content: "Students can participate in sports (basketball, cricket, tennis), music and orchestra, drama club, debate society, robotics club, environmental club, and community service initiatives.",
},
{
id: "4",
title: "What are the school hours?",
content: "Regular classes run from 8:00 AM to 3:30 PM, Monday through Friday. Extended hours are available for sports and activity programs until 5:00 PM.",
},
{
id: "5",
title: "Does the school provide transportation?",
content: "Yes, we provide school bus services covering major routes in the city. Bus pass fees are included in the term fees. Routes and schedules are available on our website.",
},
{
id: "6",
title: "What support services are available?",
content: "We offer academic counseling, career guidance, psychological support, tutoring services for struggling students, and special education support as needed.",
},
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="smooth"
ariaLabel="FAQ section"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Get In Touch"
title="Contact Our School"
description="Have questions about admissions or programs? Reach out to us through any of our contact channels. We're here to help!"
tagIcon={Phone}
tagAnimation="slide-up"
background={{
variant: "sparkles-gradient",
}}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/talk-journalists_1098-13678.jpg"
imageAlt="School contact information"
mediaAnimation="opacity"
mediaPosition="right"
inputPlaceholder="Enter your email address"
buttonText="Subscribe"
termsText="By subscribing, you agree to receive school updates and news. We respect your privacy."
onSubmit={handleNewsletterSignup}
ariaLabel="Contact section"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Academy"
copyrightText="© 2025 Academy. All rights reserved. | Education for Excellence"
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/academy",
ariaLabel: "Academy Facebook",
},
{
icon: Twitter,
href: "https://twitter.com/academy",
ariaLabel: "Academy Twitter",
},
{
icon: Instagram,
href: "https://instagram.com/academy",
ariaLabel: "Academy Instagram",
},
{
icon: Mail,
href: "mailto:info@academy.edu",
ariaLabel: "Email Academy",
},
]}
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-open-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-inter), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--secondary-cta: #ecebea;
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f5f5f5;
--card: #ffffff;
--foreground: #1c1c1c;
--primary-cta: #341f51;
--primary-cta-text: #f5f5f5;
--secondary-cta: #ffffff;
--secondary-cta-text: #1c1c1c;
--accent: #6139e6;
--background-accent: #b3a8e8;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}

229
src/app/teachers/page.tsx Normal file
View File

@@ -0,0 +1,229 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterCard from "@/components/sections/footer/FooterCard";
import {
Users,
Award,
BookMarked,
Zap,
Building2,
Phone,
Facebook,
Twitter,
Instagram,
Mail,
} from "lucide-react";
export default function TeachersPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="smallMedium"
sizing="medium"
background="noiseDiagonalGradient"
cardStyle="outline"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Academy"
navItems={[
{ name: "About", id: "about" },
{ name: "Teachers", id: "teachers" },
{ name: "News", id: "news" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Enroll Now",
href: "#contact",
}}
animateOnLoad={true}
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
title="Meet Our Faculty"
description="Experienced educators passionate about student success and dedicated to fostering curiosity and critical thinking"
tag="Our Teachers"
tagIcon={Users}
tagAnimation="slide-up"
members={[
{
id: "1",
name: "Dr. Sarah Johnson",
role: "Mathematics & STEM Coordinator",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-pregnant-woman-with-tablet_23-2149304141.jpg",
imageAlt: "Dr. Sarah Johnson",
},
{
id: "2",
name: "Mr. Arun Patel",
role: "Science & Environmental Studies",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-chemist-white-medical-suit-sitting-with-solutions-white-desk-virus-science-covid-pandemic-lab_140725-77772.jpg",
imageAlt: "Mr. Arun Patel",
},
{
id: "3",
name: "Ms. Emily Chen",
role: "Literature & English Composition",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-couch-reading_23-2148542781.jpg",
imageAlt: "Ms. Emily Chen",
},
{
id: "4",
name: "Mr. Marcus Williams",
role: "History & Social Studies",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-heading-work-with-bag_176420-18772.jpg",
imageAlt: "Mr. Marcus Williams",
},
{
id: "5",
name: "Ms. Priya Sharma",
role: "Arts & Creative Expression",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-cv_23-2149927574.jpg",
imageAlt: "Ms. Priya Sharma",
},
{
id: "6",
name: "Coach James Rodriguez",
role: "Physical Education & Sports",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
imageAlt: "Coach James Rodriguez",
},
]}
carouselMode="buttons"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Team section"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="Teaching Excellence"
description="Our educators are committed to providing comprehensive instruction across all subjects, with expertise in modern teaching methodologies and personalized student support. Each teacher brings unique experience and passion for education."
tag="Faculty Expertise"
tagIcon={Award}
tagAnimation="slide-up"
bulletPoints={[
{
title: "Qualified Instructors",
description: "All faculty members hold advanced degrees and certifications in their respective fields with years of teaching experience",
icon: BookMarked,
},
{
title: "Subject Specialization",
description: "Dedicated expertise in STEM, humanities, languages, arts, and physical education with continuous professional development",
icon: Zap,
},
{
title: "Student-Centered Approach",
description: "Focus on individualized learning, critical thinking development, and mentorship tailored to each student's needs",
icon: Building2,
},
{
title: "Mentorship Programs",
description: "Beyond classroom teaching, our faculty guide students through academic and personal growth initiatives",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/concentrated-woman-sitting-with-book_23-2147864185.jpg"
imageAlt="Faculty in educational setting"
mediaAnimation="opacity"
imagePosition="right"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Teaching excellence section"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Faculty & Teaching FAQs"
description="Learn more about our teachers, teaching methods, and educational programs"
tag="Help & Support"
tagIcon={Phone}
tagAnimation="blur-reveal"
faqs={[
{
id: "1",
title: "What are the qualifications of our teachers?",
content: "All our teachers hold at least a bachelor's degree in their subject area, with many holding master's degrees and specialized certifications. They undergo continuous professional development and training.",
},
{
id: "2",
title: "What teaching methodologies are used?",
content: "We employ a mix of traditional and modern teaching approaches including project-based learning, collaborative learning, experiential education, and personalized instruction tailored to individual learning styles.",
},
{
id: "3",
title: "How are extracurricular subjects taught?",
content: "Arts, music, sports, and other activities are led by specialized instructors and coaches with professional certifications and practical experience in their fields.",
},
{
id: "4",
title: "Do teachers provide individual support?",
content: "Yes, teachers hold office hours and provide tutoring for students who need additional help. We also have peer mentoring programs and structured study groups.",
},
{
id: "5",
title: "How do teachers communicate with parents?",
content: "Regular parent-teacher conferences are scheduled, and teachers are available via email and phone. Progress reports and performance updates are shared periodically.",
},
{
id: "6",
title: "What professional development do teachers undertake?",
content: "Teachers participate in workshops, seminars, conferences, and online courses to stay updated with latest educational research and teaching innovations.",
},
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="smooth"
ariaLabel="FAQ section"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Academy"
copyrightText="© 2025 Academy. All rights reserved. | Education for Excellence"
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/academy",
ariaLabel: "Academy Facebook",
},
{
icon: Twitter,
href: "https://twitter.com/academy",
ariaLabel: "Academy Twitter",
},
{
icon: Instagram,
href: "https://instagram.com/academy",
ariaLabel: "Academy Instagram",
},
{
icon: Mail,
href: "mailto:info@academy.edu",
ariaLabel: "Email Academy",
},
]}
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}