location - Village Glen / South Towns Tennis & Pickleball

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<title>Club Duo — Locations</title>
<style>
:root{–navy:#083f5c;–blue:#0b6b91;–gold:#e39500;–ink:#123042;–muted:#6b7d87;–bg:#f5f8fa;–card:#fff}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(–ink);background:var(–bg)}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid #e6edf1}
.nav{max-width:1180px;margin:auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:900;letter-spacing:.08em;color:var(–navy)}.logo span{color:var(–gold)}
nav a{margin-left:28px;text-decoration:none;color:#36515f;font-weight:650;font-size:14px}
.hero{background:linear-gradient(135deg,#073d59,#0a6e93);color:#fff;padding:88px 24px 110px;position:relative;overflow:hidden}
.hero:after{content:””;position:absolute;width:480px;height:480px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:-120px;top:-180px;box-shadow:0 0 0 70px rgba(255,255,255,.035),0 0 0 140px rgba(255,255,255,.025)}
.hero-inner{max-width:1180px;margin:auto;position:relative;z-index:2}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:#b9e2ef;font-weight:800}
h1{font-size:clamp(44px,7vw,78px);line-height:.95;margin:14px 0 20px;max-width:800px}
.hero p{max-width:650px;font-size:18px;line-height:1.7;color:#d9edf4;margin:0}
.search{max-width:1180px;margin:-38px auto 0;padding:0 24px;position:relative;z-index:5}
.searchbox{background:#fff;border-radius:18px;padding:12px;box-shadow:0 20px 50px rgba(7,44,63,.18);display:flex;gap:10px}
.searchbox input{flex:1;border:0;outline:0;padding:17px;font-size:16px}.searchbox button{border:0;border-radius:12px;background:var(–gold);color:#fff;font-weight:800;padding:0 28px;cursor:pointer}
main{max-width:1180px;margin:70px auto;padding:0 24px}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}
h2{font-size:36px;margin:0;color:var(–navy)}.section-head p{color:var(–muted);max-width:520px;line-height:1.6;margin:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(–card);border:1px solid #e5edf0;border-radius:22px;overflow:hidden;box-shadow:0 8px 25px rgba(20,55,70,.06);transition:.25s}
.card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(20,55,70,.13)}
.visual{height:190px;background:linear-gradient(135deg,#0a4e6d,#55a9bd);position:relative;overflow:hidden}
.visual:before{content:””;position:absolute;width:190px;height:190px;border-radius:50%;border:1px solid rgba(255,255,255,.35);right:-40px;top:-60px}
.pin{position:absolute;left:28px;bottom:24px;width:42px;height:42px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(–gold);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.pin:after{content:””;position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;left:15px;top:15px}
.visual small{position:absolute;left:28px;top:25px;color:#d9edf4;text-transform:uppercase;letter-spacing:.14em;font-weight:800}
.content{padding:25px}.content h3{margin:0 0 8px;font-size:25px;color:var(–navy)}.content p{color:var(–muted);line-height:1.55;margin:0 0 20px}
.meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #edf1f3;padding-top:17px}.role{font-size:13px;font-weight:750;color:#54707c}
.btn{color:var(–blue);font-weight:850;text-decoration:none;font-size:14px}
.map{margin-top:24px;background:#dfeaec;border-radius:26px;min-height:310px;position:relative;overflow:hidden;border:1px solid #d3e0e4}
.map:before,.map:after{content:””;position:absolute;background:#fff;opacity:.8}.map:before{width:140%;height:1px;left:-10%;top:44%;transform:rotate(-12deg);box-shadow:0 75px 0 #fff,0 -80px 0 #fff}.map:after{height:140%;width:1px;left:58%;top:-20%;transform:rotate(15deg);box-shadow:90px 0 0 #fff,-170px 0 0 #fff}
.map-label{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:18px;padding:22px 28px;box-shadow:0 14px 35px rgba(20,55,70,.16);text-align:center}.map-label strong{display:block;color:var(–navy);font-size:18px}.map-label span{color:var(–muted);font-size:13px}
footer{margin-top:90px;background:#073d59;color:#c9e0e8;padding:50px 24px}.foot{max-width:1180px;margin:auto;display:flex;justify-content:space-between;gap:30px}.foot strong{color:#fff;font-size:20px}.foot p{max-width:500px;line-height:1.6}
.reveal{opacity:0;transform:translateY(22px);transition:.7s}.reveal.show{opacity:1;transform:none}
@media(max-width:800px){nav{display:none}.grid{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:12px}.hero{padding:65px 24px 90px}.searchbox{display:block}.searchbox button{height:52px;width:100%;margin-top:8px}.foot{display:block}}
</style>
</head>
<body>
<header><div class=”nav”><div class=”logo”>CLUB <span>DUO</span></div><nav><a href=”#”>About</a><a href=”#locations”>Locations</a><a href=”#”>Programs</a><a href=”#”>Contact</a></nav></div></header>

<section class=”hero”>
<div class=”hero-inner”>
<div class=”eyebrow”>Find your club</div>
<h1>One community.<br>Three places to belong.</h1>
<p>Explore Club Duo locations and find the community, programs and active lifestyle experience that fits you best.</p>
</div>
</section>

<div class=”search”><div class=”searchbox”><input id=”search” placeholder=”Search a location…”><button onclick=”filterCards()”>Find location</button></div></div>

<main id=”locations”>
<div class=”section-head reveal”><div><div class=”eyebrow” style=”color:#0b6b91″>Our locations</div><h2>Choose your place</h2></div><p>Explore our locations and discover a motivating, friendly environment built around an active lifestyle.</p></div>
<div class=”grid” id=”cards”>
<article class=”card reveal” data-name=”downtown”><div class=”visual”><small>Club Duo</small><div class=”pin”></div></div><div class=”content”><h3>Downtown</h3><p>A full-service community destination with fitness, health, membership and family-focused leadership.</p><div class=”meta”><span class=”role”>Executive Director · Kim Howell</span><a class=”btn” href=”#”>Explore →</a></div></div></article>
<article class=”card reveal” data-name=”the ponds ponds”><div class=”visual” style=”background:linear-gradient(135deg,#0b5f73,#72b6bd)”><small>Club Duo</small><div class=”pin”></div></div><div class=”content”><h3>The Ponds</h3><p>A welcoming Club Duo location led by a dedicated executive team and connected to the wider community.</p><div class=”meta”><span class=”role”>Executive Director · Jana Chanthabane</span><a class=”btn” href=”#”>Explore →</a></div></div></article>
<article class=”card reveal” data-name=”oakbrook”><div class=”visual” style=”background:linear-gradient(135deg,#174c5d,#7da8a5)”><small>Club Duo</small><div class=”pin”></div></div><div class=”content”><h3>Oakbrook</h3><p>Home to aquatics, family programs, adult sports and a dedicated sports team.</p><div class=”meta”><span class=”role”>Executive Director · Jill Lewellyn</span><a class=”btn” href=”#”>Explore →</a></div></div></article>
</div>

<div class=”map reveal”><div class=”map-label”><strong>Interactive location map</strong><span>Connect your Google Maps / Mapbox embed here</span></div></div>
</main>

<footer><div class=”foot”><div><strong>CLUB DUO</strong><p>Creating and maintaining an active lifestyle through community, motivation and inspiring spaces.</p></div><div>Locations · Programs · Membership · Contact</div></div></footer>