feat(glance): add glance section

This commit is contained in:
taroj1205 2024-11-11 21:04:01 +13:00
parent d52d737d6d
commit 4a47c6d65c
9 changed files with 118 additions and 14 deletions

BIN
public/glance.webm Normal file

Binary file not shown.

View file

@ -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
>

View file

@ -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>

View file

@ -1,4 +1,5 @@
--- ---
import Download from "./download.astro";
import DownloadIcon from "./icons/download-icon.astro"; import DownloadIcon from "./icons/download-icon.astro";
import LanguageIcon from "./icons/language-icon.astro"; import LanguageIcon from "./icons/language-icon.astro";
import Navbar from "./navbar.astro"; import Navbar from "./navbar.astro";
@ -8,7 +9,7 @@ import Navbar from "./navbar.astro";
<Navbar /> <Navbar />
<section> <section>
<LanguageIcon class="dark:text-primary-dark h-7 w-7 text-primary" /> <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> </section>
</header> </header>

View file

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

View file

@ -217,11 +217,11 @@ const modes: ModesOptions[] = ["compact", "collapsed", "standard", "split"];
} }
label { 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) { label:has(input:checked) {
@apply bg-secondary; @apply bg-secondary text-white;
} }
label span { label span {

View file

@ -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>

View file

@ -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"> <Layout title="Zen Browser">
<Hero /> <Hero />
<HowMuch /> <HowMuch />
<Glance />
<!-- <WhyZen /> -->
</Layout> </Layout>

View file

@ -18,7 +18,7 @@ module.exports = {
colors: { colors: {
// primary: "hsl(258, 48%, 23%)", // primary: "hsl(258, 48%, 23%)",
primary: "hsl(0 0% 20%)", primary: "hsl(0 0% 20%)",
secondary: "hsl(22, 96%, 60%)", secondary: "hsl(22, 100%, 50%)",
muted: "hsl(0 0% 30%)", muted: "hsl(0 0% 30%)",
}, },
spacing: { spacing: {
@ -74,11 +74,11 @@ module.exports = {
"@apply font-bold text-primary leading-none": {}, "@apply font-bold text-primary leading-none": {},
}, },
h3: { 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": {}, "@apply font-bold text-primary leading-none": {},
}, },
p: { p: {
"@apply text-primary leading-none": {}, "@apply text-primary": {},
}, },
}); });
addComponents({ 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": "@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":
{},
},
}); });
}), }),
], ],