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

Update dependencies, fix typos, and enhance layout with new components
Some checks failed
Upload to bunny / upload (1.22.3) (push) Has been cancelled

Browse source
This commit is contained in:
mr. M 2024-12-06 15:07:53 +01:00
parent ca27b193e2
commit a1be27be82
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
11 changed files with 293 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

28
package-lock.json generated
View file

@ -15,7 +15,7 @@
"astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14",
"lucide-astro": "^0.460.0",
"motion": "^11.11.17",
"motion": "^11.13.1",
"postcss": "8.4.21",
"prettier": "^3.3.3",
"prettier-plugin-astro": "^0.14.1",
@ -2946,10 +2946,12 @@
}
},
"node_modules/framer-motion": {
"version": "11.11.17",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
"integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
"version": "11.13.1",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.1.tgz",
"integrity": "sha512-F40tpGTHByhn9h3zdBQPcEro+pSLtzARcocbNqAyfBI+u9S+KZuHH/7O9+z+GEkoF3eqFxfvVw0eBDytohwqmQ==",
"dependencies": {
"motion-dom": "^11.13.0",
"motion-utils": "^11.13.0",
"tslib": "^2.4.0"
},
"peerDependencies": {
@ -4504,11 +4506,11 @@
}
},
"node_modules/motion": {
"version": "11.11.17",
"resolved": "https://registry.npmjs.org/motion/-/motion-11.11.17.tgz",
"integrity": "sha512-y6mXYElvJ5HHwPBUpYG/5wclKVGW4hJhqPkTjWccib5/WrcRM185adg3+4aSmG5iD10XKFt5uBOAiKwuzMHPPQ==",
"version": "11.13.1",
"resolved": "https://registry.npmjs.org/motion/-/motion-11.13.1.tgz",
"integrity": "sha512-64+QpZQv8WJJFn+tEEzX04il9s6ReA6lhKRZaxzD6SunGqoaq5g+AFVfcKWme8N83eytUOpGp7mpfJ9cyZlhAA==",
"dependencies": {
"framer-motion": "^11.11.17",
"framer-motion": "^11.13.1",
"tslib": "^2.4.0"
},
"peerDependencies": {
@ -4528,6 +4530,16 @@
}
}
},
"node_modules/motion-dom": {
"version": "11.13.0",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
"integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
},
"node_modules/motion-utils": {
"version": "11.13.0",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
"integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
},
"node_modules/mrmime": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",

2
package.json
View file

@ -17,7 +17,7 @@
"astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14",
"lucide-astro": "^0.460.0",
"motion": "^11.11.17",
"motion": "^11.13.1",
"postcss": "8.4.21",
"prettier": "^3.3.3",
"prettier-plugin-astro": "^0.14.1",

2
src/components/Circles.astro
View file

