add in the squiggles

apps/website/src/components/home/squiggle/squiggle.css

@@ -0,0 +1,5 @@
+svg {
+    position: absolute;
+    bottom: calc(calc(var(--space-s) - 6px) * -1);
+    transform: rotate(1deg);
+}

apps/website/src/components/home/squiggle/squiggle.tsx

@@ -0,0 +1,12 @@
+import { component$, useStylesScoped$, type PropsOf } from "@builder.io/qwik"
+import styles from "./squiggle.css?inline"
+
+export const Squiggle = component$((props: PropsOf<"svg">) => {
+    useStylesScoped$(styles)
+
+    return (
+        <svg width="587" height="31" viewBox="0 0 587 31" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M2.50147 10.4772C140.69 52.2251 165.072 6.01877 246.585 19.0008C328.098 31.9828 327.794 -2.77817 421.562 7.01197C496.576 14.8441 561.181 7.78511 584.107 3.27661" stroke={props.stroke ?? "#867CD8"} stroke-width={props['stroke-width'] ?? 3} stroke-linecap="round"/>
+        </svg>
+    )
+});

apps/website/src/pages/index.astro

@@ -6,6 +6,7 @@ import { Spotlight } from "@components/home/spotlight/spotlight";
 import { Icon } from "astro-icon/components";
 import Layout from "src/layouts/Layout.astro";
 import heroImage from "../assets/q-astro-hero.png";
+import { Squiggle } from "@components/home/squiggle/squiggle";
 ---
 
 <Layout title="Qwik + Astro">
@@ -42,10 +43,18 @@ import heroImage from "../assets/q-astro-hero.png";
       </h1>
 
       <span
-
-        >Zero hydration. Zero compromise. The only instantly interactive UI
-        framework that's HTML and server-first, just like Astro.</span
-      >
+        class="subtitle"
+        >Zero hydration. Zero compromise. The only 
+        <span class="squiggle-container">
+          <span>instantly interactive</span>
+          <Squiggle />
+        </span> UI
+        framework that's HTML and server-first, just like 
+        <span class="squiggle-container">
+          <span>Astro</span>
+          <Squiggle stroke="var(--rose-500)" stroke-width="12" style={{ transform: 'translateY(-2px)' }} />
+        </span>.
+      </span>
 
       <div class="navigation">
         <CLICopy>
@@ -119,6 +128,15 @@ import heroImage from "../assets/q-astro-hero.png";
     animation-timing-function: var(--qa-fade);
   }
 
+  .squiggle-container {
+    display: inline-block;
+    position: relative;
+  }
+
+  .subtitle {
+    line-height: 1.7;
+  }
+
   @keyframes fade-in {
     from {
       opacity: 0;