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

250
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>
<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>
<!-- 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>
</a>
</div>
</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>
<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="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>
</div>
<div class="footer-bottom">Made with love for the Da Nang dance community</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="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>