add in dasbboard

QwikDev · Jan 19, 2025 · 39d7626 · 39d7626
1 parent 203657d
commit 39d7626
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 4 deletions.
diff --git a/apps/website/src/components/home/background/background.css b/apps/website/src/components/home/background/background.css
diff --git a/apps/website/src/layouts/home/Dashboard.astro 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
@@ -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
@@ -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>
+</Layout>
diff --git 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: