feat(landing): login register

- Removed existing submissions data from hackathons.json.
- Added new components for Hackathon details including HackathonContent, HackathonHeader, HackathonHero, HackathonPartners, HackathonQuickInfo, HackathonRequirements, HackathonSidebar, HackathonStatusBar, HackathonSubmissions, HackathonTabs, and ServerHackathonContent.
- Integrated framer-motion for animations in Hackathon components.
- Updated package.json and package-lock.json to include nextjs-toploader dependency.

.claude/settings.local.json

@@ -1,18 +1,9 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npx nx run-many:*)",
-      "Bash(npm install:*)",
-      "Bash(npm view:*)",
-      "Bash(npx nx build landing)",
-      "Bash(npm uninstall:*)",
-      "Bash(dir:*)",
-      "Bash(ren page.tsx page-original.tsx)",
-      "Bash(ren:*)",
-      "Bash(npx supabase:*)",
-      "Bash(libs/service/src/types/supabase.ts)"
+      "Bash(npm run typecheck:*)"
     ],
     "deny": [],
     "ask": []
   }
-}
+}

.dockerignore

@@ -1,55 +0,0 @@
-# Dependencies
-node_modules
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Build outputs
-dist
-.next
-out
-build
-coverage
-
-# IDE
-.vscode
-.idea
-*.swp
-*.swo
-*~
-
-# OS
-.DS_Store
-Thumbs.db
-
-# Git
-.git
-.gitignore
-
-# Environment
-.env
-.env.local
-.env.*.local
-
-# Testing
-coverage
-.nyc_output
-
-# Logs
-logs
-*.log
-
-# Nx
-.nx
-
-# Docker
-Dockerfile
-docker-compose*.yml
-.dockerignore
-
-# Misc
-*.md
-!README.md
-.editorconfig
-.prettierrc
-.eslintrc

.env.example

@@ -1,3 +0,0 @@
-
-VITE_SUPABASE_URL=https://your-project-id.supabase.co
-VITE_SUPABASE_ANON_KEY=your-anon-key-here

.github/workflows/deploy-backoffice.yml

@@ -26,13 +26,9 @@ jobs:
             if [ ! -d ~/imphnen-frontend-service-backoffice ]; then
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-backoffice
             else
-              cd ~/imphnen-frontend-service-backoffice && git fetch origin && git reset --hard origin/develop && git pull
+              cd ~/imphnen-frontend-service-backoffice && git pull
             fi
-            cat > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env << EOF
-            VITE_API_URL=${{ secrets.VITE_API_URL }}
-            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
-            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
-            EOF
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env
             docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml down || true
             docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build
             docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml up -d

.github/workflows/deploy-dimentorin.yml

@@ -26,13 +26,9 @@ jobs:
             if [ ! -d ~/imphnen-frontend-service-dimentorin ]; then
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-dimentorin
             else
-              cd ~/imphnen-frontend-service-dimentorin && git fetch origin && git reset --hard origin/develop && git pull
+              cd ~/imphnen-frontend-service-dimentorin && git pull
             fi
-            cat > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env << EOF
-            VITE_API_URL=${{ secrets.VITE_API_URL }}
-            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
-            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
-            EOF
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env
             docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml down || true
             docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build
             docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml up -d

.github/workflows/deploy-gacha.yml

@@ -26,13 +26,9 @@ jobs:
             if [ ! -d ~/imphnen-frontend-service-gacha ]; then
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-gacha
             else
-              cd ~/imphnen-frontend-service-gacha && git fetch origin && git reset --hard origin/develop && git pull
+              cd ~/imphnen-frontend-service-gacha && git pull
             fi
-            cat > ~/imphnen-frontend-service-gacha/apps/gacha/.env << EOF
-            VITE_API_URL=${{ secrets.VITE_API_URL }}
-            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
-            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
-            EOF
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-gacha/apps/gacha/.env
             docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml down || true
             docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build
             docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml up -d

.github/workflows/deploy-hackathon.yml

@@ -1,39 +0,0 @@
-name: Deploy Hackathon
-
-on:
-  push:
-    branches:
-      - develop
-    paths:
-      - 'apps/hackathon/**' # Auto deploy when changes pushed to apps/hackathon
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v4
-
-      - name: Deploy via SSH
-        uses: appleboy/ssh-action@v1.0.3
-        with:
-          host: ${{ secrets.SSH_HOST }}
-          username: ${{ secrets.SSH_USER }}
-          key: ${{ secrets.SSH_KEY }}
-          port: ${{ secrets.SSH_PORT }}
-          script: |
-            set -e
-            if [ ! -d ~/imphnen-frontend-service-hackathon ]; then
-              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-hackathon
-            else
-              cd ~/imphnen-frontend-service-hackathon && git fetch origin && git reset --hard origin/develop && git pull
-            fi
-            cat > ~/imphnen-frontend-service-hackathon/apps/hackathon/.env << EOF
-            VITE_API_URL=${{ secrets.VITE_API_URL }}
-            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
-            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
-            EOF
-            docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml down || true
-            docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml build
-            docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml up -d
-            docker image prune -af

.github/workflows/deploy-landing.yml

@@ -26,13 +26,9 @@ jobs:
             if [ ! -d ~/imphnen-frontend-service ]; then
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service
             else
-              cd ~/imphnen-frontend-service && git fetch origin && git reset --hard origin/develop && git pull
+              cd ~/imphnen-frontend-service && git pull
             fi
