feat: Implement Services, About, and start Values section

2026-02-11 18:03:24 +01:00
parent 9dde6f8b1c
commit 050522d035
11 changed files with 451 additions and 11 deletions
@@ -0,0 +1,92 @@
+---
+import { Picture } from "astro:assets";
+
+interface Props {
+    title: string;
+    image: {
+        src: ImageMetadata;
+        alt: string;
+    };
+    items: Array<string>;
+}
+
+const { title, image, items } = Astro.props;
+---
+
+<div class="card">
+    <Picture class="image" src={image.src} alt={image.alt} />
+
+    <h3>{title}</h3>
+
+    {
+        !!items.length ? (
+            <ul class="list">
+                {items.map((item) => (
+                    <li class="item">{item}</li>
+                ))}
+            </ul>
+        ) : null
+    }
+</div>
+
+<style>
+    .card {
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        /* padding: 2.5rem; */
+        min-height: 36rem;
+
+        & > * {
+            grid-column: 1;
+        }
+    }
+
+    picture {
+        display: block;
+        grid-row: 1 / -1;
+        position: relative;
+        z-index: -1;
+    }
+
+    picture::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: var(--gradient-overlay);
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+
+    .image {
+        display: inline-block;
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    h3 {
+        grid-row: 1;
+        font-size: 2.25rem;
+        line-height: var(--leading-title);
+        padding: 2.5rem;
+        max-width: 10ch;
+    }
+
+    ul {
+        display: grid;
+        gap: 1.25rem;
+        grid-row: 3;
+        list-style: none;
+        padding: 2.5rem;
+    }
+
+    li {
+        max-width: 26ch;
+        font-size: 1.125rem;
+        line-height: 1;
+    }
+</style>