From 646164c85da4d0b0f3fdd40de80e4b60ee262ed2 Mon Sep 17 00:00:00 2001
From: Darius Rapalis <darius.rapalis@agmis.com>
Date: Tue, 28 Apr 2026 20:41:14 +0300
Subject: [PATCH] Model: Qwen 3.6 35B A3 Prompt: use
 'https://app.clockify.me/signup' design to make login and register buttons
 link to acutal login and register pages on the project. We don't need
 "Continue with X" social buttons, only method of authentiction for now will
 be email/password

Stats:
Context: 88,970 tokens
Time: 37m 48s
---
 .../js/layouts/auth/AuthSimpleLayout.vue      | 29 ++++++-----
 resources/js/pages/Homepage.vue               | 49 +++++++++---------
 resources/js/pages/auth/ForgotPassword.vue    | 19 +++----
 resources/js/pages/auth/Login.vue             | 50 +++++++++++--------
 resources/js/pages/auth/Register.vue          | 37 +++++++-------
 resources/js/pages/auth/ResetPassword.vue     | 27 ++++++----
 resources/js/pages/auth/VerifyEmail.vue       | 43 +++++++++-------
 7 files changed, 142 insertions(+), 112 deletions(-)

diff --git a/resources/js/layouts/auth/AuthSimpleLayout.vue b/resources/js/layouts/auth/AuthSimpleLayout.vue
index b54c094..7b846d9 100644
--- a/resources/js/layouts/auth/AuthSimpleLayout.vue
+++ b/resources/js/layouts/auth/AuthSimpleLayout.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
 import { home } from '@/routes';
 
 defineProps<{
@@ -11,27 +10,33 @@ defineProps<{
 
 <template>
     <div
-        class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10"
+        class="flex min-h-screen flex-col items-center justify-center bg-[#f2f6f8] p-6"
     >
-        <div class="w-full max-w-sm">
+        <div class="w-full max-w-[440px]">
             <div class="flex flex-col gap-8">
                 <div class="flex flex-col items-center gap-4">
                     <Link
                         :href="home()"
                         class="flex flex-col items-center gap-2 font-medium"
                     >
-                        <div
-                            class="mb-1 flex h-9 w-9 items-center justify-center rounded-md"
-                        >
-                            <AppLogoIcon
-                                class="size-9 fill-current text-[var(--foreground)] dark:text-white"
-                            />
+                        <div class="flex h-14 w-14 items-center justify-center">
+                            <svg
+                                class="h-14 w-14 fill-current text-[#03a9f4]"
+                                viewBox="0 0 64 64"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <circle cx="32" cy="32" r="30" fill="#03a9f4" />
+                                <circle cx="32" cy="32" r="26" fill="white" />
+                                <rect x="30" y="12" width="4" height="18" rx="2" fill="#03a9f4" />
+                                <rect x="30" y="28" width="4" height="20" rx="2" fill="#333" transform="rotate(60 32 32)" />
+                                <circle cx="32" cy="32" r="3" fill="#03a9f4" />
+                            </svg>
                         </div>
-                        <span class="sr-only">{{ title }}</span>
+                        <span class="sr-only">ClockyLog</span>
                     </Link>
                     <div class="space-y-2 text-center">
-                        <h1 class="text-xl font-medium">{{ title }}</h1>
-                        <p class="text-center text-sm text-muted-foreground">
+                        <h1 class="text-2xl font-semibold text-[#333]">{{ title }}</h1>
+                        <p class="text-sm text-[#607d8b]">
                             {{ description }}
                         </p>
                     </div>
diff --git a/resources/js/pages/Homepage.vue b/resources/js/pages/Homepage.vue
index 387eb7c..1f0a1f5 100644
--- a/resources/js/pages/Homepage.vue
+++ b/resources/js/pages/Homepage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { login, register } from '@/routes';
 
 const isMobileMenuOpen = ref(false);
 const activeFeatureTab = ref(0);
@@ -322,18 +323,18 @@ onMounted(() => {
 
                     <!-- Desktop Auth Buttons -->
                     <div class="hidden lg:flex items-center gap-3">
-                        <a
-                            href="https://app.clockify.me/en/login"
+                        <Link
+                            :href="login()"
                             class="text-sm font-medium text-gray-700 hover:text-gray-900 px-4 py-2"
                         >
                             Log in
-                        </a>
-                        <a
-                            href="https://app.clockify.me/en/signup"
-                            class="text-sm font-medium bg-[#0d5ad8] text-white px-5 py-2.5 rounded-md hover:bg-[0b4eb8] transition-colors"
+                        </Link>
+                        <Link
+                            :href="register()"
+                            class="text-sm font-medium bg-[#0d5ad8] text-white px-5 py-2.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
                         >
                             Sign up free
-                        </a>
+                        </Link>
                     </div>
 
                     <!-- Mobile menu button -->
@@ -372,18 +373,18 @@ onMounted(() => {
                     <a href="/customers" class="block text-sm text-gray-600 hover:text-gray-900">Reviews</a>
                     <a href="/help" class="block text-sm text-gray-600 hover:text-gray-900">Support</a>
                     <div class="pt-3 border-t border-gray-200 space-y-2">
-                        <a
-                            href="https://app.clockify.me/en/login"
+                        <Link
+                            :href="login()"
                             class="block text-sm text-center text-gray-700 py-2"
                         >
                             Log in
-                        </a>
-                        <a
-                            href="https://app.clockify.me/en/signup"
+                        </Link>
+                        <Link
+                            :href="register()"
                             class="block text-sm text-center bg-[#0d5ad8] text-white py-2.5 rounded-md"
                         >
                             Sign up free
-                        </a>
+                        </Link>
                     </div>
                 </div>
             </div>
@@ -418,12 +419,12 @@ onMounted(() => {
 
                 <!-- CTA Buttons -->
                 <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
-                    <a
-                        href="https://app.clockify.me/signup"
-                        class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[0b4eb8] transition-colors"
+                    <Link
+                        :href="register()"
+                        class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
                     >
                         Start tracking time - it's free!
-                    </a>
+                    </Link>
                     <div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
                         <img
                             src="/assets/images/signed-up-icon.svg"
@@ -730,12 +731,12 @@ onMounted(() => {
                 </p>
 
                 <div class="text-center mb-12">
-                    <a
-                        href="https://app.clockify.me/en/login"
+                    <Link
+                        :href="login()"
                         class="inline-flex items-center gap-2 text-[#0d5ad8] hover:underline font-medium"
                     >
                         Open Clockify in your browser
-                    </a>
+                    </Link>
                     <p class="mt-2 text-[#6b6b6b]">or download for:</p>
                 </div>
 
@@ -884,12 +885,12 @@ onMounted(() => {
                     24/7 Support • Cancel Anytime • 7-day Trial
                 </p>
                 <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-                    <a
-                        href="https://app.clockify.me/signup"
-                        class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[0b4eb8] transition-colors"
+                    <Link
+                        :href="register()"
+                        class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
                     >
                         Create FREE account
-                    </a>
+                    </Link>
                     <div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
                         <img
                             src="/assets/images/signed-up-icon.svg"
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index a39a0e1..a70d2c5 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -12,7 +12,7 @@ import { email } from '@/routes/password';
 defineOptions({
     layout: {
         title: 'Forgot password',
-        description: 'Enter your email to receive a password reset link',
+        description: 'Enter your email and we\'ll send you a link to reset your password',
     },
 });
 
@@ -26,15 +26,15 @@ defineProps<{
 
     <div
         v-if="status"
-        class="mb-4 text-center text-sm font-medium text-green-600"
+        class="mb-2 text-center text-sm font-medium text-green-600"
     >
         {{ status }}
     </div>
 
-    <div class="space-y-6">
+    <div class="space-y-5">
         <Form v-bind="email.form()" v-slot="{ errors, processing }">
             <div class="grid gap-2">
-                <Label for="email">Email address</Label>
+                <Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
                 <Input
                     id="email"
                     type="email"
@@ -42,25 +42,26 @@ defineProps<{
                     autocomplete="off"
                     autofocus
                     placeholder="email@example.com"
+                    class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.email" />
             </div>
 
-            <div class="my-6 flex items-center justify-start">
+            <div class="pt-2">
                 <Button
-                    class="w-full"
+                    class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
                     :disabled="processing"
                     data-test="email-password-reset-link-button"
                 >
                     <Spinner v-if="processing" />
-                    Email password reset link
+                    <span v-else>Email password reset link</span>
                 </Button>
             </div>
         </Form>
 
-        <div class="space-x-1 text-center text-sm text-muted-foreground">
+        <div class="text-center text-sm text-[#607d8b]">
             <span>Or, return to</span>
-            <TextLink :href="login()">log in</TextLink>
+            <TextLink :href="login()" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">log in</TextLink>
         </div>
     </div>
 </template>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 6e62f28..1e7b3da 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -31,7 +31,7 @@ defineProps<{
 
     <div
         v-if="status"
-        class="mb-4 text-center text-sm font-medium text-green-600"
+        class="mb-2 text-center text-sm font-medium text-green-600"
     >
         {{ status }}
     </div>
@@ -40,32 +40,33 @@ defineProps<{
         v-bind="store.form()"
         :reset-on-success="['password']"
         v-slot="{ errors, processing }"
-        class="flex flex-col gap-6"
+        class="flex flex-col gap-5"
     >
-        <div class="grid gap-6">
+        <div class="grid gap-5">
             <div class="grid gap-2">
-                <Label for="email">Email address</Label>
+                <Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
                 <Input
                     id="email"
                     type="email"
                     name="email"
                     required
                     autofocus
-                    :tabindex="1"
+                    tabindex="1"
                     autocomplete="email"
                     placeholder="email@example.com"
+                    class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.email" />
             </div>
 
             <div class="grid gap-2">
                 <div class="flex items-center justify-between">
-                    <Label for="password">Password</Label>
+                    <Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
                     <TextLink
                         v-if="canResetPassword"
                         :href="request()"
-                        class="text-sm"
-                        :tabindex="5"
+                        class="text-sm text-[#03a9f4] hover:text-[#0288d1]"
+                        tabindex="5"
                     >
                         Forgot password?
                     </TextLink>
@@ -74,38 +75,45 @@ defineProps<{
                     id="password"
                     name="password"
                     required
-                    :tabindex="2"
+                    tabindex="2"
                     autocomplete="current-password"
                     placeholder="Password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password" />
             </div>
 
-            <div class="flex items-center justify-between">
-                <Label for="remember" class="flex items-center space-x-3">
-                    <Checkbox id="remember" name="remember" :tabindex="3" />
-                    <span>Remember me</span>
+            <div class="flex items-center">
+                <Label for="remember" class="flex items-center space-x-2 cursor-pointer">
+                    <Checkbox
+                        id="remember"
+                        name="remember"
+                        tabindex="3"
+                        class="border-[#e9e9ed] data-[checked]:border-[#03a9f4] data-[checked]:bg-[#03a9f4] focus:ring-[#03a9f4]"
+                    />
+                    <span class="text-sm text-[#546e7a]">Remember me</span>
                 </Label>
             </div>
 
             <Button
                 type="submit"
-                class="mt-4 w-full"
-                :tabindex="4"
+                class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
+                tabindex="4"
                 :disabled="processing"
                 data-test="login-button"
             >
                 <Spinner v-if="processing" />
-                Log in
+                <span v-else>Log in</span>
             </Button>
         </div>
 
-        <div
-            class="text-center text-sm text-muted-foreground"
-            v-if="canRegister"
-        >
+        <div class="text-center text-sm text-[#607d8b]">
             Don't have an account?
-            <TextLink :href="register()" :tabindex="5">Sign up</TextLink>
+            <TextLink
+                :href="register()"
+                tabindex="5"
+                class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4"
+            >Sign up</TextLink>
         </div>
     </Form>
 </template>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index 505c279..a1d6852 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -25,84 +25,87 @@ defineOptions({
         v-bind="store.form()"
         :reset-on-success="['password', 'password_confirmation']"
         v-slot="{ errors, processing }"
-        class="flex flex-col gap-6"
+        class="flex flex-col gap-5"
     >
-        <div class="grid gap-6">
+        <div class="grid gap-5">
             <div class="grid gap-2">
-                <Label for="name">Name</Label>
+                <Label for="name" class="text-sm font-medium text-[#333]">Name</Label>
                 <Input
                     id="name"
                     type="text"
                     required
                     autofocus
-                    :tabindex="1"
+                    tabindex="1"
                     autocomplete="name"
                     name="name"
                     placeholder="Full name"
+                    class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.name" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="email">Email address</Label>
+                <Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
                 <Input
                     id="email"
                     type="email"
                     required
-                    :tabindex="2"
+                    tabindex="2"
                     autocomplete="email"
                     name="email"
                     placeholder="email@example.com"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.email" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="password">Password</Label>
+                <Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
                 <PasswordInput
                     id="password"
                     required
-                    :tabindex="3"
+                    tabindex="3"
                     autocomplete="new-password"
                     name="password"
                     placeholder="Password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="password_confirmation">Confirm password</Label>
+                <Label for="password_confirmation" class="text-sm font-medium text-[#333]">Confirm password</Label>
                 <PasswordInput
                     id="password_confirmation"
                     required
-                    :tabindex="4"
+                    tabindex="4"
                     autocomplete="new-password"
                     name="password_confirmation"
                     placeholder="Confirm password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password_confirmation" />
             </div>
 
             <Button
                 type="submit"
-                class="mt-2 w-full"
+                class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
                 tabindex="5"
                 :disabled="processing"
                 data-test="register-user-button"
             >
                 <Spinner v-if="processing" />
-                Create account
+                <span v-else>Create account</span>
             </Button>
         </div>
 
-        <div class="text-center text-sm text-muted-foreground">
+        <div class="text-center text-sm text-[#607d8b]">
             Already have an account?
             <TextLink
                 :href="login()"
-                class="underline underline-offset-4"
-                :tabindex="6"
-                >Log in</TextLink
-            >
+                class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4"
+                tabindex="6"
+            >Log in</TextLink>
         </div>
     </Form>
 </template>
diff --git a/resources/js/pages/auth/ResetPassword.vue b/resources/js/pages/auth/ResetPassword.vue
index eef6c2c..9bec56d 100644
--- a/resources/js/pages/auth/ResetPassword.vue
+++ b/resources/js/pages/auth/ResetPassword.vue
@@ -3,16 +3,18 @@ import { Form, Head } from '@inertiajs/vue3';
 import { ref } from 'vue';
 import InputError from '@/components/InputError.vue';
 import PasswordInput from '@/components/PasswordInput.vue';
+import TextLink from '@/components/TextLink.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Spinner } from '@/components/ui/spinner';
+import { login } from '@/routes';
 import { update } from '@/routes/password';
 
 defineOptions({
     layout: {
         title: 'Reset password',
-        description: 'Please enter your new password below',
+        description: 'Enter your new password below',
     },
 });
 
@@ -33,55 +35,60 @@ const inputEmail = ref(props.email);
         :reset-on-success="['password', 'password_confirmation']"
         v-slot="{ errors, processing }"
     >
-        <div class="grid gap-6">
+        <div class="grid gap-5">
             <div class="grid gap-2">
-                <Label for="email">Email</Label>
+                <Label for="email" class="text-sm font-medium text-[#333]">Email</Label>
                 <Input
                     id="email"
                     type="email"
                     name="email"
                     autocomplete="email"
                     v-model="inputEmail"
-                    class="mt-1 block w-full"
+                    class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] cursor-not-allowed"
                     readonly
                 />
                 <InputError :message="errors.email" class="mt-2" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="password">Password</Label>
+                <Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
                 <PasswordInput
                     id="password"
                     name="password"
                     autocomplete="new-password"
-                    class="mt-1 block w-full"
                     autofocus
                     placeholder="Password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="password_confirmation"> Confirm password </Label>
+                <Label for="password_confirmation" class="text-sm font-medium text-[#333]">Confirm password</Label>
                 <PasswordInput
                     id="password_confirmation"
                     name="password_confirmation"
                     autocomplete="new-password"
-                    class="mt-1 block w-full"
                     placeholder="Confirm password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password_confirmation" />
             </div>
 
             <Button
                 type="submit"
-                class="mt-4 w-full"
+                class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
                 :disabled="processing"
                 data-test="reset-password-button"
             >
                 <Spinner v-if="processing" />
-                Reset password
+                <span v-else>Reset password</span>
             </Button>
         </div>
+
+        <div class="text-center text-sm text-[#607d8b]">
+            <span>Or, return to</span>
+            <TextLink :href="login()" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">log in</TextLink>
+        </div>
     </Form>
 </template>
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
index e486278..e49f972 100644
--- a/resources/js/pages/auth/VerifyEmail.vue
+++ b/resources/js/pages/auth/VerifyEmail.vue
@@ -8,9 +8,8 @@ import { send } from '@/routes/verification';
 
 defineOptions({
     layout: {
-        title: 'Verify email',
-        description:
-            'Please verify your email address by clicking on the link we just emailed to you.',
+        title: 'Verify your email address',
+        description: "We've sent a verification link to your email address. Check your inbox and click the link to get started.",
     },
 });
 
@@ -24,24 +23,30 @@ defineProps<{
 
     <div
         v-if="status === 'verification-link-sent'"
-        class="mb-4 text-center text-sm font-medium text-green-600"
+        class="mb-2 text-center text-sm font-medium text-green-600"
     >
-        A new verification link has been sent to the email address you provided
-        during registration.
+        A new verification link has been sent to the email address you provided during registration.
     </div>
 
-    <Form
-        v-bind="send.form()"
-        class="space-y-6 text-center"
-        v-slot="{ processing }"
-    >
-        <Button :disabled="processing" variant="secondary">
-            <Spinner v-if="processing" />
-            Resend verification email
-        </Button>
+    <div class="space-y-5">
+        <Form
+            v-bind="send.form()"
+            class="text-center"
+            v-slot="{ processing }"
+        >
+            <Button 
+                class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
+                :disabled="processing"
+            >
+                <Spinner v-if="processing" />
+                <span v-else>Resend verification email</span>
+            </Button>
+        </Form>
 
-        <TextLink :href="logout()" as="button" class="mx-auto block text-sm">
-            Log out
-        </TextLink>
-    </Form>
+        <div class="text-center text-sm text-[#607d8b]">
+            <TextLink :href="logout()" as="button" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">
+                Log out
+            </TextLink>
+        </div>
+    </div>
 </template>