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

303
classes.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -6,38 +6,59 @@
<title>Dance Classes — Sabor Flow Da Nang</title>
<meta name="description" content="Latin dance classes in Da Nang. Find Salsa, Bachata, Kizomba, and Zouk classes for all levels.">
<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">Studios</a></li>
<li><a href="classes.html" class="active">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">Studios</a>
<a href="classes.html" class="active">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="container">
<div class="page-header">
<p class="section-label">Da Nang &middot; Hoi An</p>
<h1>Dance Classes</h1>
<p class="subtitle">Whether you&rsquo;re just starting out or looking to sharpen your moves &mdash; there&rsquo;s a class for you.</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">Studios</a>
<a href="classes.html" class="active">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>Classes</em></h1>
<div class="info">
Whether you're just starting out or looking to sharpen your moves &mdash; there's a class for you in Da Nang and Hoi An.
</div>
</div>
<div class="filter-bar">
<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>
@@ -46,206 +67,138 @@
<button class="filter-pill" data-filter="beginner">Beginner</button>
<button class="filter-pill" data-filter="advanced">Advanced</button>
</div>
</div>
<div class="card-grid">
<div class="sfB-cards two">
<!-- Lucho Giraldes — Salsa -->
<div class="card filterable-card" data-styles="salsa,beginner,intermediate,advanced">
<div class="card-body">
<div class="card-title">Lucho Giraldes — Salsa</div>
<div class="tags">
<span class="tag tag-salsa">Salsa On1</span>
<span class="tag tag-salsa">Salsa On2</span>
<span class="tag tag-beginner">Beginner</span>
<span class="tag tag-intermediate">Intermediate</span>
<span class="tag tag-advanced">Advanced</span>
<div class="sfB-card-x filterable-card" data-styles="salsa,beginner,intermediate,advanced">
<div class="stripe salsa"></div>
<h3>Lucho Giraldes — Salsa</h3>
<div class="ts">
<span class="sfB-chip salsa">Salsa On1</span>
<span class="sfB-chip salsa">Salsa On2</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>
<span>Lucho Giraldes &mdash; 20+ years experience</span>
<div class="info">
<div class="row"><span class="ic">👤</span><span>Lucho Giraldes &mdash; 20+ years experience</span></div>
<div class="row"><span class="ic">📍</span><span>Various venues in Da Nang (see website)</span></div>
<div class="row"><span class="ic">📅</span><span>Check website for current schedule</span></div>
<div class="row"><span class="ic">🎓</span><span>Beginner · Intermediate · Advanced</span></div>
</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>Various venues in Da Nang (see website for details)</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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Check website for current schedule</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>
<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>
salsadanang.com
</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>
<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>
@salsadanang
</a>
</div>
</div>
</div>
<!-- Daisy Nguyen -->
<div class="card filterable-card" data-styles="bachata,kizomba,intermediate">
<div class="card-body">
<div class="card-title">Daisy Nguyen</div>
<div class="tags">
<span class="tag tag-bachata">Bachata</span>
<span class="tag tag-kizomba">Kizomba</span>
<span class="tag tag-intermediate">Intermediate</span>
<div class="sfB-card-x filterable-card" data-styles="bachata,kizomba,intermediate">
<div class="stripe bachata"></div>
<h3>Daisy Nguyen</h3>
<div class="ts">
<span class="sfB-chip bachata">Bachata</span>
<span class="sfB-chip kizomba">Kizomba</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>
<span>Daisy Nguyen &mdash; local instructor &amp; social organizer</span>
<div class="info">
<div class="row"><span class="ic">👤</span><span>Daisy Nguyen &mdash; local instructor &amp; social organizer</span></div>
<div class="row"><span class="ic">📍</span><span>Da Nang (venues change &mdash; follow for updates)</span></div>
<div class="row"><span class="ic">📅</span><span>Tuesday at Caliz Bar · Sunday at Corner Bar</span></div>
</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 (venues change &mdash; follow for updates)</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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Tuesday at Caliz Bar &middot; Sunday at Corner Bar</span>
</div>
<div class="card-links">
<a href="https://www.instagram.com/saborflowdanang/" 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>
<div class="links">
<a href="https://www.instagram.com/saborflowdanang/" 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>
Check Instagram
</a>
</div>
</div>
</div>
<!-- Frog Goose — Bachata Workshop -->
<div class="card filterable-card" data-styles="bachata,beginner,intermediate">
<div class="card-body">
<div class="card-title">Frog Goose — Bachata Workshop</div>
<div class="tags">
<span class="tag tag-bachata">Bachata</span>
<span class="tag tag-beginner">Beginner</span>
<span class="tag tag-intermediate">Intermediate</span>
<div class="sfB-card-x filterable-card" data-styles="bachata,beginner,intermediate">
<div class="stripe bachata"></div>
<h3>Frog Goose — Bachata Workshop</h3>
<div class="ts">
<span class="sfB-chip 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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
<span>Luu Nhat Phuong, Phong &amp; Shai</span>
<div class="info">
<div class="row"><span class="ic">👥</span><span>Luu Nhat Phuong, Phong &amp; Shai</span></div>
<div class="row"><span class="ic">📍</span><span>292 Vo Nguyen Giap, Ngu Hanh Son, Da Nang</span></div>
<div class="row"><span class="ic">📅</span><span>Every Monday &mdash; Workshop 8:30 PM · Social 9:30 PM</span></div>
<div class="row"><span class="ic">🎓</span><span>Beginner · Intermediate</span></div>
</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>292 Vo Nguyen Giap, 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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Every Monday &mdash; Workshop 8:30 PM &middot; Social from 9:30 PM</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>
<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>
</div>
<!-- Sean Kim — Kizomba & Bachata -->
<div class="card filterable-card" data-styles="kizomba,bachata,intermediate">
<div class="card-body">
<div class="card-title">Sean Kim — Kizomba &amp; Bachata</div>
<div class="tags">
<span class="tag tag-kizomba">Kizomba</span>
<span class="tag tag-bachata">Bachata</span>
<span class="tag tag-intermediate">Intermediate</span>
<div class="sfB-card-x filterable-card" data-styles="kizomba,bachata,intermediate">
<div class="stripe kizomba"></div>
<h3>Sean Kim — Kizomba &amp; Bachata</h3>
<div class="ts">
<span class="sfB-chip kizomba">Kizomba</span>
<span class="sfB-chip 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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
<span>Sean Kim &mdash; organizer of the Wednesday Bachata Kiz Night</span>
<div class="info">
<div class="row"><span class="ic">👤</span><span>Sean Kim &mdash; organizer of the Wednesday Bachata Kiz Night</span></div>
<div class="row"><span class="ic">📍</span><span>Ket Fai Bar, Da Nang</span></div>
<div class="row"><span class="ic">📅</span><span>Wednesday &mdash; Kizomba 7:30 PM · Bachata 9 PM</span></div>
</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>Ket Fai Bar, 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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Wednesday &mdash; Kizomba from 19:30 &middot; Bachata from 21:00</span>
</div>
<div class="card-links">
<a href="connect.html" 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>
Contact via Sabor Flow Da Nang
<div class="links">
<a href="connect.html">
<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>
Contact via Sabor Flow
</a>
</div>
</div>
</div>
<!-- 50 Decibels -->
<div class="card filterable-card" data-styles="kizomba,zouk,salsa,bachata,beginner">
<div class="card-body">
<div class="card-title">50 Decibels</div>
<div class="tags">
<span class="tag tag-kizomba">Kizomba</span>
<span class="tag tag-zouk">Zouk</span>
<span class="tag tag-salsa">Salsa</span>
<span class="tag tag-bachata">Bachata</span>
<span class="tag tag-beginner">Beginner-friendly</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>36 Đ. Ng. Thi Si, Bac My An, 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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Monday 9 PM &mdash; Kizomba &amp; Zouk night</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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Friday 9 PM &mdash; Latin Vibes (Salsa, Bachata, Kizomba)</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"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
<span>~$3 USD cover</span>
<div class="sfB-card-x filterable-card" data-styles="kizomba,zouk,salsa,bachata,beginner">
<div class="stripe multi"></div>
<h3>50 Decibels</h3>
<div class="ts">
<span class="sfB-chip kizomba">Kizomba</span>
<span class="sfB-chip zouk">Zouk</span>
<span class="sfB-chip salsa">Salsa</span>
<span class="sfB-chip bachata">Bachata</span>
</div>
<div class="info">
<div class="row"><span class="ic">📍</span><span>36 Ng. Thi Si, Bac My An, Ngu Hanh Son, Da Nang</span></div>
<div class="row"><span class="ic">📅</span><span>Monday 9 PM &mdash; Kizomba &amp; Zouk night</span></div>
<div class="row"><span class="ic">📅</span><span>Friday 9 PM &mdash; Latin Vibes (Salsa, Bachata, Kizomba)</span></div>
<div class="row"><span class="ic">💵</span><span>~$3 USD cover · Beginner-friendly</span></div>
</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">Teaching in Da Nang and not listed here? Get in touch.</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>
<div class="sfB-suggest">
<p>Teaching in Da Nang and not listed here? Get in touch.</p>
<a href="connect.html" class="sfB-btn ghost">Contact Us</a>
</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>
<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="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>
<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>

