From b6514b63f6fb4fe224b3579ec2933f763fc62cec Mon Sep 17 00:00:00 2001
From: jack shelton <me@jackshelton.com>
Date: Wed, 25 Dec 2024 21:56:12 -0600
Subject: [PATCH] create js chunk

---
 .../website/src/components/counter.module.css | 12 -------
 apps/website/src/components/counter.tsx       | 21 -------------
 .../src/components/home/js-chunk/js-chunk.css |  0
 .../src/components/home/js-chunk/js-chunk.tsx | 31 +++++++++++++++++++
 apps/website/src/pages/index.astro            | 13 ++++++--
 5 files changed, 42 insertions(+), 35 deletions(-)
 delete mode 100644 apps/website/src/components/counter.module.css
 delete mode 100644 apps/website/src/components/counter.tsx
 create mode 100644 apps/website/src/components/home/js-chunk/js-chunk.css
 create mode 100644 apps/website/src/components/home/js-chunk/js-chunk.tsx

diff --git a/apps/website/src/components/counter.module.css b/apps/website/src/components/counter.module.css
deleted file mode 100644
index 6ebef84d..00000000
--- a/apps/website/src/components/counter.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.counter {
-  border: 1px solid black;
-}
-.card {
-  padding: 2em;
-}
diff --git a/apps/website/src/components/counter.tsx b/apps/website/src/components/counter.tsx
deleted file mode 100644
index ce4e17a5..00000000
--- a/apps/website/src/components/counter.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { component$, useSignal } from "@builder.io/qwik";
-
-import styles from "./counter.module.css";
-
-export const Counter = component$(() => {
-  const count = useSignal(0);
-
-  return (
-    <>
-      <div class={styles.container}>
-        <button
-          class={styles.counter}
-          type="button"
-          onClick$={() => count.value++}
-        >
-          count is {count.value}
-        </button>
-      </div>
-    </>
-  );
-});
diff --git a/apps/website/src/components/home/js-chunk/js-chunk.css b/apps/website/src/components/home/js-chunk/js-chunk.css
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/website/src/components/home/js-chunk/js-chunk.tsx b/apps/website/src/components/home/js-chunk/js-chunk.tsx
new file mode 100644
index 00000000..5fd12364
--- /dev/null
+++ b/apps/website/src/components/home/js-chunk/js-chunk.tsx
@@ -0,0 +1,31 @@
+import { component$, useStylesScoped$ } from "@builder.io/qwik";
+
+export const JSChunk = component$(() => {
+  useStylesScoped$(
+    `
+          div {
+            width: 30px;
+            height: 30px;
+            color: var(--off-black);
+            background: #F1DC4E;
+            font-family: system-ui, sans-serif;
+            font-weight: 700;
+            display: flex;
+            align-items: end;
+            justify-content: end;
+            padding-right: 3px;
+          }
+
+          span {
+            display: block;
+          }
+           
+        `
+  );
+
+  return (
+    <div>
+      <span>JS</span>
+    </div>
+  );
+});
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index bad0deb2..a3a32344 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import { JSChunk } from "@components/home/js-chunk/js-chunk";
 import Layout from "src/layouts/Layout.astro";
 ---
 
@@ -11,7 +12,15 @@ import Layout from "src/layouts/Layout.astro";
         <span class="astro">ASTRO</span>
       </h1>
 
-      <span>The web's most efficient power couple.</span>
+      <JSChunk />
+
+      <span
+        >Zero hydration. Zero compromise. The only instantly interactive UI
+        framework that's HTML and server-first, just like Astro.</span
+      >
+
+      <button>npm create @qwikdev/astro@latest</button>
+      <a href="/docs">Explore the docs</a>
 
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nesciunt
@@ -40,7 +49,7 @@ import Layout from "src/layouts/Layout.astro";
 
   .intro {
     margin: 0 auto;
-    max-width: 600px;
+    max-width: 1240px;
     border-inline: 1px solid var(--neutral-950);
     padding: var(--space-m);
   }