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

340
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>
<!-- Background blobs -->
<div class="sfB-bg" aria-hidden="true"></div>
<!-- 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>
<!-- 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>
<!-- 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>
</div>
</section>
</a>
<!-- 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>
<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>
<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="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 class="item">
<div class="v">4</div>
<div class="l">Dance styles</div>
</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 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>
</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>
<!-- 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>
</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 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>
</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 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>
</section>
<footer class="footer">
<div class="container">
<div class="footer-inner">
<div class="badge">
<div class="ic">🎶</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>
<nav class="footer-nav">
<a href="index.html">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="footer-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
@saborflowdanang
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Da Nang SBK Group
</a>
<div class="t">Socials almost every night</div>
<div class="s">Da Nang · Hoi An</div>
</div>
</div>
<div class="footer-bottom">Made with love for the Da Nang dance community</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>
<!-- 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>