refactor(persona): made persona labels/options smaller and simpler

frontend/src/pages/PersonaForm.vue

@@ -17,30 +17,31 @@
 				</div>
 
 				<div class="mb-5">
-					<div class="text-sm text-gray-700 mb-2">
-						{{ __('What is your use case for Frappe Learning?') }}
-					</div>
 					<FormControl
 						v-model="persona.useCase"
 						type="select"
+						:label="__('How will you use Learning?')"
 						:options="useCaseOptions"
 					/>
 				</div>
 
 				<div class="mb-5">
-					<div class="text-sm text-gray-700 mb-2">
-						{{ __('What best describes your role?') }}
-					</div>
 					<FormControl
 						v-model="persona.role"
 						type="select"
+						:label="__('Your role')"
 						:options="roleOptions"
 					/>
 				</div>
 
 				<div class="flex w-full">
-					<Button variant="solid" class="mx-auto" @click="submitPersona()">
-						{{ __('Submit and Continue') }}
+					<Button
+						variant="solid"
+						class="mx-auto"
+						@click="submitPersona()"
+						:disabled="!persona.useCase || !persona.role"
+					>
+						{{ __('Continue') }}
 					</Button>
 				</div>
 			</div>
@@ -99,13 +100,13 @@ const skipPersonaForm = () => {
 
 const roleOptions = computed(() => {
 	const options = [
-		'Trainer / Instructor',
-		'Freelancer / Consultant',
-		'HR / L&D Professional',
-		'School / University Admin',
-		'Software Developer',
+		'Instructor',
+		'Freelancer',
+		'HR / L&D',
+		'School Admin',
+		'Developer',
 		'Community Manager',
-		'Business Owner / Team Lead',
+		'Business Owner',
 		'Other',
 	]
 
@@ -132,10 +133,11 @@ const noOfStudentsOptions = computed(() => {
 
 const useCaseOptions = computed(() => {
 	const options = [
-		'Teaching students in a school/university',
-		'Training employees in my company',
-		'Onboarding and educating my users/community',
-		'Selling courses and earning income',
+		'Teach students',
+		'Train employees',
+		'Onboard users or community',
+		'Sell courses',
+		'Share learning content',
 		'Other',
 	]