Merge pull request #8 from taroj1205/feat/how-much

Added how much browser do you want section

.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

.gitignore

@@ -1 +1,3 @@
-node_modules
+node_modules
+.astro/settings.json
+dist

package.json

@@ -3,29 +3,35 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev",
+    "dev": "astro dev --port 3000",
-    "start": "astro dev",
+    "start": "astro preview --port 3000",
     "build": "astro build",
-    "preview": "astro preview",
+    "preview": "astro preview --port 3000",
     "astro": "astro",
     "format:write": "prettier --write ./src",
     "format": "prettier --check ./src"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "3.1.1",
+    "@astrojs/tailwind": "5.1.2",
-    "astro": "2.1.3",
+    "astro": "4.16.10",
     "autoprefixer": "10.4.14",
     "postcss": "8.4.21",
     "postcss-import": "^16.1.0",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.8",
+    "sharp": "^0.33.5",
     "tailwindcss": "3.2.7"
   },
   "dependencies": {
+    "@astrojs/react": "^3.6.2",
     "@fontsource/dm-sans": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
     "clsx": "^2.1.1",
+    "react": "^19.0.0-beta",
+    "react-dom": "^19.0.0-beta",
     "tailwind-merge": "^2.5.4"
   }
 }

public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

src/components/color-change.astro

@@ -0,0 +1,24 @@
+<input
+  type="color"
+  id="themeColor"
+  value="#f98175"
+  class="cursor-pointer rounded border-none bg-transparent"
+  aria-label="Theme color"
+/>
+
+<script>
+  const colorInput = document.querySelector("#themeColor") as HTMLInputElement;
+  colorInput?.addEventListener("input", (e) => {
+    const color = (e.target as HTMLInputElement).value;
+    document.documentElement.style.setProperty("--primary", color);
+  });
+</script>
+
+<style>
+  @tailwind base;
+  @layer base {
+    #themeColor {
+      @apply fixed top-1/2 right-2 h-10 w-10 appearance-none;
+    }
+  }
+</style>

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/footer.astro

@@ -0,0 +1,13 @@
+<footer>
+  <p>Work in progress - coming soon</p>
+</footer>
+
+<style>
+  @tailwind base;
+
+  @layer base {
+    footer {
+      @apply relative h-40 w-full bg-primary;
+    }
+  }
+</style>

src/components/glance.astro

@@ -0,0 +1,29 @@
+---
+import Download from "./download.astro";
+---
+
+<section id="glance">
+  <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-primary font-normal text-white"
+    >What are you waiting for?</Download
+  >
+  <video src="./glance.webm" autoplay loop muted></video>
+</section>
+
+<style>
+  @tailwind base;
+  @layer base {
+    #glance {
+      @apply section flex flex-col items-center gap-md py-20;
+    }
+
+    #glance 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";
@@ -7,8 +8,10 @@ import Navbar from "./navbar.astro";
 <header>
   <Navbar />
   <section>
-    <LanguageIcon class="h-7 w-7 text-primary dark:text-primary-dark" />
+    <LanguageIcon class="dark:text-secondary-dark h-7 w-7 text-secondary" />
-    <a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a>
+    <Download class="py-2 font-semibold"
+      ><DownloadIcon strokeWidth="2.5" />v1.0.1-a.17</Download
+    >
   </section>
 </header>
 
@@ -20,7 +23,7 @@ import Navbar from "./navbar.astro";
     }
 
     section {
-      @apply flex items-center gap-4;
+      @apply flex items-center gap-10;
     }
   }
 </style>

src/components/hero.astro

@@ -1,28 +1,61 @@
 ---
+// src/components/hero.astro
 import DownloadIcon from "./icons/download-icon.astro";
-import '@fontsource/dm-sans/700.css';
+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" class="section flex flex-col md:flex-row gap-md items-center">
+<section id="hero">
-  <div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
+  <h2>Stay focused, browse faster</h2>
-    <h2 class="md:text-center drop-shadow-md">Stay focused, browse faster</h2>
+  <p class="description">
-    <p class="max-w-prose md:text-center text-xl text-muted drop-shadow-sm">
+    Zen is beautifully designed, privacy-focused, and packed with features. We
-      Zen is beautifully designed, privacy-focused, and packed with features. We
+    care about your experience, not your data.
-      care about your experience, not your data.
+  </p>
-    </p>
+  <div class="download">
-    <div class="center flex flex-col gap-sm">
+    <Download><DownloadIcon /> Download Zen</Download>
-      <a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
+    <p>Available on Windows, Mac, and Linux</p>
-      <p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
+  </div>
-    </div>
+  <div class="hero__image">
+    <Image src={browserImage} alt="Zen Logo" />
+    <figcaption>
+      Your experience using Zen may change over time, as new features are added,
+      improved and adjusted with upstream Firefox updates. User discretion is
+      advised.
+    </figcaption>
   </div>
