Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign: Tropical Heat (Direction B) visual overhaul

Browse Source 
Full aesthetic rewrite across all pages — new design system based on
the Claude Design handoff (Direction B). New color tokens, Bricolage
Grotesque + Caveat Brush typography, blob backgrounds, sticky blur nav,
responsive grid layouts, JS-driven schedule renderer, filter pills,
marquee, and connect page with ig grid and collab banner.
All internal Home links use href=/.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Javier Blanco
2026-05-01 09:42:34 +07:00
parent e4f8d9f8f0
commit 3d353ed00f
8 changed files with 2181 additions and 1532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
studios.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -6,183 +6,185 @@
<title>Dance Studios — Sabor Flow Da Nang</title>
<meta name="description" content="Latin dance studios in Da Nang, Vietnam. Find schools teaching Salsa, Bachata, Kizomba, and Zouk.">
<link rel="icon" type="image/jpeg" href="assets/logo.jpg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="nav">
<div class="nav-container">
<a href="index.html" class="nav-brand">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
<span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
</a>
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<ul class="nav-links" id="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="connect.html">Connect</a></li>
<li><a href="studios.html" class="active">Studios</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="festivals.html">Festivals</a></li>
</ul>
</div>
<div class="sfB-bg" aria-hidden="true"></div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<a href="/">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html" class="active">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="container">
<div class="page-header">
<p class="section-label">Da Nang</p>
<h1>Dance Studios</h1>
<p class="subtitle">Dedicated schools and venues where you can take Latin dance lessons.</p>
<header class="sfB-topbar">
<a href="/" class="logo">
<div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
</a>
<nav class="sfB-nav">
<a href="/">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html" class="active">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
@saborflowdanang
</a>
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main class="sfB-page">
<div class="sfB-page-head">
<h1>Dance <em>Studios</em></h1>
<div class="info">
Dedicated schools and venues where you can take Latin dance lessons in Da Nang. Filter by style to find your perfect fit.
</div>
</div>
<div class="filter-bar">
<button class="filter-pill active" data-filter="all">All</button>
<button class="filter-pill" data-filter="salsa">Salsa</button>
<button class="filter-pill" data-filter="bachata">Bachata</button>
<button class="filter-pill" data-filter="kizomba">Kizomba</button>
<button class="filter-pill" data-filter="zouk">Zouk</button>
<div class="sfB-toolbar">
<div class="sfB-pills">
<button class="filter-pill active" data-filter="all">All</button>
<button class="filter-pill" data-filter="salsa">Salsa</button>
<button class="filter-pill" data-filter="bachata">Bachata</button>
<button class="filter-pill" data-filter="kizomba">Kizomba</button>
<button class="filter-pill" data-filter="zouk">Zouk</button>
</div>
</div>
<div class="card-grid">
<div class="sfB-cards">
<!-- Frog Goose Bachata School -->
<div class="card studio-card filterable-card" data-styles="bachata">
<div class="card-stripe"></div>
<div class="card-body">
<div class="card-title">Frog Goose Bachata School</div>
<div class="tags">
<span class="tag tag-bachata">Bachata</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<div class="sfB-card-x filterable-card" data-styles="bachata">
<div class="stripe bachata"></div>
<h3>Frog Goose Bachata School</h3>
<div class="ts">
<span class="sfB-chip bachata">Bachata</span>
</div>
<div class="info">
<div class="row">
<span class="ic">📍</span>
<span>292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div class="row">
<span class="ic">🕘</span>
<span>Monday workshops 8:30 PM &middot; Social from 9:30 PM</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
<div class="row">
<span class="ic">👥</span>
<span>Luu Nhat Phuong, Phong &amp; Shai</span>
</div>
<div class="card-links">
<a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Facebook
</a>
</div>
</div>
<div class="links">
<a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Facebook
</a>
</div>
</div>
<!-- Salsa Da Nang -->
<div class="card studio-card filterable-card" data-styles="salsa">
<div class="card-stripe"></div>
<div class="card-body">
<div class="card-title">Salsa Da Nang</div>
<div class="tags">
<span class="tag tag-salsa">Salsa On1</span>
<span class="tag tag-salsa">Salsa On2</span>
<div class="sfB-card-x filterable-card" data-styles="salsa">
<div class="stripe salsa"></div>
<h3>Salsa Da Nang</h3>
<div class="ts">
<span class="sfB-chip salsa">Salsa On1</span>
<span class="sfB-chip salsa">Salsa On2</span>
</div>
<div class="info">
<div class="row">
<span class="ic">📍</span>
<span>Da Nang (various venues &mdash; check website)</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>Da Nang (various venues &mdash; check website for current location)</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
<div class="row">
<span class="ic">👤</span>
<span>Lucho Giraldes &mdash; 20+ years experience, professional performer</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
<span>Beginner &middot; Intermediate &middot; Advanced</span>
</div>
<div class="card-links">
<a href="https://salsadanang.com" target="_blank" rel="noopener" class="card-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
Website
</a>
<a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener" class="card-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
Instagram
</a>
<div class="row">
<span class="ic">📖</span>
<span>Beginner · Intermediate · Advanced</span>
</div>
</div>
<div class="links">
<a href="https://salsadanang.com" target="_blank" rel="noopener">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
Website
</a>
<a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
Instagram
</a>
</div>
</div>
<!-- LearnToDanceDANANG -->
<div class="card studio-card filterable-card" data-styles="salsa,bachata,kizomba,zouk">
<div class="card-stripe"></div>
<div class="card-body">
<div class="card-title">LearnToDance Da Nang</div>
<div class="tags">
<span class="tag tag-salsa">Salsa</span>
<span class="tag tag-bachata">Bachata</span>
<span class="tag tag-kizomba">Kizomba</span>
<span class="tag tag-zouk">Zouk</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<!-- LearnToDance Da Nang -->
<div class="sfB-card-x filterable-card" data-styles="salsa,bachata,kizomba,zouk">
<div class="stripe multi"></div>
<h3>LearnToDance Da Nang</h3>
<div class="ts">
<span class="sfB-chip salsa">Salsa</span>
<span class="sfB-chip bachata">Bachata</span>
<span class="sfB-chip kizomba">Kizomba</span>
<span class="sfB-chip zouk">Zouk</span>
</div>
<div class="info">
<div class="row">
<span class="ic">📍</span>
<span>Da Nang</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.7 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.61 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.09 6.09l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<span><a href="tel:+84855085903" style="color:var(--orange)">+84 85 508 5903</a></span>
<div class="row">
<span class="ic">📞</span>
<span><a href="tel:+84855085903">+84 85 508 5903</a></span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<span><a href="mailto:LearnToDanceDANANG@gmail.com" style="color:var(--orange)">LearnToDanceDANANG@gmail.com</a></span>
</div>
<div class="card-links">
<a href="mailto:LearnToDanceDANANG@gmail.com" class="card-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
Email
</a>
<div class="row">
<span class="ic">✉️</span>
<span><a href="mailto:LearnToDanceDANANG@gmail.com">LearnToDanceDANANG@gmail.com</a></span>
</div>
</div>
<div class="links">
<a href="mailto:LearnToDanceDANANG@gmail.com">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
Email
</a>
</div>
</div>
</div>
<div class="mt-3" style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
<p style="color:var(--muted);margin-bottom:1rem">Know a studio we&rsquo;re missing? Let us know.</p>
<a href="connect.html" class="btn btn-ghost">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<span>Contact Us</span>
</a>
<div class="sfB-suggest">
<p>Know a studio we're missing? Let us know.</p>
<a href="connect.html" class="sfB-btn ghost">Contact Us</a>
</div>
</div>
</main>
<footer class="footer" style="margin-top:4rem">
<div class="container">
<div class="footer-inner">
<div>
<a href="index.html" class="footer-brand">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
<span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
</a>
<p class="footer-tagline">Da Nang's Latin dance community</p>
</div>
<nav class="footer-nav">
<a href="index.html">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="footer-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
@saborflowdanang
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Da Nang SBK Group
</a>
</div>
</div>
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
<footer class="sfB-foot">
<div><strong>SABOR FLOW</strong> Da Nang &mdash; Latin dance community &copy; 2025</div>
<nav class="foot-links">
<a href="/">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
</div>
</footer>