feat: navbar & features

noodle-run · May 28, 2024 · 063dfab · 063dfab
1 parent ed9d016
commit 063dfab
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 132 deletions.
diff --git a/src/app/(marketing)/_components/navbar.tsx b/src/app/(marketing)/_components/navbar.tsx
@@ -4,15 +4,9 @@ import { forwardRef, useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import {
-  BotIcon,
-  ChevronRightIcon,
-  Edit2Icon,
-  FlaskRoundIcon,
-  ListChecksIcon,
-} from 'lucide-react';
+import { ChevronRightIcon } from 'lucide-react';
 
-import { constants } from '@/constants';
+import { constants, features } from '@/constants';
 import { cn } from '@/lib/utils';
 import { Button } from '@/primitives/button';
 import {
@@ -25,50 +19,14 @@ import {
   navigationMenuTriggerStyle,
 } from '@/primitives/navigation-menu';
 
-interface ListItemProps {
-  title: string;
-  href: string;
-  description: string;
-  icon: React.ReactNode;
-}
-
-// TODO: put in the correct links
-
-const features: ListItemProps[] = [
-  {
-    title: 'Note Taking',
-    icon: <Edit2Icon size={18} />,
-    href: '/docs/primitives/alert-dialog',
-    description: 'Write your notes and we will take care of the rest.',
-  },
-  {
-    title: 'Noodle AI',
-    icon: <BotIcon size={18} />,
-    href: '/docs/primitives/hover-card',
-    description: 'Your very own assistant helping you stay on top of studies.',
-  },
-  {
-    title: 'Task Management',
-    icon: <ListChecksIcon size={18} />,
-    href: '/docs/primitives/progress',
-    description: 'Never miss a thing that you have to do for your modules.',
-  },
-  {
-    title: 'Flashcards & Quizzes',
-    icon: <FlaskRoundIcon size={18} />,
-    href: '/docs/primitives/progress',
-    description: 'Auto generated flashcards and quizzes from your notes.',
-  },
-];
-
 const ListItem = forwardRef<
-  React.ElementRef<'a'>,
-  React.ComponentPropsWithoutRef<'a'> & { icon: React.ReactNode }
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'> & { icon: React.ReactNode }
 >(({ className, title, children, icon, ...props }, ref) => {
   return (
     <li>
       <NavigationMenuLink asChild>
-        <a
+        <div
           ref={ref}
           className={cn(
             'z-50 flex select-none items-start gap-3 rounded-md border border-transparent px-4 py-3 leading-none no-underline outline-none transition-colors hover:border-gray-element-border hover:bg-gray-element hover:text-gray-foreground focus:border-gray-element-border focus:bg-gray-element focus:text-gray-foreground',
@@ -83,7 +41,7 @@ const ListItem = forwardRef<
             </div>
             <p className="line-clamp-2 text-xs leading-normal">{children}</p>
           </div>
-        </a>
+        </div>
       </NavigationMenuLink>
     </li>
   );
@@ -129,10 +87,9 @@ export const Navbar = () => {
                 <div className="absolute right-36 top-1/2 z-30 size-20 -translate-y-1/2 rounded-full bg-pink opacity-50 blur-3xl" />
                 <ul className="grid gap-3 p-3 md:w-[450px] lg:w-[550px] lg:grid-cols-[1fr_0.85fr]">
                   <div className="flex flex-col gap-3">
-                    {features.map((feature) => (
+                    {features(18).map((feature) => (
                       <ListItem
                         key={feature.title}
-                        href={feature.href}
                         title={feature.title}
                         icon={feature.icon}
                       >
@@ -160,45 +117,37 @@ export const Navbar = () => {
                           work.
                         </p>
 
-                        <Link
-                          href="/docs"
+                        <a
+                          href={constants.github_repo}
+                          target="_blank"
+                          rel="noreferrer noopener"
                           className="mt-6 flex items-center gap-2 py-2 text-sm transition-colors hover:text-gray-foreground"
                         >
-                          Explore all features <ChevronRightIcon size={13} />
-                        </Link>
+                          Contribute <ChevronRightIcon size={13} />
+                        </a>
                       </a>
                     </NavigationMenuLink>
                   </li>
                 </ul>
               </NavigationMenuContent>
             </NavigationMenuItem>
             <NavigationMenuItem>
-              <Link href="/docs" legacyBehavior passHref>
-                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                  Pricing
-                </NavigationMenuLink>
-              </Link>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <Link href="/docs" legacyBehavior passHref>
+              <Link href="/blog" legacyBehavior passHref>
                 <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                   Blog
                 </NavigationMenuLink>
               </Link>
             </NavigationMenuItem>
             <NavigationMenuItem>
-              <Link href="/docs" legacyBehavior passHref>
-                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                  Changelog
-                </NavigationMenuLink>
-              </Link>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <Link href="/docs" legacyBehavior passHref>
+              <a
+                href={constants.github_repo}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
                 <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                  Contact
+                  Contribute
                 </NavigationMenuLink>
-              </Link>
+              </a>
             </NavigationMenuItem>
           </NavigationMenuList>
         </NavigationMenu>

diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
@@ -1,45 +1,11 @@
 import Link from 'next/link';
-import {
-  ChevronRightIcon,
-  ClipboardCheckIcon,
-  DiamondIcon,
-  Edit3Icon,
-  ListChecksIcon,
-  StarIcon,
-} from 'lucide-react';
+import { ChevronRightIcon, StarIcon } from 'lucide-react';
 
-import { constants } from '@/constants';
+import { constants, features } from '@/constants';
 import { Button } from '@/primitives/button';
 
 import Image from 'next/image';
 
-const shortFeaturesIconSize = 30;
-
-const shortFeatures = [
-  {
-    icon: <Edit3Icon size={shortFeaturesIconSize} />,
-    title: 'Note Taking',
-    description: 'Write your study notes and let Noodle take care of the rest.',
-  },
-  {
-    icon: <DiamondIcon size={shortFeaturesIconSize} />,
-    title: 'Flashcards',
-    description:
-      'Create flashcards with reminders or let AI auto-suggest them for you.',
-  },
-  {
-    icon: <ListChecksIcon size={shortFeaturesIconSize} />,
-    title: 'Task Management',
-    description:
-      'Create module specific tasks to keep on track with what you need to do.',
-  },
-  {
-    icon: <ClipboardCheckIcon size={shortFeaturesIconSize} />,
-    title: 'Grade Tracking',
-    description: 'Find out what you need to achieve to stay in progression.',
-  },
-];
-
 /**
  * The marketing home page.
  * @returns A react component representing the marketing home page.
@@ -77,24 +43,15 @@ export default function Home() {
         alt="Dashboard Preview"
         className="my-12 rounded-lg shadow-[0_50px_200px_75px] shadow-pink/10"
       />
-      <section className="my-36 grid grid-cols-4 gap-12">
-        {shortFeatures.map((feature) => (
+      <section id="features" className="my-36 grid grid-cols-4 gap-12">
+        {features(30).map((feature) => (
           <div key={feature.title} className="flex flex-col gap-2">
             {feature.icon}
             <h3 className="pt-2 text-xl font-medium">{feature.title}</h3>
             <p className="text-foreground-muted">{feature.description}</p>
           </div>
         ))}
       </section>
-      <section className="flex flex-col items-center gap-6">
-        <h2 className="max-w-[20ch] text-balance bg-gradient-to-b from-foreground to-gray-foreground-muted bg-clip-text text-center text-6xl font-extrabold leading-tight text-transparent">
-          One Platform to Rule Them All
-        </h2>
-        <p className="max-w-[45ch] text-pretty text-center text-lg text-foreground-muted [&>strong]:font-medium [&>strong]:text-foreground">
-          A one of a kind platform, combining all the necessary productivity
-          tools a student needs to stay on top of their work.
-        </p>
-      </section>
     </main>
   );
 }
diff --git a/src/constants.ts b/src/constants.ts
diff --git a/src/constants.tsx b/src/constants.tsx
@@ -0,0 +1,44 @@
+import {
+  ClipboardCheckIcon,
+  DiamondIcon,
+  Edit3Icon,
+  ListChecksIcon,
+} from 'lucide-react';
+
+export const constants = {
+  name: 'Noodle - Rethinking Student Productivity',
+  shortName: 'Noodle',
+  tagline: 'Rethinking Student Productivity',
+  description:
+    'Noodle is a productivity platform including many tools students need to be productive and stay on top of their work such as note taking, task management, and more.',
+  twitter_handle: '@noodle_run',
+  github_repo: 'https://github.com/noodle-run/noodle',
+  domain: 'noodle.run',
+  discord: 'https://discord.gg/ewKmQd8kYm',
+  twitter: 'https://x.com/noodle_run',
+};
+
+export const features = (iconSize: number) => [
+  {
+    icon: <Edit3Icon size={iconSize} />,
+    title: 'Note Taking',
+    description: 'Write your study notes and let Noodle take care of the rest.',
+  },
+  {
+    icon: <DiamondIcon size={iconSize} />,
+    title: 'Flashcards',
+    description:
+      'Create flashcards with reminders or let AI auto-suggest them for you.',
+  },
+  {
+    icon: <ListChecksIcon size={iconSize} />,
+    title: 'Task Management',
+    description:
+      'Create module specific tasks to keep on track with what you need to do.',
+  },
+  {
+    icon: <ClipboardCheckIcon size={iconSize} />,
+    title: 'Grade Tracking',
+    description: 'Find out what you need to achieve to stay in progression.',
+  },
+];
diff --git a/src/primitives/navigation-menu.tsx b/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-3 py-2 text-sm text-foreground transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50',
+  'group inline-flex w-max items-center justify-center rounded-md px-3 py-2 text-sm text-foreground transition-colors hover:bg-white/5 focus:outline-none disabled:pointer-events-none disabled:opacity-50',
 );
 
 const NavigationMenuTrigger = React.forwardRef<