mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
Worked on the new rebranding!
Co-authored-by: taroj1205 <taroj1205@users.noreply.github.com>
This commit is contained in:
parent
38712913e7
commit
f45c7b10e4
12 changed files with 1822 additions and 96 deletions
6
package-lock.json
generated
6
package-lock.json
generated
|
@ -12,6 +12,7 @@
|
||||||
"@astrojs/tailwind": "^5.1.2",
|
"@astrojs/tailwind": "^5.1.2",
|
||||||
"@fontsource/bricolage-grotesque": "^5.1.0",
|
"@fontsource/bricolage-grotesque": "^5.1.0",
|
||||||
"astro": "^4.16.13",
|
"astro": "^4.16.13",
|
||||||
|
"astro-navbar": "^2.3.7",
|
||||||
"autoprefixer": "10.4.14",
|
"autoprefixer": "10.4.14",
|
||||||
"lucide-astro": "^0.460.0",
|
"lucide-astro": "^0.460.0",
|
||||||
"motion": "^11.11.17",
|
"motion": "^11.11.17",
|
||||||
|
@ -2114,6 +2115,11 @@
|
||||||
"sharp": "^0.33.3"
|
"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": {
|
"node_modules/autoprefixer": {
|
||||||
"version": "10.4.14",
|
"version": "10.4.14",
|
||||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
|
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
"@astrojs/tailwind": "^5.1.2",
|
"@astrojs/tailwind": "^5.1.2",
|
||||||
"@fontsource/bricolage-grotesque": "^5.1.0",
|
"@fontsource/bricolage-grotesque": "^5.1.0",
|
||||||
"astro": "^4.16.13",
|
"astro": "^4.16.13",
|
||||||
|
"astro-navbar": "^2.3.7",
|
||||||
"autoprefixer": "10.4.14",
|
"autoprefixer": "10.4.14",
|
||||||
"lucide-astro": "^0.460.0",
|
"lucide-astro": "^0.460.0",
|
||||||
"motion": "^11.11.17",
|
"motion": "^11.11.17",
|
||||||
|
|
|
@ -2,14 +2,11 @@
|
||||||
const { class: className, isPrimary, isBordered } = Astro.props;
|
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 />
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
<style>
|
<style>
|
||||||
button {
|
button {
|
||||||
font-family: "Bricolage Grotesque", sans-serif !important;
|
font-size: .9rem;
|
||||||
font-optical-sizing: auto;
|
|
||||||
font-style: normal;
|
|
||||||
font-variation-settings: "wdth" 100;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,3 +1,18 @@
|
||||||
---
|
---
|
||||||
// Circles.astro
|
// 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>
|
|
@ -4,14 +4,4 @@ const { class: className } = Astro.props;
|
||||||
|
|
||||||
<p class:list={[className]}>
|
<p class:list={[className]}>
|
||||||
<slot />
|
<slot />
|
||||||
</p>
|
</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>
|
|
32
src/components/Hero.astro
Normal file
32
src/components/Hero.astro
Normal 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
51
src/components/NavBar.astro
Normal 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>
|
|
@ -2,7 +2,7 @@
|
||||||
const { class: className } = Astro.props
|
const { class: className } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<h1 class:list={[className]}>
|
<h1 class:list={["text-dark", className]}>
|
||||||
<slot />
|
<slot />
|
||||||
</h1>
|
</h1>
|
||||||
<style>
|
<style>
|
||||||
|
@ -13,10 +13,10 @@ const { class: className } = Astro.props
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 6rem;
|
font-size: 6rem;
|
||||||
line-height: 1.5;
|
line-height: 0.9;
|
||||||
margin-bottom: 0.4rem;
|
margin-bottom: 0.4rem;
|
||||||
font-family: 'Junicode', serif;
|
font-family: 'Junicode', serif;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
font-variation-settings: unset;
|
font-variation-settings: unset;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,8 @@ interface Props {
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title } = Astro.props;
|
const { title } = Astro.props;
|
||||||
|
import "@fontsource/bricolage-grotesque/400.css";
|
||||||
|
import NavBar from "../components/NavBar.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
@ -32,8 +34,9 @@ const { title } = Astro.props;
|
||||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
<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" />
|
<link href="https://fonts.bunny.net/css?family=bricolage-grotesque:200,300,400,500,600,700,800|instrument-serif:400,400i" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-paper">
|
<body class="bg-paper font-['bricolage-grotesque']">
|
||||||
<slot />
|
<slot />
|
||||||
|
<NavBar />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<style is:global>
|
<style is:global>
|
||||||
|
@ -41,5 +44,12 @@ const { title } = Astro.props;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
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>
|
</style>
|
||||||
|
|
|
@ -1,84 +1,12 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro'
|
import Layout from '../layouts/Layout.astro'
|
||||||
import Title from '../components/Title.astro'
|
import Hero from '../components/Hero.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'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Welcome to Zen">
|
<Layout title="Welcome to Zen">
|
||||||
<main>
|
<main>
|
||||||
<header
|
<Hero />
|
||||||
id="header"
|
<!-- <div class="h-[500px]" /> -->
|
||||||
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>
|
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
<style>
|
<style>
|
||||||
|
|
1693
src/release-notes.ts
Normal file
1693
src/release-notes.ts
Normal file
File diff suppressed because it is too large
Load diff
|
@ -3,11 +3,14 @@ export default {
|
||||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
screens: {
|
||||||
|
'-md': '@media (min-width: 768px)',
|
||||||
|
'-lg': '@media (min-width: 1024px)',
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
"paper": "#F2F0E3",
|
"paper": "#F2F0E3",
|
||||||
"coral": "#F76F53",
|
"coral": "#F76F53",
|
||||||
"dark": "#202020",
|
"dark": "#202020",
|
||||||
"button-primary": "#c95d47",
|
|
||||||
"zen-blue": "#6287f5",
|
"zen-blue": "#6287f5",
|
||||||
"zen-green": "#63f78b",
|
"zen-green": "#63f78b",
|
||||||
},
|
},
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue