feat: homepage completa da design Figma

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 01:01:21 +02:00
parent 2fdd1b9a7f
commit 45e5214417
11 changed files with 388 additions and 1 deletions
@@ -0,0 +1,54 @@
+---
+import { agenda, disciplines, days, slots } from '../data/agenda';
+---
+<section class="section section--dark agenda">
+  <div class="container">
+    <div class="section-heading"><h2>Agenda</h2></div>
+    <div class="agenda__tabs" role="tablist">
+      {disciplines.map((d, i) => (
+        <button class:list={['agenda__tab', { 'is-active': i === 0 }]} data-filter={d} role="tab" aria-selected={i === 0 ? 'true' : 'false'}>{d}</button>
+      ))}
+    </div>
+    <div class="agenda__grid">
+      <div class="agenda__corner"></div>
+      {days.map((d) => <div class="agenda__day">{d}</div>)}
+      {slots.map((slot) => (
+        <>
+          <div class="agenda__slot">{slot}</div>
+          {days.map((_, dayIdx) => {
+            const entry = agenda.find((e) => e.day === dayIdx && e.slot === slot);
+            return entry
+              ? <div class="agenda__cell" data-discipline={entry.discipline}><strong>{entry.discipline}</strong><span>{entry.time}</span><em>{entry.trainer}</em></div>
+              : <div class="agenda__cell agenda__cell--empty"></div>;
+          })}
+        </>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .agenda__tabs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 40px; }
+  .agenda__tab { background: transparent; color: #b9aea4; border: 0; cursor: pointer; font-family: var(--font-heading); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding: 10px 18px; }
+  .agenda__tab.is-active { background: var(--c-accent); color: #fff; }
+  .agenda__grid { display: grid; grid-template-columns: 70px repeat(7, 1fr); gap: 2px; }
+  .agenda__day, .agenda__slot { font-family: var(--font-heading); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #b9aea4; display: flex; align-items: center; justify-content: center; padding: 10px 4px; }
+  .agenda__cell { background: var(--c-accent); color: #fff; padding: 14px 8px; text-align: center; font-size: .72rem; display: flex; flex-direction: column; gap: 2px; }
+  .agenda__cell strong { font-family: var(--font-heading); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
+  .agenda__cell em { font-style: normal; opacity: .85; }
+  .agenda__cell--empty { background: transparent; }
+  .agenda__cell.is-dim { opacity: .15; }
+  @media (max-width: 991px) { .agenda__grid { grid-template-columns: 60px repeat(7, minmax(90px, 1fr)); overflow-x: auto; } }
+</style>
+
+<script>
+  document.querySelectorAll<HTMLElement>('.agenda').forEach((root) => {
+    const tabs = root.querySelectorAll<HTMLButtonElement>('.agenda__tab');
+    const cells = root.querySelectorAll<HTMLElement>('.agenda__cell[data-discipline]');
+    tabs.forEach((tab) => tab.addEventListener('click', () => {
+      tabs.forEach((t) => { t.classList.toggle('is-active', t === tab); t.setAttribute('aria-selected', String(t === tab)); });
+      const f = tab.dataset.filter!;
+      cells.forEach((c) => c.classList.toggle('is-dim', f !== 'Events' && c.dataset.discipline !== f));
+    }));
+  });
+</script>