feat: Implement new hero (desktop) start dev

2026-02-10 10:08:45 +01:00
parent 953a7994b5
commit 9dde6f8b1c
21 changed files with 850 additions and 612 deletions
@@ -0,0 +1,105 @@
+---
+import Image from "astro/components/Image.astro";
+import HeroImage from "../../assets/img/hero.jpg";
+import ArrowDown from "../icons/ArrowDown.astro";
+---
+
+<div class="hero">
+  <div class="image-wrapper">
+    <Image class="image" src={HeroImage} alt="todo" />
+  </div>
+
+  <div class="content">
+    <h1>
+      <span>Your Partner </span>
+      <span>For A Better Web</span>
+    </h1>
+
+    <p>
+      From concept to launch - websites, apps, and digital solutions that work
+      hard, so you can play hard. We create long-term success by focusing on
+      digital sovereignty and sustainability.
+    </p>
+
+    <a>
+      <ArrowDown />
+    </a>
+  </div>
+</div>
+
+<style>
+  .hero {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+
+    height: 100svh;
+    padding-inline: 5rem;
+  }
+
+  .image-wrapper {
+    grid-column: -1 / -6;
+    grid-row: 1;
+    width: 100%;
+    max-height: clamp(400px, 70vh, 1000px);
+  }
+
+  .image {
+    display: inline-block;
+    width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    object-position: bottom;
+  }
+
+  .content {
+    display: grid;
+    row-gap: 2.25em;
+    grid-template-columns: subgrid;
+    grid-template-rows: 1fr 1fr;
+
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  h1 {
+    grid-column: 2 / -2;
+    grid-row: 1;
+    align-self: end;
+
+    font-size: var(--fs-page-title);
+    line-height: var(--leading-title);
+    letter-spacing: var(--tracking-narrow);
+    font-weight: 600;
+
+    & span {
+      display: block;
+    }
+  }
+
+  p {
+    grid-column: 3 / -5;
+    grid-row: 2;
+
+    max-width: 45ch;
+    font-size: var(--fs-md);
+    line-height: var(--leading-paragraph);
+  }
+
+  a {
+    display: inline-flex;
+
+    grid-column: 1 / -1;
+    grid-row: 1 / 3;
+    justify-self: center;
+    align-self: end;
+
+    padding: 1rem;
+    margin-bottom: 2rem;
+
+    & svg {
+      display: inline-block;
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+</style>