Revamp feature section cards to use more modular approach

MythicApp · Oct 8, 2024 · c6f258e · c6f258e
1 parent a09d8db
commit c6f258e
Showing 1 changed file with 33 additions and 18 deletions.
diff --git a/src/components/sections/FeatureSection.astro b/src/components/sections/FeatureSection.astro
@@ -3,31 +3,46 @@ const { title, desc, image, color } = Astro.props;
 import { Image } from "astro:assets";
 ---
 
-<div class="feature">
-  <h3 style=`color: ${color};`>{title}</h3>
-  <p>{desc}</p>
-  <Image src={image} loading="lazy" alt="Mythic logo" />
+<div class="feature-card">
+  <div class="feature-text">
+    <h3 style={`color: ${color};`}>{title}</h3>
+    <p>{desc}</p>
+  </div>
+  <div class="feature-image">
+    <Image src={image} loading="lazy" alt="Mythic feature" />
+  </div>
 </div>
 
 <style>
-  .feature {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border-radius: 16px;
-    padding: 20px;
-    background-color: var(--secondary-nav-color);
-    text-align: left;
+  .feature-card {
+    display: flex;
+    flex-direction: column;
     align-items: center;
+    background-color: var(--secondary-nav-color);
+    padding: 20px;
+    border-radius: 16px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    margin-bottom: 20px;
   }
 
-  .feature p {
-    max-width: 50%;
-  }
-
-  .feature img {
+  .feature-image {
     width: 100%;
     height: auto;
-    object-fit: contain;
-    max-height: 500px;
+  }
+
+  .feature-text h3 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+  }
+
+  .feature-text p {
+    font-size: 1rem;
+    max-width: 80%;
+    margin: 0 auto;
+  }
+
+  .feature-text {
+    padding-bottom: 24px;
   }
 </style>