234
connect.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -6,135 +6,155 @@
<title>Connect — Sabor Flow Da Nang</title>
<meta name="description" content="Follow Sabor Flow Da Nang on Instagram and get in touch with the Latin dance community.">
<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" class="active">Connect</a></li>
<li><a href="studios.html">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" class="active">Connect</a>
<a href="studios.html">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">Stay in the loop</p>
<h1>Connect</h1>
<p class="subtitle">Follow for the latest socials, photos, and community news.</p>
</div>
<!-- Instagram profile card -->
<div class="ig-profile-card">
<img src="assets/logo.jpg" alt="Sabor Flow Da Nang" class="ig-avatar">
<div class="ig-handle">@saborflowdanang</div>
<p class="ig-desc">Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of the week.</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
<svg width="14" height="14" 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>
<span>Open on Instagram</span>
<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>
</div>
<!-- Latest posts -->
<p class="section-label" style="margin-bottom:1.5rem">Latest posts</p>
<!--
HOW TO ADD REAL INSTAGRAM EMBEDS:
1. Open instagram.com and go to any post from @saborflowdanang
2. Click the three dots on the post → "Embed"
3. Copy the embed code and paste it here, replacing one of the placeholders below.
The <script> tag at the bottom of the page loads them automatically.
-->
<div class="ig-embeds">
<div class="ig-placeholder">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><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>
<p>Latest posts from the community</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
</div>
<div class="ig-placeholder">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
<p>Videos, reels, and social dance moments</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
</div>
<div class="ig-placeholder">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<p>Workshops, festivals, and special events</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
</div>
</div>
<!-- Contact -->
<div class="contact-box">
<p class="section-label">Get in touch</p>
<h2 style="margin-bottom:1rem">Want to collaborate?</h2>
<p style="color:var(--muted);max-width:540px;margin:0 auto 2rem">
Want to host a social? Suggest a venue? Collaborate on an event? Or just say hi?
We&rsquo;d love to hear from you &mdash; we don&rsquo;t bite, we just dance.
</p>
<div class="contact-ctas">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
<svg width="14" height="14" 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>
<span>DM on Instagram</span>
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" 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="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
<span>Join the Facebook Group</span>
<nav class="sfB-nav">
<a href="/">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html" class="active">Connect</a>
<a href="studios.html">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>Stay <em>Connected</em></h1>
<div class="info">
Sabor Flow lives on Instagram and inside a few group chats. There's no app, no email list, no spam &mdash; just messages from real dancers about real parties. Pick whichever channel fits.
</div>
</div>
<footer class="footer" style="margin-top:4rem">
<div class="container">
<div class="footer-inner">
<!-- Instagram profile hero -->
<div class="sfB-connect-hero">
<div class="ch-left">
<div class="ava"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<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 class="h">@saborflowdanang</div>
<h2>The Instagram is the source of truth.</h2>
<p>Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of the week.</p>
</div>
<nav class="footer-nav">
<a href="index.html">Home</a>
</div>
<div class="ch-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn primary">
<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>
Follow on Instagram
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">
<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>
Join Facebook Group
</a>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">
<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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
DM Us
</a>
</div>
</div>
<!-- Instagram grid -->
<div style="margin-top: 48px;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
<h2 style="font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -1px;">
Latest from the <em style="font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; color: var(--sf-coral);">floor</em>
</h2>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--sf-gold); letter-spacing: 1px; text-decoration: none;">VIEW ALL ↗</a>
</div>
<div class="sfB-igrid">
<div class="ig">
<span class="heart">♡ 142</span>
<span class="lbl">// caliz · sensual night</span>
</div>
<div class="ig">
<span class="heart">♡ 89</span>
<span class="lbl">// shai · workshop</span>
</div>
<div class="ig">
<span class="heart">♡ 211</span>
<span class="lbl">// hoi an · la riva</span>
</div>
<div class="ig">
<span class="heart">♡ 67</span>
<span class="lbl">// malibu · salsa</span>
</div>
<div class="ig">
<span class="heart">♡ 178</span>
<span class="lbl">// bachata party</span>
</div>
<div class="ig">
<span class="heart">♡ 93</span>
<span class="lbl">// ket fai · kizomba</span>
</div>
<div class="ig">
<span class="heart">♡ 134</span>
<span class="lbl">// last call · sunday</span>
</div>
<div class="ig">
<span class="heart">♡ 256</span>
<span class="lbl">// vlx · da nang</span>
</div>
</div>
</div>
<!-- Collaborate banner -->
<div class="sfB-collab">
<div class="l">/ COLLABORATE</div>
<h2>Run a venue? <em>Teach?</em><br>DJ Latin?</h2>
<p>We're always looking to expand the floor. If you're an instructor, DJ, or you run a bar that wants to host a Latin night &mdash; let's talk. Sabor Flow is non-profit and connects people, never charges.</p>
<div class="acts">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn primary">Get in touch ↗</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">Facebook Group ↗</a>
</div>
</div>
</main>
<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="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>
<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>
<script async src="//www.instagram.com/embed.js"></script>
<script src="js/main.js"></script>
</body>
</html>

