chore: Update branding assets page layout and styles

src/app/branding-assets/page.tsx

@@ -0,0 +1,13 @@
+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 />
+      <Footer />  
+      <Navigation /> {/* At the bottom of the page */}
+    </main>
+  );
+}

src/components/branding-assets.tsx

@@ -0,0 +1,46 @@
+import { LOGO_COLORS } from "@/lib/logos";
+
+export function BrandingAssets() {
+  return (
+    <div className="flex flex-col w-full mx-auto p-5 lg:w-1/2 lg:p-0 items-center justify-center h-full mt-36">
+      <div className="mx-auto w-full text-center">
+        <h1 className="text-4xl lg:text-7xl font-bold">Branding Assets</h1>
+        <p className="text-muted-foreground mt-2">Download Zen Browser branding assets for your website or project.</p>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 mt-10 w-full">
+        {LOGO_COLORS.map((color) => (
+          <div key={color} className="flex flex-col items-center">
+            <img src={`/logos/zen-${color}.png`} alt={`Zen Browser ${color} logo`} className="w-40 h-40 mt-4" />
+            <div className="flex items-center my-2">
+              <p className="text-lg">{color} - </p>
+              <a
+                href={`/logos/zen-${color}.png`}
+                download={`zen-${color}.png`}
+                className="text-blue-500 text-md ml-2"
+              >
+                Download
+              </a>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="mt-10">
+        <h2 className="text-2xl font-bold">License</h2>
+        <p className="text-muted-foreground mt-2">
+          All branding assets are licensed under the{" "}
+          <a
+            href="https://creativecommons.org/licenses/by-sa/4.0/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500"
+          >
+            CC BY-SA 4.0
+          </a>
+          . Thanks to <a href="https://www.onnno.nl/" className="text-blue-500">Donno (mr. Logos)</a> for the assets.
+          <br />
+          You are free to share and adapt the assets for any purpose, even commercially.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/logo.tsx

@@ -1,12 +1,9 @@
 "use client";
+import { LOGO_COLORS } from "@/lib/logos";
 import { ny } from "@/lib/utils";
 import Image from "next/image";
 import React from "react";
 
-export const LOGO_COLORS = [
-  "black", "blue", "brown", "buff", "indigo", "mantis", "orchid", "pink", "tangerine", "turquise", "white", "yellow"
-]
-
 export default function Logo({ withText, ...props }: any) {
   const [randomColor, setRandomColor] = React.useState(LOGO_COLORS[Math.floor(Math.random() * LOGO_COLORS.length)]);
   React.useEffect(() => {

src/components/navigation.tsx

@@ -34,6 +34,11 @@ export const components: { title: string; href: string; description: string }[]
     href: "https://github.com/zen-browser",
     description: "Check out our source code on GitHub and leave a star!"
   },
+  {
+    title: "Branding Assets",
+    href: "/branding-assets",
+    description: "Download Zen Browser branding assets for your website or project."
+  },
 ]
  
 export function Navigation() {

src/components/theme-page.tsx

@@ -14,7 +14,7 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
   return (
     <div className="mt-24 lg:mt-56 flex-col lg:flex-row relative flex mx-auto items-start relative">
       <div className="flex flex-col relative lg:fixed w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
-        <img src={theme.image} alt={theme.name} className="w-full object-cover rounded-lg border shadow" />
+        <img src={theme.image} alt={theme.name} className="w-full object-cover rounded-lg border-2 shadow" />
         <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
         <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
         {theme.homepage && (

src/lib/logos.ts

@@ -0,0 +1,4 @@
+
+export const LOGO_COLORS = [
+  "black", "blue", "brown", "buff", "indigo", "mantis", "orchid", "pink", "tangerine", "turquise", "white", "yellow"
+]