joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into enjson

Browse Source
This commit is contained in:
Waled Khatiz
2024-09-02 14:44:50 +10:00
committed by GitHub
parent bdc3d5c9c4 5d4424e29a
commit dd5e74eecf
24 changed files with 4580 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.prettierrc Normal file
View File

@@ -0,0 +1,7 @@
{
"tabWidth": 2,
"useTabs": true,
"semi": true,
"trailingComma": "all",
"plugins": ["prettier-plugin-tailwindcss"]
}

11
README.md
View File

@@ -1,13 +1,14 @@
<p align="center">
<div align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://www.zen-browser.app/logos/zen-alpha-white.svg">
<img src="https://www.zen-browser.app/logos/zen-alpha-black.svg" width="64px">
<img src="./public/logos/zen-alpha-white.svg" width="128px">
</picture>
</p>
</div>
<h1 align="center">
Zen Browser Website
Zen Browser Website
</h1>
[![](https://data.jsdelivr.com/v1/package/gh/zen-browser/www/badge)](https://www.jsdelivr.com/package/gh/zen-browser/www)
This repository contains the source code for the Zen Browser Website. We are thrilled to welcome you to our community. Before you start, please read this document to understand how you can contribute to this project.
Zen Browser's website is built with [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), and [Tailwind CSS](https://tailwindcss.com/).

8
next.config.js
View File

@@ -1,6 +1,7 @@
const createNextIntlPlugin = require('next-intl/plugin');
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
const withNextIntl = createNextIntlPlugin();
/** @type {import('next').NextConfig} */
@@ -15,9 +16,12 @@ const nextConfig = (phase, { defaultConfig }) => {
{
protocol: "https",
hostname: "cdn.jsdelivr.net",
port: '',
pathname: '/gh/zen-browser/**',
}
],
domains: ['cdn.jsdelivr.net', "raw.githubusercontent.com"], // Allow images from jsDelivr
formats: ["image/png", "image/jpeg", "image/svg+xml", "image/webp"],
domains: ['localhost', 'cdn.jsdelivr.net', "raw.githubusercontent.com"], // Allow images from jsDelivr
},
experimental: {
serverActions: {

4350
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@@ -9,10 +9,14 @@
"dev": "next dev --turbo",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "next lint",
"pages:build": "npx @cloudflare/next-on-pages",
"preview": "npm run pages:build && wrangler pages dev",
"deploy": "npm run pages:build && wrangler pages deploy"
},
"dependencies": {
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -49,6 +53,7 @@
"zod": "^3.23.8"
},
"devDependencies": {
"@cloudflare/next-on-pages": "^1.13.2",
"@types/canvas-confetti": "^1.6.4",
"@types/node": "^20.14.15",
"@types/react": "^18.3.3",
@@ -57,6 +62,8 @@
"eslint": "^8.57.0",
"eslint-config-next": "14.2.4",
"postcss": "^8.4.41",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6",
"tailwindcss": "^3.4.9",
"typescript": "^5.5.4"
}

BIN
public/compact-mode.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 118 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/feature-item-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
public/logos/zen-alpha-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

2
src/app/layout.tsx
View File

@@ -8,6 +8,8 @@ import {getLocale, getMessages} from 'next-intl/server';
const inter = Inter({ subsets: ["latin"] });
export const runtime = 'edge';
export const metadata: Metadata = {
title: "Zen Browser",
description: "Download now and experience the Zen Browser",

15
src/app/not-found.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { BrandingAssets } from "@/components/branding-assets";
import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
export const runtime = 'edge'
export default function NotFoundPage() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<h1>404</h1>
<Footer />
<Navigation /> {/* At the bottom of the page */}
</main>
);
}

2
src/app/privacy-policy/page.tsx
View File

@@ -83,7 +83,7 @@ You can also optionally enable telemetry data collection and other Mozilla Resea
# 9. Contact Us
If you have any questions or concerns about this Privacy Policy or Zen Browser, please contact us at:
* Discord: [Zen Browser's Discord](https://discord.gg/nnShMQzR4b)
* Discord: [Zen Browser's Discord](https://discord.com/servers/mauro-s-little-sweatshop-1088172780480114748)
* GitHub: [Organization](https://github.com/zen-browser)
---

6
src/app/themes/page.tsx
View File

@@ -2,11 +2,13 @@
import Footer from "@/components/footer";
import MarketplacePage from "@/components/marketplace";
import { Navigation } from "@/components/navigation";
import { getAllThemes, ZenTheme } from "@/lib/themes";
import { GetStaticProps } from "next";
export default function ThemesMarketplace() {
export default async function ThemesMarketplace() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<MarketplacePage />
<MarketplacePage themes={await getAllThemes()} />
<Footer />
<Navigation /> {/* At the bottom of the page */}
</main>

9
src/components/CachedImage.tsx Normal file
View File

@@ -0,0 +1,9 @@
import Image from "next/image";
function imageLoader({ src }: { src: string }) {
return `https://cdn.jsdelivr.net/gh/zen-browser/${src}`;
}
export default function CachedImage({ ...props }: any) {
return <Image {...props} loader={imageLoader} />;
}

129
src/components/features.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import Sticky from 'react-sticky-el';
import {
BookmarkCheckIcon,
CheckIcon,
ChevronLeft,
ChevronRight,
@@ -18,9 +19,12 @@ import {
ShieldCheck,
SidebarCloseIcon,
SidebarIcon,
SidebarOpenIcon,
SpaceIcon,
SplitSquareHorizontal,
SplitSquareVertical,
SplitSquareVerticalIcon,
TableIcon,
XIcon,
} from 'lucide-react';
import {
@@ -29,11 +33,13 @@ import {
HeartFilledIcon,
Link1Icon,
LockClosedIcon,
QuestionMarkCircledIcon,
QuestionMarkIcon,
ReloadIcon,
SpaceBetweenHorizontallyIcon,
UpdateIcon,
} from '@radix-ui/react-icons';
import Image from 'next/image';
import Image from "next/legacy/image";
import Link from 'next/link';
import { Button } from './ui/button';
import { COLORS } from './create-theme';
@@ -50,10 +56,14 @@ import React, { useState } from 'react';
import { ny } from '@/lib/utils';
import ThemeCard from './theme-card';
import { getAllThemes, ZenTheme } from '@/lib/themes';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
import Logo from './logo';
import CachedImage from './CachedImage';
import { transform } from 'next/dist/build/swc';
function Checkmark() {
return (
<CheckIcon className="text-black rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
<CheckIcon className="text-black rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7 flex-none" />
);
}
@@ -70,28 +80,30 @@ function Question() {
}
export default function Features() {
const [feature, setFeature] = useState(0);
React.useEffect(() => {
const interval = setInterval(() => {
setFeature((feature) => (feature + 1) % 3);
}, 3000);
return () => clearInterval(interval);
}, []);
const [feature, setFeature] = useState("item-1");
return (
<section className="flex-col w-full" id="features">
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-16 shadow'>
<div className="md:w-1/2 p-5 lg:p-12">
<div className="p-5 lg:p-12 flex-1">
<div className="flex p-12 flex-col justify-center">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Your Browser, your way <PaintBucket className='inline w-10 h-10'></PaintBucket></h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>With Zen's Theme Store, you can customize your browsing experience to reflect your unique style and preferences. Choose from a wide array of themes, colors, and layouts to make Zen truly your own, transforming your browser into a personalized digital space.</p>
<div className="relative">
<Button className='mt-8' onClick={() => window.open('/themes', '_self')}>View Theme Store</Button>
</div>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/themes.webp" alt="Zen Browser" className="rounded-md mt-12" />
</div>
<hr/>
<div className="flex p-12 flex-col justify-center">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Always up to date <UpdateIcon className='inline w-10 h-10'></UpdateIcon></h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser is always up to date, ensuring that you have the latest features and security updates. With automatic updates, you can rest easy knowing that your browser is secure and up to date.</p>
<div className="relative">
<Button className='mt-8' onClick={() => window.open('/download', '_self')}>Download Now</Button>
</div>
</div>
</div>
<div className="border-t lg:border-t-0 lg:border-l h-[1px] lg:h-[unset] lg:w-[1px] mx-2"></div>
<div className="md:w-1/2 p-5 lg:p-12">
<div className="p-5 lg:p-12 flex-1">
<div className="flex p-12 flex-col justify-center">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Community driven and Open Source <Link1Icon className='inline w-10 h-10'></Link1Icon></h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen thrives on the contributions of its vibrant community. As an open-source project, Zen encourages collaboration and innovation, allowing users and developers alike to shape the future of the browser.</p>
@@ -109,11 +121,11 @@ export default function Features() {
</div>
<div className='flex items-center mt-5'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Automated Releases, to prove security</p>
<p className='ml-2 text-gray-600 dark:text-gray-300'>Automated Releases to ensure security</p>
</div>
<div className='flex items-center mt-5'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Comunity driven</p>
<p className='ml-2 text-gray-600 dark:text-gray-300'>Community driven</p>
</div>
<div className='flex items-center mt-5'>
<Checkmark />
@@ -125,7 +137,7 @@ export default function Features() {
</div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Built for simplicity</h1>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Built for simplicity <EyeIcon className='inline w-8 h-8'></EyeIcon></h1>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser is designed to be simple and easy to use. It's built with the user in mind, so you can focus on what matters most.</p>
<div className='w-full mt-8'>
<div className='flex items-center'>
@@ -142,12 +154,12 @@ export default function Features() {
</div>
</div>
</div>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-1.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
<CachedImage width={1350} height={900} src="www/public/browser-1.png" alt="Zen Browser" className="rounded-md lg:w-1/2 object-cover object-right" />
</div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md lg:mx-auto bg-surface mt-36 shadow'>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-2.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<CachedImage width={1350} height={900} src="www/public/browser-2.png" alt="Zen Browser" className="rounded-md lg:w-1/2 object-cover object-left" />
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Split Views</h1>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Split Views <SplitSquareHorizontal className='inline w-8 h-8'></SplitSquareHorizontal></h1>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser allows you to split your view into multiple panes, so you can work on multiple things at once. It's perfect for multitasking.</p>
<div className="relative">
<Button className='mt-8' onClick={() => window.open('/download', '_self')}>Download Now</Button>
@@ -156,7 +168,7 @@ export default function Features() {
</div>
<div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className="flex p-16 lg:w-1/2 flex-col justify-center">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Better tab management</h3>
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Better tab management <BookmarkCheckIcon className='inline w-8 h-8'></BookmarkCheckIcon></h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Better tab management helps you stay organized and focused, reducing clutter and enhancing productivity</p>
<div className='w-full mt-8'>
<div className='flex items-center'>
@@ -173,25 +185,25 @@ export default function Features() {
</div>
<div className='flex items-center mt-4'>
<Question />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Tab Groups (Comming Soon)</p>
<p className='ml-2 text-gray-600 dark:text-gray-300'>Tab Groups (Coming Soon)</p>
</div>
</div>
</div>
<div className="border-t lg:border-t-0 lg:border-l h-[1px] lg:h-[unset] lg:w-[1px] mx-2"></div>
<div className="flex p-16 lg:w-1/2 flex-col">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Security And Privacy is <span className='text-purple-500 font-bold'>important</span> to us</h3>
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Security and Privacy is <span className='text-purple-500 font-bold'>important</span> to us <LockClosedIcon className='inline w-8 h-8'></LockClosedIcon></h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>
Zen is based on Firefox, ensuring that your browsing experience prioritizes security and privacy. With advanced tracking protection and minimal data collection, Zen keeps your online activity safe and secure, giving you peace of mind as you explore the web.
</p>
<div className="relative">
<Button className='mt-8' variant="ghost" onClick={() => window.open('/download', '_blank')}>Security in zen <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
<Button className='mt-8' variant="ghost" onClick={() => window.open('/privacy-policy', '_blank')}>Your Privacy <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
<Button className='mt-8' variant="ghost" onClick={() => window.open('https://docs.zen-browser.app/security', '_blank')}>Security in Zen <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
<Button className='mt-8' variant="ghost" onClick={() => window.open('/privacy-policy', '_blank')}>Your Privacy <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
</div>
</div>
</div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Sidebar</h1>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Sidebar <SidebarIcon className='inline w-8 h-8 ml-1'></SidebarIcon></h1>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser has a built-in sidebar that lets you quickly access your favorite websites, bookmarks, and more. It's the perfect way to stay organized.</p>
<div className='w-full mt-8'>
<div className='flex items-center'>
@@ -208,18 +220,79 @@ export default function Features() {
</div>
</div>
</div>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-3.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
<CachedImage width={1350} height={900} src="www/public/browser-3.png" alt="Zen Browser" className="rounded-md lg:w-1/2 object-cover object-right" />
</div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-4.jpg" alt="Zen Browser" className="rounded-md lg:w-1/2" />
<CachedImage width={1350} height={900} src="www/public/browser-4.jpg" alt="Zen Browser" className="rounded-md lg:w-1/2 object-cover object-left" />
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Introducing Compact Mode</h1>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Introducing Compact Mode <SidebarCloseIcon className='inline w-8 h-8'></SidebarCloseIcon></h1>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser's compact mode gives you more screen real estate by hiding the title bar and tabs. It's perfect for when you need to focus on your work.</p>
<div className="relative">
<Button className='mt-8' onClick={() => window.open('/download', '_self')}>What are you waiting for?</Button>
</div>
</div>
</div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className="relative w-full lg:w-1/2 p-5 lg:p-12 flex flex-col justify-center">
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Frequently Asked Questions <QuestionMarkCircledIcon className='inline w-8 h-8'></QuestionMarkCircledIcon></h1>
<Accordion type="single" value={feature} onValueChange={setFeature} defaultValue="item-1" className='mt-8'>
<AccordionItem value="item-1">
<AccordionTrigger>is it firefox based?</AccordionTrigger>
<AccordionContent>
Yes, Zen Browser is focused on being always at the latest version of Firefox, ensuring that you have the latest security updates and features.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Does it track me?</AccordionTrigger>
<AccordionContent>
<strong>No!</strong> Zen Browser is built with privacy in mind. We don't track you, we don't collect your data, and we don't sell your data to third parties.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>How secure is Zen Browser?</AccordionTrigger>
<AccordionContent>
Zen Browser is built on top of Firefox, which is known for its security features. We also have additional security features like https only built into Zen Browser to help keep you safe online.
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
<div className="lg:w-1/2 h-auto rounded-md relative overflow-hidden">
<CachedImage width={1350} height={900} src="www/public/feature-item-1.png" alt="Zen Browser" className="object-cover h-full w-full robject-right ounded-md" />
{feature == "item-1" && (
<div className='w-full h-full absolute top-0 left-0 grid grid-rows-3'>
<div></div>
<div className="w-fit h-fit m-auto tems-center bg-background p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
<Logo className='w-10 h-10' /> <span className='text-4xl mx-4'>+</span> <svg className='w-10 h-10 relative' xmlns="http://www.w3.org/2000/svg" fill="white" fill-opacity="context-fill-opacity"><path style={{transform: "scale(2) translate(5%, 5%)"}} d="M10.39 0C8.948.788 7.987 2.025 7.767 3.66c-1.017.162-1.768.781-1.768.781s.72-.44 1.736-.511a4.04 4.04 0 0 1 3.789 2.034s-.758-.62-1.928-.468c1.315.68 1.872 2.002 1.701 3.369-.17 1.367-1.183 2.435-2.354 2.723-1.171.287-2.333.099-3.229-.61-.896-.708-1.251-1.533-1.305-2.254.213-.533.541-.812 1.1-1.092.558-.279 1.422-.283 1.572-.283s.8-.507.95-.894c-.726-.363-1.292-.65-1.696-.934-.404-.283-.492-.534-1.012-.898-.307-1.006-.021-1.955-.021-1.955s-1.043.437-1.93 1.49c0 0-.342-.338-.28-2.006-.427.155-1.366 1.004-1.947 1.92a7.277 7.277 0 0 0-.798 1.723A8.296 8.296 0 0 0-.003 8a8 8 0 0 0 16 0c0-2.256-.93-4.252-2.188-5.002 0 0 .542.932.813 2.43-.4-1.04-1.235-2.166-1.877-2.844-.643-.678-2.068-1.88-2.357-2.584z"/></svg>
</div>
<a href='https://github.com/zen-browser/desktop?tab=readme-ov-file#compatibility' target='_blank' className="w-fit h-fit m-auto items-center w-fit border-2 border-white shadow tems-center bg-background p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
See what version of Firefox Zen uses <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' />
</a>
</div>
)}
{feature == "item-2" && (
<div className='w-full h-full absolute top-0 left-0 grid grid-rows-3'>
<div></div>
<div className="w-fit h-fit m-auto tems-center bg-background p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
<LockClosedIcon className='w-10 h-10' /> <span className='text-4xl mx-4'>+</span> <EyeClosedIcon className='w-10 h-10' />
</div>
<a href='/privacy-policy' target='_blank' className="w-fit h-fit m-auto items-center w-fit border-2 border-white shadow tems-center bg-background p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
Learn about Zen's privacy policy <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' />
</a>
</div>
)}
{feature == "item-3" && (
<div className='w-full h-full absolute top-0 left-0 grid grid-rows-3'>
<div></div>
<div className="w-fit h-fit m-auto tems-center bg-background p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
<ShieldCheck className='w-10 h-10' /> <span className='text-4xl mx-4'>+</span> <ShieldAlertIcon className='w-10 h-10' />
</div>
<a href='https://docs.zen-browser.app/security' target='_blank' className="w-fit h-fit m-auto items-center w-fit border-2 border-white shadow tems-center bg-background p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
See how Zen keeps you safe <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' />
</a>
</div>
)}
</div>
</div>
<div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className="flex p-16 lg:w-1/2 flex-col justify-center">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Convinced?</h3>

2
src/components/header.tsx
View File

@@ -9,7 +9,7 @@ import { BorderBeam } from "./ui/border-beam";
import { ny } from "@/lib/utils";
import { ChevronDown, ChevronRight } from "lucide-react";
import Particles from "./ui/particles";
import Image from "next/image";
import Image from "next/legacy/image";
import Link from "next/link";
export default function Header() {
const ref = useRef(null);

12
src/components/logo.tsx
View File

@@ -1,20 +1,14 @@
"use client";
import { LOGO_COLORS } from "@/lib/logos";
import { ny } from "@/lib/utils";
import Image from "next/image";
import Image from "next/legacy/image";
import React from "react";
import CachedImage from "./CachedImage";
export default function Logo({ withText, ...props }: any) {
const [randomColor, setRandomColor] = React.useState(LOGO_COLORS[Math.floor(Math.random() * LOGO_COLORS.length)]);
React.useEffect(() => {
const interval = setInterval(() => {
setRandomColor(LOGO_COLORS[Math.floor(Math.random() * LOGO_COLORS.length)]);
}, 2000);
return () => clearInterval(interval);
}, []);
return (
<div className="flex items-center m-0" {...props}>
<img src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-${randomColor}.svg`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
<CachedImage src={`www/public/logos/zen-black.svg`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
{withText && <span className="text-2xl font-bold ml-2">zen</span>}
</div>
);

7
src/components/marketplace.tsx
View File

@@ -5,14 +5,9 @@ import { getAllThemes, getThemesFromSearch, ZenTheme } from "@/lib/themes";
import ThemeCard from "./theme-card";
import { Button } from "./ui/button";
export default function MarketplacePage() {
export default function MarketplacePage({ themes }: {themes:ZenTheme[]}) {
const [searchInput, setSearchInput] = React.useState("");
const [tags, setTags] = React.useState<string[]>(["all"]);
const [themes, setThemes] = React.useState<ZenTheme[]>([]);
React.useEffect(() => {
getAllThemes().then(setThemes);
}, []);
return (
<div className="flex flex-col w-full mx-auto items-center justify-center h-full">

2
src/components/navigation.tsx
View File

@@ -28,7 +28,7 @@ export const components: { titleKey: string; href: string; descriptionKey: strin
},
{
titleKey: "nav-components-discord",
href: "https://discord.gg/nnShMQzR4b",
href: "https://discord.com/servers/mauro-s-little-sweatshop-1088172780480114748",
descriptionKey: "nav-components-discord-text"
},
{

2
src/components/theme-card.tsx
View File

@@ -1,4 +1,4 @@
import Image from "next/image";
import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
import styled from "styled-components";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";

5
src/components/theme-page.tsx
View File

@@ -1,8 +1,7 @@
import Image from "next/image";
import { getThemeAuthorLink, getThemeFromId, getThemeMarkdown, ZenTheme } from "@/lib/themes";
import { Button } from "./ui/button";
import { useEffect, useState } from "react";
import Markdown from "react-markdown";
import '../app/privacy-policy/markdown.css';
import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
@@ -50,7 +49,7 @@ export default async function ThemePage({ themeID }: { themeID: string }) {
<p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
</div>
<hr className="block my-4 lg:hidden" />
<div className="flex flex-col lg:border-l lg:min-h-96 px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
<div className="flex lg:border-l flex-col lg:min-h-[calc(100vh/2-2rem)] px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
<div id="policy" className="w-full">
{readme === null ? (
<LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />

57
src/components/ui/accordion.tsx Normal file
View File

@@ -0,0 +1,57 @@
'use client'
import * as React from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { ChevronDownIcon } from '@radix-ui/react-icons'
import { ny } from '@/lib/utils'
const Accordion = AccordionPrimitive.Root
const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={ny('border-b', className)}
{...props}
/>
))
AccordionItem.displayName = 'AccordionItem'
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={ny(
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
className,
)}
{...props}
>
{children}
<ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
{...props}
>
<div className={ny('pb-4 pt-0', className)}>{children}</div>
</AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

2
src/lib/release-notes.ts
View File

@@ -668,7 +668,7 @@ export const releaseNotes: ReleaseNote[] = [
features: [
"Fixed policies for updates",
"Enforce HTTPS-Only Mode",
"Url Bsar improvements",
"URL bar improvements",
"Fixed issue with opening links from external apps",
"Compact mode now takes element separation into account",
"Added labels to buttons during expand-on-hover"

4
wrangler.toml Normal file
View File

@@ -0,0 +1,4 @@
name = "zenbrowser-www"
compatibility_date = "2024-07-29"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"