feat: responsiveness

README.md

@@ -4,11 +4,10 @@
 
 ## Todo for `next` branch to be merged into `main`
 
-- [ ] Landing page.
+- [x] Landing page.
 - [x] Early access page.
 - [ ] Blog page.
 - [ ] Write a blog post about Noodle's resurrection.
-- [ ] Changelog page.
 - [ ] Terms and conditions page.
 - [ ] Privacy policy page.
 - [ ] Cookie policy page.

bun-test.d.ts

@@ -2,7 +2,7 @@ import { type TestingLibraryMatchers } from '@testing-library/jest-dom/matchers'
 import { type expect } from 'bun:test';
 
 declare module 'bun:test' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface Matchers<T = unknown>
     extends TestingLibraryMatchers<
       ReturnType<typeof expect.stringContaining>,

eslint.config.js

@@ -72,8 +72,7 @@ export default tseslint.config(
     },
     languageOptions: {
       parserOptions: {
-        project: true,
-        tsconfigRootDir: import.meta.dirname,
+        projectService: true,
       },
     },
     settings: {

package.json

@@ -142,7 +142,7 @@
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^7.10.0"
+    "typescript-eslint": "^8.0.0-alpha.20"
   },
   "trustedDependencies": [
     "@clerk/shared",

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

@@ -2,72 +2,81 @@ import { constants } from '@/constants';
 import Image from 'next/image';
 import Link from 'next/link';
 
+const footerLinkSections = [
+  {
+    section: 'GENERAL',
+    links: [
+      {
+        title: 'Blog',
+        url: '/blog',
+      },
+      {
+        title: 'Contribute',
+        url: constants.github_repo,
+      },
+    ],
+  },
+  {
+    section: 'SOCIAL',
+    links: [
+      {
+        title: 'Twitter',
+        url: constants.twitter,
+      },
+      {
+        title: 'Discord',
+        url: constants.discord,
+      },
+    ],
+  },
+  {
+    section: 'LEGAL',
+    links: [
+      {
+        title: 'Terms of Service',
+        url: '/tos',
+      },
+      {
+        title: 'Privacy Policy',
+        url: '/privacy',
+      },
+    ],
+  },
+];
+
 export const Footer = () => {
   return (
-    <footer className="border-t border-gray-element-hover py-16">
-      <div className="container flex justify-between">
-        <div className="space-y-4">
+    <footer className="border-t border-gray-element py-12 lg:py-16">
+      <div className="container flex flex-col justify-between md:flex-row">
+        <div className="order-2 space-y-4 md:order-1">
           <Link href="/" className="flex items-center gap-3">
-            <Image src="/logo.svg" width={35} height={35} alt="Noodle Logo" />
+            <Image src="/logo.svg" width={24} height={24} alt="Noodle Logo" />
             <span>Noodle</span>
           </Link>
           <p className="text-sm text-foreground-muted">
             &copy; {new Date().getFullYear()} NOODLE RUN LTD. All Rights
             Reserved.
           </p>
         </div>
-        <div className="grid grid-cols-3 gap-12">
-          <div className="text-sm">
-            <h3 className="pb-4 text-foreground-muted">GENERAL</h3>
-            <ul className="flex flex-col gap-2">
-              <li>
-                <Link href="/blog">Blog</Link>
-              </li>
-              <li>
-                <a
-                  href={constants.github_repo}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  Contribute
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="text-sm">
-            <h3 className="pb-4 text-foreground-muted">SOCIAL</h3>
-            <ul className="flex flex-col gap-2">
-              <li>
-                <a
-                  href={constants.twitter}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  X/Twitter
-                </a>
-              </li>
-              <li>
-                <a
-                  href={constants.discord}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  Discord
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="text-sm">
-            <h3 className="pb-4 text-foreground-muted">MORE</h3>
-            <ul className="flex flex-col gap-2">
-              <li>
-                <Link href="/tos">Terms of Service</Link>
-              </li>
-              <li>
-                <Link href="/privacy">Privacy Policy</Link>
-              </li>
-            </ul>
-          </div>
+        <div className="order-1 mb-10 grid grid-cols-3 gap-0 md:order-2 md:mb-0 md:gap-12">
+          {footerLinkSections.map(({ section, links }) => (
+            <div className="text-sm" key={section}>
+              <h3 className="pb-4 text-foreground-muted">{section}</h3>
+              <ul className="flex flex-col gap-2">
+                {links.map(({ title, url }) => (
+                  <li key={title}>
+                    {url.startsWith('/') ? (
+                      <Link href={url}>{title}</Link>
+                    ) : (
+                      <a href={url} target="_blank" rel="noreferrer noopener">
+                        {title}
+                      </a>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
         </div>
       </div>
     </footer>

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

@@ -81,7 +81,7 @@ export const Navbar = () => {
           <span>Noodle</span>
         </Link>
 
-        <NavigationMenu className="hidden lg:block">
+        <NavigationMenu className="hidden md:block">
           <NavigationMenuList>
             <NavigationMenuItem>
               <NavigationMenuTrigger>Features</NavigationMenuTrigger>
@@ -162,7 +162,7 @@ export const Navbar = () => {
             </NavigationMenuItem>
           </NavigationMenuList>
         </NavigationMenu>
-        <div className="flex items-center gap-4">
+        <div className="hidden items-center gap-4 md:flex">
           <Button size="sm" asChild>
             <Link href="/sign-in">
               Dashboard <ChevronRightIcon size={16} />

src/app/(marketing)/early-access/_forms/join.tsx

@@ -66,7 +66,7 @@ export const JoinEarlyAccessForm = () => {
         onSubmit={form.handleSubmit(onSubmit)}
         className="mt-6 flex max-w-[500px] flex-col gap-6"
       >
-        <div className="flex w-full gap-6">
+        <div className="flex flex-col md:flex-row w-full gap-6">
           <div className="w-full space-y-2">
             <FormField
               control={form.control}
@@ -185,7 +185,7 @@ export const JoinEarlyAccessForm = () => {
             !form.getValues('agreement')
           }
         >
-          Join Early Access
+          {isPending ? 'Joining...' : 'Join early access'}
         </Button>
       </form>
     </Form>

src/app/(marketing)/early-access/page.tsx

@@ -9,14 +9,17 @@ export const metadata: Metadata = constructMetadata({
 
 export default function EarlyAccessPage() {
   return (
-    <main className="flex flex-col items-center justify-center gap-6 pt-24">
-      <h1 className="text-balance bg-gradient-to-b from-foreground to-gray-foreground-muted bg-clip-text text-center text-7xl font-extrabold leading-none text-transparent">
-        Join us on our journey to improve student productivity.
+    <main className="flex flex-col items-center justify-center gap-6 py-12 md:py-16 lg:py-24">
+      <h1 className="max-w-[20ch] hidden sm:block text-balance bg-gradient-to-b from-foreground to-gray-foreground-muted bg-clip-text text-center text-5xl font-extrabold leading-none text-transparent md:text-6xl lg:text-7xl">
+        Join us on our journey to improve student productivity
+      </h1>
+      <h1 className="block sm:hidden max-w-[20ch] text-balance bg-gradient-to-b from-foreground to-gray-foreground-muted bg-clip-text text-center text-5xl font-extrabold leading-none text-transparent md:text-6xl lg:text-7xl">
+        Join us on our journey
       </h1>
       <p className="max-w-prose text-balance text-center text-lg text-foreground-muted [&>strong]:font-medium [&>strong]:text-foreground">
-        Signing up to our <strong>early access list</strong> gets you on a list
-        that will be the <strong>first to know</strong> about updates and
-        getting access to the platform <strong>before the wider public</strong>.
+        Sign up to our <strong>early access list</strong> and be the{' '}
+        <strong>first to get</strong> updates and access to the platform{' '}
+        <strong>before the wider public</strong>.
       </p>
       <JoinEarlyAccessForm />
     </main>

src/app/(marketing)/page.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { ChevronRightIcon, StarIcon } from 'lucide-react';
 
-import { constants, features } from '@/constants';
+import { constants } from '@/constants';
 import { Button } from '@/primitives/button';
 
 import Image from 'next/image';
@@ -12,57 +12,39 @@ import Image from 'next/image';
  */
 export default function Home() {
   return (
-    <main className="flex flex-col items-center justify-center pt-16 lg:pt-24">
-      <Button
-        variant="outline"
-        asChild
-        className="mb-6 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] text-balance bg-gradient-to-b from-foreground to-gray-foreground-muted bg-clip-text text-center text-5xl font-extrabold leading-none text-transparent md:text-6xl lg:text-8xl">
-        {constants.tagline}
-      </h1>
-      <p className="mt-6 max-w-[50ch] text-pretty text-center text-foreground-muted lg:text-lg [&>strong]:font-medium [&>strong]:text-foreground">
-        <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-9 rounded-full lg:mt-6" size="lg" asChild>
-        <Link href="/early-access">
-          Get early access <ChevronRightIcon size={20} strokeWidth={2.5} />
-        </Link>
-      </Button>
+    <main className="flex flex-col items-center justify-center py-12 md:py-16 lg:py-24">
+      <div className="flex flex-col items-center gap-6">
+        <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] text-balance bg-gradient-to-b from-foreground to-gray-foreground-muted bg-clip-text text-center text-5xl font-extrabold leading-none text-transparent md:text-6xl lg:text-8xl">
+          {constants.tagline}
+        </h1>
+        <p className="max-w-[50ch] text-pretty text-center text-foreground-muted lg:text-lg [&>strong]:font-medium [&>strong]:text-foreground">
+          <strong>open-source</strong> student productivity platform made to{' '}
+          <strong>streamline</strong> the process students conduct their studies
+          and organize it.
+        </p>
+        <Button className="rounded-full" size="lg" asChild>
+          <Link href="/early-access">
+            Get early access <ChevronRightIcon size={20} strokeWidth={2.5} />
+          </Link>
+        </Button>
+      </div>
       <Image
         src="/_static/dark-dashboard-preview.jpg"
         width={1920}
         height={1080}
         alt="Dashboard Preview"
-        className="mb-36 mt-24 rounded-lg shadow-[0_50px_200px_75px] shadow-pink/10"
+        className="mt-12 rounded-lg shadow-[0_50px_200px_75px] shadow-pink/10 md:mt-16 lg:mt-24"
       />
-      <section
-        id="features"
-        className="mb-24 grid grid-cols-1 gap-12 md:grid-cols-2 lg:mb-36 lg:grid-cols-4"
-      >
-        {features(30).map((feature) => (
-          <div key={feature.title} className="flex flex-col gap-2">
-            <div className="[&>svg]:w-6 md:[&>svg]:w-7 lg:[&>svg]:w-8">
-              {feature.icon}
-            </div>
-            <h3 className="pt-2 font-medium lg:text-xl">{feature.title}</h3>
-            <p className="text-pretty text-foreground-muted">
-              {feature.description}
-            </p>
-          </div>
-        ))}
-      </section>
     </main>
   );
 }

src/app/api/trpc/[trpc]/route.ts

@@ -19,10 +19,11 @@ const handler = (req: NextRequest) =>
     router: appRouter,
     createContext: () => createContext(req),
     onError: ({ path, error }) => {
-      env.NODE_ENV === 'development' &&
+      if (env.NODE_ENV === 'development') {
         console.error(
           `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`,
         );
+      }
     },
   });