+
+ {`
+# 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
+
+
+
+---
+
+
+`}
+
+
+
+ )
+}
diff --git a/src/app/api/get-theme/[id]/route.ts b/src/app/api/get-theme/[id]/route.ts
deleted file mode 100644
index 78c7a69..0000000
--- a/src/app/api/get-theme/[id]/route.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { getAllThemes, getThemeFromId } from '@/lib/themes';
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { NextRequest, NextResponse } from 'next/server';
-
-// Static NextJS API route. We will have /get-theme?id=theme-id static route
-export async function generateStaticParams() {
- const themes = await getAllThemes();
- return themes.map((theme) => ({
- id: theme.id,
- }));
-}
-
-
-function removeUneccessaryKeys(theme: any) {
- delete theme["isDarkMode"];
- delete theme["isColorTheme"];
- return theme;
-}
-
-export async function GET(request: any, { params }: { params: { id: string } }) {
- const themes = await getAllThemes();
- const theme = themes.find((theme) => theme.id === params.id);
- console.log(theme);
- return NextResponse.json(removeUneccessaryKeys(theme));
-}
\ No newline at end of file
diff --git a/src/app/branding-assets/page.tsx b/src/app/branding-assets/page.tsx
index 2399c78..da7063b 100644
--- a/src/app/branding-assets/page.tsx
+++ b/src/app/branding-assets/page.tsx
@@ -6,8 +6,6 @@ export default function BrandingAssetsPage() {
return (
-
- {/* At the bottom of the page */}
);
}
diff --git a/src/app/create-theme/page.tsx b/src/app/create-theme/page.tsx
index 867610e..ee3cf84 100644
--- a/src/app/create-theme/page.tsx
+++ b/src/app/create-theme/page.tsx
@@ -6,8 +6,6 @@ export default function BrandingAssetsPage() {
return (
-
- {/* At the bottom of the page */}
);
}
diff --git a/src/app/download/page.tsx b/src/app/download/page.tsx
index ce92777..fc586ec 100644
--- a/src/app/download/page.tsx
+++ b/src/app/download/page.tsx
@@ -7,8 +7,6 @@ export default function Download() {
return (
-
- {/* At the bottom of the page */}
);
}
diff --git a/src/app/globals.css b/src/app/globals.css
index 76e5131..1197e25 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -41,6 +41,8 @@
--color-two: #fe8bbb;
--color-three: #9e7aff;
+ --surface: rgb(245, 245, 245);
+
/*
--color-one: #37ecba;
--color-two: #72afd3;
@@ -48,10 +50,12 @@
*/
}
- .dark {
+ [data-theme='dark'], .dark {
--background: 0 0% 0%;
--foreground: 0 0% 98%;
+ --surface: rgb(23, 23, 23);
+
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
@@ -81,10 +85,13 @@
}
@layer base {
+ html {
+ @apply scroll-smooth;
+ }
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
-}
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fd2a59b..9e47b35 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import StyledComponentsRegistry from "@/lib/styled-components-registry";
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
const inter = Inter({ subsets: ["latin"] });
@@ -12,25 +14,32 @@ export const metadata: Metadata = {
keywords: ["Zen", "Browser", "Zen Browser", "Web", "Internet", "Fast"],
};
-export default function RootLayout({
+export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
+
return (
-
+
+
- {children}
+
+
+ {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 32236a3..a178837 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -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)
---
@@ -91,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 69d7cbc..67418c8 100644
--- a/src/app/release-notes/[version]/page.tsx
+++ b/src/app/release-notes/[version]/page.tsx
@@ -24,22 +24,18 @@ export default function ReleaseNotePage({ params }: { params: { version: string
-
- {/* At the bottom of the page */}
);
}
return (
-
- {/* At the bottom of the page */}
);
}
diff --git a/src/app/release-notes/page.tsx b/src/app/release-notes/page.tsx
index 07f304c..cee3cd2 100644
--- a/src/app/release-notes/page.tsx
+++ b/src/app/release-notes/page.tsx
@@ -12,7 +12,7 @@ export default function ReleaseNotes() {
Confused about which build to choose?{" "}
-
System requirements
-
+
.
diff --git a/src/components/features.tsx b/src/components/features.tsx
index 30bbfc4..b480ddf 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -1,33 +1,45 @@
'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';
import {
Cross1Icon,
EyeClosedIcon,
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';
@@ -42,417 +54,263 @@ import {
} 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 tweaking 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
-
-
- With a new compact mode, you can save space and focus on what
- matters.
-
-
- Killer feature
-
-
-
-
-
-
-
-
-
-
-
-
- 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
+
+
+
+
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.
+
+
-
- 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.
-
+
+
+
+
Firefox Based
+
+
+
+
Fully Open source
+
+
+
+
Automated Releases to ensure security
+
+
+
+
Community driven
+
+
+
+
Constantly improving
+
-
+
+
+
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 9dc2c15..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 }) {
+ 
- 
- 
- Floorp
- 
- LibreWolf
- 
- 
- 
- 
+