add features page

src/pages/features.astro

@@ -0,0 +1,102 @@
+---
+import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
+import ImageCarousel from '@app/website/features/ImageCarousel.svelte';
+const features = [
+  {
+    name: 'Pixelblock',
+    details: [
+      `<p>Erstelle deinen eigenen Block im Miniformat. Du kannst einen leeren Block craften, den du anschließend frei
+nach deinen Vorstellungen mit Inhalt füllen kannst! Ob die letzten Details zu deinem Bauwerk oder (sehr teure) vertikale
+Stufen – pure Freiheit!</p>`,
+      `<p>Leider sind Pixelblöcke für Bedrock-Spieler nicht nutzbar und auch nicht sichtbar!</p>`
+    ]
+  },
+  {
+    name: 'Trank des Schnüfflers',
+    details: [
+      `<p> Füttere einen Schnüffler mit Zucker. Er wird verrückt und rennt umher – und explodiert! Dabei droppt er aber
+einen Trank, den Trank des Schnüfflers. Trink ihn, und du kannst für eine kurze Zeit alle Erze in deiner Umgebung
+erschnüffeln!</p>`
+    ]
+  },
+  {
+    name: 'Voicemod',
+    details: [
+      `<p>Auf unserem Server ist Simple-Voice-Chat verfügbar. Damit kannst du dich mit anderen Spielern im Spiel
+unterhalten. Das Nutzen ist natürlich optional. Für Bedrock-Spieler ist Simple-Voice-Chat leider nicht verfügbar.</p>`,
+      `<p>Tutorial für die Einrichtung:
+<a class="link" href="https://www.youtube.com/watch?v=GQdEnX2Dkh4" target="_blank">https://www.youtube.com/watch?v=GQdEnX2Dkh4</a></p>`
+    ]
+  },
+  {
+    name: 'Blutmond',
+    details: [
+      `<p> Abends, meist gegen 18 Uhr, finden gelegentlich Events statt, bei denen du Items gewinnen kannst und in
+kleinen Minispielen gegen deine Mitspieler antrittst. Die genauen Abläufe siehst du, wenn du abends auf dem Server
+bist.</p>`
+    ]
+  },
+  {
+    name: 'Erweiterte Spieleinstellungen',
+    details: [
+      `<p>Mit <code>/settings</code> erreichst du einige Quality-of-Life-Features welche dein Spielerlebnis verbessern.
+Zum Beispiel das automatische Öffnen von Doppeltüren bis hin zum Ausblenden der Beitrittsnachrichten im Chat anderer
+Spieler.</p>`
+    ]
+  },
+  {
+    name: 'Miniblöcke des Wandernden Händlers',
+    details: [
+      `<p>Der wandernde Händler verkauft neben seinen normalen Items auch miniversionen von Blöcken, die sich als
+Dekoration hervorragend eignen!</p>`
+    ]
+  },
+  {
+    name: 'Platzierbare Blöcke in Minecarts',
+    details: [
+      `<p>Du kannst jeden Vollen Block in ein leeres Minecart platzieren. Das ist zwar deutlich ineffizienter als ein
+Kistenminecart, hat aber deutlich mehr Stil!</p>`
+    ]
+  },
+  {
+    name: 'Recoverycompass bleiben nach Toden im Inventar',
+    details: [
+      `<p>Finde schneller zu deinem Todespunkt nach deinem Tod zurück – der Recoverykompass bleib im Inventar. Es ist
+deine Entscheidung, ob du den Inventarplatz dafür opferst oder nicht. Zum Start erhältst du einen for Free!</p>`
+    ]
+  },
+  {
+    name: 'PVP-Modus',
+    details: [
+      `<p> Du suchst den Nervenkitzel? Im PVP-Modus (ehemals Vogelfrei) dürfen dich alle anderen Spieler, welche
+ebenfalls im PVP-Modus sind angreifen und töten. Deine Items müssen nicht zurückerstattet werden. Bauwerke und Kisten
+sind aber weiterhin geschützt. Aktivieren kannst du den Modus mit <code>/pvp</code>.</p>`
+    ]
+  }
+];
+---
+
+<WebsiteLayout title="Features">
+  <div class="mx-4 my-6 sm:mx-12 sm:my-12 xl:mx-32 2xl:mx-64">
+    <h1 class="text-3xl lg:text-5xl mb-16 text-center">Features</h1>
+    <div class="grid md:grid-cols-2 gap-y-8 md:gap-x-6 lg:gap-x-18 xl:gap-x-26 2xl:gap-x-36">
+      {
+        features.map((feature) => (
+          <>
+            <div>
+              <h3 class="text-xl mb-4 underline">{feature.name}</h3>
+              <ol class="list-disc space-y-2 ml-3">
+                {feature.details.map((detail) => (
+                  <li class="text-base/7" set:html={detail} />
+                ))}
+              </ol>
+            </div>
+            <div>
+              <ImageCarousel client:idle />
+            </div>
+          </>
+        ))
+      }
+    </div>
+  </div>
+</WebsiteLayout>