Update Introduction.liquid

Helperbird · Aug 15, 2024 · 9dbc3dd · 9dbc3dd
1 parent 60950cf
commit 9dbc3dd
Showing 1 changed file with 13 additions and 19 deletions.
diff --git a/src/pages/help/Introduction.liquid b/src/pages/help/Introduction.liquid
@@ -22,37 +22,31 @@ url: help/Introduction/
     <header class="mx-auto max-w-4xl text-center">
 
 
-              <h1 class="leading-relaxed text-3xl font-bold text-black sm:text-6xl">
+              <h1 class="leading-relaxed text-3xl font-bold text-black sm:text-4xl">
                 Introduction Guides for Helperbird
         </h1>
         <p class=" leading-relaxed mt-6 text-xl  text-black">
             Below are the Introduction guides for Helperbird!
         </p>
     </header>
     <div class="mt-16 sm:mt-20">
-        <ul role="list" class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
-
-
-        {% for item in collections.Introduction %}
-
+        <ul role="list" class="not-prose grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
+            {% for item in collections.Introduction %}
             <li class="group flex flex-col items-start">
-                <div class="card card-compact  bg-base-100">
-                    <div class="card-body">
-                        <h2 class="leading-relaxed font-sans  card-title font-bold ">{{item.data.cardTitle}}</h2>
-                        <p class="leading-relaxed font-sans   text-base mb-2">{{item.data.description}}</p>
-                        <div class="card-actions justify-end mt-4">
-                            <a
-                                href="{{item.url}}"
-                                title="{{item.data.cardTitle }}"
-                                class="link link-hover text-blue-500 hover:text-blue-700"
-                                >Vist guide</a
-                            >
+                <div class="card card-compact bg-base-100 transition-all duration-200 hover:-translate-y-1 shadow-md h-full flex flex-col">
+                    <div class="card-body flex flex-col flex-grow">
+                        <h2 class="leading-relaxed font-sans card-title font-bold">{{item.data.cardTitle}}</h2>
+                        <p class="leading-relaxed font-sans text-base mb-2 flex-grow">{{item.data.description}}</p>
+                        <div class="card-actions justify-end mt-auto">
+                            <a href="{{item.url}}" title="{{item.data.cardTitle }}" class="link link-hover text-blue-500 hover:text-blue-700">
+                                Visit guide
+                            </a>
                         </div>
                     </div>
                 </div>
             </li>
-
-            {%- endfor -%}
+            {% endfor %}
         </ul>
+
     </div>
 </main>