feat: add blurry background orbs

src/components/BlurryOrb.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+    top: string;
+    left: string;
+    size: string;
+    opacity?: string;
+    blur?: string;
+}
+
+const {
+    top = "0",
+    left = "0",
+    size = "2rem",
+    opacity = "1",
+    blur = "10rem",
+} = Astro.props;
+---
+
+<div></div>
+
+<style define:vars={{ top, left, size, opacity, blur }}>
+    div {
+        width: var(--size);
+        height: var(--size);
+
+        position: absolute;
+        top: var(--top);
+        left: var(--left);
+
+        border-radius: 100%;
+        background-color: var(--clr-ts-red-400);
+        filter: blur(var(--blur));
+        opacity: var(--opacity);
+
+        z-index: -1;
+
+        /* animation: 3s infinite alternate pulsate ease-out; */
+    }
+
+    /* @keyframes pulsate {
+        from {
+            transform: scale3d(0.8, 0.8, 1);
+        }
+
+        to {
+            transform: scale3d(1, 1, 1);
+        }
+    } */
+</style>

src/components/landing/ContactSection.astro

@@ -1,10 +1,13 @@
 ---
 import { Picture } from "astro:assets";
 import ContactImage from "../../assets/img/contact.jpg";
+import BlurryOrb from "../BlurryOrb.astro";
 import ArrowUpRight from "../icons/ArrowUpRight.astro";
 ---
 
 <div class="contact" aria-label="Contact section">
+  <BlurryOrb top="56%" left="30%" size="30rem" opacity="0.15" />
+
   <Picture
     class="image"
     src={ContactImage}
@@ -35,6 +38,8 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
     margin-inline: auto;
     padding-block: 4rem;
     padding-inline: var(--padding-x);
+    position: relative;
+    overflow-x: clip;
 
     @media screen and (min-width: 50rem) {
       padding-block: 8rem 10rem;

src/components/landing/HeroSection.astro

@@ -2,9 +2,12 @@
 import Picture from "astro/components/Picture.astro";
 import HeroImage from "../../assets/img/hero.jpg";
 import ArrowDown from "../icons/ArrowDown.astro";
+import BlurryOrb from "../BlurryOrb.astro";
 ---
 
 <div class="hero" aria-label="Hero section">
+  <BlurryOrb top="50%" left="5%" size="30rem" opacity="0.15" />
+
   <div class="image-wrapper">
     <Picture
       class="image"
@@ -39,6 +42,8 @@ import ArrowDown from "../icons/ArrowDown.astro";
     padding-inline: var(--padding-x);
     max-width: var(--max-content-width);
     margin-inline: auto;
+    position: relative;
+    overflow-x: clip;
 
     @media screen and (min-width: 50rem) {
       height: 100svh;

src/components/landing/ValuesSection.astro

@@ -1,4 +1,6 @@
 ---
+import BlurryOrb from "../BlurryOrb.astro";
+
 const values = [
     {
         title: "Sustainability",
@@ -20,6 +22,8 @@ function formatIndex(index: number) {
 ---
 
 <div class="values" aria-label="Values section">
+    <BlurryOrb top="-5%" left="30%" size="30rem" opacity="0.15" />
+
     <h2 class="heading-gradient">Our Values.</h2>
 
     <ul>
@@ -50,6 +54,8 @@ function formatIndex(index: number) {
         margin-inline: auto;
         padding-block: 4rem;
         padding-inline: var(--padding-x);
+        position: relative;
+        overflow-x: clip;
 
         @media screen and (min-width: 64rem) {
             padding-block: 8rem 5.5rem;