Spaces:

Koperization
/

nagas-athletic-chronicles

Running

App Files Files Community

Koperization commited on Oct 21, 2025

Commit

8964482

verified ·

1 Parent(s): 08eb78a

Page Title: NAGAS Basketball – Select a Team

Browse files

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

Header:
- Use the existing NAGAS website header (logo, navigation menu, styles).

Layout:
1. Introduction Section:
- Title: "Welcome to NAGAS Basketball" (36pt, bold, white, centered)
- Subtitle: "Where skill, teamwork, and determination shine" (16pt, light grey, centered)
- Brief introduction (2-3 sentences, 16pt, light grey, centered, max-width: 800px):
"Our basketball program is built on fundamentals, sportsmanship, and a passion for the game. From junior development to competitive senior teams, we strive for excellence on and off the court. Join us in celebrating the spirit of basketball!"

2. Achievements Section:
- Title: "Our Basketball Achievements" (28pt, bold, white, centered)
- Subtitle: "Celebrating success on and off the court" (14pt, light grey, centered)
- 3-column grid of achievement cards (1 column on mobile).
- Achievement Card Design:
- Background: #1E1E1E
- Border: 1px solid #008080
- Rounded Corners: 6px
- Padding: 20px
- Content:
- Achievement title (18pt, bold, white)
- Year (14pt, teal)
- Description (14pt, light grey)
- Example basketball achievements:
- "PPAC Champions 2024" (Year: 2024, Description: "Senior A Boys team won the PPAC Basketball Championship.")
- "Sportsmanship Award 2023" (Year: 2023, Description: "Junior A Girls recognized for outstanding teamwork and fair play.")
- "Community Engagement 2022" (Year: 2022, Description: "Hosted free basketball camps for 150+ local youth.")

3. Team Selection Section:
- Title: "Our Basketball Teams" (28pt, bold, white, centered)
- Subtitle: "Select a team to view players" (16pt, light grey, centered)
- 2-column grid of 8 rectangular team tiles (1 column on mobile).
- Tile Design:
- Background: #1E1E1E
- Border: 1px solid #008080
- Rounded Corners: 6px
- Padding: 20px
- Hover Effect: Lift by 5px, box-shadow: 0 6px 12px rgba(0, 128, 128, 0.3)
- Content:
- Basketball SVG icon (white with teal outline)
- Team name (18pt, bold, white, centered)
- Team Tiles:
- Junior A Boys (basketball icon)
- Junior B Boys (basketball icon)
- Junior A Girls (basketball icon)
- Junior B Girls (basketball icon)
- Senior A Boys (basketball icon)
- Senior B Boys (basketball icon)
- Senior A Girls (basketball icon)
- Senior B Girls (basketball icon)

Spacing:
- 40px margin-bottom between sections
- 24px gap between achievement cards and team tiles
- 30px padding around each section

Interactivity:
- Hover effect for achievement cards and team tiles (0.3s transition, lift by 5px, box-shadow).

Navigation:
- Link each team tile to its respective basketball team page.

Responsive Design:
- Stack all sections and cards vertically on mobile.
- Set team tiles and achievement cards to 100% width on mobile.

Accessibility:
- Add alt text to all icons (e.g., "Junior A Boys Basketball Team").
- Ensure text and icons meet WCAG contrast standards.

Custom CSS:
/* Shared card styles */
.achievement-card, .team-tile {
transition: all 0.3s ease;
border: 1px solid #008080;
border-radius: 6px;
background-color: #1E1E1E;
padding: 20px;
text-align: center;
color: white;
}

/* Hover effects */
.achievement-card:hover, .team-tile: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 {
/* Use existing site’s header/footer CSS */
width: 100%;
padding: 20px;
}

Files changed (1) hide show

basketball.html +130 -443

basketball.html CHANGED Viewed

@@ -3,19 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Basketball - NAGAS - Northbridge Athletic Groups and Sports</title>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Open+Sans:wght@400;600&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: '#5ec0cc',
-                        secondary: '#5ECCA2',
                         dark: '#121212',
-                        darker: '#0a0a0a'
                     }
                 }
             }