-    <div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
-      <img
-        src="https://media.discordapp.net/attachments/1302812062019358742/1302846711768678470/Default_Mode2.png?ex=67299a0d&is=6728488d&hm=6a9275e98149351b8415f76cf756d94c726b67beeefb59bbdab516e3a0c91203&=&format=webp&quality=lossless&width=1081&height=699"
-        alt="Zen Logo"
-        class="w-full rounded-lg drop-shadow-glow"
-      />
-      <figcaption class="text-md text-muted/95">
-        Your experience using Zen may change over time, as new features are added, improved and adjusted with upstream Firefox updates. User discretion is advised.
-      </figcaption>
-    </div>
 </section>
+
+<style>
+  @tailwind base;
+  @layer base {
+    section {
+      @apply section flex flex-col items-center gap-md py-20;
+    }
+
+    h2 {
+      @apply drop-shadow-md md:text-center;
+    }
+
+    .download {
+      @apply center flex flex-col gap-sm;
+    }
+
+    .download p {
+      @apply text-muted/95;
+    }
+
+    .hero__image {
+      @apply flex flex-1 flex-col gap-4;
+    }
+
+    img {
+      @apply w-full rounded-lg;
+    }
+
+    figcaption {
+      @apply text-muted/95;
+    }
+  }
+</style>

src/components/how-much.astro