1927
css/style.css
View File

File diff suppressed because it is too large Load Diff

240
festivals.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -6,78 +6,94 @@
<title>Festivals — Sabor Flow Da Nang</title>
<meta name="description" content="Latin dance festivals in Da Nang, Vietnam. Multi-day events with international artists, workshops, and social dancing.">
<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">Studios</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="festivals.html" class="active">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">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html" class="active">Festivals</a>
</nav>
<div class="container">
<div class="page-header">
<p class="section-label">Da Nang 2026</p>
<h1>Festivals</h1>
<p class="subtitle">Multi-day Latin dance events right here in Da Nang &mdash; workshops, performances, and non-stop social dancing.</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">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html" class="active">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>Da Nang <em>Festivals</em></h1>
<div class="info">
Multi-day Latin dance events right here in Da Nang &mdash; workshops, performances, and non-stop social dancing with international artists.
</div>
</div>
<!-- Latin Escape Da Nang 2026 -->
<div class="festival-card festival-card-le">
<div class="festival-poster">
<div class="festival-poster-content">
<h2>Latin Escape Da Nang</h2>
<div class="festival-dates">May 15 &ndash; 17, 2026</div>
<div class="sfB-fest">
<div class="poster coral">
<span class="pill">Festival · 2026</span>
<div>
<div class="name">Latin <em>Escape</em></div>
<div class="dates">May 15 – 17, 2026</div>
</div>
<div class="big">LE</div>
</div>
<div class="body">
<div class="meta">
<div class="item">
<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="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span><b>May 15–17, 2026</b></span>
</div>
<div class="item">
<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="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>Royal Lotus Hotel · <b>My Khe Beach, Da Nang</b></span>
</div>
</div>
<div class="festival-body">
<div class="festival-meta">
<div class="festival-meta-item">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<strong>May 15&ndash;17, 2026</strong>
<div class="styles">
<span class="sfB-chip bachata">Bachata</span>
<span class="sfB-chip kizomba">Kizomba</span>
</div>
<div class="festival-meta-item">
<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>
Royal Lotus Hotel &middot; <strong>My Khe Beach, Da Nang</strong>
</div>
<div class="festival-meta-item">
<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="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
<strong>Bachata &middot; Kizomba</strong>
</div>
</div>
<div class="tags" style="margin-bottom:1rem">
<span class="tag tag-bachata">Bachata</span>
<span class="tag tag-kizomba">Kizomba</span>
</div>
<p class="festival-desc">
A destination-style festival set against the backdrop of Da Nang&rsquo;s stunning beach. Three days of workshops, social parties, and performances with international artists. The perfect excuse to combine dancing with a beach getaway.
</p>
<div class="festival-links">
<a href="https://www.facebook.com/latin.escape.danang/" target="_blank" rel="noopener" class="btn btn-ghost">
<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>
<p>A destination-style festival set against the backdrop of Da Nang's stunning beach. Three days of workshops, social parties, and performances with international artists. The perfect excuse to combine dancing with a beach getaway.</p>
<div class="acts">
<a href="https://www.facebook.com/latin.escape.danang/" 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>
<a href="https://www.instagram.com/latin.escape.danang/" target="_blank" rel="noopener" class="btn btn-ghost">
<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>
<a href="https://www.instagram.com/latin.escape.danang/" 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>
<a href="https://www.tickettailor.com/events/latinescapedanang" target="_blank" rel="noopener" class="btn btn-primary">
<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="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
<a href="https://www.tickettailor.com/events/latinescapedanang" target="_blank" rel="noopener" class="primary">
<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="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
Buy Tickets
</a>
</div>
@@ -85,95 +101,69 @@
</div>
<!-- Vietnam Latin Xperience 2026 -->
<div class="festival-card festival-card-vlx">
<div class="festival-poster">
<div class="festival-poster-content">
<h2>Vietnam Latin Xperience</h2>
<div class="festival-dates">October 2 &ndash; 4, 2026</div>
<div class="sfB-fest">
<div class="poster teal">
<span class="pill">Festival · 2026</span>
<div>
<div class="name">Vietnam Latin <em>Xperience</em></div>
<div class="dates">October 2 – 4, 2026</div>
</div>
<div class="big">VLX</div>
</div>
<div class="body">
<div class="meta">
<div class="item">
<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="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span><b>October 2–4, 2026</b></span>
</div>
<div class="item">
<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="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 Beach · <b>Da Nang</b></span>
</div>
</div>
<div class="festival-body">
<div class="festival-meta">
<div class="festival-meta-item">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<strong>October 2&ndash;4, 2026</strong>
<div class="styles">
<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="festival-meta-item">
<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>
Da Nang Beach &middot; <strong>Da Nang</strong>
</div>
<div class="festival-meta-item">
<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="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
<strong>Salsa &middot; Bachata &middot; Kizomba &middot; Zouk &amp; more</strong>
</div>
</div>
<div class="tags" style="margin-bottom:1rem">
<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>
<span class="tag tag-tango">Urban Kiz</span>
<span class="tag tag-tango">Konpa</span>
</div>
<p class="festival-desc">
Now in its 7th edition and recently moved to Da Nang, the Vietnam Latin Xperience (VLX) is one of Southeast Asia&rsquo;s most beloved Latin festivals. Three days of workshops, bootcamps, and social parties with a warm, family-like community vibe. International artists, beautiful beach setting, unforgettable nights.
</p>
<div class="festival-links">
<a href="https://vietnamlatinxperience.com" target="_blank" rel="noopener" class="btn btn-ghost">
<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>
<p>Now in its 7th edition and recently moved to Da Nang, the Vietnam Latin Xperience (VLX) is one of Southeast Asia's most beloved Latin festivals. Three days of workshops, bootcamps, and social parties with a warm, family-like community vibe.</p>
<div class="acts">
<a href="https://vietnamlatinxperience.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.facebook.com/VietnamLatinXperience/" target="_blank" rel="noopener" class="btn btn-ghost">
<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>
<a href="https://www.facebook.com/VietnamLatinXperience/" 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>
<a href="https://www.tickettailor.com" target="_blank" rel="noopener" class="btn btn-primary">
<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="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
<a href="https://www.tickettailor.com" target="_blank" rel="noopener" class="primary">
<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="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
Buy Tickets
</a>
</div>
</div>
</div>
<div 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 of a festival we should add? Or organizing one yourself?</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>Tell Us About It</span>
</a>
</div>
<div class="sfB-suggest">
<p>Know of a festival we should add? Or organizing one yourself?</p>
<a href="connect.html" class="sfB-btn ghost">Tell Us About It</a>
</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>
<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="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>
<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>

