feat: better colours, light mode support & db schema

drizzle/0000_funny_johnny_blaze.sql

@@ -0,0 +1,10 @@
+CREATE TABLE IF NOT EXISTS "early_access" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"name" text NOT NULL,
+	"email" text NOT NULL,
+	"reason" text NOT NULL,
+	"approved" boolean DEFAULT false,
+	"created_at" timestamp (3) DEFAULT now(),
+	"invitation_sent_at" timestamp (3),
+	CONSTRAINT "early_access_email_unique" UNIQUE("email")
+);

drizzle/meta/0000_snapshot.json

@@ -1,5 +1,5 @@
 {
-  "id": "e593e999-76e0-41ff-bbf3-873b4eafe935",
+  "id": "b304d26a-1927-40c9-9067-57935d6d9ab3",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "version": "6",
   "dialect": "postgresql",
@@ -11,8 +11,8 @@
         "id": {
           "name": "id",
           "type": "uuid",
-          "primaryKey": false,
-          "notNull": false,
+          "primaryKey": true,
+          "notNull": true,
           "default": "gen_random_uuid()"
         },
         "name": {
@@ -42,22 +42,28 @@
         },
         "created_at": {
           "name": "created_at",
-          "type": "timestamp",
+          "type": "timestamp (3)",
           "primaryKey": false,
           "notNull": false,
           "default": "now()"
         },
         "invitation_sent_at": {
           "name": "invitation_sent_at",
-          "type": "timestamp",
+          "type": "timestamp (3)",
           "primaryKey": false,
           "notNull": false
         }
       },
       "indexes": {},
       "foreignKeys": {},
       "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
+      "uniqueConstraints": {
+        "early_access_email_unique": {
+          "name": "early_access_email_unique",
+          "nullsNotDistinct": false,
+          "columns": ["email"]
+        }
+      }
     }
   },
   "enums": {},

drizzle/meta/_journal.json

@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "6",
-      "when": 1716662445965,
-      "tag": "0000_ambiguous_silvermane",
+      "when": 1716742272276,
+      "tag": "0000_funny_johnny_blaze",
       "breakpoints": true
     }
   ]

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

@@ -71,7 +71,7 @@ const ListItem = forwardRef<
         <a
           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 hover:bg-gray-element/30 hover:text-gray-foreground focus:border-gray-element focus:bg-gray-element/30 focus:text-gray-foreground',
+            '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',
             className,
           )}
           {...props}
@@ -143,7 +143,7 @@ export const Navbar = () => {
                   <li>
                     <NavigationMenuLink asChild>
                       <a
-                        className="flex size-full select-none flex-col justify-end rounded-md border border-gray-element bg-[#191919]/50 px-6 py-3 no-underline outline-none backdrop-blur-lg transition-colors hover:bg-[#191919]/75 focus:shadow-md"
+                        className="flex size-full select-none flex-col justify-end rounded-md border border-gray-element-border bg-gray-element/50 px-6 py-3 no-underline outline-none backdrop-blur-lg transition-colors hover:bg-gray-element/75 focus:shadow-md"
                         href="/"
                       >
                         <Image

src/app/(marketing)/page.tsx

@@ -4,7 +4,7 @@ import { ChevronRightIcon, StarIcon } from 'lucide-react';
 import { constants } from '@/constants';
 import { Button } from '@/primitives/button';
 
-import { HomePreview } from './_components/home-preview';
+import Image from 'next/image';
 
 /**
  * The marketing home page.
@@ -23,7 +23,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-8xl font-extrabold leading-none text-transparent">
+      <h1 className="max-w-[20ch] bg-gradient-to-b from-foreground to-gray-foreground-muted 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,7 +36,13 @@ export default function Home() {
           Get early access <ChevronRightIcon size={20} strokeWidth={2.5} />
         </Link>
       </Button>
-      <HomePreview />
+      <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"
+      />
     </main>
   );
 }

src/app/globals.css

@@ -1,5 +1,4 @@
-:root,
-html.light {
+:root {
   --gray-1: 0 0% 99%;
   --gray-2: 0 0% 98%;
   --gray-3: 0 0% 94%;
@@ -66,8 +65,7 @@ html.light {
   --red-12: 8, 50%, 24%;
 }
 
-:root,
-html.dark {
+:root.dark {
   --gray-1: 0 0% 7%;
   --gray-2: 0 0% 10%;
   --gray-3: 0 0% 13%;

src/db/schema/early-access.ts

@@ -2,16 +2,25 @@ import { boolean, pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core';
 import { createInsertSchema } from 'drizzle-zod';
 
 export const earlyAccessTable = pgTable('early_access', {
-  id: uuid('id').defaultRandom(),
+  id: uuid('id').primaryKey().defaultRandom(),
   name: text('name').notNull(),
-  email: text('email').notNull(),
+  email: text('email').notNull().unique(),
   reason: text('reason', { enum: ['student', 'project', 'both'] }).notNull(),
   approved: boolean('approved').default(false),
-  createdAt: timestamp('created_at', { mode: 'date' }).defaultNow(),
-  invitationSentAt: timestamp('invitation_sent_at', { mode: 'date' }),
+  createdAt: timestamp('created_at', {
+    mode: 'date',
+    precision: 3,
+  }).defaultNow(),
+  invitationSentAt: timestamp('invitation_sent_at', {
+    mode: 'date',
+    precision: 3,
+  }),
 });
 
-export const insertEarlyAccess = createInsertSchema(earlyAccessTable).omit({
-  id: true,
-  createdAt: true,
+export const insertEarlyAccessSchema = createInsertSchema(
+  earlyAccessTable,
+).pick({
+  email: true,
+  name: true,
+  reason: true,
 });

src/emails/templates/early-access-joined.tsx

@@ -4,15 +4,15 @@ import { emailBaseUrl } from '../utils';
 import { constants } from '@/constants';
 
 interface Props {
-  firstName: string;
+  name: string;
   email: string;
 }
 
-export default function EarlyAccessJoinedEmail({ firstName, email }: Props) {
+export default function EarlyAccessJoinedEmail({ name, email }: Props) {
   return (
     <BaseEmailLayout
-      title={`${firstName}, you have joined Noodle's early access list!`}
-      previewText={`Hey ${firstName}, this is to just let you know that you have joined Noodle's early access waiting list.`}
+      title={`${name}, you have joined Noodle's early access list!`}
+      previewText={`Hey ${name}, this is to just let you know that you have joined Noodle's early access waiting list.`}
       className="py-8"
     >
       <Img
@@ -25,12 +25,12 @@ export default function EarlyAccessJoinedEmail({ firstName, email }: Props) {
         You are on the list!
       </Heading>
       <Text className="my-0 pt-4">
-        Hey {firstName}, Ahmed here, founder and creator of Noodle.
+        Hey {name}, Ahmed here, founder and creator of Noodle.
       </Text>
       <Text>
-        I wanted to personally thank you for joining Noodle&apos;s early access
-        list. I am super excited to have you on board and can&apos;t wait for
-        you to start using Noodle.
+        I wanted to thank you for joining Noodle&apos;s early access list. I am
+        super excited to have you on board and can&apos;t wait for you to start
+        using Noodle.
       </Text>
       <Text>
         I am currently working hard to get Noodle ready for you and will be in

src/primitives/button.tsx

@@ -13,10 +13,10 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-gradient-to-br from-salmon to-pink text-black hover:opacity-90',
+          'bg-gradient-to-br from-salmon to-pink text-white hover:opacity-90 dark:text-black',
         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',
+          'border border-gray-subtle-border bg-gray-element text-foreground-muted hover:bg-gray-element-hover 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',
       },