From 816f5768c8e17fe602333d03b66464b5923b21c4 Mon Sep 17 00:00:00 2001
From: ramnique <30795890+ramnique@users.noreply.github.com>
Date: Tue, 4 Feb 2025 18:26:29 +0530
Subject: [PATCH] update app homepage

---
 apps/rowboat/app/app.tsx | 78 ++++++++++++++++++----------------------
 1 file changed, 35 insertions(+), 43 deletions(-)

diff --git a/apps/rowboat/app/app.tsx b/apps/rowboat/app/app.tsx
index 48b68f82..8e85458b 100644
--- a/apps/rowboat/app/app.tsx
+++ b/apps/rowboat/app/app.tsx
@@ -5,6 +5,7 @@ import logo from "@/public/rowboat-logo.png";
 import { useUser } from "@auth0/nextjs-auth0/client";
 import { useRouter } from "next/navigation";
 import { Spinner } from "@nextui-org/react";
+import { LogInIcon } from "lucide-react";
 
 export function App() {
     const router = useRouter();
@@ -14,51 +15,42 @@ export function App() {
         router.push("/projects");
     }
 
-    return <div className="flex h-full justify-center lg:justify-between">
-        <div className="hidden h-full grow md:justify-start bg-gray-50 bg-[url('/landing-bg.jpg')] bg-cover bg-center p-10 md:flex md:flex-col md:gap-20">
-            <div className="flex flex-col items-start gap-48">
-                <Image
-                    src={logo}
-                    alt="RowBoat Logo"
-                    height={30}
-                />
-                <div className="flex flex-col items-start gap-3">
-                    <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold inline-block bg-white bg-opacity-75 rounded-lg px-4 py-4">
-                        AI agents for human-like customer assistance
-                    </h1>
-                    <h2 className="text-md md:text-lg lg:text-xl text-gray-600 inline-block bg-white bg-opacity-75 rounded-lg px-4 py-3">
-                        Set up a personalized agent for your app or website in minutes.
-                    </h2>
+    return (
+        <div className="min-h-screen w-full bg-[url('/landing-bg.jpg')] bg-cover bg-center flex flex-col items-center justify-between py-10">
+            {/* Main content box */}
+            <div className="flex-1 flex items-center justify-center">
+                <div className="bg-white/70 backdrop-blur-sm rounded-xl p-10 flex flex-col items-center gap-8 shadow-lg">
+                    <Image
+                        src={logo}
+                        alt="RowBoat Logo"
+                        height={40}
+                    />
+                    {isLoading && <Spinner size="sm" />}
+                    {error && <div className="text-red-500">{error.message}</div>}
+                    {!isLoading && !error && !user && (
+                        <a
+                            className="bg-white/80 hover:bg-white/90 transition-colors text-black px-6 py-3 rounded-md flex items-center gap-2"
+                            href="/api/auth/login"
+                        >
+                            <LogInIcon className="w-4 h-4" />
+                            Sign in to get started
+                        </a>
+                    )}
+                    {user && <div className="flex items-center gap-2">
+                        <Spinner size="sm" />
+                        <div className="text-sm text-gray-400">Welcome, {user.name}</div>
+                    </div>}
                 </div>
             </div>
-            <TypewriterEffect />
-        </div>
-        <div className="flex flex-col items-center gap-20 px-28 py-2 justify-center">
-            <Image
-                className="md:hidden"
-                src={logo}
-                alt="RowBoat Logo"
-                height={30}
-            />
-            {isLoading && <Spinner size="sm" />}
-            {error && <div className="text-red-500">{error.message}</div>}
-            {!isLoading && !error && !user && (
-                <a
-                    className="bg-blue-500 text-white px-4 py-2 rounded-md"
-                    href="/api/auth/login"
-                >
-                    Sign in to get started
-                </a>
-            )}
-            {user && <div className="flex items-center gap-2">
-                <Spinner size="sm" />
-                <div className="text-sm text-gray-400">Welcome, {user.name}</div>
-            </div>}
-            <div className="flex flex-col justify-center items-center px-4 py-2 gap-2">
-                <div className="text-sm text-gray-400">&copy; 2024 RowBoat Labs</div>
-                <a className="text-sm text-gray-400 hover:underline" href="https://www.rowboatlabs.com/terms-and-conditions" target="_blank" rel="noopener noreferrer">Terms and Conditions</a>
-                <a className="text-sm text-gray-400 hover:underline" href="https://www.rowboatlabs.com/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
+
+            {/* Footer */}
+            <div className="flex flex-col items-center gap-2 text-xs text-white/70">
+                <div>&copy; 2025 RowBoat Labs</div>
+                <div className="flex gap-4">
+                    <a className="hover:text-white transition-colors" href="https://www.rowboatlabs.com/terms-of-service" target="_blank" rel="noopener noreferrer">Terms of Service</a>
+                    <a className="hover:text-white transition-colors" href="https://www.rowboatlabs.com/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
+                </div>
             </div>
         </div>
-    </div>;
+    );
 }