feat(hackathon): Update UI landing page, dashboard, onboarding (#62)

* feat: update landing page

* feat: Add favicon and SEO (JSON-LD schema, meta tags)

- Add favicon image
- Add JSON-LD schema for Hackathon event
- Add react-helmet-async for managing meta tags

* chore: remove react-helmet-async

* chore: update landing page

* chore: update UI for signup and login

- add back button for better UX

* feat: add image loading state and skeleton UI for team dashboard

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

* feat(hackathon): update UI

- Update dashboard, onboarding user, edit profile, and team layout
  to make it more consistent

* fix: optimize placeholder banner image & minor fix dark mode

---------

Co-authored-by: Maulana Sodiqin <sodiqincahyana1@gmail.com>
Co-authored-by: Muhammad Zakir Ramadhan <61570975+zakirkun@users.noreply.github.com>

libs/ui/src/atoms/input/input.tsx

@@ -32,9 +32,9 @@ type TInputProps = Omit<
 
 const sizeClasses: Record<TInputSize, { textSize: string; iconSize: string }> =
   {
-    sm: { textSize: 'text-[10px] max-h-[28px]', iconSize: 'text-[10px]' },
-    md: { textSize: 'text-[12px] max-h-[30px]', iconSize: 'text-[12px]' },
-    lg: { textSize: 'text-[15px] max-h-[34px]', iconSize: 'text-[15px]' },
+    sm: { textSize: 'text-[10px] h-[28px]', iconSize: 'text-[10px]' },
+    md: { textSize: 'text-[12px] h-[30px]', iconSize: 'text-[12px]' },
+    lg: { textSize: 'text-[15px] h-[34px]', iconSize: 'text-[15px]' },
   };
 
 const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';

libs/ui/src/molecules/input-field/input-field.tsx

@@ -20,19 +20,20 @@ export type TInputFieldProps = Omit<
   disabled?: boolean;
   helperText?: string;
   htmlFor?: string;
+  isRequired?: boolean;
 };
 
 const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
   lg: {
-    label: 'text-p3 font-medium',
+    label: 'text-label1 font-medium',
     helperText: 'text-label3 font-normal',
   },
   md: {
-    label: 'text-label1 font-medium',
+    label: 'text-label2 font-medium',
     helperText: 'text-label2 font-normal',
   },
   sm: {
-    label: 'text-label2 font-medium',
+    label: 'text-label3 font-medium',
     helperText: 'text-label2 font-normal',
   },
 };
@@ -47,6 +48,7 @@ export const InputField: FC<TInputFieldProps> = ({
   htmlFor,
   className,
   disabled,
+  isRequired = false,
   ...rest
 }): ReactElement => {
   return (
@@ -58,7 +60,7 @@ export const InputField: FC<TInputFieldProps> = ({
           sizeClasses[size].label
         )}
       >
-        {label}
+        {label} {isRequired ? <span className="text-red-500">*</span> : null}
       </label>
       <Input
         {...(htmlFor && { id: htmlFor })}
@@ -75,7 +77,7 @@ export const InputField: FC<TInputFieldProps> = ({
         {...rest}
       />
       {error ? (
-        <p className="text-danger-500 text-label1 text-left">{error}</p>
+        <p className="text-danger-500 text-label2 text-left">{error}</p>
       ) : (
         helperText && (
           <p

libs/ui/src/organisms/controlled-field/controlled-input-field.tsx

@@ -39,6 +39,8 @@ export const ControlledInputField = <T extends FieldValues>(
       error={fieldState.error?.message}
       {...inputProps}
       onChange={handleChange}
+      isRequired={props.isRequired}
+      size={props.size}
     />
   );
 };