auth page improvements

Author: marshallswain

app/components/Hero/HeroProduct.vue

@@ -10,9 +10,9 @@ defineProps<{
 
 <template>
   <div class="pb-32" v-if="product">
-    <Flex col class="mx-auto max-w-6xl text-left lg:text-left gap-10 mt-32 relative px-4 lg:flex-row">
+    <Flex col class="mx-auto max-w-6xl text-left lg:text-left gap-10 mt-28 sm:mt-32 relative md:px-4 lg:flex-row">
       <Flex col items-center class="lg:items-start gap-12 flex-1">
-        <Text size="3xl">{{ product.description }}</Text>
+        <Text size="2xl" class="text-balance md:text-3xl text-center md:text-left">{{ product.description }}</Text>
 
         <div>
           <NuxtImg :src="product.logo" class="w-96"/>
@@ -22,14 +22,14 @@ defineProps<{
           {{ product.longDescription }}
         </Text>
 
-        <div class="flex gap-4">
+        <Flex col class="sm:flex-row gap-4 w-full justify-center lg:justify-start">
           <NuxtLink v-if="product.link" :to="product.link" class="btn btn-lg bg-primary-content text-neutral hover:bg-primary-content/80">
             Get Started
           </NuxtLink>
           <NuxtLink v-if="product.meta.docLink" :to="product.meta.docLink" class="btn btn-lg bg-neutral">
             Documentation
           </NuxtLink>
-        </div>
+        </Flex>
       </Flex>
 
       <Flex class="relative flex-1">

app/pages/auth/index.vue

@@ -28,7 +28,7 @@ useSeoMeta({
 
 <template>
   <div class="bg-[url('/img/top_background.svg')] bg-no-repeat bg-cover bg-center text-base-content max-w-screen overflow-x-hidden">
-    <div class="relative mx-auto max-w-[82rem] lg:drawer-open pt-16 px-4">
+    <div class="relative mx-auto max-w-[82rem] lg:drawer-open sm:pt-16 px-4">
       <HeroProduct 
         v-if="authProduct"
         :product="authProduct"