346
index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -6,167 +6,223 @@
<title>Sabor Flow Da Nang — Latin Dance Community</title>
<meta name="description" content="Da Nang's Latin dance community. Weekly socials, studios, classes, and festivals for 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" class="active">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="connect.html">Connect</a></li>
<li><a href="studios.html">Studios</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="festivals.html">Festivals</a></li>
</ul>
</div>
</nav>
<!-- Background blobs -->
<div class="sfB-bg" aria-hidden="true"></div>
<!-- HERO -->
<section class="hero">
<div class="hero-content">
<p class="hero-eyebrow">Da Nang &middot; Vietnam</p>
<img src="assets/logo.jpg" alt="Sabor Flow Da Nang" class="hero-logo">
<h1 class="hero-title">Sabor Flow<span class="hero-title-city">Da Nang</span></h1>
<div class="hero-rule"></div>
<p class="hero-subtitle">Latin Dance Community</p>
<div class="hero-ctas">
<a href="schedule.html" class="btn btn-primary">
<span>Weekly Schedule</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
<div class="hero-divider"></div>
<a href="studios.html" class="cta-link">
Studios
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
<div class="hero-divider"></div>
<a href="festivals.html" class="cta-link">
Festivals
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
</div>
</section>
<!-- ABOUT -->
<section>
<div class="container">
<p class="section-label">What We Are</p>
<h2 style="margin-bottom:2.5rem">Community. Music. Dance.</h2>
<div class="grid-tight about-grid">
<div class="about-card">
<svg class="card-icon" 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"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<h3>Social Dancing</h3>
<p>Almost-daily gatherings at bars, clubs, and restaurants in Da Nang and Hoi An. Everyone is welcome — beginner or seasoned pro, no judgment.</p>
</div>
<div class="about-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
<h3>Salsa &middot; Bachata &middot; Kizomba</h3>
<p>The best Latin rhythms all week long. Salsa, Bachata, Kizomba, and the fast-growing Zouk. Great music, warm people, genuine connection.</p>
</div>
<div class="about-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
<h3>Community First</h3>
<p>A free, non-profit initiative by two Vietnamese women passionate about dance. Here to support and grow Da Nang's Latin dance scene.</p>
</div>
</div>
</div>
</section>
<!-- COMING UP -->
<section>
<div class="container">
<p class="section-label">This Week</p>
<h2 style="margin-bottom:2.5rem">Coming Up</h2>
<div class="grid-tight teaser-grid" id="schedule-teaser"></div>
<div class="mt-3">
<a href="schedule.html" class="cta-link">
View full schedule
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
</div>
</section>
<!-- INSTAGRAM -->
<section>
<div class="container">
<div class="ig-banner">
<p class="section-label" style="justify-content:center">Stay Connected</p>
<h2 style="margin-bottom:0.65rem">Follow the Community</h2>
<p>Catch the latest social dance photos, videos, and event announcements.</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
<svg width="14" height="14" 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>
<span>@saborflowdanang</span>
</a>
</div>
</div>
</section>
<!-- EXPLORE -->
<section>
<div class="container">
<p class="section-label">Explore</p>
<h2 style="margin-bottom:2.5rem">Find Your Scene</h2>
<div class="grid-tight explore-grid">
<a href="studios.html" class="explore-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01M16 6h.01M8 10h.01M16 10h.01"/></svg>
<div class="card-title">Dance Studios</div>
<p class="card-text">Dedicated schools offering Salsa, Bachata, Kizomba and more in Da Nang.</p>
</a>
<a href="classes.html" class="explore-card">
<svg class="card-icon" 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>
<div class="card-title">Dance Classes</div>
<p class="card-text">From total beginner to advanced — find the right class for your level.</p>
</a>
<a href="festivals.html" class="explore-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<div class="card-title">Festivals</div>
<p class="card-text">Multi-day events with international artists, workshops, and socials.</p>
</a>
</div>
</div>
</section>
<footer class="footer">
<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>
<!-- Mobile nav overlay -->
<nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
<button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
<a href="/" class="active">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">
<!-- Topbar -->
<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" aria-label="Main navigation">
<a href="/" class="active">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="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>
<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
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- Hero -->
<section class="sfB-hero">
<div class="left">
<div class="kicker">
<span class="dot"></span>
Latin Social Dance · Da Nang · Hoi An
</div>
<h1>
Feel the <em class="glow">Sabor</em>
<span class="vn">DA NANG · <span>VIETNAM</span></span>
</h1>
<p class="lead">
Latin social dance almost every night of the week. Salsa, Bachata, Kizomba, Zouk — at bars and restaurants across Da Nang and Hoi An. Everyone welcome, no partner needed.
</p>
<div class="ctas">
<a href="schedule.html" class="sfB-btn primary">
Weekly Schedule
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
<a href="festivals.html" class="sfB-btn ghost">Upcoming Festivals</a>
</div>
<div class="meta-row">
<div class="item">
<div class="v">10+</div>
<div class="l">Socials/week</div>
</div>
<div class="item">
<div class="v">4</div>
<div class="l">Dance styles</div>
</div>
<div class="item">
<div class="v">2</div>
<div class="l">Cities</div>
</div>
<div class="item">
<div class="v">∞</div>
<div class="l">Good vibes</div>
</div>
</div>
</div>
<!-- Card stack (decorative) -->
<div class="hero-right" aria-hidden="true">
<div class="sfB-stack-card c1">
<div class="ph"></div>
<span class="tag">Salsa</span>
<span class="ph-label">Every Thursday · Malibu</span>
</div>
<div class="sfB-stack-card c2">
<div class="ph"></div>
<span class="tag">Kizomba</span>
<span class="ph-label">Every Wednesday · Ket Fai</span>
</div>
<div class="sfB-stack-card c3">
<div class="ph"></div>
<span class="tag">Bachata</span>
<span class="ph-label">Every Monday · Webe Coffee</span>
</div>
<div class="badge">
<div class="ic">🎶</div>
<div>
<div class="t">Socials almost every night</div>
<div class="s">Da Nang · Hoi An</div>
</div>
</div>
</div>
</section>
<!-- Marquee -->
<div class="sfB-marquee" aria-hidden="true">
<div class="track">
<span>Salsa</span>
<span>Bachata</span>
<span>Kizomba</span>
<span>Zouk</span>
<span>Da Nang</span>
<span>Hoi An</span>
<span>Salsa</span>
<span>Bachata</span>
<span>Kizomba</span>
<span>Zouk</span>
<span>Da Nang</span>
<span>Hoi An</span>
</div>
</div>
<!-- Pillars -->
<section class="sfB-pillars">
<div class="head">
<h2>What we <em>do</em></h2>
<span class="num">— 01 / 03</span>
</div>
<div class="sfB-grid3">
<div class="sfB-pcard c1">
<span class="num">01</span>
<div class="arr">→</div>
<h3>Social <em>Dancing</em></h3>
<p>Almost-daily gatherings at bars, clubs, and restaurants. Small cover charge, great music, warm people. Beginner or pro — everyone is welcome.</p>
</div>
<div class="sfB-pcard c2">
<span class="num">02</span>
<div class="arr">→</div>
<h3>4 <em>Styles</em></h3>
<p>Salsa, Bachata, Kizomba, and the fast-growing Zouk. Each night has its own vibe and music ratio — find the scene that moves you.</p>
</div>
<div class="sfB-pcard c3">
<span class="num">03</span>
<div class="arr">→</div>
<h3><em>Community</em> First</h3>
<p>A free, non-profit initiative by two Vietnamese women passionate about dance. Here to support and grow Da Nang's Latin dance scene.</p>
</div>
</div>
</section>
<!-- Coming up teaser -->
<section class="sfB-coming">
<div class="head">
<h2>Coming up <em>this week</em></h2>
<a href="schedule.html">
Full schedule
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
<div class="sfB-coming-row" id="sfB-coming-row"></div>
</section>
<!-- CTA block -->
<div class="sfB-cta">
<div>
<div class="quote">
Dance is how we <em>connect</em> — no language needed.
</div>
<div class="who">Sabor Flow Da Nang</div>
</div>
<div class="cta-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">
Follow on Instagram
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="alt">
Join Facebook Group
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
</a>
</div>
</div>
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
<!-- Footer -->
<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>

