From 7bc1d363123b7e7b995f8cda37c9498392996b47 Mon Sep 17 00:00:00 2001
From: Archos <archos@arch-linux.cz>
Date: Sat, 4 Apr 2026 13:35:40 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20karty=20Z=C3=A1klady=20a=20Mobiln=C3=AD?=
 =?UTF-8?q?=20aplikace,=20odkaz=20p=C5=99esunut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 start.html | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/start.html b/start.html
index d13bde0..8590c6d 100644
--- a/start.html
+++ b/start.html
@@ -76,6 +76,47 @@
 
   .tagline strong { color: var(--text); }
 
+  /* --- CARDS GRID --- */
+  .cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  @media (max-width: 500px) {
+    .cards { grid-template-columns: 1fr; }
+  }
+
+  .card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.4rem 1.6rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    transition: border-color 0.2s;
+  }
+
+  .card:hover { border-color: var(--accent); }
+
+  .card h3 {
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+  }
+
+  .card p {
+    color: var(--muted);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    flex: 1;
+  }
+
+  .card .btn {
+    align-self: center;
+  }
+
   /* --- BASICS BANNER --- */
   .basics-banner {
     display: block;
@@ -342,7 +383,6 @@
 </div>
 
 <div class="steps">
-  <a href="basics.html" class="basics-banner">📖 Základy Mastodonu – nejčastější otázky →</a>
 
 
   <!-- KROK 1 -->
@@ -408,6 +448,21 @@ Rád/a poznám nové lidi 🙂 #Představení #novacek #cesky
 
 </div>
 
+<div class="steps" style="margin-top: 0;">
+  <div class="cards">
+    <div class="card">
+      <h3>📖 Základy Mastodonu</h3>
+      <p>Soukromí, hashtagy, jak odpovídat a další tipy.</p>
+      <a href="basics.html" class="btn btn-secondary">Zobrazit →</a>
+    </div>
+    <div class="card">
+      <h3>📱 Mobilní aplikace</h3>
+      <p>Doporučené appky pro Android a iOS.</p>
+      <a href="apps.html" class="btn btn-secondary">Zobrazit →</a>
+    </div>
+  </div>
+</div>
+
 <div class="footer-note">
   Zasekl/a ses? Napiš na <a href="https://gts.arch-linux.cz/@archos">@archos@gts.arch-linux.cz</a> nebo
   se zeptej v <a href="https://mamutovo.cz/tags/pomoc">#pomoc</a>.<br>