fix: landing navbar not sticky to top, fix onboarding UI

apps/hackathon/src/app/onboarding/user/page.tsx

@@ -14,6 +14,7 @@ import {
 import { zodResolver } from '@hookform/resolvers/zod';
 
 import { CitySelect } from '../../../components/city-select';
+import { Icon } from '@iconify/react';
 
 const ROLE_OPTIONS = [
   'Frontend Developer',
@@ -69,19 +70,19 @@ const UserOnboardingPage: FC = (): ReactElement => {
 
   const onSubmit = form.handleSubmit(async (data) => {
     try {
-      console.log('[Onboarding] Starting submission...', data);
+      // console.log('[Onboarding] Starting submission...', data);
       let avatarUrl = session?.user?.avatar || null;
 
       // Upload avatar if a new file was selected
       if (avatarFile) {
-        console.log('[Onboarding] Uploading avatar...');
+        // console.log('[Onboarding] Uploading avatar...');
         const uploadResult = await uploadAvatar(avatarFile);
         avatarUrl = uploadResult.data.url;
-        console.log('[Onboarding] Avatar uploaded:', avatarUrl);
+        // console.log('[Onboarding] Avatar uploaded:', avatarUrl);
       }
 
       // Update user in Supabase
-      console.log('[Onboarding] Updating user in Supabase...');
+      // console.log('[Onboarding] Updating user in Supabase...');
       const result = await updateUser({
         fullname: data.fullname,
         avatar: avatarUrl,
@@ -89,17 +90,17 @@ const UserOnboardingPage: FC = (): ReactElement => {
         bio: data.bio,
         skills: data.skills,
       });
-      console.log('[Onboarding] User updated successfully:', result);
+      // console.log('[Onboarding] User updated successfully:', result);
 
       // Wait a bit for the onSuccess handler to update localStorage
       // The updateUser mutation's onSuccess handler updates the Zustand store and localStorage
       await new Promise((resolve) => setTimeout(resolve, 100));
 
-      console.log('[Onboarding] Navigating to dashboard...');
+      // console.log('[Onboarding] Navigating to dashboard...');
       // Use window.location for a full page reload to ensure middleware sees updated localStorage
       globalThis.location.href = '/dashboard';
     } catch (error) {
-      console.error('[Onboarding] Onboarding failed:', error);
+      // console.error('[Onboarding] Onboarding failed:', error);
       alert(
         `Onboarding failed: ${
           error instanceof Error ? error.message : 'Unknown error'
@@ -115,7 +116,7 @@ const UserOnboardingPage: FC = (): ReactElement => {
           <h1 className="text-3xl font-bold text-gray-900 mb-2">
             Complete Your Profile
           </h1>
-          <p className="text-gray-600">
+          <p className="text-gray-600 font-sans">
             Tell us more about yourself to get started
           </p>
         </div>
@@ -132,13 +133,19 @@ const UserOnboardingPage: FC = (): ReactElement => {
                 />
               ) : (
                 <div className="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center">
-                  <span className="text-gray-400 text-4xl">👤</span>
+                  {/* <span className="text-gray-400 text-4xl">👤</span> */}
+                  <Icon
+                    icon="ic:baseline-person"
+                    width="48"
+                    height="48"
+                    className="text-gray-400"
+                  />
                 </div>
               )}
             </div>
-            <div>
+            <div className="flex flex-col items-center">
               <label htmlFor="avatar" className="cursor-pointer">
-                <span className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">
+                <span className="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 inline-block">
                   {avatarPreview ? 'Change Photo' : 'Upload Photo'}
                 </span>
                 <input
@@ -161,11 +168,14 @@ const UserOnboardingPage: FC = (): ReactElement => {
             label="Full Name"
             placeholder="Enter your full name"
             name="fullname"
+            className="px-3 py-2 text-label2 rounded-lg max-h-auto text-base"
+            size="md"
+            isRequired={true}
           />
 
           {/* City */}
           <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
+            <label className="block text-base font-medium text-gray-700">
               City <span className="text-red-500">*</span>
             </label>
             <Controller
@@ -184,7 +194,7 @@ const UserOnboardingPage: FC = (): ReactElement => {
 
           {/* Role/Skills */}
           <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
+            <label className="block text-base font-medium text-gray-700">
               Role / Skills
             </label>
             <Controller
@@ -220,19 +230,20 @@ const UserOnboardingPage: FC = (): ReactElement => {
 
           {/* Bio */}
           <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
+            <label className="block text-base font-medium text-gray-700">
               Bio <span className="text-gray-400">(Optional)</span>
             </label>
             <Controller
               control={form.control}
               name="bio"
               render={({ field, fieldState }) => (
-                <div>
+                <div className="flex">
                   <Textarea
                     {...field}
                     placeholder="Tell us about yourself..."
                     rows={4}
-                    className="w-full"
+                    className="w-full rounded-lg text-sm"
+                    style={{ resize: 'vertical' }}
                   />
                   {fieldState.error && (
                     <p className="text-sm text-red-500 mt-1">