feat(glance): add glance section

src/components/download.astro

@@ -0,0 +1,8 @@
+---
+import { ny } from "@/lib/utils";
+const { class: className } = Astro.props;
+---
+
+<a href="/download" class={ny("btn-base", className)} draggable="false">
+  <slot /></a
+>

src/components/glance.astro

@@ -0,0 +1,29 @@
+---
+import Download from "./download.astro";
+---
+
+<section>
+  <h3>Introducing Zen <span class="highlight">Glance</span> 👀</h3>
+  <p class="description">
+    Zen's glance feature allows you to quickly preview a website without leaving
+    your current page. It's perfect for checking out links before you click on
+    them, saving you time and hassle
+  </p>
+  <Download class="bg-secondary font-normal text-white"
+    >What are you waiting for?</Download
+  >
+  <video src="./glance.webm" autoplay loop muted></video>
+</section>
+
+<style>
+  @tailwind base;
+  @layer base {
+    section {
+      @apply section flex flex-col items-center gap-md py-20;
+    }
+
+    video {
+      @apply w-full rounded-lg;
+    }
+  }
+</style>

src/components/header.astro

@@ -1,4 +1,5 @@
 ---
+import Download from "./download.astro";
 import DownloadIcon from "./icons/download-icon.astro";
 import LanguageIcon from "./icons/language-icon.astro";
 import Navbar from "./navbar.astro";
@@ -8,7 +9,7 @@ import Navbar from "./navbar.astro";
   <Navbar />
   <section>
     <LanguageIcon class="dark:text-primary-dark h-7 w-7 text-primary" />
-    <a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a>
+    <Download class="py-2"><DownloadIcon />v1.0.1-a.17</Download>
   </section>
 </header>
 

src/components/hero.astro

@@ -4,6 +4,7 @@ import DownloadIcon from "./icons/download-icon.astro";
 import browserImage from "@/assets/Redrawn_v1_Barebones.png";
 import "@fontsource/dm-sans/700.css";
 import { Image } from "astro:assets";
+import Download from "./download.astro";
 ---
 
 <section id="hero">
@@ -13,7 +14,7 @@ import { Image } from "astro:assets";
     care about your experience, not your data.
   </p>
   <div class="download">
-    <a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
+    <Download><DownloadIcon /> Download Zen</Download>
     <p>Available on Windows, Mac, and Linux</p>
   </div>
   <div class="hero__image">
@@ -37,10 +38,6 @@ import { Image } from "astro:assets";
       @apply drop-shadow-md md:text-center;
     }
 
-    .description {
-      @apply max-w-prose text-xl text-muted drop-shadow-sm md:text-center;
-    }
-
     .download {
       @apply center flex flex-col gap-sm;
     }

src/components/how-much.astro

@@ -217,11 +217,11 @@ const modes: ModesOptions[] = ["compact", "collapsed", "standard", "split"];
     }
 
     label {
-      @apply flex cursor-pointer items-center gap-3 rounded-md p-3 transition-colors duration-200 hover:bg-secondary;
+      @apply flex cursor-pointer items-center gap-3 rounded-lg p-3 hover:bg-secondary hover:text-white;
     }
 
     label:has(input:checked) {
-      @apply bg-secondary;
+      @apply bg-secondary text-white;
     }
 
     label span {

src/components/why-zen.astro

@@ -0,0 +1,61 @@
+<section id="why-zen">
+  <h3>Why Zen?</h3>
+  <table class="comparison-table">
+    <thead>
+      <tr>
+        <th></th>
+        <th>Zen</th>
+        <th>Arc</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Customization</td>
+        <td>◯</td>
+        <td>✗</td>
+      </tr>
+      <tr>
+        <td>Open Source</td>
+        <td>◯</td>
+        <td>✗</td>
+      </tr>
+      <tr>
+        <td>Privacy</td>
+        <td>◯</td>
+        <td>✗</td>
+      </tr>
+      <tr>
+        <td>Ad block</td>
+        <td>◯</td>
+        <td>△*</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+<style>
+  @tailwind base;
+
+  @layer base {
+    #why-zen {
+      @apply flex flex-col gap-4 p-6;
+    }
+
+    table {
+      @apply w-full max-w-2xl border-collapse text-left;
+    }
+
+    th,
+    td {
+      @apply border border-gray-300 px-4 py-2 text-3xl;
+    }
+
+    th {
+      @apply bg-gray-100 text-center;
+    }
+
+    td {
+      @apply text-center;
+    }
+  }
+</style>

src/pages/index.astro

@@ -1,10 +1,14 @@
 ---
-import HowMuch from "../components/how-much/index.astro";
+import HowMuch from "@/components/how-much.astro";
-import Hero from "../components/hero.astro";
+import Hero from "@/components/hero.astro";
-import Layout from "../layouts/main.astro";
+import Layout from "@/layouts/main.astro";
+import Glance from "@/components/glance.astro";
+// import WhyZen from "@/components/why-zen.astro";
 ---
 
 <Layout title="Zen Browser">
   <Hero />
   <HowMuch />
+  <Glance />
+  <!-- <WhyZen /> -->
 </Layout>

tailwind.config.cjs

@@ -18,7 +18,7 @@ module.exports = {
       colors: {
         // primary: "hsl(258, 48%, 23%)",
         primary: "hsl(0 0% 20%)",
-        secondary: "hsl(22, 96%, 60%)",
+        secondary: "hsl(22, 100%, 50%)",
         muted: "hsl(0 0% 30%)",
       },
       spacing: {
@@ -74,11 +74,11 @@ module.exports = {
           "@apply font-bold text-primary leading-none": {},
         },
         h3: {
-          fontSize: `clamp(${theme("fontSize.5xl")}, 10vw, calc(${theme("fontSize.5xl")} + 1rem))`,
+          fontSize: `clamp(${theme("fontSize.4xl")}, 10vw, calc(${theme("fontSize.4xl")} + 1rem))`,
           "@apply font-bold text-primary leading-none": {},
         },
         p: {
-          "@apply text-primary leading-none": {},
+          "@apply text-primary": {},
         },
       });
       addComponents({
@@ -99,6 +99,10 @@ module.exports = {
           "@apply bg-black text-primary font-semibold py-3 px-6 rounded-full w-fit flex items-center gap-2 text-lg drop-shadow-lg hover:drop-shadow-xl transition-all duration-300 dark:bg-white":
             {},
         },
+        ".description": {
+          "@apply max-w-prose text-xl text-muted drop-shadow-sm md:text-center":
+            {},
+        },
       });
     }),
   ],