style: /page.tsx

weiwei2694 · Oct 20, 2023 · 5e5dc62 · 5e5dc62
1 parent a42ac68
commit 5e5dc62
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -13,39 +13,36 @@ export default async function Home() {
     const user = await getUserAction(clerkUser.id);
 
     // if user data exists and isCompleted is within user
-    if (user && "isCompleted" in user) {
-
-      // if isCompleted false, redirect to /onboarding
-      const isCompleted = user.isCompleted;
-      if (!isCompleted) redirect('/onboarding')
+    if (user && "isCompleted" in user && Boolean(user.isCompleted)) {
+      redirect('/onboarding')
     }
   }
 
   return (
-    <main className="max-w-4xl mx-auto h-full grid place-items-center p-3 sm:p-12 lg:p-0">
-      <section className="w-full h-full md:h-fit flex flex-col md:flex-row justify-evenly md:justify-between gap-8">
+    <main className="max-w-4xl mx-auto h-full grid place-items-center p-5 sm:p-12 lg:p-0">
+      <section className="w-full h-full md:h-fit flex flex-col md:flex-row justify-center md:justify-between space-y-24 md:space-y-0">
         <div className="flex md:hidden">
           <Image
             src="/assets/small-x-logo.png"
             alt="X Logo"
-            width={80}
-            height={80}
+            width={40}
+            height={40}
             className="object-contain"
           />
         </div>
-        <div className="hidden md:flex items-center">
+        <div className="hidden md:flex">
           <Image
             src="/assets/large-x-logo.png"
             alt="X Logo"
-            width={215}
-            height={215}
+            width={300}
+            height={300}
             className="object-contain"
           />
         </div>
-        <div className="flex flex-col gap-y-8">
-          <div className="flex flex-col gap-y-16">
-            <h1 className="text-6xl font-extrabold tracking-wider">Happening now</h1>
-            <h3 className="text-3xl font-bold tracking-wider">Join today.</h3>
+        <div className="flex flex-col space-y-4 sm:space-y-8">
+          <div className="flex flex-col space-y-8 sm:space-y-16">
+            <h1 className="text-4xl sm:text-6xl font-extrabold">Happening now</h1>
+            <h3 className="text-xl sm:text-3xl font-bold tracking-wider">Join today.</h3>
           </div>
           <CreateAnAccount />
         </div>

diff --git a/src/components/sharing/CreateAnAccount.tsx b/src/components/sharing/CreateAnAccount.tsx
@@ -5,7 +5,16 @@ import { useRouter } from "next/navigation";
 
 const CreateAnAccount = () => {
     const router = useRouter();
-    return <Button variant="primary" onClick={() => router.push('/sign-in')}>Create An Account</Button>
+
+    return (
+        <Button
+            variant="primary"
+            onClick={() => router.push('/sign-in')}
+            className="font-extrabold text-sm"
+        >
+            Create Account
+        </Button>
+    )
 }
 
 export default CreateAnAccount