From b98d695f7f3688c5263ccbb33dea70f781da789b Mon Sep 17 00:00:00 2001
From: Ghassan Yusuf <ghassan.yousif.83@gmail.com>
Date: Sun, 15 Feb 2026 14:42:13 +0300
Subject: [PATCH] Update templates/club-layout.html

---
 templates/club-layout.html | 698 +++++++++++++++++++++++++------------
 1 file changed, 479 insertions(+), 219 deletions(-)
diff --git a/templates/club-layout.html b/templates/club-layout.html
index d59e3cc..aa369a7 100644
--- a/templates/club-layout.html
+++ b/templates/club-layout.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,165 +8,403 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    
+
     <style>
-        :root { --primary: #ff3131; --dark: #0f172a; --secondary-bg: #f8fafc; --muted-foreground: #64748b; }
-        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f1f5f9; color: #1e293b; }
+        :root {
+            --primary: #ff3131;
+            --dark: #0f172a;
+            --secondary-bg: #f8fafc;
+            --muted-foreground: #64748b;
+        }
+
+        body {
+            font-family: 'Plus Jakarta Sans', sans-serif;
+            background-color: #f1f5f9;
+            color: #1e293b;
+        }
 
         /* BOXED LAYOUT - FIXED */
-        .page-container { max-width: 1200px; margin: 30px auto; padding: 0 15px; }
+        .page-container {
+            max-width: 1200px;
+            margin: 30px auto;
+            padding: 0 15px;
+        }
 
         /* --- THE BANNER --- */
         .hero-banner {
-            min-height: 580px; border-radius: 40px;
-            background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.95)), 
-                        url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1400&q=80') center/cover;
-            position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 45px;
+            min-height: 580px;
+            /*border-radius: 40px;*/
+            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.95)),
+                url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1400&q=80') center/cover;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 45px;
         }
 
-        .banner-top { display: flex; justify-content: space-between; align-items: flex-start; }
-        .club-logo-wrapper { width: 95px; height: 95px; background: white; border-radius: 24px; padding: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 15px 35px rgba(0,0,0,0.3); }
-
-        .glass-hub { 
-            display: flex; gap: 8px; background: rgba(255, 255, 255, 0.1); 
-            backdrop-filter: blur(12px); padding: 10px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.2); 
+        .banner-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
         }
-        .hub-link { 
-            width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; 
-            color: white; text-decoration: none; border-radius: 15px; transition: 0.3s; background: rgba(255,255,255,0.05);
-        }
-        .hub-link:hover { background: var(--primary); transform: translateY(-3px); }
 
