mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 01:10:02 +02:00
Update dependencies, fix typos, and enhance layout with new components
Some checks failed
Upload to bunny / upload (1.22.3) (push) Has been cancelled
Some checks failed
Upload to bunny / upload (1.22.3) (push) Has been cancelled
This commit is contained in:
mr. M
parent
ca27b193e2
commit
a1be27be82
11 changed files with 293 additions and 37 deletions
28
package-lock.json
generated
28
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
40
src/components/Community.astro
Normal 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
127
src/components/Features.astro
Normal 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
73
src/components/Footer.astro
Normal 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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,15 +37,32 @@ 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;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
*:not(h1) > * {
|
||||
font-size: 18px;
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
|
|
@ -52,4 +70,9 @@ import NavBar from "../components/NavBar.astro";
|
|||
font-weight: 500;
|
||||
font-variation-settings: "wdth" 100;
|
||||
}
|
||||
|
||||
h1 .italic {
|
||||
font-family: 'Junicode-Italic', serif;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue