Page Title: Junior B 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-b-boys.html

@@ -0,0 +1,535 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Junior B Boys – Volleyball</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) scale(1.03);
+            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 */
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+        .modal.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        .modal-content {
+            background: #1E1E1E;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 600px;
+            padding: 20px;
+            transform: translateY(20px);
+            transition: transform 0.3s ease;
+        }
+        .modal.active .modal-content {
+            transform: translateY(0);
+        }
+    </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 B 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-lightGrey">
+            <i data-feather="arrow-left" class="mr-2"></i> Back to Volleyball Teams
+        </a>
+    </div>
+
+    <!-- Search Bar -->
+    <div class="container mx-auto px-4 py-6">
+        <input type="text" id="search-bar" placeholder="Search players..." class="w-full p-3 rounded bg-[#1E1E1E] border border-[#008080] text-white focus:outline-none focus:ring-2 focus:ring-[#008080]">
+    </div>
+
+    <!-- Player Grid -->
+    <section class="py-16 px-4">
+        <div class="container mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4 section-title">Junior B Boys Roster</h2>
+            <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">
+            <div class="flex justify-between items-center mb-4">
+                <h3 id="modal-player-name" class="text-2xl font-bold"></h3>
+                <button id="close-modal" class="text-white text-2xl">&times;</button>
+            </div>
+            <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">
+                <p id="modal-player-position" class="text-primary"></p>
+                <p id="modal-player-bio" class="text-lightGrey mt-2"></p>
+            </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');
+        });
+
+        // Player data
+        const players = [
+            {
+                id: 1,
+                name: "Alex Morgan",
+                position: "Setter",
+                bio: "Alex is a skilled setter with excellent court vision and leadership qualities. He has been with the team for 2 years and consistently improves his technique.",
+                images: [
+                    "http://static.photos/people/320x240/1",
+                    "http://static.photos/sport/320x240/2",
+                    "http://static.photos/education/320x240/3"
+                ]
+            },
+            {
+                id: 2,
+                name: "James Wilson",
+                position: "Outside Hitter",
+                bio: "James brings powerful spikes and strong defensive skills to the team. His energy and determination inspire teammates on the court.",
+                images: [
+                    "http://static.photos/people/320x240/4",
+                    "http://static.photos/sport/320x240/5",
+                    "http://static.photos/education/320x240/6"
+                ]
+            },
+            {
+                id: 3,
+                name: "Michael Chen",
+                position: "Middle Blocker",
+                bio: "Michael's height and blocking ability make him a formidable presence at the net. He's also known for his quick reflexes and teamwork.",
+                images: [
+                    "http://static.photos/people/320x240/7",
+                    "http://static.photos/sport/320x240/8",
+                    "http://static.photos/education/320x240/9"
+                ]
+            },
+            {
+                id: 4,
+                name: "David Rodriguez",
+                position: "Libero",
+                bio: "David's defensive skills and quick movements make him an excellent libero. He's always ready to make spectacular saves.",
+                images: [
+                    "http://static.photos/people/320x240/10",
+                    "http://static.photos/sport/320x240/11",
+                    "http://static.photos/education/320x240/12"
+                ]
+            },
+            {
+                id: 5,
+                name: "Robert Johnson",
+                position: "Opposite Hitter",
+                bio: "Robert's versatility and powerful attacks from the back row make him a valuable asset to the team.",
+                images: [
+                    "http://static.photos/people/320x240/13",
+                    "http://static.photos/sport/320x240/14",
+                    "http://static.photos/education/320x240/15"
+                ]
+            },
+            {
+                id: 6,
+                name: "Thomas Kim",
+                position: "Outside Hitter",
+                bio: "Thomas combines athleticism with technical skill, making him a consistent scorer for the team.",
+                images: [
+                    "http://static.photos/people/320x240/16",
+                    "http://static.photos/sport/320x240/17",
+                    "http://static.photos/education/320x240/18"
+                ]
+            }
+        ];
+
+        // Render player cards
+        function renderPlayers(playerList) {
+            const grid = document.getElementById('player-grid');
+            grid.innerHTML = '';
+            
+            playerList.forEach((player, index) => {
+                const card = document.createElement('div');
+                card.className = 'player-card';
+                card.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
+                setTimeout(() => {
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                }, index * 100);
+                
+                card.addEventListener('click', () => openModal(player));
+                grid.appendChild(card);
+            });
+        }
+
+        // Search functionality
+        document.getElementById('search-bar').addEventListener('input', function(e) {
+            const searchTerm = e.target.value.toLowerCase();
+            const filteredPlayers = players.filter(player => 
+                player.name.toLowerCase().includes(searchTerm)
+            );
+            renderPlayers(filteredPlayers);
+        });
+
+        // Modal functionality
+        const modal = document.getElementById('profile-modal');
+        const closeModalBtn = document.getElementById('close-modal');
+
+        function openModal(player) {
+            document.getElementById('modal-player-name').textContent = player.name;
+            document.getElementById('modal-player-position').textContent = player.position;
+            document.getElementById('modal-player-bio').textContent = player.bio;
+            
+            // Set main image
+            document.getElementById('carousel-main-img').src = player.images[0];
+            
+            // Set thumbnails
+            const thumbsContainer = document.getElementById('carousel-thumbs');
+            thumbsContainer.innerHTML = '';
+            player.images.forEach((img, index) => {
+                const thumb = document.createElement('img');
+                thumb.src = img;
+                thumb.alt = `Thumbnail ${index + 1}`;
+                if (index === 0) thumb.classList.add('active');
+                thumb.addEventListener('click', () => updateCarousel(player.images, index));
+                thumbsContainer.appendChild(thumb);
+            });
+            
+            modal.classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeModal() {
+            modal.classList.remove('active');
+            document.body.style.overflow = 'auto';
+        }
+
+        closeModalBtn.addEventListener('click', closeModal);
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) closeModal();
+        });
+
+        // Carousel functionality
+        function updateCarousel(images, currentIndex) {
+            const mainImg = document.getElementById('carousel-main-img');
+            const thumbs = document.querySelectorAll('.carousel-thumbs img');
+            
+            // 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);
+        }
+
+        // Carousel navigation
+        document.querySelector('.carousel-arrow.prev').addEventListener('click', () => {
+            const thumbs = document.querySelectorAll('.carousel-thumbs img');
+            let currentIndex = Array.from(thumbs).findIndex(thumb => thumb.classList.contains('active'));
+            const images = Array.from(thumbs).map(thumb => thumb.src);
+            
+            currentIndex = (currentIndex > 0) ? currentIndex - 1 : thumbs.length - 1;
+            updateCarousel(images, currentIndex);
+        });
+
+        document.querySelector('.carousel-arrow.next').addEventListener('click', () => {
+            const thumbs = document.querySelectorAll('.carousel-thumbs img');
+            let currentIndex = Array.from(thumbs).findIndex(thumb => thumb.classList.contains('active'));
+            const images = Array.from(thumbs).map(thumb => thumb.src);
+            
+            currentIndex = (currentIndex < thumbs.length - 1) ? currentIndex + 1 : 0;
+            updateCarousel(images, currentIndex);
+        });
+
+        // Swipe support for mobile
+        let touchStartX = 0;
+        const mainImg = document.getElementById('carousel-main-img');
+
+        mainImg.addEventListener('touchstart', (e) => {
+            touchStartX = e.changedTouches[0].screenX;
+        });
+
+        mainImg.addEventListener('touchend', (e) => {
+            const touchEndX = e.changedTouches[0].screenX;
+            const thumbs = document.querySelectorAll('.carousel-thumbs img');
+            let currentIndex = Array.from(thumbs).findIndex(thumb => thumb.classList.contains('active'));
+            const images = Array.from(thumbs).map(thumb => thumb.src);
+            
+            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(images, currentIndex);
+        });
+
+        // Initialize
+        renderPlayers(players);
+    </script>
+</body>
+</html>

volleyball.html

@@ -166,7 +166,7 @@
                     </svg>
                     <h3 class="text-xl font-bold">Junior A Boys</h3>
                 </a>
-                <a href="#" class="team-tile block">
+                <a href="junior-b-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>
@@ -174,7 +174,7 @@
                     </svg>
                     <h3 class="text-xl font-bold">Junior B Boys</h3>
                 </a>
-                <a href="#" class="team-tile block">
+<a href="#" 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>