feat: DR-7392 Add navigation menu for website/blog

apps/blog/src/app/(blog)/layout.tsx

@@ -1,23 +1,120 @@
-import { HomeLayout } from 'fumadocs-ui/layouts/home';
-import { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
-export function baseOptions(): BaseLayoutProps {
+import { Button } from "@prisma-docs/eclipse";
+import {
+  Logo,
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationWrapper,
+  Socials,
+} from "@prisma-docs/ui/components/navigation-menu";
+import { StarCount } from "@prisma-docs/ui/components/star-count";
+export function baseOptions() {
   return {
     nav: {
-      title: 'My App',
+      title: "My App",
     },
     links: [
       {
-        url: '/docs',
-        text: 'Docs',
+        text: "Products",
+        sub: [
+          {
+            text: "Postgres",
+            url: "/postgres",
+            desc: "Managed Postgres for global workloads",
+          },
+          {
+            text: "ORM",
+            url: "/orm",
+          },
+        ],
       },
       {
-        url: '/blog',
-        text: 'Blog',
+        url: "/pricing",
+        text: "Pricing",
+      },
+      {
+        text: "Resources",
+        sub: [
+          {
+            text: "MCP",
+            url: "/mcp",
+            desc: "Managed Postgres for global workloads",
+          },
+          {
+            text: "Tutorials",
+            url: "/learn",
+          },
+        ],
+      },
+      {
+        url: "/partners",
+        text: "Partners",
+      },
+      {
+        url: "/blog",
+        text: "Blog",
       },
     ],
   };
 }
 
-export default function Layout({ children, }: { children: React.ReactNode; }) {
-  return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <NavigationMenu>
+        <NavigationWrapper>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuLink className="shrink-0 w-full p-0">
+                {Logo}
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+            <div className="hidden md:contents">
+              {baseOptions().links.map((link: any) =>
+                link.url ? (
+                  <NavigationMenuItem key={link.url}>
+                    <NavigationMenuLink href={link.url}>
+                      {link.text}
+                    </NavigationMenuLink>
+                  </NavigationMenuItem>
+                ) : link.sub ? (
+                  <NavigationMenuItem key={link.text}>
+                    <NavigationMenuTrigger>{link.text}</NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                      {link.sub.map((sublink: any) => (
+                        <NavigationMenuLink
+                          key={sublink.url}
+                          href={sublink.url}
+                        >
+                          {sublink.text}
+                        </NavigationMenuLink>
+                      ))}
+                    </NavigationMenuContent>
+                  </NavigationMenuItem>
+                ) : null,
+              )}
+            </div>
+          </NavigationMenuList>
+          <NavigationMenuList>
+            <Socials />
+            <NavigationMenuItem className="ml-2 -mr-2 hidden sm:block">
+              <Button variant="default-stronger">Login</Button>
+            </NavigationMenuItem>
+            <NavigationMenuItem className="hidden sm:block">
+              <Button variant="ppg" className="whitespace-nowrap">
+                Get started
+              </Button>
+            </NavigationMenuItem>
+            <NavigationMenuItem className="flex md:hidden">
+              <i className="fa-regular fa-bars" />
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationWrapper>
+      </NavigationMenu>
+      {children}
+    </>
+  );
 }

apps/blog/src/app/layout.tsx

@@ -1,26 +1,32 @@
-import { RootProvider } from 'fumadocs-ui/provider/next';
-import './global.css';
-import { Inter, Barlow } from 'next/font/google';
+import { RootProvider } from "fumadocs-ui/provider/next";
+import "./global.css";
+import { Inter, Barlow } from "next/font/google";
+import Script from "next/script";
 
 const inter = Inter({
-  subsets: ['latin'],
-  variable: '--font-inter',
+  subsets: ["latin"],
+  variable: "--font-inter",
 });
 
 const barlow = Barlow({
-  subsets: ['latin'],
-  weight: ['400', '500', '600', '700'],
-  variable: '--font-barlow',
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-barlow",
 });
 
-export default function Layout({ children }: LayoutProps<'/'>) {
+export default function Layout({ children }: LayoutProps<"/">) {
   return (
     <html
       lang="en"
       className={`${inter.variable} ${barlow.variable}`}
       suppressHydrationWarning
     >
-      <head></head>
+      <head>
+        <Script
+          src="https://kit.fontawesome.com/6916e9db27.js"
+          crossOrigin="anonymous"
+        ></Script>
+      </head>
       <body className="flex flex-col min-h-screen">
         <RootProvider>{children}</RootProvider>
       </body>

packages/eclipse/src/components/button.tsx

@@ -2,15 +2,15 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/cn";
 
-const buttonVariants = cva("border", {
+const buttonVariants = cva("", {
   variants: {
     variant: {
       ppg: "bg-background-ppg-reverse text-foreground-ppg-reverse hover:bg-background-ppg-reverse-strong",
       orm: "bg-background-orm-reverse text-foreground-orm-reverse hover:bg-background-orm-reverse-strong",
       default:
-        "bg-background-default border-stroke-neutral text-foreground-neutral",
+        "bg-background-default border border-stroke-neutral text-foreground-neutral",
       "default-stronger":
-        "bg-background-neutral border-stroke-neutral text-foreground-neutral hover:bg-background-neutral-strong",
+        "bg-background-neutral text-foreground-neutral hover:bg-background-neutral-strong",
       "default-weaker": "bg-background-neutral text-foreground-neutral-weaker",
       error:
         "bg-background-error-reverse text-foreground-error-reverse hover:bg-backΩground-error-reverse-strong focus-visible:ring-stroke-error",

packages/eclipse/src/styles/globals.css

@@ -3,6 +3,13 @@
 @source "../components/**/*.tsx";
 @source "../components/ui/**/*.tsx";
 
+@font-face {
+    font-family: "Monaspace Neon Var";
+    src:
+        url("../static/fonts/monaspace_neon_var.woff") format("woff"),
+        url("../static/fonts/monaspace_neon_var.woff2") format("woff2");
+}
+
 @theme {
     /* Box Shadow */
     --shadow-drop-low: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
@@ -75,7 +82,7 @@
     --font-family-display: var(--font-mona-sans), Inter, sans-serif;
     --font-family-sans-display: Inter, sans-serif;
     --font-family-sans: Inter, system-ui, sans-serif;
-    --font-family-mono: Jetbrains Mono, monospace;
+    --font-family-mono: Monaspace Neon Var;
 
     /* Tailwind Font Family Mappings */
     --font-display: var(--font-mona-sans), Inter, sans-serif;

packages/eclipse/src/tokens/index.ts

@@ -235,7 +235,7 @@ export const typography = {
   fontFamily: {
     "sans-display": "Inter",
     sans: "Inter",
-    monospace: "Jetbrains Mono",
+    monospace: "Monaspace Neon Var",
   },
   fontSize: {
     "2xs": 11,