Viel

layouts/index.html

@@ -1,27 +1,56 @@
 {{ define "main" }}
-<section>
-    <link rel="stylesheet" href="/css/index.css">
-    <div id="main_image">
-        <img src="/img/AlbumReleaseParty_Stage_compressed.jpg" alt="" width="1000" height="667">    
+{{ $shows := where site.RegularPages "Section" "shows" }}
+{{ $upcoming := (where $shows "Date" "ge" now).ByDate }}
+{{ $past := first 3 (where $shows "Date" "lt" now).ByDate.Reverse }}
+
+<section class="hero">
+    <div class="hero__media">
+        {{ partial "img.html" (dict "src" "/img/AlbumReleaseParty_Stage_compressed.jpg" "alt" "Deepwater Survival live bei der Album-Release-Party, Publikum vor der blau beleuchteten Bühne" "sizes" "100vw" "widths" (slice 800 1400 2000) "eager" true) }}
     </div>
-    <section style="padding: 2rem; max-width: 800px; margin: auto; line-height: 1.6; ">
-        <h1 style="font-size: 2rem; margin-bottom: 1rem; text-align: center;">Deepwater Survival – Frischer Wind aus der deutschen Punk-Szene</h1>
-        
-        <p>Mit energiegeladenem Punkrock, ehrlichen Texten und unverblümter Direktheit meldet sich <strong>Deepwater Survival</strong> zurück. Die Band aus Trier besticht durch einen Sound, der roh, mitreißend und ehrlich ist – und schafft es damit, sowohl alteingesessene Punkfans als auch neue Hörer:innen zu begeistern.</p>
-        
-        <p>Bevor das Debütalbum <strong>„Ocean Tales“</strong> 2025 erschien, veröffentlichte die Band bereits eine Reihe kraftvoller Singles: <em>„Chirus“ (2023), „Let It Go“ (2024) sowie „Addiction“ und „My Own Home“</em>. Diese Songs, die fast unverändert auf dem Album zu finden sind, geben einen klaren Einblick in die musikalische und emotionale Bandbreite von Deepwater Survival.</p>
-        
-        <p>Die Texte greifen Themen wie Identität, Zugehörigkeit, Abschied und Neuanfang auf – universelle Inhalte, die in der Hektik unserer Zeit für viele relevant sind. Die Musik von Deepwater Survival lädt dazu ein, laut mitzusingen, nachzudenken und gemeinsam mit der Band ein Stück Erinnerung und Hoffnung zu teilen.</p>
-        
-        <p><strong>Deepwater Survival</strong> steht für Punk mit Haltung – klar, ungeschönt, direkt. Für alle, die Musik nicht nur hören, sondern fühlen wollen.</p>
-        </section>
-
-        <div>
-            <h2 style="text-align: center;">Intresse geweckt? Dann gerne hier melden: info@deepwatersurvival.de</h2>
-        </div>
-
-        <div id="spotify_link">
-            <iframe data-testid="embed-iframe" style="border-radius:12px" src="https://open.spotify.com/embed/artist/2TQ9HNBTNCmUthpg9ippHs?utm_source=generator&theme=0" width="40%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+    <div class="hero__content">
+        <h1 class="hero__logo">
+            <img src="/img/logo-crop.png" alt="Deepwater Survival" width="1600" height="675">
+        </h1>
+        <p class="hero__tagline">{{ .Params.tagline }}</p>
+        <div class="hero__actions">
+            <a class="button button--bolt" href="/music/">Ocean Tales anhören</a>
+            <a class="button button--ghost" href="/shows/">Live-Termine</a>
         </div>
+    </div>
 </section>
-{{ end }}
+
+<section class="intro wrap">
+    <div class="intro__head">
+        <h2 class="display">{{ .Params.headline }}</h2>
+    </div>
+    <div class="intro__body prose">
+        {{ .Content }}
+    </div>
+</section>
+
+<section class="live wrap">
+    <header class="section-head">
+        <h2 class="display">Live</h2>
+        <a class="text-link" href="/shows/">Alle Shows</a>
+    </header>
+    {{ if $upcoming }}
+    <div class="flyer-wall">
+        {{ range $upcoming }}{{ partial "show-card.html" . }}{{ end }}
+    </div>
+    {{ else }}
+    <p class="live__empty">Gerade sind keine Termine angekündigt. Ihr wollt uns auf eurer Bühne? Schreibt an <a href="mailto:{{ site.Params.email }}">{{ site.Params.email }}</a>.</p>
+    <h3 class="live__sub">Zuletzt gespielt</h3>
+    <div class="flyer-wall">
+        {{ range $past }}{{ partial "show-card.html" . }}{{ end }}
+    </div>
+    {{ end }}
+</section>
+
+<section class="booking">
+    <div class="wrap booking__inner">
+        <h2 class="display">Lust auf Lärm?</h2>
+        <p>Für Booking, Presse und alles andere erreicht ihr uns per Mail.</p>
+        <a class="booking__mail" href="mailto:{{ site.Params.email }}">{{ site.Params.email }}</a>
+    </div>
+</section>
+{{ end }}