Page Title: Junior A Boys – Volleyball

Design Style:
- Theme: Dark mode (#121212)
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF)/Light Grey (#CCCCCC)
- Font: Montserrat
- Animations: Smooth transitions and carousel effects

Header:
- Existing NAGAS header

Layout:
1. Back Button (→ /volleyball)
2. Search Bar (filters players by name)
3. Player Grid:
- 3-column responsive grid (2-col tablet, 1-col mobile)
- Cards with hover animations (scale + glow)
- Staggered fade-in on load

4. Player Profile Modal:
- Slide-up animation
- Carousel gallery with:
* Main image display
* Thumbnail navigation
* Smooth transition between images
* Swipe support for mobile

CSS Additions:
/* Carousel Container */
.carousel-container {
position: relative;
max-width: 100%;
margin: 20px auto;
overflow: hidden;
border-radius: 6px;
}

/* Main Image */
.carousel-main {
width: 100%;
height: 300px;
background: #1E1E1E;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.carousel-main img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s ease;
}

/* Thumbnails */
.carousel-thumbs {
display: flex;
gap: 8px;
margin-top: 10px;
justify-content: center;
}
.carousel-thumbs img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
opacity: 0.7;
transition: all 0.3s;
}
.carousel-thumbs img.active {
opacity: 1;
border: 2px solid #008080;
}

/* Navigation Arrows */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 18px;
z-index: 10;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-arrow:hover {
background: #008080;
}
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }

/* Animation for image transition */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

/* JavaScript for Carousel */
<script>
document.querySelectorAll('.player-card').forEach(card => {
card.addEventListener('click', () => {
const modal = document.getElementById('profile-modal');
const mainImg = modal.querySelector('.carousel-main img');
const thumbs = modal.querySelectorAll('.carousel-thumbs img');
let currentIndex = 0;

// Set up carousel
thumbs.forEach((thumb, index) => {
thumb.addEventListener('click', () => {
currentIndex = index;
updateCarousel();
});
});

// Navigation arrows
modal.querySelector('.carousel-arrow.prev').addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
updateCarousel();
});

modal.querySelector('.carousel-arrow.next').addEventListener('click', () => {
currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
updateCarousel();
});

// Swipe support for mobile
let touchStartX = 0;
mainImg.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
});

mainImg.addEventListener('touchend', (e) => {
const touchEndX = e.changedTouches[0].screenX;
if (touchStartX - touchEndX > 50) { // Swipe left
currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
} else if (touchEndX - touchStartX > 50) { // Swipe right
currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
}
updateCarousel();
});

function updateCarousel() {
// Fade out current image
mainImg.style.opacity = 0;

setTimeout(() => {
// Update main image
mainImg.src = thumbs[currentIndex].src;
mainImg.style.opacity = 1;

// Update active thumbnail
thumbs.forEach((thumb, index) => {
thumb.classList.toggle('active', index === currentIndex);
});
}, 300);
}

// Initialize
updateCarousel();
});
});
</script>

HTML Structure for Carousel:
<div class="carousel-container">
<div class="carousel-main">
<img src="player-main.jpg" alt="Main photo">
<button class="carousel-arrow prev">‹</button>
<button class="carousel-arrow next">›</button>
</div>
<div class="carousel-thumbs">
<img src="player-1.jpg" class="active" alt="Thumbnail 1">
<img src="player-2.jpg" alt="Thumbnail 2">
<img src="player-3.jpg" alt="Thumbnail 3">
</div>
</div>

junior-a-boys.html

