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
@@ -1,25 +1,42 @@
 <style is:global>
-  @import url("../styles/archivo.css");
-  @import url("../styles/clash-display.css");
+  @import url("../styles/poppins.css");

  :root {
-    --clr-light-400: hsl(0 0% 100%);
-    --clr-dark-400: hsl(0 17.6% 3.3%);
+    --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;
+
+    /* --fs-page-title: 5.625rem; */
+    --fs-page-title: clamp(3rem, 5.5vw + 1rem, 8rem);
+
+    --leading-title: 1.1;
+    --leading-paragraph: 1.5;
+    --tracking-narrow: -0.09375rem;
+
+    --clr-light-400: hsl(0 10% 100%);
+    --clr-dark-400: hsl(0 17.6% 3.3%);
    --clr-ts-warm-red-400: hsl(3 94% 60%);

    --gradient-heading: linear-gradient(
      to bottom,
-      hsl(from var(--clr-light-400) h s l / 100%),
-      hsl(from var(--clr-light-400) h s l / 70%),
-      hsl(from var(--clr-light-400) h s l / 50%)
+      hsl(from var(--clr-light-400) h s l),
+      hsl(from var(--clr-light-400) h s calc(l - 10)),
+      hsl(from var(--clr-light-400) h s calc(l - 20)),
+      hsl(from var(--clr-light-400) h s calc(l - 20)),
+      hsl(from var(--clr-light-400) h s calc(l - 20)),
+      hsl(from var(--clr-light-400) h s calc(l - 40)),
+      hsl(from var(--clr-light-400) h s calc(l - 80))
    );
  }

  body {
    background-color: var(--clr-dark-400);
-    /*color: hsla(from var(--clr-light-400) h s l / 90%);*/ /* Syntax to create hsla from hsl*/
    color: white;
+    font-family: var(--font-sans);
  }

  * {
@@ -35,11 +52,4 @@
    background-clip: text;
    color: transparent;
  }
-
-  h1 {
-    max-width: 16ch;
-    font-size: 5.625rem;
-    line-height: 1.1;
-    font-weight: 600;
-  }
 </style>
@@ -0,0 +1,13 @@
+---
+
+---
+
+<header>
+  <!-- Logo -->
+
+  <!-- Contact Us -->
+
+  <!-- Menu Button -->
+</header>
+
+<style></style>
@@ -0,0 +1,52 @@
+---
+
+---
+
+<svg
+  width="51"
+  xmlns="http://www.w3.org/2000/svg"
+  height="51"
+  id="screenshot-8003f86b-8663-8006-8007-347270f3a7df"
+  viewBox="2440.5 1054.5 51 51"
+  style="-webkit-print-color-adjust::exact"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  fill="none"
+  version="1.1"
+>
+  <g id="shape-8003f86b-8663-8006-8007-347270f3a7df">
+    <defs></defs>
+    <g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7df">
+      <path
+        d="M2466,1062.4998779296875L2466,1097.4998779296875M2483.500244140625,1079.9998779296875L2466,1097.4998779296875L2448.499755859375,1079.9998779296875"
+        width="24"
+        class="feather feather-arrow-down"
+        height="24"></path>
+    </g>
+    <g
+      width="24"
+      class="strokes"
+      height="24"
+      id="strokes-ad623e18-d38f-802f-8007-85856ce0b997-8003f86b-8663-8006-8007-347270f3a7df"
+    >
+      <g class="stroke-shape">
+        <defs>
+          <linearGradient
+            id="stroke-color-gradient-render-7419-0"
+            x1="0.5"
+            y1="1"
+            x2="0.4999999999999999"
+            y2="3.0616169978683836e-17"
+            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="1" stop-color="#ffffff" stop-opacity="0"></stop>
+          </linearGradient>
+        </defs>
+        <path
+          d="M2466,1062.4998779296875L2466,1097.4998779296875M2483.500244140625,1079.9998779296875L2466,1097.4998779296875L2448.499755859375,1079.9998779296875"
+          style="fill:none;fill-opacity:none;stroke-width:3;stroke:url(#stroke-color-gradient-render-7419-0)"
+        ></path>
+      </g>
+    </g>
+  </g>
+</svg>
@@ -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>