✨ feat (finance): Created new landing page with updated branding

Author: aryanprince

apps/finance/src/app/page.tsx

@@ -1,5 +1,8 @@
 import { unstable_noStore as noStore } from "next/cache";
+import Image from "next/image";
 import Link from "next/link";
+import { Footer } from "~/components/footer";
+import { buttonVariants } from "~/components/ui/button";
 
 import { getServerAuthSession } from "~/server/auth";
 import { api } from "~/trpc/server";
@@ -10,53 +13,54 @@ export default async function Home() {
   const session = await getServerAuthSession();
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-        <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
-          Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
-        </h1>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-            href="https://create.t3.gg/en/usage/first-steps"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">First Steps →</h3>
-            <div className="text-lg">
-              Just the basics - Everything you need to know to set up your
-              database and authentication.
-            </div>
-          </Link>
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-            href="https://create.t3.gg/en/introduction"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">Documentation →</h3>
-            <div className="text-lg">
-              Learn more about Create T3 App, the libraries it uses, and how to
-              deploy it.
-            </div>
-          </Link>
+    <main className="flex min-h-screen flex-col items-center justify-center bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-zinc-200 via-emerald-200 to-zinc-200 dark:from-zinc-950 dark:via-emerald-950 dark:to-zinc-950">
+      {/* NAVBAR */}
+      <div className="flex w-full items-center justify-between px-4 py-3">
+        <div className="flex items-center gap-2">
+          <Image
+            src="/logo.png"
+            width={32}
+            height={32}
+            alt="Finance Portal Logo"
+          />
+          <h1 className="text-xl font-semibold">Finance Portal</h1>
         </div>
-        <div className="flex flex-col items-center gap-2">
-          <p className="text-2xl text-white">
-            {hello ? hello.greeting : "Loading tRPC query..."}
-          </p>
+        <Link href="/signin" className={`${buttonVariants()}`}>
+          Sign in
+        </Link>
+      </div>
 
-          <div className="flex flex-col items-center justify-center gap-4">
-            <p className="text-center text-2xl text-white">
-              {session && <span>Logged in as {session.user?.name}</span>}
-            </p>
+      {/* MAIN CONTENT */}
+      <div className="container flex flex-1 flex-col items-center justify-center gap-12 px-4 py-16">
+        <div className="flex flex-col items-center">
+          <h1 className="text-5xl font-bold tracking-tight text-foreground">
+            Welcome to Finance Portal
+          </h1>
+          <p className="mt-4 max-w-lg text-balance text-center text-lg text-foreground">
+            Manage your student finances in one place. Pay your tuition and view
+            any library fines from here.
+          </p>
+          <div className="mt-8 flex gap-4">
+            <Link href={"/signin"} className={buttonVariants()}>
+              Sign up
+            </Link>
             <Link
-              href={session ? "/api/auth/signout" : "/api/auth/signin"}
-              className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
+              href={"/"}
+              className={buttonVariants({
+                variant: "outline",
+                className: "border-emerald-500 bg-transparent",
+              })}
             >
-              {session ? "Sign out" : "Sign in"}
+              Learn more
             </Link>
           </div>
         </div>
       </div>
+
+      {/* FOOTER */}
+      <div className={`mb-4`}>
+        <Footer />
+      </div>
     </main>
   );
 }

apps/finance/src/components/footer.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+export function Footer() {
+  return (
+    <div className="flex w-full flex-col items-start justify-center gap-2 text-sm md:flex-row md:gap-1">
+      <p>
+        Built by{" "}
+        <Link
+          href="https://github.com/aryanprince"
+          className="underline underline-offset-4"
+        >
+          @aryanprince
+        </Link>
+        .
+      </p>
+      <p>Using Next.js, React, Tailwind CSS, TypeScript. Hosted on Vercel.</p>
+    </div>
+  );
+}