update features

src/pages/features.astro

@@ -1,6 +1,24 @@
 ---
 import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
 import ImageCarousel from '@app/website/features/ImageCarousel.svelte';
+import Pixelblock1 from '@assets/img/features/pixelblocks/pixelblocks1.webp';
+import Pixelblock2 from '@assets/img/features/pixelblocks/pixelblocks2.webp';
+import Pixelblock3 from '@assets/img/features/pixelblocks/pixelblocks3.webp';
+import Pixelblock4 from '@assets/img/features/pixelblocks/pixelblocks4.webp';
+import Voicemod1 from '@assets/img/features/voicechat/voicechat1.webp';
+import Voicemod2 from '@assets/img/features/voicechat/voicechat2.webp';
+import Bloodmoon1 from '@assets/img/features/bloodmoon/bloodmoon1.webp';
+import Event1 from '@assets/img/features/events/events1.webp';
+import Event2 from '@assets/img/features/events/events2.webp';
+import Event3 from '@assets/img/features/events/events3.webp';
+import Settings1 from '@assets/img/features/settings/settings1.webp';
+import WanderingTraderMiniblock1 from '@assets/img/features/wanderingTraderMiniblocks/wanderingTraderMiniblocks1.webp';
+import WanderingTraderMiniblock2 from '@assets/img/features/wanderingTraderMiniblocks/wanderingTraderMiniblocks2.webp';
+import MinecartBlock1 from '@assets/img/features/minecartBlocks/minecraftBlocks1.webp';
+import RecoveryCompass1 from '@assets/img/features/recoveryCompass/recoveryCompass1.webp';
+import RecoveryCompassIcon1 from '@assets/img/features/recoveryCompass/recoveryCompassIcon1.webp';
+import PvpMode1 from '@assets/img/features/pvpMode/pvpMode1.webp';
+
 const features = [
   {
     name: 'Pixelblock',
@@ -9,7 +27,8 @@ const features = [
 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>`
-    ]
+    ],
+    images: [{ path: Pixelblock1.src }, { path: Pixelblock2.src }, { path: Pixelblock3.src }, { path: Pixelblock4.src }]
   },
   {
     name: 'Trank des Schnüfflers',
@@ -26,14 +45,16 @@ erschnüffeln!</p>`
 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>`
-    ]
+    ],
+    images: [{ path: Voicemod1.src }, { path: Voicemod2.src }]
   },
   {
     name: 'Blutmond',
     details: [
       `<p>Alle dreißig ingame-Tage solltest du nachts auf der Hut sein, denn die Monster sind in dieser Nacht deutlich
 stärker als üblich, droppen aber auch besseren Loot.</p>`
-    ]
+    ],
+    images: [{ path: Bloodmoon1.src }]
   },
   {
     name: 'Events',
@@ -42,7 +63,8 @@ stärker als üblich, droppen aber auch besseren Loot.</p>`
 kleinen Minispielen gegen deine Mitspieler antrittst. Die genauen Abläufe siehst du, wenn du abends auf dem Server
 bist.</p>`,
       `<p>Du kannst dich auf neue Minispiele freuen!</p>`
-    ]
+    ],
+    images: [{ path: Event1.src }, { path: Event2.src }, { path: Event3.src }]
   },
   {
     name: 'Erweiterte Spieleinstellungen',
@@ -50,28 +72,33 @@ bist.</p>`,
       `<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>`
-    ]
+    ],
+    images: [{ path: Settings1.src }]
   },
   {
     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>`
-    ]
+    ],
+    images: [{ path: WanderingTraderMiniblock1.src }, { path: WanderingTraderMiniblock2.src }]
   },
   {
     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>`
-    ]
+    ],
+    images: [{ path: MinecartBlock1.src }]
   },
   {
     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>`
-    ]
+    ],
+    images: [{ path: RecoveryCompass1.src }],
+    icons: [{ path: RecoveryCompassIcon1.src }]
   },
   {
     name: 'PVP-Modus',
@@ -79,7 +106,8 @@ deine Entscheidung, ob du den Inventarplatz dafür opferst oder nicht. Zum Start
       `<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>`
-    ]
+    ],
+    images: [{ path: PvpMode1.src }]
   }
 ];
 ---
@@ -87,23 +115,30 @@ sind aber weiterhin geschützt. Aktivieren kannst du den Modus mit <code>/pvp</c
 <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="space-y-8 md:space-y-28">
+    <div class="space-y-8 md:space-y-12">
       {
         features.map((feature, i) => (
           <div
-            class="flex flex-col gap-y-3 sm:gap-y-6 md:gap-x-6 lg:gap-x-18 xl:gap-x-26 2xl:gap-x-36"
+            class="flex flex-col gap-y-3 sm:gap-y-6 md:gap-x-6 lg:gap-x-18 xl:gap-x-24 2xl:gap-x-30 px-8 py-10 bg-base-200 rounded"
             class:list={{ 'md:flex-row': i % 2 == 0, 'md:flex-row-reverse': i % 2 != 0 }}
           >
-            <div class="md:w-1/2">
+            <div class="md:w-5/12 flex flex-col">
               <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>
+              {feature.icons && (
+                <div class="h-full flex justify-around items-center">
+                  {feature.icons.map((icon) => (
+                    <img class="w-16 h-16 mr-72 mb-25" src={icon.path} alt={icon.path} />
+                  ))}
                 </div>
-            <div class="md:w-1/2">
-              <ImageCarousel client:idle />
+              )}
+            </div>
+            <div class="md:w-7/12">
+              <ImageCarousel images={feature.images} client:idle />
             </div>
           </div>
         ))