feat: traihard.de — universal tryhard manifesto (cycling, comunio, fitness, productivity)

sites/traihard.de/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>traihard.de — Marginal Gains. Maximum Effort.</title>
-  <meta name="description" content="Trai Hard — Optimierungswahn auf zwei Rädern. Marginal Gains, Jedermannrennen, Rennmaschine, Ehrgeiz.">
+  <meta name="description" content="Trai Hard — Optimierungswahn in allen Lebensbereichen. Rennrad, Fantasy Football, Productivity, Fitness. Marginal Gains everywhere.">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Orbitron:wght@700&display=swap" rel="stylesheet">
   <style>
@@ -18,7 +18,6 @@
       --muted: #777790;
       --accent: #ff3e00;
       --accent-glow: rgba(255, 62, 0, 0.12);
-      --gold: #fbbf24;
     }
 
     html { scroll-behavior: smooth; }
@@ -111,15 +110,8 @@
       text-align: center;
     }
 
-    .manifesto-text strong {
+    .manifesto-text strong { color: var(--text); font-weight: 600; }
-      color: var(--text);
+    .manifesto-text em { color: var(--accent); font-style: normal; }
-      font-weight: 600;
-    }
-
-    .manifesto-text em {
-      color: var(--accent);
-      font-style: normal;
-    }
 
     /* Stats */
     .stats {
@@ -155,6 +147,72 @@
       letter-spacing: 0.08em;
     }
 
