feat: Implement new hero (desktop) start dev

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>