@@ -23,12 +22,33 @@
     </script>
     <style>
         body {
-            font-family: 'Open Sans', sans-serif;
             background-color: #121212;
-            color: #ffffff;
         }
         h1, h2, h3, h4, h5, h6 {
-            font-family: 'Montserrat', sans-serif;
         }
         .hero-image {
             position: absolute;
@@ -44,8 +64,8 @@
             transition: all 0.3s ease;
         }
         .tab-active {
-            background-color: #5ec0cc;
-            color: #0a0a0a;
         }
         .schedule-item:hover {
             background-color: #1e1e1e;
@@ -62,9 +82,9 @@
         <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-[#5ec0cc]">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>
@@ -72,8 +92,8 @@
                 <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>
@@ -84,7 +104,7 @@
         <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-[#5ec0cc]">NAGAS</span><span class="text-white">ATHLETICS</span></span>
             </div>
             <button id="menu-close" class="text-white">
                 <i data-feather="x"></i>
@@ -100,9 +120,10 @@
             <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> >
@@ -111,433 +132,113 @@
         </div>
     </div>
-    <!-- Hero Section -->
-    <section class="relative h-96 flex items-center justify-center overflow-hidden">
-        <img src="http://static.photos/sport/1200x630/1" alt="NAGAS Basketball Action" class="hero-image">
-        <div class="absolute inset-0 bg-black bg-opacity-70"></div>
-        <div class="relative z-10 text-center px-4">
-            <h1 class="text-4xl md:text-5xl font-bold text-primary mb-2">NAGAS BASKETBALL</h1>
-            <p class="text-xl mb-4">Juniors & Seniors Teams</p>
-            <div class="inline-block bg-secondary text-dark py-1 px-4 rounded-full text-sm">2025-2026 Season</div>
-        </div>
-    </section>
-    <!-- Team Introduction -->
-    <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">ABOUT OUR PROGRAM</h2>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
-                <div>
-                    <p class="mb-4">Our basketball teams compete in the ISSAPP league, consistently ranking among the top contenders. We emphasize fundamentals, teamwork, and competitive spirit to develop well-rounded athletes.</p>
-                    <p class="mb-6">With state-of-the-art facilities and experienced coaching staff, our program prepares players for high-level competition while fostering personal growth and leadership skills.</p>
-                </div>
-                <div class="bg-[#1e1e1e] p-6 rounded-lg">
-                    <div class="flex items-center">
-                        <img src="http://static.photos/people/100x100/22" alt="Sarith Meng" class="w-16 h-16 rounded-full mr-4">
-                        <div>
-                            <h3 class="text-xl font-bold">Sarith Meng</h3>
-                            <p class="text-secondary">Head Basketball Coach</p>
-                        </div>
-                    </div>
-                    <p class="mt-4">Former national team player with over 10 years of coaching experience. Focuses on fundamentals and team chemistry.</p>
-                </div>
-            </div>
         </div>
     </section>
-    <!-- Team Structure Section -->
-    <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">OUR TEAMS</h2>
-            <!-- Tabs -->
-            <div class="flex mb-8 border-b border-[#2e2e2e]">
-                <button id="juniorsTab" class="tab-active py-2 px-6 font-bold rounded-t">Juniors (Grades 6-8)</button>
-                <button id="seniorsTab" class="py-2 px-6 font-bold rounded-t">Seniors (Grades 9-12)</button>
-            </div>
-            <!-- Juniors Content -->
-            <div id="juniorsContent">
-                <div class="mb-12">
-                    <h3 class="text-2xl font-bold mb-6 text-secondary">Team A Roster</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        <!-- Player 1 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/1" alt="Pisey Ching" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Pisey Ching</h4>
-                                <p class="text-secondary">Position: Guard</p>
-                                <p>Height: 5'6"</p>
-                            </div>
-                        </div>
-                        <!-- Player 2 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/2" alt="Eung Sen Samnorb (Somnorb)" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Eung Sen Samnorb (Somnorb)</h4>
-                                <p class="text-secondary">Position: Forward</p>
-                                <p>Height: 5'8"</p>
-                            </div>
-                        </div>
-                        <!-- Player 3 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/3" alt="Yuan Yi-Hua (Allan)" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Yuan Yi-Hua (Allan)</h4>
-                                <p class="text-secondary">Position: Center</p>
-                                <p>Height: 5'10"</p>
-                            </div>
-                        </div>
-                        <!-- Player 4 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/4" alt="Nie Zifeng" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Nie Zifeng</h4>
-                                <p class="text-secondary">Position: Guard</p>
-                                <p>Height: 5'5"</p>
-                            </div>
-                        </div>
-                        <!-- Player 5 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/5" alt="Danh Konvisoth (Visoth)" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Danh Konvisoth (Visoth)</h4>
-                                <p class="text-secondary">Position: Forward</p>
-                                <p>Height: 5'7"</p>
-                            </div>
-                        </div>
-                        <!-- Player 6 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/6" alt="Prince" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Prince</h4>
-                                <p class="text-secondary">Position: Guard</p>
-                                <p>Height: 5'4"</p>
-                            </div>
-                        </div>
-                        <!-- Player 7 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/7" alt="Te Ronald Vattanac (Ronald)" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Te Ronald Vattanac (Ronald)</h4>
-                                <p class="text-secondary">Position: Center</p>
-                                <p>Height: 5'9"</p>
-                            </div>
-                        </div>
-                    </div>
                 </div>
-                <div>
-                    <h3 class="text-2xl font-bold mb-6 text-secondary">Team B Roster</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        <!-- Player 1 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/8" alt="Pheng Aaron" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Pheng Aaron</h4>
-                                <p class="text-secondary">Position: Guard</p>
-                                <p>Height: 5'3"</p>
-                            </div>
-                        </div>
-                        <!-- Player 2 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/9" alt="Reth Rithisak" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Reth Rithisak</h4>
-                                <p class="text-secondary">Position: Forward</p>
-                                <p>Height: 5'6"</p>
-                            </div>
-                        </div>
-                        <!-- Player 3 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/10" alt="Hav Chansabrina (Sabrina)" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Hav Chansabrina (Sabrina)</h4>
-                                <p class="text-secondary">Position: Guard</p>
-                                <p>Height: 5'2"</p>
-                            </div>
-                        </div>
-                        <!-- Player 4 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/11" alt="Nlron" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Nlron</h4>
-                                <p class="text-secondary">Position: Forward</p>
-                                <p>Height: 5'5"</p>
-                            </div>
-                        </div>
-                        <!-- Player 5 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/12" alt="Ly Sovita" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Ly Sovita</h4>
-                                <p class="text-secondary">Position: Center</p>
-                                <p>Height: 5'7"</p>
-                            </div>
-                        </div>
-                        <!-- Player 6 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/13" alt="Zhang Zhiling (Zhilling)" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Zhang Zhiling (Zhilling)</h4>
-                                <p class="text-secondary">Position: Guard</p>
-                                <p>Height: 5'3"</p>
-                            </div>
-                        </div>
-                        <!-- Player 7 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/14" alt="Lina Jin Xi" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Lina Jin Xi</h4>
-                                <p class="text-secondary">Position: Forward</p>
-                                <p>Height: 5'4"</p>
-                            </div>
-                        </div>
-                        <!-- Player 8 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/15" alt="Jing Yuan (Xing Xing)" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Jing Yuan (Xing Xing)</h4>
-                                <p class="text-secondary">Position: Guard</p>
-                                <p>Height: 5'2"</p>
-                            </div>
-                        </div>
-                        <!-- Player 9 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/16" alt="Francesca Dean" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">Francesca Dean</h4>
-                                <p class="text-secondary">Position: Forward</p>
-                                <p>Height: 5'5"</p>
-                            </div>
-                        </div>
-                        <!-- Player 10 -->
-                        <div class="player-card bg-[#1e1e1e] rounded-lg overflow-hidden">
-                            <img src="http://static.photos/people/320x240/17" alt="He Jiajing" class="w-full h-48 object-cover">
-                            <div class="p-4">
-                                <h4 class="font-bold text-lg">He Jiajing</h4>
-                                <p class="text-secondary">Position: Center</p>
-                                <p>Height: 5'6"</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- Seniors Content -->
-            <div id="seniorsContent" class="hidden">
-                <div class="mb-12">
-                    <h3 class="text-2xl font-bold mb-6 text-secondary">Team A Roster</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        <div class="bg-[#1e1e1e] rounded-lg p-8 text-center">
-                            <i data-feather="users" class="text-primary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
-                            <p>Roster coming soon for 2025-2026 season</p>
-                        </div>
-                    </div>
                 </div>
-                <div>
-                    <h3 class="text-2xl font-bold mb-6 text-secondary">Team B Roster</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        <div class="bg-[#1e1e1e] rounded-lg p-8 text-center">
-                            <i data-feather="users" class="text-primary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
-                            <p>Roster coming soon for 2025-2026 season</p>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
     </section>
-    <!-- Schedule Section -->
-    <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">2025-2026 SCHEDULE</h2>
-            <div class="mb-12">
-                <h3 class="text-2xl font-bold mb-6 text-secondary">Upcoming Games</h3>
-                <div class="space-y-4">
-                    <div class="schedule-item bg-[#1e1e1e] p-4 rounded-lg flex flex-col md:flex-row justify-between items-start md:items-center">
-                        <div>
-                            <p class="text-secondary">June 15, 2025 - 3:00 PM</p>
-                            <p class="font-bold">NAGAS vs. ISSPP</p>
-                            <p>NAGAS Sports Hall</p>
-                        </div>
-                        <button class="mt-2 md:mt-0 bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button>
-                    </div>
-                    <div class="schedule-item bg-[#1e1e1e] p-4 rounded-lg flex flex-col md:flex-row justify-between items-start md:items-center">
-                        <div>
-                            <p class="text-secondary">June 22, 2025 - 5:00 PM</p>
-                            <p class="font-bold">NAGAS vs. NIST</p>
-                            <p>Away - NIST Gymnasium</p>
-                        </div>
-                        <button class="mt-2 md:mt-0 bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button>
-                    </div>
-                    <div class="schedule-item bg-[#1e1e1e] p-4 rounded-lg flex flex-col md:flex-row justify-between items-start md:items-center">
-                        <div>
-                            <p class="text-secondary">June 29, 2025 - 2:00 PM</p>
-                            <p class="font-bold">NAGAS vs. NISB</p>
-                            <p>NAGAS Sports Hall</p>
-                        </div>
-                        <button class="mt-2 md:mt-0 bg-primary text-dark font-bold py-2 px-4 rounded hover:bg-[#4ab3c6] transition">Add to Calendar</button>
-                    </div>
-                </div>
-            </div>
-            <div>
-                <h3 class="text-2xl font-bold mb-6 text-secondary">Recent Results</h3>
-                <div class="space-y-4">
-                    <div class="bg-[#1e1e1e] p-4 rounded-lg">
-                        <p class="font-bold">Basketball - Juniors A</p>
-                        <p>NAGAS 78 - 65 NISB <span class="text-green-500">W</span></p>
-                    </div>
-                    <div class="bg-[#1e1e1e] p-4 rounded-lg">
-                        <p class="font-bold">Basketball - Juniors B</p>
-                        <p>NAGAS 62 - 68 NIST <span class="text-red-500">L</span></p>
-                    </div>
-                </div>
-            </div>
-            <div class="mt-8 text-center">
-                <a href="schedule.html#basketball" class="inline-block bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">Full Schedule</a>
-            </div>
-        </div>
-    </section>
-    <!-- Coaching Staff -->
-    <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">MEET THE COACHES</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-[#1e1e1e] rounded-lg overflow-hidden">
-                    <div class="md:flex">
-                        <img src="http://static.photos/people/200x200/22" alt="Sarith Meng" 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">Head Basketball Coach</p>
-                            <p>Former national team player with over 10 years of coaching experience.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-[#1e1e1e] rounded-lg overflow-hidden">
-                    <div class="md:flex">
-                        <img src="http://static.photos/people/200x200/24" alt="Assistant Coach" class="w-full md:w-32 h-32 object-cover">
-                        <div class="p-6">
-                            <h3 class="text-xl font-bold">Kosal Khemarak</h3>
-                            <p class="text-secondary mb-2">Assistant Coach</p>
-                            <p>Former professional player, specializes in defensive strategies.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-[#1e1e1e] rounded-lg overflow-hidden">
-                    <div class="md:flex">
-                        <img src="http://static.photos/people/200x200/25" alt="Assistant Coach" class="w-full md:w-32 h-32 object-cover">
-                        <div class="p-6">
-                            <h3 class="text-xl font-bold">Visal Sreytouch</h3>
-                            <p class="text-secondary mb-2">Assistant Coach</p>
-                            <p>Youth development specialist with focus on fundamentals.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="mt-8 text-center">
-                <a href="mailto:basketball-coaches@nagas.edu.kh" class="inline-block bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">Contact Coaches</a>
-            </div>
-        </div>
-    </section>
-    <!-- Photo Gallery -->
-    <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">ACTION SHOTS</h2>
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                <div class="gallery-item">
-                    <img src="http://static.photos/sport/640x360/1" alt="Game Action" class="w-full h-48 object-cover rounded">
-                </div>
-                <div class="gallery-item">
-                    <img src="http://static.photos/sport/640x360/2" alt="Team Huddle" class="w-full h-48 object-cover rounded">
-                </div>
-                <div class="gallery-item">
-                    <img src="http://static.photos/sport/640x360/3" alt="Player Celebration" class="w-full h-48 object-cover rounded">
-                </div>
-                <div class="gallery-item">
-                    <img src="http://static.photos/sport/640x360/4" alt="Dunk" class="w-full h-48 object-cover rounded">
-                </div>
-                <div class="gallery-item">
-                    <img src="http://static.photos/sport/640x360/5" alt="Free Throw" class="w-full h-48 object-cover rounded">
-                </div>
-                <div class="gallery-item">
-                    <img src="http://static.photos/sport/640x360/6" alt="Defensive Play" class="w-full h-48 object-cover rounded">
-                </div>
-                <div class="gallery-item">
-                    <img src="http://static.photos/sport/640x360/7" alt="Team Photo" class="w-full h-48 object-cover rounded">
-                </div>
-                <div class="gallery-item">
-                    <img src="http://static.photos/sport/640x360/8" alt="Victory Celebration" class="w-full h-48 object-cover rounded">
-                </div>
-            </div>
-            <div class="mt-8 text-center">
-                <button class="bg-primary text-dark font-bold py-2 px-6 rounded hover:bg-[#4ab3c6] transition">View All Photos</button>
-            </div>
-        </div>
-    </section>
-    <!-- Achievements -->
-    <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">TEAM HONORS</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <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">2024 ISSAPP Finalists</h3>
-                    <p>Reached championship finals with outstanding team performance</p>
-                </div>
-                <div class="bg-[#1e1e1e] p-6 rounded-lg text-center">
-                    <i data-feather="trending-up" class="text-secondary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
-                    <h3 class="text-xl font-bold mb-2">Most Improved Team 2023</h3>
-                    <p>Significant performance improvement across all metrics</p>
-                </div>
-                <div class="bg-[#1e1e1e] p-6 rounded-lg text-center">
-                    <i data-feather="user" class="text-secondary mx-auto mb-4" style="width: 48px; height: 48px;"></i>
-                    <h3 class="text-xl font-bold mb-2">Individual Awards</h3>
-                    <p>Multiple players recognized for outstanding performance</p>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Tryout Information -->
-    <section class="py-16">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-primary mb-8">JOIN THE TEAM</h2>
-            <div class="bg-[#1e1e1e] rounded-lg p-8 max-w-3xl mx-auto text-center">
-                <p class="text-xl mb-4">Tryouts for 2026-2027 season: <span class="text-secondary">September 10-12, 2025</span></p>
-                <p class="mb-6">Open to all NISC students Grades 6-12</p>
-                <p class="mb-8">Contact Coach Sarith Meng for details</p>
-                <a href="get-involved.html#tryouts" class="inline-block bg-primary text-dark font-bold py-3 px-8 rounded hover:bg-[#4ab3c6] transition">Register Now</a>
             </div>
         </div>
     </section>
@@ -564,7 +265,7 @@
                         </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">
@@ -581,24 +282,10 @@
         </div>
     </footer>
     <script>
         feather.replace();
-        // Tab functionality
-        document.getElementById('juniorsTab').addEventListener('click', function() {
-            this.classList.add('tab-active');
-            document.getElementById('seniorsTab').classList.remove('tab-active');
-            document.getElementById('juniorsContent').classList.remove('hidden');
-            document.getElementById('seniorsContent').classList.add('hidden');
-        });
-        document.getElementById('seniorsTab').addEventListener('click', function() {
-            this.classList.add('tab-active');
-            document.getElementById('juniorsTab').classList.remove('tab-active');
-            document.getElementById('seniorsContent').classList.remove('hidden');
-            document.getElementById('juniorsContent').classList.add('hidden');
-        });
         // Mobile menu toggle
         document.getElementById('menu-toggle').addEventListener('click', function() {
             document.getElementById('mobile-menu').classList.remove('hidden');

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NAGAS Basketball – Select a Team</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>
         tailwind.config = {
             theme: {
                 extend: {
                     colors: {
+                        primary: '#008080',
                         dark: '#121212',
+                        darker: '#0a0a0a',
+                        card: '#1E1E1E'
                     }
                 }
             }
     </script>
     <style>
         body {
+            font-family: 'Montserrat', sans-serif;
             background-color: #121212;
+            color: #CCCCCC;
         }
         h1, h2, h3, h4, h5, h6 {
+            color: #FFFFFF;
+            font-weight: 700;
+        }
+        .achievement-card, .team-tile {
+            transition: all 0.3s ease;
+            border: 1px solid #008080;
+            border-radius: 6px;
+            background-color: #1E1E1E;
+            padding: 20px;
+            text-align: center;
+            color: white;
+        }
+        .achievement-card:hover, .team-tile:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px rgba(0, 128, 128, 0.3);
+        }
+        .section-title {
+            margin-bottom: 20px;
+        }
+        header, footer {
+            width: 100%;
+            padding: 20px;
         }
         .hero-image {
             position: absolute;
             transition: all 0.3s ease;
         }
         .tab-active {
+            background-color: #008080;
+            color: #ffffff;
         }
         .schedule-item:hover {
             background-color: #1e1e1e;
         <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="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>
         <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>
             <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> >
         </div>
     </div>
+    <!-- Introduction Section -->
+    <section class="py-16 text-center px-4" style="padding: 60px 20px;">
+        <h1 class="text-4xl md:text-5xl font-bold mb-4">Welcome to NAGAS Basketball</h1>
+        <p class="text-lg text-gray-300 mb-6">Where skill, teamwork, and determination shine</p>
+        <div class="max-w-3xl mx-auto">
+            <p class="text-base text-gray-300">
+                Our basketball program is built on fundamentals, sportsmanship, and a passion for the game.
+                From junior development to competitive senior teams, we strive for excellence on and off the court.
+                Join us in celebrating the spirit of basketball!
+            </p>
         </div>
     </section>
+    <!-- Achievements Section -->
+    <section class="py-16 bg-[#0a0a0a] px-4" style="padding: 60px 20px;">
+        <div class="container mx-auto text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Basketball Achievements</h2>
+            <p class="text-gray-300 mb-12">Celebrating success on and off the court</p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <!-- Achievement 1 -->
+                <div class="achievement-card">
+                    <h3 class="text-xl font-bold mb-2">PPAC Champions 2024</h3>
+                    <p class="text-primary text-sm mb-2">2024</p>
+                    <p class="text-gray-300 text-sm">Senior A Boys team won the PPAC Basketball Championship.</p>
                 </div>
+                <!-- Achievement 2 -->
+                <div class="achievement-card">
+                    <h3 class="text-xl font-bold mb-2">Sportsmanship Award 2023</h3>
+                    <p class="text-primary text-sm mb-2">2023</p>
+                    <p class="text-gray-300 text-sm">Junior A Girls recognized for outstanding teamwork and fair play.</p>
                 </div>
+                <!-- Achievement 3 -->
+                <div class="achievement-card">
+                    <h3 class="text-xl font-bold mb-2">Community Engagement 2022</h3>
+                    <p class="text-primary text-sm mb-2">2022</p>
+                    <p class="text-gray-300 text-sm">Hosted free basketball camps for 150+ local youth.</p>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Team Selection Section -->
+    <section class="py-16 px-4" style="padding: 60px 20px;">
+        <div class="container mx-auto text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Basketball Teams</h2>
+            <p class="text-gray-300 mb-12">Select a team to view players</p>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Team Tiles -->
+                <a href="basketball-junior-a-boys.html" class="team-tile block">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <h3 class="text-xl font-bold">Junior A Boys</h3>
+                </a>
+                <a href="basketball-junior-b-boys.html" class="team-tile block">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <h3 class="text-xl font-bold">Junior B Boys</h3>
+                </a>
+                <a href="basketball-junior-a-girls.html" class="team-tile block">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <h3 class="text-xl font-bold">Junior A Girls</h3>
+                </a>
+                <a href="basketball-junior-b-girls.html" class="team-tile block">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <h3 class="text-xl font-bold">Junior B Girls</h3>
+                </a>
+                <a href="basketball-senior-a-boys.html" class="team-tile block">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <h3 class="text-xl font-bold">Senior A Boys</h3>
+                </a>
+                <a href="basketball-senior-b-boys.html" class="team-tile block">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <h3 class="text-xl font-bold">Senior B Boys</h3>
+                </a>
+                <a href="basketball-senior-a-girls.html" class="team-tile block">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <h3 class="text-xl font-bold">Senior A Girls</h3>
+                </a>
+                <a href="basketball-senior-b-girls.html" class="team-tile block">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <h3 class="text-xl font-bold">Senior B Girls</h3>
+                </a>
             </div>
         </div>
     </section>
                         </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">
         </div>
     </footer>
+    <script src="https://unpkg.com/feather-icons"></script>
     <script>
         feather.replace();
         // Mobile menu toggle
         document.getElementById('menu-toggle').addEventListener('click', function() {
             document.getElementById('mobile-menu').classList.remove('hidden');