mirror of
https://github.com/zen-browser/astro-site-test.git
synced 2025-07-07 23:19:57 +02:00
Merge pull request #8 from taroj1205/feat/how-much
Added how much browser do you want section
This commit is contained in:
NOCanoa
GitHub
commit
3d19ff0186
31 changed files with 2360 additions and 1537 deletions
1
.astro/types.d.ts
vendored
Normal file
1
.astro/types.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -1 +1,3 @@
|
|||
node_modules
|
||||
node_modules
|
||||
.astro/settings.json
|
||||
dist
|
||||
16
package.json
16
package.json
|
|
@ -3,29 +3,35 @@
|
|||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"dev": "astro dev --port 3000",
|
||||
"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",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3142
pnpm-lock.yaml
generated
3142
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
BIN
public/Redrawn_v1_Barebones.png
Normal file
BIN
public/Redrawn_v1_Barebones.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
public/glance.webm
Normal file
BIN
public/glance.webm
Normal file
Binary file not shown.
1
public/placeholder.svg
Normal file
1
public/placeholder.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/Redrawn_v1_Barebones.png
Normal file
BIN
src/assets/Redrawn_v1_Barebones.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/collapsed.png
Normal file
BIN
src/assets/modes/collapsed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/compact.png
Normal file
BIN
src/assets/modes/compact.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/split.png
Normal file
BIN
src/assets/modes/split.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/modes/standard.png
Normal file
BIN
src/assets/modes/standard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
24
src/components/color-change.astro
Normal file
24
src/components/color-change.astro
Normal file
|
|
@ -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>
|
||||
8
src/components/download.astro
Normal file
8
src/components/download.astro
Normal 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
|
||||
>
|
||||
13
src/components/footer.astro
Normal file
13
src/components/footer.astro
Normal file
|
|
@ -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>
|
||||
29
src/components/glance.astro
Normal file
29
src/components/glance.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -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" />
|
||||
<a href="/download" class="btn-base py-2"><DownloadIcon />v1.0.1-a.17</a>
|
||||
<LanguageIcon class="dark:text-secondary-dark h-7 w-7 text-secondary" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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">
|
||||
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">
|
||||
<a href="/download" class="btn-base"> <DownloadIcon /> Download Zen</a>
|
||||
<p class="text-md text-muted/95">Available on Windows, Mac, and Linux</p>
|
||||
</div>
|
||||
<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="download">
|
||||
<Download><DownloadIcon /> Download Zen</Download>
|
||||
<p>Available on Windows, Mac, and Linux</p>
|
||||
</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>
|
||||
|
|
|
|||
271
src/components/how-much.astro
Normal file
271
src/components/how-much.astro
Normal file
|
|
@ -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>
|
||||
17
src/components/icons/chevron-left-icon.astro
Normal file
17
src/components/icons/chevron-left-icon.astro
Normal file
|
|
@ -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
|
||||
>
|
||||
17
src/components/icons/chevron-right-icon.astro
Normal file
17
src/components/icons/chevron-right-icon.astro
Normal file
|
|
@ -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
|
||||
>
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
57
src/components/icons/zen-icon.astro
Normal file
57
src/components/icons/zen-icon.astro
Normal file
|
|
@ -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
|
||||
>
|
||||
|
|
@ -1,24 +1,20 @@
|
|||
---
|
||||
import ZenIcon from "./icons/zen-icon.astro";
|
||||
---
|
||||
|
||||
<nav>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
<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 href="/">
|
||||
<ZenIcon class="h-10 w-10 fill-primary" />
|
||||
</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>
|
||||
|
|
|
|||
61
src/components/why-zen.astro
Normal file
61
src/components/why-zen.astro
Normal 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>
|
||||
1
src/env.d.ts
vendored
1
src/env.d.ts
vendored
|
|
@ -1 +1,2 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
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 is:global>
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: hsl(6, 96%, 70%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<p class="text-muted">Choose the platform you want to download Zen for:</p>
|
||||
<h3 class="text-4xl font-semibold text-secondary">Platform</h3>
|
||||
<p class="text-muted">
|
||||
Choose the platform you want to download Zen for:
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
---
|
||||
import Hero from "../components/hero.astro";
|
||||
import Layout from "../layouts/main.astro";
|
||||
import HowMuch from "@/components/how-much.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>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,11 @@ module.exports = {
|
|||
},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "hsl(22, 96%, 60%)",
|
||||
muted: "hsl(22, 96%, 70%)",
|
||||
// secondary: "hsl(258, 48%, 23%)",
|
||||
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: {
|
||||
glow: [
|
||||
"0 0px 5px hsla(22, 96%, 60%, 0.90)",
|
||||
"0 0px 20px hsla(22, 96%, 60%, 0.75)"
|
||||
]
|
||||
}
|
||||
fontSize: {
|
||||
"scale-sm": "clamp(1rem, 2vw, 1.5rem)",
|
||||
"scale-md": "clamp(1.5rem, 3vw, 2rem)",
|
||||
"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":
|
||||
{},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/base"
|
||||
"extends": "astro/tsconfigs/base",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
},
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue