feat: Update footer layout, add social media links, and improve styling

src/app/[locale]/branding-assets/page.tsx

@@ -0,0 +1,11 @@
+import { BrandingAssets } from "@/components/branding-assets";
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+
+export default function BrandingAssetsPage() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <BrandingAssets />
+    </main>
+  );
+}

src/app/[locale]/create-theme/page.tsx

@@ -0,0 +1,11 @@
+import CreateThemePage from "@/components/create-theme";
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+
+export default function BrandingAssetsPage() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <CreateThemePage />
+    </main>
+  );
+}

src/app/[locale]/download/page.tsx

@@ -0,0 +1,12 @@
+
+import DownloadPage from "@/components/download";
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+
+export default function Download() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <DownloadPage />
+    </main>   
+  );
+}

src/app/[locale]/feed.xml/route.ts

@@ -0,0 +1,110 @@
+import { Feed } from "feed";
+import { releaseNotes } from "@/lib/release-notes";
+import type { ReleaseNote } from "@/lib/release-notes";
+
+// Force feed.xml to be cached as static and remain constant for the lifetime of the current site build.
+// The supplied releaseNotes array is constant per build, so this will always be the latest release notes.
+export const dynamic = "force-static";
+
+/** The default number of entries to include in the RSS feed. */
+const RSS_ENTRY_LIMIT = 20;
+
+/**
+ * Handles the GET request for the `feed.xml` endpoint.
+ * @returns The RSS feed for the Zen Browser release notes.
+ */
+export async function GET() {
+    // Just in case the release notes array is empty for whatever reason.
+    const latestDate = releaseNotes.length > 0
+        ? formatRssDate(releaseNotes[0].date)
+        : new Date();
+
+    const feed = new Feed({
+        id: "https://www.zen-browser.app/release-notes",
+        link: "https://www.zen-browser.app/release-notes",
+        title: "Zen Browser Release Notes",
+        description: "Release Notes for the Zen Browser",
+        language: "en",
+        favicon: "https://www.zen-browser.app/favicon.ico",
+        copyright: `Zen Browser © ${new Date().getFullYear()} - Made with ❤️ by the Zen team.`,
+        updated: latestDate,
+    });
+
+    for (const releaseNote of releaseNotes.slice(0, RSS_ENTRY_LIMIT)) {
+        feed.addItem({
+            title: `Release notes for version ${releaseNote.version}`,
+            id: `https://www.zen-browser.app/release-notes/${releaseNote.version}`,
+            link: `https://www.zen-browser.app/release-notes/${releaseNote.version}`,
+            date: formatRssDate(releaseNote.date),
+            description: releaseNote.extra,
+            content: formatReleaseNote(releaseNote),
+        });
+    }
+
+    return new Response(feed.rss2(), {
+        headers: {
+            'Content-Type': 'application/xml; charset=utf-8',
+        },
+    });
+}
+
+/**
+ * Formats a date string in the format day/month/year. 
+ * 
+ * Note: If release notes change to ISO format, this will need to be updated.
+ * @param dateStr The date string to format.
+ * @returns The passed in date string as a Date object.
+ */
+function formatRssDate(dateStr: string) {
+    const splitDate = dateStr.split("/");
+    if (splitDate.length !== 3) {
+        throw new Error("Invalid date format");
+    }
+
+    const day = Number(splitDate[0]);
+    const month = Number(splitDate[1]) - 1;
+    const year = Number(splitDate[2]);
+    return new Date(year, month, day);
+}
+
+/**
+ * Formats the release note entry for use as the content of the RSS feed.
+ * @param releaseNote The release note to format.
+ * @returns The formatted release note as a HTML string.
+ */
+function formatReleaseNote(releaseNote: ReleaseNote) {
+    let content = "<p>If you encounter any issues, please report them on <a href=\"https://github.com/zen-browser/desktop/issues/\">the issues page</a>. Thanks everyone for your feedback! ❤️</p>";
+
+    if (releaseNote.extra) {
+        content += `<p>${releaseNote.extra.replace(/(\n)/g, "<br />")}</p>`
+    }
+
+    if (releaseNote.breakingChanges) {
+        content += `<h2>⚠️ Breaking changes</h2>`
+        content += `<ul>`
+        for (const breakingChange of releaseNote.breakingChanges) {
+            content += `<li>${breakingChange}</li>`
+        }
+        content += `</ul>`
+    }
+
+    if (releaseNote.features) {
+        content += `<h2>⭐ Features</h2>`
+        content += `<ul>`
+        for (const feature of releaseNote.features) {
+            content += `<li>${feature}</li>`
+        }
+        content += `</ul>`
+    }
+
+    if (releaseNote.fixes) {
+        content += `<h2>✓ Fixes</h2>`
+        content += `<ul>`
+        for (const fix of releaseNote.fixes) {
+            content += `<li>${fix.description}</li>`
+        }
+        content += `</ul>`
+    }
+
+    return content;
+}

