Initial commit

src/app/page.tsx

@@ -1,37 +1,74 @@
-import Link from "next/link";
+import Link from 'next/link';
+import Image from 'next/image';
+import { auth } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
 
 export default function HomePage() {
+  const { userId } = auth();
+
+  if (userId) {
+    redirect("/dash");
+  }
+
   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 text-white 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 text-white 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 text-white 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>
+    <div className="min-h-screen bg-gradient-to-b from-blue-100 to-white">
+      <div className="container mx-auto px-4 py-16">
+        <header className="text-center mb-16">
+          <h1 className="text-5xl font-bold mb-4 text-blue-800">Welcome to HRIStudio</h1>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Empowering Human-Robot Interaction Research and Development
+          </p>
+        </header>
+
+        <div className="grid md:grid-cols-2 gap-12 items-center mb-16">
+          <div>
+            <h2 className="text-3xl font-semibold mb-4 text-blue-700">About HRIStudio</h2>
+            <p className="text-lg text-gray-700 mb-4">
+              HRIStudio is a cutting-edge platform designed to streamline the process of creating, 
+              managing, and analyzing Human-Robot Interaction experiments. Our suite of tools 
+              empowers researchers and developers to push the boundaries of HRI research.
+            </p>
+            <p className="text-lg text-gray-700 mb-4">
+              With HRIStudio, you can:
+            </p>
+            <ul className="list-disc list-inside text-gray-700 mb-6">
+              <li>Design complex interaction scenarios with ease</li>
+              <li>Collect and analyze data in real-time</li>
+              <li>Collaborate seamlessly with team members</li>
+              <li>Visualize results with advanced reporting tools</li>
+            </ul>
+          </div>
+          <div className="relative aspect-video w-full">
+            <Image
+              src="/hristudio_laptop.png"
+              alt="HRIStudio Interface on Laptop"
+              fill
+              style={{ objectFit: 'contain' }}
+              // className="rounded-lg shadow-lg"
+            />
+          </div>
         </div>
+
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-semibold mb-4 text-blue-700">Join the HRI Revolution</h2>
+          <p className="text-lg text-gray-700 mb-6">
+            Whether you're a seasoned researcher or just starting in the field of Human-Robot Interaction, 
+            HRIStudio provides the tools and support you need to succeed.
+          </p>
+          <div className="space-x-4">
+            <Link href="/sign-in" className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
+              Sign In
+            </Link>
+            <Link href="/sign-up" className="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
+              Sign Up
+            </Link>
+          </div>
+        </div>
+
+        <footer className="text-center text-gray-600">
+          <p>© 2024 HRIStudio. All rights reserved.</p>
+        </footer>
       </div>
-    </main>
+    </div>
   );
-}
+}