diff --git a/package.json b/package.json index e7141711..42b49c44 100644 --- a/package.json +++ b/package.json @@ -12,18 +12,18 @@ }, "dependencies": { "@astrojs/check": "^0.9.4", - "@astrojs/cloudflare": "^12.2.0", - "@astrojs/react": "^4.1.4", + "@astrojs/cloudflare": "^12.2.1", + "@astrojs/react": "^4.2.0", "@astrojs/rss": "^4.0.11", "@astrojs/sitemap": "^3.2.1", - "@astrojs/tailwind": "^5.1.4", + "@astrojs/tailwind": "^6.0.0", "@fontsource/bricolage-grotesque": "^5.1.0", "@fortawesome/fontawesome-svg-core": "^6.7.1", "@fortawesome/free-brands-svg-icons": "^6.7.1", "@fortawesome/free-solid-svg-icons": "^6.7.1", "@types/react": "^19.0.1", "@types/react-dom": "^19.0.2", - "astro": "^5.1.6", + "astro": "^5.2.5", "astro-navbar": "^2.3.7", "autoprefixer": "10.4.14", "date-fns": "^4.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index feb5904b..f30e24fe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,10 +12,10 @@ importers: specifier: ^0.9.4 version: 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.4.2)(typescript@5.7.3) '@astrojs/cloudflare': - specifier: ^12.2.0 - version: 12.2.1(astro@5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0))(jiti@1.21.7)(yaml@2.7.0) + specifier: ^12.2.1 + version: 12.2.1(astro@5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0))(jiti@1.21.7)(yaml@2.7.0) '@astrojs/react': - specifier: ^4.1.4 + specifier: ^4.2.0 version: 4.2.0(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(jiti@1.21.7)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(yaml@2.7.0) '@astrojs/rss': specifier: ^4.0.11 @@ -24,8 +24,8 @@ importers: specifier: ^3.2.1 version: 3.2.1 '@astrojs/tailwind': - specifier: ^5.1.4 - version: 5.1.5(astro@5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0))(tailwindcss@3.4.17) + specifier: ^6.0.0 + version: 6.0.0(astro@5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0))(tailwindcss@3.4.17) '@fontsource/bricolage-grotesque': specifier: ^5.1.0 version: 5.1.1 @@ -45,8 +45,8 @@ importers: specifier: ^19.0.2 version: 19.0.3(@types/react@19.0.8) astro: - specifier: ^5.1.6 - version: 5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) + specifier: ^5.2.5 + version: 5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) astro-navbar: specifier: ^2.3.7 version: 2.3.9 @@ -61,7 +61,10 @@ importers: version: 1.2.0(jiti@1.21.7)(prettier-plugin-astro@0.14.1)(prettier@3.4.2)(rollup@4.34.0)(yaml@2.7.0) lucide-astro: specifier: ^0.460.0 - version: 0.460.0(astro@5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0)) + version: 0.460.0(astro@5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0)) + lucide-react: + specifier: ^0.474.0 + version: 0.474.0(react@19.0.0) motion: specifier: ^11.15.0 version: 11.18.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -1638,6 +1641,11 @@ packages: peerDependencies: astro: '>=2.7.1' + lucide-react@0.474.0: + resolution: {integrity: sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + magic-string@0.25.9: resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} @@ -2245,6 +2253,14 @@ packages: engines: {node: '>=10'} hasBin: true + semver@7.7.1: + resolution: + { + integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==, + } + engines: { node: '>=10' } + hasBin: true + sharp@0.33.5: resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} @@ -2830,12 +2846,12 @@ snapshots: - prettier - prettier-plugin-astro - '@astrojs/cloudflare@12.2.1(astro@5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0))(jiti@1.21.7)(yaml@2.7.0)': + '@astrojs/cloudflare@12.2.1(astro@5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0))(jiti@1.21.7)(yaml@2.7.0)': dependencies: '@astrojs/internal-helpers': 0.4.2 '@astrojs/underscore-redirects': 0.6.0 '@cloudflare/workers-types': 4.20250129.0 - astro: 5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) + astro: 5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) esbuild: 0.24.2 estree-walker: 3.0.3 magic-string: 0.30.17 @@ -2862,7 +2878,7 @@ snapshots: '@astrojs/internal-helpers@0.4.2': {} - '@astrojs/internal-helpers@0.5.0': {} + '@astrojs/internal-helpers@0.5.1': {} '@astrojs/language-server@2.15.4(prettier-plugin-astro@0.14.1)(prettier@3.4.2)(typescript@5.7.3)': dependencies: @@ -2953,9 +2969,9 @@ snapshots: stream-replace-string: 2.0.0 zod: 3.24.1 - '@astrojs/tailwind@5.1.5(astro@5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0))(tailwindcss@3.4.17)': + '@astrojs/tailwind@6.0.0(astro@5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0))(tailwindcss@3.4.17)': dependencies: - astro: 5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) + astro: 5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) autoprefixer: 10.4.20(postcss@8.5.1) postcss: 8.5.1 postcss-load-config: 4.0.2(postcss@8.5.1) @@ -3710,10 +3726,10 @@ snapshots: astro-navbar@2.3.9: {} - astro@5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0): + astro@5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0): dependencies: '@astrojs/compiler': 2.10.3 - '@astrojs/internal-helpers': 0.5.0 + '@astrojs/internal-helpers': 0.5.1 '@astrojs/markdown-remark': 6.1.0 '@astrojs/telemetry': 3.2.0 '@oslojs/encoding': 1.1.0 @@ -3751,10 +3767,10 @@ snapshots: neotraverse: 0.6.18 p-limit: 6.2.0 p-queue: 8.1.0 - preferred-pm: 4.1.0 + preferred-pm: 4.1.1 prompts: 2.4.2 rehype: 13.0.2 - semver: 7.7.0 + semver: 7.7.1 shiki: 1.29.2 tinyexec: 0.3.2 tsconfck: 3.1.4(typescript@5.7.3) @@ -3764,7 +3780,7 @@ snapshots: vfile: 6.0.3 vite: 6.0.11(jiti@1.21.7)(yaml@2.7.0) vitefu: 1.0.5(vite@6.0.11(jiti@1.21.7)(yaml@2.7.0)) - which-pm: 3.0.0 + which-pm: 3.0.1 xxhash-wasm: 1.1.0 yargs-parser: 21.1.1 yocto-spinner: 0.2.0 @@ -4146,7 +4162,7 @@ snapshots: free-astro-components@1.2.0(jiti@1.21.7)(prettier-plugin-astro@0.14.1)(prettier@3.4.2)(rollup@4.34.0)(yaml@2.7.0): dependencies: '@astrojs/check': 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.4.2)(typescript@5.7.3) - astro: 5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) + astro: 5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) typescript: 5.7.3 transitivePeerDependencies: - '@azure/app-configuration' @@ -4434,9 +4450,13 @@ snapshots: dependencies: yallist: 3.1.1 - lucide-astro@0.460.0(astro@5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0)): + lucide-astro@0.460.0(astro@5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0)): dependencies: - astro: 5.2.3(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) + astro: 5.2.5(jiti@1.21.7)(rollup@4.34.0)(typescript@5.7.3)(yaml@2.7.0) + + lucide-react@0.474.0(react@19.0.0): + dependencies: + react: 19.0.0 magic-string@0.25.9: dependencies: @@ -4986,11 +5006,11 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 - preferred-pm@4.1.0: + preferred-pm@4.1.1: dependencies: find-up-simple: 1.0.0 find-yarn-workspace-root2: 1.2.16 - which-pm: 3.0.0 + which-pm: 3.0.1 prettier-plugin-astro@0.14.1: dependencies: @@ -5218,6 +5238,8 @@ snapshots: semver@7.7.0: {} + semver@7.7.1: {} + sharp@0.33.5: dependencies: color: 4.2.3 @@ -5656,7 +5678,7 @@ snapshots: which-pm-runs@1.1.0: {} - which-pm@3.0.0: + which-pm@3.0.1: dependencies: load-yaml-file: 0.2.0 diff --git a/src/animations.ts b/src/animations.ts index dc5de1f9..dce498c5 100644 --- a/src/animations.ts +++ b/src/animations.ts @@ -1,13 +1,13 @@ -export function getTitleAnimation(delay = 0) { +export function getTitleAnimation(delay = 0, duration = 0.3, once = true) { return { initial: { opacity: 0, translateY: 20, filter: 'blur(4px)' }, whileInView: { opacity: 1, translateY: 0, filter: 'blur(0px)', - transition: { duration: 0.3, delay }, + transition: { duration, delay }, }, - viewport: { once: true }, + viewport: { once: once }, } } diff --git a/src/assets/browser-compactmode.webm b/src/assets/browser-compactmode.webm index e74a7215..fc9c2dfa 100644 Binary files a/src/assets/browser-compactmode.webm and b/src/assets/browser-compactmode.webm differ diff --git a/src/assets/browser-glance.webm b/src/assets/browser-glance.webm index 3700a8a7..9dcc37f1 100644 Binary files a/src/assets/browser-glance.webm and b/src/assets/browser-glance.webm differ diff --git a/src/assets/browser-workspaces.webm b/src/assets/browser-workspaces.webm index e1817ead..d9577fb9 100644 Binary files a/src/assets/browser-workspaces.webm and b/src/assets/browser-workspaces.webm differ diff --git a/src/assets/browser.png b/src/assets/browser.png index 92ab0213..bea9e310 100644 Binary files a/src/assets/browser.png and b/src/assets/browser.png differ diff --git a/src/assets/browsers-light.png b/src/assets/browsers-light.png deleted file mode 100644 index 24bc82bc..00000000 Binary files a/src/assets/browsers-light.png and /dev/null differ diff --git a/src/assets/browsers.png b/src/assets/browsers.png deleted file mode 100644 index 897b048a..00000000 Binary files a/src/assets/browsers.png and /dev/null differ diff --git a/src/components/Button.astro b/src/components/Button.astro index 8fc241d0..6798d34c 100644 --- a/src/components/Button.astro +++ b/src/components/Button.astro @@ -17,14 +17,14 @@ const { {...extra} href={href} class:list={[ - 'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200', + 'transition-bg flex items-center justify-center gap-2 rounded-xl px-6 py-4 transition-transform duration-150 hover:scale-[1.02]', className, isPrimary - ? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark' + ? 'border-dark bg-dark text-paper shadow-lg' : isAlert ? 'bg-red-300 text-dark' : !isBordered - ? 'border-2 border-dark hover:bg-dark hover:text-paper' + ? 'bg-[rgba(0,0,0,.05)]' : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm', ]} > @@ -35,14 +35,14 @@ const { id={id} {...extra} class:list={[ - 'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200', + 'transition-bg flex items-center justify-center gap-2 rounded-lg px-6 py-3 transition-transform duration-150 hover:scale-[1.02]', className, isPrimary - ? 'bg-dark text-paper' + ? 'border-dark bg-dark text-paper shadow-md' : isAlert ? 'bg-red-300 text-dark' : !isBordered - ? 'border-2 border-dark hover:bg-dark hover:text-paper' + ? '' : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm', ]} > diff --git a/src/components/Features.astro b/src/components/Features.astro index 6bcef099..bcd0d284 100644 --- a/src/components/Features.astro +++ b/src/components/Features.astro @@ -53,7 +53,7 @@ import Video from './Video.astro' muted playsinline preload="none" - class="rounded-xl border-4 border-white object-cover shadow" + class="rounded-3xl object-cover shadow-md" />
@@ -73,7 +73,7 @@ import Video from './Video.astro' muted playsinline preload="none" - class="rounded-xl border-4 border-white object-cover shadow" + class="rounded-3xl object-cover shadow-md" />
@@ -95,7 +95,7 @@ import Video from './Video.astro' muted playsinline preload="none" - class="rounded-xl border-4 border-white object-cover shadow" + class="rounded-3xl object-cover shadow-md" />
@@ -116,7 +116,7 @@ import Video from './Video.astro' muted playsinline preload="none" - class="rounded-xl border-4 border-white object-cover shadow" + class="rounded-3xl object-cover shadow-md" />
@@ -135,7 +135,7 @@ import Video from './Video.astro' muted playsinline preload="none" - class="rounded-xl border-4 border-white object-cover shadow" + class="rounded-3xl object-cover shadow-md" />
diff --git a/src/components/Hero.astro b/src/components/Hero.astro index ad24933a..ef8375af 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -3,8 +3,7 @@ import Title from '../components/Title.astro' import Description from '../components/Description.astro' import Button from '../components/Button.astro' import { Image } from 'astro:assets' -import myImage from '../assets/browsers.png' -import myImageLight from '../assets/browsers-light.png' +import myImage from '../assets/browser.png' import { ArrowRight } from 'lucide-astro' import { motion } from 'motion/react' import { getTitleAnimation } from '../animations' @@ -22,7 +21,7 @@ function getHeroTitleAnimation() {
</div> </header> -<motion.span client:load {...getHeroTitleAnimation()}> +<motion.span + className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0" + client:load + {...getHeroTitleAnimation()} +> <Image src={myImage} alt="Zen browser" - class="mx-auto mb-24 hidden dark:block" - loading="eager" - /> - <Image - src={myImageLight} - alt="Zen browser" - class="mx-auto mb-24 block dark:hidden" + class="mb-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80" loading="eager" /> </motion.span> diff --git a/src/components/Logo.astro b/src/components/Logo.astro index 7a5be946..d892917a 100644 --- a/src/components/Logo.astro +++ b/src/components/Logo.astro @@ -1,4 +1,9 @@ +--- +const { class: className } = Astro.props +--- + <svg + class={className} width="32" height="32" viewBox="0 0 64 64" diff --git a/src/components/MobileNavBar.tsx b/src/components/MobileNavBar.tsx new file mode 100644 index 00000000..26b2daf6 --- /dev/null +++ b/src/components/MobileNavBar.tsx @@ -0,0 +1,159 @@ +import React, { useState } from 'react' +import MyLogo from './Mylogo' +import { Menu } from 'lucide-react' +import ThemeSwitch from './ThemeSwitch/ThemeSwitch' + +const MobileNavbar: React.FC = () => { + const [isMenuOpen, setMenuOpen] = useState(false) + + const menuTransformClass = isMenuOpen ? 'translate-x-0' : 'translate-x-full' + + return ( + <div className="lg:hidden"> + {/* Mobile Header */} + <header className="flex items-center justify-between bg-paper px-4 py-2"> + <a className="flex items-center gap-2" href="/"> + <MyLogo className="h-8 w-8 text-coral" /> + <span className="text-lg font-bold">zen browser</span> + </a> + <div className="flex flex-row gap-2"> + <ThemeSwitch /> + <button + id="burger-btn" + className="p-2 text-dark" + aria-label="Open menu" + onClick={() => setMenuOpen(true)} + > + <Menu className="h-6 w-6" /> + </button> + </div> + </header> + + {/* Mobile Slide Menu (slides in from the right) */} + <div + id="mobile-menu" + className={`fixed inset-y-0 right-0 z-40 w-64 transform bg-paper shadow-lg transition-transform duration-300 ${menuTransformClass}`} + > + <div className="flex items-center justify-between border-b border-dark px-4 py-2"> + <div className="text-lg font-bold">Menu</div> + <button + id="close-btn" + className="p-2 text-dark" + aria-label="Close menu" + onClick={() => setMenuOpen(false)} + > + <svg + xmlns="http://www.w3.org/2000/svg" + className="h-6 w-6" + fill="none" + viewBox="0 0 24 24" + stroke="currentColor" + > + <path + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth={2} + d="M6 18L18 6M6 6l12 12" + /> + </svg> + </button> + </div> + <nav className="px-4 py-2"> + <ul className="space-y-4"> + {/* Getting Started Links */} + <li> + <div className="mb-2 font-bold">Getting Started</div> + <ul className="ml-4 space-y-2"> + <li> + <a href="/mods" className="block text-dark hover:text-coral"> + Zen Mods + </a> + </li> + <li> + <a + href="/release-notes" + className="block text-dark hover:text-coral" + > + Release Notes + </a> + </li> + <li> + <a + href="https://discord.gg/zen-browser" + className="block text-dark hover:text-coral" + > + Discord + </a> + </li> + </ul> + </li> + {/* Useful Links */} + <li> + <div className="mb-2 font-bold">Useful Links</div> + <ul className="ml-4 space-y-2"> + <li> + <a + href="/donate" + className="block text-dark hover:text-coral" + > + Donate ❤️ + </a> + </li> + <li> + <a href="/about" className="block text-dark hover:text-coral"> + About Us 🌟 + </a> + </li> + <li> + <a + href="https://docs.zen-browser.app" + className="block text-dark hover:text-coral" + > + Documentation + </a> + </li> + <li> + <a + href="https://github.com/zen-browser" + target="_blank" + className="block text-dark hover:text-coral" + > + GitHub + </a> + </li> + </ul> + </li> + {/* Extra Links */} + <li> + <a + href="/mods" + className="block font-bold text-dark hover:text-coral" + > + Mods + </a> + </li> + <li> + <a + href="/download" + className="block font-bold text-dark hover:text-coral" + > + Download + </a> + </li> + </ul> + </nav> + </div> + + {/* Overlay for Mobile Menu */} + {isMenuOpen && ( + <div + id="overlay" + className="fixed inset-0 z-30 bg-black opacity-50" + onClick={() => setMenuOpen(false)} + /> + )} + </div> + ) +} + +export default MobileNavbar diff --git a/src/components/Mylogo.tsx b/src/components/Mylogo.tsx new file mode 100644 index 00000000..2015eae8 --- /dev/null +++ b/src/components/Mylogo.tsx @@ -0,0 +1,37 @@ +import React from 'react' + +interface MyLogoProps { + className?: string +} + +const MyLogo: React.FC<MyLogoProps> = ({ className }) => ( + <svg + className={className} + width="32" + height="32" + viewBox="0 0 64 64" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + fillRule="evenodd" + clipRule="evenodd" + d="M32 44.3077C38.7974 44.3077 44.3077 38.7974 44.3077 32C44.3077 25.2027 38.7974 19.6923 32 19.6923C25.2027 19.6923 19.6923 25.2027 19.6923 32C19.6923 38.7974 25.2027 44.3077 32 44.3077ZM41.8462 32C41.8462 37.4379 37.4379 41.8462 32 41.8462C26.5621 41.8462 22.1538 37.4379 22.1538 32C22.1538 26.5621 26.5621 22.1538 32 22.1538C37.4379 22.1538 41.8462 26.5621 41.8462 32Z" + fill="currentColor" + /> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M53.3333 32C53.3333 43.7821 43.7821 53.3333 32 53.3333C20.2179 53.3333 10.6667 43.7821 10.6667 32C10.6667 20.2179 20.2179 10.6667 32 10.6667C43.7821 10.6667 53.3333 20.2179 53.3333 32ZM32 49.2308C41.5163 49.2308 49.2308 41.5163 49.2308 32C49.2308 22.4837 41.5163 14.7692 32 14.7692C22.4837 14.7692 14.7692 22.4837 14.7692 32C14.7692 41.5163 22.4837 49.2308 32 49.2308Z" + fill="currentColor" + /> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32C0 14.3269 14.3269 0 32 0C49.6731 0 64 14.3269 64 32ZM32 58.2564C46.501 58.2564 58.2564 46.501 58.2564 32C58.2564 17.499 46.501 5.74359 32 5.74359C17.499 5.74359 5.74359 17.499 5.74359 32C5.74359 46.501 17.499 58.2564 32 58.2564Z" + fill="currentColor" + /> + </svg> +) + +export default MyLogo diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro index d937a933..df18074a 100644 --- a/src/components/NavBar.astro +++ b/src/components/NavBar.astro @@ -1,4 +1,5 @@ --- +import { motion } from 'motion/react' import Title from '../components/Title.astro' import Description from '../components/Description.astro' import Button from '../components/Button.astro' @@ -13,104 +14,111 @@ import { import { ArrowRight, ChevronDown, Download, DownloadCloud } from 'lucide-astro' import Logo from './Logo.astro' import { ThemeSwitch } from 'free-astro-components' +import { getTitleAnimation } from '../animations.ts' --- <nav id="nav-bar" - class="relative z-20 flex w-full items-center justify-between lg:px-6 lg:pt-3" + class="relative z-20 hidden w-full items-center justify-between lg:flex lg:px-6 lg:pt-3" > <Astronav> <MenuItems - class="relative mx-auto flex w-full gap-2 bg-paper p-2 lg:w-fit lg:gap-20" + class="relative mx-auto flex w-full justify-between gap-2 bg-paper p-2 lg:w-3/4 lg:min-w-fit" > - <a class="mr-3 flex items-center gap-2 text-lg font-bold" href="/"> - <Logo class="text-dark" /> + <a class="flex items-center gap-2 text-lg font-bold" href="/"> + <Logo class="text-coral" /> <span class="hidden lg:block">zen browser</span> </a> - <div class="flex items-center gap-6 text-xs sm:text-sm lg:text-base"> - <Dropdown class="group"> - <button class="flex items-center"> - <span>Getting Started</span> - <ChevronDown - class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2" - /> - </button> - <DropdownItems> - <div - class="navbar-dropdown left-0 right-1/4 top-16 w-full lg:w-fit" - > - <a class="dropdown-item bg-dark/5 row-span-2" href="/mods"> - <div class="dropdown-title">Zen Mods</div> - <div class="dropdown-description"> - Customize your browsing experience with Zen Mods. - </div> - <Button isPrimary class="mt-auto"> - Try Zen Mods - <ArrowRight class="size-4" /> - </Button> - </a> - <a class="dropdown-item" href="/release-notes"> - <div class="dropdown-title">Release Notes</div> - <div class="dropdown-description"> - Stay up to date with the latest features and improvements. - </div> - </a> - <a class="dropdown-item" href="https://discord.gg/zen-browser"> - <div class="dropdown-title">Discord</div> - <div class="dropdown-description"> - Join our community on Discord to chat with other Zen users! - </div> - </a> - </div> - </DropdownItems> - </Dropdown> - <Dropdown class="group"> - <button class="flex items-center"> - <span>Useful Links</span> - <ChevronDown - class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2" - /> - </button> - <DropdownItems> - <div - class="navbar-dropdown left-0 top-16 w-full !grid-cols-1 gap-1 lg:left-1/3 lg:right-1/4 lg:w-fit" - > - <a class="dropdown-item" href="/donate"> - <div class="dropdown-title">Donate ❤️</div> - <div class="dropdown-description"> - Support the development of Zen Browser with a donation. - </div> - </a> - <a class="dropdown-item" href="/about"> - <div class="dropdown-title">About Us 🌟</div> - <div class="dropdown-description"> - Learn more about the team behind Zen Browser. - </div> - </a> - <a class="dropdown-item" href="https://docs.zen-browser.app"> - <div class="dropdown-title">Documentation</div> - <div class="dropdown-description"> - Learn how to use Zen Browser with our documentation. - </div> - </a> - <a - class="dropdown-item" - href="https://github.com/zen-browser" - target="_blank" + <div class="mx-auto flex"> + <div class="flex items-center gap-6 text-xs sm:text-sm lg:text-base"> + <Dropdown class="group"> + <button class="flex items-center"> + <span>Getting Started</span> + <ChevronDown + class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2" + /> + </button> + <DropdownItems> + <motion.div + className="navbar-dropdown" + {...getTitleAnimation(0, 0.3, false)} + client:load > - <div class="dropdown-title">GitHub</div> - <div class="dropdown-description"> - Contribute to the development of Zen Browser on GitHub. - </div> - </a> - </div> - </DropdownItems> - </Dropdown> - <a class="hidden items-center lg:block" href="/mods"> - <span>Mods</span> - </a> + <a class="dropdown-item bg-dark/5 row-span-2" href="/mods"> + <div class="dropdown-title">Zen Mods</div> + <div class="dropdown-description"> + Customize your browsing experience with Zen Mods. + </div> + <Button isPrimary class="mt-auto"> + Try Zen Mods + <ArrowRight class="size-4" /> + </Button> + </a> + <a class="dropdown-item" href="/release-notes"> + <div class="dropdown-title">Release Notes</div> + <div class="dropdown-description"> + Stay up to date with the latest features and improvements. + </div> + </a> + <a class="dropdown-item" href="https://discord.gg/zen-browser"> + <div class="dropdown-title">Discord</div> + <div class="dropdown-description"> + Join our community on Discord to chat with other Zen users! + </div> + </a> + </motion.div> + </DropdownItems> + </Dropdown> + <Dropdown class="group"> + <button class="flex items-center"> + <span>Useful Links</span> + <ChevronDown + class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2" + /> + </button> + <DropdownItems> + <motion.div + className="navbar-dropdown !grid-cols-1 gap-1" + {...getTitleAnimation(0, 0.3, false)} + client:load + > + <a class="dropdown-item" href="/donate"> + <div class="dropdown-title">Donate ❤️</div> + <div class="dropdown-description"> + Support the development of Zen Browser with a donation. + </div> + </a> + <a class="dropdown-item" href="/about"> + <div class="dropdown-title">About Us 🌟</div> + <div class="dropdown-description"> + Learn more about the team behind Zen Browser. + </div> + </a> + <a class="dropdown-item" href="https://docs.zen-browser.app"> + <div class="dropdown-title">Documentation</div> + <div class="dropdown-description"> + Learn how to use Zen Browser with our documentation. + </div> + </a> + <a + class="dropdown-item" + href="https://github.com/zen-browser" + target="_blank" + > + <div class="dropdown-title">GitHub</div> + <div class="dropdown-description"> + Contribute to the development of Zen Browser on GitHub. + </div> + </a> + </motion.div> + </DropdownItems> + </Dropdown> + <a class="hidden items-center lg:block" href="/mods"> + <span>Mods</span> + </a> + </div> </div> - <div class="ml-auto flex gap-2"> + <div class="flex items-center gap-2 lg:gap-4"> <div id="theme-switcher" class="ml-auto md:mr-2"> <ThemeSwitch label="" class="px-1 py-2" /> </div> @@ -127,10 +135,10 @@ import { ThemeSwitch } from 'free-astro-components' </MenuItems> </Astronav> </nav> + <style> .navbar-dropdown { - @apply absolute grid grid-cols-2 gap-2 rounded-lg border-2 border-dark bg-paper p-3 shadow-sm; - + @apply absolute left-1/2 mt-2 grid !-translate-x-1/2 !transform grid-cols-2 gap-2 rounded-lg border-2 border-dark bg-paper p-3 shadow-sm; & .dropdown-item { @apply flex cursor-pointer select-none flex-col gap-2 rounded-lg p-4 transition-colors duration-200; diff --git a/src/components/ReleaseNoteItem.astro b/src/components/ReleaseNoteItem.astro index 1056d47e..75fd0aea 100644 --- a/src/components/ReleaseNoteItem.astro +++ b/src/components/ReleaseNoteItem.astro @@ -44,7 +44,7 @@ if (props.date) { class="whitespace-nowrap text-sm text-coral opacity-60" target="_blank" href={`https://github.com/zen-browser/desktop/releases/tag/${isTwilight ? 'twilight' : props.version}`} - >Github Release</a + >GitHub Release</a > { !isTwilight ? ( diff --git a/src/components/ThemeSwitch/ThemeSwitch.tsx b/src/components/ThemeSwitch/ThemeSwitch.tsx new file mode 100644 index 00000000..41655390 --- /dev/null +++ b/src/components/ThemeSwitch/ThemeSwitch.tsx @@ -0,0 +1,68 @@ +import React, { useEffect, useState } from 'react' +import './index.css' + +interface Props { + label?: string + className?: string +} + +const ThemeSwitch: React.FC<Props> = ({ label, className }) => { + const [isLight, setIsLight] = useState<boolean>(() => { + if (typeof window !== 'undefined') { + return localStorage.getItem('theme') === 'light' + } + return true + }) + + useEffect(() => { + document.documentElement.setAttribute( + 'data-theme', + isLight ? 'light' : 'dark', + ) + localStorage.setItem('theme', isLight ? 'light' : 'dark') + }, [isLight]) + + const handleChange = () => { + setIsLight(!isLight) + } + + return ( + <label className={`ac-theme-switch-wrapper ${className}`}> + <input + data-theme-switch + className="ac-theme-switch" + aria-checked={isLight} + type="checkbox" + checked={isLight} + onChange={handleChange} + /> + <svg + className="ac-theme-switch-icon ac-theme-switch-icon--dark" + viewBox="0 0 24 24" + > + <path + d="M12 9c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5zm-4.184-.599l-3.593-3.594-1.415 1.414 3.595 3.595c.401-.537.876-1.013 1.413-1.415zm4.184-1.401c.34 0 .672.033 1 .08v-5.08h-2v5.08c.328-.047.66-.08 1-.08zm5.598 2.815l3.595-3.595-1.414-1.414-3.595 3.595c.537.402 1.012.878 1.414 1.414zm-12.598 4.185c0-.34.033-.672.08-1h-5.08v2h5.08c-.047-.328-.08-.66-.08-1zm11.185 5.598l3.594 3.593 1.415-1.414-3.594-3.593c-.403.536-.879 1.012-1.415 1.414zm-9.784-1.414l-3.593 3.593 1.414 1.414 3.593-3.593c-.536-.402-1.011-.877-1.414-1.414zm12.519-5.184c.047.328.08.66.08 1s-.033.672-.08 1h5.08v-2h-5.08zm-6.92 8c-.34 0-.672-.033-1-.08v5.08h2v-5.08c-.328.047-.66.08-1 .08z" + fill="currentColor" + ></path> + </svg> + <svg + className="ac-theme-switch-icon ac-theme-switch-icon--light" + viewBox="0 0 24 24" + > + <path + d="M10.719 2.082c-2.572 2.028-4.719 5.212-4.719 9.918 0 4.569 1.938 7.798 4.548 9.895-4.829-.705-8.548-4.874-8.548-9.895 0-5.08 3.808-9.288 8.719-9.918zm1.281-2.082c-6.617 0-12 5.383-12 12s5.383 12 12 12c1.894 0 3.87-.333 5.37-1.179-3.453-.613-9.37-3.367-9.37-10.821 0-7.555 6.422-10.317 9.37-10.821-1.74-.682-3.476-1.179-5.37-1.179zm0 10.999c1.437.438 2.562 1.564 2.999 3.001.44-1.437 1.565-2.562 3.001-3-1.436-.439-2.561-1.563-3.001-3-.437 1.436-1.562 2.561-2.999 2.999zm8.001.001c.958.293 1.707 1.042 2 2.001.291-.959 1.042-1.709 1.999-2.001-.957-.292-1.707-1.042-2-2-.293.958-1.042 1.708-1.999 2zm-1-9c-.437 1.437-1.563 2.562-2.998 3.001 1.438.44 2.561 1.564 3.001 3.002.437-1.438 1.563-2.563 2.996-3.002-1.433-.437-2.559-1.564-2.999-3.001z" + fill="currentColor" + ></path> + </svg> + {label ? ( + <span className="ac-theme-switch-label">{label}</span> + ) : ( + <span className="ac-theme-switch-label ac-theme-switch-label--hidden"> + Toggle theme + </span> + )} + </label> + ) +} + +export default ThemeSwitch diff --git a/src/components/ThemeSwitch/index.css b/src/components/ThemeSwitch/index.css new file mode 100644 index 00000000..f8bd294b --- /dev/null +++ b/src/components/ThemeSwitch/index.css @@ -0,0 +1,88 @@ +:root { + --zen-dark: 22, 22, 22; + --zen-paper: 255, 255, 255; + + --ac-font-sans: ui-sans-serif, system-ui, sans-serif; + --ac-text-sm: 0.875rem; + --ac-spacing-2: 0.5rem; + --ac-spacing-5: 1.25rem; +} + +.light, +:root, +[data-theme='light'] { + color-scheme: light; + --ac-color-100: var(--zen-paper); + --ac-color-200: var(--zen-paper); + --ac-color-300: var(--zen-paper); + --ac-color-400: var(--zen-paper); + --ac-color-500: var(--zen-dark); + --ac-color-600: var(--zen-dark); + --ac-color-700: var(--zen-dark); +} + +.dark, +[data-theme='dark'] { + color-scheme: dark; + --ac-color-100: var(--zen-dark); + --ac-color-200: var(--zen-dark); + --ac-color-300: var(--zen-dark); + --ac-color-400: var(--zen-dark); + --ac-color-500: var(--zen-paper); + --ac-color-600: var(--zen-paper); + --ac-color-700: var(--zen-paper); +} + +.ac-theme-switch-wrapper { + cursor: pointer; + display: flex; + align-items: center; + gap: var(--ac-spacing-2); + font-family: var(--ac-font-sans); + color: rgb(var(--ac-color-700)); + font-size: var(--ac-text-sm); +} + +.ac-theme-switch-wrapper:hover .ac-theme-switch-icon, +.ac-theme-switch-wrapper:has(:focus) .ac-theme-switch-icon { + color: rgb(var(--ac-color-500)); +} + +.ac-theme-switch-wrapper:hover .ac-theme-switch-label, +.ac-theme-switch-wrapper:has(:focus) .ac-theme-switch-label { + color: rgb(var(--ac-color-500)); +} + +html[data-theme='dark'] .ac-theme-switch-icon--light { + display: none; +} + +html[data-theme='light'] .ac-theme-switch-icon--dark { + display: none; +} + +.ac-theme-switch { + height: 0; + opacity: 0; + overflow: hidden; + position: absolute; + width: 0; +} + +.ac-theme-switch-icon { + height: var(--ac-spacing-5); + transition: all 0.3s ease-in-out; + width: var(--ac-spacing-5); +} + +.ac-theme-switch-label { + color: rgb(var(--ac-color-500)); + transition: all 0.3s ease-in-out; +} + +.ac-theme-switch-label--hidden { + height: 0; + overflow: hidden; + position: absolute; + width: 0; +} diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 1dc9c101..902a66e6 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,13 +1,18 @@ --- interface Props { title: string + description?: string + ogImage?: string isHome?: boolean } -const { title, isHome } = Astro.props +const { title, description, ogImage, isHome } = Astro.props +const defaultDescription = 'Zen Browser is built for speed, security, and true privacy. Download now to enjoy a beautifully-designed, distraction-free web experience packed with features.'; +const defaultOgImage = '/share-pic.png'; import '@fontsource/bricolage-grotesque/400.css' import NavBar from '../components/NavBar.astro' import Footer from '../components/Footer.astro' +import MobileNavBar from '../components/MobileNavBar' --- <script is:inline data-cfasync="false"> @@ -30,10 +35,11 @@ import Footer from '../components/Footer.astro' window.localStorage.setItem('theme', theme) </script> +<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> - <meta name="description" content="Zen Browser is built for speed, security, and true privacy. Download now to enjoy a beautifully-designed, distraction-free web experience packed with features."/> + <meta name="description" content={description ?? defaultDescription} /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="sitemap" href="/sitemap-0.xml" /> @@ -45,7 +51,7 @@ import Footer from '../components/Footer.astro' "@context":"https://schema.org", "@type":"WebSite", "name":"Zen Browser", - "url":"https://zen-browser.app/", + "url":"https://zen-browser.app/" } </script>)} @@ -59,10 +65,10 @@ import Footer from '../components/Footer.astro' <!-- Open Graph --> <meta property="og:title" content={title} /> <meta property="og:type" content="website" /> - <meta property="og:image" content="/share-pic.png" /> + <meta property="og:image" content={ogImage ?? defaultOgImage} /> <meta property="og:description" - content="Zen Browser is built for speed, security, and true privacy. Download now to enjoy a beautifully-designed, distraction-free web experience packed with features." + content={description ?? defaultDescription} /> <meta property="og:color" content="#da755b" /> <!-- Twitter card --> @@ -85,6 +91,7 @@ import Footer from '../components/Footer.astro' class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark" > <NavBar /> + <MobileNavBar client:load /> <slot /> <Footer /> </body> @@ -108,12 +115,12 @@ import Footer from '../components/Footer.astro' :root { --zen-paper: #f2f0e3; - --zen-dark: #202020; + --zen-dark: #2e2e2e; --zen-muted: rgba(0, 0, 0, 0.05); &[data-theme='dark'] { - --zen-paper: #202020; - --zen-dark: #f2f0e3; + --zen-paper: #1f1f1f; + --zen-dark: #d1cfc0; --zen-muted: rgba(255, 255, 255, 0.05); } } diff --git a/src/pages/about.astro b/src/pages/about.astro index 3164ec4a..b4ace6e9 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -5,7 +5,7 @@ import Title from '../components/Title.astro' import Layout from '../layouts/Layout.astro' --- -<Layout title="About - Zen Browser"> +<Layout title="About - Zen Browser" description="We are simply a group of developers and designers who care about your experience on the web. We believe that the internet should be a place where you can explore, learn, and connect without worrying about your data being collected."> <main class="relative flex min-h-screen flex-col items-center justify-center py-24" > diff --git a/src/pages/download.astro b/src/pages/download.astro index fff9eb74..04f766df 100644 --- a/src/pages/download.astro +++ b/src/pages/download.astro @@ -240,11 +240,11 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' }) }, linux: { x86_64: { - tar: 'zen.linux-x86_64.tar.bz2', + tar: 'zen.linux-x86_64.tar.xz', appImage: 'zen-x86_64.AppImage', }, aarch64: { - tar: 'zen.linux-aarch64.tar.bz2', + tar: 'zen.linux-aarch64.tar.xz', appImage: 'zen-aarch64.AppImage', }, }, @@ -417,11 +417,17 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' }) downloadRelease('linux', selectedArch as string, 'appImage') }) - document + if (!isTwilight) { + document .getElementById('linux-flathub-download') ?.addEventListener('click', () => { window.open('https://flathub.org/apps/app.zen_browser.zen') }) + } + else { + document + .getElementById('linux-flathub-download')?.classList.add('hidden') + } document .getElementById('windows-installer-download') diff --git a/src/pages/mods/[...slug].astro b/src/pages/mods/[...slug].astro index b6ff22d6..624093bf 100644 --- a/src/pages/mods/[...slug].astro +++ b/src/pages/mods/[...slug].astro @@ -26,7 +26,7 @@ const dates = { } --- -<Layout title={`${mod.name} - Zen Mods`}> +<Layout title={`${mod.name} - Zen Mods`} description={`Learn more about ${mod.name} mod available on Zen Browser`} ogImage={mod.image}> <main class="mt-6 2xl:mt-0"> <div class="mx-auto mb-24 mt-12 flex flex-col gap-6 px-8 lg:mt-32 lg:w-1/2"> <div diff --git a/src/release-notes/stable.json b/src/release-notes/stable.json index f45d06f6..bc0a35d3 100644 --- a/src/release-notes/stable.json +++ b/src/release-notes/stable.json @@ -363,9 +363,7 @@ "version": "1.0.0-a.13", "date": "05/08/2024", "extra": "This is a smaller release to fix some bugs and improve some small details.\n\nIm going to try doing more frequent releases from now on, see how it goes.", - "features": [ - "Allow to remember sidebar width even after collapsing it." - ], + "features": ["Allow to remember sidebar width even after collapsing it."], "fixes": [ { "description": "Task Manager Icon Missing in Flatpak Version", @@ -921,9 +919,7 @@ "image": true, "workflowId": 11000317603, "extra": "This update addresses some significant issues with the previous release.\n\nWe appreciate your patience and support!", - "features": [ - "Added a new system for handling keyboard shortcuts" - ], + "features": ["Added a new system for handling keyboard shortcuts"], "fixes": [ { "description": "The New Tab button is not visible", @@ -980,9 +976,7 @@ "Enabled container tabs by default", "Improved Expand Tabs on Hover layout" ], - "themeChanges": [ - "Toggle inputs will not use the themed tertiary color" - ], + "themeChanges": ["Toggle inputs will not use the themed tertiary color"], "breakingChanges": [ "The keyboard shortcuts will be overriden by the defaults ones in this update" ], @@ -1279,9 +1273,7 @@ "issue": 2156 } ], - "breakingChanges": [ - "Removed Show Expand Button option from settings" - ], + "breakingChanges": ["Removed Show Expand Button option from settings"], "themeChanges": [ "The variable '--zen-main-browser-background' will now contain the generated gradient", "Added the 'unread' attribute for background tabs that haven't been accessed yet" @@ -1384,9 +1376,7 @@ "description": "Fixed wrong aligment on glance action buttons" } ], - "features": [ - "No new features, sorry" - ] + "features": ["No new features, sorry"] }, { "version": "1.0.1-a.17", @@ -2209,9 +2199,32 @@ "breakingChanges": [ "Disabled tab previews by default, can be enabled in settings", "We now use the .tar.xz format for the linux release", - "New tabs have been removed, check the features section" + "New tabs have been removed, check the features section", + "Replaced default toolbar layout, the profile button with the settings icon" ], - "workflowId": 13162922608, + "workflowId": 13194954146, "date": "05/02/2025" + }, + { + "version": "1.7.6b", + "image": false, + "extra": "This release is a small one, but it brings a few fixes and a new feature.", + "fixes": [ + "Fixed sidebar icons all looking the same", + "Fixed floating URL bar making the compact mode appear for some time", + "Fixed tabs appearing on the pinned tabs section", + "Fixed middle mouse click on the sidebar not opening a new tab", + "Fixed notifications not being able to be closed", + "Fixed urlbar margins when using single toolbar mode", + "Fixed tabs scrolling to the top constantly", + "Fixed changing tabs not being scrolled to when overflowing the sidebar", + "Fixed opening glance tabs on essentials messing up the sidebar", + "Fixed pinned tabs appearing on normal container after a restart" + ], + "features": [ + "Tabs can now be dragged into pinned tabs by dragging them into the workspace indicator" + ], + "workflowId": 13209591935, + "date": "08/02/2025" } ] diff --git a/src/release-notes/twilight.json b/src/release-notes/twilight.json index cb9cf2f9..04c43f03 100644 --- a/src/release-notes/twilight.json +++ b/src/release-notes/twilight.json @@ -4,4 +4,4 @@ "extra": "", "fixes": [], "features": [] -} \ No newline at end of file +} diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 38fe2e1c..7d8f3fc2 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -16,6 +16,20 @@ export default { 'zen-blue': '#6287f5', 'zen-green': '#63f78b', }, + keyframes: { + fadeIn: { + '0%': { opacity: 0 }, + '100%': { opacity: 1 }, + }, + breathe: { + '50%': { transform: 'scale(1.2)' }, + '0%, 100%': { transform: 'scale(1)' }, + }, + }, + animation: { + fadeIn: 'fadeIn 2s ease-in-out', + breathe: 'breathe 5s ease-in-out infinite', + }, }, }, plugins: [],