+    /* Domains */
+    .domains {
+      padding: 60px 0 80px;
+    }
+
+    .domains h2 {
+      text-align: center;
+      font-size: 1.6rem;
+      margin-bottom: 12px;
+      font-weight: 700;
+    }
+
+    .domains .subtitle {
+      text-align: center;
+      color: var(--muted);
+      margin-bottom: 40px;
+      font-size: 1rem;
+    }
+
+    .domains-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+    }
+
+    .domain-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 28px;
+      transition: border-color 0.2s, transform 0.2s;
+    }
+
+    .domain-card:hover {
+      border-color: var(--accent);
+      transform: translateY(-2px);
+    }
+
+    .domain-icon {
+      font-size: 2rem;
+      margin-bottom: 14px;
+    }
+
+    .domain-card h3 {
+      font-size: 1.05rem;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .domain-card p {
+      font-size: 0.85rem;
+      color: var(--muted);
+      line-height: 1.6;
+    }
+
+    .domain-card a {
+      display: inline-block;
+      margin-top: 12px;
+      color: var(--accent);
+      font-size: 0.85rem;
+      text-decoration: none;
+      font-weight: 600;
+    }
+
+    .domain-card a:hover { text-decoration: underline; }
+
     /* Gains */
     .gains {
       padding: 60px 0 80px;
@@ -218,7 +276,6 @@
       line-height: 1.5;
       max-width: 640px;
       margin: 0 auto 16px;
-      color: var(--text);
     }
 
     .quote-attr {
@@ -235,11 +292,10 @@
       border-top: 1px solid var(--border);
     }
 
-    footer a { color: var(--accent); text-decoration: none; }
-
     @media (max-width: 768px) {
       .stats-grid { grid-template-columns: repeat(2, 1fr); }
       .gains-grid { grid-template-columns: 1fr; }
+      .domains-grid { grid-template-columns: 1fr; }
     }
 
     @media (max-width: 480px) {
@@ -251,9 +307,9 @@
   <div class="grain"></div>
 
   <section class="hero">
-    <div class="watts">W/KG IS A LIFESTYLE</div>
+    <div class="watts">OPTIMIZE EVERYTHING</div>
     <div class="logo">tr<span class="ai">ai</span>hard</div>
-    <p class="tagline">Marginal Gains. Maximum Effort.<br>Mit der Rennmaschine zum Jedermannrennen, als wäre es die Tour de France.</p>
+    <p class="tagline">Marginal Gains. Maximum Effort.<br>In allem. Immer. Ohne Kompromisse.</p>
   </section>
 
   <section class="manifesto">
@@ -262,10 +318,10 @@
       <div class="manifesto-text">
         Du wiegst dein <strong>Frühstück in Gramm ab</strong>, weil Haferflocken-Optimierung echte Gains bringt.
         Du fährst bei <em>3°C im Regen</em>, weil Ruhetage für Schwache sind.
-        Du hast mehr Geld für <strong>Carbon</strong> ausgegeben als für dein Auto.
+        Du hast einen <strong>KI-Assistenten</strong>, der dein Fantasy-Team managed, weil manuelles Scouting ineffizient ist.
         Dein Strava-Profil ist sorgfältiger kuratiert als dein LinkedIn.
-        Du kennst deinen <em>FTP</em> auf zwei Nachkommastellen, aber nicht deinen Blutdruck.
+        Du trackst deinen <em>Schlaf</em>, dein <em>Wasser</em>, deine <em>Schritte</em> — und findest immer noch eine Metrik, die du optimieren kannst.
-        Du rasierst dir die Beine — aus <strong>aerodynamischen Gründen</strong>, natürlich.
+        Du hast <strong>Automationen</strong> für Dinge gebaut, die andere Leute nicht mal als Problem erkannt haben.
         <br><br>
         Du bist <em>Tryhard</em>. Und du bist nicht allein.
       </div>
@@ -280,12 +336,12 @@
           <div class="stat-label">W/kg FTP</div>
         </div>
         <div class="stat">
-          <div class="stat-value">7.1</div>
+          <div class="stat-value">97</div>
-          <div class="stat-label">kg Rad</div>
+          <div class="stat-label">Automationen</div>
         </div>
         <div class="stat">
-          <div class="stat-value">23</div>
+          <div class="stat-value">1.</div>
-          <div class="stat-label">Paar Socken</div>
+          <div class="stat-label">Comunio Liga</div>
         </div>
         <div class="stat">
           <div class="stat-value">0</div>
@@ -295,39 +351,69 @@
     </div>
   </section>
 
+  <section class="domains">
+    <div class="container">
+      <h2>Tryhard-Disziplinen</h2>
+      <p class="subtitle">Wer nur in einem Bereich optimiert, hat das Prinzip nicht verstanden.</p>
+      <div class="domains-grid">
+        <div class="domain-card">
+          <div class="domain-icon">🚴</div>
+          <h3>Rennrad</h3>
+          <p>Carbon-Rahmen. Titanschrauben. Aerosocken. Jedes Jedermannrennen wird behandelt wie eine Königsetappe. Beine rasiert — aus aerodynamischen Gründen, natürlich.</p>
+        </div>
+        <div class="domain-card">
+          <div class="domain-icon">🤖</div>
+          <h3>Comunio</h3>
+          <p>Warum selbst scouten, wenn ein KI-Assistent den Transfermarkt per Browser automatisiert? Gebote um 2:59 Uhr, perfektes Lineup, Datenanalyse auf Knopfdruck.</p>
+          <a href="/comunio">→ Comunio AI Guide</a>
+        </div>
+        <div class="domain-card">
+          <div class="domain-icon">💪</div>
+          <h3>Fitness</h3>
+          <p>Periodisierung. Makros. Progressive Overload. HRV-Tracking. Supplements nach Peer-Review. Das Bier danach ist „Recovery Nutrition".</p>
+        </div>
+        <div class="domain-card">
+          <div class="domain-icon">⚡</div>
+          <h3>Productivity</h3>
+          <p>Jeder Workflow hat eine Automation. Jede Automation hat ein Dashboard. Jedes Dashboard hat ein Alert. Und wenn alles grün ist, optimierst du das Dashboard.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <section class="gains">
     <div class="container">
       <h2>The Marginal Gains Protocol</h2>
       <div class="gains-grid">
         <div class="gain-card">
           <div class="gain-num">GAIN 01</div>
-          <h3>Aero ist alles</h3>
+          <h3>Messen</h3>
-          <p>Helm, Brille, Überschuhe, Handschuhe — alles windkanalgetestet. Kaffee nur noch aus aerodynamischen Tassen.</p>
+          <p>Wenn du es nicht misst, existiert es nicht. Watt, Kalorien, Schlaf, Screentime, Comunio-Punkteschnitt — alles wird getrackt.</p>
         </div>
         <div class="gain-card">
           <div class="gain-num">GAIN 02</div>
-          <h3>Gewicht ist Feind</h3>
+          <h3>Automatisieren</h3>
-          <p>Titanschrauben statt Stahl. Lenkerband halbiert. Das dritte Bidon ist optional — Dehydrierung ist ein Mindset.</p>
+          <p>Alles was du zweimal machst, verdient ein Script. Alles was ein Script macht, verdient einen KI-Agenten. Alles was ein Agent macht, verdient ein Monitoring.</p>
         </div>
         <div class="gain-card">
           <div class="gain-num">GAIN 03</div>
-          <h3>Daten sind Wahrheit</h3>
+          <h3>Iterieren</h3>
-          <p>Powermeter, Herzfrequenz, Kadenz, Temperatur, Luftdruck. Wenn du es nicht misst, existiert es nicht.</p>
+          <p>Version 1 ist nie gut genug. Version 47 ist ein guter Anfang. Der perfekte Prozess existiert nicht — aber die Annäherung macht süchtig.</p>
         </div>
         <div class="gain-card">
           <div class="gain-num">GAIN 04</div>
-          <h3>Ernährung = Engineering</h3>
+          <h3>Eliminieren</h3>
-          <p>Carb-Loading nach Peer-Review. Gels im 20-Minuten-Takt. Das Bier danach ist „Recovery Nutrition".</p>
+          <p>Gewicht am Rad. Unnötige Meetings. Schlechte Spieler im Kader. Alles was keinen Mehrwert bringt, fliegt raus. Gnadenlos.</p>
         </div>
         <div class="gain-card">
           <div class="gain-num">GAIN 05</div>
-          <h3>Material über alles</h3>
+          <h3>Investieren</h3>
-          <p>N+1 ist kein Meme, es ist eine Investitionsstrategie. Das Winterrad kostet mehr als das erste Auto.</p>
+          <p>N+1 ist kein Meme, es ist eine Investitionsstrategie. Gilt für Räder, Tools, Subscriptions — und das Comunio-Pro-Upgrade.</p>
         </div>
         <div class="gain-card">
           <div class="gain-num">GAIN 06</div>
-          <h3>Mentalität</h3>
+          <h3>Dominieren</h3>
-          <p>Jedes Jedermannrennen ist ein Königsetappe. Jede Gruppenfahrt ein Ausscheidungsfahren. Tempo 30 in der Stadt? Nur bergauf.</p>
+          <p>Ob Jedermannrennen oder Fantasy-Liga — Zweiter ist Erster der Verlierer. Der Tryhard kennt nur ein Ziel: oben stehen.</p>
         </div>
       </div>
     </div>
@@ -335,7 +421,7 @@
 
   <section class="quote-section">
     <div class="container">
-      <div class="quote">"It's not about the bike. Es ist über die 47 Anbauteile, die du am Bike optimiert hast."</div>
+      <div class="quote">"Andere Leute haben Hobbys. Wir haben KPIs."</div>
       <div class="quote-attr">— Jeder Tryhard, immer</div>
     </div>
   </section>