-            cat > ~/imphnen-frontend-service/apps/landing/.env << EOF
-            NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}
-            NEXT_PUBLIC_SUPABASE_URL=${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
-            NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
-            EOF
+            echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" > ~/imphnen-frontend-service/apps/landing/.env
             docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
             docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build
             docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d

.gitignore

@@ -62,7 +62,3 @@ storybook-static
 # Next.js
 .next
 out
-.cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
-
-.env.local

apps/backoffice/.deploy

@@ -1 +0,0 @@
-Tue, Nov 25, 2025 11:09:55 AM

apps/backoffice/.deploy-trigger

@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks

apps/dimentorin/.deploy

@@ -1 +0,0 @@
-Tue, Nov 25, 2025 11:09:55 AM

apps/dimentorin/.deploy-trigger

@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks

apps/dimentorin/src/app/(public)/profile/_components/contexts/profile-context.tsx

@@ -3,8 +3,9 @@
 import React, { createContext, useContext, useMemo, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
+import { useAuthStore } from '@imphnen-frontend-service/utils';
 import {
-  useAuthStore,
+
   useUserMe,
   useUserById,
   useUpdateUserMe,

apps/dimentorin/src/app/_hooks/use-google-login.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { toast } from 'sonner';
 import { useNavigate } from 'react-router-dom';
-import { useAuthStore } from '@imphnen-frontend-service/service';
+import { useAuthStore } from '@imphnen-frontend-service/utils';
 
 export interface GoogleLoginResponse {
   access_token?: string;

apps/dimentorin/src/app/auth/google-callback/page.tsx

@@ -1,6 +1,7 @@
 import { FC, ReactElement, useEffect } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
-import { useGoogleCallback, useAuthStore } from '@imphnen-frontend-service/service';
+import { useAuthStore } from '@imphnen-frontend-service/utils';
+import { useGoogleCallback } from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
 
 export const GoogleCallbackPage: FC = (): ReactElement => {

apps/gacha/.deploy

@@ -1 +0,0 @@
-Tue, Nov 25, 2025 11:09:55 AM

apps/gacha/.deploy-trigger

@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks

apps/gacha/src/app/_hooks/use-login.ts

@@ -3,9 +3,9 @@ import {
   authLoginSchema,
   TLoginRequest,
   usePostLogin,
-  useAuthStore,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useAuthStore } from '@imphnen-frontend-service/utils';
 import { toast } from 'sonner';
 import { useNavigate } from 'react-router';
 import { useVerifyEmail } from './use-verify-email';

apps/hackathon/.deploy

@@ -1 +0,0 @@
-Tue, Nov 25, 2025 11:09:55 AM

apps/hackathon/.deploy-trigger

@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks

apps/hackathon/eslint.config.mjs

@@ -1,14 +0,0 @@
-import nx from '@nx/eslint-plugin';
-import baseConfig from '../../eslint.config.mjs';
-
-export default [
-  ...baseConfig,
-  ...nx.configs['flat/react'],
-  {
-    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
-    // Override or add rules here
-    rules: {
-      'jsx-a11y/accessible-emoji': 'off',
-    },
-  },
-];

apps/hackathon/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Hackathon</title>
-    <base href="/" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
-    <link rel="stylesheet" href="/src/index.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

apps/hackathon/postcss.config.mjs

@@ -1,9 +0,0 @@
-import { join } from 'path';
-
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {
-      base: join(import.meta.dirname, '../../'),
-    },
-  },
-};

apps/hackathon/project.json

@@ -1 +0,0 @@
-{}

apps/hackathon/src/app/404.tsx

@@ -1,23 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export default function NotFoundPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 mb-4">
-          Page Not Found
-        </h2>
-        <p className="text-gray-600 mb-8">
-          The page you are looking for doesn't exist or has been moved.
-        </p>
-        <Link
-          to="/"
-          className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
-        >
-          Go Back Home
-        </Link>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/auth/callback/page.tsx

@@ -1,179 +0,0 @@
-import { FC, ReactElement, useEffect, useState, useRef } from 'react';
-import { useNavigate } from 'react-router';
-import { useAuthStore, supabase } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-const CallbackPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const { setSession } = useAuthStore();
-  const [isProcessing, setIsProcessing] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const hasRunRef = useRef(false);
-
-  useEffect(() => {
-    const handleCallback = async () => {
-      if (hasRunRef.current) {
-        console.log('[Callback] Already processed, skipping...');
-        return;
-      }
-      hasRunRef.current = true;
-      try {
-        console.log('[Callback] Processing OAuth callback...');
-        console.log('[Callback] Current URL:', globalThis.location.href);
-
-        // Supabase client is configured with detectSessionInUrl: true
-        // This means Supabase automatically detects and processes OAuth tokens from the URL hash
-        // We just need to wait a moment for it to complete, then check for the session
-
-        console.log('[Callback] Waiting for Supabase to process OAuth callback...');
-        await new Promise(resolve => setTimeout(resolve, 1000));
-
-        // Get the session that Supabase automatically created from the URL hash
-        const { data: { session: sessionData }, error: sessionError } = await supabase.auth.getSession();
-
-        if (sessionError) {
-          console.error('[Callback] Session error:', sessionError);
-          throw new Error(sessionError.message || 'Failed to get session');
-        }
-
-        if (!sessionData || !sessionData.user) {
-          throw new Error('No session found after OAuth callback. Please try logging in again.');
-        }
-
-        console.log('[Callback] Supabase session established:', {
-          userId: sessionData.user.id,
-          email: sessionData.user.email,
-        });
-
-        // Create/update user in the users table (for foreign key constraints)
-        console.log('[Callback] Creating/updating user record...');
-        const { data: userData, error: upsertError } = await supabase
-          .from('users')
-          .upsert({
-            id: sessionData.user.id,
-            email: sessionData.user.email || '',
-            fullname: sessionData.user.user_metadata?.full_name ||
-                     sessionData.user.user_metadata?.name ||
-                     sessionData.user.email?.split('@')[0] || '',
-            avatar: sessionData.user.user_metadata?.avatar_url || '',
-            is_active: true,
-            updated_at: new Date().toISOString(),
-          }, {
-            onConflict: 'id',
-          })
-          .select()
-          .single();
-
-        if (upsertError) {
-          console.warn('[Callback] Failed to create user record:', upsertError);
-          // Don't throw - continue with login even if user record creation fails
-        } else {
-          console.log('[Callback] User record created/updated successfully');
-        }
-
-        // Store user-friendly data in Zustand for UI purposes
-        // Supabase now manages the actual auth session
-        // Use data from database if available, otherwise use OAuth metadata
-        const userRecord = userData || {
-          id: sessionData.user.id,
-          email: sessionData.user.email || '',
-          fullname: sessionData.user.user_metadata?.full_name ||
-                   sessionData.user.user_metadata?.name ||
-                   sessionData.user.email?.split('@')[0] || '',
-          avatar: sessionData.user.user_metadata?.avatar_url || '',
-          phone_number: '',
-          birthdate: '',
-          gender: '',
-          is_active: true,
-        };
-
-        setSession({
-          token: {
-            access_token: sessionData.access_token,
-            refresh_token: sessionData.refresh_token || '',
-          },
-          user: {
-            id: userRecord.id,
-            email: userRecord.email,
-            fullname: userRecord.fullname,
-            phone_number: userRecord.phone_number || '',
-            avatar: userRecord.avatar || '',
-            birthdate: userRecord.birthdate || '',
-            gender: userRecord.gender || '',
-            is_active: userRecord.is_active,
-            location: userRecord.location,
-            bio: userRecord.bio,
-            skills: userRecord.skills,
-            role: {
-              id: '',
-              name: 'user',
-              permissions: [],
-              created_at: '',
-              updated_at: '',
-            },
-          },
-        });
-
-        console.log('[Callback] Session stored successfully');
-        toast.success('Login successful!');
-        setIsProcessing(false);
-
-        // Check if user has completed onboarding (has location)
-        // Use globalThis.location.replace for hard redirect to prevent history issues
-        if (userRecord.location) {
-          console.log('[Callback] User has completed onboarding, redirecting to dashboard...');
-          globalThis.location.replace('/dashboard');
-        } else {
-          console.log('[Callback] User needs onboarding, redirecting...');
-          globalThis.location.replace('/onboarding/user');
-        }
-      } catch (err) {
-        console.error('[Callback] Error:', err);
-        setError((err as Error).message);
-        setIsProcessing(false);
-        toast.error('An error occurred during login');
-
-        setTimeout(() => {
-          navigate('/auth/login');
-        }, 3000);
-      }
-    };
-
-    handleCallback();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Run only once on mount
-
-  if (error) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
-        <div className="bg-white w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200">
-          <div className="text-center mb-6">
-            <div className="text-red-500 text-5xl mb-4">⚠️</div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-2">
-              GitHub Login Failed
-            </h2>
-            <p className="text-red-600 mb-4 whitespace-pre-line">{error}</p>
-          </div>
-
-          <p className="text-gray-600 text-sm mt-6 text-center">
-            Redirecting to login page in 3 seconds...
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50">
-      <div className="text-center">
-        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">
-          Completing login...
-        </h2>
-        <p className="text-gray-600">Please wait</p>
-      </div>
-    </div>
-  );
-};
-
-export default CallbackPage;

apps/hackathon/src/app/auth/forgot-password/page.tsx

@@ -1,125 +0,0 @@
-import { useState } from 'react';
-import { supabase } from '@imphnen-frontend-service/service';
-import { Link } from 'react-router';
-import { toast } from 'sonner';
-
-export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [emailSent, setEmailSent] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!email) {
-      toast.error('Please enter your email');
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-
-      const { error } = await supabase.auth.resetPasswordForEmail(email, {
-        redirectTo: `${window.location.origin}/auth/reset-password`,
-      });
-
-      if (error) {
-        throw error;
-      }
-
-      setEmailSent(true);
-      toast.success('Password reset email sent! Check your inbox.');
-    } catch (err) {
-      console.error('Failed to send reset email:', err);
-      toast.error((err as Error).message || 'Failed to send reset email');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  if (emailSent) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-        <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 text-center">
-          <div className="mb-6">
-            <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
-              <span className="text-3xl">✓</span>
-            </div>
-            <h2 className="text-3xl font-bold text-gray-900 mb-2">
-              Check Your Email
-            </h2>
-            <p className="text-gray-600">
-              We've sent a password reset link to <strong>{email}</strong>
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            <p className="text-sm text-gray-600">
-              Click the link in the email to reset your password. The link will expire in 1 hour.
-            </p>
-
-            <Link to="/auth/login">
-              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors">
-                Back to Login
-              </button>
-            </Link>
-
-            <button
-              onClick={() => setEmailSent(false)}
-              className="w-full py-3 text-gray-600 hover:text-gray-900 transition-colors"
-            >
-              Send another email
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Forgot Password?
-          </h2>
-          <p className="text-gray-600">
-            No worries, we'll send you reset instructions
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
-              Email Address
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={isLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {isLoading ? 'Sending...' : 'Send Reset Link'}
-          </button>
-        </form>
-
-        <div className="mt-6 text-center">
-          <Link to="/auth/login" className="text-primary-600 hover:text-primary-700 font-semibold">
-            ← Back to Login
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/auth/login/page-original.tsx

@@ -1,89 +0,0 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate } from 'react-router';
-import { useGitHubAuth } from '@imphnen-frontend-service/service';
-import { useSession } from '@imphnen-frontend-service/utils';
-import { GithubOutlined } from '@ant-design/icons';
-
-const LoginPage: FC = (): ReactElement => {
-  console.log('[LoginPage] Rendering...');
-
-  const navigate = useNavigate();
-  const { signInWithGitHub } = useGitHubAuth();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const { isAuthenticated } = useSession();
-
-  console.log('[LoginPage] isAuthenticated:', isAuthenticated);
-
-  useEffect(() => {
-    console.log('[LoginPage] useEffect - isAuthenticated:', isAuthenticated);
-    if (isAuthenticated) {
-      console.log('[LoginPage] Redirecting to dashboard...');
-      navigate('/dashboard');
-    }
-  }, [isAuthenticated, navigate]);
-
-  const handleGithubLogin = async () => {
-    try {
-      setIsGithubLoading(true);
-      console.log('[Login] Initiating GitHub OAuth...');
-
-      const result = await signInWithGitHub();
-      console.log('[Login] OAuth result:', result);
-
-      // Check if we got a redirect URL
-      if (result?.url) {
-        console.log('[Login] Redirecting to GitHub OAuth:', result.url);
-        // Supabase should handle the redirect automatically
-        // If we're still here after 2 seconds, manually redirect
-        setTimeout(() => {
-          if (result.url) {
-            globalThis.location.href = result.url;
-          }
-        }, 2000);
-      } else {
-        console.error('[Login] No OAuth URL returned');
-        setIsGithubLoading(false);
-      }
-    } catch (error) {
-      console.error('[Login] GitHub login failed:', error);
-      setIsGithubLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-100">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Welcome to Hackathon
-          </h2>
-          <p className="text-gray-600">
-            Sign in with your GitHub account to join or create your hackathon team
-          </p>
-        </div>
-
-        <Button
-          className="w-full gap-2 py-3"
-          variant="secondary"
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-        >
-          <GithubOutlined className="text-xl" />
-          <span className="font-semibold">
-            {isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
-          </span>
-        </Button>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 text-sm">
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LoginPage;

apps/hackathon/src/app/auth/login/page.tsx

@@ -1,209 +0,0 @@
-import { useState } from 'react';
-import { useGitHubAuth, useEmailAuth, supabase, useAuthStore } from '@imphnen-frontend-service/service';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { toast } from 'sonner';
-
-export default function LoginPage() {
-  console.log('[LoginPage] Rendering...');
-
-  const navigate = useNavigate();
-  const { setSession } = useAuthStore();
-  const { signInWithGitHub } = useGitHubAuth();
-  const { signInWithEmail } = useEmailAuth();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-
-  const handleEmailLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-
-    if (!email || !password) {
-      setError('Please enter both email and password');
-      return;
-    }
-
-    try {
-      setIsEmailLoading(true);
-      console.log('[Login] Attempting email login...');
-
-      const result = await signInWithEmail(email, password);
-      console.log('[Login] Email login successful:', result);
-
-      // Get user data from database
-      const { data: userData } = await supabase
-        .from('users')
-        .select('*')
-        .eq('id', result.user.id)
-        .single();
-
-      // Store session in Zustand
-      setSession({
-        token: {
-          access_token: result.session.access_token,
-          refresh_token: result.session.refresh_token || '',
-        },
-        user: {
-          id: result.user.id,
-          email: result.user.email || '',
-          fullname: userData?.fullname || result.user.user_metadata?.full_name || '',
-          phone_number: userData?.phone_number || '',
-          avatar: userData?.avatar || '',
-          birthdate: userData?.birthdate || '',
-          gender: userData?.gender || '',
-          is_active: userData?.is_active || true,
-          location: userData?.location,
-          bio: userData?.bio,
-          skills: userData?.skills,
-          role: {
-            id: '',
-            name: 'user',
-            permissions: [],
-            created_at: '',
-            updated_at: '',
-          },
-        },
-      });
-
-      toast.success('Login successful!');
-
-      // Redirect based on onboarding status
-      if (userData?.location) {
-        navigate('/dashboard');
-      } else {
-        navigate('/onboarding/user');
-      }
-    } catch (err) {
-      console.error('[Login] Email login failed:', err);
-      setError((err as Error).message || 'Login failed');
-      setIsEmailLoading(false);
-    }
-  };
-
-  const handleGithubLogin = async () => {
-    try {
-      setIsGithubLoading(true);
-      console.log('[Login] Initiating GitHub OAuth...');
-
-      const result = await signInWithGitHub();
-      console.log('[Login] OAuth result:', result);
-
-      // Check if we got a redirect URL
-      if (result?.url) {
-        console.log('[Login] Redirecting to GitHub OAuth:', result.url);
-        // Manually redirect immediately
-        globalThis.location.href = result.url;
-      } else {
-        console.error('[Login] No OAuth URL returned');
-        setIsGithubLoading(false);
-      }
-    } catch (error) {
-      console.error('[Login] GitHub login failed:', error);
-      setIsGithubLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Welcome Back
-          </h2>
-          <p className="text-gray-600">
-            Sign in to join or create your hackathon team
-          </p>
-        </div>
-
-        {error && (
-          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-red-600 text-sm">{error}</p>
-          </div>
-        )}
-
-        <form onSubmit={handleEmailLogin} className="space-y-4">
-          <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
-                Password
-              </label>
-              <Link to="/auth/forgot-password" className="text-sm text-primary-600 hover:text-primary-700">
-                Forgot password?
-              </Link>
-            </div>
-            <input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="••••••••"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={isEmailLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {isEmailLoading ? 'Signing in...' : 'Sign in with Email'}
-          </button>
-        </form>
-
-        <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300"></div>
-          <span className="px-4 text-sm text-gray-500">OR</span>
-          <div className="flex-1 border-t border-gray-300"></div>
-        </div>
-
-        <button
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
-        >
-          <GithubOutlined className="text-xl" />
-          <span>
-            {isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
-          </span>
-        </button>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
-            Don't have an account?{' '}
-            <a href="/auth/signup" className="text-primary-600 hover:text-primary-700 font-semibold">
-              Sign up
-            </a>
-          </p>
-        </div>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/auth/reset-password/page.tsx

@@ -1,131 +0,0 @@
-import { useState, useEffect } from 'react';
-import { supabase } from '@imphnen-frontend-service/service';
-import { useNavigate } from 'react-router';
-import { toast } from 'sonner';
-
-export default function ResetPasswordPage() {
-  const navigate = useNavigate();
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [isValidToken, setIsValidToken] = useState(false);
-
-  useEffect(() => {
-    // Check if we have a valid session (from the reset link)
-    supabase.auth.getSession().then(({ data: { session } }) => {
-      if (session) {
-        setIsValidToken(true);
-      } else {
-        toast.error('Invalid or expired reset link');
-        setTimeout(() => navigate('/auth/forgot-password'), 2000);
-      }
-    });
-  }, [navigate]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (password !== confirmPassword) {
-      toast.error('Passwords do not match');
-      return;
-    }
-
-    if (password.length < 6) {
-      toast.error('Password must be at least 6 characters');
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-
-      const { error } = await supabase.auth.updateUser({
-        password: password
-      });
-
-      if (error) {
-        throw error;
-      }
-
-      toast.success('Password updated successfully!');
-
-      // Sign out and redirect to login
-      await supabase.auth.signOut();
-      navigate('/auth/login');
-    } catch (err) {
-      console.error('Failed to reset password:', err);
-      toast.error((err as Error).message || 'Failed to reset password');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  if (!isValidToken) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50">
-        <div className="text-center">
-          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600">Verifying reset link...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Set New Password
-          </h2>
-          <p className="text-gray-600">
-            Enter your new password below
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
-              New Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="••••••••"
-              disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-              minLength={6}
-            />
-          </div>
-
-          <div>
-            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
-              Confirm New Password
-            </label>
-            <input
-              id="confirmPassword"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              placeholder="••••••••"
-              disabled={isLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-              minLength={6}
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={isLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {isLoading ? 'Updating...' : 'Update Password'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/auth/signup/page.tsx

@@ -1,257 +0,0 @@
-import { useState } from 'react';
-import { useGitHubAuth, useEmailAuth, supabase, useAuthStore } from '@imphnen-frontend-service/service';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router';
-import { toast } from 'sonner';
-
-export default function SignupPage() {
-  const navigate = useNavigate();
-  const { setSession } = useAuthStore();
-  const { signInWithGitHub } = useGitHubAuth();
-  const { signUpWithEmail } = useEmailAuth();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
-  const [fullname, setFullname] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-
-  const handleEmailSignup = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-
-    if (!fullname || !email || !password || !confirmPassword) {
-      setError('Please fill in all fields');
-      return;
-    }
-
-    if (password !== confirmPassword) {
-      setError('Passwords do not match');
-      return;
-    }
-
-    if (password.length < 6) {
-      setError('Password must be at least 6 characters long');
-      return;
-    }
-
-    try {
-      setIsEmailLoading(true);
-      console.log('[Signup] Attempting email signup...');
-
-      const result = await signUpWithEmail(email, password, fullname);
-      console.log('[Signup] Email signup successful:', result);
-
-      if (!result.user) {
-        throw new Error('Signup failed - no user returned');
-      }
-
-      // Create user record in database
-      const { error: upsertError } = await supabase
-        .from('users')
-        .upsert({
-          id: result.user.id,
-          email: result.user.email || '',
-          fullname: fullname,
-          is_active: true,
-          updated_at: new Date().toISOString(),
-        }, {
-          onConflict: 'id',
-        });
-
-      if (upsertError) {
-        console.warn('[Signup] Failed to create user record:', upsertError);
-      }
-
-      // If session is available (email confirmation disabled), store it
-      if (result.session) {
-        setSession({
-          token: {
-            access_token: result.session.access_token,
-            refresh_token: result.session.refresh_token || '',
-          },
-          user: {
-            id: result.user.id,
-            email: result.user.email || '',
-            fullname: fullname,
-            phone_number: '',
-            avatar: '',
-            birthdate: '',
-            gender: '',
-            is_active: true,
-            role: {
-              id: '',
-              name: 'user',
-              permissions: [],
-              created_at: '',
-              updated_at: '',
-            },
-          },
-        });
-
-        toast.success('Account created successfully!');
-        navigate('/onboarding/user');
-      } else {
-        // Email confirmation is enabled
-        toast.success('Account created! Please check your email to verify your account.');
-        setTimeout(() => {
-          navigate('/auth/login');
-        }, 2000);
-      }
-    } catch (err) {
-      console.error('[Signup] Email signup failed:', err);
-      setError((err as Error).message || 'Signup failed');
-      setIsEmailLoading(false);
-    }
-  };
-
-  const handleGithubLogin = async () => {
-    try {
-      setIsGithubLoading(true);
-      console.log('[Signup] Initiating GitHub OAuth...');
-
-      const result = await signInWithGitHub();
-      console.log('[Signup] OAuth result:', result);
-
-      if (result?.url) {
-        console.log('[Signup] Redirecting to GitHub OAuth:', result.url);
-        globalThis.location.href = result.url;
-      } else {
-        console.error('[Signup] No OAuth URL returned');
-        setIsGithubLoading(false);
-      }
-    } catch (error) {
-      console.error('[Signup] GitHub login failed:', error);
-      setIsGithubLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 p-4">
-      <div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2">
-            Create Account
-          </h2>
-          <p className="text-gray-600">
-            Join the hackathon community
-          </p>
-        </div>
-
-        {error && (
-          <div className="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-red-600 text-sm">{error}</p>
-          </div>
-        )}
-
-        <form onSubmit={handleEmailSignup} className="space-y-4">
-          <div>
-            <label htmlFor="fullname" className="block text-sm font-medium text-gray-700 mb-1">
-              Full Name
-            </label>
-            <input
-              id="fullname"
-              type="text"
-              value={fullname}
-              onChange={(e) => setFullname(e.target.value)}
-              placeholder="John Doe"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <div>
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
-              Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="••••••••"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <div>
-            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
-              Confirm Password
-            </label>
-            <input
-              id="confirmPassword"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              placeholder="••••••••"
-              disabled={isEmailLoading}
-              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={isEmailLoading}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {isEmailLoading ? 'Creating account...' : 'Create Account'}
-          </button>
-        </form>
-
-        <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300"></div>
-          <span className="px-4 text-sm text-gray-500">OR</span>
-          <div className="flex-1 border-t border-gray-300"></div>
-        </div>
-
-        <button
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
-        >
-          <GithubOutlined className="text-xl" />
-          <span>
-            {isGithubLoading ? 'Connecting...' : 'Sign up with GitHub'}
-          </span>
-        </button>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-600 text-sm">
-            Already have an account?{' '}
-            <a href="/auth/login" className="text-primary-600 hover:text-primary-700 font-semibold">
-              Sign in
-            </a>
-          </p>
-        </div>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 text-xs">
-            By signing up, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/dashboard/page.tsx

@@ -1,282 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Link, useNavigate } from 'react-router';
-import { useMyTeams, useMyInvitations, useRespondToInvitation, supabase, useAuthStore } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-const DashboardPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const { session, clearSession } = useAuthStore();
-  const { data: teamsData } = useMyTeams();
-  const { data: invitationsData } = useMyInvitations();
-  const { mutateAsync: respondToInvitation } = useRespondToInvitation();
-
-  const user = session?.user;
-  const myTeams = teamsData?.data || [];
-  const invitations = invitationsData?.data || [];
-
-  const handleAcceptInvitation = async (invitationId: string) => {
-    try {
-      await respondToInvitation({ invitationId, action: 'accept' });
-      toast.success('Invitation accepted! You are now a team member.');
-    } catch (error) {
-      console.error('Failed to accept invitation:', error);
-      toast.error('Failed to accept invitation');
-    }
-  };
-
-  const handleRejectInvitation = async (invitationId: string) => {
-    try {
-      await respondToInvitation({ invitationId, action: 'reject' });
-      toast.success('Invitation declined');
-    } catch (error) {
-      console.error('Failed to reject invitation:', error);
-      toast.error('Failed to decline invitation');
-    }
-  };
-
-  const handleLogout = async () => {
-    try {
-      // Clear Supabase session
-      await supabase.auth.signOut();
-
-      // Clear Zustand store
-      clearSession();
-
-      // Clear localStorage
-      localStorage.clear();
-
-      toast.success('Logged out successfully');
-
-      // Redirect to login
-      navigate('/auth/login');
-    } catch (error) {
-      console.error('Logout error:', error);
-      // Even if there's an error, clear everything and redirect
-      clearSession();
-      localStorage.clear();
-      navigate('/auth/login');
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <div className="bg-white border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900">
-                Welcome, {user?.fullname || 'User'}!
-              </h1>
-              <p className="text-gray-600 mt-1">
-                {user?.location && `📍 ${user.location}`}
-              </p>
-            </div>
-            <div className="flex items-center space-x-3">
-              {user?.avatar && (
-                <img
-                  src={user.avatar}
-                  alt="Profile"
-                  className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
-                />
-              )}
-              <Button
-                onClick={handleLogout}
-                variant="secondary"
-                className="bg-red-500 hover:bg-red-600 text-white"
-              >
-                Logout
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Team Invitations */}
-        {invitations.length > 0 && (
-          <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
-            <h2 className="text-xl font-bold text-gray-900 mb-4">
-              Team Invitations ({invitations.length})
-            </h2>
-            <div className="space-y-3">
-              {invitations.map((invitation) => (
-                <div key={invitation.id} className="bg-white p-4 rounded-lg shadow-sm flex items-center justify-between">
-                  <div>
-                    <p className="font-medium text-gray-900">{invitation.team.name}</p>
-                    <p className="text-sm text-gray-600">
-                      Invited by {invitation.inviter.fullname}
-                    </p>
-                  </div>
-                  <div className="flex space-x-2">
-                    <Button
-                      size="sm"
-                      onClick={() => handleAcceptInvitation(invitation.id)}
-                    >
-                      Accept
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      onClick={() => handleRejectInvitation(invitation.id)}
-                    >
-                      Decline
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* My Teams */}
-        {myTeams.length > 0 ? (
-          <div className="mb-8">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">My Team</h2>
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              {myTeams.map((team) => (
-                <Link
-                  key={team.id}
-                  to={`/teams/${team.id}`}
-                  className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
-                >
-                  {team.banner && (
-                    <img
-                      src={team.banner}
-                      alt={team.name}
-                      className="w-full h-32 object-cover"
-                    />
-                  )}
-                  <div className="p-6">
-                    <div className="flex items-center space-x-3 mb-3">
-                      {team.logo && (
-                        <img
-                          src={team.logo}
-                          alt={team.name}
-                          className="w-12 h-12 rounded-full object-cover"
-                        />
-                      )}
-                      <div>
-                        <h3 className="text-lg font-bold text-gray-900">{team.name}</h3>
-                        <p className="text-sm text-gray-600">📍 {team.city}</p>
-                      </div>
-                    </div>
-                    <p className="text-gray-600 text-sm line-clamp-2">
-                      {team.description}
-                    </p>
-                  </div>
-                </Link>
-              ))}
-            </div>
-          </div>
-        ) : (
-          /* No Team - Show CTAs */
-          <div className="bg-white rounded-lg shadow-md p-8">
-            <div className="text-center mb-8">
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">
-                You're not in a team yet
-              </h2>
-              <p className="text-gray-600">
-                Join an existing team or create your own to get started
-              </p>
-            </div>
-
-            <div className="grid gap-6 md:grid-cols-2 max-w-2xl mx-auto">
-              <Link
-                to="/teams/browse"
-                className="bg-blue-600 text-white rounded-lg p-6 hover:bg-blue-700 transition-colors text-center"
-              >
-                <div className="text-4xl mb-3">🔍</div>
-                <h3 className="text-xl font-bold mb-2">Browse Teams</h3>
-                <p className="text-blue-100">
-                  Find and join existing teams looking for members
-                </p>
-              </Link>
-
-              <Link
-                to="/teams/create"
-                className="bg-green-600 text-white rounded-lg p-6 hover:bg-green-700 transition-colors text-center"
-              >
-                <div className="text-4xl mb-3">➕</div>
-                <h3 className="text-xl font-bold mb-2">Create Team</h3>
-                <p className="text-green-100">
-                  Start your own team and invite members
-                </p>
-              </Link>
-            </div>
-          </div>
-        )}
-
-        {/* User Profile Card */}
-        <div className="mt-8 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-lg overflow-hidden">
-          <div className="bg-gradient-to-r from-blue-600 to-indigo-600 h-24"></div>
-          <div className="px-8 pb-8">
-            <div className="flex items-start -mt-12 mb-6">
-              {user?.avatar && (
-                <img
-                  src={user.avatar}
-                  alt={user.fullname}
-                  className="w-24 h-24 rounded-full border-4 border-white shadow-lg object-cover"
-                />
-              )}
-              <div className="ml-6 mt-14">
-                <h2 className="text-2xl font-bold text-gray-900">{user?.fullname}</h2>
-                {user?.location ? (
-                  <p className="text-gray-600 flex items-center mt-1">
-                    <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
-                    </svg>
-                    {user.location}
-                  </p>
-                ) : (
-                  <Link to="/onboarding/user" className="text-blue-600 hover:text-blue-700 text-sm mt-1 inline-block">
-                    Complete your profile →
-                  </Link>
-                )}
-              </div>
-            </div>
-
-            <div className="space-y-6">
-              {user?.bio && (
-                <div className="bg-white rounded-lg p-4 shadow-sm">
-                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-2">About</h3>
-                  <p className="text-gray-800 leading-relaxed">{user.bio}</p>
-                </div>
-              )}
-
-              <div className="bg-white rounded-lg p-4 shadow-sm">
-                <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Contact</h3>
-                <div className="flex items-center text-gray-700">
-                  <svg className="w-5 h-5 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
-                    <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
-                  </svg>
-                  <span className="text-gray-900">{user?.email}</span>
-                </div>
-              </div>
-
-              {user?.skills && user.skills.length > 0 && (
-                <div className="bg-white rounded-lg p-4 shadow-sm">
-                  <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Skills</h3>
-                  <div className="flex flex-wrap gap-3">
-                    {user.skills.map((skill: string) => (
-                      <span
-                        key={skill}
-                        className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium shadow-sm hover:bg-blue-700 transition-colors"
-                      >
-                        {skill}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardPage;

apps/hackathon/src/app/error.tsx

@@ -1,29 +0,0 @@
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
-
-export default function ErrorPage() {
-  const error = useRouteError();
-  let errorMessage: string;
-
-  if (isRouteErrorResponse(error)) {
-    errorMessage = error.statusText;
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
-  } else if (typeof error === 'string') {
-    errorMessage = error;
-  } else {
-    console.error(error);
-    errorMessage = 'Unknown error';
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
-        <p className="text-xl text-gray-700 mb-2">
-          Sorry, an unexpected error has occurred.
-        </p>
-        <p className="text-gray-500 italic">{errorMessage}</p>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/layout.tsx

@@ -1,125 +0,0 @@
-import { Outlet, ScrollRestoration, useLocation, useNavigate } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { supabase } from '@imphnen-frontend-service/service';
-
-// Define onboarding routes
-const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
-
-export default function RootLayout() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [isChecking, setIsChecking] = useState(true);
-
-  useEffect(() => {
-    const checkAuth = async () => {
-      const pathname = location.pathname;
-
-      console.log('[Layout] Checking auth for route:', pathname);
-
-      // Allow hackathon pages without checks
-      if (pathname.startsWith('/hackathons')) {
-        console.log('[Layout] Public route, allowing access');
-        setIsChecking(false);
-        return;
-      }
-
-      // Allow auth callback without checks
-      if (pathname === '/auth/callback') {
-        console.log('[Layout] Auth callback, allowing access');
-        setIsChecking(false);
-        return;
-      }
-
-      // Check Supabase session
-      const { data: { session }, error } = await supabase.auth.getSession();
-
-      if (error) {
-        console.error('[Layout] Session error:', error);
-      }
-
-      // Public auth pages (login, signup, forgot-password, reset-password) - allow unauthenticated access
-      const isPublicAuthPage = pathname === '/auth/login' || pathname === '/auth/signup' || pathname === '/auth/forgot-password' || pathname === '/auth/reset-password';
-
-      if (isPublicAuthPage) {
-        // If already authenticated and not on password reset pages, redirect to dashboard
-        if (session && pathname !== '/auth/reset-password') {
-          console.log('[Layout] Already authenticated, redirecting to dashboard');
-          navigate('/dashboard', { replace: true });
-          setIsChecking(false);
-          return;
-        }
-        // Allow unauthenticated access
-        console.log('[Layout] Public auth page, allowing access');
-        setIsChecking(false);
-        return;
-      }
-
-      // Home page - allow everyone to view the landing page
-      if (pathname === '/') {
-        console.log('[Layout] Landing page, allowing access');
-        setIsChecking(false);
-        return;
-      }
-
-      // Require authentication for all other routes
-      if (!session) {
-        console.log('[Layout] No session, redirecting to login');
-        navigate('/auth/login', { replace: true });
-        setIsChecking(false);
-        return;
-      }
-
-      // Check if user has completed onboarding (skip for onboarding routes)
-      if (!ONBOARDING_ROUTES.has(pathname)) {
-        try {
-          const { data: userData, error: userError } = await supabase
-            .from('users')
-            .select('location')
-            .eq('id', session.user.id)
-            .single();
-
-          if (userError) {
-            console.error('[Layout] Failed to fetch user data:', userError);
-            setIsChecking(false);
-            return;
-          }
-
-          const hasLocation = !!userData?.location;
-
-          if (!hasLocation) {
-            console.log('[Layout] User needs onboarding, redirecting');
-            navigate('/onboarding/user', { replace: true });
-            setIsChecking(false);
-            return;
-          }
-        } catch (error) {
-          console.error('[Layout] Unexpected error checking onboarding:', error);
-        }
-      }
-
-      console.log('[Layout] Auth check passed');
-      setIsChecking(false);
-    };
-
-    checkAuth();
-  }, [location.pathname, navigate]);
-
-  // Show loading state while checking auth
-  if (isChecking) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50">
-        <div className="text-center">
-          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <Outlet />
-      <ScrollRestoration />
-    </>
-  );
-}

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

@@ -1,272 +0,0 @@
-import { FC, ReactElement, useState, useEffect } from 'react';
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate } from 'react-router';
-import { useForm, Controller } from 'react-hook-form';
-import {
-  userOnboardingSchema,
-  TUserOnboardingForm,
-  useUpdateUserMe,
-  useUploadAvatar,
-  useUserMe,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-import INDONESIAN_CITIES from '../../../constants/cities';
-
-const ROLE_OPTIONS = [
-  'Frontend Developer',
-  'Backend Developer',
-  'Full Stack Developer',
-  'DevOps Engineer',
-  'UI/UX Designer',
-  'Product Manager',
-  'Data Scientist',
-  'Mobile Developer',
-];
-
-const UserOnboardingPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const [avatarFile, setAvatarFile] = useState<File | null>(null);
-  const [avatarPreview, setAvatarPreview] = useState<string>('');
-
-  const { data: userData } = useUserMe();
-  const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
-  const { mutateAsync: uploadAvatar, isPending: isUploading } =
-    useUploadAvatar();
-  const { session } = useAuthStore();
-
-  const form = useForm<TUserOnboardingForm>({
-    resolver: zodResolver(userOnboardingSchema),
-    mode: 'all',
-    defaultValues: {
-      fullname: session?.user?.fullname || userData?.data?.fullname || '',
-      location: session?.user?.location || '',
-      bio: session?.user?.bio || '',
-      skills: session?.user?.skills || [],
-    },
-  });
-
-  // Set initial avatar preview from GitHub avatar if available
-  useEffect(() => {
-    if (session?.user?.avatar && !avatarPreview) {
-      setAvatarPreview(session.user.avatar);
-    }
-  }, [session?.user?.avatar, avatarPreview]);
-
-  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      setAvatarFile(file);
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setAvatarPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      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...');
-        const uploadResult = await uploadAvatar(avatarFile);
-        avatarUrl = uploadResult.data.url;
-        console.log('[Onboarding] Avatar uploaded:', avatarUrl);
-      }
-
-      // Update user in Supabase
-      console.log('[Onboarding] Updating user in Supabase...');
-      const result = await updateUser({
-        fullname: data.fullname,
-        avatar: avatarUrl,
-        location: data.location,
-        bio: data.bio,
-        skills: data.skills,
-      });
-      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...');
-      // 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);
-      alert(
-        `Onboarding failed: ${
-          error instanceof Error ? error.message : 'Unknown error'
-        }`
-      );
-    }
-  });
-
-  return (
-    <div className="flex flex-col justify-center items-center min-h-screen bg-gray-50 px-4 py-8">
-      <div className="bg-white w-full max-w-2xl p-8 rounded-xl shadow-lg">
-        <div className="mb-6">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
-            Complete Your Profile
-          </h1>
-          <p className="text-gray-600">
-            Tell us more about yourself to get started
-          </p>
-        </div>
-
-        <form onSubmit={onSubmit} className="space-y-6">
-          {/* Avatar Upload */}
-          <div className="flex flex-col items-center space-y-4">
-            <div className="relative">
-              {avatarPreview ? (
-                <img
-                  src={avatarPreview}
-                  alt="Avatar preview"
-                  className="w-32 h-32 rounded-full object-cover border-4 border-gray-200"
-                />
-              ) : (
-                <div className="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center">
-                  <span className="text-gray-400 text-4xl">👤</span>
-                </div>
-              )}
-            </div>
-            <div>
-              <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">
-                  {avatarPreview ? 'Change Photo' : 'Upload Photo'}
-                </span>
-                <input
-                  id="avatar"
-                  type="file"
-                  accept="image/*"
-                  className="hidden"
-                  onChange={handleAvatarChange}
-                />
-              </label>
-              <p className="text-xs text-gray-500 mt-2 text-center">
-                Optional, but highly recommended
-              </p>
-            </div>
-          </div>
-
-          {/* Full Name */}
-          <ControlledInputField
-            control={form.control}
-            label="Full Name"
-            placeholder="Enter your full name"
-            name="fullname"
-          />
-
-          {/* City */}
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
-              City <span className="text-red-500">*</span>
-            </label>
-            <Controller
-              control={form.control}
-              name="location"
-              render={({ field, fieldState }) => (
-                <div>
-                  <select
-                    {...field}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  >
-                    <option value="">Select your city</option>
-                    {INDONESIAN_CITIES.map((city) => (
-                      <option key={city} value={city}>
-                        {city}
-                      </option>
-                    ))}
-                  </select>
-                  {fieldState.error && (
-                    <p className="text-sm text-red-500 mt-1">
-                      {fieldState.error.message}
-                    </p>
-                  )}
-                </div>
-              )}
-            />
-          </div>
-
-          {/* Role/Skills */}
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
-              Role / Skills
-            </label>
-            <Controller
-              control={form.control}
-              name="skills"
-              render={({ field }) => (
-                <div className="space-y-2">
-                  <div className="grid grid-cols-2 gap-2">
-                    {ROLE_OPTIONS.map((role) => (
-                      <label
-                        key={role}
-                        className="flex items-center space-x-2 cursor-pointer"
-                      >
-                        <input
-                          type="checkbox"
-                          checked={field.value?.includes(role)}
-                          onChange={(e) => {
-                            const newValue = e.target.checked
-                              ? [...(field.value || []), role]
-                              : (field.value || []).filter((v) => v !== role);
-                            field.onChange(newValue);
-                          }}
-                          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                        />
-                        <span className="text-sm">{role}</span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-              )}
-            />
-          </div>
-
-          {/* Bio */}
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-gray-700">
-              Bio <span className="text-gray-400">(Optional)</span>
-            </label>
-            <Controller
-              control={form.control}
-              name="bio"
-              render={({ field, fieldState }) => (
-                <div>
-                  <Textarea
-                    {...field}
-                    placeholder="Tell us about yourself..."
-                    rows={4}
-                    className="w-full"
-                  />
-                  {fieldState.error && (
-                    <p className="text-sm text-red-500 mt-1">
-                      {fieldState.error.message}
-                    </p>
-                  )}
-                </div>
-              )}
-            />
-          </div>
-
-          <Button
-            className="w-full"
-            type="submit"
-            disabled={!form.formState.isValid || isUpdating || isUploading}
-          >
-            {isUpdating || isUploading ? 'Saving...' : 'Complete Setup'}
-          </Button>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default UserOnboardingPage;

apps/hackathon/src/app/page.tsx

@@ -1,759 +0,0 @@
-import { useNavigate } from 'react-router';
-import { useState } from 'react';
-
-export default function HomePage() {
-  const navigate = useNavigate();
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [openFaq, setOpenFaq] = useState<number | null>(0);
-
-  const faqs = [
-    {
-      question: 'Siapa yang bisa mengikuti hackathon ini?',
-      answer:
-        'Hackathon ini terbuka untuk mahasiswa, fresh graduate, dan profesional muda yang memiliki passion di bidang teknologi. Peserta dapat mendaftar secara tim.',
-    },
-    {
-      question: 'Apakah ada biaya pendaftaran?',
-      answer:
-        'Tidak, hackathon ini gratis dan terbuka untuk semua peserta yang memenuhi kriteria.',
-    },
-    {
-      question: 'Apa tema hackathon kali ini?',
-      answer:
-        'Tema hackathon kali ini adalah "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif".',
-    },
-    {
-      question: 'Bagaimana format pelaksanaannya?',
-      answer:
-        'Hackathon dilaksanakan secara online dengan berbagai tahap mulai dari pendaftaran, technical meeting, tahap penyisihan, hingga final.',
-    },
-    {
-      question: 'Apa hadiah lombanya?',
-      answer:
-        'Total hadiah senilai Rp14.500.000 dengan juara 1 mendapat Rp6.000.000, juara 2 Rp4.000.000, juara 3 Rp2.500.000, dan juara kategori lainnya Rp2.000.000.',
-    },
-    {
-      question: 'Apakah harus membentuk tim? Boleh solo?',
-      answer:
-        'Ya, peserta harus membentuk tim dengan maksimal 3 orang per tim.',
-    },
-    {
-      question: 'Apakah boleh menggunakan AI (vibe coding)?',
-      answer:
-        'Ya, peserta diperbolehkan menggunakan AI tools untuk membantu development.',
-    },
-    {
-      question: 'Apa project wajib di-deploy?',
-      answer:
-        'Ya, project harus di-deploy dan dapat diakses secara online untuk penilaian.',
-    },
-    {
-      question: 'Apakah peserta mendapatkan sertifikat?',
-      answer:
-        'Ya, semua peserta yang menyelesaikan hackathon akan mendapatkan sertifikat.',
-    },
-    {
-      question: 'Website error dan terjadi masalah?',
-      answer:
-        'Silakan hubungi kami melalui grup WA Hackathon atau email imphnen@gmail.com.',
-    },
-  ];
-
-  return (
-    <div className="min-h-screen bg-white">
-      {/* Navigation */}
-      <nav className="flex items-center justify-between px-4 md:px-8 py-4 border-b border-gray-200 bg-white sticky top-0 z-50">
-        <div className="flex items-center gap-2">
-          <span className="text-lg md:text-xl font-bold">IMPHNEN</span>
-          <span className="text-lg md:text-xl font-bold text-blue-600">
-            Hackathon
-          </span>
-        </div>
-
-        {/* Desktop Menu */}
-        <div className="hidden md:flex items-center gap-6 lg:gap-8">
-          <a
-            href="#timeline"
-            className="text-gray-600 hover:text-gray-900 transition-colors"
-          >
-            Timeline
-          </a>
-          <a
-            href="#hadiah"
-            className="text-gray-600 hover:text-gray-900 transition-colors"
-          >
-            Hadiah
-          </a>
-          <a
-            href="#faq"
-            className="text-gray-600 hover:text-gray-900 transition-colors"
-          >
-            FAQ
-          </a>
-
-          <button
-            onClick={() => navigate('/auth/login')}
-            className="px-4 lg:px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm lg:text-base"
-          >
-            Daftar Sekarang
-          </button>
-        </div>
-
-        {/* Mobile Menu Button */}
-        <button
-          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-          className="md:hidden p-2"
-        >
-          <svg
-            className="w-6 h-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M4 6h16M4 12h16M4 18h16"
-            />
-          </svg>
-        </button>
-      </nav>
-
-      {/* Mobile Menu */}
-      {mobileMenuOpen && (
-        <div className="md:hidden border-b border-gray-200 bg-white">
-          <div className="flex flex-col gap-4 px-4 py-4">
-            <a href="#timeline" className="text-gray-600 hover:text-gray-900">
-              Timeline
-            </a>
-            <a href="#hadiah" className="text-gray-600 hover:text-gray-900">
-              Hadiah
-            </a>
-            <a href="#faq" className="text-gray-600 hover:text-gray-900">
-              FAQ
-            </a>
-            <a href="#masuk" className="text-gray-600 hover:text-gray-900">
-              Masuk
-            </a>
-            <button
-              onClick={() => navigate('/auth/login')}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-center"
-            >
-              Daftar Sekarang
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Hero Section */}
-      <section className="flex flex-col items-center justify-center px-4 md:px-8 py-10 md:py-20 bg-gradient-to-b from-white to-gray-50">
-        {/* Logos */}
-        <div className="flex items-center gap-4 md:gap-8 lg:gap-12 mb-8 md:mb-12 lg:mb-16 flex-wrap justify-center">
-          <div className="flex items-center">
-            <span className="text-3xl md:text-5xl lg:text-6xl font-bold text-blue-600">
-              IMPHNEN
-            </span>
-          </div>
-          <span className="text-3xl md:text-5xl lg:text-6xl font-bold text-gray-400">
-            ×
-          </span>
-          <div className="flex items-center">
-            <span className="text-3xl md:text-5xl lg:text-6xl font-bold">
-              Kolosal
-            </span>
-          </div>
-        </div>
-
-        {/* Title */}
-        <h1 className="text-5xl md:text-7xl lg:text-9xl font-bold text-gray-900 mb-6 md:mb-10 lg:mb-12 text-center">
-          Hackathon
-        </h1>
-
-        {/* Subtitle */}
-        <p className="text-xl md:text-3xl lg:text-4xl text-blue-600 font-semibold mb-6 md:mb-8 text-center px-4">
-          "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
-        </p>
-
-        {/* Description */}
-        <p className="text-base md:text-xl lg:text-2xl text-gray-600 max-w-xs md:max-w-2xl lg:max-w-3xl text-center mb-8 md:mb-12 px-4">
-          Kompetisi pengembangan teknologi untuk menciptakan
-          <br className="hidden md:block" /> solusi inovatif yang menghadirkan
-          dampak nyata
-        </p>
-
-        {/* Status */}
-        <div className="flex flex-col md:flex-row items-center gap-4 md:gap-8 mb-10 md:mb-16 text-sm md:text-lg lg:text-xl text-gray-600">
-          <div className="flex items-center gap-2 md:gap-3">
-            <svg
-              className="w-5 h-5 md:w-6 md:h-6"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <circle cx="10" cy="10" r="8" fill="#10b981" />
-            </svg>
-            <span>Online</span>
-          </div>
-          <div className="flex items-center gap-2 md:gap-3 text-center">
-            <svg
-              className="w-5 h-5 md:w-6 md:h-6"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" />
-            </svg>
-            <span>Pendaftaran hingga 30 November 2025</span>
-          </div>
-        </div>
-
-        {/* CTA Buttons */}
-        <div className="flex flex-col md:flex-row gap-4 w-full md:w-auto px-4 md:px-0">
-          <button
-            onClick={() => navigate('/auth/login')}
-            className="w-full md:w-auto px-6 md:px-8 py-3 bg-blue-600 text-white text-base md:text-lg rounded-lg hover:bg-blue-700 transition-colors text-center font-semibold"
-          >
-            Daftar Sekarang
-          </button>
-          <button className="w-full md:w-auto px-6 md:px-8 py-3 bg-white text-gray-900 text-base md:text-lg rounded-lg border-2 border-gray-300 hover:border-gray-400 transition-colors text-center font-semibold">
-            Gabung Grup WA Hackathon
-          </button>
-        </div>
-
-        {/* Scroll indicator */}
-        <div className="mt-12 md:mt-20">
-          <svg
-            className="w-6 h-6 text-gray-400 animate-bounce"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 14l-7 7m0 0l-7-7m7 7V3"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* About Section */}
-      <section className="py-16 md:py-24 px-4 md:px-8 bg-white">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl md:text-5xl font-bold mb-6">
-            Tentang <span className="text-blue-600">Hackathon</span>
-          </h2>
-          <p className="text-lg md:text-xl text-gray-600 mb-6">
-            <span className="font-semibold text-gray-900">Hackathon</span>{' '}
-            adalah kompetisi pengembangan teknologi yang mengajak talenta muda
-            untuk berkolaborasi dalam menciptakan solusi inovatif.
-          </p>
-          <p className="text-lg md:text-xl text-gray-600">
-            IMPHNEN bersama Kolosal.ai mengadakan Hackathon dengan tema lomba{' '}
-            <span className="font-semibold text-blue-600">
-              "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
-            </span>
-            .
-          </p>
-        </div>
-      </section>
-
-      {/* Prizes Section */}
-      <section id="hadiah" className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-5xl font-bold mb-4">
-              Hadiah <span className="text-blue-600">Menarik</span>
-            </h2>
-            <p className="text-xl md:text-2xl text-blue-600 font-semibold">
-              Total Prize Pool Rp14.500.000
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {/* Prize 1 */}
-            <div className="bg-white rounded-xl p-8 shadow-lg border-2 border-blue-500 transform hover:scale-105 transition-transform">
-              <div className="flex justify-center mb-4">
-                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
-                  <svg
-                    className="w-8 h-8 text-blue-600"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                  >
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                  </svg>
-                </div>
-              </div>
-              <h3 className="text-2xl font-bold text-center mb-2">Juara 1</h3>
-              <p className="text-3xl font-bold text-blue-600 text-center">
-                Rp6.000.000
-              </p>
-            </div>
-
-            {/* Prize 2 */}
-            <div className="bg-white rounded-xl p-8 shadow-lg border-2 border-gray-300 transform hover:scale-105 transition-transform">
-              <div className="flex justify-center mb-4">
-                <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
-                  <svg
-                    className="w-8 h-8 text-gray-600"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                  >
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                  </svg>
-                </div>
-              </div>
-              <h3 className="text-2xl font-bold text-center mb-2">Juara 2</h3>
-              <p className="text-3xl font-bold text-blue-600 text-center">
-                Rp4.000.000
-              </p>
-            </div>
-
-            {/* Prize 3 */}
-            <div className="bg-white rounded-xl p-8 shadow-lg border-2 border-orange-300 transform hover:scale-105 transition-transform">
-              <div className="flex justify-center mb-4">
-                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center">
-                  <svg
-                    className="w-8 h-8 text-orange-600"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                  >
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                  </svg>
-                </div>
-              </div>
-              <h3 className="text-2xl font-bold text-center mb-2">Juara 3</h3>
-              <p className="text-3xl font-bold text-orange-600 text-center">
-                Rp2.500.000
-              </p>
-            </div>
-
-            {/* Special Prize */}
-            <div className="bg-white rounded-xl p-8 shadow-lg border-2 border-purple-300 transform hover:scale-105 transition-transform">
-              <div className="flex justify-center mb-4">
-                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center">
-                  <svg
-                    className="w-8 h-8 text-purple-600"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                  >
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                  </svg>
-                </div>
-              </div>
-              <h3 className="text-2xl font-bold text-center mb-2">
-                Juara Kategori Lainnya
-              </h3>
-              <p className="text-3xl font-bold text-purple-600 text-center">
-                Rp2.000.000
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Timeline Section */}
-      <section id="timeline" className="py-16 md:py-24 px-4 md:px-8 bg-white">
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-5xl font-bold mb-4">
-              Timeline <span className="text-blue-600">Acara</span>
-            </h2>
-            <p className="text-lg text-gray-600">
-              Jadwal lengkap pelaksanaan hackathon
-            </p>
-          </div>
-
-          <div className="space-y-8">
-            {/* Timeline Item 1 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-blue-600 rounded-full"></div>
-                <div className="w-0.5 h-full bg-gray-300"></div>
-              </div>
-              <div className="flex-1 pb-8">
-                <p className="text-blue-600 font-semibold mb-2">
-                  30 November 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2">Penutupan Registrasi</h3>
-                <p className="text-gray-600">
-                  Batas akhir pendaftaran peserta hackathon.
-                </p>
-              </div>
-            </div>
-
-            {/* Timeline Item 2 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-blue-600 rounded-full"></div>
-                <div className="w-0.5 h-full bg-gray-300"></div>
-              </div>
-              <div className="flex-1 pb-8">
-                <p className="text-blue-600 font-semibold mb-2">
-                  30 November 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2">Technical Meeting</h3>
-                <p className="text-gray-600">
-                  Akan diadakan technical meeting terkait lomba melalui Google
-                  Meet. Stay tune di grup WA Hackathon.
-                </p>
-              </div>
-            </div>
-
-            {/* Timeline Item 3 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-blue-600 rounded-full"></div>
-                <div className="w-0.5 h-full bg-gray-300"></div>
-              </div>
-              <div className="flex-1 pb-8">
-                <p className="text-blue-600 font-semibold mb-2">
-                  1 - 7 Desember 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2">Tahap Penyisihan</h3>
-                <p className="text-gray-600">
-                  Peserta mengerjakan tantangan yang diberikan.
-                </p>
-              </div>
-            </div>
-
-            {/* Timeline Item 4 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-blue-600 rounded-full"></div>
-                <div className="w-0.5 h-full bg-gray-300"></div>
-              </div>
-              <div className="flex-1 pb-8">
-                <p className="text-blue-600 font-semibold mb-2">
-                  8 - 14 Desember 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2">Penilaian & Webinar</h3>
-                <p className="text-gray-600">
-                  Proses penilaian oleh juri dan sesi webinar.
-                </p>
-              </div>
-            </div>
-
-            {/* Timeline Item 5 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-blue-600 rounded-full"></div>
-              </div>
-              <div className="flex-1">
-                <p className="text-blue-600 font-semibold mb-2">
-                  15 Desember 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2">Pengumuman & Final</h3>
-                <p className="text-gray-600">
-                  Presentasi final dan pengumuman pemenang.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Judges Section */}
-      <section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-5xl font-bold mb-4">
-              Dewan <span className="text-blue-600">Juri</span>
-            </h2>
-            <p className="text-lg text-gray-600">
-              Perwakilan dari IMPHNEN dan Kolosal.ai yang akan menilai karya
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {/* Judge 1 */}
-            <div className="bg-white rounded-xl p-8 shadow-lg text-center">
-              <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div>
-              <h3 className="text-xl font-bold mb-1">
-                Alifais Farrel Ramdhani
-              </h3>
-              <p className="text-blue-600 font-semibold mb-1">CTO</p>
-              <p className="text-gray-600">Kolosal.ai</p>
-            </div>
-
-            {/* Judge 2 */}
-            <div className="bg-white rounded-xl p-8 shadow-lg text-center">
-              <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div>
-              <h3 className="text-xl font-bold mb-1">Anka Tama</h3>
-              <p className="text-blue-600 font-semibold mb-1">Admin</p>
-              <p className="text-gray-600">IMPHNEN</p>
-            </div>
-
-            {/* Judge 3 */}
-            <div className="bg-white rounded-xl p-8 shadow-lg text-center">
-              <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4"></div>
-              <h3 className="text-xl font-bold mb-1">Hafid Nur</h3>
-              <p className="text-blue-600 font-semibold mb-1">Moderator</p>
-              <p className="text-gray-600">IMPHNEN</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* FAQ Section */}
-      <section id="faq" className="py-16 md:py-24 px-4 md:px-8 bg-white">
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-5xl font-bold mb-4 text-blue-600">
-              FAQ
-            </h2>
-            <p className="text-lg text-gray-600">
-              Pertanyaan yang Sering Diajukan
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            {faqs.map((faq, index) => (
-              <div key={index} className="border border-gray-200 rounded-lg">
-                <button
-                  onClick={() => setOpenFaq(openFaq === index ? null : index)}
-                  className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
-                >
-                  <span className="font-semibold text-gray-900">
-                    {faq.question}
-                  </span>
-                  <svg
-                    className={`w-5 h-5 text-blue-600 transform transition-transform ${
-                      openFaq === index ? 'rotate-180' : ''
-                    }`}
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M19 9l-7 7-7-7"
-                    />
-                  </svg>
-                </button>
-                {openFaq === index && (
-                  <div className="px-6 pb-4 text-gray-600">{faq.answer}</div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Sponsors Section */}
-      <section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50">
-        <div className="max-w-6xl mx-auto text-center">
-          <h2 className="text-3xl md:text-5xl font-bold mb-4">
-            Sponsor & <span className="text-blue-600">Partner</span>
-          </h2>
-          <p className="text-lg text-gray-600 mb-12">
-            Acara ini sepenuhnya disponsori oleh
-          </p>
-
-          <div className="flex justify-center">
-            <div className="bg-white rounded-xl p-8 shadow-lg inline-block">
-              <span className="text-3xl font-bold">Kolosal</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section
-        id="masuk"
-        className="py-16 md:py-24 px-4 md:px-8 bg-gradient-to-b from-white to-blue-50"
-      >
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl md:text-5xl font-bold mb-6">
-            Segera Daftarkan <span className="text-blue-600">Timmu!</span>
-          </h2>
-          <p className="text-lg md:text-xl text-gray-600 mb-8">
-            Jangan lewatkan kesempatan emas untuk bersaing dengan developer
-            terbaik,
-            <br className="hidden md:block" />
-            belajar dari para ahli, dan memenangkan hadiah jutaan rupiah!
-          </p>
-
-          <div className="flex flex-col md:flex-row gap-4 justify-center">
-            <button
-              onClick={() => navigate('/auth/login')}
-              className="px-8 py-3 bg-blue-600 text-white text-lg rounded-lg hover:bg-blue-700 transition-colors font-semibold"
-            >
-              Daftar Sekarang
-            </button>
-            <button className="px-8 py-3 bg-white text-gray-900 text-lg rounded-lg border-2 border-gray-300 hover:border-gray-400 transition-colors font-semibold">
-              Gabung Grup WA Hackathon
-            </button>
-          </div>
-
-          <p className="text-sm text-gray-500 mt-6">
-            Pendaftaran ditutup pada{' '}
-            <span className="text-blue-600 font-semibold">
-              30 November 2025
-            </span>
-          </p>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="bg-gray-900 text-white py-12 px-4 md:px-8">
-        <div className="max-w-6xl mx-auto">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-            {/* Brand */}
-            <div>
-              <div className="flex items-center gap-2 mb-4">
-                <span className="text-2xl font-bold">IMPHNEN</span>
-                <span className="text-2xl font-bold text-blue-500">
-                  Hackathon
-                </span>
-              </div>
-              <p className="text-gray-400 text-sm">
-                Wujudkan ide brilian mu menjadi solusi nyata. Bergabunglah dalam
-                IMPHNEN Hackathon dan jadilah bagian dari perubahan teknologi
-                masa depan.
-              </p>
-              <div className="flex gap-4 mt-4">
-                <a
-                  href="#"
-                  className="text-gray-400 hover:text-white transition-colors"
-                >
-                  <svg
-                    className="w-6 h-6"
-                    fill="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
-                  </svg>
-                </a>
-                <a
-                  href="#"
-                  className="text-gray-400 hover:text-white transition-colors"
-                >
-                  <svg
-                    className="w-6 h-6"
-                    fill="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073z" />
-                  </svg>
-                </a>
-                <a
-                  href="#"
-                  className="text-gray-400 hover:text-white transition-colors"
-                >
-                  <svg
-                    className="w-6 h-6"
-                    fill="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.840 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-                  </svg>
-                </a>
-              </div>
-            </div>
-
-            {/* Quick Links */}
-            <div>
-              <h3 className="font-bold text-lg mb-4">Quick Links</h3>
-              <ul className="space-y-2 text-gray-400">
-                <li>
-                  <a
-                    href="#timeline"
-                    className="hover:text-white transition-colors"
-                  >
-                    Timeline
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#hadiah"
-                    className="hover:text-white transition-colors"
-                  >
-                    Hadiah
-                  </a>
-                </li>
-                <li>
-                  <a href="#faq" className="hover:text-white transition-colors">
-                    FAQ
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#masuk"
-                    className="hover:text-white transition-colors"
-                  >
-                    Daftar
-                  </a>
-                </li>
-              </ul>
-            </div>
-
-            {/* Contact */}
-            <div>
-              <h3 className="font-bold text-lg mb-4">Contact</h3>
-              <ul className="space-y-2 text-gray-400">
-                <li className="flex items-center gap-2">
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                    />
-                  </svg>
-                  imphnen@gmail.com
-                </li>
-                <li className="flex items-center gap-2">
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
-                    />
-                  </svg>
-                  WA Group Hackathon
-                </li>
-                <li className="flex items-center gap-2">
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
-                    />
-                  </svg>
-                  IMPHNEN.dev
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm">
-            <p>
-              © 2025 IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan
-              Ngoding. All rights reserved.
-            </p>
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-}

apps/hackathon/src/app/teams/[teamId]/chat/page.tsx

@@ -1,210 +0,0 @@
-import { FC, ReactElement, useState, useRef, useEffect } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
-import { useTeamById, useTeamMessages, useSendMessage, useDeleteMessage, useAuthStore } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-const TeamChatPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
-  const navigate = useNavigate();
-  const { session } = useAuthStore();
-  const [message, setMessage] = useState('');
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  const { data: teamData } = useTeamById(teamId || '');
-  const { data: messages, isLoading } = useTeamMessages(teamId || '');
-  const { mutateAsync: sendMessage, isPending: isSending } = useSendMessage(teamId || '');
-  const { mutateAsync: deleteMessage } = useDeleteMessage(teamId || '');
-
-  const team = teamData?.data;
-  const currentUserId = session?.user?.id;
-
-  // Auto-scroll to bottom when new messages arrive
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  const handleSendMessage = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!message.trim() || isSending) return;
-
-    try {
-      await sendMessage(message.trim());
-      setMessage('');
-    } catch (error) {
-      console.error('Failed to send message:', error);
-      toast.error('Failed to send message');
-    }
-  };
-
-  const handleDeleteMessage = async (messageId: string) => {
-    if (!confirm('Are you sure you want to delete this message?')) return;
-
-    try {
-      await deleteMessage(messageId);
-      toast.success('Message deleted');
-    } catch (error) {
-      console.error('Failed to delete message:', error);
-      toast.error('Failed to delete message');
-    }
-  };
-
-  const formatTime = (timestamp: string) => {
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffInMs = now.getTime() - date.getTime();
-    const diffInMins = Math.floor(diffInMs / 60000);
-
-    if (diffInMins < 1) return 'Just now';
-    if (diffInMins < 60) return `${diffInMins}m ago`;
-    if (diffInMins < 1440) return `${Math.floor(diffInMins / 60)}h ago`;
-
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-  };
-
-  return (
-    <div className="flex flex-col h-screen bg-gray-50">
-      {/* Header */}
-      <div className="bg-white border-b shadow-sm">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-bold text-gray-900">Team Chat</h1>
-              <p className="text-gray-600 text-sm mt-0.5">{team?.name}</p>
-            </div>
-            <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
-              Back to Team
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Messages Container */}
-      <div className="flex-1 overflow-y-auto">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          {isLoading ? (
-            <div className="flex items-center justify-center h-64">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
-            </div>
-          ) : messages && messages.length > 0 ? (
-            <div className="space-y-4">
-              {messages.map((msg) => {
-                const isOwnMessage = msg.user_id === currentUserId;
-                const isLeader = team?.leader_id === currentUserId;
-                const canDelete = isOwnMessage || isLeader;
-
-                return (
-                  <div
-                    key={msg.id}
-                    className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
-                  >
-                    <div className={`flex gap-3 max-w-lg ${isOwnMessage ? 'flex-row-reverse' : 'flex-row'}`}>
-                      {/* Avatar */}
-                      <div className="flex-shrink-0">
-                        {msg.user?.avatar ? (
-                          <img
-                            src={msg.user.avatar}
-                            alt={msg.user.fullname}
-                            className="w-10 h-10 rounded-full object-cover"
-                          />
-                        ) : (
-                          <div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">
-                            {msg.user?.fullname?.charAt(0) || '?'}
-                          </div>
-                        )}
-                      </div>
-
-                      {/* Message Bubble */}
-                      <div className={`flex-1 ${isOwnMessage ? 'text-right' : 'text-left'}`}>
-                        <div className={`inline-block ${isOwnMessage ? 'items-end' : 'items-start'}`}>
-                          <div className="flex items-baseline gap-2 mb-1">
-                            <span className="font-semibold text-sm text-gray-900">
-                              {isOwnMessage ? 'You' : msg.user?.fullname}
-                            </span>
-                            <span className="text-xs text-gray-500">
-                              {formatTime(msg.created_at)}
-                            </span>
-                          </div>
-                          <div
-                            className={`relative group rounded-2xl px-4 py-2.5 ${
-                              isOwnMessage
-                                ? 'bg-blue-600 text-white'
-                                : 'bg-white text-gray-900 border border-gray-200'
-                            }`}
-                          >
-                            <p className="text-sm whitespace-pre-wrap break-words">{msg.message}</p>
-
-                            {/* Delete button */}
-                            {canDelete && (
-                              <button
-                                onClick={() => handleDeleteMessage(msg.id)}
-                                className={`absolute top-1 ${isOwnMessage ? 'left-1' : 'right-1'} opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-gray-200 ${isOwnMessage ? 'hover:bg-blue-700' : ''}`}
-                                title="Delete message"
-                              >
-                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                </svg>
-                              </button>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-              <div ref={messagesEndRef} />
-            </div>
-          ) : (
-            <div className="flex flex-col items-center justify-center h-64 text-center">
-              <div className="text-6xl mb-4">💬</div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-2">
-                No messages yet
-              </h3>
-              <p className="text-gray-600">
-                Be the first to start the conversation!
-              </p>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Message Input */}
-      <div className="bg-white border-t shadow-lg">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <form onSubmit={handleSendMessage} className="flex gap-3">
-            <input
-              type="text"
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              placeholder="Type your message..."
-              className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              disabled={isSending}
-            />
-            <Button
-              type="submit"
-              disabled={!message.trim() || isSending}
-              className="px-6 py-3"
-            >
-              {isSending ? (
-                <div className="flex items-center gap-2">
-                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                  Sending...
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-                  </svg>
-                  Send
-                </div>
-              )}
-            </Button>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TeamChatPage;

apps/hackathon/src/app/teams/[teamId]/edit/page.tsx

@@ -1,347 +0,0 @@
-import { FC, ReactElement, useState, useEffect } from 'react';
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
-import { useForm, Controller } from 'react-hook-form';
-import { teamUpdateSchema, TTeamUpdateForm, useUpdateTeam, useTeamById, ETeamVisibility, useUploadFile, useAuthStore } from '@imphnen-frontend-service/service';
-import { zodResolver } from '@hookform/resolvers/zod';
-import INDONESIAN_CITIES from '../../../../constants/cities';
-
-const EditTeamPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
-  const navigate = useNavigate();
-  const { session } = useAuthStore();
-  const [logoFile, setLogoFile] = useState<File | null>(null);
-  const [logoPreview, setLogoPreview] = useState<string>('');
-  const [bannerFile, setBannerFile] = useState<File | null>(null);
-  const [bannerPreview, setBannerPreview] = useState<string>('');
-
-  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(teamId || '');
-  const { mutateAsync: updateTeam, isPending: isUpdating } = useUpdateTeam(teamId || '');
-  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
-
-  const team = teamData?.data;
-  const currentUserId = session?.user?.id;
-  const isLeader = currentUserId === team?.leader_id;
-
-  const form = useForm<TTeamUpdateForm>({
-    resolver: zodResolver(teamUpdateSchema),
-    mode: 'all',
-  });
-
-  useEffect(() => {
-    if (team) {
-      form.reset({
-        name: team.name,
-        description: team.description,
-        city: team.city,
-        visibility: team.visibility,
-        logo: team.logo,
-        banner: team.banner,
-      });
-      if (team.logo) setLogoPreview(team.logo);
-      if (team.banner) setBannerPreview(team.banner);
-    }
-  }, [team, form]);
-
-  if (isLoadingTeam) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-600">Loading team...</div>
-      </div>
-    );
-  }
-
-  if (!isLeader) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
-        <p className="text-gray-600 mb-4">Only the team leader can edit team information</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
-      </div>
-    );
-  }
-
-  const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      setLogoFile(file);
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setLogoPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      setBannerFile(file);
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setBannerPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      let logoUrl = data.logo;
-      let bannerUrl = data.banner;
-
-      if (logoFile) {
-        const logoResult = await uploadFile(logoFile);
-        logoUrl = logoResult.data.url;
-      }
-
-      if (bannerFile) {
-        const bannerResult = await uploadFile(bannerFile);
-        bannerUrl = bannerResult.data.url;
-      }
-
-      await updateTeam({
-        ...data,
-        logo: logoUrl,
-        banner: bannerUrl,
-      });
-
-      navigate(`/teams/${teamId}`);
-    } catch (error) {
-      console.error('Failed to update team:', error);
-    }
-  });
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <h1 className="text-3xl font-bold text-gray-900">Edit Team Info</h1>
-          <p className="text-gray-600 mt-1">Update your team details</p>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="bg-white rounded-lg shadow-md p-8">
-          <form onSubmit={onSubmit} className="space-y-6">
-            {/* Banner Upload */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Team Banner
-              </label>
-              {bannerPreview ? (
-                <div className="relative">
-                  <img
-                    src={bannerPreview}
-                    alt="Banner preview"
-                    className="w-full h-48 object-cover rounded-lg border-2 border-gray-200"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setBannerFile(null);
-                      setBannerPreview('');
-                      form.setValue('banner', null);
-                    }}
-                    className="absolute top-2 right-2 bg-red-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-red-600"
-                  >
-                    Remove
-                  </button>
-                </div>
-              ) : (
-                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
-                  <div className="text-center">
-                    <p className="text-gray-500">Click to upload banner</p>
-                    <p className="text-xs text-gray-400 mt-1">1200x400 recommended</p>
-                  </div>
-                  <input
-                    type="file"
-                    accept="image/*"
-                    className="hidden"
-                    onChange={handleBannerChange}
-                  />
-                </label>
-              )}
-            </div>
-
-            {/* Logo Upload */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Team Logo
-              </label>
-              <div className="flex items-center space-x-4">
-                {logoPreview ? (
-                  <img
-                    src={logoPreview}
-                    alt="Logo preview"
-                    className="w-24 h-24 rounded-full object-cover border-2 border-gray-200"
-                  />
-                ) : (
-                  <div className="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center">
-                    <span className="text-gray-400 text-3xl">👥</span>
-                  </div>
-                )}
-                <div>
-                  <label htmlFor="logo" className="cursor-pointer">
-                    <span className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">
-                      {logoPreview ? 'Change Logo' : 'Upload Logo'}
-                    </span>
-                    <input
-                      id="logo"
-                      type="file"
-                      accept="image/*"
-                      className="hidden"
-                      onChange={handleLogoChange}
-                    />
-                  </label>
-                  {logoPreview && (
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setLogoFile(null);
-                        setLogoPreview('');
-                        form.setValue('logo', null);
-                      }}
-                      className="ml-3 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
-                    >
-                      Remove
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* Team Name */}
-            <ControlledInputField
-              control={form.control}
-              label="Team Name"
-              placeholder="Enter team name"
-              name="name"
-            />
-
-            {/* City */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                City
-              </label>
-              <Controller
-                control={form.control}
-                name="city"
-                render={({ field, fieldState }) => (
-                  <div>
-                    <select
-                      {...field}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    >
-                      <option value="">Select city</option>
-                      {INDONESIAN_CITIES.map((city) => (
-                        <option key={city} value={city}>
-                          {city}
-                        </option>
-                      ))}
-                    </select>
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                    )}
-                  </div>
-                )}
-              />
-            </div>
-
-            {/* Description */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                Description
-              </label>
-              <Controller
-                control={form.control}
-                name="description"
-                render={({ field, fieldState }) => (
-                  <div>
-                    <Textarea
-                      {...field}
-                      value={field.value || ''}
-                      placeholder="Tell others about your team..."
-                      rows={4}
-                      className="w-full"
-                    />
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                    )}
-                  </div>
-                )}
-              />
-            </div>
-
-            {/* Visibility */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                Team Visibility
-              </label>
-              <Controller
-                control={form.control}
-                name="visibility"
-                render={({ field }) => (
-                  <div className="space-y-3">
-                    <label className="flex items-start space-x-3 cursor-pointer border rounded-lg p-4 hover:bg-gray-50">
-                      <input
-                        type="radio"
-                        {...field}
-                        value={ETeamVisibility.PUBLIC}
-                        checked={field.value === ETeamVisibility.PUBLIC}
-                        className="mt-1"
-                      />
-                      <div>
-                        <p className="font-medium text-gray-900">Public</p>
-                        <p className="text-sm text-gray-600">
-                          Team will be visible in Browse Teams
-                        </p>
-                      </div>
-                    </label>
-                    <label className="flex items-start space-x-3 cursor-pointer border rounded-lg p-4 hover:bg-gray-50">
-                      <input
-                        type="radio"
-                        {...field}
-                        value={ETeamVisibility.PRIVATE}
-                        checked={field.value === ETeamVisibility.PRIVATE}
-                        className="mt-1"
-                      />
-                      <div>
-                        <p className="font-medium text-gray-900">Private</p>
-                        <p className="text-sm text-gray-600">
-                          Team hidden, invite-only
-                        </p>
-                      </div>
-                    </label>
-                  </div>
-                )}
-              />
-            </div>
-
-            {/* Submit Button */}
-            <div className="flex space-x-3 pt-4">
-              <Button
-                type="button"
-                variant="secondary"
-                className="flex-1"
-                onClick={() => navigate(`/teams/${teamId}`)}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                className="flex-1"
-                disabled={isUpdating || isUploading}
-              >
-                {isUpdating || isUploading ? 'Saving...' : 'Save Changes'}
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default EditTeamPage;

apps/hackathon/src/app/teams/[teamId]/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { Outlet } from 'react-router';
-import { Navigation } from '../../../components/navigation';
-
-interface TeamLayoutProps {
-  children?: ReactNode;
-}
-
-export const TeamLayout: FC<TeamLayoutProps> = () => {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <Navigation />
-      <Outlet />
-    </div>
-  );
-};
-
-export default TeamLayout;

apps/hackathon/src/app/teams/[teamId]/members/page.tsx

@@ -1,294 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
-import {
-  useTeamById,
-  useTeamMembers,
-  useTeamJoinRequests,
-  useInviteMember,
-  useRemoveMember,
-  useRespondToJoinRequest,
-  ETeamMemberStatus,
-  inviteMemberSchema,
-  TInviteMemberForm,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-const ManageMembersPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
-  const navigate = useNavigate();
-  const { session } = useAuthStore();
-  const [showInviteModal, setShowInviteModal] = useState(false);
-
-  const { data: teamData } = useTeamById(teamId || '');
-  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(teamId || '');
-  const { data: joinRequestsData } = useTeamJoinRequests(teamId || '');
-
-  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(teamId || '');
-  const { mutateAsync: removeMember, isPending: isRemoving } = useRemoveMember(teamId || '');
-  const { mutateAsync: respondToRequest, isPending: isResponding } = useRespondToJoinRequest(teamId || '');
-
-  const team = teamData?.data;
-  const members = membersData?.data || [];
-  const joinRequests = Array.isArray(joinRequestsData?.data) ? joinRequestsData.data : [];
-  const currentUserId = session?.user?.id;
-  const isLeader = currentUserId === team?.leader_id;
-
-  const form = useForm<TInviteMemberForm>({
-    resolver: zodResolver(inviteMemberSchema),
-    mode: 'all',
-  });
-
-  if (!isLeader) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
-        <p className="text-gray-600 mb-4">Only the team leader can manage members</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
-      </div>
-    );
-  }
-
-  const handleInvite = form.handleSubmit(async (data) => {
-    try {
-      await inviteMember(data);
-      setShowInviteModal(false);
-      form.reset();
-    } catch (error) {
-      console.error('Failed to invite member:', error);
-    }
-  });
-
-  const handleRemove = async (userId: string) => {
-    // eslint-disable-next-line no-restricted-globals
-    if (confirm('Are you sure you want to remove this member?')) {
-      try {
-        await removeMember(userId);
-      } catch (error) {
-        console.error('Failed to remove member:', error);
-      }
-    }
-  };
-
-  const handleApproveRequest = async (requestId: string) => {
-    try {
-      await respondToRequest({ requestId, action: 'approve' });
-    } catch (error) {
-      console.error('Failed to approve request:', error);
-    }
-  };
-
-  const handleRejectRequest = async (requestId: string) => {
-    try {
-      await respondToRequest({ requestId, action: 'reject' });
-    } catch (error) {
-      console.error('Failed to reject request:', error);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900">Manage Members</h1>
-              <p className="text-gray-600 mt-1">{team?.name}</p>
-            </div>
-            <div className="flex space-x-3">
-              <Button onClick={() => setShowInviteModal(true)}>
-                Invite Member
-              </Button>
-              <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
-                Back to Team
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
-        {/* Join Requests */}
-        {joinRequests.length > 0 && (
-          <div className="bg-white rounded-lg shadow-md p-6">
-            <h2 className="text-xl font-bold text-gray-900 mb-4">
-              Join Requests ({joinRequests.length})
-            </h2>
-            <div className="space-y-3">
-              {joinRequests.map((request) => (
-                <div key={request.id} className="border rounded-lg p-4">
-                  <div className="flex items-start justify-between">
-                    <div className="flex items-center space-x-3 flex-1">
-                      {request.user.avatar ? (
-                        <img
-                          src={request.user.avatar}
-                          alt={request.user.fullname}
-                          className="w-12 h-12 rounded-full object-cover"
-                        />
-                      ) : (
-                        <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                          <span className="text-gray-500">👤</span>
-                        </div>
-                      )}
-                      <div className="flex-1">
-                        <p className="font-medium text-gray-900">{request.user.fullname}</p>
-                        <p className="text-sm text-gray-600">{request.user.email}</p>
-                        {request.user.location && (
-                          <p className="text-sm text-gray-500">📍 {request.user.location}</p>
-                        )}
-                        <p className="text-sm text-gray-700 mt-2 italic">"{request.message}"</p>
-                      </div>
-                    </div>
-                    <div className="flex space-x-2 ml-4">
-                      <Button
-                        size="sm"
-                        onClick={() => handleApproveRequest(request.id)}
-                        disabled={isResponding}
-                      >
-                        Approve
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="secondary"
-                        onClick={() => handleRejectRequest(request.id)}
-                        disabled={isResponding}
-                      >
-                        Reject
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Current Members */}
-        <div className="bg-white rounded-lg shadow-md p-6">
-          <h2 className="text-xl font-bold text-gray-900 mb-4">
-            Current Members ({members.length})
-          </h2>
-          {isLoadingMembers ? (
-            <p className="text-gray-600">Loading members...</p>
-          ) : (
-            <div className="space-y-3">
-              {members.map((member) => (
-                <div key={member.id} className="border rounded-lg p-4 flex items-center justify-between">
-                  <div className="flex items-center space-x-3">
-                    {member.user.avatar ? (
-                      <img
-                        src={member.user.avatar}
-                        alt={member.user.fullname}
-                        className="w-12 h-12 rounded-full object-cover"
-                      />
-                    ) : (
-                      <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                        <span className="text-gray-500">👤</span>
-                      </div>
-                    )}
-                    <div>
-                      <p className="font-medium text-gray-900">{member.user.fullname}</p>
-                      <p className="text-sm text-gray-600">{member.user.email}</p>
-                      {member.user.location && (
-                        <p className="text-sm text-gray-500">📍 {member.user.location}</p>
-                      )}
-                      <div className="flex items-center space-x-2 mt-1">
-                        {member.role === 'leader' && (
-                          <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs font-medium">
-                            Leader
-                          </span>
-                        )}
-                        {member.status === ETeamMemberStatus.PENDING && (
-                          <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs font-medium">
-                            Pending Invitation
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  {member.role !== 'leader' && (
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      onClick={() => handleRemove(member.user_id)}
-                      disabled={isRemoving}
-                    >
-                      Remove
-                    </Button>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Warning */}
-        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-          <p className="text-sm text-yellow-800">
-            <strong>Note:</strong> Members cannot leave the team without your approval. Only you can remove members from the team.
-          </p>
-        </div>
-      </div>
-
-      {/* Invite Member Modal */}
-      {showInviteModal && (
-        <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">
-              Invite Member
-            </h2>
-            <p className="text-gray-600 mb-4">
-              Send an invitation to join your team. The invited member will see the invitation on their dashboard after logging in.
-            </p>
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-6">
-              <p className="text-sm text-yellow-800">
-                <strong>Important:</strong> The email you enter must match the GitHub email address the member uses to sign in.
-              </p>
-            </div>
-            <form onSubmit={handleInvite} className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Email Address
-                </label>
-                <Input
-                  {...form.register('email')}
-                  type="email"
-                  placeholder="member@example.com"
-                />
-                {form.formState.errors.email && (
-                  <p className="text-sm text-red-500 mt-1">
-                    {form.formState.errors.email.message}
-                  </p>
-                )}
-              </div>
-              <div className="flex space-x-3">
-                <Button
-                  type="button"
-                  variant="secondary"
-                  className="flex-1"
-                  onClick={() => {
-                    setShowInviteModal(false);
-                    form.reset();
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  className="flex-1"
-                  disabled={!form.formState.isValid || isInviting}
-                >
-                  {isInviting ? 'Sending...' : 'Send Invitation'}
-                </Button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ManageMembersPage;

apps/hackathon/src/app/teams/[teamId]/page.tsx

@@ -1,444 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Link, useParams, useNavigate } from 'react-router';
-import { useTeamById, useTeamMembers, useInviteMember, useTeamJoinRequests, useRespondToJoinRequest, ETeamMemberRole, useAuthStore } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-const MAX_TEAM_MEMBERS = 5;
-
-const TeamDashboardPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
-  const navigate = useNavigate();
-  const { session } = useAuthStore();
-  const [showInviteModal, setShowInviteModal] = useState(false);
-  const [showJoinRequestsModal, setShowJoinRequestsModal] = useState(false);
-  const [inviteEmail, setInviteEmail] = useState('');
-
-  const { data: teamData, isLoading: isLoadingTeam } = useTeamById(teamId || '');
-  const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(teamId || '');
-  const { data: joinRequestsData } = useTeamJoinRequests(teamId || '', !!teamId);
-  const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(teamId || '');
-  const { mutateAsync: respondToJoinRequest, isPending: isResponding } = useRespondToJoinRequest(teamId || '');
-
-  const team = teamData?.data;
-  const members = membersData?.data || [];
-  const joinRequests = joinRequestsData?.data || [];
-  const pendingJoinRequests = joinRequests.filter((req: any) => req.status === 'pending');
-  const currentUserId = session?.user?.id;
-
-  const isLeader = currentUserId === team?.leader_id;
-  const canInvite = isLeader && members.length < MAX_TEAM_MEMBERS;
-
-  console.log('Leader check:', { currentUserId, leaderId: team?.leader_id, isLeader });
-
-  const handleInviteMember = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!inviteEmail.trim() || isInviting) return;
-
-    try {
-      await inviteMember({ email: inviteEmail.trim() });
-      toast.success('Invitation sent successfully!');
-      setInviteEmail('');
-      setShowInviteModal(false);
-    } catch (error) {
-      console.error('Failed to invite member:', error);
-      toast.error('Failed to send invitation');
-    }
-  };
-
-  const handleRespondToJoinRequest = async (requestId: string, action: 'approve' | 'reject') => {
-    try {
-      await respondToJoinRequest({ requestId, action });
-      toast.success(action === 'approve' ? 'Request approved!' : 'Request rejected');
-    } catch (error) {
-      console.error('Failed to respond to join request:', error);
-      toast.error('Failed to process request');
-    }
-  };
-
-  if (isLoadingTeam || isLoadingMembers) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-600">Loading team...</div>
-      </div>
-    );
-  }
-
-  if (!team) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Team not found</h2>
-        <Button onClick={() => navigate('/dashboard')}>Back to Dashboard</Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header with Banner */}
-      <div className="bg-white border-b">
-        {team.banner && (
-          <div className="w-full h-48 overflow-hidden">
-            <img
-              src={team.banner}
-              alt={team.name}
-              className="w-full h-full object-cover"
-            />
-          </div>
-        )}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-start justify-between">
-            <div className="flex items-center space-x-4">
-              {team.logo && (
-                <img
-                  src={team.logo}
-                  alt={team.name}
-                  className="w-20 h-20 rounded-full object-cover border-4 border-white shadow-lg -mt-10"
-                />
-              )}
-              <div>
-                <h1 className="text-3xl font-bold text-gray-900">{team.name}</h1>
-                <p className="text-gray-600 mt-1">📍 {team.city}</p>
-                <div className="flex items-center space-x-4 mt-2">
-                  <span className="text-sm text-gray-500">
-                    {members.length} {members.length === 1 ? 'Member' : 'Members'}
-                  </span>
-                  <span className="text-sm text-gray-500">
-                    {team.visibility === 'public' ? '🌐 Public' : '🔒 Private'}
-                  </span>
-                  {isLeader && (
-                    <span className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-semibold shadow-sm">
-                      👑 Team Leader
-                    </span>
-                  )}
-                </div>
-              </div>
-            </div>
-            <Link to="/dashboard">
-              <Button variant="secondary">Back to Dashboard</Button>
-            </Link>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="grid gap-6 lg:grid-cols-3">
-          {/* Main Content */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Team Description */}
-            <div className="bg-white rounded-lg shadow-md p-6">
-              <h2 className="text-xl font-bold text-gray-900 mb-4">About Team</h2>
-              <p className="text-gray-700 whitespace-pre-wrap">{team.description}</p>
-            </div>
-
-            {/* Team Actions - Only for Leader */}
-            {isLeader && (
-              <div className="bg-white rounded-lg shadow-md p-6">
-                <h2 className="text-xl font-bold text-gray-900 mb-4">Team Management</h2>
-                <div className="grid gap-3 sm:grid-cols-2">
-                  <Button
-                    className="w-full"
-                    variant="secondary"
-                    onClick={() => setShowInviteModal(true)}
-                    disabled={!canInvite}
-                  >
-                    ➕ Invite Member {!canInvite && `(${members.length}/${MAX_TEAM_MEMBERS})`}
-                  </Button>
-                  <Button
-                    className="w-full relative"
-                    variant="secondary"
-                    onClick={() => setShowJoinRequestsModal(true)}
-                  >
-                    📩 Join Requests
-                    {pendingJoinRequests.length > 0 && (
-                      <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
-                        {pendingJoinRequests.length}
-                      </span>
-                    )}
-                  </Button>
-                  <Link to={`/teams/${teamId}/edit`}>
-                    <Button className="w-full" variant="secondary">
-                      ✏️ Edit Team Info
-                    </Button>
-                  </Link>
-                  <Link to={`/teams/${teamId}/members`}>
-                    <Button className="w-full" variant="secondary">
-                      👥 Manage Members
-                    </Button>
-                  </Link>
-                  <Link to={`/teams/${teamId}/chat`}>
-                    <Button className="w-full" variant="secondary">
-                      💬 Team Chat
-                    </Button>
-                  </Link>
-                  <Link to={`/teams/${teamId}/submit`}>
-                    <Button className="w-full">
-                      🚀 Submit Project
-                    </Button>
-                  </Link>
-                </div>
-                {!canInvite && members.length >= MAX_TEAM_MEMBERS && (
-                  <p className="text-sm text-gray-600 mt-3 text-center">
-                    Maximum team size reached ({MAX_TEAM_MEMBERS} members)
-                  </p>
-                )}
-              </div>
-            )}
-
-            {/* Quick Actions for Members */}
-            {!isLeader && (
-              <div className="bg-white rounded-lg shadow-md p-6">
-                <h2 className="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
-                <div className="grid gap-3 sm:grid-cols-2">
-                  <Link to={`/teams/${teamId}/chat`}>
-                    <Button className="w-full" variant="secondary">
-                      💬 Team Chat
-                    </Button>
-                  </Link>
-                  {team.has_submission && (
-                    <Link to={`/teams/${teamId}/submission`}>
-                      <Button className="w-full" variant="secondary">
-                        📄 View Submission
-                      </Button>
-                    </Link>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {/* Submission Status */}
-            {team.has_submission && (
-              <div className="bg-green-50 border border-green-200 rounded-lg p-6">
-                <div className="flex items-center space-x-3">
-                  <span className="text-3xl">✅</span>
-                  <div>
-                    <h3 className="font-bold text-green-900">Project Submitted</h3>
-                    <p className="text-green-700 text-sm">
-                      Your team has successfully submitted a project
-                    </p>
-                  </div>
-                </div>
-                <Link to={`/teams/${teamId}/submission`}>
-                  <Button className="mt-4 w-full" variant="secondary">
-                    View Submission Details
-                  </Button>
-                </Link>
-              </div>
-            )}
-          </div>
-
-          {/* Sidebar */}
-          <div className="space-y-6">
-            {/* Team Leader */}
-            <div className="bg-white rounded-lg shadow-md p-6">
-              <h3 className="font-bold text-gray-900 mb-4">Team Leader</h3>
-              {team.leader && (
-                <div className="flex items-center space-x-3">
-                  {team.leader.avatar ? (
-                    <img
-                      src={team.leader.avatar}
-                      alt={team.leader.fullname}
-                      className="w-12 h-12 rounded-full object-cover"
-                    />
-                  ) : (
-                    <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                      <span className="text-gray-500">👤</span>
-                    </div>
-                  )}
-                  <div>
-                    <p className="font-medium text-gray-900">{team.leader.fullname}</p>
-                    <p className="text-sm text-gray-600">{team.leader.email}</p>
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* Team Members */}
-            <div className="bg-white rounded-lg shadow-md p-6">
-              <h3 className="font-bold text-gray-900 mb-4">
-                Members ({members.length})
-              </h3>
-              <div className="space-y-3">
-                {members.map((member) => (
-                  <div key={member.id} className="flex items-center space-x-3">
-                    {member.user.avatar ? (
-                      <img
-                        src={member.user.avatar}
-                        alt={member.user.fullname}
-                        className="w-10 h-10 rounded-full object-cover"
-                      />
-                    ) : (
-                      <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
-                        <span className="text-gray-500 text-sm">👤</span>
-                      </div>
-                    )}
-                    <div className="flex-1 min-w-0">
-                      <p className="font-medium text-gray-900 truncate">
-                        {member.user.fullname}
-                      </p>
-                      <p className="text-xs text-gray-500">
-                        {member.role === ETeamMemberRole.LEADER ? 'Leader' : 'Member'}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Invite Member Modal */}
-      {showInviteModal && (
-        <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">
-              Invite Team Member
-            </h2>
-            <p className="text-gray-600 mb-4">
-              Send an invitation to join your team. The invited member will see the invitation on their dashboard after logging in.
-            </p>
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-6">
-              <p className="text-sm text-yellow-800">
-                <strong>Important:</strong> The email you enter must match the GitHub email address the member uses to sign in.
-              </p>
-            </div>
-            <form onSubmit={handleInviteMember} className="space-y-4">
-              <div>
-                <label htmlFor="invite-email" className="block text-sm font-medium text-gray-700 mb-2">
-                  Email Address
-                </label>
-                <input
-                  id="invite-email"
-                  type="email"
-                  value={inviteEmail}
-                  onChange={(e) => setInviteEmail(e.target.value)}
-                  placeholder="Enter email address..."
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  required
-                />
-                <p className="text-sm text-gray-500 mt-1">
-                  Current members: {members.length}/{MAX_TEAM_MEMBERS}
-                </p>
-              </div>
-              <div className="flex space-x-3">
-                <Button
-                  type="button"
-                  variant="secondary"
-                  className="flex-1"
-                  onClick={() => {
-                    setShowInviteModal(false);
-                    setInviteEmail('');
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  className="flex-1"
-                  disabled={!inviteEmail.trim() || isInviting}
-                >
-                  {isInviting ? 'Sending...' : 'Send Invitation'}
-                </Button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-
-      {/* Join Requests Modal */}
-      {showJoinRequestsModal && (
-        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[80vh] overflow-y-auto">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-2xl font-bold text-gray-900">
-                Join Requests ({pendingJoinRequests.length})
-              </h2>
-              <button
-                onClick={() => setShowJoinRequestsModal(false)}
-                className="text-gray-400 hover:text-gray-600 text-2xl"
-              >
-                ✕
-              </button>
-            </div>
-
-            {pendingJoinRequests.length === 0 ? (
-              <div className="text-center py-12">
-                <p className="text-gray-600 text-lg">No pending join requests</p>
-                <p className="text-gray-500 text-sm mt-2">
-                  When users request to join your team, they'll appear here
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-4">
-                {pendingJoinRequests.map((request: any) => (
-                  <div key={request.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
-                    <div className="flex items-start justify-between">
-                      <div className="flex items-start space-x-3 flex-1">
-                        {request.user?.avatar ? (
-                          <img
-                            src={request.user.avatar}
-                            alt={request.user.fullname}
-                            className="w-12 h-12 rounded-full object-cover"
-                          />
-                        ) : (
-                          <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center shrink-0">
-                            <span className="text-gray-500 text-xl">👤</span>
-                          </div>
-                        )}
-                        <div className="flex-1">
-                          <p className="font-semibold text-gray-900">
-                            {request.user?.fullname || 'Unknown User'}
-                          </p>
-                          <p className="text-sm text-gray-600">
-                            {request.user?.email}
-                          </p>
-                          {request.message && (
-                            <div className="mt-2 bg-gray-50 rounded-lg p-3">
-                              <p className="text-sm text-gray-700">
-                                <strong>Message:</strong> {request.message}
-                              </p>
-                            </div>
-                          )}
-                          <p className="text-xs text-gray-500 mt-2">
-                            Requested {new Date(request.created_at).toLocaleDateString()}
-                          </p>
-                        </div>
-                      </div>
-                      <div className="flex space-x-2 ml-4">
-                        <Button
-                          onClick={() => handleRespondToJoinRequest(request.id, 'approve')}
-                          disabled={isResponding || members.length >= MAX_TEAM_MEMBERS}
-                          className="px-4 py-2 text-sm"
-                        >
-                          ✓ Accept
-                        </Button>
-                        <Button
-                          onClick={() => handleRespondToJoinRequest(request.id, 'reject')}
-                          disabled={isResponding}
-                          variant="secondary"
-                          className="px-4 py-2 text-sm"
-                        >
-                          ✕ Reject
-                        </Button>
-                      </div>
-                    </div>
-                    {members.length >= MAX_TEAM_MEMBERS && (
-                      <div className="mt-3 bg-yellow-50 border border-yellow-200 rounded-lg p-2">
-                        <p className="text-xs text-yellow-800">
-                          Team is full ({MAX_TEAM_MEMBERS}/{MAX_TEAM_MEMBERS} members). Remove a member before accepting new requests.
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TeamDashboardPage;

apps/hackathon/src/app/teams/[teamId]/submission/page.tsx

@@ -1,207 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
-import { useTeamById, useTeamSubmission } from '@imphnen-frontend-service/service';
-
-const SubmissionViewPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
-  const navigate = useNavigate();
-
-  const { data: teamData } = useTeamById(teamId || '');
-  const { data: submissionData, isLoading } = useTeamSubmission(teamId || '', !!teamId);
-
-  const team = teamData?.data;
-  const submission = submissionData?.data;
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-600">Loading submission...</div>
-      </div>
-    );
-  }
-
-  if (!submission) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <div className="text-6xl mb-4">📄</div>
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">No Submission Yet</h2>
-        <p className="text-gray-600 mb-4">Your team hasn't submitted a project</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
-      </div>
-    );
-  }
-
-  const submittedDate = submission.submitted_at
-    ? new Date(submission.submitted_at).toLocaleString('id-ID', {
-        day: 'numeric',
-        month: 'long',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      })
-    : 'Not submitted';
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900">Project Submission</h1>
-              <p className="text-gray-600 mt-1">{team?.name}</p>
-            </div>
-            <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
-              Back to Team
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Status Banner */}
-        <div className="bg-green-50 border border-green-500 rounded-lg p-6 mb-6">
-          <div className="flex items-center space-x-3">
-            <span className="text-4xl">✅</span>
-            <div>
-              <h3 className="font-bold text-green-900 text-lg">Project Submitted Successfully</h3>
-              <p className="text-green-700 text-sm">
-                Submitted on {submittedDate}
-              </p>
-              <p className="text-green-600 text-xs mt-1">
-                This submission is now read-only and cannot be edited
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white rounded-lg shadow-md overflow-hidden">
-          {/* Project Header */}
-          <div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-8">
-            <h2 className="text-3xl font-bold mb-2">{submission.project_name}</h2>
-            <p className="text-blue-100">Team: {team?.name}</p>
-          </div>
-
-          {/* Project Details */}
-          <div className="p-8 space-y-6">
-            {/* Description */}
-            <div>
-              <h3 className="text-lg font-bold text-gray-900 mb-3">Project Description</h3>
-              <div className="bg-gray-50 rounded-lg p-4">
-                <p className="text-gray-700 whitespace-pre-wrap">{submission.description}</p>
-              </div>
-            </div>
-
-            {/* Links */}
-            <div className="grid gap-6 md:grid-cols-2">
-              {/* Repository */}
-              <div>
-                <h3 className="text-lg font-bold text-gray-900 mb-3">Repository</h3>
-                <a
-                  href={submission.repository_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center space-x-2 text-blue-600 hover:text-blue-800"
-                >
-                  <span>🔗</span>
-                  <span className="break-all">{submission.repository_url}</span>
-                </a>
-              </div>
-
-              {/* Demo URL */}
-              {submission.demo_url && (
-                <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-3">Live Demo</h3>
-                  <a
-                    href={submission.demo_url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center space-x-2 text-blue-600 hover:text-blue-800"
-                  >
-                    <span>🌐</span>
-                    <span className="break-all">{submission.demo_url}</span>
-                  </a>
-                </div>
-              )}
-
-              {/* Presentation URL */}
-              {submission.presentation_url && (
-                <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-3">Presentation</h3>
-                  <a
-                    href={submission.presentation_url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center space-x-2 text-blue-600 hover:text-blue-800"
-                  >
-                    <span>📊</span>
-                    <span className="break-all">{submission.presentation_url}</span>
-                  </a>
-                </div>
-              )}
-            </div>
-
-            {/* Screenshots */}
-            {submission.screenshots && submission.screenshots.length > 0 && (
-              <div>
-                <h3 className="text-lg font-bold text-gray-900 mb-3">
-                  Screenshots ({submission.screenshots.length})
-                </h3>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                  {submission.screenshots.map((url, index) => (
-                    <a
-                      key={index}
-                      href={url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="block"
-                    >
-                      <img
-                        src={url}
-                        alt={`Screenshot ${index + 1}`}
-                        className="w-full h-48 object-cover rounded-lg border-2 border-gray-200 hover:border-blue-500 transition-colors cursor-pointer"
-                      />
-                    </a>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Submission Info */}
-            <div className="bg-gray-50 rounded-lg p-4 border-t-4 border-blue-600">
-              <h3 className="text-sm font-bold text-gray-900 mb-2">Submission Information</h3>
-              <div className="grid gap-2 text-sm">
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Status:</span>
-                  <span className="font-medium text-green-600">
-                    {submission.status === 'submitted' ? '✓ Submitted' : 'Draft'}
-                  </span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Submitted:</span>
-                  <span className="font-medium text-gray-900">{submittedDate}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Submission ID:</span>
-                  <span className="font-medium text-gray-900 font-mono text-xs">
-                    {submission.id}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Read-only Notice */}
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-              <p className="text-sm text-yellow-800">
-                <strong>Note:</strong> This submission is now locked and cannot be edited or deleted.
-                If you need to make changes, please contact the hackathon organizers.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SubmissionViewPage;

apps/hackathon/src/app/teams/[teamId]/submit/page.tsx

@@ -1,296 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate, useParams } from 'react-router';
-import { useForm, Controller } from 'react-hook-form';
-import {
-  projectSubmissionSchema,
-  TProjectSubmissionForm,
-  useSubmitProject,
-  useTeamById,
-  useTeamSubmission,
-  useUploadFile,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-const SubmitProjectPage: FC = (): ReactElement => {
-  const { teamId } = useParams<{ teamId: string }>();
-  const navigate = useNavigate();
-  const { session } = useAuthStore();
-  const [showConfirmModal, setShowConfirmModal] = useState(false);
-  const [screenshots, setScreenshots] = useState<string[]>([]);
-
-  const { data: teamData } = useTeamById(teamId || '');
-  const { data: submissionData } = useTeamSubmission(teamId || '', !!teamId);
-  const { mutateAsync: submitProject, isPending: isSubmitting } = useSubmitProject(teamId || '');
-  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
-
-  const team = teamData?.data;
-  const currentUserId = session?.user?.id;
-  const isLeader = currentUserId === team?.leader_id;
-  const hasSubmission = !!submissionData?.data;
-
-  const form = useForm<TProjectSubmissionForm>({
-    resolver: zodResolver(projectSubmissionSchema),
-    mode: 'all',
-  });
-
-  if (!isLeader) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
-        <p className="text-gray-600 mb-4">Only the team leader can submit projects</p>
-        <Button onClick={() => navigate(`/teams/${teamId}`)}>Back to Team</Button>
-      </div>
-    );
-  }
-
-  if (hasSubmission) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <div className="text-6xl mb-4">✅</div>
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Project Already Submitted</h2>
-        <p className="text-gray-600 mb-4">Your team has already submitted a project</p>
-        <div className="flex space-x-3">
-          <Button onClick={() => navigate(`/teams/${teamId}/submission`)}>
-            View Submission
-          </Button>
-          <Button variant="secondary" onClick={() => navigate(`/teams/${teamId}`)}>
-            Back to Team
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  const handleScreenshotUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (!files) return;
-
-    try {
-      const uploadPromises = Array.from(files).map(file => uploadFile(file));
-      const results = await Promise.all(uploadPromises);
-      const urls = results.map(r => r.data.url);
-      setScreenshots([...screenshots, ...urls]);
-    } catch (error) {
-      console.error('Failed to upload screenshots:', error);
-    }
-  };
-
-  const removeScreenshot = (index: number) => {
-    setScreenshots(screenshots.filter((_, i) => i !== index));
-  };
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      await submitProject({
-        ...data,
-        screenshots,
-      });
-      navigate(`/teams/${teamId}/submission`);
-    } catch (error) {
-      console.error('Failed to submit project:', error);
-    }
-  });
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="bg-white border-b">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <h1 className="text-3xl font-bold text-gray-900">Submit Project</h1>
-          <p className="text-gray-600 mt-1">{team?.name}</p>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Warning Banner */}
-        <div className="bg-red-50 border-2 border-red-500 rounded-lg p-6 mb-6">
-          <div className="flex items-start space-x-3">
-            <span className="text-3xl">⚠️</span>
-            <div>
-              <h3 className="font-bold text-red-900 text-lg">IMPORTANT WARNING</h3>
-              <ul className="text-red-800 mt-2 space-y-1 text-sm">
-                <li>• You can only submit your project ONCE</li>
-                <li>• After submission, you CANNOT edit or change anything</li>
-                <li>• Make sure all information is correct before submitting</li>
-                <li>• Review your project details carefully</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white rounded-lg shadow-md p-8">
-          <form onSubmit={(e) => {
-            e.preventDefault();
-            setShowConfirmModal(true);
-          }} className="space-y-6">
-            {/* Project Name */}
-            <ControlledInputField
-              control={form.control}
-              label="Project Name"
-              placeholder="Enter your project name"
-              name="project_name"
-            />
-
-            {/* Description */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                Project Description <span className="text-red-500">*</span>
-              </label>
-              <Controller
-                control={form.control}
-                name="description"
-                render={({ field, fieldState }) => (
-                  <div>
-                    <Textarea
-                      {...field}
-                      placeholder="Describe your project, its features, and what problem it solves..."
-                      rows={6}
-                      className="w-full"
-                    />
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                    )}
-                  </div>
-                )}
-              />
-            </div>
-
-            {/* Repository URL */}
-            <ControlledInputField
-              control={form.control}
-              label="Repository URL (GitHub, GitLab, etc.)"
-              placeholder="https://github.com/username/project"
-              name="repository_url"
-              type="url"
-            />
-
-            {/* Demo URL */}
-            <ControlledInputField
-              control={form.control}
-              label="Demo URL (Optional)"
-              placeholder="https://your-project-demo.com"
-              name="demo_url"
-              type="url"
-            />
-
-            {/* Presentation URL */}
-            <ControlledInputField
-              control={form.control}
-              label="Presentation URL (Optional)"
-              placeholder="https://slides.com/your-presentation or Google Drive link"
-              name="presentation_url"
-              type="url"
-            />
-
-            {/* Screenshots */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                Project Screenshots <span className="text-gray-400">(Optional)</span>
-              </label>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-4">
-                {screenshots.map((url, index) => (
-                  <div key={index} className="relative">
-                    <img
-                      src={url}
-                      alt={`Screenshot ${index + 1}`}
-                      className="w-full h-32 object-cover rounded-lg border-2 border-gray-200"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => removeScreenshot(index)}
-                      className="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm hover:bg-red-600"
-                    >
-                      ×
-                    </button>
-                  </div>
-                ))}
-              </div>
-              <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
-                <div className="text-center">
-                  <p className="text-gray-500">Click to upload screenshots</p>
-                  <p className="text-xs text-gray-400 mt-1">PNG, JPG up to 5MB each</p>
-                </div>
-                <input
-                  type="file"
-                  accept="image/*"
-                  multiple
-                  className="hidden"
-                  onChange={handleScreenshotUpload}
-                  disabled={isUploading}
-                />
-              </label>
-            </div>
-
-            {/* Submit Button */}
-            <div className="flex space-x-3 pt-4">
-              <Button
-                type="button"
-                variant="secondary"
-                className="flex-1"
-                onClick={() => navigate(`/teams/${teamId}`)}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                className="flex-1"
-                disabled={!form.formState.isValid || isUploading}
-              >
-                Review & Submit
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-
-      {/* Confirmation Modal */}
-      {showConfirmModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <div className="text-center mb-6">
-              <div className="text-5xl mb-4">⚠️</div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-2">
-                Final Confirmation
-              </h2>
-              <p className="text-red-600 font-medium">
-                This action is IRREVERSIBLE!
-              </p>
-            </div>
-            <div className="bg-gray-50 rounded-lg p-4 mb-6">
-              <p className="text-sm text-gray-700 mb-3">
-                By clicking "Submit Project", you confirm that:
-              </p>
-              <ul className="text-sm text-gray-600 space-y-2">
-                <li>✓ All information is correct and complete</li>
-                <li>✓ You understand this can only be done once</li>
-                <li>✓ You cannot edit after submission</li>
-                <li>✓ Your team agrees with this submission</li>
-              </ul>
-            </div>
-            <div className="flex space-x-3">
-              <Button
-                type="button"
-                variant="secondary"
-                className="flex-1"
-                onClick={() => setShowConfirmModal(false)}
-              >
-                Go Back
-              </Button>
-              <Button
-                onClick={onSubmit}
-                className="flex-1 bg-red-600 hover:bg-red-700"
-                disabled={isSubmitting}
-              >
-                {isSubmitting ? 'Submitting...' : 'Submit Project'}
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SubmitProjectPage;

apps/hackathon/src/app/teams/browse/page.tsx

@@ -1,230 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { Link, useNavigate } from 'react-router';
-import { useTeams, useJoinTeam, useMyTeams, ETeamVisibility, joinTeamSchema, TJoinTeamForm } from '@imphnen-frontend-service/service';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import INDONESIAN_CITIES_DATA from '../../../constants/cities';
-
-const INDONESIAN_CITIES = ['All Cities', ...INDONESIAN_CITIES_DATA];
-
-const BrowseTeamsPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const [search, setSearch] = useState('');
-  const [selectedCity, setSelectedCity] = useState('All Cities');
-  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
-  const [showJoinModal, setShowJoinModal] = useState(false);
-
-  const { data: teamsData, isLoading } = useTeams({
-    search,
-    city: selectedCity === 'All Cities' ? undefined : selectedCity,
-    visibility: ETeamVisibility.PUBLIC,
-  });
-
-  const { data: myTeamsData } = useMyTeams();
-  const { mutateAsync: joinTeam, isPending: isJoining } = useJoinTeam();
-
-  const form = useForm<TJoinTeamForm>({
-    resolver: zodResolver(joinTeamSchema),
-    mode: 'all',
-  });
-
-  const teams = teamsData?.data || [];
-  const myTeams = myTeamsData?.data || [];
-
-  // Helper function to check if user is a member of a team
-  const isMyTeam = (teamId: string) => {
-    return myTeams.some((team: any) => team.id === teamId);
-  };
-
-  const handleJoinRequest = (teamId: string) => {
-    setSelectedTeamId(teamId);
-    setShowJoinModal(true);
-  };
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    if (!selectedTeamId) return;
-
-    try {
-      await joinTeam({ teamId: selectedTeamId, data });
-      setShowJoinModal(false);
-      form.reset();
-      setSelectedTeamId(null);
-    } catch (error) {
-      console.error('Failed to send join request:', error);
-    }
-  });
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <div className="bg-white border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900">Browse Teams</h1>
-              <p className="text-gray-600 mt-1">Find and join teams looking for members</p>
-            </div>
-            <Link to="/dashboard">
-              <Button variant="secondary">Back to Dashboard</Button>
-            </Link>
-          </div>
-        </div>
-      </div>
-
-      {/* Filters */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div className="bg-white p-6 rounded-lg shadow-sm mb-6">
-          <div className="grid gap-4 md:grid-cols-2">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Search Teams
-              </label>
-              <Input
-                type="text"
-                placeholder="Search by team name..."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Filter by City
-              </label>
-              <select
-                value={selectedCity}
-                onChange={(e) => setSelectedCity(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              >
-                {INDONESIAN_CITIES.map((city) => (
-                  <option key={city} value={city}>
-                    {city}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-        </div>
-
-        {/* Teams List */}
-        {isLoading ? (
-          <div className="text-center py-12">
-            <p className="text-gray-600">Loading teams...</p>
-          </div>
-        ) : teams.length === 0 ? (
-          <div className="bg-white rounded-lg shadow-sm p-12 text-center">
-            <p className="text-gray-600 text-lg">No teams found</p>
-            <p className="text-gray-500 mt-2">Try adjusting your filters</p>
-          </div>
-        ) : (
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-            {teams.map((team) => (
-              <div key={team.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
-                {team.banner && (
-                  <img
-                    src={team.banner}
-                    alt={team.name}
-                    className="w-full h-32 object-cover"
-                  />
-                )}
-                <div className="p-6">
-                  <div className="flex items-center space-x-3 mb-3">
-                    {team.logo ? (
-                      <img
-                        src={team.logo}
-                        alt={team.name}
-                        className="w-12 h-12 rounded-full object-cover"
-                      />
-                    ) : (
-                      <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
-                        <span className="text-gray-500 text-xl">👥</span>
-                      </div>
-                    )}
-                    <div className="flex-1">
-                      <h3 className="text-lg font-bold text-gray-900">{team.name}</h3>
-                      <p className="text-sm text-gray-600">📍 {team.city}</p>
-                    </div>
-                  </div>
-                  <p className="text-gray-600 text-sm mb-4 line-clamp-3">
-                    {team.description}
-                  </p>
-                  {isMyTeam(team.id) ? (
-                    <Button
-                      className="w-full"
-                      variant="secondary"
-                      onClick={() => navigate(`/teams/${team.id}`)}
-                    >
-                      Your Team
-                    </Button>
-                  ) : (
-                    <Button
-                      className="w-full"
-                      onClick={() => handleJoinRequest(team.id)}
-                    >
-                      Request to Join
-                    </Button>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Join Request Modal */}
-      {showJoinModal && (
-        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">
-              Request to Join Team
-            </h2>
-            <p className="text-gray-600 mb-6">
-              Send a message to the team leader explaining why you want to join
-            </p>
-            <form onSubmit={onSubmit} className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Your Message
-                </label>
-                <textarea
-                  {...form.register('message')}
-                  rows={4}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  placeholder="Tell the team leader why you want to join their team..."
-                />
-                {form.formState.errors.message && (
-                  <p className="text-sm text-red-500 mt-1">
-                    {form.formState.errors.message.message}
-                  </p>
-                )}
-              </div>
-              <div className="flex space-x-3">
-                <Button
-                  type="button"
-                  variant="secondary"
-                  className="flex-1"
-                  onClick={() => {
-                    setShowJoinModal(false);
-                    form.reset();
-                    setSelectedTeamId(null);
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  className="flex-1"
-                  disabled={!form.formState.isValid || isJoining}
-                >
-                  {isJoining ? 'Sending...' : 'Send Request'}
-                </Button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default BrowseTeamsPage;

apps/hackathon/src/app/teams/create/page.tsx

@@ -1,317 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate } from 'react-router';
-import { useForm, Controller } from 'react-hook-form';
-import { teamCreateSchema, TTeamCreateForm, useCreateTeam, ETeamVisibility, useUploadFile } from '@imphnen-frontend-service/service';
-import { zodResolver } from '@hookform/resolvers/zod';
-import INDONESIAN_CITIES from '../../../constants/cities';
-
-const CreateTeamPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const [logoFile, setLogoFile] = useState<File | null>(null);
-  const [logoPreview, setLogoPreview] = useState<string>('');
-  const [bannerFile, setBannerFile] = useState<File | null>(null);
-  const [bannerPreview, setBannerPreview] = useState<string>('');
-
-  const form = useForm<TTeamCreateForm>({
-    resolver: zodResolver(teamCreateSchema),
-    mode: 'all',
-    defaultValues: {
-      visibility: ETeamVisibility.PUBLIC,
-      logo: null,
-      banner: null,
-    },
-  });
-
-  const { mutateAsync: createTeam, isPending: isCreating } = useCreateTeam();
-  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
-
-  const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      setLogoFile(file);
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setLogoPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      setBannerFile(file);
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setBannerPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      let logoUrl = null;
-      let bannerUrl = null;
-
-      if (logoFile) {
-        const logoResult = await uploadFile(logoFile);
-        logoUrl = logoResult.data.url;
-      }
-
-      if (bannerFile) {
-        const bannerResult = await uploadFile(bannerFile);
-        bannerUrl = bannerResult.data.url;
-      }
-
-      const result = await createTeam({
-        ...data,
-        logo: logoUrl,
-        banner: bannerUrl,
-      });
-
-      navigate(`/teams/${result.data.id}`);
-    } catch (error) {
-      console.error('Failed to create team:', error);
-    }
-  });
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <div className="bg-white border-b">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <h1 className="text-3xl font-bold text-gray-900">Create Your Team</h1>
-          <p className="text-gray-600 mt-1">Build your hackathon dream team</p>
-        </div>
-      </div>
-
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="bg-white rounded-lg shadow-md p-8">
-          <form onSubmit={onSubmit} className="space-y-6">
-            {/* Banner Upload */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Team Banner <span className="text-gray-400">(Optional)</span>
-              </label>
-              {bannerPreview ? (
-                <div className="relative">
-                  <img
-                    src={bannerPreview}
-                    alt="Banner preview"
-                    className="w-full h-48 object-cover rounded-lg border-2 border-gray-200"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setBannerFile(null);
-                      setBannerPreview('');
-                    }}
-                    className="absolute top-2 right-2 bg-red-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-red-600"
-                  >
-                    Remove
-                  </button>
-                </div>
-              ) : (
-                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
-                  <div className="text-center">
-                    <p className="text-gray-500">Click to upload banner</p>
-                    <p className="text-xs text-gray-400 mt-1">1200x400 recommended</p>
-                  </div>
-                  <input
-                    type="file"
-                    accept="image/*"
-                    className="hidden"
-                    onChange={handleBannerChange}
-                  />
-                </label>
-              )}
-            </div>
-
-            {/* Logo Upload */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Team Logo <span className="text-gray-400">(Optional, but highly recommended)</span>
-              </label>
-              <div className="flex items-center space-x-4">
-                {logoPreview ? (
-                  <img
-                    src={logoPreview}
-                    alt="Logo preview"
-                    className="w-24 h-24 rounded-full object-cover border-2 border-gray-200"
-                  />
-                ) : (
-                  <div className="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center">
-                    <span className="text-gray-400 text-3xl">👥</span>
-                  </div>
-                )}
-                <div>
-                  <label htmlFor="logo" className="cursor-pointer">
-                    <span className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">
-                      {logoPreview ? 'Change Logo' : 'Upload Logo'}
-                    </span>
-                    <input
-                      id="logo"
-                      type="file"
-                      accept="image/*"
-                      className="hidden"
-                      onChange={handleLogoChange}
-                    />
-                  </label>
-                  {logoPreview && (
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setLogoFile(null);
-                        setLogoPreview('');
-                      }}
-                      className="ml-3 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
-                    >
-                      Remove
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* Team Name */}
-            <ControlledInputField
-              control={form.control}
-              label="Team Name"
-              placeholder="Enter your team name"
-              name="name"
-            />
-
-            {/* City */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                City <span className="text-red-500">*</span>
-              </label>
-              <Controller
-                control={form.control}
-                name="city"
-                render={({ field, fieldState }) => (
-                  <div>
-                    <select
-                      {...field}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    >
-                      <option value="">Select city</option>
-                      {INDONESIAN_CITIES.map((city) => (
-                        <option key={city} value={city}>
-                          {city}
-                        </option>
-                      ))}
-                    </select>
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                    )}
-                  </div>
-                )}
-              />
-            </div>
-
-            {/* Description */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                Description <span className="text-red-500">*</span>
-              </label>
-              <Controller
-                control={form.control}
-                name="description"
-                render={({ field, fieldState }) => (
-                  <div>
-                    <Textarea
-                      {...field}
-                      placeholder="Tell others about your team, what you're looking for, your goals..."
-                      rows={4}
-                      className="w-full"
-                    />
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">{fieldState.error.message}</p>
-                    )}
-                  </div>
-                )}
-              />
-            </div>
-
-            {/* Visibility */}
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                Team Visibility <span className="text-red-500">*</span>
-              </label>
-              <Controller
-                control={form.control}
-                name="visibility"
-                render={({ field }) => (
-                  <div className="space-y-3">
-                    <label className="flex items-start space-x-3 cursor-pointer border rounded-lg p-4 hover:bg-gray-50">
-                      <input
-                        type="radio"
-                        {...field}
-                        value={ETeamVisibility.PUBLIC}
-                        checked={field.value === ETeamVisibility.PUBLIC}
-                        className="mt-1"
-                      />
-                      <div>
-                        <p className="font-medium text-gray-900">Public</p>
-                        <p className="text-sm text-gray-600">
-                          Team will be visible in Browse Teams. Anyone can request to join.
-                        </p>
-                      </div>
-                    </label>
-                    <label className="flex items-start space-x-3 cursor-pointer border rounded-lg p-4 hover:bg-gray-50">
-                      <input
-                        type="radio"
-                        {...field}
-                        value={ETeamVisibility.PRIVATE}
-                        checked={field.value === ETeamVisibility.PRIVATE}
-                        className="mt-1"
-                      />
-                      <div>
-                        <p className="font-medium text-gray-900">Private</p>
-                        <p className="text-sm text-gray-600">
-                          Team is hidden from Browse Teams. Members can only join via invitation.
-                        </p>
-                      </div>
-                    </label>
-                  </div>
-                )}
-              />
-            </div>
-
-            {/* Warning */}
-            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-              <p className="text-sm text-yellow-800">
-                <strong>Note:</strong> As team leader, you cannot leave or join another team after creating this team.
-              </p>
-            </div>
-
-            {/* Submit Button */}
-            <div className="flex space-x-3 pt-4">
-              <Button
-                type="button"
-                variant="secondary"
-                className="flex-1"
-                onClick={() => navigate('/dashboard')}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                className="flex-1"
-                disabled={!form.formState.isValid || isCreating || isUploading}
-              >
-                {isCreating || isUploading ? 'Creating Team...' : 'Create Team'}
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CreateTeamPage;

apps/hackathon/src/components/navigation.tsx

@@ -1,144 +0,0 @@
-import { FC, useState } from 'react';
-import { Link, useNavigate } from 'react-router';
-import { useUserMe, useMyTeams } from '@imphnen-frontend-service/service';
-import { useSession } from '@imphnen-frontend-service/utils';
-
-export const Navigation: FC = () => {
-  const navigate = useNavigate();
-  const [showUserMenu, setShowUserMenu] = useState(false);
-  const { data: userData } = useUserMe();
-  const { data: teamsData } = useMyTeams();
-  const { signOut } = useSession();
-
-  const user = userData?.data;
-  const myTeams = teamsData?.data || [];
-  const hasTeam = myTeams.length > 0;
-
-  const handleLogout = async () => {
-    await signOut();
-    navigate('/auth/login');
-  };
-
-  return (
-    <nav className="bg-white border-b shadow-sm">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-16">
-          {/* Logo */}
-          <Link to="/dashboard" className="flex items-center space-x-2">
-            <span className="text-2xl">🏆</span>
-            <span className="text-xl font-bold text-gray-900">Hackathon</span>
-          </Link>
-
-          {/* Navigation Links */}
-          <div className="hidden md:flex items-center space-x-6">
-            <Link
-              to="/dashboard"
-              className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
-            >
-              Dashboard
-            </Link>
-            <Link
-              to="/teams/browse"
-              className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
-            >
-              Browse Teams
-            </Link>
-            {hasTeam && (
-              <Link
-                to={`/teams/${myTeams[0].id}`}
-                className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
-              >
-                My Team
-              </Link>
-            )}
-          </div>
-
-          {/* User Menu */}
-          <div className="relative">
-            <button
-              onClick={() => setShowUserMenu(!showUserMenu)}
-              className="flex items-center space-x-3 focus:outline-none"
-            >
-              {user?.avatar ? (
-                <img
-                  src={user.avatar}
-                  alt={user.fullname}
-                  className="w-10 h-10 rounded-full object-cover border-2 border-gray-200"
-                />
-              ) : (
-                <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
-                  <span className="text-gray-500">👤</span>
-                </div>
-              )}
-              <span className="hidden md:block text-gray-700 font-medium">
-                {user?.fullname}
-              </span>
-              <svg
-                className="w-4 h-4 text-gray-500"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M19 9l-7 7-7-7"
-                />
-              </svg>
-            </button>
-
-            {/* Dropdown Menu */}
-            {showUserMenu && (
-              <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
-                <div className="px-4 py-2 border-b border-gray-200">
-                  <p className="text-sm font-medium text-gray-900">{user?.fullname}</p>
-                  <p className="text-xs text-gray-600 truncate">{user?.email}</p>
-                </div>
-                <Link
-                  to="/dashboard"
-                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                  onClick={() => setShowUserMenu(false)}
-                >
-                  Dashboard
-                </Link>
-                <Link
-                  to="/teams/browse"
-                  className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                  onClick={() => setShowUserMenu(false)}
-                >
-                  Browse Teams
-                </Link>
-                {hasTeam && (
-                  <Link
-                    to={`/teams/${myTeams[0].id}`}
-                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                    onClick={() => setShowUserMenu(false)}
-                  >
-                    My Team
-                  </Link>
-                )}
-                <div className="border-t border-gray-200 mt-2 pt-2">
-                  <button
-                    onClick={handleLogout}
-                    className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
-                  >
-                    Logout
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Close dropdown when clicking outside */}
-      {showUserMenu && (
-        <div
-          className="fixed inset-0 z-40"
-          onClick={() => setShowUserMenu(false)}
-        />
-      )}
-    </nav>
-  );
-};

apps/hackathon/src/constants/cities.ts

@@ -1,518 +0,0 @@
-const INDONESIAN_CITIES: string[] = [
-  'Aceh Selatan',
-  'Aceh Tenggara',
-  'Aceh Timur',
-  'Aceh Tengah',
-  'Aceh Barat',
-  'Aceh Besar',
-  'Pidie',
-  'Aceh Utara',
-  'Simeulue',
-  'Aceh Singkil',
-  'Bireuen',
-  'Aceh Barat Daya',
-  'Gayo Lues',
-  'Aceh Jaya',
-  'Nagan Raya',
-  'Aceh Tamiang',
-  'Bener Meriah',
-  'Pidie Jaya',
-  'Kota Banda Aceh',
-  'Kota Sabang',
-  'Kota Lhokseumawe',
-  'Kota Langsa',
-  'Kota Subulussalam',
-  'Tapanuli Tengah',
-  'Tapanuli Utara',
-  'Tapanuli Selatan',
-  'Nias',
-  'Langkat',
-  'Karo',
-  'Deli Serdang',
-  'Simalungun',
-  'Asahan',
-  'Labuhanbatu',
-  'Dairi',
-  'Toba',
-  'Mandailing Natal',
-  'Nias Selatan',
-  'Pakpak Bharat',
-  'Humbang Hasundutan',
-  'Samosir',
-  'Serdang Bedagai',
-  'Batu Bara',
-  'Padang Lawas Utara',
-  'Padang Lawas',
-  'Labuhanbatu Selatan',
-  'Labuhanbatu Utara',
-  'Nias Utara',
-  'Nias Barat',
-  'Kota Medan',
-  'Kota Pematangsiantar',
-  'Kota Sibolga',
-  'Kota Tanjung Balai',
-  'Kota Binjai',
-  'Kota Tebing Tinggi',
-  'Kota Padangsidimpuan',
-  'Kota Gunungsitoli',
-  'Pesisir Selatan',
-  'Solok',
-  'Sijunjung',
-  'Tanah Datar',
-  'Padang Pariaman',
-  'Agam',
-  'Lima Puluh Kota',
-  'Pasaman',
-  'Kepulauan Mentawai',
-  'Dharmasraya',
-  'Solok Selatan',
-  'Pasaman Barat',
-  'Kota Padang',
-  'Kota Solok',
-  'Kota Sawahlunto',
-  'Kota Padang Panjang',
-  'Kota Bukittinggi',
-  'Kota Payakumbuh',
-  'Kota Pariaman',
-  'Kampar',
-  'Indragiri Hulu',
-  'Bengkalis',
-  'Indragiri Hilir',
-  'Pelalawan',
-  'Rokan Hulu',
-  'Rokan Hilir',
-  'Siak',
-  'Kuantan Singingi',
-  'Kepulauan Meranti',
-  'Kota Pekanbaru',
-  'Kota Dumai',
-  'Kerinci',
-  'Merangin',
-  'Sarolangun',
-  'Batanghari',
-  'Muaro Jambi',
-  'Tanjung Jabung Barat',
-  'Tanjung Jabung Timur',
-  'Bungo',
-  'Tebo',
-  'Kota Jambi',
-  'Kota Sungai Penuh',
-  'Ogan Komering Ulu',
-  'Ogan Komering Ilir',
-  'Muara Enim',
-  'Lahat',
-  'Musi Rawas',
-  'Musi Banyuasin',
-  'Banyuasin',
-  'Ogan Komering Ulu Timur',
-  'Ogan Komering Ulu Selatan',
-  'Ogan Ilir',
-  'Empat Lawang',
-  'Penukal Abab Lematang Ilir',
-  'Musi Rawas Utara',
-  'Kota Palembang',
-  'Kota Pagar Alam',
-  'Kota Lubuk Linggau',
-  'Kota Prabumulih',
-  'Bengkulu Selatan',
-  'Rejang Lebong',
-  'Bengkulu Utara',
-  'Kaur',
-  'Seluma',
-  'Muko Muko',
-  'Lebong',
-  'Kepahiang',
-  'Bengkulu Tengah',
-  'Kota Bengkulu',
-  'Lampung Selatan',
-  'Lampung Tengah',
-  'Lampung Utara',
-  'Lampung Barat',
-  'Tulang Bawang',
-  'Tanggamus',
-  'Lampung Timur',
-  'Way Kanan',
-  'Pesawaran',
-  'Pringsewu',
-  'Mesuji',
-  'Tulang Bawang Barat',
-  'Pesisir Barat',
-  'Kota Bandar Lampung',
-  'Kota Metro',
-  'Bangka',
-  'Belitung',
-  'Bangka Selatan',
-  'Bangka Tengah',
-  'Bangka Barat',
-  'Belitung Timur',
-  'Kota Pangkal Pinang',
-  'Bintan',
-  'Karimun',
-  'Natuna',
-  'Lingga',
-  'Kepulauan Anambas',
-  'Kota Batam',
-  'Kota Tanjung Pinang',
-  'Kepulauan Seribu',
-  'Kota Jakarta Pusat',
-  'Kota Jakarta Utara',
-  'Kota Jakarta Barat',
-  'Kota Jakarta Selatan',
-  'Kota Jakarta Timur',
-  'Bogor',
-  'Sukabumi',
-  'Cianjur',
-  'Bandung',
-  'Garut',
-  'Tasikmalaya',
-  'Ciamis',
-  'Kuningan',
-  'Cirebon',
-  'Majalengka',
-  'Sumedang',
-  'Indramayu',
-  'Subang',
-  'Purwakarta',
-  'Karawang',
-  'Bekasi',
-  'Bandung Barat',
-  'Pangandaran',
-  'Kota Bogor',
-  'Kota Sukabumi',
-  'Kota Bandung',
-  'Kota Cirebon',
-  'Kota Bekasi',
-  'Kota Depok',
-  'Kota Cimahi',
-  'Kota Tasikmalaya',
-  'Kota Banjar',
-  'Cilacap',
-  'Banyumas',
-  'Purbalingga',
-  'Banjarnegara',
-  'Kebumen',
-  'Purworejo',
-  'Wonosobo',
-  'Magelang',
-  'Boyolali',
-  'Klaten',
-  'Sukoharjo',
-  'Wonogiri',
-  'Karanganyar',
-  'Sragen',
-  'Grobogan',
-  'Blora',
-  'Rembang',
-  'Pati',
-  'Kudus',
-  'Jepara',
-  'Demak',
-  'Semarang',
-  'Temanggung',
-  'Kendal',
-  'Batang',
-  'Pekalongan',
-  'Pemalang',
-  'Tegal',
-  'Brebes',
-  'Kota Magelang',
-  'Kota Surakarta',
-  'Kota Salatiga',
-  'Kota Semarang',
-  'Kota Pekalongan',
-  'Kota Tegal',
-  'Kulon Progo',
-  'Bantul',
-  'Gunungkidul',
-  'Sleman',
-  'Kota Yogyakarta',
-  'Pacitan',
-  'Ponorogo',
-  'Trenggalek',
-  'Tulungagung',
-  'Blitar',
-  'Kediri',
-  'Malang',
-  'Lumajang',
-  'Jember',
-  'Banyuwangi',
-  'Bondowoso',
-  'Situbondo',
-  'Probolinggo',
-  'Pasuruan',
-  'Sidoarjo',
-  'Mojokerto',
-  'Jombang',
-  'Nganjuk',
-  'Madiun',
-  'Magetan',
-  'Ngawi',
-  'Bojonegoro',
-  'Tuban',
-  'Lamongan',
-  'Gresik',
-  'Bangkalan',
-  'Sampang',
-  'Pamekasan',
-  'Sumenep',
-  'Kota Kediri',
-  'Kota Blitar',
-  'Kota Malang',
-  'Kota Probolinggo',
-  'Kota Pasuruan',
-  'Kota Mojokerto',
-  'Kota Madiun',
-  'Kota Surabaya',
-  'Kota Batu',
-  'Pandeglang',
-  'Lebak',
-  'Tangerang',
-  'Serang',
-  'Kota Tangerang',
-  'Kota Cilegon',
-  'Kota Serang',
-  'Kota Tangerang Selatan',
-  'Jembrana',
-  'Tabanan',
-  'Badung',
-  'Gianyar',
-  'Klungkung',
-  'Bangli',
-  'Karangasem',
-  'Buleleng',
-  'Kota Denpasar',
-  'Lombok Barat',
-  'Lombok Tengah',
-  'Lombok Timur',
-  'Sumbawa',
-  'Dompu',
-  'Bima',
-  'Sumbawa Barat',
-  'Lombok Utara',
-  'Kota Mataram',
-  'Kota Bima',
-  'Kupang',
-  'Timor Tengah Selatan',
-  'Timor Tengah Utara',
-  'Belu',
-  'Alor',
-  'Flores Timur',
-  'Sikka',
-  'Ende',
-  'Ngada',
-  'Manggarai',
-  'Sumba Timur',
-  'Sumba Barat',
-  'Lembata',
-  'Rote Ndao',
-  'Manggarai Barat',
-  'Nagekeo',
-  'Sumba Tengah',
-  'Sumba Barat Daya',
-  'Manggarai Timur',
-  'Sabu Raijua',
-  'Malaka',
-  'Kota Kupang',
-  'Sambas',
-  'Mempawah',
-  'Sanggau',
-  'Ketapang',
-  'Sintang',
-  'Kapuas Hulu',
-  'Bengkayang',
-  'Landak',
-  'Sekadau',
-  'Melawi',
-  'Kayong Utara',
-  'Kubu Raya',
-  'Kota Pontianak',
-  'Kota Singkawang',
-  'Kotawaringin Barat',
-  'Kotawaringin Timur',
-  'Kapuas',
-  'Barito Selatan',
-  'Barito Utara',
-  'Katingan',
-  'Seruyan',
-  'Sukamara',
-  'Lamandau',
-  'Gunung Mas',
-  'Pulang Pisau',
-  'Murung Raya',
-  'Barito Timur',
-  'Kota Palangkaraya',
-  'Tanah Laut',
-  'Kotabaru',
-  'Banjar',
-  'Barito Kuala',
-  'Tapin',
-  'Hulu Sungai Selatan',
-  'Hulu Sungai Tengah',
-  'Hulu Sungai Utara',
-  'Tabalong',
-  'Tanah Bumbu',
-  'Balangan',
-  'Kota Banjarmasin',
-  'Kota Banjarbaru',
-  'Paser',
-  'Kutai Kartanegara',
-  'Berau',
-  'Kutai Barat',
-  'Kutai Timur',
-  'Penajam Paser Utara',
-  'Mahakam Ulu',
-  'Kota Balikpapan',
-  'Kota Samarinda',
-  'Kota Bontang',
-  'Bulungan',
-  'Malinau',
-  'Nunukan',
-  'Tana Tidung',
-  'Kota Tarakan',
-  'Bolaang Mongondow',
-  'Minahasa',
-  'Kepulauan Sangihe',
-  'Kepulauan Talaud',
-  'Minahasa Selatan',
-  'Minahasa Utara',
-  'Minahasa Tenggara',
-  'Bolaang Mongondow Utara',
-  'Kepulauan Siau Tagulandang Biaro (Sitaro)',
-  'Bolaang Mongondow Timur',
-  'Bolaang Mongondow Selatan',
-  'Kota Manado',
-  'Kota Bitung',
-  'Kota Tomohon',
-  'Kota Kotamobagu',
-  'Banggai',
-  'Poso',
-  'Donggala',
-  'Toli Toli',
-  'Buol',
-  'Morowali',
-  'Banggai Kepulauan',
-  'Parigi Moutong',
-  'Tojo Una Una',
-  'Sigi',
-  'Banggai Laut',
-  'Morowali Utara',
-  'Kota Palu',
-  'Kepulauan Selayar',
-  'Bulukumba',
-  'Bantaeng',
-  'Jeneponto',
-  'Takalar',
-  'Gowa',
-  'Sinjai',
-  'Bone',
-  'Maros',
-  'Pangkajene Kepulauan',
-  'Barru',
-  'Soppeng',
-  'Wajo',
-  'Sidenreng Rappang',
-  'Pinrang',
-  'Enrekang',
-  'Luwu',
-  'Tana Toraja',
-  'Luwu Utara',
-  'Luwu Timur',
-  'Toraja Utara',
-  'Kota Makassar',
-  'Kota Pare Pare',
-  'Kota Palopo',
-  'Kolaka',
-  'Konawe',
-  'Muna',
-  'Buton',
-  'Konawe Selatan',
-  'Bombana',
-  'Wakatobi',
-  'Kolaka Utara',
-  'Konawe Utara',
-  'Buton Utara',
-  'Kolaka Timur',
-  'Konawe Kepulauan',
-  'Muna Barat',
-  'Buton Tengah',
-  'Buton Selatan',
-  'Kota Kendari',
-  'Kota Bau Bau',
-  'Gorontalo',
-  'Boalemo',
-  'Bone Bolango',
-  'Pahuwato',
-  'Gorontalo Utara',
-  'Kota Gorontalo',
-  'Pasangkayu (Mamuju Utara)',
-  'Mamuju',
-  'Mamasa',
-  'Polewali Mandar',
-  'Majene',
-  'Mamuju Tengah',
-  'Maluku Tengah',
-  'Maluku Tenggara',
-  'Kepulauan Tanimbar (Maluku Tenggara Barat)',
-  'Buru',
-  'Seram Bagian Timur',
-  'Seram Bagian Barat',
-  'Kepulauan Aru',
-  'Maluku Barat Daya',
-  'Buru Selatan',
-  'Kota Ambon',
-  'Kota Tual',
-  'Halmahera Barat',
-  'Halmahera Tengah',
-  'Halmahera Utara',
-  'Halmahera Selatan',
-  'Kepulauan Sula',
-  'Halmahera Timur',
-  'Pulau Morotai',
-  'Pulau Taliabu',
-  'Kota Ternate',
-  'Kota Tidore Kepulauan',
-  'Jayapura',
-  'Kepulauan Yapen',
-  'Biak Numfor',
-  'Sarmi',
-  'Keerom',
-  'Waropen',
-  'Supiori',
-  'Mamberamo Raya',
-  'Kota Jayapura',
-  'Manokwari',
-  'Fak Fak',
-  'Teluk Bintuni',
-  'Teluk Wondama',
-  'Kaimana',
-  'Manokwari Selatan',
-  'Pegunungan Arfak',
-  'Merauke',
-  'Boven Digoel',
-  'Mappi',
-  'Asmat',
-  'Nabire',
-  'Puncak Jaya',
-  'Paniai',
-  'Mimika',
-  'Puncak',
-  'Dogiyai',
-  'Intan Jaya',
-  'Deiyai',
-  'Jayawijaya',
-  'Pegunungan Bintang',
-  'Yahukimo',
-  'Tolikara',
-  'Mamberamo Tengah',
-  'Yalimo',
-  'Lanny Jaya',
-  'Nduga',
-  'Sorong',
-  'Sorong Selatan',
-  'Raja Ampat',
-  'Tambrauw',
-  'Maybrat',
-  'Kota Sorong',
-];
-
-export default INDONESIAN_CITIES;

apps/hackathon/src/hooks/use-team-guards.ts

@@ -1,76 +0,0 @@
-import { useTeamById, useTeamMembers, useUserMe, useTeamSubmission } from '@imphnen-frontend-service/service';
-
-/**
- * Hook to check if current user is a member of the team
- */
-export const useTeamMembership = (teamId: string) => {
-  const { data: userData } = useUserMe();
-  const { data: membersData } = useTeamMembers(teamId);
-
-  const currentUser = userData?.data;
-  const members = membersData?.data || [];
-
-  const isMember = members.some(m => m.user_id === currentUser?.id);
-  const currentMember = members.find(m => m.user_id === currentUser?.id);
-
-  return {
-    isMember,
-    currentMember,
-    memberRole: currentMember?.role,
-    memberStatus: currentMember?.status,
-  };
-};
-
-/**
- * Hook to check if current user is the team leader
- */
-export const useIsTeamLeader = (teamId: string) => {
-  const { data: teamData } = useTeamById(teamId);
-  const { data: userData } = useUserMe();
-
-  const team = teamData?.data;
-  const currentUser = userData?.data;
-
-  const isLeader = currentUser?.id === team?.leader_id;
-
-  return {
-    isLeader,
-    leaderId: team?.leader_id,
-  };
-};
-
-/**
- * Hook to get team submission status
- */
-export const useTeamSubmissionStatus = (teamId: string) => {
-  const { data: submissionData, isLoading } = useTeamSubmission(teamId, !!teamId);
-
-  const hasSubmission = !!submissionData?.data;
-  const submission = submissionData?.data;
-  const isSubmitted = submission?.status === 'submitted';
-
-  return {
-    hasSubmission,
-    isSubmitted,
-    submission,
-    isLoading,
-  };
-};
-
-/**
- * Hook to check if current user can perform team actions
- */
-export const useTeamPermissions = (teamId: string) => {
-  const { isLeader } = useIsTeamLeader(teamId);
-  const { isMember } = useTeamMembership(teamId);
-  const { hasSubmission } = useTeamSubmissionStatus(teamId);
-
-  return {
-    canEditTeam: isLeader,
-    canManageMembers: isLeader,
-    canSubmitProject: isLeader && !hasSubmission,
-    canViewTeam: isMember,
-    canViewSubmission: isMember,
-    canAccessChat: isMember,
-  };
-};

apps/hackathon/src/index.css

@@ -1,136 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
-@import 'tailwindcss';
-@source "../../../libs/ui/**/*.{ts,tsx}";
-
-@theme {
-  --color-primary-50: #f0f8ff;
-  --color-primary-100: #e1f0fd;
-  --color-primary-200: #bce1fb;
-  --color-primary-300: #81cbf8;
-  --color-primary-400: #3eb0f2;
-  --color-primary-500: #23a1eb;
-  --color-primary-600: #0877c1;
-  --color-primary-700: #085f9c;
-  --color-primary-800: #0b5181;
-  --color-primary-900: #0f446b;
-  --color-primary-950: #0a2b47;
-
-  --color-neutral-50: #f6f6f6;
-  --color-neutral-100: #e7e7e7;
-  --color-neutral-200: #d1d1d1;
-  --color-neutral-300: #b0b0b0;
-  --color-neutral-400: #888888;
-  --color-neutral-500: #6d6d6d;
-  --color-neutral-600: #5d5d5d;
-  --color-neutral-700: #4f4f4f;
-  --color-neutral-800: #454545;
-  --color-neutral-900: #3d3d3d;
-  --color-neutral-950: #2b2b2b;
-
-  --color-success-100: #e0fbd8;
-  --color-success-200: #bcf8b0;
-  --color-success-300: #8eea85;
-  --color-success-400: #63d564;
-  --color-success-500: #35ba43;
-  --color-success-600: #269f3e;
-  --color-success-700: #1a8439;
-  --color-success-800: #106b32;
-  --color-success-900: #0b592f;
-
-  --color-info-100: #ccfcfe;
-  --color-info-200: #9bf3fd;
-  --color-info-300: #67e3fb;
-  --color-info-400: #42cdf8;
-  --color-info-500: #04acf3;
-  --color-info-600: #0185d0;
-  --color-info-700: #0264af;
-  --color-info-800: #01478d;
-  --color-info-900: #003375;
-
-  --color-warning-100: #fffcd3;
-  --color-warning-200: #fffaa9;
-  --color-warning-300: #fff67d;
-  --color-warning-400: #fff25d;
-  --color-warning-500: #ffed27;
-  --color-warning-600: #dbc91d;
-  --color-warning-700: #b7a714;
-  --color-warning-800: #93850b;
-  --color-warning-900: #7a6d07;
-
-  --color-danger-100: #ffe8da;
-  --color-danger-200: #ffcbb3;
-  --color-danger-300: #ffaa8d;
-  --color-danger-400: #ff8870;
-  --color-danger-500: #ff5242;
-  --color-danger-600: #da3030;
-  --color-danger-700: #b7212d;
-  --color-danger-800: #93152a;
-  --color-danger-900: #7a0c27;
-
-  --radius-none: 0px;
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-2xl: 16px;
-  --radius-3xl: 24px;
-  --radius-full: 50%;
-
-  --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
-
-  --text-h1: 3.833rem;
-  /* ~46px */
-  --text-h2: 3.083rem;
-  /* ~37px */
-  --text-h3: 2.417rem;
-  /* ~29px */
-  --text-p1: 1.917rem;
-  /* ~23px */
-  --text-p2: 1.583rem;
-  /* ~19px */
-  --text-p3: 1.25rem;
-  /* 15px */
-  --text-label1: 1rem;
-  /* 12px */
-  --text-label2: 0.833rem;
-  /* ~10px */
-  --text-label3: 0.677rem;
-  /* ~8px */
-}
-
-@layer base {
-
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-neutral-200, currentColor);
-  }
-
-  /* Custom scrollbar */
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--color-neutral-50);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: #cccccc;
-    border-radius: 3px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--color-neutral-300);
-  }
-
-  html {
-    font-family: 'Bai Jamjuree', sans-serif;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 1.2;
-  }
-}

apps/hackathon/src/main.tsx

@@ -1,46 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import { StrictMode } from 'react';
-import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
-import {
-  add404PageToRoutesChildren,
-  addErrorElementToRoutes,
-  convertPagesToRoute,
-  ModalLoginProvider,
-  QueryProvider,
-} from '@imphnen-frontend-service/utils';
-import { Toaster } from 'sonner';
-import './index.css';
-
-const files = import.meta.glob('./app/**/*(page|layout).tsx');
-const errorFiles = import.meta.glob('./app/**/*error.tsx');
-const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
-const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
-
-const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
-addErrorElementToRoutes(errorFiles, routes);
-add404PageToRoutesChildren(notFoundFiles, routes);
-
-const router = createBrowserRouter([
-  {
-    ...routes,
-    // MIDDLEWARE TEMPORARILY DISABLED - causing infinite loops with React Router v7
-    // TODO: Implement auth checks at component level or use different pattern
-    // loader: middleware,
-    // shouldRevalidate: () => false,
-  },
-]);
-
-const rootElement = document.getElementById('root');
-
-if (!rootElement) throw new Error('Failed to find the root element');
-
-createRoot(rootElement).render(
-  <StrictMode>
-    <QueryProvider>
-      <ModalLoginProvider>
-        <Toaster position="top-right" />
-        <RouterProvider router={router} />
-      </ModalLoginProvider>
-    </QueryProvider>
-  </StrictMode>
-);

apps/hackathon/src/middleware.ts

@@ -1,141 +0,0 @@
-import { SessionUser } from '@imphnen-frontend-service/utils';
-import { supabase } from '@imphnen-frontend-service/service';
-import { LoaderFunctionArgs, redirect } from 'react-router';
-
-const mappingPublicRoutes = [
-  '/',
-];
-
-const mappingOnboardingRoutes = [
-  '/onboarding/user',
-];
-
-const mappingRoutePermissions = [
-  {
-    path: '/dashboard',
-    permissions: [],
-  },
-  {
-    path: '/teams/browse',
-    permissions: [],
-  },
-  {
-    path: '/teams/create',
-    permissions: [],
-  },
-];
-
-const mappingPublicPrefixRoutes = [
-  '/hackathons',
-];
-
-// Cache to prevent redundant checks (cache for 5 seconds)
-const onboardingCache = new Map<string, { hasLocation: boolean; timestamp: number }>();
-const CACHE_DURATION = 5000; // 5 seconds
-
-export const middleware = async ({ request }: LoaderFunctionArgs) => {
-  const url = new URL(request.url);
-  const pathname = url.pathname;
-
-  console.log('[Middleware] Checking route:', pathname);
-
-  // Get session from Supabase (authoritative source)
-  const { data: { session: supabaseSession }, error: sessionError } = await supabase.auth.getSession();
-
-  // Handle session errors
-  if (sessionError) {
-    console.error('[Middleware] Session error:', sessionError);
-    // Don't redirect on session errors, let the app handle it
-  }
-
-  // Allow to access the hackathon pages without authentication
-  if (mappingPublicPrefixRoutes.some((prefix) => pathname.startsWith(prefix))) {
-    return null;
-  }
-
-  // Public routes - allow everyone to view the landing page
-  if (mappingPublicRoutes.includes(pathname)) {
-    return null;
-  }
-
-  // Auth callback - allow without authentication check (for OAuth callback)
-  if (pathname === '/auth/callback') {
-    return null;
-  }
-
-  // Auth routes (all /auth/* paths) - redirect to dashboard if already authenticated
-  if (pathname.startsWith('/auth')) {
-    if (supabaseSession) return redirect('/dashboard');
-    return null;
-  }
-
-  // Require authentication for all other routes - ONLY check Supabase session
-  if (!supabaseSession) {
-    return redirect('/auth/login');
-  }
-
-  // Check if user has completed onboarding by querying database (not localStorage!)
-  // Skip onboarding check for onboarding routes themselves
-  if (!mappingOnboardingRoutes.includes(pathname)) {
-    try {
-      const userId = supabaseSession.user.id;
-      const now = Date.now();
-
-      // Check cache first
-      const cached = onboardingCache.get(userId);
-      let hasLocation = false;
-
-      if (cached && (now - cached.timestamp) < CACHE_DURATION) {
-        console.log('[Middleware] Using cached onboarding status');
-        hasLocation = cached.hasLocation;
-      } else {
-        console.log('[Middleware] Fetching fresh onboarding status');
-        const { data: userData, error: userError } = await supabase
-          .from('users')
-          .select('location')
-          .eq('id', userId)
-          .single();
-
-        if (userError) {
-          console.error('[Middleware] Failed to fetch user data:', userError);
-          // If we can't fetch user data, allow access (don't break the app)
-          return null;
-        }
-
-        hasLocation = !!userData?.location;
-
-        // Update cache
-        onboardingCache.set(userId, { hasLocation, timestamp: now });
-      }
-
-      if (!hasLocation) {
-        return redirect('/onboarding/user');
-      }
-    } catch (error) {
-      console.error('[Middleware] Unexpected error checking onboarding:', error);
-      // On error, allow access (fail open)
-      return null;
-    }
-  }
-
-  // Check route permissions using fresh user data from Zustand (for UI metadata)
-  const session = SessionUser.get();
-  const userPermissions =
-    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
-
-  const matchedRoute = mappingRoutePermissions.find(
-    (route) => route.path === pathname
-  );
-
-  if (matchedRoute) {
-    const hasPermission =
-      !matchedRoute.permissions ||
-      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
-
-    if (!hasPermission) {
-      return redirect('/dashboard');
-    }
-  }
-
-  return null;
-};

apps/hackathon/tsconfig.app.json

@@ -1,27 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
-      "vite/client"
-    ]
-  },
-  "exclude": [
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx",
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts"
-  ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}

apps/hackathon/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "types": ["vite/client", "vitest"]
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
-}

apps/hackathon/tsconfig.spec.json

@@ -1,30 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
-      "node",
-      "vitest",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "include": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ]
-}

apps/hackathon/vite.config.ts

@@ -1,42 +0,0 @@
-/// <reference types='vitest' />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
-
-export default defineConfig(() => ({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/hackathon',
-  server: {
-    port: 3004,
-    host: 'localhost',
-  },
-  preview: {
-    port: 3005,
-    host: 'localhost',
-  },
-  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-  build: {
-    outDir: '../../dist/apps/hackathon',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-  },
-  test: {
-    watch: false,
-    globals: true,
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    reporters: ['default'],
-    coverage: {
-      reportsDirectory: '../../coverage/apps/hackathon',
-      provider: 'v8' as const,
-    },
-  },
-}));

apps/landing/.deploy

@@ -1 +0,0 @@
-Tue, Nov 25, 2025 11:09:55 AM

apps/landing/.deploy-trigger

@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks

apps/landing/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./../../dist/apps/landing/.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/landing/next.config.js

@@ -3,7 +3,7 @@ const path = require('path');
 
 /** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */
 const nextConfig = {
-  nx: {},
+  nx: { svgr: false },
   output: 'standalone',
 };
 

apps/landing/src/app/(auth)/signin/_http/fetch-post-signin.ts

@@ -22,3 +22,4 @@ export async function fetchPostSignin({
 
   return data;
 }
+

apps/landing/src/app/(public)/(home)/_components/community-section.tsx

@@ -34,7 +34,7 @@ export function CommunitySection() {
       opacity: 1,
       transition: {
         duration: 0.4,
-        ease: [0.25, 0.46, 0.45, 0.94] as any,
+        ease: [0.25, 0.46, 0.45, 0.94],
       },
     },
   };

apps/landing/src/app/(public)/(home)/_components/testimonial-section.tsx

@@ -30,7 +30,7 @@ export function TestimonialSection() {
       opacity: 1,
       transition: {
         duration: 0.4,
-        ease: [0.25, 0.46, 0.45, 0.94] as any,
+        ease: [0.25, 0.46, 0.45, 0.94],
       },
     },
   };

apps/landing/src/app/(public)/(home)/home/page.tsx

@@ -0,0 +1,14 @@
+import { CommunitySection } from '../_components/community-section';
+import { CTASection } from '../_components/cta-section';
+import { HeroSection } from '../_components/hero-section';
+import { TestimonialSection } from '../_components/testimonial-section';
+export default function Page() {
+  return (
+    <>
+      <HeroSection />
+      <CommunitySection />
+      <TestimonialSection />
+      <CTASection />
+    </>
+  );
+}

apps/landing/src/app/(public)/(home)/page.tsx

@@ -1,14 +0,0 @@
-import { CommunitySection } from './_components/community-section';
-import { CTASection } from './_components/cta-section';
-import { HeroSection } from './_components/hero-section';
-import { TestimonialSection } from './_components/testimonial-section';
-export default function Page() {
-  return (
-    <>
-      <HeroSection />
-      <CommunitySection />
-      <TestimonialSection />
-      <CTASection />
-    </>
-  );
-}

apps/landing/src/app/(public)/_components/footer.tsx

@@ -24,37 +24,32 @@ export default function Footer() {
             </p>
             <div className="flex space-x-4">
               <Link
-                href="https://fb.com/groups/programmerhandal"
+                href="#"
                 className="text-muted-foreground hover:text-foreground"
-                target="_blank"
               >
                 <FaFacebook className="size-6" />
               </Link>
               <Link
-                href="https://discord.gg/imphnen"
+                href="#"
                 className="text-muted-foreground hover:text-foreground"
-                target="_blank"
               >
                 <FaDiscord className="size-6" />
               </Link>
               <Link
-                href="https://www.instagram.com/imphnen.dev"
+                href="#"
                 className="text-muted-foreground hover:text-foreground"
-                target="_blank"
               >
                 <FaInstagram className="size-6" />
               </Link>
               <Link
-                href="https://www.tiktok.com/@imphnen"
+                href="#"
                 className="text-muted-foreground hover:text-foreground"
-                target="_blank"
               >
                 <FaTiktok className="size-6" />
               </Link>
               <Link
-                href="https://www.linkedin.com/company/imphnen"
+                href="#"
                 className="text-muted-foreground hover:text-foreground"
-                target="_blank"
               >
                 <FaLinkedinIn className="size-6" />
               </Link>
@@ -83,7 +78,6 @@ export default function Footer() {
                   <Link
                     href={link}
                     className="text-sm text-muted-foreground hover:text-foreground"
-                    target="_blank"
                   >
                     {name}
                   </Link>

apps/landing/src/app/(public)/_components/header.tsx

@@ -2,6 +2,7 @@
 
 import { LogoSimple } from '@/app/_components/logo';
 import NAVIGATIONS from '@/data/navigations.json';
+import { useAuth } from '@/hooks/use-auth';
 import { Button } from '@components';
 import { cn } from '@utils';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -13,6 +14,7 @@ import { LuMenu, LuX } from 'react-icons/lu';
 export function Header() {
   const router = useRouter();
   const pathname = usePathname();
+  const { isAuthenticated } = useAuth();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   useEffect(() => {
@@ -30,6 +32,13 @@ export function Header() {
     setMobileMenuOpen(false);
   }, [pathname]);
 
+  const handleLogout = () => {
+    document.cookie = '__imphnen_access_token__=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = '__imphnen_refresh_token__=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    router.push('/');
+    window.location.reload();
+  };
+
   return (
     <header className="sticky top-0 w-full z-50 bg-background/70">
       <div className="container flex h-20 items-center justify-between">
@@ -62,19 +71,31 @@ export function Header() {
         </nav>
 
         <div className="hidden md:flex items-center gap-x-3">
-          <Button
-            onClick={() => router.push('/signin')}
-            className="px-5 py-2 text-sm font-medium"
-          >
-            Masuk
-          </Button>
-          <Button
-            variant="bordered"
-            onClick={() => router.push('/signup')}
-            className="px-5 py-2 text-sm font-medium shadow-lg shadow-primary/20 hover:shadow-primary/30"
-          >
-            Daftar
-          </Button>
+          {isAuthenticated ? (
+            <Button
+              onClick={handleLogout}
+              variant="bordered"
+              className="px-5 py-2 text-sm font-medium"
+            >
+              Keluar
+            </Button>
+          ) : (
+            <>
+              <Button
+                onClick={() => router.push('/signin')}
+                className="px-5 py-2 text-sm font-medium"
+              >
+                Masuk
+              </Button>
+              <Button
+                variant="bordered"
+                onClick={() => router.push('/signup')}
+                className="px-5 py-2 text-sm font-medium shadow-lg shadow-primary/20 hover:shadow-primary/30"
+              >
+                Daftar
+              </Button>
+            </>
+          )}
         </div>
 
         <button
@@ -144,25 +165,40 @@ export function Header() {
                 animate={{ y: 0, opacity: 1 }}
                 transition={{ delay: 0.2 }}
               >
-                <Button
-                  onClick={() => {
-                    setMobileMenuOpen(false);
-                    router.push('/signin');
-                  }}
-                  className="w-full py-4 text-base"
-                >
-                  Masuk
-                </Button>
-                <Button
-                  variant="bordered"
-                  onClick={() => {
-                    setMobileMenuOpen(false);
-                    router.push('/signup');
-                  }}
-                  className="w-full py-4 text-base shadow-lg shadow-primary/20"
-                >
-                  Daftar
-                </Button>
+                {isAuthenticated ? (
+                  <Button
+                    onClick={() => {
+                      setMobileMenuOpen(false);
+                      handleLogout();
+                    }}
+                    variant="bordered"
+                    className="w-full py-4 text-base"
+                  >
+                    Keluar
+                  </Button>
+                ) : (
+                  <>
+                    <Button
+                      onClick={() => {
+                        setMobileMenuOpen(false);
+                        router.push('/signin');
+                      }}
+                      className="w-full py-4 text-base"
+                    >
+                      Masuk
+                    </Button>
+                    <Button
+                      variant="bordered"
+                      onClick={() => {
+                        setMobileMenuOpen(false);
+                        router.push('/signup');
+                      }}
+                      className="w-full py-4 text-base shadow-lg shadow-primary/20"
+                    >
+                      Daftar
+                    </Button>
+                  </>
+                )}
               </motion.div>
             </motion.div>
           )}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonContent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MDXRemote } from 'next-mdx-remote/rsc';
+
+interface HackathonContentProps {
+  content: string;
+}
+
+export function HackathonContent({ content }: HackathonContentProps) {
+  return (
+    <div className="prose w-full max-w-none">
+      <MDXRemote source={content} />
+    </div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonHeader.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { HackathonContent } from '@/content/hackathons/types';
+
+interface HackathonHeaderProps {
+  metadata: HackathonContent['metadata'];
+}
+
+export function HackathonHeader({ metadata }: HackathonHeaderProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6 }}
+      className="max-w-2xl space-y-4 mb-8"
+    >
+      <div className='space-y-2'>
+        <h1 className="text-2xl md:text-3xl font-bold">
+          {metadata.name}
+        </h1>
+        {metadata.theme && (
+          <p>
+            {metadata.theme}
+          </p>
+        )}
+      </div>
+      {metadata.description && (
+        <p>
+          {metadata.description}
+        </p>
+      )}
+    </motion.div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonHero.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+interface HackathonHeroProps {
+  coverImage: string;
+  hackathonName: string;
+}
+
+export function HackathonHero({ coverImage, hackathonName }: HackathonHeroProps) {
+  return (
+    <motion.div 
+      className="relative h-64 overflow-hidden"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6 }}
+    >
+      <Image
+        unoptimized
+        fill
+        src={coverImage}
+        alt={hackathonName}
+        className="absolute inset-0 w-full h-full object-cover"
+      />
+    </motion.div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonPartners.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { HackathonContent } from '@/content/hackathons/types';
+import { BiBuilding } from 'react-icons/bi';
+
+interface HackathonPartnersProps {
+  partners: HackathonContent['metadata']['partners'];
+}
+
+export function HackathonPartners({ partners }: HackathonPartnersProps) {
+  if (!partners || partners.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <div className="mx-auto w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-4">
+          <BiBuilding className="w-12 h-12 text-muted-foreground" />
+        </div>
+        <h3 className="text-lg font-semibold mb-2">No Sponsors Yet</h3>
+        <p className="text-muted-foreground">
+          Sponsor information will appear here once partnerships are announced.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Event Sponsors</h3>
+        <span className="text-sm text-muted-foreground">
+          {partners.length} sponsor{partners.length !== 1 ? 's' : ''}
+        </span>
+      </div>
+      <p>
+        Kami berterima kasih kepada sponsor-sponsor berikut yang telah mendukung hackathon ini, tanpa dukungan mereka, acara ini tidak akan mungkin terlaksana.
+        </p>
+      </div>
+      
+      <div className="grid gap-4 sm:grid-cols-2">
+        {partners.map((partner, idx) => (
+          <a
+            key={idx}
+            href={partner.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-4 p-4 bg-card rounded-lg border hover:shadow-md transition-all hover:border-primary/50"
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={partner.logo}
+              alt={partner.name}
+              className="w-12 h-12 object-contain flex-shrink-0"
+            />
+            <div className="flex-1 min-w-0">
+              <span className="font-medium text-sm block truncate">{partner.name}</span>
+              <span className="text-xs text-muted-foreground">Sponsor</span>
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonQuickInfo.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { HackathonContent } from '@/content/hackathons/types';
+
+interface HackathonQuickInfoProps {
+  metadata: HackathonContent['metadata'];
+}
+
+export function HackathonQuickInfo({ metadata }: HackathonQuickInfoProps) {
+  return (
+    <div className="bg-card rounded-lg p-6 border">
+      <h3 className="text-lg font-semibold mb-4">Quick Info</h3>
+      <div className="space-y-3 text-sm">
+        {metadata.prize && (
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Prize Pool:</span>
+            <span className="font-medium">{metadata.prize}</span>
+          </div>
+        )}
+        {metadata.minTeamSize && metadata.maxTeamSize && (
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Team Size:</span>
+            <span className="font-medium">
+              {metadata.minTeamSize === metadata.maxTeamSize
+                ? `${metadata.minTeamSize} person${metadata.minTeamSize > 1 ? 's' : ''}`
+                : `${metadata.minTeamSize}-${metadata.maxTeamSize} people`
+              }
+            </span>
+          </div>
+        )}
+        {metadata.submissionsCount && (
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Submissions:</span>
+            <span className="font-medium">{metadata.submissionsCount}</span>
+          </div>
+        )}
+        {metadata.partnersCount && (
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">Partners:</span>
+            <span className="font-medium">{metadata.partnersCount}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonRequirements.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { HackathonContent } from '@/content/hackathons/types';
+
+interface HackathonRequirementsProps {
+  requirements: HackathonContent['metadata']['requirements'];
+}
+
+export function HackathonRequirements({ requirements }: HackathonRequirementsProps) {
+  if (!requirements || requirements.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="bg-card rounded-lg p-6 border">
+      <h3 className="text-lg font-semibold mb-4">Requirements</h3>
+      <div className="space-y-3">
+        {requirements.map((req) => (
+          <div key={req.id} className="flex items-start gap-3">
+            <div className={`w-2 h-2 rounded-full mt-2 ${
+              req.mandatory ? 'bg-red-500' : 'bg-blue-500'
+            }`} />
+            <div>
+              <div className="font-medium text-sm">{req.name}</div>
+              <div className="text-xs text-muted-foreground">
+                {req.description}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonSidebar.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { HackathonContent } from '@/content/hackathons/types';
+import { HackathonHeader } from './HackathonHeader';
+import { HackathonQuickInfo } from './HackathonQuickInfo';
+import { HackathonRequirements } from './HackathonRequirements';
+
+interface HackathonSidebarProps {
+  metadata: HackathonContent['metadata'];
+}
+
+export function HackathonSidebar({ metadata }: HackathonSidebarProps) {
+  return (
+    <div className="lg:col-span-1">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+        >
+          <HackathonHeader metadata={metadata} />
+        </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: 0.3 }}
+        className="space-y-6"
+      >
+        <HackathonQuickInfo metadata={metadata} />
+        <HackathonRequirements requirements={metadata.requirements} />
+      </motion.div>
+    </div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonStatusBar.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { HackathonContent } from '@/content/hackathons/types';
+import { formatDateRange } from '@/content/hackathons/utils';
+
+interface HackathonStatusBarProps {
+  metadata: HackathonContent['metadata'];
+  progressPercent: number | null;
+  daysLeftText: string | null;
+}
+
+export function HackathonStatusBar({ metadata, progressPercent, daysLeftText }: HackathonStatusBarProps) {
+  // Only show if we have progress and days left, and it's not too far in the past
+  if (!(progressPercent !== null && daysLeftText && parseInt(daysLeftText) > -5)) {
+    return null;
+  }
+
+  return (
+    <section className="bg-muted/50 py-4">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+              metadata.status === 'active' ? 'bg-green-100 text-green-800' :
+              metadata.status === 'upcoming' ? 'bg-blue-100 text-blue-800' :
+              metadata.status === 'ended' ? 'bg-gray-100 text-gray-800' :
+              'bg-yellow-100 text-yellow-800'
+            }`}>
+              {metadata.status?.charAt(0).toUpperCase() + metadata.status?.slice(1)}
+            </span>
+            {metadata.submissionWindow && (
+              <span className="text-sm text-muted-foreground">
+                {formatDateRange(metadata.submissionWindow)}
+              </span>
+            )}
+          </div>
+          {daysLeftText && (
+            <span className="text-sm font-medium">
+              {daysLeftText}
+            </span>
+          )}
+        </div>
+        {progressPercent !== null && (
+          <div className="mt-3">
+            <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary transition-all duration-300"
+                style={{ width: `${progressPercent}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonSubmissions.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import React from 'react';
+import { BiLinkExternal, BiLogoGithub, BiImage, BiGroup } from 'react-icons/bi';
+
+interface Submission {
+  team_name: string;
+  project_title: string;
+  description: string;
+  repo_link: string;
+  screenshot?: string;
+  file_name?: string;
+}
+
+interface HackathonSubmissionsProps {
+  submissions?: Submission[];
+  submissionsCount?: number;
+}
+
+export function HackathonSubmissions({ submissions, submissionsCount }: HackathonSubmissionsProps) {
+  if (!submissions || submissions.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <div className="mx-auto w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-4">
+          <BiGroup className="w-12 h-12 text-muted-foreground" />
+        </div>
+        <h3 className="text-lg font-semibold mb-2">No Submissions Yet</h3>
+        <p className="text-muted-foreground">
+          Submissions will appear here once participants start submitting their projects.
+        </p>
+        {submissionsCount && (
+          <p className="text-sm text-muted-foreground mt-2">
+            Expected submissions: {submissionsCount}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Project Submissions</h3>
+        <span className="text-sm text-muted-foreground">
+          {submissions.length} project{submissions.length !== 1 ? 's' : ''}
+        </span>
+      </div>
+      
+      <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+        {submissions.map((submission, index) => (
+          <div key={index} className="bg-card rounded-lg border hover:shadow-md transition-shadow">
+            <div className="space-y-4">
+              {/* Header */}
+              <div className="w-full h-40 bg-muted rounded-lg rounded-b-none overflow-hidden flex items-center justify-center">
+                {submission.screenshot ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                        src={submission.screenshot}
+                        alt={submission.project_title}
+                        className="w-full h-full object-cover"
+                    />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+                    No Screenshot Available
+                  </div>
+                )}
+              </div>
+
+              <div className="p-4 flex flex-col h-full">
+              <div>
+                <div className="flex items-start justify-between mb-2">
+                  <h4 className="font-semibold text-base">{submission.project_title}</h4>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <BiGroup className="w-4 h-4" />
+                  <span>{submission.team_name}</span>
+                </div>
+              </div>
+
+              {/* Description */}
+              <p className="text-sm text-muted-foreground leading-relaxed grow line-clamp-6">
+                {submission.description}
+              </p>
+
+              {/* Links */}
+              <div className="flex flex-wrap gap-2 pt-2">
+                {submission.repo_link && (
+                  <a
+                    href={submission.repo_link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-2 px-3 py-1 bg-primary/10 text-primary rounded-full text-xs hover:bg-primary/20 transition-colors"
+                  >
+                    <BiLogoGithub className="w-3 h-3" />
+                    Repository
+                    <BiLinkExternal className="w-3 h-3" />
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/HackathonTabs.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { HackathonContent } from '@/content/hackathons/types';
+import { HackathonPartners } from './HackathonPartners';
+import { HackathonSubmissions } from './HackathonSubmissions';
+import { BiGroup, BiFile, BiInfoCircle } from 'react-icons/bi';
+
+interface Submission {
+  team_name: string;
+  project_title: string;
+  description: string;
+  repo_link: string;
+  screenshot?: string;
+  file_name?: string;
+}
+
+interface HackathonTabsProps {
+  metadata: HackathonContent['metadata'];
+  submissions?: Submission[];
+  contentElement: React.ReactNode;
+}
+
+export function HackathonTabs({ metadata, submissions, contentElement }: HackathonTabsProps) {
+  const [activeTab, setActiveTab] = useState('content');
+
+  const tabs = [
+    {
+      id: 'content',
+      label: 'Details',
+      icon: BiInfoCircle,
+      count: 0 // No count for content tab
+    },
+    {
+      id: 'sponsors',
+      label: 'Sponsors',
+      icon: BiGroup,
+      count: metadata.partners?.length || 0
+    },
+    {
+      id: 'submissions',
+      label: 'Submissions',
+      icon: BiFile,
+      count: submissions?.length || metadata.submissionsCount || 0
+    }
+  ];
+
+  return (
+    <div className="w-full">
+      {/* Tab Navigation */}
+      <div className="border-b border-border">
+        <nav className="flex space-x-8" aria-label="Tabs">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`relative py-4 px-1 cursor-pointer font-medium text-sm flex items-center gap-2 transition-colors`}
+              >
+                <Icon className="w-4 h-4" />
+                <span>{tab.label}</span>
+                {tab.count > 0 && (
+                  <span className="ml-2 bg-muted text-muted-foreground px-2 py-1 rounded-full text-xs">
+                    {tab.count}
+                  </span>
+                )}
+                {activeTab === tab.id && (
+                  <motion.div
+                    className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
+                    layoutId="activeTab"
+                  />
+                )}
+              </button>
+            );
+          })}
+        </nav>
+      </div>
+
+      {/* Tab Content */}
+      <div className="mt-6">
+        <motion.div
+          key={activeTab}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          {activeTab === 'content' && contentElement}
+          {activeTab === 'sponsors' && (
+            <HackathonPartners partners={metadata.partners} />
+          )}
+          {activeTab === 'submissions' && (
+            <HackathonSubmissions 
+              submissions={submissions} 
+              submissionsCount={metadata.submissionsCount}
+            />
+          )}
+        </motion.div>
+      </div>
+    </div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/_components/ServerHackathonContent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MDXRemote } from 'next-mdx-remote/rsc';
+
+interface ServerHackathonContentProps {
+  content: string;
+}
+
+export async function ServerHackathonContent({ content }: ServerHackathonContentProps) {
+  return (
+    <div className="prose w-full max-w-none">
+      <MDXRemote source={content} />
+    </div>
+  );
+}

apps/landing/src/app/(public)/hackathon/[slug]/page.tsx

@@ -0,0 +1,121 @@
+import { notFound } from 'next/navigation';
+import { Metadata } from 'next';
+import { getHackathonBySlug, getAllHackathonSlugs } from '@/content/hackathons/content';
+import { getDaysLeftText, getProgressPercent } from '@/content/hackathons/utils';
+import Link from 'next/link';
+import { Button } from '@components';
+import { BsArrowLeft } from 'react-icons/bs';
+import { HackathonHero } from './_components/HackathonHero';
+import { HackathonStatusBar } from './_components/HackathonStatusBar';
+import { HackathonSidebar } from './_components/HackathonSidebar';
+import { HackathonTabs } from './_components/HackathonTabs';
+import { MDXRemote } from 'next-mdx-remote/rsc';
+
+interface Props {
+  params: {
+    slug: string;
+  };
+}
+
+// Generate static params for all hackathons
+export async function generateStaticParams() {
+  const slugs = await getAllHackathonSlugs();
+  return slugs.map((slug) => ({
+    slug,
+  }));
+}
+
+// Generate metadata for each hackathon
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const resolvedParams = await params;
+  const hackathon = await getHackathonBySlug(resolvedParams.slug);
+
+  if (!hackathon) {
+    return {
+      title: 'Hackathon Not Found',
+      description: 'The requested hackathon could not be found.',
+    };
+  }
+
+  const { metadata } = hackathon;
+
+  return {
+    title: metadata.seoTitle || `${metadata.name} - IMPHNEN`,
+    description: metadata.seoDescription || metadata.description,
+    keywords: metadata.tags?.join(', '),
+    openGraph: {
+      title: metadata.name,
+      description: metadata.description,
+      images: metadata.socialImage ? [metadata.socialImage] : [metadata.cover],
+      type: 'website',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: metadata.name,
+      description: metadata.description,
+      images: metadata.socialImage ? [metadata.socialImage] : [metadata.cover],
+    },
+  };
+}
+
+export default async function HackathonPage({ params }: Props) {
+  const resolvedParams = await params;
+  const hackathon = await getHackathonBySlug(resolvedParams.slug);
+
+  if (!hackathon) {
+    notFound();
+  }
+
+  const { metadata, content } = hackathon;
+  
+  // Return 404 if no content is found
+  if (!content || content.trim() === '') {
+    notFound();
+  }
+  
+  const progressPercent = getProgressPercent(metadata);
+  const daysLeftText = getDaysLeftText(metadata);
+
+  return (
+    <div className="min-h-screen container mx-auto px-4 py-8 bg-background">
+      <Link href="/hackathon">
+        <Button variant={'bordered'} className='mb-6 font-normal gap-2'>
+          <BsArrowLeft /> <span>Back to Hackathons</span>
+        </Button>
+      </Link>
+
+      <HackathonHero 
+        coverImage={metadata.cover}
+        hackathonName={metadata.name}
+      />
+
+      <HackathonStatusBar
+        metadata={metadata}
+        progressPercent={progressPercent}
+        daysLeftText={daysLeftText}
+      />
+
+      <div className="container mx-auto px-4 py-12 flex gap-8">
+        {/* Sidebar only */}
+        <div className="max-w-xs w-full shrink-0 mx-auto lg:mx-0 lg:col-span-2">
+          <HackathonSidebar metadata={metadata} />
+        </div>
+
+        {/* Tabs section */}
+        <div className="mb-12 col-span-8 lg:col-span-8">
+          <HackathonTabs
+            metadata={metadata}
+            submissions={metadata.submissions}
+            contentElement={
+              <div className="prose w-full max-w-none">
+                <MDXRemote source={content} />
+              </div>
+            }
+          />
+        </div>
+
+        
+      </div>
+    </div>
+  );
+}

apps/landing/src/app/(public)/hackathon/page.tsx

@@ -1,79 +1,173 @@
-'use client';
+/* eslint-disable @next/next/no-img-element */
+"use client";
 
-import hackathons from '@/data/hackathons.json';
-import { buttonVariants } from '@components';
-import { cn } from '@utils';
-import Image from 'next/image';
-import { HiOutlineCode } from 'react-icons/hi';
+import React from 'react';
 import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { HackathonSummary } from '@/content/hackathons/types';
+import { hackathonSummaries } from '@/content/hackathons/index';
+import {
+    getDaysLeftText,
+    getProgressPercent,
+    filterHackathons,
+    sortHackathons
+} from '@/content/hackathons/utils';
 
-export default function HackathonsPage() {
-  const sortedHackathons = [...hackathons];
-
-  if (sortedHackathons.length === 0) {
+const HackathonTags: React.FC<{ tags?: string[] }> = ({ tags }) => {
+    if (!tags || tags.length === 0) return null;
     return (
-      <section className="min-h-screen bg-background container py-10 flex items-center justify-center">
-        <p className="text-muted-foreground text-lg">No hackathon projects available yet.</p>
-      </section>
+        <div className="flex flex-wrap gap-2 mb-3 text-xs">
+            {tags.slice(0, 3).map((t) => (
+                <div
+                    key={t}
+                    className="px-3 py-[2px] rounded-md border border-primary-500/50 flex items-center justify-center gap-2"
+                >
+                    <div className="w-2 h-2 bg-primary-500 rounded-full" />
+                    {t}
+                </div>
+            ))}
+        </div>
     );
-  }
+};
 
-  return (
-    <section className="min-h-screen bg-background container py-10">
-      <motion.div
-        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
-        initial="hidden"
-        animate="visible"
-        variants={{
-          visible: { transition: { staggerChildren: 0.12 } },
-        }}
-      >
-        {sortedHackathons.map((hackathon, idx) => (
-          <motion.div
-            key={hackathon.project_title}
-            className="rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 bg-card group"
+const RegistrationProgress: React.FC<{ hackathon: HackathonSummary }> = ({ hackathon }) => {
+    const status = hackathon.status?.toLowerCase().trim();
+    // Hide the progress bar if the status is explicitly "ended"
+    if (status === 'ended') return null;
+
+    const percent = getProgressPercent(hackathon);
+    const label = getDaysLeftText(hackathon);
+    if (percent === null && !label) return null;
+
+    return (
+        <div className="px-6 mt-2 mb-3 flex gap-2 items-center justify-center">
+            <div
+                className="w-full h-[0.6rem] rounded-full border border-primary-500/50 overflow-hidden"
+                aria-label="Registration progress"
+            >
+                <div className="h-full bg-primary rounded-full" style={{ width: `${percent ?? 0}%` }} />
+            </div>
+            <div className="text-xs text-primary-700 shrink-0">{label}</div>
+        </div>
+    );
+};
+
+const HackathonCard: React.FC<{ hackathon: HackathonSummary; idx: number }> = ({ hackathon, idx }) => {
+    return (
+        <motion.div
+            className="rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 bg-card group"
             initial={{ opacity: 0, y: 40 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: idx * 0.08, type: 'spring', stiffness: 60 }}
             whileHover={{ scale: 1.03, boxShadow: '0 8px 32px rgba(0,0,0,0.10)' }}
-          >
-            <motion.div className="h-48 bg-muted relative overflow-hidden rounded-t-xl">
-              <Image
-                src={`https://cdn.asepharyana.tech/imphnen/hackatons/${hackathon.file_name}`}
-                alt={hackathon.project_title}
-                fill
-                className="object-cover object-top group-hover:scale-105 transition-transform duration-500"
-                sizes="(max-width: 768px) 100vw, 33vw"
-                unoptimized
-              />
-            </motion.div>
-            <div className="p-6">
-              <h3 className="text-lg font-semibold mb-3 text-foreground">
-                {hackathon.project_title}
-              </h3>
-              <div className="space-y-2 mb-4 text-sm text-muted-foreground">
-                <div className="flex items-center gap-2">
-                  <HiOutlineCode className="w-4 h-4" />
-                  <span>{hackathon.team_name}</span>
+        >
+            <Link href={`/hackathon/${hackathon.slug}`} className="block focus:outline-none relative">
+                <div className="h-48 bg-muted overflow-hidden">
+                    <div className='w-full h-48 overflow-hidden object-cover'>
+                        {/* using img tag since it simpler to control */}
+                        <img
+                            src={hackathon.cover}
+                            alt={hackathon.name}
+                            className="object-cover object-center w-full h-full group-hover:scale-105 transition-transform duration-500"
+                        />
+                    </div>
                 </div>
-              </div>
-              <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
-                {hackathon.description}
-              </p>
-              <a
-                href={hackathon.repo_link}
-                target="_blank"
-                className={cn(
-                  buttonVariants({ variant: 'bordered' }),
-                  'w-full text-sm'
-                )}
-              >
-                Lihat Proyek
-              </a>
-            </div>
-          </motion.div>
-        ))}
-      </motion.div>
-    </section>
-  );
+                <div className='relative -mt-4 bg-card rounded-lg border-2 border-white hover:border-muted transition-all duration-300'>
+                    <div className="p-6">
+                        <div className="flex items-start justify-between gap-2">
+                            <h3 className="text-lg font-medium mb-2 text-foreground line-clamp-2">
+                                {hackathon.name}
+                            </h3>
+                        </div>
+                        <p className="text-muted-foreground text-sm mb-2 line-clamp-3">
+                            {hackathon.description}
+                        </p>
+                        <HackathonTags tags={hackathon.tags} />
+                    </div>
+                    <RegistrationProgress hackathon={hackathon} />
+                    {hackathon.prize && (
+                        <div className="px-6 py-3 border-t font-medium text-lg">
+                            <h4 className='text-muted-foreground'>Hadiah</h4>
+                            <p>{hackathon.prize ?? '—'}</p>
+                        </div>
+                    )}
+                </div>
+            </Link>
+        </motion.div>
+    );
+};
+
+export default function HackathonsPage() {
+    const [filteredItems, setFilteredItems] = React.useState<HackathonSummary[]>(hackathonSummaries);
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const [statusFilter, setStatusFilter] = React.useState<string>('all');
+
+    
+    React.useEffect(() => {
+        let filtered = [...hackathonSummaries];
+        if (searchTerm) {
+            filtered = filterHackathons(filtered, { search: searchTerm });
+        }
+
+        if (statusFilter !== 'all') {
+            filtered = filterHackathons(filtered, { status: [statusFilter] });
+        }
+        
+        filtered = sortHackathons(filtered, 'registrationStart', 'desc');
+        setFilteredItems(filtered);
+    }, [searchTerm, statusFilter]);
+
+    return (
+        <section className="min-h-screen bg-background container py-10">
+            {/* Search and Filter Controls */}
+            {/*             
+            <div className="mb-8 space-y-4">
+                <div className="flex flex-col md:flex-row gap-4">
+                    <input
+                        type="text"
+                        placeholder="Search hackathons..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="flex-1 px-4 py-2 border border-gray-400 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                    />
+                    <select
+                        value={statusFilter}
+                        onChange={(e) => setStatusFilter(e.target.value)}
+                        className="px-4 py-2 border border-muted rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                    >
+                        <option value="all">All Status</option>
+                        <option value="active">Active</option>
+                        <option value="upcoming">Upcoming</option>
+                        <option value="ended">Ended</option>
+                    </select>
+                </div>
+            
+            </div> */}
+
+            <motion.div
+                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
+                initial="hidden"
+                animate="visible"
+                variants={{
+                    visible: { transition: { staggerChildren: 0.12 } },
+                }}
+            >
+                {filteredItems.map((hackathon, idx) => (
+                    <HackathonCard key={hackathon.slug || hackathon.name} hackathon={hackathon} idx={idx} />
+                ))}
+            </motion.div>
+
+            {/* No results message */}
+            {filteredItems.length === 0 && (
+                <div className="text-center py-12">
+                    <h3 className="text-lg font-medium text-muted-foreground mb-2">
+                        No hackathons found
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                        Try adjusting your search or filter criteria
+                    </p>
+                </div>
+            )}
+        </section>
+    );
 }

apps/landing/src/app/layout.tsx

@@ -2,31 +2,13 @@ import { poppinsFont } from '@/lib/fonts';
 import '@/styles/globals.css';
 import { cn } from '@utils';
 import { type Metadata } from 'next';
+import NextTopLoader from 'nextjs-toploader';
 import { Providers } from './_components/providers';
 import { Toaster } from './_components/toaster';
 
 export const metadata: Metadata = {
-  title: 'IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan Ngoding',
+  title: 'IMPHNEN - Ingin Menjadi Programmer Handal?',
   description: 'Komunitas belajar programming untuk semua level',
-  openGraph: {
-    title: 'IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan Ngoding',
-    description: 'Komunitas belajar programming untuk semua level',
-    url: 'https://imphnen.dev',
-    images: [
-      {
-        url: 'https://imphnen.dev/imphnen-group-cover.webp',
-        alt: 'IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan Ngoding',
-        width: 2550,
-        height: 945,
-      },
-    ],
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan Ngoding',
-    description: 'Komunitas belajar programming untuk semua level',
-    images: ['https://imphnen.dev/imphnen-group-cover.webp'],
-  },
 };
 
 export default function RootLayout({
@@ -37,6 +19,17 @@ export default function RootLayout({
   return (
     <html lang="id" suppressHydrationWarning>
       <body className={cn(poppinsFont.className, 'antialiased')}>
+        <NextTopLoader
+          color="#6366f1"
+          initialPosition={0.08}
+          crawlSpeed={200}
+          height={3}
+          crawl={true}
+          showSpinner={true}
+          easing="ease"
+          speed={200}
+          shadow="0 0 10px #6366f1,0 0 5px #6366f1"
+        />
         <Providers
           attribute="class"
           defaultTheme="system"

apps/landing/src/content/hackathons/ai-agent-hackathon-2025/content.mdx

@@ -0,0 +1,54 @@
+---
+title: "AI Agent Hackathon 2025"
+description: "Hackathon AI Agent untuk Kemerdekaan Indonesia"
+---
+
+## Tentang Acara
+
+Halo semuanya 👋, IMPHNEN dengan bangga mempersembahkan **Hackathon perdana** bertajuk **AI Agent Hackathon 2025**.
+Event ini dirancang untuk menjadi ruang eksplorasi dan kolaborasi bagi para developer, mahasiswa, maupun kreator teknologi yang ingin membangun **AI Agent inovatif** dengan semangat **Kemerdekaan Indonesia** 🇮🇩.
+
+Selama satu minggu penuh, para peserta akan bekerja dalam tim untuk menciptakan solusi berbasis AI yang memanfaatkan platform teknologi terbaru.
+
+## 🌟 Tema Hackathon
+
+**"AI Agent for Kemerdekaan Indonesia"**
+Peserta diajak merancang agen AI yang mampu memberikan dampak positif dalam memperingati dan mengaktualisasi nilai kemerdekaan Indonesia di era digital.
+
+## 📜 Ketentuan Peserta
+
+1. Hackathon ini bersifat **tim-based**, dengan minimal **1 orang** dan maksimal **3 orang** per tim.
+2. Peserta **wajib menggunakan ketiga platform berikut** sebagai komponen utama proyek:
+    - [lunos.tech](https://lunos.tech)
+    - [mailry.co](https://mailry.co)
+    - [unli.dev](https://unli.dev)
+3. Semua ide dan kode yang disubmit **harus orisinal** serta dikembangkan selama periode hackathon.
+4. Penggunaan API atau library pihak ketiga diperbolehkan, selama tidak melanggar hak cipta atau lisensi.
+5. Plagiarisme dalam bentuk apa pun akan menyebabkan diskualifikasi.
+6. Penyelenggara berhak melakukan perubahan jadwal maupun aturan dan akan mengumumkannya kepada peserta.
+7. Informasi detail dapat dilihat pada **formulir pendaftaran**.
+
+## 🏆 Hadiah
+
+Hadiah akan diberikan kepada **3 tim terbaik**, dengan detail lebih lanjut diumumkan pada saat acara.
+*(Catatan: pajak hadiah ditanggung oleh pemenang).*
+
+## 📅 Timeline
+
+* **Pendaftaran dibuka:** segera setelah pengumuman
+* **Masa pengerjaan:** 18–24 Agustus 2025
+* **Deadline submission:** Kamis, 21 Agustus 2025
+* **Pengumuman pemenang:** setelah tahap penjurian selesai
+
+## Cara Ikut (Arsip)
+
+1. Daftar melalui tautan yang tersedia (QR code atau kolom komentar).
+2. Bentuk timmu.
+3. Mulai ngoding dan kembangkan ide terbaikmu.
+4. Submit proyek sesuai jadwal.
+
+## Catatan
+
+* Event ini terbuka bagi siapa saja yang berkomitmen untuk membangun solusi kreatif.
+* Jangan sia-siakan kesempatan ini untuk berkolaborasi, belajar, dan menantang dirimu.
+* **Status:** Hackathon telah berakhir. Terima kasih untuk semua partisipan!

apps/landing/src/content/hackathons/ai-agent-hackathon-2025/metadata.json

@@ -0,0 +1,246 @@
+{
+    "slug": "ai-agent-hackathon-2025",
+    "name": "AI Agent Hackathon",
+    "cover": "https://cdn.andka.my.id/imphnen/534798944_122241336080178516_4647521272813012181_n.jpg",
+    "description": "Hackathon dalam rangka AI Agent Kemerdekaan Indonesia. Selama satu minggu, para peserta akan diminta untuk membuat proyek mereka sendiri secara online dengan bantuan lunos.tech, mailry.co, dan unli.dev.",
+    "theme": "AI Agent untuk Kemerdekaan Indonesia",
+    "status": "ended",
+    "prize": "Rp. 5.000.000",
+    "prizes": [
+        {
+            "position": "Juara 1",
+            "amount": "Rp. 5.000.000",
+            "description": "Hadiah utama untuk tim terbaik"
+        }
+    ],
+    "tags": [
+        "AI Agent"
+    ],
+    "difficulty": "intermediate",
+    "submissionWindow": {
+        "start": "2025-08-15T00:00:00.000Z",
+        "end": "2025-08-22T23:59:59.999Z"
+    },
+    "minTeamSize": 1,
+    "maxTeamSize": 3,
+    "partnersCount": 2,
+    "submissionsCount": 22,
+    "partners": [
+        {
+            "name": "Lunos.tech",
+            "logo": "https://lunos.tech/favicon.ico",
+            "link": "https://lunos.tech"
+        },
+        {
+            "name": "Mailry.co",
+            "logo": "https://mailry.co/favicon.ico",
+            "link": "https://mailry.co"
+        },
+        {
+            "name": "Unli.dev",
+            "logo": "https://unli.dev/favicon.ico",
+            "link": "https://unli.dev"
+        }
+    ],
+    "requirements": [
+        {
+            "id": "lunos-tech",
+            "name": "lunos.tech",
+            "description": "Wajib menggunakan platform lunos.tech dalam proyek",
+            "mandatory": true
+        },
+        {
+            "id": "mailry-co",
+            "name": "mailry.co",
+            "description": "Wajib menggunakan platform mailry.co dalam proyek",
+            "mandatory": true
+        },
+        {
+            "id": "unli-dev",
+            "name": "unli.dev",
+            "description": "Wajib menggunakan platform unli.dev dalam proyek",
+            "mandatory": true
+        }
+    ],
+    "seoTitle": "AI Agent Hackathon 2025 - IMPHNEN",
+    "seoDescription": "Hackathon AI Agent untuk Kemerdekaan Indonesia. Bergabunglah dengan pengembang dari seluruh Indonesia untuk membangun solusi AI yang inovatif.",
+    "socialImage": "https://cdn.andka.my.id/imphnen/534798944_122241336080178516_4647521272813012181_n.jpg",
+    "submissions": [
+        {
+            "team_name": "Lineproject",
+            "project_title": "LaporMerdeka",
+            "description": "Platform pelaporan infrastruktur publik Indonesia yang memungkinkan warga melaporkan masalah dengan cepat dan mudah untuk Indonesia yang lebih baik.",
+            "repo_link": "https://github.com/MANFIT7/lapormerdeka",
+            "screenshot": "https://drive.google.com/open?id=1tbOJKacQGsfldr5TsWtzNKL65iCpADz2",
+            "file_name": "Screenshot 2025-08-22 062036 - Fafnir.png"
+        },
+        {
+            "team_name": "Aliansi switch",
+            "project_title": "News-ai",
+            "description": "ai agent untuk memilah beritah hoax dengan asli",
+            "repo_link": "https://github.com/7FIl/News-AI",
+            "screenshot": "https://drive.google.com/open?id=1IYoOB1zqL70tpxaeopdS6VtuL8hoqpPn",
+            "file_name": "Screenshot 2025-08-22 223626 - 7Fil.png"
+        },
+        {
+            "team_name": "Sodev Sedap",
+            "project_title": "Sejarah Alternatif ID",
+            "description": "Website AI Agent yang dapat memberikan user pov bagaimana jika user ada di situasi tersebut menggunakan reka adegan dengan pendekatan teks dengan gaya novel",
+            "repo_link": "https://github.com/rizalkr/sejarah-alternatif-id/tree/main",
+            "screenshot": "https://drive.google.com/open?id=1TMUgayvtI45gU79I-0SokQnPJP6LHQaC",
+            "file_name": "Screenshot 2025-08-23 115137 - Rizal Kurnia.png"
+        },
+        {
+            "team_name": "Muhammad Harafsan Alhad",
+            "project_title": "Elysia AI Kemerdekaan Indonesia",
+            "description": "“Sebuah chatbot AI interaktif yang menampilkan Elysia (dari Honkai Impact) yang menjawab pertanyaan tentang Kemerdekaan Indonesia dengan gaya khas Elysia, lengkap dengan fitur kuis interaktif.",
+            "repo_link": "https://github.com/rafsanalhad/elysia-ai-kemerdekaan",
+            "screenshot": "https://drive.google.com/open?id=1_QE59lgHNbJfuVikJ5KT0_85tbJc6pMo",
+            "file_name": "Screenshot 2025-08-23 131756 - Ralhad Alhad.png"
+        },
+        {
+            "team_name": "RaflanGT",
+            "project_title": "Ecobot",
+            "description": "EcoBot adalah AI Agent yang hadir untuk menjawab tantangan pengelolaan sampah dan keterbatasan digitalisasi di masyarakat. Melalui WhatsApp yang akrab bagi warga, EcoBot memandu pemilahan sampah dengan analisis gambar berbasis AI sekaligus menumbuhkan kesadaran lingkungan. Kemerdekaan bukan hanya bebas dari penjajahan, tetapi juga kesadaran kolektif untuk mengelola hal-hal sederhana yang berdampak besar. Dengan langkah kecil seperti ini, desa dan masyarakat dapat mandiri secara digital, menjaga lingkungan, dan bersama-sama membawa Indonesia terus maju.",
+            "repo_link": "https://github.com/mycoderisyad/raflangt-ecobot",
+            "screenshot": "https://drive.google.com/open?id=1lj5DMJfxSrCwyNSLIlq-GQohJHCUDU1-",
+            "file_name": "Screenshot 2025-08-23 223413 - MRisyad Raflan.png"
+        },
+        {
+            "team_name": "Tchh Tidak Akan",
+            "project_title": "Merdeka Quiziz",
+            "description": "Merdeka Quiziz merupakan web kuis yang menggunakan tema Kemerdekaan Indonesia dengan fitur gamifikasi yang membuat kuis menjadi menyenangkan, dimana setiap kuis dibuat oleh Mera (AI) dan dipersonalisasi untuk pengguna. Selain itu  di Merdeka Quiziz pengguna juga dapat membahas sejarah Indonesia bersama Mera (AI).",
+            "repo_link": "https://gitlab.com/personal-projects9094234/merdeka-quiziz",
+            "screenshot": "https://drive.google.com/open?id=1U_UMaYABLjbO38GA9DopXebDWznFKQcI",
+            "file_name": "Screenshot 2025-08-24 at 09.15.06 - Khen Cahyo.png"
+        },
+        {
+            "team_name": "Pengen Ikut tapi Bingung Mau Buat Apa",
+            "project_title": "IMMPHNEN (Ingin Menjadi Mesin Pencari Handal Namun Enggan Ngecrawl)",
+            "description": "Mesin pencari yang didesain untuk memerdekakan para pencari informasi dari tracker-tracker yang berlebihan (lelah bukan habis mencari A, nongol iklan A dimana-mana?). Memiliki fitur ringkasan pencarian, serta filter negatif penelusuran (judi & pornografi). Dibuat dengan LangSearch dan Lunos(ChatGPT 5.0).",
+            "repo_link": "https://gitlab.com/myracledev/py-search-engine",
+            "screenshot": "https://drive.google.com/open?id=1xNFtvGSLfWwdA4Mx46S7bx2nmwpt5CXA",
+            "file_name": "{CBBB6849-BC8E-4435-9C6A-8C88C83287DF} - Mohamad Yusuf Rizaldi.png"
+        },
+        {
+            "team_name": "Ayam Geprek",
+            "project_title": "SURA AI (Suara Rakyat)",
+            "description": "SIngkatnya ini itu AI yang jadi mewakili hati rakyat Indonesia (bukan dpr). Dia bukan sekadar asisten digital, kenapa? ya karena dia kritis, cerdas, dan punya selera sinis yang bikin narasi kekuasaan gampang dibongkar. Gayanya penuh satir, dan sering pakai perumpamaan yang sangat panas. Sura AI hadir untuk menantang pemikiran, membakar semangat, dan memberikan perspektif yang ngga takut ngomong jujur tentang realita sosial dan politik.",
+            "repo_link": "https://github.com/Roti18/sura-ai",
+            "screenshot": "https://drive.google.com/open?id=1uUWGu08NimQ1qV9E-xu0h39HyoAYrclS",
+            "file_name": "Screenshot 2025-08-24 204538 - Roti 1.png"
+        },
+        {
+            "team_name": "Fae",
+            "project_title": "Daily Commit",
+            "description": "Daily Commit adalah semacam alarm commit yang bakal ngingetin kamu kalau seharian nggak ada commit di GitHub. Tapi kalau rajin, dia juga bisa jadi cheerleader digital yang muji-muji kamu.",
+            "repo_link": "https://github.com/far-id/send-mail-mailry.git",
+            "screenshot": "https://drive.google.com/open?id=1GAvN4RxW_gAvOfew7LbbHANEx2F3lC5y",
+            "file_name": "GITHUB~1.PNG"
+        },
+        {
+            "team_name": "garudaStack",
+            "project_title": "Tani AI",
+            "description": "Tani AI adalah AI agent andalan anda untuk membantu dalam perkembangan, produktifitas serta analisis untuk komoditas pertanian anda.",
+            "repo_link": "FE : https://github.com/Jazaniest/garuda-ai-frontend.git   BE : https://github.com/Rifaldy1292/be-hackaton.git",
+            "screenshot": "https://drive.google.com/open?id=173dS3v9sAJXMOxs7uY_SG-TUW9wIo_WM",
+            "file_name": "Tani AI - M Abdillah Aljazani.png"
+        },
+        {
+            "team_name": "Roki Miftah Kamaludin",
+            "project_title": "Mengenang Pahlawan",
+            "description": "Mengenang Pahlawan adalah platform digital untuk mengenang dan mempelajari kisah pahlawan nasional Indonesia. Aplikasi ini menyajikan biografi, foto, serta informasi resmi terkait penetapan gelar pahlawan.\n\nSelain sebagai ensiklopedia digital, platform ini juga dilengkapi fitur interaktif seperti kuis edukatif, pencarian, dan poin penghargaan.",
+            "repo_link": "https://github.com/rokimiftah/mengenang-pahlawan",
+            "screenshot": "https://drive.google.com/open?id=140c-FyndYCAOCtKChbRaENc9fgWvQwU2",
+            "file_name": "mengenang-pahlawan - Roki Miftah Kamaludin.png"
+        },
+        {
+            "team_name": "LokerHunter",
+            "project_title": "LokerKerja",
+            "description": "Sebuah platform job matching yang memanfaatkan analisis CV atau portofolio untuk mengidentifikasi keahlian utama pengguna dan melakukan inferensi otomatis terhadap posisi pekerjaan yang paling sesuai.\n\nHasil analisis ini digunakan untuk memberikan rekomendasi daftar lowongan yang relevan dengan profil keterampilan pengguna. Selain itu, pengguna dapat berlangganan newsletter agar selalu mendapatkan informasi lowongan terbaru yang sesuai dengan hasil analisis CV mereka, yang kemudian akan dikirimkan langsung melalui email.\n\nMapping ke Sponsor\nUNLI = Digunakan untuk vision & reasoning engine dalam analisis CV/portofolio (misalnya parsing teks dari PDF/gambar, lalu inferensi posisi kerja yang cocok).\nLunos = Digunakan untuk parsing terstruktur (PDF ke JSON), normalisasi data, dan orkestrasi pipeline analisis.\nMailry = Digunakan untuk layanan email newsletter, agar pengguna bisa berlangganan update lowongan yang sesuai dengan profil keterampilannya.",
+            "repo_link": "https://github.com/iegl3/LokerKerja",
+            "screenshot": "https://drive.google.com/open?id=1qludNU5DnNPFtzowSnB_mYkPB00Ll4Rz",
+            "file_name": "demo - Eagle.png"
+        },
+        {
+            "team_name": "Kami Gila Roblox",
+            "project_title": "Pitara: Pintu Sejarah Nusantara",
+            "description": "Pitara adalah platform yang bertujuan untuk meningkatkan literasi sejarah dan melawan hoaks di Indonesia. Platform ini menyediakan fitur chat AI untuk belajar sejarah, AI fact-checker untuk memverifikasi berita, forum diskusi, dan fitur pembuatan artikel otomatis. Pitara juga menjaga retensi pengguna melalui newsletter mingguan.",
+            "repo_link": "https://github.com/JackBerck/pitara",
+            "screenshot": "https://drive.google.com/open?id=1GIXZkRrRn21hpNMcip-QdGayLr8m2qCG",
+            "file_name": "screencapture-127-0-0-1-8000-2025-08-24-22_56_54 - Zaki Dzulfikar.png"
+        },
+        {
+            "team_name": "Hidup Jokowi",
+            "project_title": "Historia",
+            "description": "Historia, sebuah platform revolusioner yang menjembatani masa lalu dengan masa kini. kami memanfaatkan kekuatan kecerdasan buatan (AI) untuk menganalisis dan memberikan narasi pada foto-foto dan dokumen bersejarah Indonesia. cukup unggah sebuah gambar, dan biarkan teknologi kami mengungkap cerita, tokoh, serta konteks di balik momen beku tersebut. mari jelajahi kembali perjuangan bangsa dengan cara yang belum pernah ada sebelumnya.",
+            "repo_link": "https://github.com/mybday123/historia",
+            "screenshot": "https://drive.google.com/open?id=1RaMiswa7Fy5m3V1xsoODvKabEwTspu2y",
+            "file_name": "Historia_-_Preview - Julian Mifta Yama Fauzan.png"
+        },
+        {
+            "team_name": "CORTEZA FAMILY",
+            "project_title": "Garuda Shield - Criminal Website Detector",
+            "description": "Garuda Shield - Criminal Website Detector: Adalah Web analysis berbasis Crawling yang memanfaatkan AI Untuk mendeteksi anomali pada suatu web menggunakan: LunosTech, Mailry, Unli.Dev serta Crawler Tools",
+            "repo_link": "https://github.com/c0rt3z4/hackathon-imphnen",
+            "screenshot": "https://drive.google.com/open?id=1AKJ7pN7zUEAoJEcZFAxGVtSE582r2Hw5",
+            "file_name": "Capture - Calm.PNG"
+        },
+        {
+            "team_name": "Oziral",
+            "project_title": "Kerja Merdeka - AI Agent Pendamping Pelamar Kerja",
+            "description": "Kerja Merdeka – AI Agent Pendamping Pelamar Kerja adalah platform berbasis kecerdasan buatan yang membantu pencari kerja menyusun CV dan Cover Letter yang relevan, berlatih interview secara interaktif, hingga mengirimkan lamaran dalam satu alur terpadu.",
+            "repo_link": "frontend : https://github.com/lakhatekno/imphnen-frontend, backend: https://github.com/Contsol-dev/kerja-merdeka-be",
+            "screenshot": "https://drive.google.com/open?id=1l7IOCTj1tRJTtFgq0Wq8CJ8NaDYZ-DS1",
+            "file_name": "Screenshot 2025-08-24 230728 - Muhammad Iqbal Ghozy.png"
+        },
+        {
+            "team_name": "ak mw heketon",
+            "project_title": "MerdekAI",
+            "description": "Kita sedang mengembangkan sebuah chatbot AI versi low budget yang tetap powerful dan fungsional. Meskipun budget pembuatan murah bahkan gratis dibanding ChatGPT, fitur-fiturnya gak kalah lengkap. Chatbot ini mendukung:\n\nChat Completion (percakapan interaktif seperti ChatGPT)\n\nText-to-Voice (mengubah teks menjadi suara)\n\nImage Generation (membuat gambar dari prompt)\n\nImage Recognition (mengidentifikasi dan mendeskripsikan gambar)\n\nJadi, meskipun gak ada dana keluar, project ini dirancang supaya tetap memberikan pengalaman mirip ChatGPT dengan fitur-fitur AI kekinian ygy.",
+            "repo_link": "https://github.com/kevinalvarel/merdekai",
+            "screenshot": "https://drive.google.com/open?id=1U24L8_4c2nM088olI7V8LaqUGcOfg1YH",
+            "file_name": "merdekai.my.id_ - Muhammad Kevin Alvarel.png"
+        },
+        {
+            "team_name": "Er Project",
+            "project_title": "Agentic Merdeka",
+            "description": "Multi-modal AI Chat interface, dengan kombinasi beberapa capability. Diantaranya:\n\nConversation, Image Analisis, Generate Embeddings Vector, Generate voice, Dan yang terakhir Generate Gambar, bisa build character ai sendiri, select persona dll\n\nFramework:\nNextjs 15+ (app router)\n\nDatabseses:\nFirebase untuk penyimpanan chat history dan login\n\nDilengkapi proteksi CSRF, Next Middleware dan Authentikasi menggunakan mailry\n\nSEMUA ITU DAPAT DI AKSES melalui satu web interface. Ini sudah malas, JANGAN ANGGAP PROYEK INI RAJIN🗿",
+            "repo_link": "https://github.com/ErRickow/ai-agent-hackathon",
+            "screenshot": "https://drive.google.com/open?id=1EkVWezUIXc_F_9IeM3LeX47TFDl2j2Va",
+            "file_name": "download - Er Rickow.png"
+        },
+        {
+            "team_name": "NamamuCore",
+            "project_title": "Namamu - Startup Name Generator",
+            "description": "Namamu.web.id merupakan situs generator nama sederhana yang memudahkan brainstorming ide platform, dengan tambahan fitur pengiriman hasil ke email.",
+            "repo_link": "https://github.com/nooradn/namamu-name-gen",
+            "screenshot": "https://drive.google.com/open?id=1EW6wBuujpHkhT1tW-_j6TklSgqvZt7wa",
+            "file_name": "preview - Noor Adn.png"
+        },
+        {
+            "team_name": "Tim GakTau.Dev",
+            "project_title": "Quiz Kemerdekaan",
+            "description": "Sebuah aplikasi kuis interaktif berbasis AI untuk membantu pelajar dan penggemar sejarah Indonesia memahami peristiwa kemerdekaan dengan cara yang menyenangkan",
+            "repo_link": "https://github.com/RAYDENFLY/Quiz-Merdeka/tree/main",
+            "screenshot": "https://drive.google.com/open?id=1c0A6ijx_pNCmh87g_EvlyUAAV7zAT8Li",
+            "file_name": "Gambar WhatsApp 2025-08-24 pukul 21.36.26_53cb7a14 - RAYDENFLY.jpg"
+        },
+        {
+            "team_name": "Icikiwir semilir",
+            "project_title": "Chef AI",
+            "description": "chat bot untuk mendapatkan resep dari AI",
+            "repo_link": "https://github.com/ranggacey/chef",
+            "screenshot": "https://drive.google.com/open?id=1JCz7pEfM_nF--ZsAZvQSlUonJCjTZkh6",
+            "file_name": "Screenshot 2025-08-24 235059 - Diablo volfir.png"
+        },
+        {
+            "team_name": "Greatvitech Team",
+            "project_title": "Patriotisme Quiz",
+            "description": "Sebuah aplikasi quiz bertema patriotisme, pengguna bisa menjawab soal - soal yang berkaitan dengan patriotisme, serta soal digenerate langsung oleh ai",
+            "repo_link": "frontend: https://github.com/farhanangwa12/patriot-frontend  backend: https://github.com/farhanangwa12/patriot-backend",
+            "screenshot": "https://drive.google.com/open?id=1IAKk_ShPo51_CmqaClgv1ulXKrlf2fHA",
+            "file_name": "Screenshot 2025-08-24 221129 - farhan hokado.png"
+        }
+    ]
+}

apps/landing/src/content/hackathons/content.ts

@@ -0,0 +1,268 @@
+import path from 'path';
+import fs from 'fs';
+import { HackathonMetadata, HackathonContent, HackathonSummary } from './types';
+import { readMDXFile } from '../shared/mdx';
+import { validateHackathon } from './validation';
+import { toHackathonSummary, calculateHackathonStatus, sortHackathons, filterHackathons } from './utils';
+
+const HACKATHONS_DIR = path.join(process.cwd(), 'src/content/hackathons');
+
+/**
+ * Load metadata from a hackathon's metadata.json file
+ */
+async function loadHackathonMetadata(hackathonDir: string): Promise<HackathonMetadata | null> {
+  const metadataPath = path.join(hackathonDir, 'metadata.json');
+  
+  try {
+    if (!fs.existsSync(metadataPath)) {
+      console.warn(`No metadata.json found in ${hackathonDir}`);
+      return null;
+    }
+
+    // Read and parse JSON file
+    const metadataContent = fs.readFileSync(metadataPath, 'utf-8');
+    const metadata = JSON.parse(metadataContent) as HackathonMetadata;
+
+    // Validate the metadata
+    const validation = validateHackathon(metadata);
+    if (!validation.isValid) {
+      console.error(`Invalid metadata in ${hackathonDir}:`, validation.errors);
+      return null;
+    }
+
+    // Calculate status if not explicitly set
+    const finalMetadata: HackathonMetadata = {
+      ...metadata,
+      status: metadata.status || calculateHackathonStatus(metadata),
+      contentPath: path.relative(HACKATHONS_DIR, hackathonDir),
+      lastModified: fs.statSync(metadataPath).mtime.toISOString()
+    };
+
+    return finalMetadata;
+  } catch (error) {
+    console.error(`Error loading metadata from ${metadataPath}:`, error);
+    return null;
+  }
+}
+
+/**
+ * Load content from a hackathon's content.mdx file
+ */
+async function loadHackathonContent(hackathonDir: string): Promise<string | null> {
+  const contentPath = path.join(hackathonDir, 'content.mdx');
+  
+  try {
+    if (!fs.existsSync(contentPath)) {
+      console.warn(`No content.mdx found in ${hackathonDir}`);
+      return null;
+    }
+
+    const mdxContent = await readMDXFile(contentPath);
+    return mdxContent?.content || null;
+  } catch (error) {
+    console.error(`Error loading content from ${contentPath}:`, error);
+    return null;
+  }
+}
+
+/**
+ * Get all hackathon directories
+ */
+function getHackathonDirectories(): string[] {
+  if (!fs.existsSync(HACKATHONS_DIR)) {
+    console.warn(`Hackathons directory not found: ${HACKATHONS_DIR}`);
+    return [];
+  }
+
+  return fs.readdirSync(HACKATHONS_DIR, { withFileTypes: true })
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => path.join(HACKATHONS_DIR, dirent.name))
+    .filter(dir => {
+      // Only include directories that have either metadata.json or content.mdx
+      const hasMetadata = fs.existsSync(path.join(dir, 'metadata.json'));
+      const hasContent = fs.existsSync(path.join(dir, 'content.mdx'));
+      return hasMetadata || hasContent;
+    });
+}
+
+/**
+ * Get all hackathons with full content (build-time)
+ */
+export async function getAllHackathons(options: {
+  includeDrafts?: boolean;
+  sortBy?: 'name' | 'registrationStart' | 'status';
+  sortDirection?: 'asc' | 'desc';
+} = {}): Promise<HackathonContent[]> {
+  const hackathonDirs = getHackathonDirectories();
+  const hackathons: HackathonContent[] = [];
+
+  for (const dir of hackathonDirs) {
+    const metadata = await loadHackathonMetadata(dir);
+    if (!metadata) continue;
+
+    // Skip drafts unless explicitly included
+    if (!options.includeDrafts && metadata.status === 'draft') {
+      continue;
+    }
+
+    const content = await loadHackathonContent(dir);
+    
+    hackathons.push({
+      metadata,
+      content: content || ''
+    });
+  }
+
+  // Sort if requested
+  if (options.sortBy) {
+    const summaries = hackathons.map(h => toHackathonSummary(h.metadata));
+    const sortedSummaries = sortHackathons(summaries, options.sortBy, options.sortDirection);
+    
+    // Reorder hackathons based on sorted summaries
+    return sortedSummaries.map(summary => {
+      const hackathon = hackathons.find(h => h.metadata.slug === summary.slug);
+      return hackathon;
+    }).filter((hackathon): hackathon is HackathonContent => hackathon !== undefined);
+  }
+
+  return hackathons;
+}
+
+/**
+ * Get hackathon summaries for listing pages (build-time)
+ */
+export async function getHackathonSummaries(options: {
+  includeDrafts?: boolean;
+  sortBy?: 'name' | 'registrationStart' | 'status';
+  sortDirection?: 'asc' | 'desc';
+  filters?: {
+    status?: string[];
+    tags?: string[];
+    search?: string;
+  };
+} = {}): Promise<HackathonSummary[]> {
+  const hackathons = await getAllHackathons({ 
+    includeDrafts: options.includeDrafts,
+    sortBy: options.sortBy,
+    sortDirection: options.sortDirection
+  });
+
+  let summaries = hackathons.map(h => toHackathonSummary(h.metadata));
+
+  // Apply filters if provided
+  if (options.filters) {
+    summaries = filterHackathons(summaries, options.filters);
+  }
+
+  return summaries;
+}
+
+/**
+ * Get a single hackathon by slug (build-time)
+ */
+export async function getHackathonBySlug(slug: string): Promise<HackathonContent | null> {
+  console.log('Fetching hackathon by slug:', slug);
+  const hackathonDir = path.join(HACKATHONS_DIR, slug);
+  console.log('Resolved hackathon directory:', hackathonDir);
+  
+  if (!fs.existsSync(hackathonDir)) {
+    return null;
+  }
+
+  const metadata = await loadHackathonMetadata(hackathonDir);
+  if (!metadata) {
+    return null;
+  }
+
+  const content = await loadHackathonContent(hackathonDir);
+
+  return {
+    metadata,
+    content: content || ''
+  };
+}
+
+/**
+ * Get all hackathon slugs (for static generation)
+ */
+export async function getAllHackathonSlugs(): Promise<string[]> {
+  const hackathons = await getAllHackathons({ includeDrafts: false });
+  return hackathons.map(h => h.metadata.slug);
+}
+
+/**
+ * Generate static index file for runtime use
+ */
+export async function generateHackathonIndex(): Promise<void> {
+  const summaries = await getHackathonSummaries({ 
+    includeDrafts: false,
+    sortBy: 'registrationStart',
+    sortDirection: 'desc'
+  });
+
+  const indexContent = `// Auto-generated file - do not edit manually
+// Generated on: ${new Date().toISOString()}
+
+import { HackathonSummary } from './types';
+
+export const hackathonSummaries: HackathonSummary[] = ${JSON.stringify(summaries, null, 2)};
+
+export const hackathonSlugs = ${JSON.stringify(summaries.map(s => s.slug), null, 2)};
+
+export function getHackathonSummaryBySlug(slug: string): HackathonSummary | undefined {
+  return hackathonSummaries.find(h => h.slug === slug);
+}
+
+export function getActiveHackathons(): HackathonSummary[] {
+  return hackathonSummaries.filter(h => h.status === 'active');
+}
+
+export function getUpcomingHackathons(): HackathonSummary[] {
+  return hackathonSummaries.filter(h => h.status === 'upcoming');
+}
+
+export function getFeaturedHackathons(): HackathonSummary[] {
+  return hackathonSummaries.filter(h => (h as any).featured === true);
+}
+`;
+
+  const indexPath = path.join(HACKATHONS_DIR, 'index.ts');
+  fs.writeFileSync(indexPath, indexContent, 'utf-8');
+  
+  console.log(`Generated hackathon index with ${summaries.length} hackathons`);
+}
+
+/**
+ * Development helper - watch for changes and regenerate index
+ */
+export function watchHackathonChanges(): void {
+  if (process.env.NODE_ENV !== 'development') {
+    return;
+  }
+
+  fs.watch(HACKATHONS_DIR, { recursive: true }, (eventType, filename) => {
+    if (filename && (filename.includes('metadata.json') || filename.includes('content.mdx'))) {
+      console.log(`Hackathon content changed: ${filename}`);
+      generateHackathonIndex().catch(console.error);
+    }
+  });
+}
+
+/**
+ * Build-time optimization: precompile all hackathon content
+ */
+export async function precompileHackathons(): Promise<void> {
+  console.log('Precompiling hackathon content...');
+  
+  const hackathons = await getAllHackathons({ includeDrafts: false });
+  
+  // Generate the main index
+  await generateHackathonIndex();
+  
+  // Could add more optimizations here like:
+  // - Image optimization
+  // - Content minification
+  // - Search index generation
+  
+  console.log(`Precompiled ${hackathons.length} hackathons`);
+}

apps/landing/src/content/hackathons/index.ts

@@ -0,0 +1,46 @@
+// Auto-generated file - do not edit manually
+// This file will be regenerated by the build process
+// Generated on: 2025-09-17T00:00:00.000Z
+
+import { HackathonSummary } from './types';
+
+export const hackathonSummaries: HackathonSummary[] = [
+  {
+    slug: 'ai-agent-hackathon-2025',
+    name: 'AI Agent Hackathon',
+    cover: 'https://cdn.andka.my.id/imphnen/534798944_122241336080178516_4647521272813012181_n.jpg',
+    description: 'Hackathon dalam rangka AI Agent Kemerdekaan Indonesia. Selama satu minggu, para peserta akan diminta untuk membuat proyek mereka sendiri secara online dengan bantuan lunos.tech, mailry.co, dan unli.dev.',
+    prize: 'Rp. 5.000.000',
+    tags: ['AI Agent'],
+    theme: 'AI Agent untuk Kemerdekaan Indonesia',
+    status: 'ended',
+    partnersCount: 2,
+    submissionsCount: 22,
+    submissionWindow: {
+      start: '2025-08-15T00:00:00.000Z',
+      end: '2025-09-20T23:59:59.999Z'
+    }
+  }
+];
+
+export const hackathonSlugs = ['ai-agent-hackathon-2025'];
+
+export function getHackathonSummaryBySlug(slug: string): HackathonSummary | undefined {
+  return hackathonSummaries.find(h => h.slug === slug);
+}
+
+export function getActiveHackathons(): HackathonSummary[] {
+  return hackathonSummaries.filter(h => h.status === 'active');
+}
+
+export function getUpcomingHackathons(): HackathonSummary[] {
+  return hackathonSummaries.filter(h => h.status === 'upcoming');
+}
+
+export function getFeaturedHackathons(): HackathonSummary[] {
+  return hackathonSummaries.filter(h => (h as Record<string, unknown>).featured === true);
+}
+
+export function getEndedHackathons(): HackathonSummary[] {
+  return hackathonSummaries.filter(h => h.status === 'ended');
+}

apps/landing/src/content/hackathons/types.ts

@@ -0,0 +1,138 @@
+export interface HackathonSubmission {
+  team_name: string;
+  project_title: string;
+  description: string;
+  repo_link: string;
+  screenshot: string;
+  file_name: string;
+}
+
+export interface HackathonPartner {
+  name: string;
+  logo: string;
+  link: string;
+}
+
+export interface HackathonPrize {
+  position: string;
+  amount: string;
+  description?: string;
+}
+
+export interface HackathonTimeWindow {
+  start: string; // ISO date string
+  end: string;   // ISO date string
+}
+
+export interface HackathonJudge {
+  name: string;
+  title: string;
+  company?: string;
+  avatar?: string;
+  bio?: string;
+}
+
+export interface HackathonSponsor {
+  name: string;
+  logo: string;
+  link: string;
+  tier: 'title' | 'platinum' | 'gold' | 'silver' | 'bronze';
+}
+
+export interface HackathonRequirement {
+  id: string;
+  name: string;
+  description: string;
+  mandatory: boolean;
+}
+
+export interface HackathonMetadata {
+  slug: string;
+  name: string;
+  cover: string;
+  description?: string;
+  theme?: string;
+  status: 'draft' | 'upcoming' | 'active' | 'ended';
+  
+  // Prizes and competition details
+  prize?: string; // Main prize display text
+  prizes?: HackathonPrize[];
+  
+  // Tags and categorization
+  tags?: string[];
+  difficulty?: 'beginner' | 'intermediate' | 'advanced';
+  
+  // Time windows
+  registrationStart?: string;
+  registrationEnd?: string;
+  submissionWindow?: HackathonTimeWindow;
+  judgingWindow?: HackathonTimeWindow;
+  
+  // Participation
+  partnersCount?: number;
+  submissionsCount?: number;
+  maxTeamSize?: number;
+  minTeamSize?: number;
+  
+  // Relations
+  partners?: HackathonPartner[];
+  submissions?: HackathonSubmission[];
+  judges?: HackathonJudge[];
+  sponsors?: HackathonSponsor[];
+  requirements?: HackathonRequirement[];
+  
+  // Content metadata
+  contentPath?: string;
+  lastModified?: string;
+  featured?: boolean;
+  
+  // SEO and social
+  seoTitle?: string;
+  seoDescription?: string;
+  socialImage?: string;
+}
+
+export interface HackathonContent {
+  metadata: HackathonMetadata;
+  content: string; // MDX content as string
+  compiledContent?: React.ComponentType; // Compiled MDX component
+}
+
+export interface HackathonSummary {
+  slug: string;
+  name: string;
+  cover: string;
+  description?: string;
+  prize?: string;
+  tags?: string[];
+  theme?: string;
+  status?: string;
+  partnersCount?: number;
+  submissionsCount?: number;
+  registrationStart?: string;
+  registrationEnd?: string;
+  submissionWindow?: HackathonTimeWindow;
+}
+
+export interface HackathonApiResponse {
+  data: HackathonSummary[];
+  page: number;
+  pageSize: number;
+  total: number;
+  totalPages: number;
+}
+
+export interface HackathonFilterOptions {
+  status?: string[];
+  tags?: string[];
+  difficulty?: string[];
+  featured?: boolean;
+  search?: string;
+}
+
+export interface HackathonSortOptions {
+  field: 'name' | 'registrationStart' | 'registrationEnd' | 'status' | 'featured';
+  direction: 'asc' | 'desc';
+}
+
+export type HackathonStatus = 'draft' | 'upcoming' | 'active' | 'ended';

apps/landing/src/content/hackathons/utils.ts

@@ -0,0 +1,243 @@
+import { HackathonMetadata, HackathonSummary, HackathonTimeWindow, HackathonStatus } from './types';
+
+/**
+ * Get the registration window dates for a hackathon
+ */
+export const getRegistrationWindow = (hackathon: HackathonMetadata | HackathonSummary) => {
+  const start = hackathon.submissionWindow?.start || hackathon.registrationStart || undefined;
+  const end = hackathon.submissionWindow?.end || hackathon.registrationEnd || undefined;
+  return {
+    start: start ? new Date(start) : undefined,
+    end: end ? new Date(end) : undefined,
+  };
+};
+
+/**
+ * Calculate days left for registration
+ */
+export const getDaysLeftText = (hackathon: HackathonMetadata | HackathonSummary): string | null => {
+  const { end } = getRegistrationWindow(hackathon);
+  if (!end) return null;
+  
+  const now = new Date();
+  const ms = end.getTime() - now.getTime();
+  const days = Math.ceil(ms / (1000 * 60 * 60 * 24));
+  
+  if (days < 0) return 'Registration ended';
+  if (days === 0) return 'Ends today';
+  return `${days} days left`;
+};
+
+/**
+ * Calculate registration progress percentage
+ */
+export const getProgressPercent = (hackathon: HackathonMetadata | HackathonSummary): number | null => {
+  const { start, end } = getRegistrationWindow(hackathon);
+  if (!start || !end) return null;
+  
+  const now = Date.now();
+  const s = start.getTime();
+  const e = end.getTime();
+  
+  if (now <= s) return 0;
+  if (now >= e) return 100;
+  
+  return Math.min(100, Math.max(0, ((now - s) / (e - s)) * 100));
+};
+
+/**
+ * Determine hackathon status based on dates
+ */
+export const calculateHackathonStatus = (hackathon: HackathonMetadata): HackathonStatus => {
+  // If status is explicitly set to draft, keep it
+  if (hackathon.status === 'draft') return 'draft';
+  
+  const now = new Date();
+  const { start, end } = getRegistrationWindow(hackathon);
+  
+  if (!start || !end) {
+    return hackathon.status || 'upcoming';
+  }
+  
+  if (now < start) return 'upcoming';
+  if (now >= start && now <= end) return 'active';
+  return 'ended';
+};
+
+/**
+ * Check if hackathon is currently accepting registrations
+ */
+export const isRegistrationOpen = (hackathon: HackathonMetadata | HackathonSummary): boolean => {
+  const status = typeof hackathon.status === 'string' 
+    ? hackathon.status.toLowerCase().trim() 
+    : '';
+    
+  if (status === 'ended' || status === 'draft') return false;
+  
+  const { start, end } = getRegistrationWindow(hackathon);
+  if (!start || !end) return false;
+  
+  const now = new Date();
+  return now >= start && now <= end;
+};
+
+/**
+ * Format date to readable string
+ */
+export const formatHackathonDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('id-ID', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+
+/**
+ * Format date range
+ */
+export const formatDateRange = (window: HackathonTimeWindow): string => {
+  const start = formatHackathonDate(window.start);
+  const end = formatHackathonDate(window.end);
+  return `${start} - ${end}`;
+};
+
+/**
+ * Generate slug from hackathon name
+ */
+export const generateSlug = (name: string): string => {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .trim();
+};
+
+/**
+ * Validate hackathon metadata
+ */
+export const validateHackathonMetadata = (metadata: Partial<HackathonMetadata>): string[] => {
+  const errors: string[] = [];
+  
+  if (!metadata.slug) errors.push('Slug is required');
+  if (!metadata.name) errors.push('Name is required');
+  if (!metadata.cover) errors.push('Cover image is required');
+  
+  if (metadata.submissionWindow) {
+    const start = new Date(metadata.submissionWindow.start);
+    const end = new Date(metadata.submissionWindow.end);
+    
+    if (start >= end) {
+      errors.push('Submission end date must be after start date');
+    }
+  }
+  
+  if (metadata.maxTeamSize && metadata.minTeamSize) {
+    if (metadata.maxTeamSize < metadata.minTeamSize) {
+      errors.push('Max team size must be greater than or equal to min team size');
+    }
+  }
+  
+  return errors;
+};
+
+/**
+ * Convert HackathonMetadata to HackathonSummary
+ */
+export const toHackathonSummary = (metadata: HackathonMetadata): HackathonSummary => {
+  return {
+    slug: metadata.slug,
+    name: metadata.name,
+    cover: metadata.cover,
+    description: metadata.description,
+    prize: metadata.prize,
+    tags: metadata.tags,
+    theme: metadata.theme,
+    status: metadata.status,
+    partnersCount: metadata.partnersCount,
+    submissionsCount: metadata.submissionsCount,
+    registrationStart: metadata.registrationStart,
+    registrationEnd: metadata.registrationEnd,
+    submissionWindow: metadata.submissionWindow,
+  };
+};
+
+/**
+ * Filter hackathons based on criteria
+ */
+export const filterHackathons = (
+  hackathons: HackathonSummary[],
+  filters: {
+    status?: string[];
+    tags?: string[];
+    search?: string;
+    featured?: boolean;
+  }
+): HackathonSummary[] => {
+  return hackathons.filter(hackathon => {
+    // Status filter
+    if (filters.status && filters.status.length > 0) {
+      const currentStatus = calculateHackathonStatus(hackathon as HackathonMetadata);
+      if (!filters.status.includes(currentStatus)) return false;
+    }
+    
+    // Tags filter
+    if (filters.tags && filters.tags.length > 0) {
+      if (!hackathon.tags || !filters.tags.some(tag => hackathon.tags?.includes(tag))) {
+        return false;
+      }
+    }
+    
+    // Search filter
+    if (filters.search) {
+      const searchTerm = filters.search.toLowerCase();
+      const searchableText = [
+        hackathon.name,
+        hackathon.description,
+        hackathon.theme,
+        ...(hackathon.tags || [])
+      ].join(' ').toLowerCase();
+      
+      if (!searchableText.includes(searchTerm)) return false;
+    }
+    
+    return true;
+  });
+};
+
+/**
+ * Sort hackathons
+ */
+export const sortHackathons = (
+  hackathons: HackathonSummary[],
+  sortBy: 'name' | 'registrationStart' | 'status' | 'featured' = 'registrationStart',
+  direction: 'asc' | 'desc' = 'desc'
+): HackathonSummary[] => {
+  return [...hackathons].sort((a, b) => {
+    let comparison = 0;
+    
+    switch (sortBy) {
+      case 'name':
+        comparison = a.name.localeCompare(b.name);
+        break;
+      case 'registrationStart': {
+        const aDate = getRegistrationWindow(a).start?.getTime() || 0;
+        const bDate = getRegistrationWindow(b).start?.getTime() || 0;
+        comparison = aDate - bDate;
+        break;
+      }
+      case 'status': {
+        const statusOrder = { 'active': 0, 'upcoming': 1, 'ended': 2, 'draft': 3 };
+        const aStatus = calculateHackathonStatus(a as HackathonMetadata);
+        const bStatus = calculateHackathonStatus(b as HackathonMetadata);
+        comparison = (statusOrder[aStatus] || 99) - (statusOrder[bStatus] || 99);
+        break;
+      }
+      default:
+        comparison = 0;
+    }
+    
+    return direction === 'desc' ? -comparison : comparison;
+  });
+};

apps/landing/src/content/hackathons/validation.ts

@@ -0,0 +1,312 @@
+import { HackathonMetadata } from './types';
+
+export interface ValidationResult {
+  isValid: boolean;
+  errors: string[];
+  warnings: string[];
+}
+
+export interface ValidationRule<T> {
+  name: string;
+  validate: (value: T) => ValidationResult;
+}
+
+/**
+ * Validate required fields
+ */
+export const validateRequiredFields = (metadata: Partial<HackathonMetadata>): ValidationResult => {
+  const errors: string[] = [];
+  const requiredFields = [
+    { key: 'slug', name: 'Slug' },
+    { key: 'name', name: 'Name' },
+    { key: 'cover', name: 'Cover image' },
+    { key: 'status', name: 'Status' }
+  ];
+
+  requiredFields.forEach(({ key, name }) => {
+    if (!metadata[key as keyof HackathonMetadata]) {
+      errors.push(`${name} is required`);
+    }
+  });
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings: []
+  };
+};
+
+/**
+ * Validate slug format
+ */
+export const validateSlug = (slug: string): ValidationResult => {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+
+  if (!slug) {
+    errors.push('Slug cannot be empty');
+  } else {
+    // Check slug format
+    const slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+    if (!slugRegex.test(slug)) {
+      errors.push('Slug must contain only lowercase letters, numbers, and hyphens');
+    }
+
+    // Check length
+    if (slug.length < 3) {
+      errors.push('Slug must be at least 3 characters long');
+    }
+
+    if (slug.length > 100) {
+      errors.push('Slug must be less than 100 characters');
+    }
+
+    // Check for consecutive hyphens
+    if (slug.includes('--')) {
+      errors.push('Slug cannot contain consecutive hyphens');
+    }
+
+    // Check start/end
+    if (slug.startsWith('-') || slug.endsWith('-')) {
+      errors.push('Slug cannot start or end with a hyphen');
+    }
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings
+  };
+};
+
+/**
+ * Validate dates
+ */
+export const validateDates = (metadata: Partial<HackathonMetadata>): ValidationResult => {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+
+  // Validate submission window
+  if (metadata.submissionWindow) {
+    const start = new Date(metadata.submissionWindow.start);
+    const end = new Date(metadata.submissionWindow.end);
+
+    if (isNaN(start.getTime())) {
+      errors.push('Invalid submission start date');
+    }
+
+    if (isNaN(end.getTime())) {
+      errors.push('Invalid submission end date');
+    }
+
+    if (start.getTime() >= end.getTime()) {
+      errors.push('Submission end date must be after start date');
+    }
+
+    // Check if dates are in the past
+    const now = new Date();
+    if (end.getTime() < now.getTime()) {
+      warnings.push('Submission end date is in the past');
+    }
+
+    // Check reasonable duration
+    const duration = end.getTime() - start.getTime();
+    const durationDays = duration / (1000 * 60 * 60 * 24);
+
+    if (durationDays < 1) {
+      warnings.push('Submission window is less than 1 day');
+    }
+
+    if (durationDays > 365) {
+      warnings.push('Submission window is longer than 1 year');
+    }
+  }
+
+  // Validate judging window
+  if (metadata.judgingWindow) {
+    const start = new Date(metadata.judgingWindow.start);
+    const end = new Date(metadata.judgingWindow.end);
+
+    if (isNaN(start.getTime())) {
+      errors.push('Invalid judging start date');
+    }
+
+    if (isNaN(end.getTime())) {
+      errors.push('Invalid judging end date');
+    }
+
+    if (start.getTime() >= end.getTime()) {
+      errors.push('Judging end date must be after start date');
+    }
+
+    // Check judging starts after submission ends
+    if (metadata.submissionWindow) {
+      const submissionEnd = new Date(metadata.submissionWindow.end);
+      if (start.getTime() < submissionEnd.getTime()) {
+        warnings.push('Judging should start after submission window ends');
+      }
+    }
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings
+  };
+};
+
+/**
+ * Validate team size constraints
+ */
+export const validateTeamSize = (metadata: Partial<HackathonMetadata>): ValidationResult => {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+
+  if (metadata.minTeamSize !== undefined && metadata.maxTeamSize !== undefined) {
+    if (metadata.minTeamSize < 1) {
+      errors.push('Minimum team size must be at least 1');
+    }
+
+    if (metadata.maxTeamSize < 1) {
+      errors.push('Maximum team size must be at least 1');
+    }
+
+    if (metadata.maxTeamSize < metadata.minTeamSize) {
+      errors.push('Maximum team size must be greater than or equal to minimum team size');
+    }
+
+    if (metadata.maxTeamSize > 20) {
+      warnings.push('Maximum team size is unusually large (>20)');
+    }
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings
+  };
+};
+
+/**
+ * Validate URLs
+ */
+export const validateUrls = (metadata: Partial<HackathonMetadata>): ValidationResult => {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+
+  // Validate cover image URL
+  if (metadata.cover) {
+    try {
+      new URL(metadata.cover);
+    } catch {
+      errors.push('Cover image must be a valid URL');
+    }
+  }
+
+  // Validate social image URL
+  if (metadata.socialImage) {
+    try {
+      new URL(metadata.socialImage);
+    } catch {
+      errors.push('Social image must be a valid URL');
+    }
+  }
+
+  // Validate partner URLs
+  if (metadata.partners) {
+    metadata.partners.forEach((partner, index) => {
+      try {
+        new URL(partner.link);
+      } catch {
+        errors.push(`Partner ${index + 1} link must be a valid URL`);
+      }
+
+      try {
+        new URL(partner.logo);
+      } catch {
+        errors.push(`Partner ${index + 1} logo must be a valid URL`);
+      }
+    });
+  }
+
+  // Validate sponsor URLs
+  if (metadata.sponsors) {
+    metadata.sponsors.forEach((sponsor, index) => {
+      try {
+        new URL(sponsor.link);
+      } catch {
+        errors.push(`Sponsor ${index + 1} link must be a valid URL`);
+      }
+
+      try {
+        new URL(sponsor.logo);
+      } catch {
+        errors.push(`Sponsor ${index + 1} logo must be a valid URL`);
+      }
+    });
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings
+  };
+};
+
+/**
+ * Validate status
+ */
+export const validateStatus = (status: string): ValidationResult => {
+  const validStatuses = ['draft', 'upcoming', 'active', 'ended'];
+  const errors: string[] = [];
+
+  if (!validStatuses.includes(status)) {
+    errors.push(`Status must be one of: ${validStatuses.join(', ')}`);
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings: []
+  };
+};
+
+/**
+ * Comprehensive validation
+ */
+export const validateHackathon = (metadata: Partial<HackathonMetadata>): ValidationResult => {
+  const validations = [
+    validateRequiredFields(metadata),
+    metadata.slug ? validateSlug(metadata.slug) : { isValid: true, errors: [], warnings: [] },
+    validateDates(metadata),
+    validateTeamSize(metadata),
+    validateUrls(metadata),
+    metadata.status ? validateStatus(metadata.status) : { isValid: true, errors: [], warnings: [] }
+  ];
+
+  const allErrors = validations.flatMap(v => v.errors);
+  const allWarnings = validations.flatMap(v => v.warnings);
+
+  return {
+    isValid: allErrors.length === 0,
+    errors: allErrors,
+    warnings: allWarnings
+  };
+};
+
+/**
+ * Validate hackathon content file structure
+ */
+export const validateHackathonStructure = (directoryPath: string): ValidationResult => {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+
+  // This would be implemented to check file system structure
+  // For now, just return a placeholder
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings
+  };
+};

apps/landing/src/content/shared/mdx.ts

@@ -0,0 +1,201 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+
+export interface MDXContent {
+  content: string;
+  metadata: Record<string, unknown>;
+  slug: string;
+  filePath: string;
+}
+
+/**
+ * Read and parse MDX file
+ */
+export async function readMDXFile(filePath: string): Promise<MDXContent | null> {
+  try {
+    const fileContent = fs.readFileSync(filePath, 'utf-8');
+    const { data: metadata, content } = matter(fileContent);
+    
+    const fileName = path.basename(filePath, path.extname(filePath));
+    const slug = fileName === 'content' ? path.basename(path.dirname(filePath)) : fileName;
+
+    return {
+      content,
+      metadata,
+      slug,
+      filePath
+    };
+  } catch (error) {
+    console.error(`Error reading MDX file ${filePath}:`, error);
+    return null;
+  }
+}
+
+/**
+ * Get all MDX files in a directory
+ */
+export async function getMDXFiles(directoryPath: string): Promise<string[]> {
+  try {
+    if (!fs.existsSync(directoryPath)) {
+      return [];
+    }
+
+    const files = fs.readdirSync(directoryPath, { withFileTypes: true });
+    const mdxFiles: string[] = [];
+
+    for (const file of files) {
+      const fullPath = path.join(directoryPath, file.name);
+      
+      if (file.isDirectory()) {
+        // Look for content.mdx in subdirectories
+        const contentPath = path.join(fullPath, 'content.mdx');
+        if (fs.existsSync(contentPath)) {
+          mdxFiles.push(contentPath);
+        }
+        
+        // Also look for any .mdx files directly in subdirectories
+        const subFiles = await getMDXFiles(fullPath);
+        mdxFiles.push(...subFiles);
+      } else if (file.name.endsWith('.mdx')) {
+        mdxFiles.push(fullPath);
+      }
+    }
+
+    return mdxFiles;
+  } catch (error) {
+    console.error(`Error reading directory ${directoryPath}:`, error);
+    return [];
+  }
+}
+
+/**
+ * Extract metadata from content directory structure
+ */
+export function extractMetadataFromPath(filePath: string, baseDir: string): Record<string, unknown> {
+  const relativePath = path.relative(baseDir, filePath);
+  const pathParts = relativePath.split(path.sep);
+  
+  // If file is in a subdirectory, use directory name as slug
+  if (pathParts.length > 1) {
+    const directoryName = pathParts[pathParts.length - 2];
+    return {
+      slug: directoryName,
+      contentPath: relativePath
+    };
+  }
+  
+  // If file is directly in the base directory, use filename as slug
+  const fileName = path.basename(filePath, path.extname(filePath));
+  return {
+    slug: fileName,
+    contentPath: relativePath
+  };
+}
+
+/**
+ * Validate MDX frontmatter
+ */
+export function validateMDXFrontmatter(
+  metadata: Record<string, unknown>,
+  requiredFields: string[] = []
+): { isValid: boolean; errors: string[] } {
+  const errors: string[] = [];
+  
+  for (const field of requiredFields) {
+    if (!(field in metadata) || metadata[field] === undefined || metadata[field] === null) {
+      errors.push(`Missing required field: ${field}`);
+    }
+  }
+  
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+}
+
+/**
+ * Process content images and assets
+ */
+export function processContentAssets(content: string, assetsBasePath: string): string {
+  // Replace relative image paths with absolute paths
+  return content.replace(
+    /!\[([^\]]*)\]\((?!https?:\/\/)([^)]+)\)/g,
+    (match, alt, src) => {
+      // Convert relative paths to absolute paths
+      const absolutePath = path.posix.join(assetsBasePath, src);
+      return `![${alt}](${absolutePath})`;
+    }
+  );
+}
+
+/**
+ * Generate content index for build-time optimization
+ */
+export async function generateContentIndex<T>(
+  contentDir: string,
+  metadataParser: (mdxContent: MDXContent) => T | null
+): Promise<T[]> {
+  const mdxFiles = await getMDXFiles(contentDir);
+  const contentItems: T[] = [];
+
+  for (const filePath of mdxFiles) {
+    const mdxContent = await readMDXFile(filePath);
+    if (mdxContent) {
+      const parsedMetadata = metadataParser(mdxContent);
+      if (parsedMetadata) {
+        contentItems.push(parsedMetadata);
+      }
+    }
+  }
+
+  return contentItems;
+}
+
+/**
+ * Create content manifest for client-side use
+ */
+export function createContentManifest<T>(
+  items: T[],
+  options: {
+    sortBy?: keyof T;
+    sortDirection?: 'asc' | 'desc';
+    filterDrafts?: boolean;
+  } = {}
+): {
+  items: T[];
+  total: number;
+  lastUpdated: string;
+} {
+  let processedItems = [...items];
+
+  // Filter drafts if requested
+  if (options.filterDrafts) {
+    processedItems = processedItems.filter(
+      item => (item as Record<string, unknown>).status !== 'draft'
+    );
+  }
+
+  // Sort if requested
+  if (options.sortBy) {
+    processedItems.sort((a, b) => {
+      const sortBy = options.sortBy;
+      if (!sortBy) return 0;
+      
+      const aValue = a[sortBy];
+      const bValue = b[sortBy];
+      
+      let comparison = 0;
+      if (aValue < bValue) comparison = -1;
+      if (aValue > bValue) comparison = 1;
+      
+      return options.sortDirection === 'desc' ? -comparison : comparison;
+    });
+  }
+
+  return {
+    items: processedItems,
+    total: processedItems.length,
+    lastUpdated: new Date().toISOString()
+  };
+}

apps/landing/src/data/hackathons.json

@@ -1,178 +1,29 @@
 [
   {
-    "team_name": "Lineproject",
-    "project_title": "LaporMerdeka",
-    "description": "Platform pelaporan infrastruktur publik Indonesia yang memungkinkan warga melaporkan masalah dengan cepat dan mudah untuk Indonesia yang lebih baik.",
-    "repo_link": "https://github.com/MANFIT7/lapormerdeka",
-    "screenshot": "https://drive.google.com/open?id=1tbOJKacQGsfldr5TsWtzNKL65iCpADz2",
-    "file_name": "Screenshot 2025-08-22 062036 - Fafnir.png"
-  },
-  {
-    "team_name": "Aliansi switch",
-    "project_title": "News-ai",
-    "description": "ai agent untuk memilah beritah hoax dengan asli",
-    "repo_link": "https://github.com/7FIl/News-AI",
-    "screenshot": "https://drive.google.com/open?id=1IYoOB1zqL70tpxaeopdS6VtuL8hoqpPn",
-    "file_name": "Screenshot 2025-08-22 223626 - 7Fil.png"
-  },
-  {
-    "team_name": "Sodev Sedap",
-    "project_title": "Sejarah Alternatif ID",
-    "description": "Website AI Agent yang dapat memberikan user pov bagaimana jika user ada di situasi tersebut menggunakan reka adegan dengan pendekatan teks dengan gaya novel",
-    "repo_link": "https://github.com/rizalkr/sejarah-alternatif-id/tree/main",
-    "screenshot": "https://drive.google.com/open?id=1TMUgayvtI45gU79I-0SokQnPJP6LHQaC",
-    "file_name": "Screenshot 2025-08-23 115137 - Rizal Kurnia.png"
-  },
-  {
-    "team_name": "Muhammad Harafsan Alhad",
-    "project_title": "Elysia AI Kemerdekaan Indonesia",
-    "description": "“Sebuah chatbot AI interaktif yang menampilkan Elysia (dari Honkai Impact) yang menjawab pertanyaan tentang Kemerdekaan Indonesia dengan gaya khas Elysia, lengkap dengan fitur kuis interaktif.",
-    "repo_link": "https://github.com/rafsanalhad/elysia-ai-kemerdekaan",
-    "screenshot": "https://drive.google.com/open?id=1_QE59lgHNbJfuVikJ5KT0_85tbJc6pMo",
-    "file_name": "Screenshot 2025-08-23 131756 - Ralhad Alhad.png"
-  },
-  {
-    "team_name": "RaflanGT",
-    "project_title": "Ecobot",
-    "description": "EcoBot adalah AI Agent yang hadir untuk menjawab tantangan pengelolaan sampah dan keterbatasan digitalisasi di masyarakat. Melalui WhatsApp yang akrab bagi warga, EcoBot memandu pemilahan sampah dengan analisis gambar berbasis AI sekaligus menumbuhkan kesadaran lingkungan. Kemerdekaan bukan hanya bebas dari penjajahan, tetapi juga kesadaran kolektif untuk mengelola hal-hal sederhana yang berdampak besar. Dengan langkah kecil seperti ini, desa dan masyarakat dapat mandiri secara digital, menjaga lingkungan, dan bersama-sama membawa Indonesia terus maju.",
-    "repo_link": "https://github.com/mycoderisyad/raflangt-ecobot",
-    "screenshot": "https://drive.google.com/open?id=1lj5DMJfxSrCwyNSLIlq-GQohJHCUDU1-",
-    "file_name": "Screenshot 2025-08-23 223413 - MRisyad Raflan.png"
-  },
-  {
-    "team_name": "Tchh Tidak Akan",
-    "project_title": "Merdeka Quiziz",
-    "description": "Merdeka Quiziz merupakan web kuis yang menggunakan tema Kemerdekaan Indonesia dengan fitur gamifikasi yang membuat kuis menjadi menyenangkan, dimana setiap kuis dibuat oleh Mera (AI) dan dipersonalisasi untuk pengguna. Selain itu  di Merdeka Quiziz pengguna juga dapat membahas sejarah Indonesia bersama Mera (AI).",
-    "repo_link": "https://gitlab.com/personal-projects9094234/merdeka-quiziz",
-    "screenshot": "https://drive.google.com/open?id=1U_UMaYABLjbO38GA9DopXebDWznFKQcI",
-    "file_name": "Screenshot 2025-08-24 at 09.15.06 - Khen Cahyo.png"
-  },
-  {
-    "team_name": "Pengen Ikut tapi Bingung Mau Buat Apa",
-    "project_title": "IMMPHNEN (Ingin Menjadi Mesin Pencari Handal Namun Enggan Ngecrawl)",
-    "description": "Mesin pencari yang didesain untuk memerdekakan para pencari informasi dari tracker-tracker yang berlebihan (lelah bukan habis mencari A, nongol iklan A dimana-mana?). Memiliki fitur ringkasan pencarian, serta filter negatif penelusuran (judi & pornografi). Dibuat dengan LangSearch dan Lunos(ChatGPT 5.0).",
-    "repo_link": "https://gitlab.com/myracledev/py-search-engine",
-    "screenshot": "https://drive.google.com/open?id=1xNFtvGSLfWwdA4Mx46S7bx2nmwpt5CXA",
-    "file_name": "{CBBB6849-BC8E-4435-9C6A-8C88C83287DF} - Mohamad Yusuf Rizaldi.png"
-  },
-  {
-    "team_name": "Ayam Geprek",
-    "project_title": "SURA AI (Suara Rakyat)",
-    "description": "SIngkatnya ini itu AI yang jadi mewakili hati rakyat Indonesia (bukan dpr). Dia bukan sekadar asisten digital, kenapa? ya karena dia kritis, cerdas, dan punya selera sinis yang bikin narasi kekuasaan gampang dibongkar. Gayanya penuh satir, dan sering pakai perumpamaan yang sangat panas. Sura AI hadir untuk menantang pemikiran, membakar semangat, dan memberikan perspektif yang ngga takut ngomong jujur tentang realita sosial dan politik.",
-    "repo_link": "https://github.com/Roti18/sura-ai",
-    "screenshot": "https://drive.google.com/open?id=1uUWGu08NimQ1qV9E-xu0h39HyoAYrclS",
-    "file_name": "Screenshot 2025-08-24 204538 - Roti 1.png"
-  },
-  {
-    "team_name": "Fae",
-    "project_title": "Daily Commit",
-    "description": "Daily Commit adalah semacam alarm commit yang bakal ngingetin kamu kalau seharian nggak ada commit di GitHub. Tapi kalau rajin, dia juga bisa jadi cheerleader digital yang muji-muji kamu.",
-    "repo_link": "https://github.com/far-id/send-mail-mailry.git",
-    "screenshot": "https://drive.google.com/open?id=1GAvN4RxW_gAvOfew7LbbHANEx2F3lC5y",
-    "file_name": "GITHUB~1.PNG"
-  },
-  {
-    "team_name": "garudaStack",
-    "project_title": "Tani AI",
-    "description": "Tani AI adalah AI agent andalan anda untuk membantu dalam perkembangan, produktifitas serta analisis untuk komoditas pertanian anda.",
-    "repo_link": "FE : https://github.com/Jazaniest/garuda-ai-frontend.git   BE : https://github.com/Rifaldy1292/be-hackaton.git",
-    "screenshot": "https://drive.google.com/open?id=173dS3v9sAJXMOxs7uY_SG-TUW9wIo_WM",
-    "file_name": "Tani AI - M Abdillah Aljazani.png"
-  },
-  {
-    "team_name": "Roki Miftah Kamaludin",
-    "project_title": "Mengenang Pahlawan",
-    "description": "Mengenang Pahlawan adalah platform digital untuk mengenang dan mempelajari kisah pahlawan nasional Indonesia. Aplikasi ini menyajikan biografi, foto, serta informasi resmi terkait penetapan gelar pahlawan.\n\nSelain sebagai ensiklopedia digital, platform ini juga dilengkapi fitur interaktif seperti kuis edukatif, pencarian, dan poin penghargaan.",
-    "repo_link": "https://github.com/rokimiftah/mengenang-pahlawan",
-    "screenshot": "https://drive.google.com/open?id=140c-FyndYCAOCtKChbRaENc9fgWvQwU2",
-    "file_name": "mengenang-pahlawan - Roki Miftah Kamaludin.png"
-  },
-  {
-    "team_name": "LokerHunter",
-    "project_title": "LokerKerja",
-    "description": "Sebuah platform job matching yang memanfaatkan analisis CV atau portofolio untuk mengidentifikasi keahlian utama pengguna dan melakukan inferensi otomatis terhadap posisi pekerjaan yang paling sesuai.\n\nHasil analisis ini digunakan untuk memberikan rekomendasi daftar lowongan yang relevan dengan profil keterampilan pengguna. Selain itu, pengguna dapat berlangganan newsletter agar selalu mendapatkan informasi lowongan terbaru yang sesuai dengan hasil analisis CV mereka, yang kemudian akan dikirimkan langsung melalui email.\n\nMapping ke Sponsor\nUNLI = Digunakan untuk vision & reasoning engine dalam analisis CV/portofolio (misalnya parsing teks dari PDF/gambar, lalu inferensi posisi kerja yang cocok).\nLunos = Digunakan untuk parsing terstruktur (PDF ke JSON), normalisasi data, dan orkestrasi pipeline analisis.\nMailry = Digunakan untuk layanan email newsletter, agar pengguna bisa berlangganan update lowongan yang sesuai dengan profil keterampilannya.",
-    "repo_link": "https://github.com/iegl3/LokerKerja",
-    "screenshot": "https://drive.google.com/open?id=1qludNU5DnNPFtzowSnB_mYkPB00Ll4Rz",
-    "file_name": "demo - Eagle.png"
-  },
-  {
-    "team_name": "Kami Gila Roblox",
-    "project_title": "Pitara: Pintu Sejarah Nusantara",
-    "description": "Pitara adalah platform yang bertujuan untuk meningkatkan literasi sejarah dan melawan hoaks di Indonesia. Platform ini menyediakan fitur chat AI untuk belajar sejarah, AI fact-checker untuk memverifikasi berita, forum diskusi, dan fitur pembuatan artikel otomatis. Pitara juga menjaga retensi pengguna melalui newsletter mingguan.",
-    "repo_link": "https://github.com/JackBerck/pitara",
-    "screenshot": "https://drive.google.com/open?id=1GIXZkRrRn21hpNMcip-QdGayLr8m2qCG",
-    "file_name": "screencapture-127-0-0-1-8000-2025-08-24-22_56_54 - Zaki Dzulfikar.png"
-  },
-  {
-    "team_name": "Hidup Jokowi",
-    "project_title": "Historia",
-    "description": "Historia, sebuah platform revolusioner yang menjembatani masa lalu dengan masa kini. kami memanfaatkan kekuatan kecerdasan buatan (AI) untuk menganalisis dan memberikan narasi pada foto-foto dan dokumen bersejarah Indonesia. cukup unggah sebuah gambar, dan biarkan teknologi kami mengungkap cerita, tokoh, serta konteks di balik momen beku tersebut. mari jelajahi kembali perjuangan bangsa dengan cara yang belum pernah ada sebelumnya.",
-    "repo_link": "https://github.com/mybday123/historia",
-    "screenshot": "https://drive.google.com/open?id=1RaMiswa7Fy5m3V1xsoODvKabEwTspu2y",
-    "file_name": "Historia_-_Preview - Julian Mifta Yama Fauzan.png"
-  },
-  {
-    "team_name": "CORTEZA FAMILY",
-    "project_title": "Garuda Shield - Criminal Website Detector",
-    "description": "Garuda Shield - Criminal Website Detector: Adalah Web analysis berbasis Crawling yang memanfaatkan AI Untuk mendeteksi anomali pada suatu web menggunakan: LunosTech, Mailry, Unli.Dev serta Crawler Tools",
-    "repo_link": "https://github.com/c0rt3z4/hackathon-imphnen",
-    "screenshot": "https://drive.google.com/open?id=1AKJ7pN7zUEAoJEcZFAxGVtSE582r2Hw5",
-    "file_name": "Capture - Calm.PNG"
-  },
-  {
-    "team_name": "Oziral",
-    "project_title": "Kerja Merdeka - AI Agent Pendamping Pelamar Kerja",
-    "description": "Kerja Merdeka – AI Agent Pendamping Pelamar Kerja adalah platform berbasis kecerdasan buatan yang membantu pencari kerja menyusun CV dan Cover Letter yang relevan, berlatih interview secara interaktif, hingga mengirimkan lamaran dalam satu alur terpadu.",
-    "repo_link": "frontend : https://github.com/lakhatekno/imphnen-frontend, backend: https://github.com/Contsol-dev/kerja-merdeka-be",
-    "screenshot": "https://drive.google.com/open?id=1l7IOCTj1tRJTtFgq0Wq8CJ8NaDYZ-DS1",
-    "file_name": "Screenshot 2025-08-24 230728 - Muhammad Iqbal Ghozy.png"
-  },
-  {
-    "team_name": "ak mw heketon",
-    "project_title": "MerdekAI",
-    "description": "Kita sedang mengembangkan sebuah chatbot AI versi low budget yang tetap powerful dan fungsional. Meskipun budget pembuatan murah bahkan gratis dibanding ChatGPT, fitur-fiturnya gak kalah lengkap. Chatbot ini mendukung:\n\nChat Completion (percakapan interaktif seperti ChatGPT)\n\nText-to-Voice (mengubah teks menjadi suara)\n\nImage Generation (membuat gambar dari prompt)\n\nImage Recognition (mengidentifikasi dan mendeskripsikan gambar)\n\nJadi, meskipun gak ada dana keluar, project ini dirancang supaya tetap memberikan pengalaman mirip ChatGPT dengan fitur-fitur AI kekinian ygy.",
-    "repo_link": "https://github.com/kevinalvarel/merdekai",
-    "screenshot": "https://drive.google.com/open?id=1U24L8_4c2nM088olI7V8LaqUGcOfg1YH",
-    "file_name": "merdekai.my.id_ - Muhammad Kevin Alvarel.png"
-  },
-  {
-    "team_name": "Er Project",
-    "project_title": "Agentic Merdeka",
-    "description": "Multi-modal AI Chat interface, dengan kombinasi beberapa capability. Diantaranya:\n\nConversation, Image Analisis, Generate Embeddings Vector, Generate voice, Dan yang terakhir Generate Gambar, bisa build character ai sendiri, select persona dll\n\nFramework:\nNextjs 15+ (app router)\n\nDatabseses:\nFirebase untuk penyimpanan chat history dan login\n\nDilengkapi proteksi CSRF, Next Middleware dan Authentikasi menggunakan mailry\n\nSEMUA ITU DAPAT DI AKSES melalui satu web interface. Ini sudah malas, JANGAN ANGGAP PROYEK INI RAJIN🗿",
-    "repo_link": "https://github.com/ErRickow/ai-agent-hackathon",
-    "screenshot": "https://drive.google.com/open?id=1EkVWezUIXc_F_9IeM3LeX47TFDl2j2Va",
-    "file_name": "download - Er Rickow.png"
-  },
-  {
-    "team_name": "NamamuCore",
-    "project_title": "Namamu - Startup Name Generator",
-    "description": "Namamu.web.id merupakan situs generator nama sederhana yang memudahkan brainstorming ide platform, dengan tambahan fitur pengiriman hasil ke email.",
-    "repo_link": "https://github.com/nooradn/namamu-name-gen",
-    "screenshot": "https://drive.google.com/open?id=1EW6wBuujpHkhT1tW-_j6TklSgqvZt7wa",
-    "file_name": "preview - Noor Adn.png"
-  },
-  {
-    "team_name": "Tim GakTau.Dev",
-    "project_title": "Quiz Kemerdekaan",
-    "description": "Sebuah aplikasi kuis interaktif berbasis AI untuk membantu pelajar dan penggemar sejarah Indonesia memahami peristiwa kemerdekaan dengan cara yang menyenangkan",
-    "repo_link": "https://github.com/RAYDENFLY/Quiz-Merdeka/tree/main",
-    "screenshot": "https://drive.google.com/open?id=1c0A6ijx_pNCmh87g_EvlyUAAV7zAT8Li",
-    "file_name": "Gambar WhatsApp 2025-08-24 pukul 21.36.26_53cb7a14 - RAYDENFLY.jpg"
-  },
-  {
-    "team_name": "Icikiwir semilir",
-    "project_title": "Chef AI",
-    "description": "chat bot untuk mendapatkan resep dari AI",
-    "repo_link": "https://github.com/ranggacey/chef",
-    "screenshot": "https://drive.google.com/open?id=1JCz7pEfM_nF--ZsAZvQSlUonJCjTZkh6",
-    "file_name": "Screenshot 2025-08-24 235059 - Diablo volfir.png"
-  },
-  {
-    "team_name": "Greatvitech Team",
-    "project_title": "Patriotisme Quiz",
-    "description": "Sebuah aplikasi quiz bertema patriotisme, pengguna bisa menjawab soal - soal yang berkaitan dengan patriotisme, serta soal digenerate langsung oleh ai",
-    "repo_link": "frontend: https://github.com/farhanangwa12/patriot-frontend  backend: https://github.com/farhanangwa12/patriot-backend",
-    "screenshot": "https://drive.google.com/open?id=1IAKk_ShPo51_CmqaClgv1ulXKrlf2fHA",
-    "file_name": "Screenshot 2025-08-24 221129 - farhan hokado.png"
+    "slug": "ai-agent-hackathon-2025",
+    "name": "AI Agent Hackathon",
+    "prize": "Rp. 5.000.000",
+    "tags": ["AI Agent"],
+    "description": "Hackathon dalam rangka AI Agent Kemerdekaan Indonesia. Selama satu minggu, para peserta akan diminta untuk membuat proyek mereka sendiri secara online dengan bantuan lunos.tech, mailry.co, dan unli.dev.",
+    "details": "",
+    "theme": "AI Agent untuk Kemerdekaan Indonesia",
+    "cover": "https://cdn.andka.my.id/imphnen/534798944_122241336080178516_4647521272813012181_n.jpg",
+    "status": "ended",
+    "submissionWindow": {
+      "start": "2025-08-15T00:00:00.000Z",
+      "end": "2025-09-20T23:59:59.999Z"
+    },
+    "partners": [
+      {
+        "name": "GitHub",
+        "logo": "https://example.com/github-logo.png",
+        "link": "https://github.com"
+      },
+      {
+        "name": "Microsoft",
+        "logo": "https://example.com/microsoft-logo.png",
+        "link": "https://microsoft.com"
+      }
+    ]
   }
-]
+]

apps/landing/src/data/socials.json

@@ -4,34 +4,34 @@
     "icon": "FaFacebook",
     "color": "#1877F2",
     "description": "Join discussions and share knowledge",
-    "link": "https://fb.com/groups/programmerhandal"
+    "link": "#"
   },
   {
     "name": "Discord",
     "icon": "FaDiscord",
     "color": "#5865F2",
     "description": "Real-time collaboration chat",
-    "link": "https://discord.gg/imphnen"
+    "link": "#"
   },
   {
     "name": "Instagram",
     "icon": "FaInstagram",
     "color": "#E4405F",
     "description": "Daily coding tips & showcases",
-    "link": "https://www.instagram.com/imphnen.dev"
+    "link": "#"
   },
   {
     "name": "TikTok",
     "icon": "FaTiktok",
     "color": "#000000",
     "description": "Short coding tutorials",
-    "link": "https://www.tiktok.com/@imphnen"
+    "link": "#"
   },
   {
     "name": "LinkedIn",
     "icon": "FaLinkedin",
     "color": "#0A66C2",
     "description": "Professional networking",
-    "link": "https://www.linkedin.com/company/imphnen"
+    "link": "#"
   }
 ]

apps/landing/src/hooks/use-auth.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useAuth() {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+  const [cookie, setCookie] =  useState<string | null>(null)
+
+  useEffect(() => {
+    const checkAuth = () => {
+      const accessToken = document.cookie
+        .split('; ')
+        .find(row => row.startsWith('__imphnen_access_token__='))
+        ?.split('=')[1];
+
+      setIsAuthenticated(!!accessToken);
+      setCookie(accessToken || null)
+    };
+
+    checkAuth();
+  }, []);
+
+  function getToken (){
+    if(isAuthenticated) return cookie
+  }
+
+  return { isAuthenticated, getToken };
+}

apps/landing/src/styles/globals.css

@@ -1,3 +1,4 @@
 @import 'tailwindcss';
 @import "../../../../libs/shadcn-ui/src/index.css";
 @source "../../../../libs/shadcn-ui/src/atoms/**/*.{ts,tsx}";
+@plugin "@tailwindcss/typography";

docker-compose-backoffice.yml

@@ -1,9 +1,10 @@
+version: '3.8'
 services:
   backoffice:
     build:
       context: .
       dockerfile: docker/backoffice.Dockerfile
     ports:
-      - '127.0.0.1:3001:80'
+      - "3001:80"
     restart: unless-stopped
     container_name: backoffice

docker-compose-dimentorin.yml

@@ -1,9 +1,10 @@
+version: '3.8'
 services:
   dimentorin:
     build:
       context: .
       dockerfile: docker/dimentorin.Dockerfile
     ports:
-      - '127.0.0.1:3002:80'
+      - "3002:80"
     restart: unless-stopped
     container_name: dimentorin

docker-compose-gacha.yml

@@ -1,9 +1,10 @@
+version: '3.8'
 services:
   gacha:
     build:
       context: .
       dockerfile: docker/gacha.Dockerfile
     ports:
-      - '127.0.0.1:3003:80'
+      - "3003:80"
     restart: unless-stopped
     container_name: gacha

docker-compose-hackathon.yml

@@ -1,17 +0,0 @@
-services:
-  hackathon:
-    build:
-      context: .
-      dockerfile: docker/hackathon.Dockerfile
-      args:
-        - VITE_SUPABASE_URL=${VITE_SUPABASE_URL}
-        - VITE_SUPABASE_ANON_KEY=${VITE_SUPABASE_ANON_KEY}
-    ports:
-      - '127.0.0.1:3004:80'
-    restart: unless-stopped
-    container_name: hackathon
-    env_file:
-      - .env.local
-    environment:
-      - VITE_SUPABASE_URL=${VITE_SUPABASE_URL}
-      - VITE_SUPABASE_ANON_KEY=${VITE_SUPABASE_ANON_KEY}

docker-compose-landing.yml

@@ -1,9 +1,10 @@
+version: '3.8'
 services:
   landing:
     build:
       context: .
       dockerfile: docker/landing.Dockerfile
     ports:
-      - '127.0.0.1:3005:3000'
+      - "3000:3000"
     restart: unless-stopped
     container_name: landing

docker/backoffice.Dockerfile

@@ -1,7 +1,7 @@
 FROM node:22-alpine AS deps
 WORKDIR /app
 COPY package.json package-lock.json ./
-RUN npm ci --prefer-offline --no-audit --no-fund
+RUN npm install
 
 FROM node:22-alpine AS builder
 WORKDIR /app