feat(how-much): added how much browser do you want section

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1731292924393
+	}
+}

.astro/types.d.ts

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

package.json

@@ -3,8 +3,8 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
+    "dev": "astro dev --port 3000",
+    "start": "astro preview",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
@@ -12,20 +12,26 @@
     "format": "prettier --check ./src"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "3.1.1",
-    "astro": "2.1.3",
+    "@astrojs/tailwind": "5.1.2",
+    "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/footer.astro

@@ -0,0 +1,3 @@
+<footer class="h-40">
+  <p>Work in progress - coming soon</p>
+</footer>

src/components/header.astro

@@ -7,7 +7,7 @@ import Navbar from "./navbar.astro";
 <header>
   <Navbar />
   <section>
-    <LanguageIcon class="h-7 w-7 text-primary dark:text-primary-dark" />
+    <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>
   </section>
 </header>
@@ -20,7 +20,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,64 @@
 ---
+// 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";
 ---
 
-<section id="hero" class="section flex flex-col md:flex-row gap-md items-center">
-  <div class="flex-1 md:max-w-1/2 flex flex-col gap-4">
-    <h2 class="md:text-center drop-shadow-md">Stay focused, browse faster</h2>
-    <p class="max-w-prose md:text-center text-xl text-muted drop-shadow-sm">
+<section id="hero">
+  <h2>Stay focused, browse faster</h2>
+  <p class="description">
     Zen is beautifully designed, privacy-focused, and packed with features. We
     care about your experience, not your data.
   </p>
-    <div class="center flex flex-col gap-sm">
+  <div class="download">
     <a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
-      <p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
+    <p>Available on Windows, Mac, and Linux</p>
   </div>
-  </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.
+  <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>
 </section>
+
+<style>
+  @tailwind base;
+  @layer base {
+    section {
+      @apply section flex flex-col items-center gap-md;
+    }
+
+    h2 {
+      @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;
+    }
+
+    .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/index.astro

@@ -0,0 +1,140 @@
+---
+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";
+import "./styles.css";
+
+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"}
+            />
+            <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 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);
+      }
+    });
+  });
+
+  indicators.forEach((indicator, index) => {
+    indicator.addEventListener("click", () => {
+      updateImages(modeOrder[index]);
+    });
+  });
+
+  slider.addEventListener("input", () => {
+    updateImages(modeOrder[parseInt(slider.value)]);
+  });
+</script>

src/components/how-much/styles.css

@@ -0,0 +1,64 @@
+@tailwind base;
+
+@layer base {
+  section {
+    @apply grid w-full grid-cols-1 justify-center xl:gap-8 xl:grid-cols-[1fr_2fr];
+  }
+
+  section>div {
+    @apply flex flex-col gap-md rounded-lg p-6;
+  }
+
+  label {
+    @apply flex cursor-pointer items-center gap-3 rounded-md p-3 transition-colors hover:bg-gray-100;
+  }
+
+  label span {
+    @apply text-lg;
+  }
+
+  input[type="radio"] {
+    @apply h-4 w-4 text-secondary focus:ring-secondary;
+  }
+
+  #image-container {
+    @apply relative aspect-[1.55/1] overflow-clip rounded-lg;
+  }
+
+  #image-wrapper {
+    @apply absolute inset-0 transition-transform duration-300 ease-in-out flex flex-row xl:flex-col;
+  }
+
+  img {
+    @apply aspect-[1.55/1] object-cover bg-[#272626];
+  }
+
+  #radio-group {
+    @apply hidden flex-col xl:flex;
+  }
+
+  #carousel-indicators {
+    @apply absolute -xl:bottom-4 -xl:left-1/2 transform -translate-x-1/2 flex gap-2 xl:top-1/2 xl:right-4 xl:-translate-y-1/2 xl:flex-col;
+  }
+
+  .indicator {
+    @apply h-3 w-3 cursor-pointer rounded-full bg-secondary bg-opacity-50 transition-all duration-300 ease-in-out;
+  }
+
+  .indicator.active {
+    @apply w-8 xl:h-8 xl:w-3 bg-opacity-100;
+  }
+
+  #slider-container {
+    @apply w-full xl:hidden grid grid-cols-[auto_1fr_auto] gap-md max-w-xl place-self-center;
+  }
+
+  #view-slider {
+    @apply w-full;
+  }
+
+  #slider-labels {
+    @apply text-xs;
+  }
+
+}

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

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

src/layouts/main.astro

@@ -1,8 +1,9 @@
 ---
 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";
 ---
 
 <html lang="en">
@@ -21,21 +22,13 @@ 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-secondary/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>
+      <Footer />
     </div>
   </body>
 </html>
-
-<style>
-  body {
-    background: linear-gradient(
-        to bottom,
-        hsla(22, 96%, 60%, 0.1),
-        transparent 70%
-      ),
-      linear-gradient(to bottom, hsla(22, 96%, 60%, 0.05), transparent 50%),
-      linear-gradient(to bottom, hsla(22, 96%, 60%, 0.03), transparent 30%);
-    background-size: cover;
-  }
-</style>

src/pages/index.astro

@@ -1,8 +1,10 @@
 ---
+import HowMuch from "../components/how-much/index.astro";
 import Hero from "../components/hero.astro";
 import Layout from "../layouts/main.astro";
 ---
 
 <Layout title="Zen Browser">
   <Hero />
+  <HowMuch />
 </Layout>

tailwind.config.cjs

@@ -16,8 +16,10 @@ module.exports = {
     },
     extend: {
       colors: {
-        primary: "hsl(22, 96%, 60%)",
-        muted: "hsl(22, 96%, 70%)",
+        // primary: "hsl(258, 48%, 23%)",
+        primary: "hsl(0 0% 20%)",
+        secondary: "hsl(22, 96%, 60%)",
+        muted: "hsl(0 0% 30%)",
       },
       spacing: {
         xs: "0.5rem",
@@ -34,9 +36,6 @@ module.exports = {
         "8xl": "10rem",
         "9xl": "11rem",
       },
-      fontSize: {
-        "scale-large": "clamp(3rem, 6vw, 4rem)",
-      },
       fontFamily: {
         sans: [
           "Inter",
@@ -50,20 +49,26 @@ module.exports = {
         ],
         dm: ["DM Sans"],
       },
-      dropShadow: {
-        glow: [
-          "0 0px 5px hsla(22, 96%, 60%, 0.90)",
-          "0 0px 20px hsla(22, 96%, 60%, 0.75)"
-        ]
-      }
+      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": {},
-
+          "@apply text-7xl font-bold text-primary": {},
+        },
+        p: {
+          "@apply text-primary": {},
+        },
+        h3: {
+          "@apply text-5xl font-bold text-primary": {},
         },
       });
       addComponents({
@@ -74,12 +79,14 @@ module.exports = {
           alignItems: "center",
           textAlign: "center",
         },
+        ".highlight": {
+          color: theme("colors.secondary"),
+        },
         ".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 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":
             {},
         },
       });

tsconfig.json

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