@@ -0,0 +1,594 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Junior A Boys – Volleyball | NAGAS</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#008080',
+                        dark: '#121212',
+                        darker: '#0a0a0a',
+                        lightGrey: '#CCCCCC'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #121212;
+            color: #ffffff;
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: 700;
+        }
+        /* Shared card styles */
+        .player-card {
+            transition: all 0.3s ease;
+            border: 1px solid #008080;
+            border-radius: 6px;
+            background-color: #1E1E1E;
+            padding: 20px;
+            text-align: center;
+            color: white;
+            opacity: 0;
+            transform: translateY(20px);
+        }
+
+        /* Hover effects */
+        .player-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px rgba(0, 128, 128, 0.3);
+        }
+
+        /* Section titles */
+        .section-title {
+            margin-bottom: 20px;
+        }
+
+        /* Preserve existing header/footer styles */
+        header, footer {
+            width: 100%;
+            padding: 20px;
+        }
+
+        /* Carousel Container */
+        .carousel-container {
+          position: relative;
+          max-width: 100%;
+          margin: 20px auto;
+          overflow: hidden;
+          border-radius: 6px;
+        }
+
+        /* Main Image */
+        .carousel-main {
+          width: 100%;
+          height: 300px;
+          background: #1E1E1E;
+          border-radius: 6px;
+          overflow: hidden;
+          position: relative;
+        }
+        .carousel-main img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: opacity 0.5s ease;
+        }
+
+        /* Thumbnails */
+        .carousel-thumbs {
+          display: flex;
+          gap: 8px;
+          margin-top: 10px;
+          justify-content: center;
+        }
+        .carousel-thumbs img {
+          width: 60px;
+          height: 60px;
+          object-fit: cover;
+          border-radius: 4px;
+          cursor: pointer;
+          opacity: 0.7;
+          transition: all 0.3s;
+        }
+        .carousel-thumbs img.active {
+          opacity: 1;
+          border: 2px solid #008080;
+        }
+
+        /* Navigation Arrows */
+        .carousel-arrow {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          background: rgba(0,0,0,0.5);
+          color: white;
+          border: none;
+          padding: 10px;
+          cursor: pointer;
+          font-size: 18px;
+          z-index: 10;
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .carousel-arrow:hover {
+          background: #008080;
+        }
+        .carousel-arrow.prev { left: 10px; }
+        .carousel-arrow.next { right: 10px; }
+
+        /* Animation for image transition */
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .modal-content {
+            background: #1E1E1E;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 600px;
+            padding: 20px;
+            position: relative;
+            transform: translateY(100%);
+            animation: slideUp 0.4s forwards;
+        }
+        
+        @keyframes slideUp {
+            to {
+                transform: translateY(0);
+            }
+        }
+        
+        .close-modal {
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            font-size: 24px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="bg-dark text-white">
+    <!-- Navigation -->
+    <header class="fixed w-full z-50 bg-dark border-b border-primary">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
+                <a href="index.html" class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></a>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="index.html" class="hover:text-primary">Home</a>
+                <a href="about.html" class="hover:text-primary">About</a>
+                <a href="teams.html" class="hover:text-primary">Teams</a>
+                <a href="schedule.html" class="hover:text-primary">Schedule</a>
+                <a href="council.html" class="hover:text-primary">Council</a>
+                <a href="news.html" class="hover:text-primary">News</a>
+                <a href="get-involved.html" class="hover:text-primary">Get Involved</a>
+            </nav>
+            <button id="menu-toggle" class="md:hidden text-white">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </header>
+
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="fixed inset-0 bg-dark z-50 hidden">
+        <div class="flex justify-between items-center p-4 border-b border-primary">
+            <div class="flex items-center">
+                <div class="w-10 h-10 bg-primary rounded-full mr-3"></div>
+                <span class="text-xl font-extrabold"><span class="text-[#008080]">NAGAS</span><span class="text-white">ATHLETICS</span></span>
+            </div>
+            <button id="menu-close" class="text-white">
+                <i data-feather="x"></i>
+            </button>
+        </div>
+        <nav class="p-4">
+            <a href="index.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Home</a>
+            <a href="about.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">About</a>
+            <a href="teams.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Teams</a>
+            <a href="schedule.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Schedule</a>
+            <a href="council.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Council</a>
+            <a href="news.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">News</a>
+            <a href="get-involved.html" class="block py-3 hover:text-primary border-b border-[#2e2e2e]">Get Involved</a>
+        </nav>
+    </div>
+
+    <!-- Breadcrumb -->
+    <div class="pt-20 pb-4 bg-darker border-b border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <nav class="text-sm">
+                <a href="index.html" class="text-primary hover:underline">Home</a> > 
+                <a href="teams.html" class="text-primary hover:underline">Teams</a> > 
+                <a href="volleyball.html" class="text-primary hover:underline">Volleyball</a> > 
+                <span class="text-white">Junior A Boys</span>
+            </nav>
+        </div>
+    </div>
+
+    <!-- Back Button -->
+    <div class="container mx-auto px-4 py-6">
+        <a href="volleyball.html" class="inline-flex items-center text-primary hover:text-white transition">
+            <i data-feather="arrow-left" class="mr-2"></i> Back to Volleyball Teams
+        </a>
+    </div>
+
+    <!-- Team Header -->
+    <section class="py-8 text-center px-4">
+        <h1 class="text-4xl md:text-5xl font-bold mb-2">Junior A Boys Volleyball</h1>
+        <p class="text-lightGrey text-base mb-6">Northbridge Athletic Groups and Sports</p>
+    </section>
+
+    <!-- Search Bar -->
+    <div class="container mx-auto px-4 mb-8">
+        <div class="max-w-md mx-auto">
+            <input type="text" id="search-players" placeholder="Search players..." class="w-full px-4 py-2 rounded bg-[#1E1E1E] border border-[#008080] text-white focus:outline-none focus:ring-2 focus:ring-[#008080]">
+        </div>
+    </div>
+
+    <!-- Player Grid -->
+    <section class="py-8 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="player-grid">
+                <!-- Player cards will be populated by JavaScript -->
+            </div>
+        </div>
+    </section>
+
+    <!-- Player Profile Modal -->
+    <div id="profile-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-modal">&times;</span>
+            <h2 id="modal-player-name" class="text-2xl font-bold mb-2"></h2>
+            <p id="modal-player-position" class="text-primary mb-4"></p>
+            
+            <!-- Carousel Container -->
+            <div class="carousel-container">
+                <div class="carousel-main">
+                    <img id="carousel-main-img" src="" alt="Main photo">
+                    <button class="carousel-arrow prev">‹</button>
+                    <button class="carousel-arrow next">›</button>
+                </div>
+                <div class="carousel-thumbs" id="carousel-thumbs">
+                    <!-- Thumbnails will be populated by JavaScript -->
+                </div>
+            </div>
+            
+            <div class="mt-4">
+                <h3 class="text-xl font-bold mb-2">Player Stats</h3>
+                <ul id="player-stats" class="text-lightGrey">
+                    <!-- Stats will be populated by JavaScript -->
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- 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-lightGrey">
+                            <i data-feather="facebook"></i>
+                        </a>
+                        <a href="#" class="text-primary hover:text-lightGrey">
+                            <i data-feather="instagram"></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();
+        
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.remove('hidden');
+        });
+        
+        document.getElementById('menu-close').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.add('hidden');
+        });
+
+        // Sample player data (in a real app, this would come from an API)
+        const players = [
+            {
+                id: 1,
+                name: "David Martinez",
+                position: "Setter",
+                images: [
+                    "http://static.photos/people/320x240/1",
+                    "http://static.photos/people/320x240/2",
+                    "http://static.photos/people/320x240/3"
+                ],
+                stats: {
+                    "Height": "175 cm",
+                    "Age": "16",
+                    "Hometown": "Phnom Penh",
+                    "Matches Played": "24",
+                    "Sets Won": "89"
+                }
+            },
+            {
+                id: 2,
+                name: "Michael Chen",
+                position: "Outside Hitter",
+                images: [
+                    "http://static.photos/people/320x240/4",
+                    "http://static.photos/people/320x240/5",
+                    "http://static.photos/people/320x240/6"
+                ],
+                stats: {
+                    "Height": "182 cm",
+                    "Age": "17",
+                    "Hometown": "Siem Reap",
+                    "Matches Played": "22",
+                    "Points Scored": "156"
+                }
+            },
+            {
+                id: 3,
+                name: "James Wilson",
+                position: "Middle Blocker",
+                images: [
+                    "http://static.photos/people/320x240/7",
+                    "http://static.photos/people/320x240/8",
+                    "http://static.photos/people/320x240/9"
+                ],
+                stats: {
+                    "Height": "188 cm",
+                    "Age": "16",
+                    "Hometown": "Sihanoukville",
+                    "Matches Played": "20",
+                    "Blocks": "42"
+                }
+            },
+            {
+                id: 4,
+                name: "Robert Johnson",
+                position: "Libero",
+                images: [
+                    "http://static.photos/people/320x240/10",
+                    "http://static.photos/people/320x240/11",
+                    "http://static.photos/people/320x240/12"
+                ],
+                stats: {
+                    "Height": "170 cm",
+                    "Age": "17",
+                    "Hometown": "Battambang",
+                    "Matches Played": "25",
+                    "Digs": "128"
+                }
+            },
+            {
+                id: 5,
+                name: "Thomas Brown",
+                position: "Opposite Hitter",
+                images: [
+                    "http://static.photos/people/320x240/13",
+                    "http://static.photos/people/320x240/14",
+                    "http://static.photos/people/320x240/15"
+                ],
+                stats: {
+                    "Height": "185 cm",
+                    "Age": "16",
+                    "Hometown": "Kampot",
+                    "Matches Played": "21",
+                    "Points Scored": "134"
+                }
+            },
+            {
+                id: 6,
+                name: "Daniel Davis",
+                position: "Outside Hitter",
+                images: [
+                    "http://static.photos/people/320x240/16",
+                    "http://static.photos/people/320x240/17",
+                    "http://static.photos/people/320x240/18"
+                ],
+                stats: {
+                    "Height": "180 cm",
+                    "Age": "17",
+                    "Hometown": "Kep",
+                    "Matches Played": "19",
+                    "Points Scored": "112"
+                }
+            }
+        ];
+
+        // Populate player grid
+        const playerGrid = document.getElementById('player-grid');
+        const searchInput = document.getElementById('search-players');
+
+        function renderPlayers(playerList) {
+            playerGrid.innerHTML = '';
+            playerList.forEach((player, index) => {
+                const playerCard = document.createElement('div');
+                playerCard.className = 'player-card';
+                playerCard.innerHTML = `
+                    <img src="${player.images[0]}" alt="${player.name}" class="w-full h-48 object-cover rounded mb-4">
+                    <h3 class="text-xl font-bold">${player.name}</h3>
+                    <p class="text-primary">${player.position}</p>
+                `;
+                
+                // Add staggered animation delay
+                playerCard.style.animation = `fadeIn 0.5s ease forwards ${index * 0.1}s`;
+                
+                playerCard.addEventListener('click', () => openPlayerModal(player));
+                playerGrid.appendChild(playerCard);
+            });
+        }
+
+        // Search functionality
+        searchInput.addEventListener('input', function() {
+            const searchTerm = this.value.toLowerCase();
+            const filteredPlayers = players.filter(player => 
+                player.name.toLowerCase().includes(searchTerm)
+            );
+            renderPlayers(filteredPlayers);
+        });
+
+        // Initial render
+        renderPlayers(players);
+
+        // Player modal functionality
+        const modal = document.getElementById('profile-modal');
+        const closeModalBtn = document.querySelector('.close-modal');
+
+        function openPlayerModal(player) {
+            document.getElementById('modal-player-name').textContent = player.name;
+            document.getElementById('modal-player-position').textContent = player.position;
+            
+            // Set main image
+            const mainImg = document.getElementById('carousel-main-img');
+            mainImg.src = player.images[0];
+            mainImg.alt = player.name;
+            
+            // Populate thumbnails
+            const thumbsContainer = document.getElementById('carousel-thumbs');
+            thumbsContainer.innerHTML = '';
+            player.images.forEach((img, index) => {
+                const thumb = document.createElement('img');
+                thumb.src = img;
+                thumb.alt = `${player.name} ${index + 1}`;
+                if (index === 0) thumb.classList.add('active');
+                thumbsContainer.appendChild(thumb);
+            });
+            
+            // Populate stats
+            const statsList = document.getElementById('player-stats');
+            statsList.innerHTML = '';
+            for (const [key, value] of Object.entries(player.stats)) {
+                const li = document.createElement('li');
+                li.innerHTML = `<strong>${key}:</strong> ${value}`;
+                statsList.appendChild(li);
+            }
+            
+            modal.style.display = 'flex';
+            
+            // Initialize carousel for this player
+            initializeCarousel(player.images);
+        }
+
+        closeModalBtn.addEventListener('click', () => {
+            modal.style.display = 'none';
+        });
+
+        window.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                modal.style.display = 'none';
+            }
+        });
+
+        // Carousel functionality
+        function initializeCarousel(images) {
+            const mainImg = document.getElementById('carousel-main-img');
+            const thumbs = document.querySelectorAll('.carousel-thumbs img');
+            let currentIndex = 0;
+
+            // Set up thumbnail click events
+            thumbs.forEach((thumb, index) => {
+                thumb.addEventListener('click', () => {
+                    currentIndex = index;
+                    updateCarousel();
+                });
+            });
+
+            // Navigation arrows
+            document.querySelector('.carousel-arrow.prev').addEventListener('click', () => {
+                currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
+                updateCarousel();
+            });
+
+            document.querySelector('.carousel-arrow.next').addEventListener('click', () => {
+                currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
+                updateCarousel();
+            });
+
+            // Swipe support for mobile
+            let touchStartX = 0;
+            mainImg.addEventListener('touchstart', (e) => {
+                touchStartX = e.changedTouches[0].screenX;
+            });
+
+            mainImg.addEventListener('touchend', (e) => {
+                const touchEndX = e.changedTouches[0].screenX;
+                if (touchStartX - touchEndX > 50) { // Swipe left
+                    currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
+                } else if (touchEndX - touchStartX > 50) { // Swipe right
+                    currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
+                }
+                updateCarousel();
+            });
+
+            function updateCarousel() {
+                // Fade out current image
+                mainImg.style.opacity = 0;
+
+                setTimeout(() => {
+                    // Update main image
+                    mainImg.src = images[currentIndex];
+                    mainImg.style.opacity = 1;
+
+                    // Update active thumbnail
+                    thumbs.forEach((thumb, index) => {
+                        thumb.classList.toggle('active', index === currentIndex);
+                    });
+                }, 300);
+            }
+        }
+    </script>
+</body>
+</html>

volleyball.html

@@ -158,7 +158,7 @@
             <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 section-title">Our Volleyball Teams</h2>
             <p class="text-lightGrey text-base text-center mb-8">Select a team to view players</p>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <a href="#" class="team-tile block">
+                <a href="junior-a-boys.html" class="team-tile block">
                     <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-4">
                         <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                         <path d="M2 17l10 5 10-5"></path>
@@ -223,7 +223,7 @@
                     <h3 class="text-xl font-bold">Senior B Girls</h3>
                 </a>
             </div>
-        </div>
+</div>
     </section>
 
     <!-- Footer -->