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,99 @@
+---
+import type { ComponentProps } from "astro/types";
+import ServicesCard from "./ServicesCard.astro";
+import Image1 from "../../assets/img/services/1.jpg";
+import Image2 from "../../assets/img/services/2.jpg";
+import Image3 from "../../assets/img/services/3.jpg";
+
+const services: Array<ComponentProps<typeof ServicesCard>> = [
+    {
+        title: "Innovative Solutions",
+        image: {
+            src: Image1,
+            alt: "A picture showing an abstract form in teal",
+        },
+        items: [
+            "Modern Websites",
+            "Specialized Web Applications",
+            "Cross-platform Mobile Apps",
+        ],
+    },
+    {
+        title: "Tailored Designs",
+        image: {
+            src: Image2,
+            alt: "A picture showing an abstract form in blue/purple",
+        },
+        items: ["Webdesign", "App Design", "Brand/Identity Design"],
+    },
+    {
+        title: "Flexible Projects",
+        image: {
+            src: Image3,
+            alt: "A picture showing an abstract form in red",
+        },
+        items: ["Digital Sovereignty", "Freelancing", "Consulting"],
+    },
+];
+---
+
+<div class="services">
+    <div class="heading">
+        <h2>Our Services.</h2>
+
+        <p>
+            Together as partners, we will tackle your digital challenge and turn
+            your vision into reality.
+        </p>
+    </div>
+
+    <ul>
+        {services.map((service) => <ServicesCard {...service} />)}
+    </ul>
+</div>
+
+<style>
+    .services {
+        display: grid;
+        grid-template-columns: var(--base-grid);
+        max-width: var(--max-content-width);
+        margin-inline: auto;
+        padding-block: 8rem;
+        padding-inline: 5rem;
+    }
+
+    .heading {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+
+        & h2 {
+            grid-column: 1 / 6;
+
+            font-size: 4.75rem;
+            line-height: var(--leading-title);
+            letter-spacing: var(--tracking-narrow);
+        }
+
+        & p {
+            grid-column: -1 / -6;
+            justify-self: end;
+
+            max-width: 32ch;
+            font-size: 1.5rem;
+            line-height: var(--leading-text);
+        }
+    }
+
+    ul {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2rem;
+
+        grid-column: 1 / -1;
+
+        list-style: none;
+
+        margin-top: 7rem;
+    }
+</style>