feat: blur navbar on scroll & light/dark dashboard preview image

src/app/(marketing)/_components/home-preview.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
+
+/**
+ * This component renders the dashboard preview image that is used on the home
+ * marketing page, it will use the light or dark image depending on the theme.
+ *
+ * @returns A react component representing the dashboard preview image.
+ */
+export function HomePreview() {
+  const [mounted, setMounted] = useState(false);
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (mounted && resolvedTheme === 'light') {
+    return (
+      <>
+        <Image
+          src="/_static/light-dashboard-preview.jpg"
+          width={1920}
+          height={1080}
+          alt="Dashboard Preview"
+          className="my-12 rounded-lg shadow-[0_50px_200px_75px] shadow-pink/10"
+        />
+      </>
+    );
+  }
+
+  return (
+    <Image
+      src="/_static/dark-dashboard-preview.jpg"
+      width={1920}
+      height={1080}
+      alt="Dashboard Preview"
+      className="my-12 rounded-lg shadow-[0_50px_200px_75px] shadow-pink/10"
+    />
+  );
+}

src/app/(marketing)/_components/navbar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -10,9 +10,6 @@ import {
   Edit2Icon,
   FlaskRoundIcon,
   ListChecksIcon,
-  PaintbrushIcon,
-  RssIcon,
-  User2Icon,
 } from 'lucide-react';
 
 import { constants } from '@/constants';
@@ -64,28 +61,7 @@ const features: ListItemProps[] = [
   },
 ];
 
-const companyItems: ListItemProps[] = [
-  {
-    title: 'About Us',
-    icon: <User2Icon size={18} />,
-    href: '/docs/primitives/alert-dialog',
-    description: 'Learn more about the team behind Noodle.',
-  },
-  {
-    title: 'Blog',
-    icon: <RssIcon size={18} />,
-    href: '/docs/primitives/progress',
-    description: 'Read about the latest updates and features of Noodle.',
-  },
-  {
-    title: 'Design System',
-    icon: <PaintbrushIcon size={18} />,
-    href: '/docs/primitives/progress',
-    description: 'Learn about the design system we use to build Noodle.',
-  },
-];
-
-const ListItem = React.forwardRef<
+const ListItem = forwardRef<
   React.ElementRef<'a'>,
   React.ComponentPropsWithoutRef<'a'> & { icon: React.ReactNode }
 >(({ className, title, children, icon, ...props }, ref) => {
@@ -115,8 +91,30 @@ const ListItem = React.forwardRef<
 ListItem.displayName = 'ListItem';
 
 export const Navbar = () => {
+  const [scroll, setScroll] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 50) {
+        setScroll(true);
+      } else {
+        setScroll(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
-    <nav className="sticky inset-x-0 top-0 z-50 w-full border-b border-transparent pb-2 pt-6">
+    <nav
+      className={cn(
+        'sticky inset-x-0 top-0 z-50 w-full border-b border-transparent bg-transparent py-4 transition-colors duration-500',
+        scroll && 'border-gray-element bg-background/85 backdrop-blur-md',
+      )}
+    >
       <div className="container flex items-center justify-between transition-all">
         <Link href="/" className="flex items-center gap-3">
           <Image src="/logo.svg" width={35} height={35} alt="Noodle Logo" />
@@ -175,26 +173,16 @@ export const Navbar = () => {
               </NavigationMenuContent>
             </NavigationMenuItem>
             <NavigationMenuItem>
-              <NavigationMenuTrigger>Company</NavigationMenuTrigger>
-              <NavigationMenuContent>
-                <ul className="grid w-[200px] gap-2 p-2 md:w-[250] lg:w-[300px] ">
-                  {companyItems.map((item) => (
-                    <ListItem
-                      key={item.title}
-                      title={item.title}
-                      icon={item.icon}
-                      href={item.href}
-                    >
-                      {item.description}
-                    </ListItem>
-                  ))}
-                </ul>
-              </NavigationMenuContent>
+              <Link href="/docs" legacyBehavior passHref>
+                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                  Pricing
+                </NavigationMenuLink>
+              </Link>
             </NavigationMenuItem>
             <NavigationMenuItem>
               <Link href="/docs" legacyBehavior passHref>
                 <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                  Pricing
+                  Blog
                 </NavigationMenuLink>
               </Link>
             </NavigationMenuItem>

src/app/(marketing)/page.tsx

@@ -5,6 +5,8 @@ import { ChevronRightIcon, StarIcon } from 'lucide-react';
 import { constants } from '@/constants';
 import { Button } from '@/primitives/button';
 
+import { HomePreview } from './_components/home-preview';
+
 /**
  * The marketing home page.
  *
@@ -23,7 +25,7 @@ export default function Home() {
           <StarIcon className="fill-amber-500 stroke-amber-500" size={16} />
         </a>
       </Button>
-      <h1 className="max-w-[20ch] bg-gradient-to-b from-foreground to-gray-solid-hover bg-clip-text text-center text-7xl font-extrabold leading-none text-transparent">
+      <h1 className="max-w-[20ch] bg-gradient-to-b from-foreground to-gray-solid-hover bg-clip-text text-center text-8xl font-extrabold leading-none text-transparent">
         {constants.tagline}
       </h1>
       <p className="max-w-[50ch] text-center text-lg text-foreground-muted [&>strong]:font-medium [&>strong]:text-foreground">
@@ -36,6 +38,7 @@ export default function Home() {
           Get early access <ChevronRightIcon size={20} strokeWidth={2.5} />
         </Link>
       </Button>
+      <HomePreview />
     </main>
   );
 }

src/app/globals.css

@@ -1,5 +1,5 @@
 :root,
-.light {
+html.light {
   --gray-1: 0 0% 99%;
   --gray-2: 0 0% 98%;
   --gray-3: 0 0% 94%;
@@ -67,7 +67,7 @@
 }
 
 :root,
-.dark {
+html.dark {
   --gray-1: 0 0% 7%;
   --gray-2: 0 0% 10%;
   --gray-3: 0 0% 13%;

src/primitives/navigation-menu.tsx

@@ -44,7 +44,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm text-foreground-muted transition-colors hover:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50',
+  'group inline-flex h-10 w-max items-center justify-center rounded-md px-3 py-2 text-sm text-foreground transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50',
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -89,7 +89,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn('absolute left-0 top-full flex justify-center')}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        'relative mt-1 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-top overflow-hidden rounded-lg border border-gray-element bg-background/95 text-foreground-muted shadow-lg backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        'relative mt-1 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-top overflow-hidden rounded-lg border border-gray-element bg-background text-foreground-muted shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
         className,
       )}
       ref={ref}