mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 01:10:02 +02:00
This commit is contained in:
mr. m
GitHub
parent
054b55cc4e
commit
5286397e79
8 changed files with 443 additions and 323 deletions
|
|
@ -4,7 +4,6 @@
|
|||
"files": ["**/*.{ts,js,astro,html,css,json,yml,yaml,md}"],
|
||||
"words": [
|
||||
"adam",
|
||||
"animejs",
|
||||
"AMOLED",
|
||||
"Astronav",
|
||||
"Briel",
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@
|
|||
"@fortawesome/free-solid-svg-icons": "6.7.1",
|
||||
"@types/react": "^19.1.6",
|
||||
"@types/react-dom": "^19.1.5",
|
||||
"animejs": "^4.0.2",
|
||||
"astro": "5.7.10",
|
||||
"astro-navbar": "2.3.7",
|
||||
"autoprefixer": "10.4.14",
|
||||
|
|
@ -46,6 +45,7 @@
|
|||
"free-astro-components": "1.2.0",
|
||||
"jiti": "^2.4.2",
|
||||
"lefthook": "^1.11.13",
|
||||
"motion": "^12.15.0",
|
||||
"postcss": "8.5.1",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
|
|
@ -71,7 +71,6 @@
|
|||
"@playwright/test": "1.52.0",
|
||||
"@testing-library/jest-dom": "6.6.3",
|
||||
"@testing-library/user-event": "14.6.1",
|
||||
"@types/animejs": "^3.1.13",
|
||||
"@types/eslint-plugin-jsx-a11y": "6.10.0",
|
||||
"@types/jsdom": "21.1.7",
|
||||
"@types/node": "22.15.18",
|
||||
|
|
|
|||
84
pnpm-lock.yaml
generated
84
pnpm-lock.yaml
generated
|
|
@ -44,9 +44,6 @@ importers:
|
|||
'@types/react-dom':
|
||||
specifier: ^19.1.5
|
||||
version: 19.1.5(@types/react@19.1.6)
|
||||
animejs:
|
||||
specifier: ^4.0.2
|
||||
version: 4.0.2
|
||||
astro:
|
||||
specifier: 5.7.10
|
||||
version: 5.7.10(@types/node@22.15.18)(jiti@2.4.2)(rollup@4.41.1)(typescript@5.6.3)(yaml@2.8.0)
|
||||
|
|
@ -71,6 +68,9 @@ importers:
|
|||
lefthook:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
motion:
|
||||
specifier: ^12.15.0
|
||||
version: 12.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
postcss:
|
||||
specifier: 8.5.1
|
||||
version: 8.5.1
|
||||
|
|
@ -141,9 +141,6 @@ importers:
|
|||
'@testing-library/user-event':
|
||||
specifier: 14.6.1
|
||||
version: 14.6.1(@testing-library/dom@10.4.0)
|
||||
'@types/animejs':
|
||||
specifier: ^3.1.13
|
||||
version: 3.1.13
|
||||
'@types/eslint-plugin-jsx-a11y':
|
||||
specifier: 6.10.0
|
||||
version: 6.10.0
|
||||
|
|
@ -373,8 +370,8 @@ packages:
|
|||
peerDependencies:
|
||||
'@babel/core': ^7.0.0-0
|
||||
|
||||
'@babel/runtime@7.27.6':
|
||||
resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
|
||||
'@babel/runtime@7.27.4':
|
||||
resolution: {integrity: sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
||||
'@babel/template@7.27.2':
|
||||
|
|
@ -1508,9 +1505,6 @@ packages:
|
|||
'@tybys/wasm-util@0.9.0':
|
||||
resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
|
||||
|
||||
'@types/animejs@3.1.13':
|
||||
resolution: {integrity: sha512-yWg9l1z7CAv/TKpty4/vupEh24jDGUZXv4r26StRkpUPQm04ztJaftgpto8vwdFs8SiTq6XfaPKCSI+wjzNMvQ==}
|
||||
|
||||
'@types/aria-query@5.0.4':
|
||||
resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
|
||||
|
||||
|
|
@ -1832,9 +1826,6 @@ packages:
|
|||
ajv@8.17.1:
|
||||
resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
|
||||
|
||||
animejs@4.0.2:
|
||||
resolution: {integrity: sha512-f0L/kSya2RF23iMSF/VO01pMmLwlAFoiQeNAvBXhEyLzIPd2/QTBRatwGUqkVCC6seaAJYzAkGir55N4SL+h3A==}
|
||||
|
||||
ansi-align@3.0.1:
|
||||
resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
|
||||
|
||||
|
|
@ -2756,6 +2747,20 @@ packages:
|
|||
fraction.js@4.3.7:
|
||||
resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
|
||||
|
||||
framer-motion@12.15.0:
|
||||
resolution: {integrity: sha512-XKg/LnKExdLGugZrDILV7jZjI599785lDIJZLxMiiIFidCsy0a4R2ZEf+Izm67zyOuJgQYTHOmodi7igQsw3vg==}
|
||||
peerDependencies:
|
||||
'@emotion/is-prop-valid': '*'
|
||||
react: ^18.0.0 || ^19.0.0
|
||||
react-dom: ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@emotion/is-prop-valid':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
|
||||
free-astro-components@1.2.0:
|
||||
resolution: {integrity: sha512-bsT9dWsNlRGDNjqcoIlz6w8NcSCgOpx6oxiwZgYwq9RVbi3JqUImPc6c4Kico2wRJSIXc7HHyr71QgmgXv7nfg==}
|
||||
|
||||
|
|
@ -3570,6 +3575,26 @@ packages:
|
|||
resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
|
||||
engines: {node: '>=16 || 14 >=14.17'}
|
||||
|
||||
motion-dom@12.15.0:
|
||||
resolution: {integrity: sha512-D2ldJgor+2vdcrDtKJw48k3OddXiZN1dDLLWrS8kiHzQdYVruh0IoTwbJBslrnTXIPgFED7PBN2Zbwl7rNqnhA==}
|
||||
|
||||
motion-utils@12.12.1:
|
||||
resolution: {integrity: sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w==}
|
||||
|
||||
motion@12.15.0:
|
||||
resolution: {integrity: sha512-HLouXyIb1uQFiZgJTYGrtEzbatPc6vK+HP+Qt6afLQjaudiGiLLVsoy71CwzD/Stlh06FUd5OpyiXqn6XvqjqQ==}
|
||||
peerDependencies:
|
||||
'@emotion/is-prop-valid': '*'
|
||||
react: ^18.0.0 || ^19.0.0
|
||||
react-dom: ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@emotion/is-prop-valid':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
|
||||
mrmime@2.0.1:
|
||||
resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -5331,7 +5356,7 @@ snapshots:
|
|||
'@babel/core': 7.27.4
|
||||
'@babel/helper-plugin-utils': 7.27.1
|
||||
|
||||
'@babel/runtime@7.27.6': {}
|
||||
'@babel/runtime@7.27.4': {}
|
||||
|
||||
'@babel/template@7.27.2':
|
||||
dependencies:
|
||||
|
|
@ -6264,7 +6289,7 @@ snapshots:
|
|||
'@testing-library/dom@10.4.0':
|
||||
dependencies:
|
||||
'@babel/code-frame': 7.27.1
|
||||
'@babel/runtime': 7.27.6
|
||||
'@babel/runtime': 7.27.4
|
||||
'@types/aria-query': 5.0.4
|
||||
aria-query: 5.3.0
|
||||
chalk: 4.1.2
|
||||
|
|
@ -6291,8 +6316,6 @@ snapshots:
|
|||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@types/animejs@3.1.13': {}
|
||||
|
||||
'@types/aria-query@5.0.4': {}
|
||||
|
||||
'@types/babel__core@7.20.5':
|
||||
|
|
@ -6681,8 +6704,6 @@ snapshots:
|
|||
json-schema-traverse: 1.0.0
|
||||
require-from-string: 2.0.2
|
||||
|
||||
animejs@4.0.2: {}
|
||||
|
||||
ansi-align@3.0.1:
|
||||
dependencies:
|
||||
string-width: 4.2.3
|
||||
|
|
@ -7929,6 +7950,15 @@ snapshots:
|
|||
|
||||
fraction.js@4.3.7: {}
|
||||
|
||||
framer-motion@12.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
motion-dom: 12.15.0
|
||||
motion-utils: 12.12.1
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
|
||||
free-astro-components@1.2.0(@types/node@22.15.18)(jiti@2.4.2)(prettier-plugin-astro@0.14.1)(prettier@3.5.3)(rollup@4.41.1)(yaml@2.8.0):
|
||||
dependencies:
|
||||
'@astrojs/check': 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.5.3)(typescript@5.6.3)
|
||||
|
|
@ -9008,6 +9038,20 @@ snapshots:
|
|||
|
||||
minipass@7.1.2: {}
|
||||
|
||||
motion-dom@12.15.0:
|
||||
dependencies:
|
||||
motion-utils: 12.12.1
|
||||
|
||||
motion-utils@12.12.1: {}
|
||||
|
||||
motion@12.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
framer-motion: 12.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
|
||||
mrmime@2.0.1: {}
|
||||
|
||||
ms@2.1.3: {}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
---
|
||||
import Image from 'astro/components/Image.astro'
|
||||
import { motion } from 'motion/react'
|
||||
import { getTitleAnimation } from '~/animations'
|
||||
import ComImage from '~/assets/ComImage.png'
|
||||
import Button from '~/components/Button.astro'
|
||||
import Description from '~/components/Description.astro'
|
||||
import CheckIcon from '~/icons/CheckIcon.astro'
|
||||
import GitHubIcon from '~/icons/GitHubIcon.astro'
|
||||
import { getLocale, getUI } from '~/utils/i18n'
|
||||
|
|
@ -16,85 +19,50 @@ const {
|
|||
---
|
||||
|
||||
<section
|
||||
id="community"
|
||||
id="Community"
|
||||
class="relative flex w-full flex-col items-center gap-6 py-12 text-start md:text-center lg:py-36"
|
||||
>
|
||||
<h2 class="mb-2 text-4xl font-bold sm:text-6xl">
|
||||
<Description class="mb-2 text-4xl font-bold sm:text-6xl">
|
||||
{
|
||||
community.title.map(title =>
|
||||
community.title.map((title, index) =>
|
||||
title !== '\n' ? (
|
||||
<span style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
|
||||
<motion.span client:load {...getTitleAnimation(0.2 + index * 0.2)}>
|
||||
{title}
|
||||
</span>
|
||||
</motion.span>
|
||||
) : (
|
||||
<br class="hidden md:block" />
|
||||
)
|
||||
)
|
||||
}
|
||||
</h2>
|
||||
<p
|
||||
class="text-base lg:w-1/2 lg:px-0"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
<span class="opacity-80">{community.description}</span>
|
||||
</p>
|
||||
</Description>
|
||||
<motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2 lg:px-0">
|
||||
{community.description}
|
||||
</motion.p>
|
||||
<div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center">
|
||||
<div
|
||||
class="community__button"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
<motion.span client:load {...getTitleAnimation(0.8)}>
|
||||
<Button class:list={['px-4']} href="https://github.com/zen-browser">
|
||||
<GitHubIcon class="size-4" />
|
||||
<span>{community.lists.freeAndOpenSource.title}</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
class="community__button flex items-center gap-4"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
</motion.span>
|
||||
<motion.div client:load {...getTitleAnimation(1)} className="flex items-center gap-4">
|
||||
<CheckIcon class="size-4" />
|
||||
<span>{community.lists.simpleYetPowerful.title}</span>
|
||||
</div>
|
||||
<div
|
||||
class="community__button flex items-center gap-4"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
</motion.div>
|
||||
<motion.div client:load {...getTitleAnimation(1.2)} className="flex items-center gap-4">
|
||||
<CheckIcon class="size-4" />
|
||||
<span>{community.lists.privateAndAlwaysUpToDate.title}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<span class="flex max-w-full lg:max-w-none lg:flex-none">
|
||||
<motion.span
|
||||
className="flex max-w-full lg:max-w-none lg:flex-none"
|
||||
client:load
|
||||
{...getTitleAnimation(1.4)}
|
||||
>
|
||||
<Image
|
||||
src={ComImage}
|
||||
alt={community.images.community.alt}
|
||||
class="rounded-3xl shadow-md lg:mx-auto dark:opacity-80"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
/>
|
||||
</span>
|
||||
</motion.span>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { animate, onScroll, stagger } from 'animejs'
|
||||
|
||||
function initAnimations() {
|
||||
const debug = false
|
||||
|
||||
const elements = document.querySelectorAll(
|
||||
'#community h2 span, #community p, #community .community__button, #community img'
|
||||
)
|
||||
|
||||
animate(elements, {
|
||||
opacity: { from: 0.001, to: 1 },
|
||||
translateY: { from: 20, to: 0 },
|
||||
filter: { from: 'blur(4px)', to: 'blur(0px)' },
|
||||
duration: 300,
|
||||
delay: stagger(150),
|
||||
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
|
||||
autoplay: onScroll({
|
||||
target: '#community',
|
||||
debug,
|
||||
}),
|
||||
})
|
||||
}
|
||||
initAnimations()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
---
|
||||
import { motion } from 'motion/react'
|
||||
import { getTitleAnimation } from '~/animations'
|
||||
import { getLocale, getUI } from '~/utils/i18n'
|
||||
import Description from './Description.astro'
|
||||
|
||||
import Video from './Video.astro'
|
||||
|
||||
const locale = getLocale(Astro)
|
||||
|
|
@ -16,137 +20,290 @@ interface Props {
|
|||
|
||||
const { titles } = Astro.props
|
||||
|
||||
const featureList = [
|
||||
{
|
||||
key: 'workspaces',
|
||||
title: features.featureTabs.workspaces.title,
|
||||
description: features.featureTabs.workspaces.description,
|
||||
video: 'workspaces',
|
||||
},
|
||||
{
|
||||
key: 'compact-mode',
|
||||
title: features.featureTabs.compactMode.title,
|
||||
description: features.featureTabs.compactMode.description,
|
||||
video: 'compact-mode',
|
||||
},
|
||||
{
|
||||
key: 'glance',
|
||||
title: features.featureTabs.glance.title,
|
||||
description: features.featureTabs.glance.description,
|
||||
video: 'glance',
|
||||
},
|
||||
{
|
||||
key: 'split-view',
|
||||
title: features.featureTabs.splitView.title,
|
||||
description: features.featureTabs.splitView.description,
|
||||
video: 'split-views',
|
||||
},
|
||||
]
|
||||
const descriptions = Object.values(features.featureTabs).map(tab => tab.description)
|
||||
---
|
||||
|
||||
<section
|
||||
id="features"
|
||||
class="relative flex w-full flex-col items-center gap-8 py-8 text-center sm:gap-12 sm:py-12 xl:gap-24 xl:py-36"
|
||||
>
|
||||
<!-- Section Header -->
|
||||
<div class="flex w-full flex-col items-center gap-4 sm:gap-6">
|
||||
<h2 class="text-3xl sm:text-4xl md:text-6xl">
|
||||
{
|
||||
(titles || features.titles).map(title => {
|
||||
switch (title) {
|
||||
case '\n':
|
||||
return <br class="hidden md:block" />
|
||||
default:
|
||||
return (
|
||||
<b
|
||||
class="font-bold"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
{title}
|
||||
</b>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
</h2>
|
||||
<p
|
||||
class="max-w-4xl text-base sm:text-lg"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
<span class="opacity-80">{features.description}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Features Layout -->
|
||||
<div id="showcase" class="flex w-full flex-col gap-12 sm:gap-16 xl:gap-36">
|
||||
<section id="Features" class="relative flex w-full flex-col py-12 text-start lg:py-36">
|
||||
<Description class="mb-2 text-4xl font-bold sm:text-6xl">
|
||||
{
|
||||
featureList.map((feature, index) => (
|
||||
<div class="flex w-full flex-col items-center gap-6 xl:gap-12">
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<h3 class="text-3xl font-bold opacity-0 blur-sm sm:text-4xl xl:text-5xl">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p
|
||||
class="max-w-3xl text-center text-base leading-relaxed sm:text-lg"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
<span class="opacity-80">{feature.description}</span>
|
||||
</p>
|
||||
</div>
|
||||
(titles || features.titles).map((title, index) =>
|
||||
title !== '\n' ? (
|
||||
<motion.span client:load {...getTitleAnimation(0.2 + index * 0.2)}>
|
||||
{title}
|
||||
</motion.span>
|
||||
) : (
|
||||
<br class="hidden md:block" />
|
||||
)
|
||||
)
|
||||
}
|
||||
</Description>
|
||||
<motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2">
|
||||
{features.description}
|
||||
</motion.p>
|
||||
<div class="mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2">
|
||||
<div class="flex w-full flex-col lg:w-1/3">
|
||||
<!-- Mobile tabs -->
|
||||
<div class="flex gap-2 overflow-x-auto overflow-y-clip lg:hidden">
|
||||
<motion.button
|
||||
client:load
|
||||
{...getTitleAnimation()}
|
||||
className="feature-tab whitespace-nowrap"
|
||||
data-active="true"
|
||||
>
|
||||
{features.featureTabs.workspaces.title}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
client:load
|
||||
{...getTitleAnimation(0.2)}
|
||||
className="feature-tab whitespace-nowrap"
|
||||
>
|
||||
{features.featureTabs.compactMode.title}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
client:load
|
||||
{...getTitleAnimation(0.4)}
|
||||
className="feature-tab whitespace-nowrap"
|
||||
>
|
||||
{features.featureTabs.glance.title}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
client:load
|
||||
{...getTitleAnimation(0.6)}
|
||||
className="feature-tab whitespace-nowrap"
|
||||
>
|
||||
{features.featureTabs.splitView.title}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<!-- Desktop features list -->
|
||||
<div id="features-list" class="hidden lg:flex lg:flex-col lg:gap-3">
|
||||
<motion.div client:load {...getTitleAnimation(0.8)} className="feature" data-active="true">
|
||||
<Description class="text-2xl font-bold">
|
||||
{features.featureTabs.workspaces.title}
|
||||
</Description>
|
||||
<Description>
|
||||
{features.featureTabs.workspaces.description}
|
||||
</Description>
|
||||
</motion.div>
|
||||
<motion.div client:load {...getTitleAnimation(1)} className="feature">
|
||||
<Description class="text-2xl font-bold">
|
||||
{features.featureTabs.compactMode.title}
|
||||
</Description>
|
||||
<Description>
|
||||
{features.featureTabs.compactMode.description}
|
||||
</Description>
|
||||
</motion.div>
|
||||
<motion.div client:load {...getTitleAnimation(1.2)} className="feature">
|
||||
<Description class="text-2xl font-bold">
|
||||
{features.featureTabs.glance.title}
|
||||
</Description>
|
||||
<Description>
|
||||
{features.featureTabs.glance.description}
|
||||
</Description>
|
||||
</motion.div>
|
||||
<motion.div client:load {...getTitleAnimation(1.4)} className="feature">
|
||||
<Description class="text-2xl font-bold">
|
||||
{features.featureTabs.splitView.title}
|
||||
</Description>
|
||||
<Description>
|
||||
{features.featureTabs.splitView.description}
|
||||
</Description>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile description -->
|
||||
<div class="feature-description mt-4 lg:hidden" data-descriptions={descriptions.join('|||')}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky top-6 h-fit w-full lg:w-3/5">
|
||||
<div class="relative w-full">
|
||||
<div class="video-stack relative h-full w-full">
|
||||
<Video
|
||||
class="w-full rounded-xl object-cover shadow-lg"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
name={feature.video}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="feature-video"
|
||||
name="workspaces"
|
||||
/>
|
||||
<Video
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="feature-video"
|
||||
name="compact-mode"
|
||||
/>
|
||||
<Video
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="feature-video"
|
||||
name="glance"
|
||||
/>
|
||||
<Video
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="feature-video"
|
||||
name="split-views"
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { animate, onScroll, stagger } from 'animejs'
|
||||
const features = document.querySelectorAll('.feature, .feature-tab') as NodeListOf<HTMLElement>
|
||||
|
||||
function initAnimations() {
|
||||
const debug = false
|
||||
// Set initial description
|
||||
const descriptionEl = document.querySelector('.feature-description') as HTMLDivElement
|
||||
const descriptions = descriptionEl?.dataset.descriptions?.split('|||')
|
||||
if (descriptionEl && descriptions) {
|
||||
descriptionEl.textContent = descriptions[0]
|
||||
}
|
||||
|
||||
const elements = document.querySelectorAll('#features h2 b, #features > div > p')
|
||||
const showcase = document.getElementById('showcase') as HTMLElement
|
||||
function changeToFeature({ target }: MouseEvent | { target: HTMLElement }) {
|
||||
let targetEl: HTMLElement | null = target as HTMLElement
|
||||
|
||||
animate(elements, {
|
||||
opacity: { from: 0.001, to: 1 },
|
||||
translateY: { from: 20, to: 0 },
|
||||
filter: { from: 'blur(4px)', to: 'blur(0px)' },
|
||||
duration: 300,
|
||||
delay: stagger(150),
|
||||
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
|
||||
autoplay: onScroll({
|
||||
target: '#features',
|
||||
debug,
|
||||
}),
|
||||
})
|
||||
if (target instanceof HTMLElement) {
|
||||
targetEl = target.closest('.feature, .feature-tab')
|
||||
}
|
||||
|
||||
for (const element of showcase.children) {
|
||||
const target = element.querySelectorAll('p, h3, video')
|
||||
animate(target, {
|
||||
opacity: { from: 0.001, to: 1 },
|
||||
translateY: { from: 20, to: 0 },
|
||||
filter: { from: 'blur(4px)', to: 'blur(0px)' },
|
||||
duration: 300,
|
||||
delay: stagger(150),
|
||||
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
|
||||
autoplay: onScroll({
|
||||
enter: { container: 'top+=500' },
|
||||
target: element,
|
||||
debug,
|
||||
}),
|
||||
})
|
||||
if (!targetEl) {
|
||||
return
|
||||
}
|
||||
|
||||
const index = Array.from(features).indexOf(targetEl) % 4
|
||||
|
||||
if (index === -1) {
|
||||
return
|
||||
}
|
||||
|
||||
// Update both mobile and desktop elements
|
||||
for (let i = 0; i < features.length; i += 1) {
|
||||
const f = features[i]
|
||||
|
||||
if (i % 4 === index) {
|
||||
f.setAttribute('data-active', 'true')
|
||||
} else {
|
||||
f.removeAttribute('data-active')
|
||||
}
|
||||
}
|
||||
|
||||
// Update mobile description
|
||||
const descriptionEl = document.querySelector('.feature-description')
|
||||
|
||||
if (descriptionEl && descriptions) {
|
||||
descriptionEl.textContent = descriptions[index]
|
||||
}
|
||||
|
||||
const videos = document.querySelectorAll<HTMLVideoElement>('.feature-video')
|
||||
|
||||
for (let i = 0; i < videos.length; i += 1) {
|
||||
const vid = videos[i]
|
||||
const yOffset = (i - index) * 20
|
||||
const zOffset = i === index ? 0 : -100 - Math.abs(i - index) * 50
|
||||
const scale = i === index ? 1 : 0.95
|
||||
const rotation = (i - index) * 3
|
||||
|
||||
if (i === index) {
|
||||
vid.setAttribute('data-active', 'true')
|
||||
vid.style.opacity = '1'
|
||||
vid.style.transform = `translate3d(-50%, 0, 0) scale(${scale})`
|
||||
vid.style.zIndex = '10'
|
||||
vid.currentTime = 0
|
||||
vid.play()
|
||||
} else {
|
||||
vid.removeAttribute('data-active')
|
||||
vid.style.transform = `translate3d(-50%, ${yOffset}px, ${zOffset}px)
|
||||
rotate3d(1, 0, 0, ${rotation}deg)
|
||||
scale(${scale})`
|
||||
vid.style.zIndex = String(1 - Math.abs(i - index))
|
||||
vid.pause()
|
||||
}
|
||||
}
|
||||
}
|
||||
initAnimations()
|
||||
|
||||
for (const feature of features) {
|
||||
feature.addEventListener('click', changeToFeature)
|
||||
}
|
||||
|
||||
changeToFeature({ target: features[0] })
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.feature {
|
||||
@apply w-full cursor-pointer select-none rounded-lg p-4 opacity-0 hover:bg-subtle;
|
||||
transition: background 0.2s ease-in-out;
|
||||
|
||||
&[data-active='true'] {
|
||||
@apply bg-subtle;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-tab {
|
||||
@apply rounded-lg px-4 py-2 text-lg font-medium opacity-0 hover:bg-subtle;
|
||||
transition: background 0.2s ease-in-out;
|
||||
|
||||
&[data-active='true'] {
|
||||
@apply bg-subtle;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
@apply px-4 text-sm;
|
||||
}
|
||||
|
||||
.video-stack {
|
||||
@apply aspect-video;
|
||||
perspective: 2000px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.feature-video {
|
||||
@apply left-1/2 hidden transform rounded-3xl shadow-md lg:absolute lg:mx-auto lg:block lg:w-full dark:opacity-80;
|
||||
max-width: 800px;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform-origin: top center;
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity;
|
||||
transform: translate3d(-50%, 0, -100px) scale(0.95);
|
||||
}
|
||||
|
||||
/* Don't animate translation on small screens */
|
||||
@media (max-width: 1024px) {
|
||||
.feature-video {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transform: none !important;
|
||||
display: none;
|
||||
object-fit: cover;
|
||||
|
||||
&[data-active='true'] {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.video-stack {
|
||||
@apply overflow-hidden rounded-xl;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
---
|
||||
import { motion } from 'motion/react'
|
||||
import { getTitleAnimation } from '~/animations'
|
||||
import Button from '~/components/Button.astro'
|
||||
import Description from '~/components/Description.astro'
|
||||
import Title from '~/components/Title.astro'
|
||||
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
|
||||
import { getLocale, getPath, getUI } from '~/utils/i18n'
|
||||
import SocialMediaStrip from './SocialMediaStrip.astro'
|
||||
import Video from './Video.astro'
|
||||
|
||||
let titleAnimationCounter = 0
|
||||
function getNewAnimationDelay() {
|
||||
titleAnimationCounter++
|
||||
return titleAnimationCounter * 0.15
|
||||
}
|
||||
|
||||
function getHeroTitleAnimation() {
|
||||
return getTitleAnimation(getNewAnimationDelay())
|
||||
}
|
||||
|
||||
const locale = getLocale(Astro)
|
||||
|
||||
const getLocalePath = getPath(locale)
|
||||
|
|
@ -19,54 +32,58 @@ const {
|
|||
|
||||
<header
|
||||
id="header"
|
||||
class="flex w-full flex-col items-center gap-6 py-16 text-center lg:gap-12 lg:py-32"
|
||||
class="flex w-full flex-col items-center gap-[20%] py-32 text-center lg:gap-[25%]"
|
||||
>
|
||||
<div class="flex h-full flex-col items-center justify-center gap-6 md:gap-8">
|
||||
<div class="flex flex-col items-center justify-center gap-4 md:gap-8">
|
||||
<div>
|
||||
<Title class="relative px-12 text-center text-5xl md:text-7xl lg:px-0 lg:text-9xl">
|
||||
{
|
||||
hero.title.map(title =>
|
||||
title.text !== '\n' ? (
|
||||
<b
|
||||
class:list={['font-normal', title.highlight && 'italic text-coral']}
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
{title.text}
|
||||
</b>
|
||||
) : (
|
||||
<br class="hidden md:block" />
|
||||
)
|
||||
)
|
||||
}
|
||||
</Title>
|
||||
<p
|
||||
class="px-12 text-center lg:px-0"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
{hero.description[0]}
|
||||
<br class="hidden sm:inline" />
|
||||
{hero.description[1]}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex w-2/3 flex-col items-center justify-center gap-3 sm:gap-6 md:w-fit md:flex-row"
|
||||
<div class="flex h-full flex-col items-center justify-center">
|
||||
<Title class="relative px-12 text-center font-normal md:text-7xl lg:px-0 lg:text-9xl">
|
||||
{
|
||||
hero.title.map(title =>
|
||||
title.text !== '\n' ? (
|
||||
<motion.span
|
||||
client:load
|
||||
{...getHeroTitleAnimation()}
|
||||
className={title.highlight ? 'italic text-coral' : ''}
|
||||
>
|
||||
{title.text}
|
||||
</motion.span>
|
||||
) : (
|
||||
<br class="hidden md:block" />
|
||||
)
|
||||
)
|
||||
}
|
||||
</Title>
|
||||
<motion.span client:load {...getHeroTitleAnimation()}>
|
||||
<Description class="px-12 text-center lg:px-0">
|
||||
{hero.description[0]}
|
||||
<br class="hidden sm:inline" />
|
||||
{hero.description[1]}</Description
|
||||
>
|
||||
<div style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
|
||||
<Button class="w-fit" href={getLocalePath('/download')} isPrimary>
|
||||
{hero.buttons.beta}
|
||||
<ArrowRightIcon class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
|
||||
<Button class="w-fit" href={getLocalePath('/donate')}>
|
||||
{hero.buttons.support}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.span>
|
||||
<div class="mt-6 flex w-2/3 flex-col gap-3 sm:gap-6 md:w-fit md:flex-row">
|
||||
<motion.span client:load {...getHeroTitleAnimation()}>
|
||||
<Button class="w-full" href={getLocalePath('/download')} isPrimary>
|
||||
{hero.buttons.beta}
|
||||
<ArrowRightIcon class="size-4" />
|
||||
</Button>
|
||||
</motion.span>
|
||||
<motion.span client:load {...getHeroTitleAnimation()}>
|
||||
<Button href={getLocalePath('/donate')}>{hero.buttons.support}</Button>
|
||||
</motion.span>
|
||||
</div>
|
||||
<SocialMediaStrip style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)" />
|
||||
<motion.span
|
||||
client:load
|
||||
{...getHeroTitleAnimation()}
|
||||
className="mx-auto translate-y-16 !transform"
|
||||
>
|
||||
<SocialMediaStrip />
|
||||
</motion.span>
|
||||
</div>
|
||||
</header>
|
||||
<motion.span
|
||||
className="flex max-w-full lg:max-w-none lg:flex-none"
|
||||
client:load
|
||||
{...getHeroTitleAnimation()}
|
||||
>
|
||||
<Video
|
||||
name="hero-video"
|
||||
autoplay
|
||||
|
|
@ -74,39 +91,6 @@ const {
|
|||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px); transform-origin: top;"
|
||||
class="mb-24 rounded-3xl shadow-md dark:opacity-80"
|
||||
/>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
import { animate, onScroll, stagger } from 'animejs'
|
||||
|
||||
function initAnimations() {
|
||||
const debug = false
|
||||
|
||||
const elements = document.querySelectorAll(
|
||||
'#header h1 b, #header p, #header div:has(a), #header video, #header ul'
|
||||
)
|
||||
|
||||
animate(elements, {
|
||||
// @ts-expect-error - element is HTMLElement
|
||||
opacity: element => {
|
||||
if (element.tagName === 'UL') {
|
||||
return { from: 0.001, to: 0.8 }
|
||||
}
|
||||
return { from: 0.001, to: 1 }
|
||||
},
|
||||
translateY: { from: 20, to: 0 },
|
||||
filter: { from: 'blur(4px)', to: 'blur(0px)' },
|
||||
duration: 300,
|
||||
delay: stagger(150),
|
||||
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
|
||||
autoplay: onScroll({
|
||||
target: '#header',
|
||||
debug,
|
||||
}),
|
||||
})
|
||||
}
|
||||
initAnimations()
|
||||
</script>
|
||||
</motion.span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
const { class: className, ...props } = Astro.props
|
||||
const { gap = 4 } = Astro.props
|
||||
|
||||
import { icon, library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
|
|
@ -9,7 +9,6 @@ import {
|
|||
faReddit,
|
||||
faXTwitter,
|
||||
} from '@fortawesome/free-brands-svg-icons'
|
||||
import { cn } from '~/utils/merge'
|
||||
|
||||
library.add(faMastodon, faBluesky, faGithub, faXTwitter, faReddit)
|
||||
const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
|
||||
|
|
@ -19,7 +18,7 @@ const XTwitter = icon({ prefix: 'fab', iconName: 'x-twitter' })
|
|||
const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
|
||||
---
|
||||
|
||||
<ul class={cn('flex items-center gap-4 opacity-80', className)} {...props}>
|
||||
<ul class={`flex items-center opacity-80 gap-${gap}`}>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/zen-browser"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
---
|
||||
import h3 from '~/components/Description.astro'
|
||||
import { motion } from 'motion/react'
|
||||
import { getTitleAnimation } from '~/animations'
|
||||
import Description from '~/components/Description.astro'
|
||||
import { getLocale, getUI } from '~/utils/i18n'
|
||||
|
||||
const locale = getLocale(Astro)
|
||||
|
|
@ -17,55 +19,23 @@ const {
|
|||
---
|
||||
|
||||
<section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
|
||||
<div class="flex flex-col items-center gap-6 text-center">
|
||||
<h3
|
||||
class="text-4xl font-bold sm:text-6xl"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
{sponsors.title}
|
||||
</h3>
|
||||
<p class="text-base" style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
|
||||
<span class="opacity-80" set:html={sponsors.description} />
|
||||
</p>
|
||||
<div class="sponsors__sponsor relative mt-8 flex items-center justify-center">
|
||||
<a
|
||||
href={sponsors.sponsors['tuta'].url}
|
||||
target="_blank"
|
||||
class="w-fit"
|
||||
style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
|
||||
>
|
||||
<Image
|
||||
src={tutaLogo}
|
||||
alt={sponsors.sponsors['tuta'].name}
|
||||
class="h-16 w-fit object-contain"
|
||||
/>
|
||||
</a>
|
||||
<div class="mx-auto flex flex-col text-center">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
<Description class="mb-2 text-4xl font-bold sm:text-6xl">{sponsors.title}</Description>
|
||||
</motion.span>
|
||||
<motion.span client:load {...getTitleAnimation(0.4)}>
|
||||
<Description set:html={sponsors.description} />
|
||||
</motion.span>
|
||||
<div class="relative mt-8 flex items-center justify-center">
|
||||
<motion.span client:load {...getTitleAnimation(0.6)}>
|
||||
<a href={sponsors.sponsors['tuta'].url} target="_blank" class="w-fit">
|
||||
<Image
|
||||
src={tutaLogo}
|
||||
alt={sponsors.sponsors['tuta'].name}
|
||||
class="h-16 w-fit object-contain"
|
||||
/>
|
||||
</a>
|
||||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { animate, onScroll, stagger } from 'animejs'
|
||||
|
||||
function initAnimations() {
|
||||
const debug = false
|
||||
|
||||
const elements = document.querySelectorAll(
|
||||
'#sponsors h3, #sponsors p, #sponsors .sponsors__sponsor a'
|
||||
)
|
||||
|
||||
animate(elements, {
|
||||
opacity: { from: 0.001, to: 1 },
|
||||
translateY: { from: 20, to: 0 },
|
||||
filter: { from: 'blur(4px)', to: 'blur(0px)' },
|
||||
duration: 300,
|
||||
delay: stagger(150),
|
||||
ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
|
||||
autoplay: onScroll({
|
||||
target: '#sponsors',
|
||||
debug,
|
||||
}),
|
||||
})
|
||||
}
|
||||
initAnimations()
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue