New Post component

index.ts

@@ -4,7 +4,8 @@ import Hero from "./src/blocks/Hero.astro"
 
 // Components
 import Banner from "./src/Banner.astro"
+import BlogPost from "./src/BlogPost.astro";
 import Image from "./src/Image.astro";
 
 // Export
-export {Banner, CallToAction, Image, Hero}
+export {Banner, BlogPost, CallToAction, Image, Hero}

src/BlogPost.astro

@@ -0,0 +1,84 @@
+---
+// Properties
+const {
+    Title,
+    ImageSource,
+    Category,
+    Author,
+    Date,
+    Link
+} = Astro.props
+
+// Components
+import Image from './Image.astro'
+---
+
+<a href={Link} class="pd-blog-post-card">
+    <div class="pd-blog-post-card-start">
+        {Category ? <p>{Category}</p> : null}
+        <Image class:list="pd-blog-post-card-primary-image" Source={ImageSource}/>
+    </div>
+    <div class="pd-blog-post-card-end">
+        <h2>{Title}</h2>
+        <div class="pd-blog-post-meta">
+            <p>{Date} - By {Author}</p>
+        </div>
+    </div>
+</a>
+
+<style>
+.pd-blog-post-card {
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+    border-radius: 12px;
+    position: relative;
+    border: 2px var(--pandora-shadows) solid;
+    transition: 0.3s border;
+    &:hover {
+        border: 2px rgba(255, 255, 255, 0.25) solid;
+        transition: 0.3s border;
+    }
+    .pd-blog-post-card-start {
+        p {
+            position: absolute;
+            background: var(--pandora-shadows);
+            color: var(--pandora-text);
+            border-radius: 3rem;
+            padding: 6px 12px;
+            right: 0px;
+            top: 0px;
+            margin: 12px;
+            font-size: 12px;
+            z-index: 1;
+        }
+        img {
+            width: 100%;
+            border-radius: 12px 12px 0px 0px;
+            object-fit: cover;
+            aspect-ratio: 16/9;
+        }
+    }
+    .pd-blog-post-card-end {
+        display: inline-flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 12px;
+        margin: -5px 0px 0px 0px;
+        border-radius: 0px 0px 12px 12px;
+        justify-content: space-between;
+        gap: 6px;
+        h2, p {
+            color: var(--pandora-text);
+            margin: 0px !important;
+            font-size: 14px;
+        }
+        .pd-blog-post-meta {
+            p {
+                font-size: 12px !important;
+                color: gray;
+                text-align: right;
+            }
+        }
+    }
+}