ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-07 17:05:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

Worked on the new rebranding!

Browse source 
Co-authored-by: taroj1205 <taroj1205@users.noreply.github.com>
This commit is contained in:
mr. M 2024-11-24 23:52:26 +01:00
parent 38712913e7
commit f45c7b10e4
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
12 changed files with 1822 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

6
package-lock.json generated
View file

@ -12,6 +12,7 @@
"@astrojs/tailwind": "^5.1.2",
"@fontsource/bricolage-grotesque": "^5.1.0",
"astro": "^4.16.13",
"astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14",
"lucide-astro": "^0.460.0",
"motion": "^11.11.17",
@ -2114,6 +2115,11 @@
"sharp": "^0.33.3"
}
},
"node_modules/astro-navbar": {
"version": "2.3.7",
"resolved": "https://registry.npmjs.org/astro-navbar/-/astro-navbar-2.3.7.tgz",
"integrity": "sha512-3rB27AkbTQVZCyrNc0C+8EK558eF9U/Ldmwnfl3w4lZ2zZCjUCiCqhoEAqkBEupiVsZux89/AkNUpBkufQQ5jA=="
},
"node_modules/autoprefixer": {
"version": "10.4.14",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",

1
package.json
View file

@ -14,6 +14,7 @@
"@astrojs/tailwind": "^5.1.2",
"@fontsource/bricolage-grotesque": "^5.1.0",
"astro": "^4.16.13",
"astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14",
"lucide-astro": "^0.460.0",
"motion": "^11.11.17",

7
src/components/Button.astro
View file

@ -2,14 +2,11 @@
const { class: className, isPrimary, isBordered } = Astro.props;
---
<button class:list={['px-4 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-button-primary text-paper hover:!transform hover:!scale-105' : !isBordered ? 'hover:bg-dark/10' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
<button class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
<slot />
</button>
<style>
button {
font-family: "Bricolage Grotesque", sans-serif !important;
font-optical-sizing: auto;
font-style: normal;
font-variation-settings: "wdth" 100;
font-size: .9rem;
}
</style>

15
src/components/Circles.astro
View file

@ -1,3 +1,18 @@
---
// Circles.astro
const sizes = [216, 396, 576, 756]
const borderWidths = [20, 30, 40, 50]
---
<div id="circles" class="absolute inset-0 overflow-hidden pointer-events-none -z-10">
<div class="absolute left-1/2 top-0 opacity-10 translate-y-[-90%] lg:opacity-100 -translate-x-1/2 lg:-translate-y-1/2">
{[...Array(4)].map((_, i) => (
<div class="absolute rounded-full border-coral -translate-x-1/2 -translate-y-1/2"
style={{
width: `${sizes[i]}px`,
height: `${sizes[i]}px`,
borderWidth: `${borderWidths[i]}px`,
}}
/>
))}
</div>
</div>

12
src/components/Description.astro
View file

@ -4,14 +4,4 @@ const { class: className } = Astro.props;
<p class:list={[className]}>
<slot />
</p>
<style>
h1 {
font-size: 1.2rem;
line-height: 1;
font-family: "Bricolage Grotesque", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-variation-settings: "wdth" 100;
}
</style>
</p>

32
src/components/Hero.astro Normal file
View file

@ -0,0 +1,32 @@
---
import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import Circles from '../components/Circles.astro'
import { Image } from 'astro:assets'
import myImage from '../assets/browser.png'
import { ArrowRight } from 'lucide-astro'
---
<header
id="header"
class="flex h-screen w-full flex-col items-center gap-24 pt-24 text-center md:gap-[15%] md:pt-[30%]"
>
<Circles />
<div class="flex flex-col items-center">
<Title class='text-center leading-[108px]'>Welcome to<br class="hidden md:block" /> a calmer internet</Title>
<Description class='text-center'
>Beautifully designed, privacy-focused, and packed with features.<br
/>We care about your experience, not your data.</Description
>
<div class="mt-6 gap-3 sm:gap-6 flex flex-col sm:flex-row">
<Button isPrimary>
Download
<ArrowRight class="size-4" />
</Button>
<Button>Start Exploring</Button>
</div>
</div>
<Image src={myImage} alt="Zen browser" class="mt-10" />
<!-- <img src="/browser.webp" id="header-browser-image" alt="Zen browser" /> -->
</header>

51
src/components/NavBar.astro Normal file
View file

@ -0,0 +1,51 @@
---
import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems, DropdownSubmenu } from "astro-navbar";
import { ArrowRight, ChevronDown } from 'lucide-astro'
---
<nav
id="nav-bar"
class="fixed flex justify-between w-full items-center pt-6 px-6 z-10 top-0 left-0"
>
<div class="font-bold text-lg">
zen browser
</div>
<Astronav>
<MenuItems class="rounded-full border-dark border-2 p-2 pl-4 backdrop-blur-xl bg-paper/30 hidden lg:flex">
<ul class="gap-6 lg:flex items-center">
<Dropdown class="group">
<button class="flex items-center">
<span>Getting Started</span>
<ChevronDown class="group-open:rotate-180 transform transition-transform duration-200" />
</button>
<DropdownItems>
<div class="absolute top-0">
wad
</div>
</DropdownItems>
</Dropdown>
<Dropdown class="group">
<button class="flex items-center">
<span>Useful Links</span>
<ChevronDown class="group-open:rotate-180 transform transition-transform duration-200" />
</button>
<DropdownItems>
<div class="absolute top-0">
wad
</div>
</DropdownItems>
</Dropdown>
<button class="flex items-center">
<span>Mods</span>
</button>
<Button>
Download
<ArrowRight class="size-4" />
</Button>
</MenuItems>
</Astronav>
</nav>

6
src/components/Title.astro
View file

@ -2,7 +2,7 @@
const { class: className } = Astro.props
---
<h1 class:list={[className]}>
<h1 class:list={["text-dark", className]}>
<slot />
</h1>
<style>
@ -13,10 +13,10 @@ const { class: className } = Astro.props
h1 {
font-size: 6rem;
line-height: 1.5;
line-height: 0.9;
margin-bottom: 0.4rem;
font-family: 'Junicode', serif;
font-weight: 500;
font-weight: 600;
font-variation-settings: unset;
font-style: normal;
}

12
src/layouts/Layout.astro
View file

@ -4,6 +4,8 @@ interface Props {
}
const { title } = Astro.props;
import "@fontsource/bricolage-grotesque/400.css";
import NavBar from "../components/NavBar.astro";
---
<!doctype html>
@ -32,8 +34,9 @@ const { title } = Astro.props;
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=bricolage-grotesque:200,300,400,500,600,700,800|instrument-serif:400,400i" rel="stylesheet" />
</head>
<body class="bg-paper">
<body class="bg-paper font-['bricolage-grotesque']">
<slot />
<NavBar />
</body>
</html>
<style is:global>
@ -41,5 +44,12 @@ const { title } = Astro.props;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 18px;
font-family: "Bricolage Grotesque", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 500;
font-variation-settings: "wdth" 100;
}
</style>

78
src/pages/index.astro
View file

@ -1,84 +1,12 @@
---
import Layout from '../layouts/Layout.astro'
import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import Circles from '../components/Circles.astro'
import { Image } from 'astro:assets'
import myImage from '../assets/browser.png'
import { Github, Lock, Check, HeartHandshake, Shield } from 'lucide-astro'
import Hero from '../components/Hero.astro'
---
<Layout title="Welcome to Zen">
<main>
<header
id="header"
class="flex h-screen w-full flex-col items-center gap-24 overflow-hidden pt-24 text-center md:gap-[15%] md:pt-[15%]"
>
<Circles />
<div class="flex flex-col items-center">
<Title class:list={['text-center']}>Welcome to a calmer internet</Title>
<Description class:list={['text-center']}
>Beautifully designed, privacy-focused, and packed with features.<br
/>We care about your experience, not your data.</Description
>
<div class="mt-6 gap-6 md:flex">
<Button isPrimary>Download</Button>
<Button>mods page</Button>
</div>
</div>
<Image
src={myImage}
id="header-browser-image"
alt="Zen browser"
loading="eager"
/>
<!-- <img src="/browser.webp" id="header-browser-image" alt="Zen browser" /> -->
</header>
<div
class="flex h-screen flex-col items-center justify-center overflow-hidden bg-dark text-paper lg:flex-row lg:gap-24 lg:p-24"
>
<div class:list={['m-24 lg:m-0 lg:ml-24 lg:w-1/3']}>
<Title>Designed to maximize your productivity</Title>
<Description
>Our browser is designed to be as minimal as possible, so you can
focus on what matters most.</Description
>
</div>
<div class="h-2/3 w-1/3 rounded-lg bg-paper shadow-sm"></div>
</div>
<div
class="flex h-screen flex-col items-center justify-center overflow-hidden lg:flex-row lg:gap-12"
>
<div class:list={['flex h-2/3 flex-col px-12 lg:w-2/4']}>
<Title>Customizable, down to the last pixel</Title>
<Description
>Zen is built to be as customizable as possible, so you can make it
your own.</Description
>
<Description class="mt-3"
>Either by using our built-in themes generator and customization
tools, using custom CSS, or using community-made mods, the only limit
is your imagination.</Description
>
<div
class="mt-10 mt-auto h-full w-full rounded-md bg-dark text-paper shadow-md"
>
VIDEO HERE
</div>
</div>
<div
class:list={[
'flex h-2/3 flex-col justify-end rounded-lg bg-zen-blue p-12 text-paper shadow-sm lg:w-1/3',
]}
>
<Title>Private, Open Source, and Secure</Title>
<Description
>Our browser is built onto the Firefox engine, so you can trust that
your data is safe with us.</Description
>
</div>
</div>
<Hero />
<!-- <div class="h-[500px]" /> -->
</main>
</Layout>
<style>

1693
src/release-notes.ts Normal file
View file

File diff suppressed because it is too large Load diff

5
tailwind.config.mjs
View file

@ -3,11 +3,14 @@ export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
screens: {
'-md': '@media (min-width: 768px)',
'-lg': '@media (min-width: 1024px)',
},
colors: {
"paper": "#F2F0E3",
"coral": "#F76F53",
"dark": "#202020",
"button-primary": "#c95d47",
"zen-blue": "#6287f5",
"zen-green": "#63f78b",
},