feat: Implement Values section, Start implementing Contact section

src/components/GlobalStyles.astro

@@ -2,9 +2,10 @@
   @import url("../styles/poppins.css");
 
   :root {
-    --font-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
-      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
-      "Helvetica Neue", sans-serif;
+    --font-sans:
+      "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+      sans-serif;
 
     /* --fs-md: clamp(1.25rem, 0.25vw + 1rem, 2.5rem); */
     --fs-md: 1.25rem;
@@ -81,4 +82,10 @@
     background-clip: text;
     color: transparent;
   }
+
+  .heading-gradient {
+    background: var(--gradient-page-title);
+    background-clip: text;
+    color: transparent;
+  }
 </style>

src/components/icons/ArrowUpRight.astro

@@ -0,0 +1,24 @@
+<svg width="116.333" xmlns="http://www.w3.org/2000/svg" height="116.333" id="screenshot-6b8effdb-5f0e-80dd-8007-372a7199e59d" viewBox="2743.833 5322.833 116.333 116.333" style="-webkit-print-color-adjust::exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1">
+  <g id="shape-6b8effdb-5f0e-80dd-8007-372a7199e59d">
+    <g class="fills" id="fills-6b8effdb-5f0e-80dd-8007-372a7199e59d">
+      <path d="M2772.833251953125,5410.16650390625L2831.166748046875,5351.83349609375M2772.833251953125,5351.83349609375L2831.166748046875,5351.83349609375L2831.166748046875,5410.16650390625" width="24" class="feather feather-arrow-up-right" height="24">
+      </path>
+    </g>
+    <g width="24" class="strokes" height="24" id="strokes-ca8ef29e-b397-80a6-8007-8fe0358bb517-6b8effdb-5f0e-80dd-8007-372a7199e59d">
+      <g class="stroke-shape">
+        <defs>
+          <linearGradient id="stroke-color-gradient-render-1748-0" x1="0.5" y1="0" x2="0.5" y2="1" gradientTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)">
+            <stop offset="0" stop-color="#ffffff" stop-opacity="1">
+            </stop>
+            <stop offset="0.5" stop-color="#ffffff" stop-opacity="0.7">
+            </stop>
+            <stop offset="1" stop-color="#ffffff" stop-opacity="0.5">
+            </stop>
+          </linearGradient>
+        </defs>
+        <path d="M2772.833251953125,5410.16650390625L2831.166748046875,5351.83349609375M2772.833251953125,5351.83349609375L2831.166748046875,5351.83349609375L2831.166748046875,5410.16650390625" style="fill:none;fill-opacity:none;stroke-width:12;stroke:url(#stroke-color-gradient-render-1748-0)">
+        </path>
+      </g>
+    </g>
+  </g>
+</svg>

src/components/landing/ContactSection.astro

@@ -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>

src/components/landing/ValuesSection.astro

@@ -1,6 +1,4 @@
 ---
-import { late } from "astro:schema";
-
 const values = [
     {
         title: "Sustainability",
@@ -21,39 +19,35 @@ function formatIndex(index: number) {
 }
 ---
 
-<Fragment>
-    <div class="values">
-        <h2>Our Values.</h2>
+<div class="values">
+    <h2 class="heading-gradient">Our Values.</h2>
 
-        <ul>
-            {
-                values.map((v, index) => (
-                    <li>
-                        {/* List is grid container */}
+    <ul>
+        {
+            values.map((v, index) => (
+                <li>
+                    {/* List is grid container */}
+                    <div class="content">
+                        {/* Item title */}
+                        <h3 class="heading-gradient">{v.title}</h3>
+                        {/* Item text */}
+                        <p>{v.text}</p>
+                    </div>
 
-                        <div>
-                            {/* Item title */}
-                            <h3>{v.title}</h3>
-
-                            {/* Item text */}
-                            <p>{v.text}</p>
-                        </div>
-
-                        {/* two digit number left */}
-                        <span>{formatIndex(index)}</span>
-                    </li>
-                ))
-            }
-        </ul>
-    </div>
-</Fragment>
+                    {/* two digit number left */}
+                    <span class="heading-gradient">{formatIndex(index)}</span>
+                </li>
+            ))
+        }
+    </ul>
+</div>
 
 <style>
     .values {
         display: grid;
         grid-template-columns: var(--base-grid);
         max-width: var(--max-content-width);
-        margin-in             line: auto;
+        margin-inline: auto;
         padding-block: 8rem 5.5rem;
         padding-inline: 5rem;
     }
@@ -63,20 +57,28 @@ function formatIndex(index: number) {
         font-size: 4.75rem;
         line-height: var(--leading-title);
         letter-spacing: var(--tracking-narrow);
-
-        span {
-            display: block;
-        }
+        text-align: center;
     }
 
     ul {
         margin-top: 5.5rem;
         list-style: none;
         grid-column: 1 / -1;
+
+        > * {
+            border-bottom: 0.25rem solid hsl(0 100 100 / 30%);
+        }
     }
 
     li {
-        
+        display: grid;
+        grid-template-columns: var(--base-grid);
+        padding-block: 4.625rem;
+    }
+
+    .content {
+        grid-row: 1;
+        grid-column: 5 / -1;
     }
 
     h3 {
@@ -91,6 +93,9 @@ function formatIndex(index: number) {
     }
 
     span {
+        grid-row: 1;
+        grid-column: 1 / 4;
+
         font-size: 15.625rem;
         font-weight: 600;
         line-height: 0.9;

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import AboutSection from "../components/landing/AboutSection.astro";
+import ContactSection from "../components/landing/ContactSection.astro";
 import HeroSection from "../components/landing/HeroSection.astro";
 import ServicesSection from "../components/landing/ServicesSection.astro";
 import ValuesSection from "../components/landing/ValuesSection.astro";
@@ -14,6 +15,8 @@ import BaseLayout from "../layouts/BaseLayout.astro";
   <AboutSection />
 
   <ValuesSection />
+
+  <ContactSection />
 </BaseLayout>
 
 <style></style>