feat: Implement new hero (desktop) start dev

package.json

@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@astrojs/partytown": "^2.1.4",
-    "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/vue": "^5.1.3",
+    "@astrojs/sitemap": "^3.7.0",
+    "@astrojs/vue": "^5.1.4",
     "@astrolib/seo": "1.0.0-beta.8",
-    "astro": "^5.16.6",
+    "astro": "^5.17.1",
     "astro-robots-txt": "^1.0.0",
     "gsap": "^3.14.2",
-    "vue": "^3.5.25"
+    "vue": "^3.5.28"
   }
 }

src/components/GlobalStyles.astro

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

src/components/Header.astro

@@ -0,0 +1,13 @@
+---
+
+---
+
+<header>
+  <!-- Logo -->
+
+  <!-- Contact Us -->
+
+  <!-- Menu Button -->
+</header>
+
+<style></style>

src/components/icons/ArrowDown.astro

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

src/components/landing/HeroSection.astro

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

src/pages/index.astro

@@ -1,7 +1,10 @@
 ---
+import HeroSection from "../components/landing/HeroSection.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
 <BaseLayout title="Home">
-  <h1>Your Partner For A Better Web</h1>
+  <HeroSection />
 </BaseLayout>
+
+<style></style>

src/styles/poppins.css

@@ -0,0 +1,64 @@
+@font-face {
+  font-family: "Poppins";
+  src: url("../assets/fonts/poppins/Poppins-Regular.eot");
+  src:
+    url("../assets/fonts/poppins/Poppins-Regular.eot?#iefix")
+      format("embedded-opentype"),
+    url("../assets/fonts/poppins/Poppins-Regular.woff2") format("woff2"),
+    url("../assets/fonts/poppins/Poppins-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../assets/fonts/poppins/Poppins-Italic.eot");
+  src:
+    url("../assets/fonts/poppins/Poppins-Italic.eot?#iefix")
+      format("embedded-opentype"),
+    url("../assets/fonts/poppins/Poppins-Italic.woff2") format("woff2"),
+    url("../assets/fonts/poppins/Poppins-Italic.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../assets/fonts/poppins/Poppins-SemiBold.eot");
+  src:
+    url("../assets/fonts/poppins/Poppins-SemiBold.eot?#iefix")
+      format("embedded-opentype"),
+    url("../assets/fonts/poppins/Poppins-SemiBold.woff2") format("woff2"),
+    url("../assets/fonts/poppins/Poppins-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../assets/fonts/poppins/Poppins-SemiBoldItalic.eot");
+  src:
+    url("../assets/fonts/poppins/Poppins-SemiBoldItalic.eot?#iefix")
+      format("embedded-opentype"),
+    url("../assets/fonts/poppins/Poppins-SemiBoldItalic.woff2") format("woff2"),
+    url("../assets/fonts/poppins/Poppins-SemiBoldItalic.woff") format("woff");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../assets/fonts/poppins/Poppins-Bold.eot");
+  src:
+    url("../assets/fonts/poppins/Poppins-Bold.eot?#iefix")
+      format("embedded-opentype"),
+    url("../assets/fonts/poppins/Poppins-Bold.woff2") format("woff2"),
+    url("../assets/fonts/poppins/Poppins-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}