Implement alternative card design for issue #96

src/components/Home/Cards.astro

@@ -0,0 +1,48 @@
+---
+import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
+import OpenAMPLogo from "../../assets/images/content/openAMP_LOGOMARKX.png";
+import dayjs from "dayjs";
+
+const blogs = await getCollection("news");
+
+const blogLists = blogs
+  .sort((a, b) => dayjs(b.data.date).diff(dayjs(a.data.date)))
+  .slice(0, 3);
+
+const ConvertDate = (input: any) => {
+  const dateObj = dayjs(input);
+  const dateString = dateObj.format("dddd, MMMM D, YYYY");
+  return dateString;
+};
+---
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-12 mb-4">
+  {
+    blogLists.map((blog: any) => (
+      <button
+        onclick={`window.location.href='/news/${blog.slug}/';`}
+        class="text-inherit no-underline cursor-pointer"
+      >
+        <div class="flex w-full md:w-[90%] lg:w-[90%] mx-auto mb-4 h-[90%]">
+          <div class="card h-full opacity-100 flex-col items-center shadow-lg duration-300 hover:drop-shadow-xl hover:scale-105 m-4 p-4 w-full">
+            <Image
+              class="w-64 mx-auto"
+              src={blog.data.image}
+              alt={blog.data.title}
+            />
+            <div class="flex w-full justify-between items-center my-4">
+              <>
+                <i class="text-xl">OpenAMP</i>
+                <Image class="w-12" src={OpenAMPLogo} alt="OpenAMP logo" />
+              </>
+            </div>
+            <h2 class="text-xl text-left">{blog.data.title}</h2>
+            <p class="text-slate-500 w-full">{ConvertDate(blog.data.date)}</p>
+            <p class="text-left mb-4 truncate-text">{blog.data.description}</p>
+          </div>
+        </div>
+      </button>
+    ))
+  }
+</div>

src/components/Home/Hero.astro

@@ -1,16 +1,10 @@
 ---
-import { getCollection } from "astro:content";
 import { Image } from "astro:assets";
 import logoImage from "../../assets/openAMP_combox_dark.svg";
-import FirstItem from "../News/FirstItem.astro";
-import dayjs from "dayjs";
+
 import heroImage from "../../assets/images/triangle_background.png";
 
 const { data } = Astro.props;
-const blogs = await getCollection("news");
-const blogLists = blogs
-  .sort((a, b) => dayjs(b.data.date).diff(dayjs(a.data.date)))
-  .slice(0, 2);
 ---
 
 <header
@@ -27,7 +21,7 @@ const blogLists = blogs
     >
       <!--First item-->
       <div
-        class="relative float-left -mr-[100%] mb-3 w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        class="relative float-left -mr-[100%] mb-3 w-full transition-transform"
         data-te-carousel-item
         data-te-carousel-active
       >
@@ -45,76 +39,8 @@ const blogLists = blogs
           >
         </div>
       </div>
-      <!--Second item-->
-      <div
-        class="relative text-black w-full float-left -mr-[100%] hidden transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none h-full"
-        data-te-carousel-item
-      >
-        <FirstItem {...blogLists[0]} />
-      </div>
-      <!--Third item-->
-      <div
-        class="relative text-black float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none h-full"
-        data-te-carousel-item
-      >
-        <FirstItem {...blogLists[1]} />
-      </div>
     </div>
   </div>
-  <!--Carousel controls - prev item-->
-  <button
-    class="absolute bottom-0 left-0 sm:top-0 z-[1] flex w-[10%] items-center justify-end border-0 bg-none py-4 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-    type="button"
-    data-te-target="#carouselExampleControls"
-    data-te-slide="prev"
-  >
-    <span class="inline-block h-8 w-8">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="h-6 w-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M15.75 19.5L8.25 12l7.5-7.5"></path>
-      </svg>
-    </span>
-    <span
-      class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
-      >Previous</span
-    >
-  </button>
-  <!--Carousel controls - next item-->
-  <button
-    class="absolute bottom-0 right-0 sm:top-0 z-[1] flex w-[10%] items-center justify-start border-0 bg-none py-4 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-    type="button"
-    data-te-target="#carouselExampleControls"
-    data-te-slide="next"
-  >
-    <span class="inline-block h-8 w-8">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="h-6 w-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
-      </svg>
-    </span>
-    <span
-      class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
-      >Next</span
-    >
-  </button>
 </header>
 <script>
   import { Carousel, initTE } from "tw-elements";

src/pages/index.astro

@@ -3,6 +3,7 @@ import { getEntry } from "astro:content";
 import Hero from "../components/Home/Hero.astro";
 import MainLayout from "../layouts/MainLayout.astro";
 import BaseHead from "../components/Head/BaseHead.astro";
+import Cards from "../components/Home/Cards.astro";
 
 const homepage = await getEntry("pages", "homepage");
 const { data, render }: any = homepage;
@@ -17,5 +18,6 @@ const { Content } = await render();
     <section class="text-center decoration-0 prose-xl mb-8 prose-p:mb-4">
       <Content />
     </section>
+    <Cards />
   </MainLayout>
 </html>

src/styles/global.scss

@@ -2,13 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-
 html {
-  color: #212529
+  color: #212529;
 }
 
 @layer base {
-
   h1 {
     width: auto;
     font-size: 3rem;
@@ -26,6 +24,14 @@ html {
     box-shadow: theme("boxShadow.xl");
   }
 
+  .truncate-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
   a {
     @apply text-openampred;
   }
@@ -34,16 +40,13 @@ html {
   }
 }
 
-
 @layer utilities {
-	.nav-hover {
-
-		:before {
-			@apply w-0 lg:bg-openampred content-[""] bottom-0 h-1 block absolute left-[50%] duration-150 
-		}
-		:before:hover {
-				@apply w-full left-0
-		}
-
-	}
-}
+  .nav-hover {
+    :before {
+      @apply w-0 lg:bg-openampred content-[""] bottom-0 h-1 block absolute left-[50%] duration-150;
+    }
+    :before:hover {
+      @apply w-full left-0;
+    }
+  }
+}