feat: Implement Values section, Start implementing Contact section

2026-02-12 19:45:53 +01:00
parent 050522d035
commit b0dec274bd
8 changed files with 442 additions and 56 deletions
@@ -0,0 +1,79 @@
+---
+import ContactImage from "../../assets/img/contact.jpg";
+import { Picture } from "astro:assets";
+import ArrowUpRight from "../icons/ArrowUpRight.astro";
+---
+
+<div class="contact">
+    <Picture
+        class="image"
+        src={ContactImage}
+        alt="An abstract image of a black and gold background"
+    />
+
+    <div class="content">
+        <h2 class="heading-gradient">Building the Web on Your Terms.</h2>
+
+        <p>
+            Enough about us, let's talk about you. Every project is individual
+            and comes with its own challenges and specific needs. Get in touch
+            with us now and let's talk about it in a short call.
+        </p>
+    </div>
+
+    <a class="link">
+        <span class="heading-gradient">Contact us</span>
+        <ArrowUpRight />
+    </a>
+</div>
+
+<style>
+    .contact {
+        display: grid;
+        grid-template-columns: var(--base-grid);
+        max-width: var(--max-content-width);
+        margin-inline: auto;
+        padding-block: 8rem 5.5rem;
+        padding-inline: 5rem;
+    }
+
+    picture {
+        display: block;
+        /* width: 100%; */
+        /* height: 100%; */
+        max-height: 500px;
+        grid-column: 1 / 5;
+        /* TODO substitute horizontal spacing with var */
+        transform: translate3d(calc(-1 * 5rem), 0, 0);
+        z-index: -1;
+    }
+
+    .image {
+        /* width: 100%; */
+        /* height: 100%; */
+        object-fit: cover;
+    }
+
+    .content {
+        grid-column: 5 / -1;
+    }
+
+    h2 {
+        grid-column: 1 / -1;
+        font-size: 4.75rem;
+        line-height: var(--leading-title);
+        letter-spacing: var(--tracking-narrow);
+    }
+
+    .link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 2rem;
+        grid-column: 1 / -1;
+
+        font-size: 6.25rem;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+</style>