From 39d7626ab73cdd768cc75cbeaacf52166c4463bc Mon Sep 17 00:00:00 2001
From: thejackshelton <me@jackshelton.com>
Date: Sun, 19 Jan 2025 11:10:40 -0600
Subject: [PATCH] add in dasbboard

---
 .../components/home/background/background.css   | 14 ++++++++++++--
 apps/website/src/layouts/home/Dashboard.astro   | 17 +++++++++++++++++
 apps/website/src/layouts/home/Hero.astro        |  2 +-
 apps/website/src/pages/index.astro              |  4 +++-
 apps/website/src/styles/global.css              |  4 ++++
 5 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 apps/website/src/layouts/home/Dashboard.astro

diff --git a/apps/website/src/components/home/background/background.css b/apps/website/src/components/home/background/background.css
index 84e5c56..7021fdc 100644
--- a/apps/website/src/components/home/background/background.css
+++ b/apps/website/src/components/home/background/background.css
@@ -16,15 +16,25 @@
 span {
   background: linear-gradient(to bottom, transparent 10%, var(--off-black) 100%);
   display: block;
-  height: 160px;
+  height: var(--space-xl-3xl);
   width: 100%;
   position: absolute;
   top: 0;
   z-index: 50;
 }
 
+@media (max-width: 640px) {
+  span {
+    display: none;
+  }
+
+  .background-wrapper > div {
+    display: none;
+  }
+}
+
 .background-wrapper > div {
-  height: 160px;
+  height: var(--space-xl-3xl);
   background: lightblue;
   animation: fade-background 3s forwards;
   opacity: 0;
diff --git a/apps/website/src/layouts/home/Dashboard.astro b/apps/website/src/layouts/home/Dashboard.astro
new file mode 100644
index 0000000..0244ffa
--- /dev/null
+++ b/apps/website/src/layouts/home/Dashboard.astro
@@ -0,0 +1,17 @@
+---
+
+---
+
+<div class="dashboard">
+  <h2>Dashboard</h2>
+</div>
+
+<style>
+    .dashboard {
+      margin: 0 auto;
+      max-width: var(--breakpoint-xl);
+      border-inline: 1px solid var(--neutral-950);
+      padding: var(--space-m);
+      padding-block: var(--space-xl);
+    }
+</style>
diff --git a/apps/website/src/layouts/home/Hero.astro b/apps/website/src/layouts/home/Hero.astro
index 0d4621d..ae7fb92 100644
--- a/apps/website/src/layouts/home/Hero.astro
+++ b/apps/website/src/layouts/home/Hero.astro
@@ -79,7 +79,7 @@ import { Icon } from "astro-icon/components";
   
     .intro {
       margin: 0 auto;
-      max-width: 1240px;
+      max-width: var(--breakpoint-xl);
       border-inline: 1px solid var(--neutral-950);
       padding: var(--space-m);
     }
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 89bb8ac..5fc9e42 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -1,10 +1,12 @@
 ---
 import Layout from "@layouts/Layout.astro";
+import Dashboard from "@layouts/home/Dashboard.astro";
 import Hero from "@layouts/home/Hero.astro";
 ---
 
 <Layout title="Qwik + Astro">
   <main>
     <Hero />
+    <Dashboard />
   </main>
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index 96cb62b..8627f5a 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -85,6 +85,7 @@
 
   /* Custom pairs */
   --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
+  --space-xl-3xl: clamp(3.375rem, 1.9402rem + 7.1739vw, 7.5rem);
 
   /* Animations */
   --qa-fade: cubic-bezier(0.8, -0.4, 0.5, 1);
@@ -101,6 +102,9 @@
     1
   );
 
+  --breakpoint-sm: 640px;
+  --breakpoint-xl: 1240px;
+
   /* Shadows */
   --shadow-color: 0deg 0% 0%;
   --shadow-elevation-low: