refactor: make intro cards in column (#752)

* refactor: make intro cards in column

* refactor: simplify intro card usage

src/components/intro-card.astro

@@ -1,25 +1,33 @@
----
-const { title, description} = Astro.props;
----
-
 <div class="card">
   <img src="assets/intro-card.png" alt="big-smile" />
-  <h2>{title}</h2>
-  <p>{description}</p>
+  <div class="intro-content">
+    <slot />
+  </div>
 </div>
 
 <style>
   img {
-    width: 100%;
+    width: 240px;
     border-radius: 1em;
     object-fit: cover;
   }
   .card {
     display: flex;
-    flex-direction: column;
     align-items: center;
     padding: 20px;
     border-radius: 10px;
     background-color: hsl(var(--blue-base) 95%);
+    gap: 2rem;
+    padding: 2em;
+  }
+  .card:nth-child(odd) {
+    flex-direction: row;
+  }
+  .card:nth-child(even) {
+    flex-direction: row-reverse;
+  }
+  .intro-content {
+    display: flex;
+    flex-direction: column;
   }
 </style>

src/pages/index.astro

@@ -63,13 +63,14 @@ const introCards = [
     </div>
     <Image src={LandingImage} alt="Abstract art image" class="landing-image" />
     <section class="intro-cards">
-      {introCards.map((item) => (
-      <IntroCard 
-        title={item.title}
-        description={item.description}
-      />
-      ))}
-    </section>
+      {
+        introCards.map(item => (
+          <IntroCard>
+            <h2>{item.title}</h2>
+            <p>{item.description}</p>
+          </IntroCard>
+        ))
+      }
     </section>
   </main>
 </Layout>
@@ -91,8 +92,8 @@ const introCards = [
     gap: 1rem;
   }
   .intro-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    display: flex;
+    flex-direction: column;
     gap: 2rem;
     margin-block-start: 2rem;
   }