@ -4,7 +4,7 @@ const sizes = [216, 396, 576, 756]
const borderWidths = [20, 30, 40, 50]
const multiplier = 0.9;
---
<div id="circles" class="inset-0 overflow-hidden pointer-events-none -z-10 -translate-y-1/4">
<div id="circles" class="inset-0 overflow-hidden pointer-events-none -z-10">
<div class="mx-auto opacity-10 lg:opacity-100">
{[...Array(4)].map((_, i) => (
<div class="absolute rounded-full border-coral -translate-x-1/2 -translate-y-1/2"

40
src/components/Community.astro Normal file
View file

@ -0,0 +1,40 @@
---
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,
Check,
} from 'lucide-astro'
---
<section
id="Community"
class="flex min-h-screen w-full flex-col items-center text-center relative"
>
<div class="flex-1 w-full"></div>
<Title>Community Driven</Title>
<Description class="px-4 lg:px-0 lg:w-1/2">
We are a community-driven project. We listen to our users and build the
features they want. Zen focuses on privacy and customization, not on data collection.
</Description>
<div class="mt-6 gap-3 px-4 sm:px-0 w-full sm:gap-10 flex flex-wrap justify-center">
<a href="https://github.com/zen-browser">
<Button class:list={['px-4']}>
<Github class="size-4" />
<span>View on Github</span>
</Button>
</a>
<div class="flex items-center gap-4">
<Check class="size-4" />
<span>Fully Customizable</span>
</div>
<div class="flex items-center gap-4">
<Check class="size-4" />
<span>Privacy Focused</span>
</div>
</div>
</section>

127
src/components/Features.astro Normal file
View file

@ -0,0 +1,127 @@
---
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,
Check,
} from 'lucide-astro'
---
<section
id="features"
class="flex min-h-screen w-full px-4 lg:px-12 xl:px-24 py-36 flex-col relative"
>
<div class="flex flex-col lg:flex-row w-full items-start gap-12">
<div id="feature-list" class="lg:w-1/3 flex flex-col gap-4">
<Title>Features</Title>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Workspaces
</Description>
<p class="desc text-base font-normal mt-2">
With Zen, you can create multiple workspaces to keep your tabs organized.
</p>
</div>
</div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Compact Mode
</Description>
<p class="desc text-base font-normal mt-2">
Zen's compact mode allows you to see more of your content at once.
</p>
</div>
</div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Split Views
</Description>
<p class="desc text-base font-normal mt-2">
Split your browser into multiple views to see more content at once.
</p>
</div>
</div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Sidebar
</Description>
<p class="desc text-base font-normal mt-2">
Zen's sidebar allows you to quickly access your favourite websites.
</p>
</div>
</div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Zen Glance
</Description>
<p class="desc text-base font-normal mt-2">
Preview your tabs with Zen Glance to quickly find what you're looking for, without switching tabs.
</p>
</div>
</div>
</div>
<div class="relative lg:w-2/3 lg:pl-20 items-center m-auto">
<div class="bg-coral rounded-xl ml-auto" id="feature-list-image">
<img src="/browser.webp" alt="" class="object-fit">
<img src="/browser.webp" alt="" class="object-fit">
<img src="/browser.webp" alt="" class="object-fit">
<img src="/browser.webp" alt="" class="object-fit">
<img src="/browser.webp" alt="" class="object-fit">
</div>
</div>
</div>
</section>
<script>
function changeFeature(index: number) {
document.querySelectorAll('#feature-list .feature').forEach((feature: any, i) => {
if (i === index) {
feature.setAttribute('active', '');
} else {
feature.removeAttribute('active');
}
});
document.querySelectorAll('#feature-list-image img').forEach((img: any, i) => {
img.style.opacity = i === index ? 1 : 0;
img.classList.toggle('absolute', i !== index);
});
}
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('#feature-list .feature').forEach((feature: any, i) => {
feature.addEventListener('click', () => {
changeFeature(i);
});
});
changeFeature(0);
});
</script>
<style>
.feature {
user-select: none;
transition: background-color 0.1s ease-in-out;
}
.feature p {
transition: max-height 0.2s ease-in-out, margin-top 0.1s ease-in-out;
}
.feature:not([active]) .desc {
max-height: 0;
overflow: hidden;
pointer-events: none;
margin-top: 0;
}
.feature[active] {
@apply bg-coral/10;
}
</style>

73
src/components/Footer.astro Normal file
View file

@ -0,0 +1,73 @@
---
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, Github, Twitter } from 'lucide-astro'
---
<footer
id="footer"
class="flex flex-col w-full p-4 lg:p-24 gap-24 md:gap-[15%] bg-coral border-t border-dark"
>
<Title>Zen Browser</Title>
<div class="flex flex-col justify-between w-full lg:flex-row gap-6">
<Button isPrimary class="h-fit">
Download
<ArrowRight class="size-4" />
</Button>
<div class="gap-6 flex flex-col">
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
Follow Us
</Description>
<div class="opacity-80 flex gap-4">
<a href="https://github.com/zen-browser" target="_blank" class="font-bold">
<Github class="size-4" />
</a>
<a href="https://twitter.com/zen_browser" target="_blank" class="font-normal">
<Twitter class="size-4" />
</a>
</div>
</div>
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
About
</Description>
<div class="opacity-80 flex flex-col">
<a href="/about" class="font-normal">About Us</a>
<a href="/about" class="font-normal">About Us</a>
</div>
</div>
</div>
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
About
</Description>
<div class="opacity-80 flex flex-col">
<a href="/about" class="font-normal">About Us</a>
<a href="/about" class="font-normal">About Us</a>
</div>
</div>
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
About
</Description>
<div class="opacity-80 flex flex-col">
<a href="/about" class="font-normal">About Us</a>
<a href="/about" class="font-normal">About Us</a>
</div>
</div>
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
About
</Description>
<div class="opacity-80 flex flex-col">
<a href="/about" class="font-normal">About Us</a>
<a href="/about" class="font-normal">About Us</a>
</div>
</div>
</div>
</footer>

