update features section

Author: erenkarakal

src/components/homepage/features/Features.js

@@ -1,26 +1,27 @@
 import styles from './index.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 const features = [
     {
-        title: "Asset Injection",
-        description: "Replace in-game assets like textures, sounds, shaders, and more with a simple drag and drop.",
-    },
-    {
-        title: "Custom Events",
-        description: "Code your own events and notes into the game and use them in your levels.",
+        title: "Easy Mod Installation",
+        description: "Install mods with just a drag and drop.",
+        image: "drag-and-drop.png"
     },
     {
         title: "Mod Menu",
-        description: "Toggle and configure your mods with the Beatblock Plus in-game mod menu.",
+        description: "Toggle and configure your mods with the BeatblockPlus in-game mod menu.",
+        image: "mod-menu.png"
     },
     {
-        title: "Custom Languages",
-        description: "Easily create translations for the game with a single file.",
+        title: "Enhanced Gameplay",
+        description: "Modify the game's code, textures, sounds and more!",
+        image: "gameplay.png"
     },
     {
-        title: "Debug Console",
-        description: "Use the debug console for quickly debugging your code.",
-    },
+        title: "Community Creations",
+        description: "Access a growing collection of mods and content created by the community.",
+        image: "community.png"
+    }
 ]
 
 export default function Features() {
@@ -29,18 +30,29 @@ export default function Features() {
             <h1 className={['center', styles.tagline].join(' ')}>The complete toolkit for Beatblock mod development</h1>
             <div className={styles.features}>
             {features.map((props, idx) => (
-                <Feature key={idx} {...props} />
+                <Feature key={idx} index={idx} {...props} />
             ))}
             </div>
         </section>
     );
 }
 
-function Feature({ title, description }) {
+function Feature({ title, description, image, index }) {
+    const isEven = index % 2 === 0;
+    const featureClass = [styles.feature, isEven ? styles.normalRow : styles.reversedRow].join(' ');
+
     return (
-        <div className={styles.feature}>
-            <p className={styles.title}>{ title }</p>
-            <p className={styles.description}>{ description }</p>
+        <div className={featureClass}>
+            {/* Image Box Container */}
+            <div className={styles.visualBox}>
+                <img src={useBaseUrl(`/img/features/${image}`)} alt={title} className={styles.boxImage} />
+            </div>
+
+            {/* Text Content */}
+            <div className={styles.textContent}>
+                <p className={styles.title}>{ title }</p>
+                <p className={styles.description}>{ description }</p>
+            </div>
         </div>
-    )
-}
+    );
+}

src/components/homepage/features/index.module.css

@@ -6,30 +6,61 @@
     width: 75%;
     height: auto;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    flex-wrap: wrap;
-    gap: 30px;
+    flex-direction: column;
+    gap: 50px;
 }
 
 .feature {
-    margin: 10px;
-    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 40px;
+    width: 100%;
+}
+
+.normalRow {
+    flex-direction: row;
+}
+
+.reversedRow {
+    flex-direction: row-reverse;
+}
+
+/* The box container (keeps your original background & shadow) */
+.visualBox {
+    flex: 1;
+    min-width: 300px;
+    height: 275px;
     border-radius: 25px;
     background-color: rgb(43, 43, 43);
     box-shadow: 0 0 20px 5px rgb(43, 43, 43);
-    max-width: 300px;
+    overflow: hidden; /* Prevents the image from spilling past the rounded corners */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* New: Rules to make the image fit cleanly inside the box */
+.boxImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Crops/scales the image nicely to fit the 180px height */
+}
+
+.textContent {
+    flex: 1;
+    text-align: left;
 }
 
 .title {
-    font-size: 30px;
+    font-size: 35px;
     margin: 0;
+    margin-bottom: 10px;
 }
 
 .description {
     margin: 0;
-    font-size: 15px;
+    font-size: 20px;
     color: rgba(255, 255, 255, 0.6)
 }
 
@@ -38,6 +69,7 @@
     font-weight: 300;
     font-style: normal;
     margin-bottom: 0;
+    text-align: center;
 }
 
 .section p {
@@ -46,3 +78,12 @@
     font-style: normal;
     margin-bottom: 0;
 }
+
+@media (max-width: 768px) {
+    .normalRow, .reversedRow {
+        flex-direction: column;
+    }
+    .textContent {
+        text-align: center;
+    }
+}