UPDATE EXISTING HOMEPAGE WITH THESE PRECISE MODIFICATIONS:

**1. ADD LEADERSHIP MESSAGES SECTION**
Location: Directly below existing ticker board
Section Requirements:
- Use EXACT same styling as existing homepage sections
- Background: Match existing section backgrounds (transparent/white)
- Padding: Match existing section padding (60px desktop/30px mobile)

Content Structure:
- Two equal cards side-by-side (stacked on mobile)
- Cards must use:
* Existing card styling (shadow, border-radius, etc.)
* Existing color scheme (#5ec0cc for accents)
* Existing typography (Montserrat headings, Open Sans body)

Card Design:
- NO links (messages are standalone, no "Read Full Message")
- Each card contains:
* Header with existing teal accent (#5ec0cc)
* Author photo (circular, match existing photo styling)
* Author name/title (match existing text styling)
* 2-3 paragraph message (black text, existing line height)
* NO clickable elements

Specific Content:
1. Head of Athletics:
- Photo: Use existing Andrew Dean photo or standard placeholder
- Title: "Message from the Head of Athletics"
- Content: [Insert 2-3 paragraph message here]

2. Athletic Council President:
- Photo: Use existing Leang Chinh Dom photo or standard placeholder
- Title: "Message from the Council President"
- Content: [Insert 2-3 paragraph message here]

**2. REPLACE OUR SPORTS SECTION WITH CAROUSEL**
Location: Replace existing scroll-bar sports section
Requirements:
- Use EXACT same colors as homepage:
* Background: Transparent (match existing)
* Text: #121212 (match existing)
* Accents: #5ec0cc (match existing)
- 5 sport items (Volleyball, Basketball, Football, Track & Field, Swimming)
- Visual Treatment:
* Center item: 100% opacity (FULL opacity, no reduction)
* Side items: 60% opacity
* Center item: Normal scale (1.0x, NO enlargement)
* Side items: 0.9x scale
* Smooth transitions between items
- Navigation:
* Desktop: Arrows on sides (match existing button style)
* Mobile: Horizontal scroll with snap-to-center
- Auto-rotate: Every 5 seconds with pause on hover
- Each item contains:
* Sport image (match existing image dimensions)
* Sport name (match existing text styling)
* "Explore Teams" button (match existing button style)

**3. UPDATE QUICK LINKS SECTION**
Action: Replace "Athletic Council" with "News & Media"
Requirements:
- Use EXACT same styling as existing quick links
- New link must match:
* Existing card size/spacing
* Existing icon style (use newspaper icon)
* Existing hover effects
- Link destination: /news (existing news page)

**4. IMPLEMENTATION RULES**
- NO new colors - use EXACT existing homepage palette only
- NO new link destinations - all links must point to existing pages
- NO new styles - match existing homepage styling exactly
- Preserve ALL existing content below updated sections
- Maintain ALL existing functionality

**5. MOBILE SPECIFICATIONS**
- Leadership cards: Stack vertically with existing mobile spacing
- Carousel:
* Horizontal scroll with snap-to-center
* Hide navigation arrows
* Maintain opacity/scale effects
* Center item always at 100% opacity
- Test touch swipe functionality

**6. TECHNICAL REQUIREMENTS**
- Update existing homepage template - DO NOT create new
- Use existing CSS classes where possible
- Ensure carousel works without JavaScript (static fallback)
- All new text must be editable in existing CMS
- Optimize images using existing compression settings

**7. CONTENT TO USE**
Leadership Messages:
1. Andrew Dean: [Insert 2-3 paragraph message about athletic program]
2. Leang Chinh Dom: [Insert 2-3 paragraph message about student leadership]

Sport Links:
- Volleyball → /teams/volleyball (existing)
- Basketball → /teams/basketball (existing)
- Football → /teams/football (existing)
- Track & Field → /teams/track (existing)
- Swimming → /teams/swimming (existing)

**8. VISUAL CONSISTENCY CHECKLIST
[ ] Colors match existing homepage exactly
[ ] Typography matches existing homepage exactly
[ ] Spacing matches existing homepage sections
[ ] Buttons match existing homepage style
[ ] Hover effects match existing homepage
[ ] Transitions match existing animations
[ ] Center sport maintains 100% opacity at all times
[ ] No new link destinations added

about.html

@@ -455,7 +455,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>

basketball.html

@@ -565,7 +565,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>

council.html

@@ -642,7 +642,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>

football.html

@@ -730,7 +730,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>

get-involved.html

@@ -683,7 +683,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>

index.html

@@ -134,6 +134,7 @@
             </div>
         </div>
     </section>
+
     <!-- News Ticker -->
     <div class="bg-[#1e1e1e] border-t border-primary py-3 overflow-hidden">
         <div class="news-ticker">
@@ -160,48 +161,43 @@
     <!-- Leadership Messages -->
     <section class="py-16">
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl md:text-4xl font-bold text-[#121212] text-center mb-12">LEADERSHIP MESSAGES</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                <!-- Head of Athletics Card -->
-                <div class="bg-[#1e1e1e] rounded-lg shadow-md overflow-hidden">
-                    <div class="bg-gradient-to-r from-[#5ec0cc] to-[#4ab3c6] p-6">
-                        <div class="flex items-center">
-                            <img src="http://static.photos/people/60x60/21" alt="Andrew Dean" class="w-15 h-15 rounded-full border-2 border-white mr-4">
-                            <div>
-                                <h3 class="text-white text-xl font-bold">Message from the Head of Athletics</h3>
-                            </div>
+                <!-- Head of Athletics Message -->
+                <div class="bg-[#1e1e1e] p-6 rounded-lg">
+                    <h2 class="text-2xl font-bold text-primary mb-4">Message from the Head of Athletics</h2>
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/100x100/11" alt="Andrew Dean" class="w-16 h-16 rounded-full mr-4">
+                        <div>
+                            <h3 class="text-xl font-bold">Andrew Dean</h3>
+                            <p class="text-secondary">Head of Athletics</p>
                         </div>
                     </div>
-                    <div class="p-6">
-                        <p class="mb-4 text-white leading-relaxed">As we enter another exciting season, I'm proud of the dedication and sportsmanship our athletes continue to demonstrate. This year, we're focusing on holistic development that builds not just athletic skills, but leadership qualities and resilience.</p>
-                        <p class="mb-4 text-white leading-relaxed">Our new facilities and expanded programs provide unprecedented opportunities for every student to find their passion and excel. I encourage all students to get involved, whether as athletes, supporters, or volunteers.</p>
-                        <p class="text-white leading-relaxed">Together, we'll continue to build a culture of excellence that extends far beyond the playing field, shaping well-rounded individuals ready to take on any challenge.</p>
-                    </div>
+                    <p class="mb-3">Welcome to another exciting season of NAGAS Athletics! As we continue to build on our legacy of excellence, I'm proud to see our student-athletes grow not just in skill but in character. Our programs are designed to challenge athletes physically and mentally while fostering the attributes of the IB Learner Profile.</p>
+                    <p class="mb-3">This year, we're focusing on holistic development that builds leadership qualities, resilience, and a strong sense of community. Every practice session is an opportunity to build character, and every competition teaches us something new about ourselves and our community.</p>
+                    <p>Together, we'll continue to embody the Fighting Nagas Spirit - strength through unity!</p>
                 </div>
-                
-                <!-- Athletic Council President Card -->
-                <div class="bg-[#1e1e1e] rounded-lg shadow-md overflow-hidden">
-                    <div class="bg-gradient-to-r from-[#5ec0cc] to-[#4ab3c6] p-6">
-                        <div class="flex items-center">
-                            <img src="http://static.photos/people/60x60/11" alt="Leang Chinh Dom" class="w-15 h-15 rounded-full border-2 border-white mr-4">
-                            <div>
-                                <h3 class="text-white text-xl font-bold">Message from the Council President</h3>
-                            </div>
+
+                <!-- Council President Message -->
+                <div class="bg-[#1e1e1e] p-6 rounded-lg">
+                    <h2 class="text-2xl font-bold text-primary mb-4">Message from the Council President</h2>
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/100x100/13" alt="Leang Chinh Dom" class="w-16 h-16 rounded-full mr-4">
+                        <div>
+                            <h3 class="text-xl font-bold">Leang Chinh Dom</h3>
+                            <p class="text-secondary">Athletic Council President</p>
                         </div>
                     </div>
-                    <div class="p-6">
-                        <p class="mb-4 text-white leading-relaxed">This year, the Athletic Council is excited to introduce new community engagement initiatives and enhanced spirit programs. We believe athletics should bring our entire school community together.</p>
-                        <p class="mb-4 text-white leading-relaxed">Our goal is to create an inclusive environment where every student feels connected to our teams and proud to be part of the Fighting Nagas family. Join us in making this season unforgettable!</p>
-                        <p class="text-white leading-relaxed">Through teamwork, dedication, and school spirit, we'll continue to strengthen the bonds that make our athletic program truly special.</p>
-                    </div>
+                    <p class="mb-3">As your student council president, I'm excited to represent the voice of our athletes and work with the administration to make this year the best yet. Our council is committed to organizing events that bring our community together and create lasting memories for everyone involved.</p>
+                    <p class="mb-3">We believe that athletics is about more than just winning games - it's about building character, developing leadership skills, and creating a supportive environment where everyone can thrive. This year, we're planning several new initiatives to enhance the experience for all student-athletes.</p>
+                    <p>Let's make this season one to remember!</p>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- Featured Content -->
-<section class="py-16">
-        <div class="container mx-auto px-4">
+    <section class="py-16">
+<div class="container mx-auto px-4">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Upcoming Games -->
                 <div class="bg-[#1e1e1e] p-6 rounded-lg">
@@ -266,7 +262,6 @@
             </div>
         </div>
     </section>
-
     <!-- Sports Carousel -->
     <section class="py-16 bg-[#0a0a0a]">
         <div class="container mx-auto px-4">
@@ -275,65 +270,99 @@
                 <div class="overflow-hidden">
                     <div class="flex transition-transform duration-500 ease-in-out" id="sportsCarousel">
                         <!-- Volleyball -->
-                        <div class="flex-shrink-0 w-full md:w-1/3 px-2">
-                            <div class="bg-[#1e1e1e] rounded-lg overflow-hidden mx-auto transform scale-100 opacity-100 transition-all duration-500">
-                                <img src="http://static.photos/sport/300x200/2" alt="Volleyball" class="w-full h-50 object-cover rounded-t-lg">
-                                <div class="p-6 text-center">
-                                    <h3 class="text-2xl font-bold text-white mb-4">Volleyball</h3>
-                                    <a href="volleyball.html" class="inline-block bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">Explore Teams</a>
+                        <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500">
+                            <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
+                                <img src="http://static.photos/people/640x360/42" alt="Volleyball" class="w-full h-48 object-cover">
+                                <div class="p-6">
+                                    <div class="flex items-center mb-3">
+                                        <i data-feather="volleyball" class="text-primary mr-2"></i>
+                                        <h3 class="text-xl font-bold">Volleyball</h3>
+                                    </div>
+                                    <p class="mb-4">Championship-winning seniors and promising junior teams.</p>
+                                    <a href="volleyball.html" class="text-primary hover:underline">Explore Teams</a>
                                 </div>
                             </div>
                         </div>
+                        
                         <!-- Basketball -->
-                        <div class="flex-shrink-0 w-full md:w-1/3 px-2">
-                            <div class="bg-[#1e1e1e] rounded-lg overflow-hidden mx-auto transform scale-90 opacity-60 transition-all duration-500">
-                                <img src="http://static.photos/sport/300x200/1" alt="Basketball" class="w-full h-50 object-cover rounded-t-lg">
-                                <div class="p-6 text-center">
-                                    <h3 class="text-2xl font-bold text-white mb-4">Basketball</h3>
-                                    <a href="basketball.html" class="inline-block bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">Explore Teams</a>
+                        <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500">
+                            <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
+                                <img src="http://static.photos/people/640x360/133" alt="Basketball" class="w-full h-48 object-cover">
+                                <div class="p-6">
+                                    <div class="flex items-center mb-3">
+                                        <i data-feather="basketball" class="text-primary mr-2"></i>
+                                        <h3 class="text-xl font-bold">Basketball</h3>
+                                    </div>
+                                    <p class="mb-4">Juniors A/B and Seniors A/B teams competing in regional tournaments.</p>
+                                    <a href="basketball.html" class="text-primary hover:underline">Explore Teams</a>
                                 </div>
                             </div>
                         </div>
+                        
                         <!-- Football -->
-                        <div class="flex-shrink-0 w-full md:w-1/3 px-2">
-                            <div class="bg-[#1e1e1e] rounded-lg overflow-hidden mx-auto transform scale-90 opacity-60 transition-all duration-500">
-                                <img src="http://static.photos/sport/300x200/5" alt="Football" class="w-full h-50 object-cover rounded-t-lg">
-                                <div class="p-6 text-center">
-                                    <h3 class="text-2xl font-bold text-white mb-4">Football</h3>
-                                    <a href="football.html" class="inline-block bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">Explore Teams</a>
+                        <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-100 scale-100 transform transition-all duration-500">
+                            <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
+                                <img src="http://static.photos/sport/640x360/5" alt="Football" class="w-full h-48 object-cover">
+                                <div class="p-6">
+                                    <div class="flex items-center mb-3">
+                                        <i data-feather="circle" class="text-primary mr-2"></i>
+                                        <h3 class="text-xl font-bold">Football</h3>
+                                    </div>
+                                    <p class="mb-4">Competitive teams for all skill levels with regular training.</p>
+                                    <a href="football.html" class="text-primary hover:underline">Explore Teams</a>
                                 </div>
                             </div>
                         </div>
+                        
                         <!-- Track & Field -->
-                        <div class="flex-shrink-0 w-full md:w-1/3 px-2">
-                            <div class="bg-[#1e1e1e] rounded-lg overflow-hidden mx-auto transform scale-90 opacity-60 transition-all duration-500">
-                                <img src="http://static.photos/sport/300x200/6" alt="Track & Field" class="w-full h-50 object-cover rounded-t-lg">
-                                <div class="p-6 text-center">
-                                    <h3 class="text-2xl font-bold text-white mb-4">Track & Field</h3>
-                                    <a href="track.html" class="inline-block bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">Explore Teams</a>
+                        <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500">
+                            <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
+                                <img src="http://static.photos/sport/640x360/6" alt="Track & Field" class="w-full h-48 object-cover">
+                                <div class="p-6">
+                                    <div class="flex items-center mb-3">
+                                        <i data-feather="activity" class="text-primary mr-2"></i>
+                                        <h3 class="text-xl font-bold">Track & Field</h3>
+                                    </div>
+                                    <p class="mb-4">Regional champions with athletes competing at national level.</p>
+                                    <a href="track.html" class="text-primary hover:underline">Explore Teams</a>
                                 </div>
                             </div>
                         </div>
+                        
                         <!-- Swimming -->
-                        <div class="flex-shrink-0 w-full md:w-1/3 px-2">
-                            <div class="bg-[#1e1e1e] rounded-lg overflow-hidden mx-auto transform scale-90 opacity-60 transition-all duration-500">
-                                <img src="http://static.photos/sport/300x200/7" alt="Swimming" class="w-full h-50 object-cover rounded-t-lg">
-                                <div class="p-6 text-center">
-                                    <h3 class="text-2xl font-bold text-white mb-4">Swimming</h3>
-                                    <a href="swimming.html" class="inline-block bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">Explore Teams</a>
+                        <div class="flex-shrink-0 w-full md:w-1/3 px-2 opacity-60 scale-90 transform transition-all duration-500">
+                            <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden h-full">
+                                <img src="http://static.photos/sport/640x360/7" alt="Swimming" class="w-full h-48 object-cover">
+                                <div class="p-6">
+                                    <div class="flex items-center mb-3">
+                                        <i data-feather="droplet" class="text-primary mr-2"></i>
+                                        <h3 class="text-xl font-bold">Swimming</h3>
+                                    </div>
+                                    <p class="mb-4">State-of-the-art facilities and coaching for all levels.</p>
+                                    <a href="swimming.html" class="text-primary hover:underline">Explore Teams</a>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
+                
                 <!-- Navigation Arrows -->
-                <button id="prevSlide" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-primary text-dark p-2 rounded-full shadow-lg hover:bg-[#4ab3c6] transition hidden md:block">
+                <button id="prevSlide" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-[#1e1e1e] bg-opacity-50 hover:bg-opacity-75 text-white p-2 rounded-full ml-2 hidden md:block">
                     <i data-feather="chevron-left"></i>
                 </button>
-                <button id="nextSlide" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-primary text-dark p-2 rounded-full shadow-lg hover:bg-[#4ab3c6] transition hidden md:block">
+                <button id="nextSlide" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-[#1e1e1e] bg-opacity-50 hover:bg-opacity-75 text-white p-2 rounded-full mr-2 hidden md:block">
                     <i data-feather="chevron-right"></i>
                 </button>
             </div>
+            
+            <!-- Mobile Scroll Indicators -->
+            <div class="flex justify-center mt-6 space-x-2 md:hidden">
+                <div class="w-3 h-3 bg-[#5ec0cc] rounded-full"></div>
+                <div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div>
+                <div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div>
+                <div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div>
+                <div class="w-3 h-3 bg-[#2e2e2e] rounded-full"></div>
+            </div>
         </div>
     </section>
 
@@ -360,9 +389,8 @@
             </div>
         </div>
     </section>
-
-    <!-- Footer -->
-<footer class="bg-darker py-12 border-t border-[#2e2e2e]">
+<!-- Footer -->
+    <footer class="bg-darker py-12 border-t border-[#2e2e2e]">
         <div class="container mx-auto px-4">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div>
@@ -403,8 +431,7 @@
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script>
         feather.replace();
-        
-        // Hero Carousel functionality
+        // Carousel functionality
         let currentIndex = 0;
         const items = document.querySelectorAll('.carousel-item');
         const itemCount = items.length;
@@ -420,57 +447,60 @@
         }
         
         setInterval(nextSlide, 5000);
-        // Sports Carousel functionality
-        const carousel = document.getElementById('sportsCarousel');
-        const slides = carousel.children;
-        const totalSlides = slides.length;
-        let currentSlide = 0;
         
-        // Update slide styles
-        function updateSlideStyles() {
-            for (let i = 0; i < totalSlides; i++) {
-                const slide = slides[i];
-                if (i === currentSlide) {
-                    // Center slide
-                    slide.style.transform = 'scale(1)';
-                    slide.style.opacity = '1';
+        // Sports Carousel
+        let currentSportIndex = 2; // Start with Football in center
+        const sportItems = document.querySelectorAll('#sportsCarousel > div');
+        const totalSports = sportItems.length;
+        
+        function updateSportsCarousel() {
+            sportItems.forEach((item, index) => {
+                if (index === currentSportIndex) {
+                    // Center item
+                    item.classList.remove('opacity-60', 'scale-90');
+                    item.classList.add('opacity-100', 'scale-100');
                 } else {
-                    // Side slides
-                    slide.style.transform = 'scale(0.9)';
-                    slide.style.opacity = '0.6';
+                    // Side items
+                    item.classList.remove('opacity-100', 'scale-100');
+                    item.classList.add('opacity-60', 'scale-90');
                 }
-            }
+            });
+            
+            // Update transform to show centered item
+            const carousel = document.getElementById('sportsCarousel');
+            const offset = -(currentSportIndex - 1) * (100 / 3);
+            carousel.style.transform = `translateX(${offset}%)`;
         }
         
-        // Next slide
-        function nextSlideCarousel() {
-            currentSlide = (currentSlide + 1) % totalSlides;
-            updateSlideStyles();
+        function nextSport() {
+            currentSportIndex = (currentSportIndex + 1) % totalSports;
+            updateSportsCarousel();
         }
         
-        // Previous slide
-        function prevSlideCarousel() {
-            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
-            updateSlideStyles();
+        function prevSport() {
+            currentSportIndex = (currentSportIndex - 1 + totalSports) % totalSports;
+            updateSportsCarousel();
         }
         
         // Auto-rotate every 5 seconds
-        let carouselInterval = setInterval(nextSlideCarousel, 5000);
+        let sportInterval = setInterval(nextSport, 5000);
         
-        // Pause on hover
-        carousel.addEventListener('mouseenter', () => {
-            clearInterval(carouselInterval);
+        // Pause auto-rotate on hover
+        document.querySelector('#sportsCarousel').addEventListener('mouseenter', () => {
+            clearInterval(sportInterval);
         });
         
-        carousel.addEventListener('mouseleave', () => {
-            carouselInterval = setInterval(nextSlideCarousel, 5000);
+        document.querySelector('#sportsCarousel').addEventListener('mouseleave', () => {
+            sportInterval = setInterval(nextSport, 5000);
         });
         
         // Navigation buttons
-        document.getElementById('nextSlide').addEventListener('click', nextSlideCarousel);
-        document.getElementById('prevSlide').addEventListener('click', prevSlideCarousel);
+        document.getElementById('nextSlide').addEventListener('click', nextSport);
+        document.getElementById('prevSlide').addEventListener('click', prevSport);
         
-        // Mobile menu toggle
+        // Initialize carousel
+        updateSportsCarousel();
+// Mobile menu toggle
         document.getElementById('menu-toggle').addEventListener('click', function() {
             document.getElementById('mobile-menu').classList.remove('hidden');
         });
@@ -478,9 +508,6 @@
         document.getElementById('menu-close').addEventListener('click', function() {
             document.getElementById('mobile-menu').classList.add('hidden');
         });
-        
-        // Initialize carousel
-        updateSlideStyles();
     </script>
 </body>
 </html>

news.html

@@ -664,7 +664,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>

schedule.html

@@ -880,7 +880,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>

swimming.html

@@ -737,7 +737,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>

teams.html

@@ -274,7 +274,8 @@
             </div>
         </div>
     </section>
-<!-- Season Highlights -->
+
+    <!-- Season Highlights -->
     <section class="py-16 border-b border-[#2e2e2e]">
         <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-primary mb-8">CURRENT SEASON</h2>
@@ -407,7 +408,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>
@@ -422,6 +423,7 @@
             </div>
         </div>
     </footer>
+
     <script>
         feather.replace();
         
@@ -454,3 +456,234 @@
     </script>
 </body>
 </html>
+<!-- Coming Soon Cards -->
+                <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden opacity-70" data-sport="golf">
+<div class="p-6">
+                        <div class="flex items-center mb-4">
+                            <i data-feather="golf" class="text-primary mr-2" style="width: 32px; height: 32px;"></i>
+                            <h3 class="text-2xl font-bold">Golf</h3>
+                            <span class="ml-auto bg-secondary text-dark text-xs py-1 px-2 rounded">Coming 2026</span>
+                        </div>
+                        <div class="grid grid-cols-2 gap-2 mb-4">
+                            <div class="bg-[#2e2e2e] w-full h-24 rounded flex items-center justify-center">
+                                <i data-feather="image" class="text-gray-500"></i>
+                            </div>
+                            <div class="bg-[#2e2e2e] w-full h-24 rounded flex items-center justify-center">
+                                <i data-feather="image" class="text-gray-500"></i>
+                            </div>
+                            <div class="bg-[#2e2e2e] w-full h-24 rounded flex items-center justify-center">
+                                <i data-feather="image" class="text-gray-500"></i>
+                            </div>
+                            <div class="bg-[#2e2e2e] w-full h-24 rounded flex items-center justify-center">
+                                <i data-feather="image" class="text-gray-500"></i>
+                            </div>
+                        </div>
+                        <p class="mb-4">New golf program launching 2026 with plans for academy partnerships and tournament participation. Facility upgrades underway.</p>
+                        <button class="inline-block bg-[#2e2e2e] text-gray-400 font-bold py-2 px-4 rounded cursor-not-allowed">View Team</button>
+                    </div>
+                </div>
+
+                <div class="sport-card bg-[#1e1e1e] rounded-lg overflow-hidden opacity-70" data-sport="badminton">
+                    <div class="p-6">
+                        <div class="flex items-center mb-4">
+                            <i data-feather="activity" class="text-primary mr-2" style="width: 32px; height: 32px;"></i>
+                            <h3 class="text-2xl font-bold">Badminton</h3>
+                            <span class="ml-auto bg-secondary text-dark text-xs py-1 px-2 rounded">Coming 2026</span>
+                        </div>
+                        <div class="grid grid-cols-2 gap-2 mb-4">
+                            <div class="bg-[#2e2e2e] w-full h-24 rounded flex items-center justify-center">
+                                <i data-feather="image" class="text-gray-500"></i>
+                            </div>
+                            <div class="bg-[#2e2e2e] w-full h-24 rounded flex items-center justify-center">
+                                <i data-feather="image" class="text-gray-500"></i>
+                            </div>
+                            <div class="bg-[#2e2e2e] w-full h-24 rounded flex items-center justify-center">
+                                <i data-feather="image" class="text-gray-500"></i>
+                            </div>
+                            <div class="bg-[#2e2e2e] w-full h-24 rounded flex items-center justify-center">
+                                <i data-feather="image" class="text-gray-500"></i>
+                            </div>
+                        </div>
+                        <p class="mb-4">Exciting new badminton program launching 2026. Plans include competitive teams, recreational opportunities, and coaching certification programs.</p>
+                        <button class="inline-block bg-[#2e2e2e] text-gray-400 font-bold py-2 px-4 rounded cursor-not-allowed">View Team</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Season Highlights -->
+    <section class="py-16 border-b border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-primary mb-8">CURRENT SEASON</h2>
+            <div class="bg-[#1e1e1e] rounded-lg p-6 max-w-3xl mx-auto">
+                <p class="mb-6 text-center">Follow our teams' progress this season</p>
+                
+                <div class="space-y-4 mb-6">
+                    <div class="border-l-4 border-secondary pl-3 hover:bg-[#2e2e2e] p-3 rounded-r">
+                        <p class="text-secondary">June 15, 3:00 PM</p>
+                        <p class="font-bold">Basketball Seniors A vs. ISSPP</p>
+                        <p class="text-sm">NAGAS Sports Hall</p>
+                    </div>
+                    <div class="border-l-4 border-secondary pl-3 hover:bg-[#2e2e2e] p-3 rounded-r">
+                        <p class="text-secondary">June 18, 5:00 PM</p>
+                        <p class="font-bold">Volleyball Juniors B vs. NIST</p>
+                        <p class="text-sm">Away - NIST Gymnasium</p>
+                    </div>
+                    <div class="border-l-4 border-secondary pl-3 hover:bg-[#2e2e2e] p-3 rounded-r">
+                        <p class="text-secondary">June 22, 2:00 PM</p>
+                        <p class="font-bold">Swimming vs. NISB</p>
+                        <p class="text-sm">NAGAS Aquatics Centre</p>
+                    </div>
+                </div>
+                
+                <div class="text-center">
+                    <a href="schedule.html" class="inline-block bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">Full Schedule</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Team Statistics -->
+    <section class="py-16 border-b border-[#2e2e2e] bg-[#0a0a0a]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-primary mb-8">BY THE NUMBERS</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div class="stat-card bg-[#1e1e1e] p-6 rounded-lg text-center">
+                    <p class="text-4xl font-bold text-primary mb-2">120+</p>
+                    <p>Total Athletes</p>
+                </div>
+                <div class="stat-card bg-[#1e1e1e] p-6 rounded-lg text-center">
+                    <p class="text-4xl font-bold text-primary mb-2">18</p>
+                    <p>Championships Won</p>
+                </div>
+                <div class="stat-card bg-[#1e1e1e] p-6 rounded-lg text-center">
+                    <p class="text-4xl font-bold text-primary mb-2">5</p>
+                    <p>Sports Offered</p>
+                </div>
+                <div class="stat-card bg-[#1e1e1e] p-6 rounded-lg text-center">
+                    <p class="text-4xl font-bold text-primary mb-2">85</p>
+                    <p>Games Played</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Coaches Spotlight -->
+    <section class="py-16">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-primary mb-8">MEET OUR COACHES</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="coach-card bg-[#1e1e1e] rounded-lg overflow-hidden">
+                    <div class="md:flex">
+                        <img src="http://static.photos/people/200x200/21" alt="Andrew Dean" class="w-full md:w-32 h-32 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold">Andrew Dean</h3>
+                            <p class="text-secondary mb-2">Head of Athletics</p>
+                            <p>Former professional athlete with 15+ years coaching experience.</p>
+                        </div>
+                    </div>
+                    <div class="px-6 pb-6">
+                        <a href="council.html" class="inline-block mt-2 text-primary hover:underline">View Profile</a>
+                    </div>
+                </div>
+                
+                <div class="coach-card bg-[#1e1e1e] rounded-lg overflow-hidden">
+                    <div class="md:flex">
+                        <img src="http://static.photos/people/200x200/22" alt="Basketball Coach" class="w-full md:w-32 h-32 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold">Sarith Meng</h3>
+                            <p class="text-secondary mb-2">Basketball Coach</p>
+                            <p>National team experience, focuses on fundamentals and teamwork.</p>
+                        </div>
+                    </div>
+                    <div class="px-6 pb-6">
+                        <a href="basketball.html" class="inline-block mt-2 text-primary hover:underline">View Team</a>
+                    </div>
+                </div>
+                
+                <div class="coach-card bg-[#1e1e1e] rounded-lg overflow-hidden">
+                    <div class="md:flex">
+                        <img src="http://static.photos/people/200x200/23" alt="Volleyball Coach" class="w-full md:w-32 h-32 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold">Sok Vanna</h3>
+                            <p class="text-secondary mb-2">Volleyball Coach</p>
+                            <p>Olympic training background, emphasizes technique and strategy.</p>
+                        </div>
+                    </div>
+                    <div class="px-6 pb-6">
+                        <a href="volleyball.html" class="inline-block mt-2 text-primary hover:underline">View Team</a>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-8">
+                <a href="council.html" class="inline-block bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">View All Coaches</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-darker py-12 border-t border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Contact Info</h3>
+                    <p>Northbridge International School Cambodia</p>
+                    <p>#98C, Street 169, Phnom Penh</p>
+                    <p>Email: info@nagas.edu.kh</p>
+                    <p>Phone: +855 12 345 678</p>
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Follow Us</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-primary hover:text-secondary">
+                            <i data-feather="facebook"></i>
+                        </a>
+                        <a href="#" class="text-primary hover:text-secondary">
+                            <i data-feather="instagram"></i>
+                        </a>
+                        <a href="#" class="text-primary hover:text-secondary">
+                            <i data-feather="twitter"></i>
+                        </a>
+                    </div>
+                    <p class="mt-2">@NAGAS_NISC</p>
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="teams.html" class="hover:text-primary">Teams</a></li>
+                        <li><a href="schedule.html" class="hover:text-primary">Schedule</a></li>
+                        <li><a href="news.html" class="hover:text-primary">News</a></li>
+                        <li><a href="#" class="hover:text-primary">Athlete Portal</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-[#2e2e2e] mt-8 pt-8 text-center">
+                <p>&copy; 2023 NAGAS - Northbridge Athletic Groups and Sports. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        feather.replace();
+        
+        // Sport filtering functionality
+        document.getElementById('sportFilter').addEventListener('change', function() {
+            const selectedSport = this.value;
+            const sportCards = document.querySelectorAll('.sport-card');
+            
+            sportCards.forEach(card => {
+                if (selectedSport === 'all') {
+                    card.style.display = 'block';
+                } else {
+                    if (card.dataset.sport === selectedSport) {
+                        card.style.display = 'block';
+                    } else {
+                        card.style.display = 'none';
+                    }
+                }
+            });
+        });
+    </script>
+</body>
+</html>

track.html

@@ -612,7 +612,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>

volleyball.html

@@ -704,7 +704,7 @@
                     </div>
                     <p class="mt-2">@NAGAS_NISC</p>
 </div>
-<div>
+                <div>
                     <h3 class="text-xl font-bold mb-4">Quick Links</h3>
                     <ul class="space-y-2">
                         <li><a href="teams.html" class="hover:text-primary">Teams</a></li>