-        .banner-bottom { margin-bottom: 75px; }
-        .stats-row { display: flex; gap: 50px; margin-top: 35px; }
-        .stat-item { border-left: 3px solid var(--primary); padding-left: 20px; }
-        .stat-item h3 { color: white; font-weight: 800; margin: 0; font-size: 1.8rem; }
-        .stat-item span { color: rgba(255,255,255,0.5); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
+        .club-logo-wrapper {
+            width: 95px;
+            height: 95px;
+            /*background: white;*/
+            /*border-radius: 24px;*/
+            /*padding: 12px;*/
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+        }
+
+        .glass-hub {
+            display: flex;
+            gap: 8px;
+        }
+
+        .hub-link {
+            width: 44px;
+            height: 44px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            text-decoration: none;
+            border-radius: 15px;
+            transition: 0.3s;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(12px);
+            padding: 10px;
+            border-radius: 22px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .hub-link:hover {
+            background: var(--primary);
+            transform: translateY(-3px);
+        }
+
+        .banner-bottom {
+            margin-bottom: 75px;
+        }
+
+        .stats-row {
+            display: flex;
+            gap: 50px;
+            margin-top: 35px;
+        }
+
+        .stat-item {
+            border-left: 3px solid var(--primary);
+            padding-left: 20px;
+        }
+
+        .stat-item h3 {
+            color: white;
+            font-weight: 800;
+            margin: 0;
+            font-size: 1.8rem;
+        }
+
+        .stat-item span {
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 1.5px;
+            font-weight: 700;
+        }
 
         /* --- CONTENT SECTION --- */
-        .content-card { background: white; border-radius: 40px; margin-top: -65px; position: relative; z-index: 10; padding: 45px; box-shadow: 0 25px 60px rgba(0,0,0,0.1); }
-        
-        .nav-pills .nav-link { border-radius: 18px; padding: 15px 30px; font-weight: 700; color: #64748b; margin: 0 5px; border: 1px solid transparent; }
-        .nav-pills .nav-link.active { background: var(--primary) !important; color: white; box-shadow: 0 12px 24px rgba(255,49,49,0.25); }
+        .content-card {
+            background: white;
+            /*border-radius: 40px;*/
+            margin-top: -65px;
+            position: relative;
+            z-index: 10;
+            padding: 45px;
+            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
+        }
+
+        .nav-pills .nav-link {
+            border-radius: 18px;
+            padding: 15px 30px;
+            font-weight: 700;
+            color: #64748b;
+            margin: 0 5px;
+            border: 1px solid transparent;
+        }
+
+        .nav-pills .nav-link.active {
+            background: var(--primary) !important;
+            color: white;
+            box-shadow: 0 12px 24px rgba(255, 49, 49, 0.25);
+        }
 
         /* --- PERKS CARDS --- */
-        .perk-card { border-radius: 24px; overflow: hidden; position: relative; height: 200px; border: none; transition: 0.3s; }
-        .perk-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
-        .perk-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; }
-        .perk-card:hover img { transform: scale(1.1); }
-        .perk-badge { position: absolute; top: 15px; right: 15px; background: var(--primary); color: white; padding: 5px 12px; border-radius: 10px; font-weight: 800; font-size: 0.8rem; }
+        .perk-card {
+            border-radius: 24px;
+            overflow: hidden;
+            position: relative;
+            height: 200px;
+            border: none;
+            transition: 0.3s;
+        }
+
+        .perk-card img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: 0.5s;
+        }
+
+        .perk-overlay {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+        }
+
+        .perk-card:hover img {
+            transform: scale(1.1);
+        }
+
+        .perk-badge {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: var(--primary);
+            color: white;
+            padding: 5px 12px;
+            border-radius: 10px;
+            font-weight: 800;
+            font-size: 0.8rem;
+        }
 
         /* --- MINI TRAINER CARDS --- */
-        .mini-trainer { background: #f8fafc; border-radius: 20px; padding: 15px; display: flex; align-items: center; gap: 15px; border: 1px solid #e2e8f0; transition: 0.3s; }
-        .mini-trainer:hover { border-color: var(--primary); background: white; }
-        .mini-pfp { width: 60px; height: 60px; border-radius: 15px; object-fit: cover; }
+        .mini-trainer {
+            background: #f8fafc;
+            border-radius: 20px;
+            padding: 15px;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            border: 1px solid #e2e8f0;
+            transition: 0.3s;
+        }
+
+        .mini-trainer:hover {
+            border-color: var(--primary);
+            background: white;
+        }
+
+        .mini-pfp {
+            width: 60px;
+            height: 60px;
+            border-radius: 15px;
+            object-fit: cover;
+        }
 
         /* --- FACILITY GRID --- */
-        .fac-preview { border-radius: 20px; height: 160px; object-fit: cover; width: 100%; margin-bottom: 15px; }
+        .fac-preview {
+            border-radius: 20px;
+            height: 160px;
+            object-fit: cover;
+            width: 100%;
+            margin-bottom: 15px;
+        }
 
         /* --- PACKAGES GRID ADDITIONS --- */
-        .grid-packages { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; }
-        @media (min-width: 768px) { .grid-packages { grid-template-columns: repeat(2, 1fr); } }
-        @media (min-width: 1024px) { .grid-packages { grid-template-columns: repeat(3, 1fr); } }
+        .grid-packages {
+            display: grid;
+            grid-template-columns: repeat(1, 1fr);
+            gap: 1.5rem;
+        }
 
-        .package-card { border: 1px solid #edf2f7; border-radius: 28px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: all 0.3s; }
-        .package-card:hover { shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
-        .package-img-wrapper { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #f1f5f9; }
-        .package-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
-        
-        .activity-item { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; background: rgba(248, 250, 252, 0.5); margin-bottom: 8px; }
-        .instructor-tag { display: flex; align-items: center; gap: 6px; background: rgba(255, 49, 49, 0.1); border-radius: 100px; padding: 4px 8px; }
-        .instructor-img { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 49, 49, 0.2); }
-        
-        .badge-pill { font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 100px; border: 1px solid #e2e8f0; display: inline-flex; align-items: center; }
-        .bg-secondary-light { background-color: #f1f5f9; color: #475569; border: none; }
+        @media (min-width: 768px) {
+            .grid-packages {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (min-width: 1024px) {
+            .grid-packages {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+
+        .package-card {
+            border: 1px solid #edf2f7;
+            /*border-radius: 28px;*/
+            overflow: hidden;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            transition: all 0.3s;
+        }
+
+        .package-card:hover {
+            shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+
+        .package-img-wrapper {
+            width: 100%;
+            aspect-ratio: 16/9;
+            overflow: hidden;
+            background: #f1f5f9;
+        }
+
+        .package-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: top;
+        }
+
+        .activity-item {
+            border: 1px solid #e2e8f0;
+            /*border-radius: 12px;*/
+            padding: 12px;
+            background: rgba(248, 250, 252, 0.5);
+            margin-bottom: 8px;
+        }
+
+        .instructor-tag {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(255, 49, 49, 0.1);
+            border-radius: 100px;
+            padding: 4px 8px;
+        }
+
+        .instructor-img {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            border: 1px solid rgba(255, 49, 49, 0.2);
+        }
+
+        .badge-pill {
+            font-size: 10px;
+            font-weight: 600;
+            padding: 4px 10px;
+            border-radius: 100px;
+            border: 1px solid #e2e8f0;
+            display: inline-flex;
+            align-items: center;
+        }
+
+        .bg-secondary-light {
+            background-color: #f1f5f9;
+            color: #475569;
+            border: none;
+        }
 
         /* --- STATS CHART BOX --- */
-        .chart-box { background: #f8fafc; border-radius: 24px; padding: 25px; border: 1px solid #e2e8f0; }
+        .chart-box {
+            background: #f8fafc;
+            border-radius: 24px;
+            padding: 25px;
+            border: 1px solid #e2e8f0;
+        }
     </style>
-    
+
 </head>
+
 <body>
 
-<div class="page-container">
-    <div class="hero-banner">
-        <div class="banner-top">
-            <div class="club-logo-wrapper"><img src="https://takeone-dev.innovator.bh/img/logo.png" style="width:100%"></div>
-            <div class="glass-hub">
-                <a href="#" class="hub-link"><i class="fa-brands fa-whatsapp"></i></a>
-                <a href="#" class="hub-link"><i class="fa-brands fa-instagram"></i></a>
-                <a href="#" class="hub-link"><i class="fa-solid fa-phone"></i></a>
+    <div class="page-container">
+        <div class="hero-banner">
+            <div class="banner-top">
+                <div class="club-logo-wrapper"><img src="https://takeone-dev.innovator.bh/img/logo.png" style="width:100%"></div>
+                <div class="glass-hub">
+                    <a href="#" class="hub-link"><i class="fa-brands fa-whatsapp"></i></a>
+                    <a href="#" class="hub-link"><i class="fa-brands fa-instagram"></i></a>
+                    <a href="#" class="hub-link"><i class="fa-solid fa-phone"></i></a>
+                </div>
             </div>
-        </div>
-        <div class="banner-bottom">
-            <h1 class="display-3 fw-800 text-white mb-2">Titanium Zenith</h1>
-            <p class="text-white-50 fs-5"><i class="fa-solid fa-location-dot me-2 text-danger"></i>Seef District, Bahrain</p>
-            <div class="stats-row">
-                <div class="stat-item"><h3>4.9/5</h3><span>Rating</span></div>
-                <div class="stat-item"><h3>24/7</h3><span>Access</span></div>
-                <div class="stat-item"><h3>35+</h3><span>Classes</span></div>
-            </div>
-        </div>
-    </div>
-
-    <div class="content-card">
-        <ul class="nav nav-pills nav-fill mb-5" id="mainTabs">
-            <li class="nav-item"><button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-overview">Overview</button></li>
-            <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-feeds">News</button></li>
-            <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-packages">Packages</button></li>
-            <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-scheduled">Scheduled</button></li>
-            <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-events">Events</button></li>
-        </ul>
-
-        <div class="tab-content">
-            
-            <div class="tab-pane fade show active" id="tab-overview">
-                
-                <div class="mb-5">
-                    <div class="d-flex justify-content-between align-items-end mb-4">
-                        <div>
-                            <h4 class="fw-800 mb-1">Member Exclusive Perks</h4>
-                            <p class="text-muted small mb-0">Partnering businesses and offers available when you register.</p>
-                        </div>
-                        <!--<span class="badge bg-light text-dark rounded-pill border px-3 py-2">Powered by TAKEONE</span>-->
+            <div class="banner-bottom">
+                <h1 class="display-3 fw-800 text-white mb-2">Titanium Zenith</h1>
+                <p class="text-white-50 fs-5"><i class="fa-solid fa-location-dot me-2 text-danger"></i>Seef District, Bahrain</p>
+                <div class="stats-row">
+                    <div class="stat-item">
+                        <h3>4.9/5</h3><span>Rating</span>
                     </div>
-                    <div class="row g-3">
-                        <div class="col-md-4">
-                            <div class="card perk-card">
-                                <span class="perk-badge">-20% OFF</span>
-                                <img src="https://images.unsplash.com/photo-1547592166-23ac45744acd?auto=format&fit=crop&w=500">
-                                <div class="perk-overlay">
-                                    <h5 class="text-white fw-bold mb-0">Fuel Cafe</h5>
-                                    <p class="text-white-50 small mb-0">Post-workout nutrition & coffee</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card perk-card">
-                                <span class="perk-badge">-15% OFF</span>
-                                <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=500">
-                                <div class="perk-overlay">
-                                    <h5 class="text-white fw-bold mb-0">Clinic X Physio</h5>
-                                    <p class="text-white-50 small mb-0">Recovery & Sports Massage</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="card perk-card">
-                                <span class="perk-badge">+500 PTS</span>
-                                <img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&w=500">
-                                <div class="perk-overlay">
-                                    <h5 class="text-white fw-bold mb-0">Daily Check-in</h5>
-                                    <p class="text-white-50 small mb-0">Earn points for every workout</p>
-                                </div>
-                            </div>
-                        </div>
+                    <div class="stat-item">
+                        <h3>24/7</h3><span>Access</span>
+                    </div>
+                    <div class="stat-item">
+                        <h3>35+</h3><span>Classes</span>
                     </div>
                 </div>
+            </div>
+        </div>
 
-                <hr class="my-5 opacity-5">
+        <div class="content-card">
+            <ul class="nav nav-pills nav-fill mb-5" id="mainTabs">
+                <li class="nav-item"><button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-overview">Overview</button></li>
+                <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-feeds">News</button></li>
+                <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-packages">Packages</button></li>
+                <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-scheduled">Scheduled</button></li>
+                <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-events">Events</button></li>
+            </ul>
 
-                <div class="row g-5">
+            <div class="tab-content">
+
+                <div class="tab-pane fade show active" id="tab-overview">
+
+                    <div class="mb-5">
+                        <div class="d-flex justify-content-between align-items-end mb-4">
+                            <div>
+                                <h4 class="fw-800 mb-1">Member Exclusive Perks</h4>
+                                <p class="text-muted small mb-0">Partnering businesses and offers available when you register.</p>
+                            </div>
+                            <!--<span class="badge bg-light text-dark rounded-pill border px-3 py-2">Powered by TAKEONE</span>-->
+                        </div>
+                        <div class="row g-3">
+                            <div class="col-md-4">
+                                <div class="card perk-card">
+                                    <span class="perk-badge">-20% OFF</span>
+                                    <img src="https://images.unsplash.com/photo-1547592166-23ac45744acd?auto=format&fit=crop&w=500">
+                                    <div class="perk-overlay">
+                                        <h5 class="text-white fw-bold mb-0">Fuel Cafe</h5>
+                                        <p class="text-white-50 small mb-0">Post-workout nutrition & coffee</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="card perk-card">
+                                    <span class="perk-badge">-15% OFF</span>
+                                    <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=500">
+                                    <div class="perk-overlay">
+                                        <h5 class="text-white fw-bold mb-0">Clinic X Physio</h5>
+                                        <p class="text-white-50 small mb-0">Recovery & Sports Massage</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="card perk-card">
+                                    <span class="perk-badge">+500 PTS</span>
+                                    <img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&w=500">
+                                    <div class="perk-overlay">
+                                        <h5 class="text-white fw-bold mb-0">Daily Check-in</h5>
+                                        <p class="text-white-50 small mb-0">Earn points for every workout</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr class="my-5 opacity-5">
+
+                    <div class="row g-5">
                         <div class="col-lg-6">
                             <div class="d-flex justify-content-between align-items-end mb-4">
                                 <div>
@@ -174,130 +413,151 @@
                                 </div>
                                 <!--<span class="badge bg-light text-dark rounded-pill border px-3 py-2">Powered by TAKEONE</span>-->
                             </div>
-                        <div class="mini-trainer mb-3">
-                            <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/profile-1760528371681.jpg" class="mini-pfp">
-                            <div><h6 class="fw-bold mb-1">Master Sami Al-Mane</h6><p class="text-muted small mb-0">IFBB Pro & Body Transformation Specialist.</p></div>
-                        </div><div class="mini-trainer">
-                            <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg" class="mini-pfp">
-                            <div><h6 class="fw-bold mb-1">Sulaiman Al-Khalifa</h6><p class="text-muted small mb-0">Black Belt Taekwondo Specialist & Youth Mentor.</p></div>
+                            <div class="mini-trainer mb-3">
+                                <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/profile-1760528371681.jpg" class="mini-pfp">
+                                <div>
+                                    <h6 class="fw-bold mb-1">Master Sami Al-Mane</h6>
+                                    <p class="text-muted small mb-0">IFBB Pro & Body Transformation Specialist.</p>
+                                </div>
+                            </div>
+                            <div class="mini-trainer">
+                                <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg" class="mini-pfp">
+                                <div>
+                                    <h6 class="fw-bold mb-1">Sulaiman Al-Khalifa</h6>
+                                    <p class="text-muted small mb-0">Black Belt Taekwondo Specialist & Youth Mentor.</p>
+                                </div>
+                            </div>
+                            <button class="btn btn-link text-danger fw-bold p-0 mt-3 text-decoration-none small" onclick="document.querySelector('[data-bs-target=\'#tab-pro\']').click()">View all 12 coaches <i class="fa-solid fa-arrow-right ms-1"></i></button>
                         </div>
-                        <button class="btn btn-link text-danger fw-bold p-0 mt-3 text-decoration-none small" onclick="document.querySelector('[data-bs-target=\'#tab-pro\']').click()">View all 12 coaches <i class="fa-solid fa-arrow-right ms-1"></i></button>
-                    </div>
 
-                    <div class="col-lg-6">
-                        <!--<h4 class="fw-800 mb-4">Elite Facilities</h4>-->
-                        <div class="d-flex justify-content-between align-items-end mb-4">
+                        <div class="col-lg-6">
+                            <!--<h4 class="fw-800 mb-4">Elite Facilities</h4>-->
+                            <div class="d-flex justify-content-between align-items-end mb-4">
                                 <div>
                                     <h4 class="fw-800 mb-1">Elite Facilities</h4>
                                     <p class="text-muted small mb-0">Best Trainers With Exceptional Experties</p>
                                 </div>
                                 <!--<span class="badge bg-light text-dark rounded-pill border px-3 py-2">Powered by TAKEONE</span>-->
-                        </div>
-                        <div class="row g-3">
-                            <div class="col-6">
-                                <img src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?auto=format&fit=crop&w=400" class="fac-preview">
-                                <h6 class="fw-bold mb-1">Pro Strength Hub</h6>
-                                <p class="text-muted x-small" style="font-size: 11px;">Hammer Strength & Rogue equipped.</p>
                             </div>
-                            <div class="col-6">
-                                <img src="https://images.unsplash.com/photo-1593079831268-3381b0db4a77?auto=format&fit=crop&w=400" class="fac-preview">
-                                <h6 class="fw-bold mb-1">Recovery Suite</h6>
-                                <p class="text-muted x-small" style="font-size: 11px;">Cryo-tanks & Steam sessions.</p>
+                            <div class="row g-3">
+                                <div class="col-6">
+                                    <img src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?auto=format&fit=crop&w=400" class="fac-preview">
+                                    <h6 class="fw-bold mb-1">Pro Strength Hub</h6>
+                                    <p class="text-muted x-small" style="font-size: 11px;">Hammer Strength & Rogue equipped.</p>
+                                </div>
+                                <div class="col-6">
+                                    <img src="https://images.unsplash.com/photo-1593079831268-3381b0db4a77?auto=format&fit=crop&w=400" class="fac-preview">
+                                    <h6 class="fw-bold mb-1">Recovery Suite</h6>
+                                    <p class="text-muted x-small" style="font-size: 11px;">Cryo-tanks & Steam sessions.</p>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="tab-pane fade" id="tab-packages">
-                <div class="grid-packages">
-                    <div class="package-card">
-                        <div class="package-img-wrapper">
-                            <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/1760759003755-1760759026625.jpg" class="package-img">
-                        </div>
-                        <div class="p-4 flex-grow-1">
-                            <h3 class="h5 fw-bold mb-2">Juniors (S.T.T) Group B</h3>
-                            <div class="d-flex flex-wrap gap-1 mb-3">
-                                <span class="badge-pill bg-secondary-light">Single Activity</span>
-                                <span class="badge-pill"><i class="fa-solid fa-users me-1"></i>Mixed</span>
-                                <span class="badge-pill">11-13y</span>
+                <div class="tab-pane fade" id="tab-packages">
+                    <div class="grid-packages">
+                        <div class="package-card">
+                            <div class="package-img-wrapper">
+                                <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/1760759003755-1760759026625.jpg" class="package-img">
                             </div>
-                            <div class="mb-3">
-                                <span class="h3 fw-bold text-primary">BHD 35</span>
-                                <span class="text-muted small ms-2"><i class="fa-regular fa-calendar me-1"></i>1mo</span>
-                            </div>
-                            <div class="pt-3 border-top">
-                                <h6 class="small fw-bold mb-3"><i class="fa-solid fa-package me-2"></i>Included Activities (2)</h6>
-                                <div class="activity-item">
-                                    <div class="d-flex justify-content-between align-items-start mb-2">
-                                        <h6 class="small fw-bold mb-0">TAEKWONDO (S.T.T) CLASS C</h6>
-                                        <div class="instructor-tag">
-                                            <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg" class="instructor-img">
-                                            <span style="font-size: 9px; font-weight: 700; color: var(--primary);">Sulaiman</span>
+                            <div class="p-4 flex-grow-1">
+                                <h3 class="h5 fw-bold mb-2">Juniors Group A</h3>
+                                <div class="d-flex flex-wrap gap-1 mb-3">
+                                    <span class="badge-pill bg-secondary-light">Single Activity</span>
+                                    <span class="badge-pill"><i class="fa-solid fa-users me-1"></i>Mixed</span>
+                                    <span class="badge-pill">11-13y</span>
+                                </div>
+                                <div class="mb-3">
+                                    <span class="h3 fw-bold text-primary">BHD 35</span>
+                                    <span class="text-muted small ms-2"><i class="fa-regular fa-calendar me-1"></i>1mo</span>
+                                </div>
+                                <div class="pt-3 border-top">
+                                    <h6 class="small fw-bold mb-3"><i class="fa-solid fa-package me-2"></i>Included Activities (1)</h6>
+                                    <div class="activity-item">
+                                        <div class="d-flex justify-content-between align-items-start mb-2">
+                                            <h6 class="small fw-bold mb-0">TAEKWONDO</h6>
+                                            <div class="instructor-tag">
+                                                <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg" class="instructor-img">
+                                                <span style="font-size: 9px; font-weight: 700; color: var(--primary);">Sulaiman</span>
+                                            </div>
+                                        </div>
+                                        <div class="d-flex gap-3 text-muted" style="font-size: 10px;">
+                                            <span><i class="fa-regular fa-clock me-1"></i>60 min</span>
+                                            <span><i class="fa-regular fa-calendar me-1"></i>Sun, Tue, Thu: 6:00 PM - 7:00 PM</span>
                                         </div>
-                                    </div>
-                                    <div class="d-flex gap-3 text-muted" style="font-size: 10px;">
-                                        <span><i class="fa-regular fa-clock me-1"></i>60 min</span>
-                                        <span><i class="fa-regular fa-calendar me-1"></i>Sun, Tue, Thu</span>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                        <div class="p-4 pt-0">
-                            <button class="btn btn-danger w-100 fw-bold py-2 shadow-sm" style="border-radius:10px">Select Package</button>
-                        </div>
-                    </div>
-                    <div class="package-card">
-                        <div class="package-img-wrapper">
-                            <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/1760759003755-1760759026625.jpg" class="package-img">
-                        </div>
-                        <div class="p-4 flex-grow-1">
-                            <h3 class="h5 fw-bold mb-2">Juniors (S.T.T) Group B</h3>
-                            <div class="d-flex flex-wrap gap-1 mb-3">
-                                <span class="badge-pill bg-secondary-light">Single Activity</span>
-                                <span class="badge-pill"><i class="fa-solid fa-users me-1"></i>Mixed</span>
-                                <span class="badge-pill">11-13y</span>
+                            <div class="p-4 pt-0">
+                                <button class="btn btn-danger w-100 fw-bold py-2 shadow-sm" style="border-radius:10px">Select Package</button>
                             </div>
-                            <div class="mb-3">
-                                <span class="h3 fw-bold text-primary">BHD 35</span>
-                                <span class="text-muted small ms-2"><i class="fa-regular fa-calendar me-1"></i>1mo</span>
+                        </div>
+                        <div class="package-card">
+                            <div class="package-img-wrapper">
+                                <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/1760759726882-1760759744953.jpg" class="package-img">
                             </div>
-                            <div class="pt-3 border-top">
-                                <h6 class="small fw-bold mb-3"><i class="fa-solid fa-package me-2"></i>Included Activities (2)</h6>
-                                <div class="activity-item">
-                                    <div class="d-flex justify-content-between align-items-start mb-2">
-                                        <h6 class="small fw-bold mb-0">TAEKWONDO (S.T.T) CLASS C</h6>
-                                        <div class="instructor-tag">
-                                            <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg" class="instructor-img">
-                                            <span style="font-size: 9px; font-weight: 700; color: var(--primary);">Sulaiman</span>
+                            <div class="p-4 flex-grow-1">
+                                <h3 class="h5 fw-bold mb-2">Juniors Group B</h3>
+                                <div class="d-flex flex-wrap gap-1 mb-3">
+                                    <span class="badge-pill bg-secondary-light">Single Activity</span>
+                                    <span class="badge-pill"><i class="fa-solid fa-users me-1"></i>Mixed</span>
+                                    <span class="badge-pill">11-13y</span>
+                                </div>
+                                <div class="mb-3">
+                                    <span class="h3 fw-bold text-primary">BHD 45</span>
+                                    <span class="text-muted small ms-2"><i class="fa-regular fa-calendar me-1"></i>1mo</span>
+                                </div>
+                                <div class="pt-3 border-top">
+                                    <h6 class="small fw-bold mb-3"><i class="fa-solid fa-package me-2"></i>Included Activities (2)</h6>
+                                    <div class="activity-item">
+                                        <div class="d-flex justify-content-between align-items-start mb-2">
+                                            <h6 class="small fw-bold mb-0">TAEKWONDO</h6>
+                                            <div class="instructor-tag">
+                                                <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg" class="instructor-img">
+                                                <span style="font-size: 9px; font-weight: 700; color: var(--primary);">Sulaiman</span>
+                                            </div>
+                                        </div>
+                                        <div class="d-flex gap-3 text-muted" style="font-size: 10px;">
+                                            <span><i class="fa-regular fa-clock me-1"></i>60 min</span>
+                                            <span><i class="fa-regular fa-calendar me-1"></i>Sun, Tue, Thu: 6:00 PM - 7:00 PM</span>
                                         </div>
                                     </div>
-                                    <div class="d-flex gap-3 text-muted" style="font-size: 10px;">
-                                        <span><i class="fa-regular fa-clock me-1"></i>60 min</span>
-                                        <span><i class="fa-regular fa-calendar me-1"></i>Sun, Tue, Thu</span>
+                                    <div class="activity-item">
+                                        <div class="d-flex justify-content-between align-items-start mb-2">
+                                            <h6 class="small fw-bold mb-0">HORSE RIDING</h6>
+                                            <div class="instructor-tag">
+                                                <img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg" class="instructor-img">
+                                                <span style="font-size: 9px; font-weight: 700; color: var(--primary);">Sulaiman</span>
+                                            </div>
+                                        </div>
+                                        <div class="d-flex gap-3 text-muted" style="font-size: 10px;">
+                                            <span><i class="fa-regular fa-clock me-1"></i>60 min</span>
+                                            <span><i class="fa-regular fa-calendar me-1"></i>Sun, Tue, Thu: 6:00 PM - 7:00 PM</span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                        <div class="p-4 pt-0">
-                            <button class="btn btn-danger w-100 fw-bold py-2 shadow-sm" style="border-radius:10px">Select Package</button>
+                            <div class="p-4 pt-0">
+                                <button class="btn btn-danger w-100 fw-bold py-2 shadow-sm" style="border-radius:10px">Select Package</button>
+                            </div>
                         </div>
                     </div>
                 </div>
+
+                <div class="tab-pane fade" id="tab-fac">
+                    <p class="text-muted">Detailed facility walkthroughs...</p>
+                </div>
+
+                <div class="tab-pane fade" id="tab-pro">
+                    <p class="text-muted">Full trainer bios...</p>
+                </div>
+
             </div>
-            
-            <div class="tab-pane fade" id="tab-fac">
-                <p class="text-muted">Detailed facility walkthroughs...</p>
-            </div>
-            
-            <div class="tab-pane fade" id="tab-pro">
-                <p class="text-muted">Full trainer bios...</p>
-            </div>
-            
         </div>
     </div>
-</div>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
+
 </html>
\ No newline at end of file
