Handle 'Get Started' Button

Author: ThomasCode92

src/app/(home)/page.tsx

@@ -1,5 +1,8 @@
+import { auth } from "@clerk/nextjs/server";
 import { Cloud, Shield, Users, Zap } from "lucide-react";
 import Link from "next/link";
+import { redirect } from "next/navigation";
+
 import { Button } from "~/components/ui/button";
 
 export default function HomePage() {
@@ -49,14 +52,23 @@ export default function HomePage() {
             documents from any device, anywhere in the world.
           </p>
 
-          <div className="pt-8">
+          <form
+            className="pt-8"
+            action={async () => {
+              "use server";
+              const session = await auth();
+              if (!session.userId) return redirect("/sign-in");
+              redirect("/drive");
+            }}
+          >
             <Button
               size="lg"
-              className="rounded-full bg-white px-8 py-6 text-lg font-semibold text-black transition-all duration-200 hover:scale-105 hover:bg-gray-100"
+              className="cursor-pointer rounded-full bg-white px-8 py-6 text-lg font-semibold text-black transition-all duration-200 hover:scale-105 hover:bg-gray-100"
+              type="submit"
             >
               Get Started
             </Button>
-          </div>
+          </form>
 
           <p className="pt-4 text-sm text-gray-400">
             Free 15GB storage • No credit card required

src/app/drive/page.tsx

@@ -0,0 +1,3 @@
+export default function DrivePage() {
+  return <div />;
+}

src/app/sign-in/page.tsx

@@ -0,0 +1,26 @@
+import { SignInButton } from "@clerk/nextjs";
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white">
+      <main className="mx-auto flex max-w-4xl flex-col items-center justify-center px-6 py-20 text-center">
+        <div className="space-y-8">
+          <h1 className="text-5xl font-bold tracking-tight md:text-7xl">
+            Your files,
+            <br />
+            <span className="bg-gradient-to-r from-gray-400 to-gray-200 bg-clip-text text-transparent">
+              everywhere
+            </span>
+          </h1>
+
+          <p className="mx-auto max-w-2xl text-xl leading-relaxed text-gray-300 md:text-2xl">
+            Store, sync, and share your files with T4S Drive. Access your
+            documents from any device, anywhere in the world.
+          </p>
+
+          <SignInButton />
+        </div>
+      </main>
+    </div>
+  );
+}