feat: Implement Services, About, and start Values section

src/components/landing/HeroSection.astro

@@ -1,12 +1,17 @@
 ---
-import Image from "astro/components/Image.astro";
+import Picture from "astro/components/Picture.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" />
+    <Picture
+      class="image"
+      src={HeroImage}
+      formats={["jpg", "jpeg", "webp"]}
+      alt="todo"
+    />
   </div>
 
   <div class="content">
@@ -30,10 +35,11 @@ import ArrowDown from "../icons/ArrowDown.astro";
 <style>
   .hero {
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
-
+    grid-template-columns: var(--base-grid);
     height: 100svh;
     padding-inline: 5rem;
+    max-width: var(--max-content-width);
+    margin-inline: auto;
   }
 
   .image-wrapper {
@@ -53,9 +59,9 @@ import ArrowDown from "../icons/ArrowDown.astro";
 
   .content {
     display: grid;
-    row-gap: 2.25em;
     grid-template-columns: subgrid;
     grid-template-rows: 1fr 1fr;
+    row-gap: 2.25em;
 
     grid-column: 1 / -1;
     grid-row: 1;