@@ -0,0 +1,271 @@
+---
+import { Image } from "astro:assets";
+import compactImage from "@/assets/modes/compact.png";
+import collapsedImage from "@/assets/modes/collapsed.png";
+import standardImage from "@/assets/modes/standard.png";
+import splitImage from "@/assets/modes/split.png";
+
+type ModesOptions = "compact" | "collapsed" | "standard" | "split";
+
+const modes: ModesOptions[] = ["compact", "collapsed", "standard", "split"];
+---
+
+<section id="how-much">
+  <div>
+    <h3>
+      How <span class="highlight">much</span> browser do you want?
+    </h3>
+    <fieldset id="radio-group">
+      <legend class="sr-only">Choose a view</legend>
+      {
+        modes.map((mode) => (
+          <label for={mode}>
+            <input
+              type="radio"
+              id={mode}
+              name="view"
+              value={mode}
+              checked={mode === "compact"}
+              class="sr-only"
+            />
+            <span>{mode.charAt(0).toUpperCase() + mode.slice(1)}</span>
+          </label>
+        ))
+      }
+    </fieldset>
+    <div id="slider-container">
+      <span id="slider-value">🌱</span>
+      <input
+        type="range"
+        id="view-slider"
+        min="0"
+        max="3"
+        value="0"
+        class="w-full"
+      />
+      <span id="slider-value">🌳</span>
+    </div>
+  </div>
+  <div id="image-container">
+    <div id="image-wrapper">
+      {
+        modes.map((mode, index) => (
+          <Image
+            src={
+              [compactImage, collapsedImage, standardImage, splitImage][index]
+            }
+            alt={`${mode} browser view`}
+            id={mode}
+          />
+        ))
+      }
+    </div>
+    <div id="carousel-indicators">
+      {
+        modes.map((_, index) => (
+          <span
+            class:list={["indicator", { active: index === 0 }]}
+            data-index={index}
+          />
+        ))
+      }
+    </div>
+  </div>
+</section>
+
+<script>
+  const radioButtons = document.querySelectorAll('input[name="view"]');
+  const radioGroup = document.getElementById("radio-group") as HTMLElement;
+  const labels = radioGroup.querySelectorAll("label");
+  const imageWrapper = document.getElementById("image-wrapper") as HTMLElement;
+  const indicators = document.querySelectorAll(".indicator");
+  const modeOrder = ["compact", "collapsed", "standard", "split"];
+  let currentIndex = 0;
+
+  const slider = document.getElementById("view-slider") as HTMLInputElement;
+
+  function updateImages(selectedMode: string) {
+    const selectedIndex = modeOrder.indexOf(selectedMode);
+    currentIndex = selectedIndex;
+    const offset = selectedIndex * -100;
+    const mediaQuery = window.matchMedia("(min-width: 1280px)");
+    if (mediaQuery.matches) {
+      imageWrapper.style.transform = `translateY(${offset}%)`;
+    } else {
+      imageWrapper.style.transform = `translateX(${offset}%)`;
+    }
+    updateIndicators();
+    updateRadioButtons();
+    updateSlider();
+  }
+
+  function updateIndicators() {
+    indicators.forEach((indicator, index) => {
+      if (index === currentIndex) {
+        indicator.classList.add("active");
+      } else {
+        indicator.classList.remove("active");
+      }
+    });
+  }
+
+  function updateRadioButtons() {
+    const selectedRadio = document.querySelector(
+      `input[value="${modeOrder[currentIndex]}"]`,
+    ) as HTMLInputElement;
+    if (selectedRadio) {
+      selectedRadio.checked = true;
+    }
+  }
+
+  function updateSlider() {
+    slider.value = currentIndex.toString();
+  }
+
+  radioButtons.forEach((radio) => {
+    radio.addEventListener("change", (e) => {
+      if (e.target instanceof HTMLInputElement && e.target.checked) {
+        updateImages(e.target.value);
+      }
+    });
+  });
+
+  labels.forEach((label) => {
+    label.addEventListener("mouseenter", (e) => {
+      if (e.target instanceof HTMLLabelElement) {
+        const input = e.target.querySelector("input") as HTMLInputElement;
+        if (input) {
+          input.checked = true;
+          updateImages(input.value);
+        }
+      }
+    });
+  });
+
+  indicators.forEach((indicator, index) => {
+    indicator.addEventListener("click", () => {
+      updateImages(modeOrder[index]);
+    });
+
+    indicator.addEventListener("mouseenter", () => {
+      updateImages(modeOrder[index]);
+    });
+  });
+
+  slider.addEventListener("input", () => {
+    updateImages(modeOrder[parseInt(slider.value)]);
+  });
+
+  let startX = 0;
+  let currentX = 0;
+  let isDragging = false;
+
+  imageWrapper.addEventListener("touchstart", (e) => {
+    startX = e.touches[0].clientX;
+    isDragging = true;
+    imageWrapper.style.transition = "none";
+  });
+
+  imageWrapper.addEventListener("touchmove", (e) => {
+    currentX = e.touches[0].clientX;
+
+    const deltaX = (currentX - startX) / 4;
+
+    const newTranslateX = deltaX + currentIndex * -100;
+
+    const maxTranslateX = (modeOrder.length - 1) * -100;
+
+    if (newTranslateX <= 10 && newTranslateX >= maxTranslateX - 10) {
+      imageWrapper.style.transform = `translateX(${newTranslateX}%)`;
+    }
+  });
+
+  imageWrapper.addEventListener("touchend", () => {
+    isDragging = false;
+    imageWrapper.style.transition = "transform 0.3s ease-in-out";
+    const deltaX = currentX - startX;
+    if (deltaX > 50 && currentIndex > 0) {
+      updateImages(modeOrder[currentIndex - 1]);
+    } else if (deltaX < -50 && currentIndex < modeOrder.length - 1) {
+      updateImages(modeOrder[currentIndex + 1]);
+    } else {
+      updateImages(modeOrder[currentIndex]);
+    }
+  });
+
+  imageWrapper.addEventListener("wheel", (e) => {
+    if (e.deltaY < 0 && currentIndex > 0) {
+      e.preventDefault();
+      updateImages(modeOrder[currentIndex - 1]);
+    } else if (e.deltaY > 0 && currentIndex < modeOrder.length - 1) {
+      e.preventDefault();
+      updateImages(modeOrder[currentIndex + 1]);
+    }
+  });
+</script>
+
+<style>
+  @tailwind base;
+
+  @layer base {
+    section {
+      @apply grid w-full grid-cols-1 justify-center xl:grid-cols-[1fr_2fr] xl:gap-8;
+    }
+
+    section > div {
+      @apply flex flex-col gap-md rounded-lg py-6;
+    }
+
+    label {
+      @apply flex cursor-pointer items-center gap-3 rounded-lg p-3 hover:bg-primary hover:text-white;
+    }
+
+    label:has(input:checked) {
+      @apply bg-primary text-white;
+    }
+
+    label span {
+      @apply text-lg;
+    }
+
+    #image-container {
+      @apply relative aspect-[1.55/1] overflow-clip rounded-lg;
+    }
+
+    #image-wrapper {
+      @apply absolute inset-0 flex flex-row transition-transform duration-300 ease-in-out xl:flex-col;
+    }
+
+    img {
+      @apply aspect-[1.55/1] bg-[#272626] object-cover first:rounded-l-lg last:rounded-r-lg;
+    }
+
+    #radio-group {
+      @apply hidden flex-col xl:flex;
+    }
+
+    #carousel-indicators {
+      @apply absolute flex -translate-x-1/2 transform gap-2 xl:top-1/2 xl:right-4 xl:-translate-y-1/2 xl:flex-col -xl:bottom-4 -xl:left-1/2;
+    }
+
+    .indicator {
+      @apply h-3 w-3 cursor-pointer rounded-full bg-primary bg-opacity-50 transition-all duration-300 ease-in-out;
+    }
+
+    .indicator.active {
+      @apply w-8 bg-opacity-100 xl:h-8 xl:w-3;
+    }
+
+    #slider-container {
+      @apply grid w-full max-w-xl grid-cols-[auto_1fr_auto] gap-md place-self-center xl:hidden;
+    }
+
+    #view-slider {
+      @apply w-full;
+    }
+
+    #slider-labels {
+      @apply text-xs;
+    }
+  }
+</style>

