Move to Astro

src/components/FrontPageLink.astro

@@ -0,0 +1,62 @@
+---
+export interface Props {
+  title: string;
+  description: string;
+  imageSrc: string;
+  href: string;
+}
+
+const { href, title, imageSrc, description } = Astro.props;
+---
+
+<div class="col">
+  <a href={href} class="fp-link">
+    <div class="card">
+      <img src={`/images/${imageSrc}`} class="card-img-top" />
+      <div class="card-body">
+        <h5 class="card-title">{title}</h5>
+        <p class="card-text">in which {description}</p>
+      </div>
+    </div>
+  </a>
+</div>
+
+<style lang="scss">
+  .card {
+    margin-bottom: 20px;
+  }
+
+  .fp-link {
+    display: inline-flex;
+    text-decoration: none;
+    margin: 5px;
+  }
+
+  .fp-link .card {
+    //background-color: rgb(142, 181, 222);
+    color: #555;
+    border-radius: 0;
+    border: 0;
+
+    img {
+      border-radius: 5px;
+      object-fit: cover;
+      aspect-ratio: 4 / 3;
+    }
+
+    .card-body {
+      color: white;
+      position: absolute;
+      bottom: 5px;
+      left: 12px;
+    }
+
+    .card-title {
+      font-size: large;
+    }
+
+    .card-text {
+      font-size: medium;
+    }
+  }
+</style>