feat: button primitive & usage on home page

package.json

@@ -47,6 +47,7 @@
   "dependencies": {
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-slot": "^1.0.2",
     "@t3-oss/env-nextjs": "^0.10.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

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

@@ -17,6 +17,7 @@ import {
 
 import { constants } from '@/constants';
 import { cn } from '@/lib/utils';
+import { Button } from '@/primitives/button';
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -213,7 +214,13 @@ export const Navbar = () => {
             </NavigationMenuItem>
           </NavigationMenuList>
         </NavigationMenu>
-        <div>{/* TODO: add log in / sign up buttons */}</div>
+        <div className="flex items-center gap-4">
+          <Button size="sm" asChild>
+            <Link href="/sign-in">
+              Dashboard <ChevronRightIcon size={16} />
+            </Link>
+          </Button>
+        </div>
       </div>
     </nav>
   );

src/app/(marketing)/page.tsx

@@ -1,6 +1,9 @@
-import { StarIcon } from 'lucide-react';
+import Link from 'next/link';
+
+import { ChevronRightIcon, StarIcon } from 'lucide-react';
 
 import { constants } from '@/constants';
+import { Button } from '@/primitives/button';
 
 /**
  * The marketing home page.
@@ -10,21 +13,29 @@ import { constants } from '@/constants';
 export default function Home() {
   return (
     <main className="flex flex-col items-center justify-center gap-6 pt-24">
-      <a
-        href="https://github.com"
-        className="flex items-center gap-3 rounded-full border bg-gray-subtle px-4 py-2 text-sm text-foreground-muted"
-      >
-        Star us on GitHub{' '}
-        <StarIcon className="fill-amber-500 stroke-amber-500" size={16} />
-      </a>
-      <h1 className="bg-gradient-to-b from-foreground to-gray-solid-hover bg-clip-text text-center text-8xl font-extrabold leading-none text-transparent">
+      <Button variant="outline" asChild className="rounded-full font-normal">
+        <a
+          href={constants.github_repo}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          Star us on GitHub{' '}
+          <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">
         {constants.tagline}
       </h1>
       <p className="max-w-[50ch] text-center text-lg text-foreground-muted [&>strong]:font-medium [&>strong]:text-foreground">
         Noodle is an <strong>open-source</strong> student productivity platform
         made to <strong>streamline</strong> the process students conduct their
         studies and organize it.
       </p>
+      <Button className="mt-6 rounded-full" size="lg" asChild>
+        <Link href="/early-access">
+          Get early access <ChevronRightIcon size={20} strokeWidth={2.5} />
+        </Link>
+      </Button>
     </main>
   );
 }

src/constants.ts

@@ -5,4 +5,5 @@ export const constants = {
   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',
 };

src/primitives/button.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import type { VariantProps } from 'class-variance-authority';
+
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-subtle-border focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-gradient-to-br from-salmon to-pink text-black hover:opacity-90',
+        destructive: 'bg-red text-white hover:bg-red-solid-hover',
+        outline:
+          'border border-gray-subtle-border bg-background text-foreground-muted hover:bg-gray-subtle hover:text-foreground',
+        ghost: 'hover:bg-gray-element',
+        link: 'relative bg-gradient-to-br from-salmon to-pink bg-clip-text text-transparent before:absolute before:bottom-0 before:h-px before:w-[calc(100%-24px)] before:rounded-full before:bg-gradient-to-br before:from-salmon before:to-pink hover:opacity-90',
+      },
+      size: {
+        default: 'px-4 py-2',
+        sm: 'px-3 py-1.5',
+        lg: 'px-4 py-2 text-base',
+        icon: 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

tailwind.config.ts

@@ -6,7 +6,7 @@ import formsPlugin from '@tailwindcss/forms';
 import typographyPlugin from '@tailwindcss/typography';
 import tailwindAnimate from 'tailwindcss-animate';
 
-type Scale = 'gray' | 'pink' | 'salmon' | 'indigo';
+type Scale = 'gray' | 'pink' | 'salmon' | 'indigo' | 'red';
 
 const generateColorScale = (scale: Scale) => ({
   DEFAULT: `hsl(var(--${scale}-9))`,
@@ -56,6 +56,7 @@ const config: Config = {
         pink: generateColorScale('pink'),
         salmon: generateColorScale('salmon'),
         indigo: generateColorScale('indigo'),
+        red: generateColorScale('red'),
       },
       fontFamily: {
         sans: ['var(--font-geist-sans)'],