src/components/icons/chevron-left-icon.astro

@@ -0,0 +1,17 @@
+---
+import { ny } from "../../lib/utils";
+const { class: className } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={ny("w-5 h-5", className)}><path d="m15 18-6-6 6-6"></path></svg
+>

src/components/icons/chevron-right-icon.astro

@@ -0,0 +1,17 @@
+---
+import { ny } from "../../lib/utils";
+const { class: className } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={ny("w-5 h-5", className)}><path d="m9 18 6-6-6-6"></path></svg
+>

src/components/icons/download-icon.astro

@@ -1,15 +1,16 @@
 ---
 import { ny } from "../../lib/utils";
-const { class: className } = Astro.props;
+const { class: className, strokeWidth = "1.5", ...props } = Astro.props;
 ---
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
   fill="none"
   viewBox="0 0 24 24"
-  stroke-width="1.5"
+  stroke-width={strokeWidth}
   stroke="currentColor"
   class={ny("w-5 h-5", className)}
+  {...props}
 >
   <path
     stroke-linecap="round"

src/components/icons/zen-icon.astro

@@ -0,0 +1,57 @@
+---
+import { ny } from "../../lib/utils";
+const { class: className, ...props } = Astro.props;
+---
+
+<!--?xml version="1.0" encoding="UTF-8"?-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 80 80"
+  class={ny("w-5 h-5", className)}
+  {...props}
+  ><defs
+    ><style>
+      .g {
+        fill: var(--primary);
+      }
+      .g,
+      .h,
+      .i {
+        stroke-width: 0px;
+      }
+      .h {
+        fill: url(#e);
+      }
+      .i {
+        fill: #fef9fe;
+      }
+    </style><linearGradient
+      id="e"
+      x1="40"
+      y1="80"
+      x2="40"
+      y2="0"
+      gradientUnits="userSpaceOnUse"
+      ><stop offset=".1" stop-color="#fff" stop-opacity=".02"></stop><stop
+        offset=".9"
+        stop-color="#fff"
+        stop-opacity=".1"></stop></linearGradient
+    ></defs
+  ><g id="c"
+    ><rect class="g" width="80" height="80" rx="18.25" ry="18.25"></rect></g
+  ><g id="d"
+    ><rect class="h" width="80" height="80" rx="18.25" ry="18.25"></rect></g
+  ><g id="f"
+    ><path
+      class="i"
+      d="M63.4352,57.677c-.0536,3.2125-2.7416,5.7589-5.9546,5.7589h-22.0762c-1.1221,0-1.8295-1.2103-1.2751-2.1859,1.4628-2.5738,4.3202-6.7829,8.5529-9.1539.4406-.2468.9366-.3783,1.4416-.3783h13.4532c3.2692,0,5.9129,2.6774,5.8582,5.9591Z"
+    ></path><path
+      class="i"
+      d="M45.8707,18.7498c-1.4628,2.5738-4.3202,6.7829-8.5529,9.1539-.4406.2468-.9366.3783-1.4416.3783h-13.3567c-3.213,0-5.901-2.5464-5.9546-5.7589-.0547-3.2817,2.589-5.9591,5.8582-5.9591h22.1726c1.1221,0,1.8295,1.2103,1.2751,2.1859Z"
+    ></path><path
+      class="i"
+      d="M22.4207,63.4375c-.7473,0-1.5065-.1438-2.2398-.4475-2.9896-1.2383-4.4093-4.6657-3.171-7.6551,1.9045-4.5977,4.6342-8.7196,8.1136-12.2511,3.6044-3.6585,7.8551-6.5172,12.6343-8.4968,6.5691-2.7211,11.6853-7.8373,14.4061-14.4061,1.2383-2.9896,4.6658-4.409,7.6551-3.171,2.9896,1.2383,4.4093,4.6657,3.171,7.6551-1.9045,4.5977-4.6342,8.7196-8.1136,12.2511-3.6044,3.6585-7.8551,6.5172-12.6343,8.4968-6.5691,2.7211-11.6853,7.8373-14.4061,14.4061-.9345,2.2562-3.1164,3.6185-5.4153,3.6185Z"
+    ></path></g
+  ></svg
+>

src/components/navbar.astro

@@ -1,24 +1,20 @@
+---
+import ZenIcon from "./icons/zen-icon.astro";
+---
+
 <nav>
-  <a
+  <a href="/">
-    href="/"  
+    <ZenIcon class="h-10 w-10 fill-primary" />
-  >
-    <img
-      alt="Zen Logo"
-      loading="lazy"
-      width="40"
-      height="40"
-      decoding="async"
-      data-nimg="1"
-      srcset="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg 1x, https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg 2x"
-      src="https://cdn.jsdelivr.net/gh/zen-browser/www@latest/public/logos/zen-tangerine.svg"
-    />
   </a>
   <ul>
     <li><a href="/">Browser</a></li>
     <li><a href="https://docs.zen-browser.app/">Resources</a></li>
     <li><a href="https://zen-browser.app/mods">Mods</a></li>
     <li>
-      <a href="https://www.patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink">Donate</a>
+      <a
+        href="https://www.patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
+        >Donate</a
+      >
     </li>
   </ul>
 </nav>
@@ -27,10 +23,10 @@
   @tailwind base;
   @layer base {
     nav {
-      @apply flex justify-center gap-10 text-primary font-semibold text-lg;
+      @apply flex justify-center gap-10 text-lg font-semibold text-secondary;
     }
     ul {
-      @apply hidden items-center justify-center gap-10 md:flex drop-shadow-md;
+      @apply hidden items-center justify-center gap-10 drop-shadow-md md:flex;
     }
   }
 </style>

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/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/main.astro

@@ -1,8 +1,10 @@
 ---
 import CircleEffect from "../components/circle-effect.astro";
 import Header from "../components/header.astro";
+import Footer from "../components/footer.astro";
 const { title } = Astro.props;
-import '@fontsource/inter';
+import "@fontsource/inter";
+import ColorChange from "@/components/color-change.astro";
 ---
 
 <html lang="en">
@@ -21,21 +23,31 @@ import '@fontsource/inter';
   <body>
     <div class="container flex min-h-screen flex-col items-center gap-y-4xl">
       <CircleEffect />
+      <div
+        class="absolute inset-0 -z-10 bg-gradient-to-b from-primary/20 to-transparent"
+      >
+      </div>
       <Header />
-      <main class="flex w-full flex-col gap-4"><slot /></main>
+      <main class="flex w-full flex-col gap-40"><slot /></main>
     </div>
+    <Footer />
+    <ColorChange />
   </body>
 </html>
 
-<style>
+<style is:global>
-  body {
+  @media (prefers-reduced-motion: reduce) {
-    background: linear-gradient(
+    *,
-        to bottom,
+    *::before,
-        hsla(22, 96%, 60%, 0.1),
+    *::after {
-        transparent 70%
+      animation-duration: 0.01ms !important;
-      ),
+      animation-iteration-count: 1 !important;
-      linear-gradient(to bottom, hsla(22, 96%, 60%, 0.05), transparent 50%),
+      transition-duration: 0.01ms !important;
-      linear-gradient(to bottom, hsla(22, 96%, 60%, 0.03), transparent 30%);
+      scroll-behavior: auto !important;
-    background-size: cover;
+    }
+  }
+
+  :root {
+    --primary: hsl(6, 96%, 70%);
   }
 </style>

src/pages/download.astro

@@ -10,8 +10,10 @@ import Layout from "../layouts/main.astro";
       device you're using. This will only take a moment, we promise.
     </p>
     <div>
-      <h3 class="text-4xl font-semibold text-primary">Platform</h3>
+      <h3 class="text-4xl font-semibold text-secondary">Platform</h3>
-      <p class="text-muted">Choose the platform you want to download Zen for:</p>
+      <p class="text-muted">
+        Choose the platform you want to download Zen for:
+      </p>
     </div>
   </section>
 </Layout>

src/pages/index.astro

@@ -1,8 +1,14 @@
 ---
-import Hero from "../components/hero.astro";
+import HowMuch from "@/components/how-much.astro";
-import Layout from "../layouts/main.astro";
+import Hero from "@/components/hero.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

@@ -16,8 +16,11 @@ module.exports = {
     },
     extend: {
       colors: {
-        primary: "hsl(22, 96%, 60%)",
+        // secondary: "hsl(258, 48%, 23%)",
-        muted: "hsl(22, 96%, 70%)",
+        secondary: "hsl(0, 0%, 20%)",
+        // primary: "hsl(6, 96%, 70%)",
+        primary: "var(--primary)",
+        muted: "hsl(0, 0%, 30%)",
       },
       spacing: {
         xs: "0.5rem",
@@ -34,9 +37,6 @@ module.exports = {
         "8xl": "10rem",
         "9xl": "11rem",
       },
-      fontSize: {
-        "scale-large": "clamp(3rem, 6vw, 4rem)",
-      },
       fontFamily: {
         sans: [
           "Inter",
@@ -50,20 +50,36 @@ module.exports = {
         ],
         dm: ["DM Sans"],
       },
-      dropShadow: {
+      fontSize: {
-        glow: [
+        "scale-sm": "clamp(1rem, 2vw, 1.5rem)",
-          "0 0px 5px hsla(22, 96%, 60%, 0.90)",
+        "scale-md": "clamp(1.5rem, 3vw, 2rem)",
-          "0 0px 20px hsla(22, 96%, 60%, 0.75)"
+        "scale-lg": "clamp(3rem, 6vw, 4rem)",
-        ]
+        "scale-xl": "clamp(4rem, 8vw, 5rem)",
-      }
+        "scale-2xl": "clamp(5rem, 10vw, 6rem)",
+        "scale-3xl": "clamp(6rem, 12vw, 7rem)",
+      },
+      screens: {
+        "-sm": { max: "639px" },
+        "-md": { max: "767px" },
+        "-lg": { max: "1023px" },
+        "-xl": { max: "1279px" },
+        "-2xl": { max: "1535px" },
+      },
     },
   },
   plugins: [
     plugin(({ addBase, addComponents, addUtilities, theme }) => {
       addBase({
         h2: {
-          "@apply text-scale-large font-bold text-primary": {},
+          fontSize: `clamp(${theme("fontSize.6xl")}, 10vw, calc(${theme("fontSize.6xl")} + 1rem))`,
-
+          "@apply font-bold text-secondary leading-none": {},
+        },
+        h3: {
+          fontSize: `clamp(${theme("fontSize.4xl")}, 10vw, calc(${theme("fontSize.4xl")} + 1rem))`,
+          "@apply font-bold text-secondary leading-none": {},
+        },
+        p: {
+          "@apply text-secondary": {},
         },
       });
       addComponents({
@@ -74,12 +90,18 @@ module.exports = {
           alignItems: "center",
           textAlign: "center",
         },
+        ".highlight": {
+          color: theme("colors.primary"),
+        },
         ".center": {
           "@apply text-center place-items-center": {},
         },
         ".btn-base": {
-          "@apply bg-black text-white 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 dark:text-black":
+          "@apply text-white 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 bg-primary":
-
+            {},
+        },
+        ".description": {
+          "@apply max-w-prose text-xl text-muted drop-shadow-sm md:text-center":
             {},
         },
       });

tsconfig.json

@@ -1,3 +1,13 @@
 {
-  "extends": "astro/tsconfigs/base"
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
 }