chore: Update marketplace page layout and styles

src/components/features.tsx

@@ -64,7 +64,7 @@ export default function Features() {
           <h1 className="text-3xl font-bold">The only limit is your</h1>
           <SparklesText className="!text-3xl" text="Imagination" />
           <p className="text-muted-foreground mt-3">
-            Zen's theme marketplace offers a wide range of themes to customize your browsing experience. Try them out today!
+            Zen's theme store offers a wide range of themes to customize your browsing experience. Try them out today!
           </p>
           <Button className="mt-8" onClick={() => window.location.href = "/themes"}>Try it now</Button>
         </div>

src/components/marketplace.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import ThemesSearch from "./themes-search";
 import { getAllThemes, getThemesFromSearch, ZenTheme } from "@/lib/themes";
 import ThemeCard from "./theme-card";
+import { Button } from "./ui/button";
 
 export default function MarketplacePage() {
   const [searchInput, setSearchInput] = React.useState("");
@@ -15,8 +16,15 @@ export default function MarketplacePage() {
   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">Themes Marketplace</h1>
+        <h1 className="text-4xl lg:text-7xl font-bold">Themes Shop</h1>
         <ThemesSearch input={searchInput} setInput={setSearchInput} />
+        <div className="w-full mt-4 flex items-start">
+          <Button
+            onClick={() => window.open("https://docs.zen-browser.app/themes-store/themes-marketplace-submission-guidelines#themes-store-submission-guidelines", "_blank")}
+            className="text-muted"
+          >Submit a theme</Button>
+        </div>
+        <hr className="w-full border-muted mt-4" />
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 w-full">
         {getThemesFromSearch(themes, searchInput).map((theme) => (

src/components/navigation.tsx

@@ -39,6 +39,11 @@ export const components: { title: string; href: string; description: string }[]
     href: "/branding-assets",
     description: "Download Zen Browser branding assets for your website or project."
   },
+  {
+    title: "Documentation",
+    href: "https://docs.zen-browser.app/",
+    description: "Learn how to use Zen Browser and build your own themes."
+  }
 ]
  
 export function Navigation() {
@@ -76,7 +81,7 @@ export function Navigation() {
                 <ListItem href="/download" title="Download">
                   Start using Zen Browser today with just a few clicks.
                 </ListItem>
-                <ListItem href="/themes" title="Themes Marketplace">
+                <ListItem href="/themes" title="Themes Store">
                   Customize your browser with a variety of themes!
                 </ListItem>
                 <ListItem href="/release-notes" title="Release Notes">

src/components/themes-search.tsx

@@ -1,4 +1,5 @@
 import { SearchIcon } from "lucide-react";
+import { Button } from "./ui/button";
 
 export default function ThemesSearch({
   input, setInput
@@ -7,7 +8,7 @@ export default function ThemesSearch({
   setInput: (input: string) => void;
 }) {
   return (
-    <div className="flex w-full p-2 bg-muted/50 rounded-full mt-10 items-center border border-muted">
+    <div className="flex w-full p-2 bg-muted/50 rounded-lg mt-10 items-center border border-muted">
       <SearchIcon className="w-6 h-6 mx-4 text-muted" />
       <input
         type="text"