src/app/[locale]/globals.css

@@ -0,0 +1,96 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+   :root {
+      --background: 0 0% 100%;
+      --foreground: 0 0% 3.9%;
+
+      --card: 0 0% 100%;
+      --card-foreground: 0 0% 3.9%;
+
+      --popover: 0 0% 100%;
+      --popover-foreground: 0 0% 3.9%;
+
+      --primary: 0 0% 9%;
+      --primary-foreground: 0 0% 98%;
+
+      --secondary: 0 0% 96.1%;
+      --secondary-foreground: 0 0% 9%;
+
+      --muted: 0 0% 96.1%;
+      --muted-foreground: 0 0% 45.1%;
+
+      --accent: 0 0% 96.1%;
+      --accent-foreground: 0 0% 9%;
+
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 0 0% 89.8%;
+      --input: 0 0% 89.8%;
+      --ring: 0 0% 3.9%;
+
+      --radius: 0.5rem;
+
+      /* Custom properties */
+      --navigation-height: 3.5rem;
+      --color-one: #ffbd7a;
+
+      --color-two: #fe8bbb;
+      --color-three: #9e7aff;
+
+      --surface: rgb(245, 245, 245);
+
+      /*
+    --color-one: #37ecba;
+    --color-two: #72afd3;
+    --color-three: #ff2e63;
+     */
+   }
+
+   .dark {
+      --background: 0 0% 0%;
+      --foreground: 0 0% 98%;
+
+      --surface: rgb(23, 23, 23);
+
+      --card: 0 0% 3.9%;
+      --card-foreground: 0 0% 98%;
+
+      --popover: 0 0% 3.9%;
+      --popover-foreground: 0 0% 98%;
+
+      --primary: 0 0% 98%;
+      --primary-foreground: 0 0% 9%;
+
+      --secondary: 0 0% 14.9%;
+      --secondary-foreground: 0 0% 98%;
+
+      --muted: 0 0% 14.9%;
+      --muted-foreground: 0 0% 63.9%;
+
+      --accent: 0 0% 14.9%;
+      --accent-foreground: 0 0% 98%;
+
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 0 0% 14.9%;
+      --input: 0 0% 14.9%;
+      --ring: 0 0% 83.1%;
+      --color-one: #6aa8e2;
+   }
+}
+
+@layer base {
+   * {
+      @apply border-border;
+   }
+   body {
+      @apply bg-background text-foreground;
+
+      scroll-behavior: smooth;
+   }
+}

src/app/[locale]/layout.tsx

@@ -0,0 +1,72 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+import StyledComponentsRegistry from "@/lib/styled-components-registry";
+import {NextIntlClientProvider} from 'next-intl';
+import {unstable_setRequestLocale} from 'next-intl/server';
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+import { notFound } from "next/navigation";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const runtime = 'edge';
+
+export const metadata: Metadata = {
+  title: "Zen Browser",
+  description: "Download now and experience the Zen Browser",
+  keywords: ["Zen", "Browser", "Zen Browser", "Web", "Internet", "Fast"],
+};
+
+const SUPPORTED_LANGUAGES = ["en", "de"];
+
+async function getMessages(locale: string) {
+  try {
+    return (await import(`../../../messages/${locale}.json`)).default
+  } catch (error) {
+    notFound()
+  }
+}
+
+export function generateStaticParams() {
+  return SUPPORTED_LANGUAGES.map((locale) => ({locale}));
+}
+
+export default async function RootLayout({
+  children,
+  params: {locale},
+}: Readonly<{
+  children: React.ReactNode;
+  params: {locale: string};
+}>) {
+  unstable_setRequestLocale(locale);
+  const messages = await getMessages(locale);
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <head>
+        <link rel="me" href="https://fosstodon.org/@zenbrowser"></link>
+        <link rel="alternate" type="application/rss+xml" title="Zen Browser Release Notes" href="https://www.zen-browser.app/feed.xml" />
+      </head>
+      <body className={inter.className}>
+        <NextIntlClientProvider messages={messages} locale={locale}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <StyledComponentsRegistry>
+              <div>
+                {children}
+                <Footer />  
+                <Navigation /> {/* At the bottom of the page */}
+              </div>
+            </StyledComponentsRegistry>
+          </ThemeProvider>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

src/app/[locale]/not-found.tsx

@@ -0,0 +1,13 @@
+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>
+    </main>
+  );
+}

