feat(hackathon): Improve dark mode and UI/UX in Hackathon website (#64)

* 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

* feat(hackathon): update landing page dark mode color scheme

* feat(hackathon): update auth page dark mode color scheme

* feat(hackathon): dashboard UI improvement and dark mode adjustment

* feat(hackathon): browse team page

- update dark mode color scheme
- add some border style to give outline and depth
- change emoji to icon

* feat(hackathon): update team page

- update dark mode color scheme for team page: view, team edit,
  and submit project page
- fix bug in chat where messages are displayed double
- make the form field size consistent

* feat(hackathon): update dark mode onboarding and edit profile

---------

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

apps/hackathon/src/components/city-select.tsx

@@ -70,15 +70,15 @@ export const CitySelect: FC<CitySelectProps> = ({
           }}
           onClick={handleInputClick}
           placeholder={placeholder}
-          className={`w-full h-[42px] px-3 text-[15px] border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 ${
-            error ? 'border-red-500' : 'border-gray-300 dark:border-neutral-600'
+          className={`w-full h-[42px] px-3 text-[15px] border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 ${
+            error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
           }`}
         />
         {value && !isOpen && (
           <button
             type="button"
             onClick={handleClearSelection}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-neutral-500 hover:text-gray-600 cursor-pointer dark:hover:text-neutral-300"
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 hover:text-gray-600 cursor-pointer dark:hover:text-gray-300"
           >
             ✕
           </button>
@@ -88,7 +88,7 @@ export const CitySelect: FC<CitySelectProps> = ({
       {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
 
       {isOpen && (
-        <div className="absolute z-50 w-full mt-1 bg-white dark:bg-neutral-800 border border-gray-300 dark:border-neutral-600 rounded-lg shadow-lg max-h-60 overflow-y-auto text-label2">
+        <div className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto text-label2">
           {filteredCities.length > 0 ? (
             <ul className="py-1">
               {filteredCities.map((city) => (
@@ -98,7 +98,7 @@ export const CitySelect: FC<CitySelectProps> = ({
                   className={`px-3 py-2 cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-900/30 ${
                     value === city
                       ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400'
-                      : 'text-gray-900 dark:text-neutral-200'
+                      : 'text-gray-900 dark:text-gray-200'
                   }`}
                 >
                   {city}
@@ -106,7 +106,7 @@ export const CitySelect: FC<CitySelectProps> = ({
               ))}
             </ul>
           ) : (
-            <div className="px-3 py-2 text-gray-500 dark:text-neutral-400 text-sm">
+            <div className="px-3 py-2 text-gray-500 dark:text-gray-400 text-sm">
               No cities found
             </div>
           )}