563 lines
25 KiB
HTML
563 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Club Profile | TAKEONE Premium</title>
|
|
<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;
|
|
}
|
|
|
|
/* BOXED LAYOUT - FIXED */
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* --- 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;
|
|
}
|
|
|
|
/* --- 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;
|
|
}
|
|
|
|
/* --- FACILITY GRID --- */
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</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>
|
|
</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>
|
|
<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>
|
|
<h4 class="fw-800 mb-1">Meet The Experts</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="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>
|
|
|
|
<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>
|
|
</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 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>
|
|
</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/1760759726882-1760759744953.jpg" class="package-img">
|
|
</div>
|
|
<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="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 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>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
|
|
</html> |