src/app/[locale]/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import Features from "@/components/features";
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+import { Navigation } from "@/components/navigation";
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen overflow-x-hidden flex-col items-center justify-start">
+      <Header />
+      <Features />
+    </main>   
+  );
+}
+      

src/app/[locale]/privacy-policy/markdown.css

@@ -0,0 +1,37 @@
+
+#policy h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+  font-weight: bold;
+}
+
+#policy h1:first-child {
+  margin-top: 0 !important;
+}
+
+#policy h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+  font-weight: bold;
+}
+
+#policy h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+
+#policy ul {
+  margin: 1em;
+}
+
+#policy li {
+  list-style: circle;
+}
+
+#policy a {
+  color: #007bff;
+}
+
+#policy hr {
+  margin: 2em 0;
+}

src/app/[locale]/privacy-policy/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+import { releaseNoteIsAlpha, releaseNotes } from "@/lib/release-notes";
+import Link from "next/link";
+import Markdown from 'react-markdown'
+import './markdown.css';
+
+export default function PrivacyPolicy() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <div id="policy" className="min-h-screen py-42 flex mx-auto my-52 p-10 lg:p-0 w-full lg:w-1/3 flex-col">
+        <Markdown>
+          {`
+# Privacy Policy
+* Last updated: 2024-08-12
+
+# Introduction
+Welcome to Zen Browser! Your privacy is our priority. This Privacy Policy outlines the types of personal information we collect, how we use it, and the steps we take to protect your data when you use Zen Browser.
+
+## 1. Information We Do Not Collect
+Zen Browser is designed with privacy in mind. We do not collect, store, or share any of your personal data. Here’s what that means:
+
+* Crash reports can be sent to Mozilla Firefox. But, we do not collect any crash reports. Crash reports are sent securely to Mozilla Firefox to help improve the stability of the browser. They do not contain any personal information.
+
+## 1.1. No Telemetry
+We do not collect any telemetry data. 
+
+However, you can opt-in to share telemetry data to Mozilla for the improvement of FireFox (the base upon which the Zen Browser is built). It will be treated in accordance with their Privacy Policy which you can read about [here](https://www.mozilla.org/en-US/privacy/).
+
+## 1.2. No Personal Data Collection
+Zen Browser does not collect any personal information such as your IP address, browsing history, search queries, or form data.
+
+## 1.3. No Third-Party Tracking
+We do not allow third-party trackers or analytics tools to operate within Zen Browser. Your browsing activity remains entirely private and is not shared with any third party. Mozilla is not considered a third party as it is the base of Zen Browser.
+
+# 2. Information Stored Locally on Your Device
+## 2.1. Browsing Data
+Zen Browser stores certain data locally on your device to enhance your browsing experience. This includes:
+
+* **Cookies**: Cookies are stored locally on your device and are not shared with Zen Browser or any third party. You have full control over the management of cookies through the browser’s settings.
+* **Cache and Temporary Files**: Zen Browser may store cache files and other temporary data locally to improve performance. These files can be cleared at any time through the browser’s settings.
+
+## 2.2. Settings and Preferences
+Any customizations, settings, and preferences you make within Zen Browser are stored locally on your device. We do not have access to or control over this data.
+
+# 3. Sync Feature
+Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's Sync feature. This feature allows you to synchronize your bookmarks, history, passwords, and other data across multiple devices. For this feature to work, your data is encrypted and stored on Mozilla’s servers and is treated in accordance with their Privacy Policy. We, at Zen, cannot view any of this data. 
+
+* [Mozilla Firefox Sync](https://www.mozilla.org/en-US/privacy/mozilla-accounts/)
+* [This is how we store your passwords](https://support.mozilla.org/en-US/kb/how-firefox-securely-saves-passwords#:~:text=Firefox%20Desktop%20encrypts%20your%20passwords,cryptography%20to%20obscure%20your%20passwords.)
+
+# 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.
+
+# 5. Your Control
+## 5.1. Data Deletion
+You have full control over all data stored locally on your device by Zen Browser. You can clear your browsing data, cookies, and cache at any time using the browser’s settings.
+
+## 5.2. Do Not Track
+Zen Browser automatically honors "Do Not Track" requests by default. We ensure that no tracking of your activity occurs, in compliance with this setting.
+
+# 6. Our Website and Services
+
+When you click on the "Download" button on our website, a number in the database is incremented to track the number of downloads. This is done to understand the popularity of the browser. No personal data is collected during the process.
+
+## 6.1.	External links
+Zen Browser may contain links to external websites or services that are not owned or operated by us. We are not responsible for the content or privacy practices of these sites. We recommend that you review the privacy policies of these sites before providing them with any personal information.
+
+# 7. Changes to This Privacy Policy
+We may update this Privacy Policy from time to time to reflect changes in our practices or legal requirements. We will notify you of any significant changes by updating the effective date at the top of this policy. Continued use of Zen Browser after such changes constitutes your acceptance of the new terms.
+
+# 8. Other telemetry done by Mozilla Firefox
+
+We try to disable all telemetry data collection in Zen Browser. But, we may have missed some. Check the below links for more information.
+
+You can also optionally enable telemetry data collection and other Mozilla Research Studies in Zen Browser. This is disabled by default. You can enable it by going to the settings page.
+
+* Please check [Firefox Privacy Notice](https://www.mozilla.org/en-US/privacy/) for more information.
+
+# 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.com/servers/mauro-s-little-sweatshop-1088172780480114748)
+* GitHub: [Organization](https://github.com/zen-browser)
+
+---
+
+By using Zen Browser, you agree to this Privacy Policy. Remember, with Zen, your privacy is in your hands.`}
+        </Markdown>
+      </div>
+    </main>
+  )
+}