3
src/components/Hero.astro
View file

@ -12,9 +12,8 @@ import { ArrowRight } from 'lucide-astro'
id="header"
class="flex h-screen w-full flex-col items-center gap-24 text-center md:gap-[15%]"
>
<Circles />
<div class="flex flex-col items-center h-full justify-center">
<Title class='text-left px-12 lg:px-0 lg:text-center leading-[108px]'>Welcome to<br class="hidden md:block" /> a calmer internet</Title>
<Title class='text-left px-12 lg:px-0 lg:text-center leading-[108px] !text-9xl !font-normal'>Welcome to<br class="hidden md:block" /> a <span class="italic">calmer</span> internet</Title>
<Description class='text-left px-12 lg:px-0 lg:text-center'
>Beautifully designed, privacy-focused, and packed with features.<br
/>We care about your experience, not your data.</Description

7
src/components/Title.astro
View file

@ -6,18 +6,13 @@ const { class: className } = Astro.props
<slot />
</h1>
<style>
@font-face {
font-family: 'Junicode';
src: url('/fonts/JunicodeVF-Roman.woff2') format('woff2');
}
h1 {
font-size: 6rem;
line-height: 0.9;
margin-bottom: 0.4rem;
font-family: 'Junicode', serif;
font-weight: 600;
font-variation-settings: unset;
font-style: normal;
font-feature-settings: 'swsh' 1;
}
</style>

25
src/layouts/Layout.astro
View file

@ -6,6 +6,7 @@ interface Props {
const { title } = Astro.props;
import "@fontsource/bricolage-grotesque/400.css";
import NavBar from "../components/NavBar.astro";
import Footer from "../components/Footer.astro";
---
<!doctype html>
@ -36,20 +37,42 @@ import NavBar from "../components/NavBar.astro";
</head>
<body class="bg-paper font-['bricolage-grotesque']">
<slot />
<Footer />
<NavBar />
</body>
</html>
<style is:global>
@font-face {
font-family: 'Junicode';
src: url('/fonts/JunicodeVF-Roman.woff2') format('woff2');
}
@font-face {
font-family: 'Junicode-Italic';
src: url('/fonts/JunicodeVF-Italic.woff2') format('woff2');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
font-size: 18px;
html {
scroll-behavior: smooth;
}
*:not(h1) > * {
font-size: 18px;
font-family: "Bricolage Grotesque", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 500;
font-variation-settings: "wdth" 100;
}
h1 .italic {
font-family: 'Junicode-Italic', serif;
font-style: normal;
}
</style>

21
src/pages/index.astro
View file

@ -1,12 +1,15 @@
---
import Layout from '../layouts/Layout.astro'
import Hero from '../components/Hero.astro'
import Community from '../components/Community.astro'
import Features from '../components/Features.astro'
---
<Layout title="Welcome to Zen">
<main>
<Hero />
<!-- <div class="h-[500px]" /> -->
<Community />
<Features />
</main>
</Layout>
<style>
@ -24,20 +27,4 @@ import Hero from '../components/Hero.astro'
}
</style>
<script>
import { inView, animate } from 'motion'
inView('#browser-image-productivity', (entry) => {
animate(
'#browser-image-productivity',
{
opacity: [0, 1],
transform: ['translateX(20px)', 'translate(0,0)'],
},
{
delay: 0.9,
duration: 0.3,
ease: 'easeInOut',
}
)
})
</script>

2
src/release-notes.ts
View file

@ -1239,7 +1239,7 @@ export const releaseNotes: ReleaseNote[] = [
},
{
description:
"Fixed about page linking 'global comunity' to a Mozilla page",
"Fixed about page linking 'global Community' to a Mozilla page",
},
],
features: [