Page Title: Volleyball (e.g., "Junior A Boys")

Design Style:
- Theme: Dark mode
- Background Color: #121212
- Accent Color: #008080 (teal)
- Text Color: White (#FFFFFF) for headings, Light Grey (#CCCCCC) for subtitles
- Font: Montserrat (bold for headings, regular for body text)

Layout:
- Create a 2-column grid of player cards (responsive: 1 column on mobile).
- Player Card Design:
- Background: #1E1E1E
- Border: 1px solid #008080
- Rounded Corners: 6px
- Padding: 16px
- Hover Effect: Lift card by 5px, change box-shadow to 0 6px 12px rgba(0, 128, 128, 0.3)
- Each card should include:
- Player photo (high-quality, square, top-aligned)
- Large jersey number (32pt, bold, teal, centered)
- Player name (18pt, white, centered below the number)

Content:
- Page Title: "[Team Name]" (36pt, bold, white, centered at the top)
- Back Button: Teal icon in the top-left corner (links to Team Selection Page)
- Player Cards:
- Example players (replace with actual data):
- #12, John Doe
- #24, Jane Smith
- #07, Alex Lee
- #33, Mia Brown

Spacing:
- 24px gap between cards
- 30px padding around the entire grid

Interactivity:
- Add a hover effect to each player card: lift by 5px and apply the box-shadow transition over 0.3 seconds.

Navigation:
- Back button links to the Team Selection Page.

Responsive Design:
- On mobile, stack player cards vertically (1 column) and set card width to 100%.

Accessibility:
- Add alt text to all player photos (e.g., "John Doe, Junior A Boys").
- Ensure text and photos have sufficient contrast for readability.

Custom CSS:
.player-card {
transition: all 0.3s ease;
border: 1px solid #008080;
border-radius: 6px;
background-color: #1E1E1E;
padding: 16px;
text-align: center;
color: white;
}

.player-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 128, 128, 0.3);
}

Header/Footer:
- Include a minimalist header with the NAGAS logo and a footer with copyright information.

junior-a-boys-volleyball.html

@@ -0,0 +1,174 @@
+<!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: {
+                        dark: '#121212',
+                        darker: '#0a0a0a',
+                        accent: '#008080',
+                        card: '#1E1E1E'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #121212;
+            color: #FFFFFF;
+        }
+        
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: 800;
+        }
+        
+        .player-card {
+            transition: all 0.3s ease;
+            border: 1px solid #008080;
+            border-radius: 6px;
+            background-color: #1E1E1E;
+            padding: 16px;
+            text-align: center;
+            color: white;
+        }
+
+        .player-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px rgba(0, 128, 128, 0.3);
+        }
+        
+        .hero-image {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            z-index: -1;
+        }
+    </style>
+</head>
+<body class="bg-dark text-white">
+    <!-- Header -->
+    <header class="fixed w-full z-50 bg-darker border-b border-accent">
+        <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-accent 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-accent">Home</a>
+                <a href="teams.html" class="hover:text-accent">Teams</a>
+                <a href="schedule.html" class="hover:text-accent">Schedule</a>
+                <a href="news.html" class="hover:text-accent">News</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-darker z-50 hidden">
+        <div class="flex justify-between items-center p-4 border-b border-accent">
+            <div class="flex items-center">
+                <div class="w-10 h-10 bg-accent 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-accent border-b border-[#2e2e2e]">Home</a>
+            <a href="teams.html" class="block py-3 hover:text-accent border-b border-[#2e2e2e]">Teams</a>
+            <a href="schedule.html" class="block py-3 hover:text-accent border-b border-[#2e2e2e]">Schedule</a>
+            <a href="news.html" class="block py-3 hover:text-accent border-b border-[#2e2e2e]">News</a>
+        </nav>
+    </div>
+
+    <!-- Main Content -->
+    <main class="pt-20 pb-16">
+        <!-- Back Button and Title -->
+        <div class="container mx-auto px-4 py-8">
+            <div class="flex items-center mb-8">
+                <a href="teams.html" class="mr-4 text-accent hover:text-white">
+                    <i data-feather="arrow-left" class="w-8 h-8"></i>
+                </a>
+                <h1 class="text-3xl md:text-4xl font-bold">Junior A Boys</h1>
+            </div>
+
+            <!-- Player Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
+                <!-- Player Card 1 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x320/1" alt="John Doe, Junior A Boys" class="w-full h-64 object-cover rounded mb-4">
+                    <div class="text-4xl font-bold text-accent mb-2">#12</div>
+                    <h3 class="text-xl font-semibold">John Doe</h3>
+                </div>
+
+                <!-- Player Card 2 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x320/2" alt="Jane Smith, Junior A Boys" class="w-full h-64 object-cover rounded mb-4">
+                    <div class="text-4xl font-bold text-accent mb-2">#24</div>
+                    <h3 class="text-xl font-semibold">Jane Smith</h3>
+                </div>
+
+                <!-- Player Card 3 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x320/3" alt="Alex Lee, Junior A Boys" class="w-full h-64 object-cover rounded mb-4">
+                    <div class="text-4xl font-bold text-accent mb-2">#07</div>
+                    <h3 class="text-xl font-semibold">Alex Lee</h3>
+                </div>
+
+                <!-- Player Card 4 -->
+                <div class="player-card">
+                    <img src="http://static.photos/people/320x320/4" alt="Mia Brown, Junior A Boys" class="w-full h-64 object-cover rounded mb-4">
+                    <div class="text-4xl font-bold text-accent mb-2">#33</div>
+                    <h3 class="text-xl font-semibold">Mia Brown</h3>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-darker py-8 border-t border-[#2e2e2e]">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <div class="flex items-center">
+                        <div class="w-8 h-8 bg-accent rounded-full mr-2"></div>
+                        <span class="text-lg font-bold"><span class="text-[#008080]">NAGAS</span> ATHLETICS</span>
+                    </div>
+                </div>
+                <div class="text-center md:text-right">
+                    <p>&copy; 2023 NAGAS - Northbridge Athletic Groups and Sports. All rights reserved.</p>
+                </div>
+            </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');
+        });
+    </script>
+</body>
+</html>

