From af755466e4d827d3d914e658e347be6ce65e8718 Mon Sep 17 00:00:00 2001
From: thejackshelton <me@jackshelton.com>
Date: Tue, 14 Jan 2025 10:35:56 -0600
Subject: [PATCH] add in the squiggles

---
 apps/website/src/assets/home/squiggle.svg     |  3 +++
 .../src/components/home/squiggle/squiggle.css |  5 ++++
 .../src/components/home/squiggle/squiggle.tsx | 12 +++++++++
 apps/website/src/pages/index.astro            | 26 ++++++++++++++++---
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 apps/website/src/assets/home/squiggle.svg
 create mode 100644 apps/website/src/components/home/squiggle/squiggle.css
 create mode 100644 apps/website/src/components/home/squiggle/squiggle.tsx

diff --git a/apps/website/src/assets/home/squiggle.svg b/apps/website/src/assets/home/squiggle.svg
new file mode 100644
index 0000000..c66a291
--- /dev/null
+++ b/apps/website/src/assets/home/squiggle.svg
@@ -0,0 +1,3 @@
+<svg width="587" height="31" viewBox="0 0 587 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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="#867CD8" stroke-width="5" stroke-linecap="round"/>
+</svg>
diff --git a/apps/website/src/components/home/squiggle/squiggle.css b/apps/website/src/components/home/squiggle/squiggle.css
new file mode 100644
index 0000000..ee6373f
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/apps/website/src/components/home/squiggle/squiggle.tsx b/apps/website/src/components/home/squiggle/squiggle.tsx
new file mode 100644
index 0000000..63293cb
--- /dev/null
+++ b/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>
+    )
+});
\ No newline at end of file
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index c369f10..e3bff3f 100644
--- a/apps/website/src/pages/index.astro
+++ b/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;