+
+ {`
+# Main Developer Team
+
+* [**Mauro Baladés**](https://github.com/mauro-balades): Creator, Main Developer, and a funny guy.
+* **Oscar Gonzalez**: Site Reliability Engineer (SRE) and code signing.
+* [**Onno**](https://www.onnno.nl/index.html): logo designer.
+* [**Jafeth Garro**](https://iamjafeth.com/): Documentation writer.
+* **Peter Jung**: general contributor and AUR maintainer.
+* [**Gunir**](https://github.com/gunir): Active contributor.
+* [**n7itro**](https://github.com/n7itro): Active contributor.
+* [**Canoa**](https://thatcanoa.org/) Active contributor, and very active in issue handling
+* [**Jan Heres**](https://janheres.eu/): Active contributor and helps with MacOS builds.
+
+# Many more contributors
+
+
+
+---
+
+
+`}
+
+
+ {children}
+
+ {/* At the bottom of the page */}
+
+
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..5855f54
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,8 @@
+
+export default function NotFoundPage() {
+ return (
+
+
404
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d3867cd..c70c0f1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,8 +10,6 @@ export default function Home() {
-
- {/* At the bottom of the page */}
);
}
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
index 7a9af0a..a178837 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -1,3 +1,4 @@
+"use client";
import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
import { releaseNoteIsAlpha, releaseNotes } from "@/lib/release-notes";
@@ -52,7 +53,7 @@ Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's
# 4. Data Security
Although Zen Browser does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on Mozilla's servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe.
-* Note that most of the security measures are taken care by mozilla firefox.
+* Note that most of the security measures are taken care by Mozilla Firefox.
# 5. Your Control
## 5.1. Data Deletion
@@ -82,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)
---
@@ -90,8 +91,6 @@ If you have any questions or concerns about this Privacy Policy or Zen Browser,
By using Zen Browser, you agree to this Privacy Policy. Remember, with Zen, your privacy is in your hands.`}
-
- {/* At the bottom of the page */}
)
}
diff --git a/src/app/release-notes/[version]/page.tsx b/src/app/release-notes/[version]/page.tsx
index fd3e332..12dc3ba 100644
--- a/src/app/release-notes/[version]/page.tsx
+++ b/src/app/release-notes/[version]/page.tsx
@@ -1,4 +1,3 @@
-"use client";
import React, { useState, useCallback } from 'react';
import Footer from "@/components/footer";
@@ -53,8 +52,11 @@ const VersionList = React.memo(({ currentVersion }: { currentVersion: string })
VersionList.displayName = 'VersionList';
-export default function ReleaseNotePage() {
- const params = useParams<{ version: string }>();
+export async function generateStaticParams() {
+ return [{version: "latest"}, ...releaseNotes.map((note) => ({ version: note.version }))];
+}
+
+export default function ReleaseNotePage({ params }: { params: { version: string } }) {
const { version } = params;
if (version === "latest") {
@@ -69,14 +71,12 @@ export default function ReleaseNotePage() {
+ Right now, we aren't taking more color themes for the browser, until we find a way to make it more accessible for everyone. However, you can still create your own theme and share it with the community.
+
-
+
diff --git a/src/components/download.tsx b/src/components/download.tsx
index 2ab7f6e..ae6b4f2 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -1,5 +1,4 @@
"use client";
-import { addDownload } from "@/lib/db";
import { useState, useEffect } from "react";
import styled, { keyframes } from "styled-components";
import { ny } from "@/lib/utils";
@@ -158,7 +157,6 @@ export default function DownloadPage() {
window.location.replace(`${BASE_URL}/${releases[releaseTarget]}`);
}
setHasDownloaded(true);
- addDownload(releaseTarget);
throwConfetti();
};
@@ -217,20 +215,20 @@ export default function DownloadPage() {
Downloaded! ❤️
- Zen Browser has been downloaded successfully. Enjoy browsing the
+ Your download of Zen Browser will begin shortly. Enjoy browsing the
web with Zen!
Confused about which build to choose?{" "}
-
System requirements
-
+
.
diff --git a/src/components/features.tsx b/src/components/features.tsx
index 014fdce..b480ddf 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -1,400 +1,316 @@
-"use client";
+'use client';
import Sticky from 'react-sticky-el';
import {
+ BookmarkCheckIcon,
CheckIcon,
ChevronLeft,
ChevronRight,
+ ExternalLinkIcon,
EyeIcon,
EyeOffIcon,
Github,
+ HeartHandshake,
+ HeartPulseIcon,
HomeIcon,
+ PaintBucket,
+ PersonStanding,
RabbitIcon,
ShieldAlertIcon,
ShieldCheck,
SidebarCloseIcon,
SidebarIcon,
+ SidebarOpenIcon,
SpaceIcon,
SplitSquareHorizontal,
SplitSquareVertical,
+ SplitSquareVerticalIcon,
+ TableIcon,
XIcon,
-} from "lucide-react";
+} from 'lucide-react';
import {
Cross1Icon,
EyeClosedIcon,
HeartFilledIcon,
+ Link1Icon,
LockClosedIcon,
+ QuestionMarkCircledIcon,
QuestionMarkIcon,
ReloadIcon,
+ SpaceBetweenHorizontallyIcon,
UpdateIcon,
-} from "@radix-ui/react-icons";
-import Image from "next/image";
+} from '@radix-ui/react-icons';
+import Image from "next/legacy/image";
+import Link from 'next/link';
import { Button } from './ui/button';
import { COLORS } from './create-theme';
import { Slider } from './ui/slider';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from './ui/table';
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 (
-
+
);
}
function Cross() {
return (
-
+
);
}
function Question() {
return (
-
+
);
}
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 (
-
-
-
-
-
+
+
+
+
+
Your Browser, your way
+
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.
+
+
+
-
-
- Goodbye bad performance
-
-
- We are constantly tweak firefox's engine and settings to make it
- faster than ever. Learn more
-
+
+
+
Always up to date
+
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.
+
+
+
-
-
-
-
-
-
- Privacy first
-
-
- We don't track you. We don't sell your data. We don't even know
- who you are. Learn more
-
-
-
-
-
-
-
-
-
- Secure by default
-
-
- We are always using the latest security features from firefox to
- keep you safe. Learn more
-
-
-
-
-
-
- User experience comes first
-
-
- We are always looking for ways to make your experience better. Always looking for feedback and suggestions!
-
-
-
-
-
-
-
-
-
-
- Customization is key
-
-
- We are always looking for ways to make your experience better. With stackable themes that can be mixed and matched, you can create a browser that is truly yours. Learn more
-
+
+
+
+
+
Community driven and Open Source
+
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.
- With a new compact mode, you can save space and focus on what matters.
-
-
- Killer feature
-
+
+
+
Fully Open source
+
+
+
+
Automated Releases to ensure security
+
+
+
+
Community driven
+
+
+
+
Constantly improving
-
-
-
-
-
-
-
-
- What makes Zen Browser different?
-
-
-
-
-
-
-
-
-
- How Zen compares to other browsers
-
-
-
-
- Zen
-
-
-
- Floorp
-
-
-
- LibreWolf
-
-
-
-
-
-
- Fine-grained security like sandboxing
-
-
-
-
-
-
-
-
-
-
-
-
-
- Optimized for peak performance
-
-
-
-
-
-
-
-
-
-
-
-
-
- Based on the latest Firefox
-
-
-
-
-
-
-
-
-
-
-
-
-
- Customizable with cutting-edge features
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Open source
-
-
-
- Zen Browser is open source and always will be. You can check out
- the source code on our Github!
-
-
-
-
-
-
- Updated
-
-
-
- We are always working on new features and improvements. You can
- expect regular updates to keep your browser up to date.
-
-
-
-
-
-
- Community
-
-
-
- Zen Browser is built by a community of passionate developers and
- designers. You can join us on our Discord!
-
-
-
-
-
-
-
-
- Your Data
-
-
-
- We are always looking for ways to improve your privacy. Zen Browser
- comes with built-in privacy features to keep you safe.
-
-
-
-
-
-
- Improvements
-
-
-
- We are always looking for ways to make Zen Browser better. You can
- expect regular updates with new features and improvements.
-
-
-
-
-
-
-
-
-
-
-
-
-
setFeature(0)}>
-
-
- Split view
-
-
- Split your browser into two windows to work more efficiently.
-
-
-
setFeature(1)}>
-
-
- Workspaces
-
-
- Organize your tabs into workspaces to keep things tidy.
-
-
-
setFeature(2)}>
-
-
- Sidebar
-
-
- Keep your favorite websites at your fingertips with the sidebar.
-
-
+
+
+
Built for simplicity
+
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.
+
+
+
+
Completely Customizable
+
+
+
+
Vertical Tabs
+
+
+
+
Thoughtful Design
+
+
+
+
+
+
+
+
+
Split Views
+
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.
+
+
+
+
+
+
+
+
Better tab management
+
Better tab management helps you stay organized and focused, reducing clutter and enhancing productivity
+
+
+
+
Workspaces
+
+
+
+
Fast profile switcher
+
+
+
+
Container Tabs
+
+
+
+
Tab Groups (Coming Soon)
+
+
+
+
+
+
Security and Privacy is important to us
+
+ 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.
+
+
+
+
+
+
+
+
+
+
Sidebar
+
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.
+
+
+
+
Quick Access
+
+
+
+
Customizable
+
+
+
+
Easy to Use
+
+
+
+
+
+
+
+
+
Introducing Compact Mode
+
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.
+
+
+
+
+
+
+
+
Frequently Asked Questions
+
+
+ is it firefox based?
+
+ Yes, Zen Browser is focused on being always at the latest version of Firefox, ensuring that you have the latest security updates and features.
+
+
+
+ Does it track me?
+
+ No! 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.
+
+
+
+ How secure is Zen Browser?
+
+ 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.
+
+
+
+
@@ -94,16 +105,16 @@ function MobileLink({
}: MobileLinkProps) {
const router = useRouter()
return (
- {
router.push(href.toString())
onOpenChange?.(false)
}}
- className={ny(className)}
+ className={ny(className, "my-4")}
{...props}
>
{children}
-
+
)
}
\ No newline at end of file
diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
index 2d1018c..c320e67 100644
--- a/src/components/mode-toggle.tsx
+++ b/src/components/mode-toggle.tsx
@@ -1,7 +1,7 @@
"use client";
-import * as React from "react";
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import {useEffect, useState} from "react";
+import { MoonIcon, SunIcon, Half2Icon } from "@radix-ui/react-icons";
import { useTheme } from "next-themes";
import { Button } from "./ui/button";
import {
@@ -12,14 +12,36 @@ import {
} from "./ui/dropdown-menu";
export function ModeToggle() {
+ const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme();
const toggleTheme = () => {
- setTheme(theme === "light" ? "dark" : "light");
+ switch (theme) {
+ case 'system':
+ setTheme("dark");
+ break;
+ case 'dark':
+ setTheme("light");
+ break;
+ case 'light':
+ setTheme('system');
+ break;
+ }
};
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) {
+ return null;
+ }
+
+ console.log(theme);
return (
);
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index e74c052..2713bf2 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -1,5 +1,4 @@
-"use client"
-
+
import * as React from "react"
import Link from "next/link"
@@ -23,27 +22,32 @@ export const components: { title: string; href: string; description: string }[]
{
title: "Privacy Policy",
href: "/privacy-policy",
- description: "Learn how we handle your data. Don't worry, we don't collect anything!",
+ description: "Read our privacy policy to learn more about how we handle your data."
},
{
title: "Discord",
- href: "https://discord.gg/nnShMQzR4b",
- description: "Join our Discord server to chat with the community."
+ href: "https://discord.com/servers/mauro-s-little-sweatshop-1088172780480114748",
+ description: "Join our Discord server to chat with the community and get support."
},
{
title: "Source Code",
href: "https://github.com/zen-browser",
- description: "Check out our source code on GitHub and leave a star!"
+ description: "View the source code on GitHub and contribute to the project."
},
{
title: "Branding Assets",
href: "/branding-assets",
- description: "Download Zen Browser branding assets for your website or project."
+ description: "Download our branding assets to use in your projects."
+ },
+ {
+ title: "About",
+ href: "/about",
+ description: "Learn more about the Zen Browser project and the team behind it."
},
{
title: "Documentation",
href: "https://docs.zen-browser.app/",
- description: "Learn how to use Zen Browser and build your own themes."
+ description: "Read the documentation to learn more about Zen Browser."
}
]
@@ -59,34 +63,34 @@ export function Navigation() {
- Getting started
+ Getting Started
-
- Zen Browser
+ Zen Browser
Firefox based browser with a focus on privacy and
customization.
-
+
- Start using Zen Browser today with just a few clicks.
+ Start using Zen Browser today with just a few clicks.
- Customize your browser with a variety of themes!
+ Customize your browser with a variety of themes!
- Stay up to date with the latest changes.
+ Stay up to date with the latest changes.
@@ -105,7 +109,7 @@ export function Navigation() {
Support us on Patreon and get exclusive rewards and keep the project alive.
Ko-fi is a way to support us with a one-time donation and help us keep the project alive.
@@ -114,7 +118,7 @@ export function Navigation() {
- Useful Links
+ {"Useful Links"}
{components.map((component) => (
diff --git a/src/components/release-note.tsx b/src/components/release-note.tsx
index 8cf450a..049c8bd 100644
--- a/src/components/release-note.tsx
+++ b/src/components/release-note.tsx
@@ -15,12 +15,12 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
If you encounter any issues, please report them on{" "}
-
the issues page
-
+
. Thanks everyone for your feedback! ❤️
{data.extra && (
@@ -81,13 +81,13 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
+ 
+ 
