From 7cc074a086b835323f74e0f3429bc3b051377d30 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <mariosant@sent.com>
Date: Mon, 21 Apr 2025 20:08:07 +0300
Subject: [PATCH] Update registration page

---
 app/components/register.vue | 74 ++++++++++++++++++++++---------------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/app/components/register.vue b/app/components/register.vue
index 332bdb6..d609322 100644
--- a/app/components/register.vue
+++ b/app/components/register.vue
@@ -7,34 +7,48 @@ const { openInPopup } = useUserSession();
 </script>
 
 <template>
-  <UContainer
-    class="flex flex-col items-center gap-4 justify-center w-full p-16"
-  >
-    <div class="flex gap-3 items-center">
-      <NuxtImg src="/ghostwriter-logo.png" class="size-9" />
-      <div class="font-bold text-xl tracking-tight font-fira-code">
-        Ghostwriter
-      </div>
-    </div>
-    <UCard class="max-w-sm">
-      <div class="flex flex-col gap-4 items-center justify-center">
-        <UIcon name="heroicons:user" class="size-12" />
-        <div class="text-center">
-          Welcome to Ghostwriter. Use the button below to sign in with your
-          Strava account.
-        </div>
-        <div
-          aria-role="button"
-          @click="openInPopup('/auth/strava')"
-          class="cursor-pointer w-full max-w-[200px]"
-        >
-          <NuxtImg
-            src="/images/connect-with-strava.svg"
-            class="w-full max-w-[200px]"
-          />
-        </div>
-      </div>
-    </UCard>
-  </UContainer>
-  <AppFooter />
+    <UContainer
+        class="flex flex-col items-center gap-4 justify-center w-full p-16"
+    >
+        <UCard class="max-w-sm grid gap-6 justify-center items-center">
+            <div class="flex flex-col gap-10 items-center justify-center">
+                <div class="flex gap-2 items-center">
+                    <NuxtImg src="/ghostwriter-logo.png" class="size-9" />
+                    <div
+                        class="font-bold text-xl tracking-tight font-fira-code"
+                    >
+                        Ghostwriter
+                    </div>
+                </div>
+                <div class="grid gap-2">
+                    <div class="text-center text-2xl font-bold">
+                        Sign in to your account.
+                    </div>
+                    <div class="text-center">
+                        Connect with Strava to automatically add personalized
+                        titles and descriptions to your activities.
+                    </div>
+                </div>
+                <div
+                    aria-role="button"
+                    @click="openInPopup('/auth/strava')"
+                    class="cursor-pointer w-full max-w-[200px]"
+                >
+                    <NuxtImg
+                        src="/images/connect-with-strava.svg"
+                        class="w-full max-w-[200px]"
+                    />
+                </div>
+                <div class="text-sm text-gray-500">
+                    By signing in, you agree to our
+                    <NuxtLink
+                        href="https:www.ghostwriter.rocks/privacy"
+                        class="text-primary-500"
+                        >Privacy Policy</NuxtLink
+                    >.
+                </div>
+            </div>
+        </UCard>
+    </UContainer>
+    <AppFooter />
 </template>