volleyball.html

@@ -117,8 +117,7 @@
             </nav>
         </div>
     </div>
-
-    <!-- Hero Section -->
+<!-- Hero Section -->
     <section class="relative h-96 flex items-center justify-center overflow-hidden">
         <img src="http://static.photos/sport/1200x630/2" alt="NAGAS Volleyball Action" class="hero-image">
         <div class="absolute inset-0 bg-black bg-opacity-70"></div>
@@ -182,8 +181,7 @@
                                 <p>Number: 1</p>
                             </div>
                         </div>
-                        
-                        <!-- Player 2 -->
+<!-- Player 2 -->
                         <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
                             <img src="http://static.photos/people/320x240/6" alt="Sopharoth Chea" class="w-full h-48 object-cover">
                             <div class="p-4">
@@ -449,7 +447,7 @@
                             <p>Roster coming soon for 2025-2026 season</p>
                         </div>
                     </div>
-                </div>
+</div>
             </div>
         </div>
     </section>
@@ -603,8 +601,7 @@
                     <h3 class="text-xl font-bold mb-2">2024 ISSAPP Champions</h3>
                     <p>Defeated NIST Thunder 3-1 in championship final</p>
                 </div>
-                
-                <div class="bg-[#1e1e1e] p-6 rounded-lg text-center">
+<div class="bg-[#1e1e1e] p-6 rounded-lg text-center">
                     <i data-feather="award" class="text-secondary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
                     <h3 class="text-xl font-bold mb-2">2023 ASAC Finalists</h3>
                     <p>Reached regional championship finals</p>
@@ -648,7 +645,7 @@
                     <h4 class="font-bold mb-2">Kills</h4>
                     <p class="text-primary font-bold">Sethean Thay - 245</p>
                 </div>
-                <div class="stat-card bg-[#1e1e1e] p-6 rounded-lg">
+<div class="stat-card bg-[#1e1e1e] p-6 rounded-lg">
                     <h4 class="font-bold mb-2">Aces</h4>
                     <p class="text-primary font-bold">Sopharoth Chea - 38</p>
                 </div>
@@ -719,7 +716,6 @@
             </div>
         </div>
     </footer>
-
     <script>
         feather.replace();