import React from 'react';
import { Link } from 'react-router-dom';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function AboutUs() {
  return (
    <div className="min-h-screen pt-16">
      <Navbar />

<header className="relative w-full h-[85vh] flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 bg-cover bg-center" style={{"backgroundImage":"url('https://lh3.googleusercontent.com/aida-public/AB6AXuBAWTy7jm3MRuHI5YHAH24anHgOI7U55lHiIXe5a7rmZDj3fOK9hN9glEiQpkIYegflhDxK7qzsY92_DGRC5nektT4hCwFnDmoHLQgkKLIbkVpgYsQLSKweXDx42L_l5Ffu3qDgC0bUna4Sn7KurP3vRjS6OvMLDMuzZpzQJRreycrr6AQLAxCeV7ecWsxDDPR03z7j6bMLQlFfLwe1-0w9Z1vJnkd-PwkugLxvJIrAmucx5Dr_GpmoeA')"}}>
<div className="absolute inset-0 bg-gradient-to-b from-primary/20 via-transparent to-background"></div>
</div>
<div className="relative z-10 text-center px-margin-mobile md:px-margin-desktop max-w-4xl">
<h1 className="font-headline-xl text-headline-xl text-primary drop-shadow-lg mb-4">About Our School</h1>
<p className="font-body-lg text-body-lg text-on-surface-variant bg-white/40 backdrop-blur-sm p-6 rounded-xl inline-block shadow-sm">
                Where every day is a new chapter in the adventure of learning.
            </p>
</div>
</header>

<section className="relative px-margin-mobile md:px-margin-desktop py-section-gap">
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
<div className="space-y-6">
<h2 className="font-headline-lg text-headline-lg text-primary">A Legacy of Enchanted Education</h2>
<p className="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
                    St. Andrews Academy began with a single vision: to transform education from a routine into a wondrous journey. Founded on the belief that curiosity is the compass of human progress, we have cultivated a landscape where young minds are encouraged to dream beyond the clouds.
                </p>
<p className="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
                    Over the decades, our school has grown from a small community cottage into a sprawling sanctuary of discovery. Today, we blend traditional academic rigor with modern technological marvels, ensuring our students are prepared for the future while remaining grounded in kindness and creativity.
                </p>
<div className="pt-4">
<button className="flex items-center gap-2 text-primary font-bold hover:gap-4 transition-all">
                        Discover our history <span className="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</div>
<div className="relative">
<div className="absolute -top-8 -left-8 w-full h-full bg-secondary-container rounded-xl -rotate-3 z-0"></div>
<div className="relative z-10 p-4 bg-white rounded-xl shadow-xl rotate-3 transform transition-transform hover:rotate-0 duration-500">
<img className="w-full h-[450px] object-cover rounded-lg" data-alt="A whimsical, painterly illustration of diverse children and smiling teachers gathered under a large oak tree with floating books and glowing butterflies, capturing a moment of storytelling and shared wonder in a bright light-mode setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCZb2_eN8UP7lPR38Qo-3dkk5RIQN55ogbVsCR0BSuL6VHgf60sMe5IjP_8pt18nguPGPYip_SpDKw9z8uaj-ozmoY14f-uyGM21dPHK73PNLZfmZ83BrpaKh9sv76123-OPC60HbQDhWLescOMd_nOZOcR0X2ZsXayTDQvEVeo6smORz2pbt6Nt656yJYYtztWEtSibeIIkcbkJxfoz_lk8f4bRMliCRVEqpeHVNMjFo-TjeTLhCP-8A"/>
</div>
</div>
</div>
</section>

<section className="px-margin-mobile md:px-margin-desktop py-section-gap bg-surface-container-low relative">
<div className="absolute top-0 left-0 w-full h-24 bg-background [clipPath:polygon(0_0,_100%_0,_100%_100%,_0_60%)]"></div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 pt-12">
<div className="bg-gradient-to-br from-primary-container to-white p-12 rounded-xl shadow-primary/10 shadow-lg border border-white/50">
<div className="w-16 h-16 bg-primary text-on-primary rounded-full flex items-center justify-center mb-6">
<span className="material-symbols-outlined text-4xl">auto_awesome</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-primary-container mb-4">Our Vision</h3>
<p className="font-body-lg text-body-lg text-on-surface-variant">To be the lighthouse of innovative primary education, illuminating the path for global citizens who lead with heart, think with logic, and live with imagination.</p>
</div>
<div className="bg-gradient-to-br from-secondary-container to-white p-12 rounded-xl shadow-secondary/10 shadow-lg border border-white/50">
<div className="w-16 h-16 bg-secondary text-on-secondary rounded-full flex items-center justify-center mb-6">
<span className="material-symbols-outlined text-4xl">rocket_launch</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-secondary-container mb-4">Our Mission</h3>
<p className="font-body-lg text-body-lg text-on-surface-variant">To provide a nurturing, high-tech, and whimsical environment where academic excellence and emotional intelligence flourish together through project-based play and discovery.</p>
</div>
</div>
</section>

<section className="px-margin-mobile md:px-margin-desktop py-section-gap">
<div className="text-center mb-16">
<h2 className="font-headline-lg text-headline-lg text-primary mb-2">The Stars We Follow</h2>
<p className="font-body-md text-body-md text-on-surface-variant">Core values that guide every lesson and laughter.</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">

<div className="floating-card flex flex-col items-center text-center p-8 bg-white rounded-xl shadow-md border border-surface-variant hover:shadow-xl transition-all duration-300">
<div className="text-primary mb-4">
<span className="material-symbols-outlined text-5xl">verified</span>
</div>
<h4 className="font-label-md text-label-md uppercase tracking-widest text-on-surface">Excellence</h4>
</div>

<div className="floating-card flex flex-col items-center text-center p-8 bg-white rounded-xl shadow-md border border-surface-variant hover:shadow-xl transition-all duration-300" style={{"animationDelay":"0.5s"}}>
<div className="text-tertiary mb-4">
<span className="material-symbols-outlined text-5xl">palette</span>
</div>
<h4 className="font-label-md text-label-md uppercase tracking-widest text-on-surface">Creativity</h4>
</div>

<div className="floating-card flex flex-col items-center text-center p-8 bg-white rounded-xl shadow-md border border-surface-variant hover:shadow-xl transition-all duration-300" style={{"animationDelay":"1s"}}>
<div className="text-secondary mb-4">
<span className="material-symbols-outlined text-5xl">handshake</span>
</div>
<h4 className="font-label-md text-label-md uppercase tracking-widest text-on-surface">Respect</h4>
</div>

<div className="floating-card flex flex-col items-center text-center p-8 bg-white rounded-xl shadow-md border border-surface-variant hover:shadow-xl transition-all duration-300" style={{"animationDelay":"1.5s"}}>
<div className="text-primary-container text-primary mb-4">
<span className="material-symbols-outlined text-5xl">balance</span>
</div>
<h4 className="font-label-md text-label-md uppercase tracking-widest text-on-surface">Integrity</h4>
</div>

<div className="floating-card flex flex-col items-center text-center p-8 bg-white rounded-xl shadow-md border border-surface-variant hover:shadow-xl transition-all duration-300" style={{"animationDelay":"2s"}}>
<div className="text-tertiary-container text-tertiary mb-4">
<span className="material-symbols-outlined text-5xl">lightbulb</span>
</div>
<h4 className="font-label-md text-label-md uppercase tracking-widest text-on-surface">Innovation</h4>
</div>

<div className="floating-card flex flex-col items-center text-center p-8 bg-white rounded-xl shadow-md border border-surface-variant hover:shadow-xl transition-all duration-300" style={{"animationDelay":"2.5s"}}>
<div className="text-on-tertiary-container text-tertiary mb-4">
<span className="material-symbols-outlined text-5xl">favorite</span>
</div>
<h4 className="font-label-md text-label-md uppercase tracking-widest text-on-surface">Compassion</h4>
</div>
</div>
</section>

<section className="px-margin-mobile md:px-margin-desktop py-section-gap bg-secondary-container/10 rounded-xl mx-4 md:mx-16">
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
<div>
<h2 className="font-headline-lg text-headline-lg text-primary">Why Parents Trust Us</h2>
<p className="font-body-md text-body-md text-on-surface-variant">Creating a second home for your little explorers.</p>
</div>
<div className="hidden md:block">
<span className="material-symbols-outlined text-primary text-6xl opacity-20">compost</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="flex gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
<span className="material-symbols-outlined text-secondary text-4xl">shield</span>
<div>
<h5 className="font-headline-md text-headline-md text-on-surface mb-2">Safe Campus</h5>
<p className="font-body-md text-body-md text-on-surface-variant">Secured environment with 24/7 monitoring and care.</p>
</div>
</div>
<div className="flex gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
<span className="material-symbols-outlined text-primary text-4xl">school</span>
<div>
<h5 className="font-headline-md text-headline-md text-on-surface mb-2">Experienced Teachers</h5>
<p className="font-body-md text-body-md text-on-surface-variant">Mentors who inspire through empathy and expertise.</p>
</div>
</div>
<div className="flex gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
<span className="material-symbols-outlined text-tertiary text-4xl">smart_toy</span>
<div>
<h5 className="font-headline-md text-headline-md text-on-surface mb-2">Smart Classrooms</h5>
<p className="font-body-md text-body-md text-on-surface-variant">Interactive tech that brings learning to life.</p>
</div>
</div>
<div className="flex gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
<span className="material-symbols-outlined text-primary text-4xl">menu_book</span>
<div>
<h5 className="font-headline-md text-headline-md text-on-surface mb-2">Holistic Curriculum</h5>
<p className="font-body-md text-body-md text-on-surface-variant">Balancing arts, science, and life skills.</p>
</div>
</div>
<div className="flex gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
<span className="material-symbols-outlined text-secondary text-4xl">group</span>
<div>
<h5 className="font-headline-md text-headline-md text-on-surface mb-2">Global Community</h5>
<p className="font-body-md text-body-md text-on-surface-variant">Celebrating diversity in every classroom.</p>
</div>
</div>
<div className="flex gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
<span className="material-symbols-outlined text-tertiary text-4xl">celebration</span>
<div>
<h5 className="font-headline-md text-headline-md text-on-surface mb-2">Creative Workshops</h5>
<p className="font-body-md text-body-md text-on-surface-variant">Weekly sessions for music, art, and coding.</p>
</div>
</div>
</div>
</section>

<section className="px-margin-mobile md:px-margin-desktop py-section-gap">
<div className="text-center mb-12">
<h2 className="font-headline-lg text-headline-lg text-primary">Moments of Wonder</h2>
<p className="font-body-md text-body-md text-on-surface-variant">Explore our world-class facilities designed for discovery.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<div className="group overflow-hidden rounded-xl bg-white shadow-lg">
<div className="relative h-64 overflow-hidden">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A futuristic digital classroom for kids with giant touchscreen walls, ergonomic colorful cloud-shaped chairs, and glowing interactive desk stations in a bright sky blue and yellow themed interior." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbfJiZpce6m6-37ORReO1zEYfalnoUUogYb5ePfdnjSIvrUaf5NbENGXv3eJiDzdoRssB2a7PF9qhrIUhRjjFBLMT45xUi4IShKRFXaC250KwHCbGVvnhXNhlhSzLltNdey8MYORBfSX-9IcHK48O4PuvMiSV1Wm5my_twT-i0DedUf8TbcYdSzzt5Rd1rX9DYw-iiiz3lXvpTdBEpmq5mqzx97pg5SjWCef6zZ4y--spvzXoDNJGf6g"/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<h4 className="absolute bottom-4 left-4 text-white font-headline-md text-headline-md">Digital Classrooms</h4>
</div>
<div className="p-6">
<p className="font-body-md text-body-md text-on-surface-variant">Equipped with VR stations and tablets for immersive learning.</p>
</div>
</div>

<div className="group overflow-hidden rounded-xl bg-white shadow-lg">
<div className="relative h-64 overflow-hidden">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A whimsical science lab filled with oversized colorful glass flasks, a holographic periodic table, and child-safe robotic arms in a bright airy room with sunlight streaming through circular windows." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDtSKuXBclOMQ0_e0yvpst3N1AhXV2p2Tyltq49OFdGl-rGF7k1_oBuOGWHSNsyToDjyPATaljrUf41tE1pFIKnvl3j8REkLEtjxwvcpFeuA8y99uUCCuY0On_8qpLX0d2wCAg0NKgxTJmxhmKSxYax7JZxzCulfZEpzyRUN8Jewe_My2-1ttJKL0IM6dAB7E_xP42htzv8Q80qp36LJDMrvoGLNDlistcM1eNm8jX1TEVy-0Kihz-G_g"/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<h4 className="absolute bottom-4 left-4 text-white font-headline-md text-headline-md">Science Labs</h4>
</div>
<div className="p-6">
<p className="font-body-md text-body-md text-on-surface-variant">Where messy experiments turn into great breakthroughs.</p>
</div>
</div>

<div className="group overflow-hidden rounded-xl bg-white shadow-lg">
<div className="relative h-64 overflow-hidden">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A magical library with floating book shelves, comfortable nooks shaped like giant hollowed-out tree trunks, and warm golden lighting illuminating thousands of colorful children's books." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD9wWuMg0Y3pAbCdsXCYUqEmTVcxtA-QHFX5A-bpkqS2R3Sb7Kb6IRjqH1IC6S-xhzR_M9MNPajzH2GKq0JC0v3UJzzgzJGdSd1cCDZjkOVFqQTPuGWxSFItvfN9wyIo8_WE0o_qUXJGoTT16uKMXnHAlhjk553jzTqczkoZDAR4vU3l8OkbWb_NvS2gggUpOywaF2kiN4qEpyi0SCjRudCywG7LSrdEf9Ygd4U6BQ8g16_xZsTq3ZaKA"/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<h4 className="absolute bottom-4 left-4 text-white font-headline-md text-headline-md">The Library</h4>
</div>
<div className="p-6">
<p className="font-body-md text-body-md text-on-surface-variant">A sanctuary of stories and quiet contemplation.</p>
</div>
</div>

<div className="group overflow-hidden rounded-xl bg-white shadow-lg">
<div className="relative h-64 overflow-hidden">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="An expansive indoor sports arena with high ceilings, colorful cushioned flooring, and indoor climbing walls shaped like storybook mountains for primary school children." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBpeUIzCzjAtz_82lAmhWo-enkEzZf2Rxrya7AfpKEGWgOfMEVp0Fexya7HQO_yEb_a0Sxbo2z4nlKwMKiB3NalTjsdM7Fg_j2c22-invY09JzHO1R8TXeFFGCdlFNFMOF4cIylxORFJl9JfyHYF-pIjZkh0As00yIVzn8_l4HOz04uASINrApPrP84TDUMFvz9SSIWlulFIhgSI6DUptRH49cfviOrYMn3KUl1gt0sCUOHBvL-w9n86Q"/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<h4 className="absolute bottom-4 left-4 text-white font-headline-md text-headline-md">Sports Arena</h4>
</div>
<div className="p-6">
<p className="font-body-md text-body-md text-on-surface-variant">Fostering teamwork and physical health through play.</p>
</div>
</div>

<div className="group overflow-hidden rounded-xl bg-white shadow-lg">
<div className="relative h-64 overflow-hidden">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A dedicated art studio for children with floor-to-ceiling windows, splatters of bright paint on the walls as decoration, and easels holding colorful drawings of dragons and stars." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfq2V-50wtJ-KBJwWvDwkIT0uqhu6LPHN1lZvjeELU3PvK5pwXwQbzk1KlkitoT-21o6ryjQSnN-xOQpXVzs6gdWp1lj94Tv2lxKZYJyViOyB1r_gZ-gJ74QYLVoNYG9CQL-IYvUv3OVA27PcruE13qJbxz52YPUtCQ8NUg-dqHlHEj5Nui30Og3VaV4QFaEJsdKIZ71BJQGIGhSBP1d_dfitARqyDigEymws8BhOybSWyLoHq6yDd1A"/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<h4 className="absolute bottom-4 left-4 text-white font-headline-md text-headline-md">Art Studio</h4>
</div>
<div className="p-6">
<p className="font-body-md text-body-md text-on-surface-variant">Unleashing inner Da Vincis in a rainbow-filled space.</p>
</div>
</div>

<div className="group overflow-hidden rounded-xl bg-white shadow-lg">
<div className="relative h-64 overflow-hidden">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A high-tech cafeteria for kids with a healthy salad bar designed like a greenhouse, digital menu screens, and long community tables in a sunlit modern atrium." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnlBjFLWiNRTHFHspUI1FTGvPGU2XfnNOI_uRal13ckIpgOAWVxVZ24t0sbQvno9GBwTnoMnscWXPKhOoykXoK8b0c_07UKiyEXYg2lPEwV3HZkBZv1xtXrygGykRlc-dd6gB4Ow6z_LySRatuYEXRjsD2FEoQkczvKvrfN3kxQFQi6M6UiwDo57_zqgl3xHSW6BwRMokNhe-iGC9GR9782GG4-K5pySLhxKnuBZBSGrz58FRvP1C1dw"/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<h4 className="absolute bottom-4 left-4 text-white font-headline-md text-headline-md">Wonder Cafe</h4>
</div>
<div className="p-6">
<p className="font-body-md text-body-md text-on-surface-variant">Nutritious meals in a space that celebrates community.</p>
</div>
</div>
</div>
</section>

<section className="relative px-margin-mobile md:px-margin-desktop py-section-gap overflow-hidden">
<div className="absolute right-0 top-0 opacity-5 -mr-32 -mt-32">
<span className="material-symbols-outlined text-[400px] text-primary">format_quote</span>
</div>
<div className="glass-card max-w-5xl mx-auto rounded-xl p-12 flex flex-col md:flex-row items-center gap-12 border-2 border-primary/20">
<div className="relative">
<div className="w-64 h-64 rounded-full border-8 border-secondary-container overflow-hidden shadow-xl">
<img className="w-full h-full object-cover" data-alt="A warm, smiling woman in her 50s with professional attire and kind eyes, looking out from a circular frame against a soft-focus background of a school library, light-mode airy aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD1-N1Em7lkFMkTOoqFeOa3pjnxg-bAE90we57GC33zDIYZtHbmtIFaHRXaIG1CenNxQctTSBC3pYDw1jX4fnOYba3UWl9UrF1lDt01-wkbUKD8pjxqlU7TYCIIa17i-_Cy_NUL2HKpfNbGKBmzco6OjEZ-rUQBIqCmk4KVOezek3nWpbYAUBub7r9L7LIy4ve_bHIMnyYzQ0rYSDx3OCKp04D6FvfVdlV-UI9jMaSyj66xmpOQZFI8vg"/>
</div>
<div className="absolute -bottom-4 -right-4 bg-primary text-on-primary p-4 rounded-full shadow-lg">
<span className="material-symbols-outlined text-3xl">edit</span>
</div>
</div>
<div className="flex-1 space-y-6">
<h3 className="font-headline-lg text-headline-lg text-primary">From the Principal's Desk</h3>
<p className="font-body-lg text-body-lg italic text-on-surface-variant">
                    "At StellarAcademy, we don't just teach subjects; we ignite sparks. Our goal is to ensure that every child who walks through our doors feels seen, heard, and inspired to reach for the stars. We believe that when education is infused with wonder, learning becomes a lifelong love."
                </p>
<div>
<h4 className="font-headline-md text-headline-md text-on-surface">Dr. Elena Sterling</h4>
<p className="font-label-md text-label-md text-primary uppercase">Head of School</p>
<div className="signature-font text-3xl text-secondary mt-2 opacity-80">Elena Sterling</div>
</div>
</div>
</div>
</section>

<section className="px-margin-mobile md:px-margin-desktop py-section-gap bg-surface-container overflow-x-auto whitespace-nowrap scrollbar-hide">
<div className="inline-flex gap-12 min-w-full pb-12 items-start pt-12">

<div className="flex flex-col items-center w-64 group">
<div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4 ring-8 ring-white group-hover:scale-125 transition-transform">
<span className="material-symbols-outlined text-white" style={{"fontVariationSettings":"'FILL' 1"}}>star</span>
</div>
<div className="h-1 w-full bg-primary/20 absolute top-[100px]"></div>
<h5 className="font-headline-md text-headline-md text-primary">1995</h5>
<p className="font-body-md text-body-md text-on-surface-variant mt-2 whitespace-normal text-center">Founded with 12 students in a small garden cottage.</p>
</div>

<div className="flex flex-col items-center w-64 group">
<div className="w-12 h-12 bg-tertiary rounded-full flex items-center justify-center mb-4 ring-8 ring-white group-hover:scale-125 transition-transform">
<span className="material-symbols-outlined text-white" style={{"fontVariationSettings":"'FILL' 1"}}>add_business</span>
</div>
<h5 className="font-headline-md text-headline-md text-tertiary">2005</h5>
<p className="font-body-md text-body-md text-on-surface-variant mt-2 whitespace-normal text-center">Campus Expansion: Opened our Science and Arts wing.</p>
</div>

<div className="flex flex-col items-center w-64 group">
<div className="w-12 h-12 bg-secondary rounded-full flex items-center justify-center mb-4 ring-8 ring-white group-hover:scale-125 transition-transform">
<span className="material-symbols-outlined text-white" style={{"fontVariationSettings":"'FILL' 1"}}>emoji_events</span>
</div>
<h5 className="font-headline-md text-headline-md text-secondary">2012</h5>
<p className="font-body-md text-body-md text-on-surface-variant mt-2 whitespace-normal text-center">Awarded 'Most Innovative School' Excellence Prize.</p>
</div>

<div className="flex flex-col items-center w-64 group">
<div className="w-12 h-12 bg-primary-container text-primary rounded-full flex items-center justify-center mb-4 ring-8 ring-white group-hover:scale-125 transition-transform">
<span className="material-symbols-outlined" style={{"fontVariationSettings":"'FILL' 1"}}>hub</span>
</div>
<h5 className="font-headline-md text-headline-md text-on-primary-container">2020</h5>
<p className="font-body-md text-body-md text-on-surface-variant mt-2 whitespace-normal text-center">Launch of the Global Learning Network partnership.</p>
</div>

<div className="flex flex-col items-center w-64 group">
<div className="w-12 h-12 bg-secondary-container text-secondary rounded-full flex items-center justify-center mb-4 ring-8 ring-white group-hover:scale-125 transition-transform">
<span className="material-symbols-outlined" style={{"fontVariationSettings":"'FILL' 1"}}>rocket</span>
</div>
<h5 className="font-headline-md text-headline-md text-on-secondary-container">Future</h5>
<p className="font-body-md text-body-md text-on-surface-variant mt-2 whitespace-normal text-center">Sustainable Smart Campus initiative takes flight.</p>
</div>
</div>
</section>

<section className="bg-primary py-section-gap text-on-primary px-margin-mobile md:px-margin-desktop">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div className="space-y-2">
<div className="font-headline-xl text-headline-xl" id="counter-students">0</div>
<p className="font-label-md text-label-md opacity-80 uppercase tracking-widest">Happy Students</p>
</div>
<div className="space-y-2">
<div className="font-headline-xl text-headline-xl" id="counter-teachers">0</div>
<p className="font-label-md text-label-md opacity-80 uppercase tracking-widest">Mentors</p>
</div>
<div className="space-y-2">
<div className="font-headline-xl text-headline-xl" id="counter-classrooms">0</div>
<p className="font-label-md text-label-md opacity-80 uppercase tracking-widest">Studios</p>
</div>
<div className="space-y-2">
<div className="font-headline-xl text-headline-xl" id="counter-awards">0</div>
<p className="font-label-md text-label-md opacity-80 uppercase tracking-widest">Awards</p>
</div>
</div>
</section>

<section className="relative px-margin-mobile md:px-margin-desktop py-24 text-center overflow-hidden">
<div className="absolute inset-0 bg-primary-container opacity-20 -z-10 [clipPath:ellipse(80%_100%_at_50%_100%)]"></div>
<div className="max-w-3xl mx-auto space-y-8">
<h2 className="font-headline-xl text-headline-xl text-primary">Join Our Learning Family</h2>
<p className="font-body-lg text-body-lg text-on-surface-variant">Ready to start your child's magical journey? Our admissions for the new session are now open.</p>
<div className="flex flex-col md:flex-row gap-6 justify-center">
<button className="bg-primary text-on-primary px-10 py-4 rounded-full font-headline-md text-headline-md shadow-xl hover:scale-105 transition-all">Apply Now</button>
<button className="border-2 border-primary text-primary px-10 py-4 rounded-full font-headline-md text-headline-md hover:bg-primary/5 transition-all">Contact Us</button>
</div>
</div>
</section>

<Footer />
    </div>
  );
}
