feat(website): redesign bento tiles in 'Why KoalaSync' section

- Swap last two tiles: Invitation becomes 2nd-last (bento-large),
  Self-Hosting becomes last small tile
- bento-large layout: icon centered above heading, 33/67 grid split
- Fix icon consistency on small tiles (uniform 44x44 rounded squares)
- Improve responsive breakpoints for all viewports
- Delete legacy website/index.html (obsoleted by template + build.js)
This commit is contained in:
Koala
2026-06-01 01:42:42 +02:00
parent b08e8ba06b
commit e29c6666b6
10 changed files with 304 additions and 1136 deletions
+12 -12
View File
@@ -580,19 +580,8 @@
<p>{{FEATURE_4_DESC}}</p>
</div>
<!-- Card 5: Self-Hostable & Docker-Ready (Bento Large) -->
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
<div class="feature-card bento-large" data-reveal>
<h3>
<span class="feature-icon-svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
</span>
<span>{{FEATURE_5_TITLE}}</span>
</h3>
<p>{{FEATURE_5_DESC}}</p>
</div>
<!-- Card 6: Instant Invites / 1-Click Join (Bento Standard) -->
<div class="feature-card" data-reveal>
<h3>
<span class="feature-icon-svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
@@ -601,6 +590,17 @@
</h3>
<p>{{FEATURE_6_DESC}}</p>
</div>
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
<div class="feature-card" data-reveal>
<h3>
<span class="feature-icon-svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
</span>
<span>{{FEATURE_5_TITLE}}</span>
</h3>
<p>{{FEATURE_5_DESC}}</p>
</div>
</div>
</div>