144
js/main.js
View File

@@ -1,81 +1,117 @@
// ============================================================
// ============================================================
// Sabor Flow Da Nang — main.js
// Update SCHEDULE array monthly when the weekly program changes.
// ============================================================
const SCHEDULE = [
{ day: 'Monday', venue: 'Webe Coffee', social: 'BOM', music: '8 Bachata · 1 Salsa · 1 Kizomba', city: 'Da Nang', organizer: 'Luu Phuong & Shai', mapUrl: 'https://maps.app.goo.gl/jvaQgcNt4doYwZ2N7' },
{ day: 'Tuesday', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
{ day: 'Tuesday', venue: 'Caliz Bar', social: 'Sensual Night', music: '3 Bachata · 2 Salsa · 2 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/place/C%C3%A1liz+Wine+Bar/@16.0485026,108.2470699,17z' },
{ day: 'Wednesday', venue: 'Ket Fai Bar', social: 'Bachata Kiz Night', music: 'Kizomba 19:30 · Bachata 21:00', city: 'Da Nang', organizer: 'Sean Kim', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Ket+Fai+Bar+Da+Nang+Vietnam' },
{ day: 'Thursday', venue: 'Malibu', social: 'Salsa Nights', music: '2 Salsa · 2 Bachata', city: 'Da Nang', organizer: 'Lucho Giraldes', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Malibu+Beach+Club+Da+Nang+Vietnam' },
{ day: 'Friday', venue: 'An Thuong By Night', social: 'Dance Unity Party', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Da Nang', organizer: 'Nadiya Yagfarova', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
{ day: 'Saturday', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
{ day: 'Saturday', venue: 'An Thuong By Night', social: 'Bachata Party', music: 'Only Bachata', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
{ day: 'Sunday', venue: 'Last Call', social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Last+Call+Bar+Da+Nang+Vietnam' },
{ day: 'Sunday', venue: 'Corner Bar', social: 'Sunday Latin', music: '3 Bachata · 2 Salsa · 3 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Corner+Bar+Da+Nang+Vietnam' },
{ day: 'Monday', when: '8:30 pm', venue: 'Webe Coffee', social: 'BOM', music: '8 Bachata · 1 Salsa · 1 Kizomba', city: 'Da Nang', organizer: 'Luu Phuong & Shai', mapUrl: 'https://maps.app.goo.gl/jvaQgcNt4doYwZ2N7' },
{ day: 'Tuesday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
{ day: 'Tuesday', when: '9 pm', venue: 'Caliz Bar', social: 'Sensual Night', music: '3 Bachata · 2 Salsa · 2 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/place/C%C3%A1liz+Wine+Bar/@16.0485026,108.2470699,17z' },
{ day: 'Wednesday', when: '7:30 pm', venue: 'Ket Fai Bar', social: 'Bachata Kiz Night', music: 'Kizomba 7:30 · Bachata 9 pm', city: 'Da Nang', organizer: 'Sean Kim', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Ket+Fai+Bar+Da+Nang+Vietnam' },
{ day: 'Thursday', when: '9 pm', venue: 'Malibu', social: 'Salsa Nights', music: '2 Salsa · 2 Bachata', city: 'Da Nang', organizer: 'Lucho Giraldes', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Malibu+Beach+Club+Da+Nang+Vietnam' },
{ day: 'Friday', when: '9 pm', venue: 'An Thuong By Night', social: 'Dance Unity Party', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Da Nang', organizer: 'Nadiya Yagfarova', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
{ day: 'Saturday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
{ day: 'Saturday', when: '9 pm', venue: 'An Thuong By Night', social: 'Bachata Party', music: 'Only Bachata', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
{ day: 'Sunday', when: '9 pm', venue: 'Last Call', social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Last+Call+Bar+Da+Nang+Vietnam' },
{ day: 'Sunday', when: '9 pm', venue: 'Corner Bar', social: 'Sunday Latin', music: '3 Bachata · 2 Salsa · 3 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Corner+Bar+Da+Nang+Vietnam' },
];
// ---- Navigation ----
const DAYS_ORDER = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
function getTodayName() {
return DAYS_ORDER[new Date().getDay()];
}
// Parse "2 Salsa · 3 Bachata · 1 Kizomba" into sfB-chip spans
function musicToChips(music) {
const styleMap = { salsa: 'salsa', bachata: 'bachata', kizomba: 'kizomba', zouk: 'zouk' };
return music.split('·').map(s => s.trim()).filter(Boolean).map(segment => {
let cls = '';
for (const [key, val] of Object.entries(styleMap)) {
if (segment.toLowerCase().includes(key)) { cls = val; break; }
}
return `<span class="sfB-chip ${cls}">${segment}</span>`;
}).join('');
}
// ---- Nav (mobile) ----
function initNav() {
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('nav-links');
if (!hamburger || !navLinks) return;
const hamburger = document.getElementById('sfB-hamburger');
const mobileNav = document.getElementById('sfB-mobile-nav');
const closeBtn = document.getElementById('sfB-mobile-nav-close');
hamburger.addEventListener('click', () => {
const isOpen = navLinks.classList.toggle('open');
hamburger.setAttribute('aria-expanded', String(isOpen));
if (!hamburger || !mobileNav) return;
hamburger.addEventListener('click', () => mobileNav.classList.add('open'));
if (closeBtn) closeBtn.addEventListener('click', () => mobileNav.classList.remove('open'));
mobileNav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => mobileNav.classList.remove('open'));
});
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => navLinks.classList.remove('open'));
// close on backdrop click
mobileNav.addEventListener('click', e => {
if (e.target === mobileNav) mobileNav.classList.remove('open');
});
}
// ---- Schedule: full table ----
function renderScheduleTable() {
const tbody = document.getElementById('schedule-tbody');
if (!tbody) return;
// ---- Schedule: full list (schedule.html) ----
function renderScheduleList() {
const list = document.getElementById('sfB-schedule-list');
if (!list) return;
tbody.innerHTML = SCHEDULE.map(row => `
<tr>
<td data-label="Day">
<span class="day-badge day-${row.day.toLowerCase()}">${row.day}</span>
</td>
<td data-label="Venue" class="venue-name">
${row.mapUrl
? `<a href="${row.mapUrl}" target="_blank" rel="noopener" class="venue-map-link">${row.venue}<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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></a>`
: row.venue}
</td>
<td data-label="Social" class="social-name">${row.social}</td>
<td data-label="Music" class="music-text">${row.music}</td>
<td data-label="City"><span class="city-badge">${row.city}</span></td>
<td data-label="Organizer" class="organizer-text">${row.organizer}</td>
</tr>
`).join('');
const today = getTodayName();
list.innerHTML = SCHEDULE.map(row => {
const isToday = row.day === today;
const cityClass = row.city === 'Hoi An' ? 'hoian' : 'danang';
const venueEl = row.mapUrl
? `<a href="${row.mapUrl}" target="_blank" rel="noopener">${row.venue}</a>`
: row.venue;
return `
<div class="sfB-row${isToday ? ' today' : ''}">
<div class="col-day">
<span class="name">${row.day}</span>
<span class="when">${row.when || ''}</span>
${isToday ? '<span class="tonight-label">▶ Tonight</span>' : ''}
</div>
<div class="col-venue">
<span class="pin">📍</span>
${venueEl}
</div>
<div class="col-social">
${row.social}
<span class="sub">${row.organizer}</span>
</div>
<div class="col-music">${musicToChips(row.music)}</div>
<div><span class="col-city ${cityClass}">${row.city}</span></div>
<div class="col-org">${row.organizer}</div>
</div>`;
}).join('');
}
// ---- Home: "Coming up this week" teaser (3 events starting from today) ----
// ---- Home: "Coming up" teaser (4 cards starting from today) ----
function renderScheduleTeaser() {
const container = document.getElementById('schedule-teaser');
const container = document.getElementById('sfB-coming-row');
if (!container) return;
const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const today = DAYS[new Date().getDay()];
const startIdx = DAYS.indexOf(today);
const order = [...DAYS.slice(startIdx), ...DAYS.slice(0, startIdx)];
const today = getTodayName();
const startIdx = DAYS_ORDER.indexOf(today);
const order = [...DAYS_ORDER.slice(startIdx), ...DAYS_ORDER.slice(0, startIdx)];
const sorted = [...SCHEDULE].sort(
(a, b) => order.indexOf(a.day) - order.indexOf(b.day)
);
container.innerHTML = sorted.slice(0, 3).map(row => `
<div class="teaser-card">
<div class="teaser-day">${row.day}</div>
<div class="teaser-social">${row.social}</div>
<div class="teaser-venue">@ ${row.venue}</div>
<div class="teaser-meta">${row.music} &middot; ${row.city}</div>
</div>
container.innerHTML = sorted.slice(0, 4).map(row => `
<a href="schedule.html" class="sfB-tcard">
<div class="day">${row.day}</div>
<div class="when">${row.when || ''}</div>
<h4>${row.social}</h4>
<div class="at">@ ${row.venue} · ${row.city}</div>
<div class="chips">${musicToChips(row.music)}</div>
</a>
`).join('');
}
@@ -107,7 +143,7 @@ function initFilters() {
// ---- Init ----
document.addEventListener('DOMContentLoaded', () => {
initNav();
renderScheduleTable();
renderScheduleList();
renderScheduleTeaser();
initFilters();
});

159
schedule.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -6,94 +6,109 @@
<title>Weekly Schedule — Sabor Flow Da Nang</title>
<meta name="description" content="The weekly Latin social dance schedule in Da Nang and Hoi An. Salsa, Bachata, Kizomba, Zouk — every day of the week.">
<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" class="active">Schedule</a></li>
<li><a href="connect.html">Connect</a></li>
<li><a href="studios.html">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" aria-label="Mobile navigation">
<button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
<a href="/">Home</a>
<a href="schedule.html" class="active">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="container">
<div class="page-header">
<p class="section-label">Da Nang &middot; Hoi An</p>
<h1>Weekly Schedule</h1>
<p class="subtitle">Your guide to social dancing — every single week.</p>
</div>
<div class="schedule-note">
<svg width="16" height="16" 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="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>Music ratios (e.g. <strong style="color:var(--text)">2 Salsa · 2 Bachata · 2 Kizomba</strong>) show approximate songs per style per rotation. Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal)">@saborflowdanang</a> and the <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" style="color:var(--teal)">Da Nang SBK group</a> for real-time updates. Pop-up parties for <strong style="color:var(--text)">Zouk</strong> and <strong style="color:var(--text)">Tango</strong> are announced there too.</span>
</div>
<div class="schedule-table-wrap">
<table class="schedule-table">
<thead>
<tr>
<th>Day</th>
<th>Venue</th>
<th>Social</th>
<th>Music</th>
<th>City</th>
<th>Organizer</th>
</tr>
</thead>
<tbody id="schedule-tbody"></tbody>
</table>
</div>
<p class="mt-3" style="color:var(--muted);font-size:.78rem">Schedule updated monthly &mdash; last update: <strong style="color:var(--text);font-weight:500">April 2026</strong></p>
</div>
<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>
<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>
<p class="footer-tagline">Da Nang's Latin dance community</p>
<nav class="sfB-nav">
<a href="/">Home</a>
<a href="schedule.html" class="active">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="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>
<nav class="footer-nav">
<a href="index.html">Home</a>
</header>
<main class="sfB-page">
<div class="sfB-page-head">
<h1>Weekly <em>Schedule</em></h1>
<div class="info">
Music ratios (e.g. <b>2 Salsa · 2 Bachata · 2 Kizomba</b>) show approximate songs per style per rotation. Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">@saborflowdanang</a> and the <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Da Nang SBK group</a> for real-time updates. Pop-up parties for <b>Zouk</b> and <b>Tango</b> are announced there too.
</div>
</div>
<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>
<button class="filter-pill" data-filter="danang">Da Nang</button>
<button class="filter-pill" data-filter="hoian">Hoi An</button>
</div>
</div>
<div class="sfB-list" id="sfB-schedule-list"></div>
<p class="footnote">Schedule updated monthly &mdash; last update: <strong style="color:var(--sf-gold)">May 2026</strong></p>
</main>
<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="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>
<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>
<script src="js/main.js"></script>
<script>
// Schedule-page filter by city / style
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.sfB-pills .filter-pill').forEach(pill => {
pill.addEventListener('click', () => {
document.querySelectorAll('.sfB-pills .filter-pill').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
const f = pill.dataset.filter;
document.querySelectorAll('.sfB-row').forEach(row => {
if (f === 'all') { row.style.display = ''; return; }
const music = row.querySelector('.col-music')?.textContent.toLowerCase() || '';
const city = row.querySelector('.col-city')?.textContent.toLowerCase() || '';
const show = music.includes(f) || city.includes(f === 'danang' ? 'da nang' : f);
row.style.display = show ? '' : 'none';
});
});
});
});
</script>
</body>
</html>

234
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">
<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 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="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="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>
</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>
</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="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 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="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 class="row">
<span class="ic">📖</span>
<span>Beginner · Intermediate · 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>
</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" 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>
<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>
</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>
<!-- 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="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="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 class="row">
<span class="ic">✉️</span>
<span><a href="mailto:LearnToDanceDANANG@gmail.com">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>
</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>
<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>
<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>
</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>
<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="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>
<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>