src/app/[locale]/release-notes/[version]/page.tsx

@@ -0,0 +1,41 @@
+
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+import ReleaseNote from "@/components/release-note";
+import { Button } from "@/components/ui/button";
+import { releaseNotes } from "@/lib/release-notes";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+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") {
+    return redirect(`/release-notes/${releaseNotes[0].version}`);
+  }
+
+  const releaseNote = releaseNotes.find((note) => note.version === version);
+  if (!releaseNote) {
+    return (
+      <main className="flex min-h-screen flex-col items-center justify-center">
+        <div className="h-screen flex flex-wrap items-center justify-center">
+          <h1 className="text-4xl font-bold mt-12">Release note not found</h1>
+          <a href="/release-notes">
+            <Button className="mt-4 items-center justify-center">
+              Back to release notes
+            </Button>
+          </a>
+        </div>
+      </main>
+    );
+  }
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center">
+      <ReleaseNote data={releaseNote} />
+    </main>
+  );
+}

src/app/[locale]/release-notes/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+import { releaseNoteIsAlpha, releaseNotes } from "@/lib/release-notes";
+import Link from "next/link";
+
+export default function ReleaseNotes() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <div className="min-h-screen py-42 flex justify-center flex-col">
+        <h1 className="text-4xl text-center font-bold mt-24">Release Notes</h1>
+        <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
+          {releaseNotes.map((releaseNote) => (
+            <a href={`/release-notes/${releaseNote.version}`} className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1" key={releaseNote.version}>
+              <div className="text-md font-medium mb-5">
+                {releaseNote.version}
+              </div>
+              <div className="text-muted-foreground text-sm font-medium">
+                Check out the new features and improvements for {releaseNote.version}
+              </div>
+              {releaseNoteIsAlpha(releaseNote) && (
+                <div className="absolute top-0 right-0 bg-blue-500 text-white text-xs font-medium p-1 rounded-bl-lg">
+                  Alpha Release
+                </div>
+              )}
+            </a>
+          ))}
+        </div>
+      </div>
+    </main>
+  )
+}

src/app/[locale]/themes/[theme]/page.tsx

@@ -0,0 +1,54 @@
+
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+import ThemePage from "@/components/theme-page";
+import { getAllThemes, getThemeFromId } from "@/lib/themes";
+import { Metadata, ResolvingMetadata } from "next";
+
+export async function generateMetadata(
+  { params, searchParams }: any,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const theme = params.theme
+  const themeData = await getThemeFromId(theme);
+  if (!themeData) {
+    return {
+      title: "Theme not found",
+      description: "Theme not found",
+    };
+  }
+  return {
+    title: themeData.name,
+    description: themeData.description,
+    keywords: [themeData.name, themeData.description],
+    openGraph: {
+      title: themeData.name,
+      description: themeData.description,
+      images: [
+        {
+          url: themeData.image,
+          width: 500,
+          height: 500,
+          alt: themeData.name,
+        },
+      ],
+    },
+  };
+}
+
+export async function generateStaticParams() {
+  const themes = await getAllThemes();
+  console.log(themes);
+  return themes.map((theme) => ({
+    theme: theme.id,
+  }));
+}
+
+export default async function ThemeInfoPage({ params }: { params: { theme: string } }) {
+  const { theme } = params;
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <ThemePage themeID={theme} />
+    </main>
+  );
+}

src/app/[locale]/themes/page.tsx

@@ -0,0 +1,14 @@
+
+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 async function ThemesMarketplace() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <MarketplacePage themes={await getAllThemes()} />
+    </main>   
+  );
+}

src/app/[locale]/welcome/page.tsx

@@ -0,0 +1,12 @@
+
+import WelcomePage from "@/components/welcome";
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+
+export default function Download() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <WelcomePage />
+    </main>   
+  );
+}