MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate landing with real APIs, remove auth pages

Browse Source 
Landing page changes:
- Removed entire (auth) directory — landing doesn't need login/signup
- Removed auth buttons (Masuk/Daftar) from header navigation
- Hackathon page now fetches teams + winners from real API
- Roadmap page now fetches from /v1/landing/cms/roadmap API with
  real-time voting via POST /roadmap/vote/{id}
- Deleted dummy JSON files: events.json, testimonials.json, hackathons.json
- Kept static config: hero-content, hero-stats, navigations, socials

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
maulanasdqn
2026-04-10 21:42:43 +07:00
co-authored by Claude Opus 4.6
parent 61b650bb25
commit e945da4b7f
49 changed files with 266 additions and 2115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/app/(auth)/_components/animated-background.tsx
-86
View File
@@ -1,86 +0,0 @@
'use client';
import { motion } from 'framer-motion';
import { useEffect, useMemo, useState } from 'react';
import {
SiCplusplus,
SiCss,
SiGo,
SiHtml5,
SiJavascript,
SiPhp,
SiPython,
SiRuby,
SiRust,
SiSwift,
SiTypescript,
} from 'react-icons/si';
export function AnimatedBackground() {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
const iconColorMap = useMemo(
() => [
{ Icon: SiJavascript, color: '#F7DF1E' },
{ Icon: SiTypescript, color: '#3178C6' },
{ Icon: SiPython, color: '#3776AB' },
{ Icon: SiCplusplus, color: '#00599C' },
{ Icon: SiRuby, color: '#CC342D' },
{ Icon: SiSwift, color: '#F05138' },
{ Icon: SiRust, color: '#000000' },
{ Icon: SiGo, color: '#00ADD8' },
{ Icon: SiPhp, color: '#777BB4' },
{ Icon: SiHtml5, color: '#E34F26' },
{ Icon: SiCss, color: '#1572B6' },
],
[]
);
const getRandom = (min: number, max: number) =>
Math.random() * (max - min) + min;
const floatingIcons = useMemo(() => {
if (!isClient) return [];
return Array.from({ length: 40 }).map((_, i) => {
const { Icon, color } = iconColorMap[i % iconColorMap.length];
return (
<motion.div
key={i}
className="pointer-events-none absolute"
style={{
top: `${getRandom(0, 100)}%`,
left: `${getRandom(0, 100)}%`,
fontSize: `${getRandom(16, 32)}px`,
color: color,
opacity: getRandom(0.1, 0.2),
rotate: getRandom(-180, 180),
}}
animate={{
y: [0, getRandom(-100, 100), 0],
x: [0, getRandom(-50, 50), 0],
rotate: getRandom(-180, 180),
}}
transition={{
duration: getRandom(15, 25),
repeat: Infinity,
repeatType: 'loop',
ease: 'easeInOut',
}}
>
<Icon className="h-full w-full" />
</motion.div>
);
});
}, [isClient, iconColorMap]);
if (!isClient) return null;
return (
<div className="fixed inset-0 z-0 overflow-hidden">{floatingIcons}</div>
);
}
apps/landing/src/app/(auth)/_http/fetch-post-verify-turnstile.ts
-41
View File
@@ -1,41 +0,0 @@
export async function fetchPostverifyTurnstile(
token: string,
remoteIp?: string
): Promise<boolean> {
const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
const params = new URLSearchParams({
secret: String(process.env.TURNSTILE_SECRET_KEY),
response: token,
});
if (remoteIp) {
params.append('remoteip', remoteIp);
}
const res = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: params.toString(),
});
if (!res.ok) {
console.error('Turnstile verify HTTP error', res.status);
return false;
}
const data = (await res.json()) as TurnstileVerifyResponse;
if (!data.success) {
console.warn('Turnstile failure', data['error-codes']);
return false;
}
return true;
}
interface TurnstileVerifyResponse {
success: boolean;
challenge_ts: string;
hostname: string;
'error-codes'?: string[];
}
apps/landing/src/app/(auth)/forgot-password/_actions/forgot-password-action.ts
-33
View File
@@ -1,33 +0,0 @@
'use server';
import { fetcher } from '@/lib/fetcher';
import { getRemoteIp } from '@/lib/headers';
import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
import {
forgotPasswordValidationSchema,
ForgotPasswordValidationType,
} from '../_validation/forgot-password-validation';
export async function ForgotPasswordAction(
request: ForgotPasswordValidationType
) {
const validRequest = forgotPasswordValidationSchema.parse(request);
const remoteIp = await getRemoteIp();
const isCapchaValid = await fetchPostverifyTurnstile(
validRequest.token,
remoteIp
);
if (!isCapchaValid) throw new Error('Failed to verify captcha');
const { data, error } = await fetcher.POST('/v1/auth/forgot', {
body: {
email: validRequest.email,
},
});
if (error) throw new Error(error.message);
return data;
}
apps/landing/src/app/(auth)/forgot-password/_components/forgot-password-form.tsx
-98
View File
@@ -1,98 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components';
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
import { useRef, useState } from 'react';
import { LuLoader } from 'react-icons/lu';
import { useFormForgotPassword } from '../_hooks/use-form-forgot-password';
import { usePostForgotPassowrd } from '../_hooks/use-post-forgot-password';
import { ForgotPasswordValidationType } from '../_validation/forgot-password-validation';
export function ForgotPasswordForm() {
const ref = useRef<TurnstileInstance | null>(null);
const [step, setStep] = useState<number>(1);
const [emailValue, setEmailValue] = useState<string>('');
const form = useFormForgotPassword();
const { mutate, isPending, error } = usePostForgotPassowrd(form);
const handleFirstStep = (values: ForgotPasswordValidationType) => {
setEmailValue(values.email);
setStep(2);
};
const handleSecondStep = () => {
mutate({ email: emailValue, token: form.getValues('token') });
};
return (
<Form {...form}>
<form
onSubmit={
step === 1
? form.handleSubmit(handleFirstStep)
: (e) => {
e.preventDefault();
handleSecondStep();
}
}
className="w-full space-y-4"
>
{error && (
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
{(error as Error).message}
</div>
)}
{step === 1 && (
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="emailmu@mail.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
{step === 2 && (
<Turnstile
ref={ref}
siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
onSuccess={(token) => form.setValue('token', token)}
options={{ theme: 'light', size: 'flexible', language: 'id' }}
/>
)}
<Button
type="submit"
disabled={isPending || (step === 2 && !form.watch('token'))}
className="w-full hover:bg-[#5fbaef] bg-[#22a5f1] font-bold"
>
{isPending ? (
<LuLoader className="h-5 w-5 animate-spin" />
) : step === 1 ? (
'Selanjutnya'
) : (
'Reset password'
)}
</Button>
</form>
</Form>
);
}
apps/landing/src/app/(auth)/forgot-password/_hooks/use-form-forgot-password.ts
-16
View File
@@ -1,16 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import {
forgotPasswordValidationSchema,
type ForgotPasswordValidationType,
} from '../_validation/forgot-password-validation';
export function useFormForgotPassword() {
return useForm<ForgotPasswordValidationType>({
resolver: zodResolver(forgotPasswordValidationSchema),
defaultValues: {
email: '',
token: '',
},
});
}
apps/landing/src/app/(auth)/forgot-password/_hooks/use-post-forgot-password.ts
-20
View File
@@ -1,20 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';
import { ForgotPasswordAction } from '../_actions/forgot-password-action';
import { useFormForgotPassword } from './use-form-forgot-password';
export function usePostForgotPassowrd(
form: ReturnType<typeof useFormForgotPassword>
) {
return useMutation({
mutationFn: ForgotPasswordAction,
onSuccess: ({ message }) => {
form.reset();
toast.success(message);
},
onError: ({ message }) => {
form.reset();
toast.error(message);
},
});
}
apps/landing/src/app/(auth)/forgot-password/_http/fetch-post-forgot-password.ts
View File
apps/landing/src/app/(auth)/forgot-password/_validation/forgot-password-validation.ts
-9
View File
@@ -1,9 +0,0 @@
import { z } from 'zod';
export const forgotPasswordValidationSchema = z.object({
email: z.string().email({ message: 'Format email tidak valid' }),
token: z.string(),
});
export type ForgotPasswordValidationType = z.infer<
typeof forgotPasswordValidationSchema
>;
apps/landing/src/app/(auth)/forgot-password/page.tsx
-23
View File
@@ -1,23 +0,0 @@
import { LogoSimple } from '@/app/_components/logo';
import { Metadata } from 'next';
import { ForgotPasswordForm } from './_components/forgot-password-form';
export const metadata: Metadata = {
title: 'IMPHNEN - Signin',
};
export default function Page() {
return (
<>
<div className="flex flex-col items-center gap-4">
<LogoSimple />
<p className="text-muted-foreground text-center text-sm sm:text-base">
Reset password akunmu
</p>
<ForgotPasswordForm />
</div>
</>
);
}
apps/landing/src/app/(auth)/layout.tsx
-25
View File
@@ -1,25 +0,0 @@
import { baiJamjureeFont } from '@/lib/fonts';
import { Card } from '@components';
import { cn } from '@utils';
import { ReactNode } from 'react';
import { AnimatedBackground } from './_components/animated-background';
export default function Layout({ children }: { children: ReactNode }) {
return (
<div
className={cn(
baiJamjureeFont.className,
'bg-background/20 relative flex min-h-[100dvh] items-center justify-center p-4'
)}
>
<AnimatedBackground />
<div className="z-10 w-full">
<Card className="bg-background/90 mx-auto w-full max-w-[360px] p-6 shadow-xl backdrop-blur-lg sm:max-w-md sm:p-8">
<div className="flex flex-col items-center space-y-6">
<div className="w-full space-y-4">{children}</div>
</div>
</Card>
</div>
</div>
);
}
apps/landing/src/app/(auth)/reset-password/_actions/reset-password-actions.ts
-28
View File
@@ -1,28 +0,0 @@
'use server';
import { fetcher } from '@/lib/fetcher';
import {
resetPasswordValidationSchema,
ResetPasswordValidationSchema,
} from '../_validation/reset-password-validation';
export async function resetPasswordAction(
request: ResetPasswordValidationSchema
) {
const validRequest = resetPasswordValidationSchema.parse(request);
if (validRequest.confirm_password !== validRequest.confirm_password) {
throw new Error('Password missmatch');
}
const { data, error } = await fetcher.POST('/v1/auth/new-password', {
body: {
password: validRequest.password,
token: validRequest.token,
},
});
if (error) throw new Error(error.message);
return data;
}
apps/landing/src/app/(auth)/reset-password/_components/reset-password-form.tsx
-73
View File
@@ -1,73 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components';
import { LuLoaderCircle } from 'react-icons/lu';
import { usePostResetPassword } from '../_hooks/use-post-reset-password';
import { useResetPasswordForm } from '../_hooks/use-reset-password-form';
import { ResetPasswordValidationSchema } from '../_validation/reset-password-validation';
export function ResetPasswordForm() {
const form = useResetPasswordForm();
const { mutate, error, isPending } = usePostResetPassword(form);
const onSubmit = (values: ResetPasswordValidationSchema) => {
mutate(values);
};
return (
<Form {...form}>
{error && (
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm w-full">
{(error as Error).message}
</div>
)}
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-full">
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>New Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="confirm_password"
render={({ field }) => (
<FormItem>
<FormLabel>Confirm New Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-full" disabled={isPending}>
{isPending ? (
<LuLoaderCircle className="size-5 animate-spin" />
) : (
'Ubah password'
)}
</Button>
</form>
</Form>
);
}
apps/landing/src/app/(auth)/reset-password/_hooks/use-post-reset-password.ts
-24
View File
@@ -1,24 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { resetPasswordAction } from '../_actions/reset-password-actions';
import { useResetPasswordForm } from './use-reset-password-form';
export function usePostResetPassword(
form: ReturnType<typeof useResetPasswordForm>
) {
const router = useRouter();
return useMutation({
mutationFn: resetPasswordAction,
onSuccess: ({ message }) => {
form.reset();
router.replace('/signin');
toast.success(message);
},
onError: ({ message }) => {
form.reset();
toast.error(message);
},
});
}
apps/landing/src/app/(auth)/reset-password/_hooks/use-reset-password-form.ts
-22
View File
@@ -1,22 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import {
resetPasswordValidationSchema,
ResetPasswordValidationSchema,
} from '../_validation/reset-password-validation';
export function useResetPasswordForm() {
const searchParams = useSearchParams();
const tokenFromQuery = searchParams.get('token') ?? '';
return useForm<ResetPasswordValidationSchema>({
resolver: zodResolver(resetPasswordValidationSchema),
defaultValues: {
password: '',
confirm_password: '',
token: tokenFromQuery,
},
});
}
apps/landing/src/app/(auth)/reset-password/_validation/reset-password-validation.ts
-31
View File
@@ -1,31 +0,0 @@
import { z } from 'zod';
export const resetPasswordValidationSchema = z
.object({
password: z
.string({
required_error: 'Password tidak boleh kosong',
invalid_type_error: 'Password harus berupa string',
})
.min(8, 'Password harus minimal 8 karakter')
.max(50, 'Password tidak boleh lebih dari 50 karakter')
.regex(
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).+$/,
'Password harus mengandung setidaknya satu huruf kapital, satu huruf kecil, satu angka, dan satu karakter spesial'
),
confirm_password: z
.string({
required_error: 'Konfirmasi password tidak boleh kosong',
})
.min(8, 'Konfirmasi password harus minimal 8 karakter')
.max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
token: z.string(),
})
.refine((data) => data.password === data.confirm_password, {
message: 'Password dan Konfirmasi Password harus sama',
path: ['confirm_password'],
});
export type ResetPasswordValidationSchema = z.infer<
typeof resetPasswordValidationSchema
>;
apps/landing/src/app/(auth)/reset-password/page.tsx
-30
View File
@@ -1,30 +0,0 @@
import { LogoSimple } from '@/app/_components/logo';
import { redirect } from 'next/navigation';
import { use } from 'react';
import { ResetPasswordForm } from './_components/reset-password-form';
export const dynamic = 'force-dynamic';
export default function Page({
searchParams,
}: {
searchParams: Promise<{ token?: string }>;
}) {
const { token } = use(searchParams);
if (!token) redirect('/signin');
return (
<>
<div className="flex flex-col items-center gap-4">
<LogoSimple />
<p className="text-muted-foreground text-center text-sm sm:text-base">
Ubah passwordmu
</p>
<ResetPasswordForm />
</div>
</>
);
}
apps/landing/src/app/(auth)/signin/_actions/signin-action.ts
-22
View File
@@ -1,22 +0,0 @@
'use server';
import { setAccessToken, setRefreshToken } from '@/lib/cookies';
import { fetchPostSignin } from '../_http/fetch-post-signin';
import {
type SignInValidationType,
signInValidationSchema,
} from '../_validation/signin-validation';
export async function SigninAction(request: SignInValidationType) {
const validRequest = signInValidationSchema.parse(request);
const { data } = await fetchPostSignin(validRequest);
const accessToken = data.token.access_token;
const refreshToken = data.token.refresh_token;
await setAccessToken(accessToken);
await setRefreshToken(refreshToken);
return data;
}
apps/landing/src/app/(auth)/signin/_components/signin-form.tsx
-78
View File
@@ -1,78 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components';
import Link from 'next/link';
import { LuLoader } from 'react-icons/lu';
import { useFormSignin } from '../_hooks/use-form-signin';
import { usePostSignin } from '../_hooks/use-post-signin';
import { type SignInValidationType } from '../_validation/signin-validation';
export function SigninForm() {
const form = useFormSignin();
const { mutate, isPending, error } = usePostSignin(form);
const onSubmit = (values: SignInValidationType) => {
mutate(values);
};
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{error && (
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
{(error as Error).message}
</div>
)}
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="emailmu@mail.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormMessage />
<div className="text-right mt-1">
<Link
href="/forgot-password"
className="text-sm text-primary-500 font-bold hover:underline"
>
Lupa Password?
</Link>
</div>
</FormItem>
)}
/>
<Button type="submit" disabled={isPending} className="w-full font-bold">
{isPending ? <LuLoader className="h-5 w-5 animate-spin" /> : 'Masuk'}
</Button>
</form>
</Form>
);
}
apps/landing/src/app/(auth)/signin/_hooks/use-form-signin.ts
-16
View File
@@ -1,16 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import {
signInValidationSchema,
type SignInValidationType,
} from '../_validation/signin-validation';
export function useFormSignin() {
return useForm<SignInValidationType>({
resolver: zodResolver(signInValidationSchema),
defaultValues: {
email: '',
password: '',
},
});
}
apps/landing/src/app/(auth)/signin/_hooks/use-post-signin.ts
-28
View File
@@ -1,28 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { SigninAction } from '../_actions/signin-action';
import { useFormSignin } from './use-form-signin';
export function usePostSignin(form: ReturnType<typeof useFormSignin>) {
const router = useRouter();
return useMutation({
mutationFn: SigninAction,
onSuccess: () => {
router.push('/');
},
onError: (error, variables) => {
form.resetField('password');
if (error.message.includes('not active')) {
setTimeout(() => {
router.push(`/verification?ref=${variables.email}`);
}, 750);
}
toast.error(error.message);
},
});
}
apps/landing/src/app/(auth)/signin/_http/fetch-post-signin.ts
-24
View File
@@ -1,24 +0,0 @@
import { fetcher } from '@/lib/fetcher';
import { SignInValidationType } from '../_validation/signin-validation';
export async function fetchPostSignin({
email,
password,
}: SignInValidationType) {
const { data, error, response } = await fetcher.POST('/v1/auth/login', {
body: {
email,
password,
},
});
if (error) {
throw new Error(error.message);
}
if (!response.ok) {
throw new Error('Someting went wrong, please try again later');
}
return data;
}
apps/landing/src/app/(auth)/signin/_validation/signin-validation.ts
-18
View File
@@ -1,18 +0,0 @@
import { z } from 'zod';
export const signInValidationSchema = z.object({
email: z
.string({
required_error: 'Email tidak boleh kosong',
invalid_type_error: 'Email harus berupa string',
})
.min(1, 'Email tidak boleh kosong')
.email('Email harus valid'),
password: z
.string({
required_error: 'Password tidak boleh kosong',
invalid_type_error: 'Password harus berupa string',
})
.min(1, 'Password tidak boleh kosong'),
});
export type SignInValidationType = z.infer<typeof signInValidationSchema>;
apps/landing/src/app/(auth)/signin/page.tsx
-36
View File
@@ -1,36 +0,0 @@
import { LogoSimple } from '@/app/_components/logo';
import { Metadata } from 'next';
import Link from 'next/link';
import { SigninForm } from './_components/signin-form';
export const metadata: Metadata = {
title: 'IMPHNEN - Signin',
};
export default function Page() {
return (
<>
<div className="flex flex-col items-center gap-4">
<LogoSimple />
<p className="text-muted-foreground text-center text-sm sm:text-base">
Masuk untuk mengakses akunmu
</p>
</div>
<SigninForm />
<div className="w-full space-y-4">
<p className="text-muted-foreground px-4 text-center text-xs leading-5 text-balance sm:text-sm">
Belum punya akun?{' '}
<Link
href="/signup"
className="font-bold hover:underline hover:underline-offset-4 transition-colors text-primary-500"
>
Daftar
</Link>
</p>
</div>
</>
);
}
apps/landing/src/app/(auth)/signup/_actions/signup-action.ts
-25
View File
@@ -1,25 +0,0 @@
'use server';
import { getRemoteIp } from '@/lib/headers';
import { z } from 'zod';
import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
import { fetchPostSignin } from '../_http/fetch-post-signup';
import { signupValidationSchema } from '../_validation/signup-validation';
export async function SignupAction(
request: z.infer<typeof signupValidationSchema>
) {
const validRequest = signupValidationSchema.parse(request);
const remoteIp = await getRemoteIp();
const isCapchaValid = await fetchPostverifyTurnstile(
validRequest.token,
remoteIp
);
if (!isCapchaValid) throw new Error('Failed to verify captcha');
const data = await fetchPostSignin(validRequest);
return data;
}
apps/landing/src/app/(auth)/signup/_components/signup-form.tsx
-223
View File
@@ -1,223 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components';
import { zodResolver } from '@hookform/resolvers/zod';
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { useRef, useState } from 'react';
import { useForm } from 'react-hook-form';
import { LuLoader } from 'react-icons/lu';
import { z } from 'zod';
import { SignupAction } from '../_actions/signup-action';
import {
signupValidationSchema,
stepOneSignupValidationSchema,
stepTwoSignupValidationSchema,
} from '../_validation/signup-validation';
export function SignupForm() {
const router = useRouter();
const ref = useRef<TurnstileInstance | null>(null);
const [step, setStep] = useState(1);
const [stepOneData, setStepOneData] = useState<z.infer<
typeof stepOneSignupValidationSchema
> | null>(null);
const firstForm = useForm<z.infer<typeof stepOneSignupValidationSchema>>({
resolver: zodResolver(stepOneSignupValidationSchema),
defaultValues: {
email: '',
phone_number: '',
fullname: '',
password: '',
confirm_password: '',
},
});
const secondForm = useForm<z.infer<typeof stepTwoSignupValidationSchema>>({
resolver: zodResolver(stepTwoSignupValidationSchema),
defaultValues: {
token: '',
},
});
const { mutate, isPending, error } = useMutation({
mutationFn: async (data: z.infer<typeof signupValidationSchema>) => {
const result = await SignupAction(data);
return {
...result,
email: data.email,
};
},
onSuccess: ({ email }) => {
router.push(`/verification?ref=${email}`);
},
onError: () => {
ref.current?.reset();
secondForm.resetField('token');
},
});
const handleFirstSubmit = (
values: z.infer<typeof stepOneSignupValidationSchema>
) => {
setStepOneData(values);
setStep(2);
};
const handleSecondSubmit = (
values: z.infer<typeof stepTwoSignupValidationSchema>
) => {
if (stepOneData) {
mutate({ ...stepOneData, ...values });
}
};
return (
<>
{step === 1 && (
<Form {...firstForm}>
<form
onSubmit={firstForm.handleSubmit(handleFirstSubmit)}
className="space-y-4"
>
<FormField
control={firstForm.control}
name="fullname"
render={({ field }) => (
<FormItem>
<FormLabel>Full Name</FormLabel>
<FormControl>
<Input placeholder="Nama Lengkap" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={firstForm.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="emailmu@mail.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={firstForm.control}
name="phone_number"
render={({ field }) => (
<FormItem>
<FormLabel>Nomor Telepon</FormLabel>
<FormControl>
<Input placeholder="08123456789" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={firstForm.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={firstForm.control}
name="confirm_password"
render={({ field }) => (
<FormItem>
<FormLabel>Confirm Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
className="w-full bg-[#5fbaef] hover:bg-[#22a5f1]"
>
Selanjutnya
</Button>
</form>
</Form>
)}
{step === 2 && (
<Form {...secondForm}>
<form
onSubmit={secondForm.handleSubmit(handleSecondSubmit)}
className="space-y-4"
>
{error && (
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
{(error as Error).message}
</div>
)}
<Turnstile
ref={ref}
siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
onSuccess={(token) => secondForm.setValue('token', token)}
options={{
theme: 'light',
size: 'flexible',
language: 'id',
}}
/>
<div className="flex justify-between">
<Button
type="button"
variant="secondary"
onClick={() => setStep(1)}
>
Kembali
</Button>
<Button
type="submit"
disabled={isPending || !secondForm.watch('token')}
>
{isPending ? (
<LuLoader className="h-5 w-5 animate-spin" />
) : (
'Daftar'
)}
</Button>
</div>
</form>
</Form>
)}
</>
);
}
apps/landing/src/app/(auth)/signup/_http/fetch-post-signup.ts
-28
View File
@@ -1,28 +0,0 @@
import { fetcher } from '@/lib/fetcher';
import { SignupValidationSchema } from '../_validation/signup-validation';
export async function fetchPostSignin({
email,
password,
fullname,
phone_number,
}: SignupValidationSchema) {
const { data, error, response } = await fetcher.POST('/v1/auth/register', {
body: {
email,
password,
fullname,
phone_number,
},
});
if (error) {
throw new Error(error.message);
}
if (!response.ok) {
throw new Error('Someting went wrong, please try again later');
}
return data;
}
apps/landing/src/app/(auth)/signup/_validation/signup-validation.ts
-57
View File
@@ -1,57 +0,0 @@
import { z } from 'zod';
export const stepOneSignupValidationSchema = z
.object({
email: z
.string({
required_error: 'Email tidak boleh kosong',
invalid_type_error: 'Email harus berupa string',
})
.min(1, 'Email tidak boleh kosong')
.email('Email harus valid'),
fullname: z
.string({
required_error: 'Nama tidak boleh kosong',
invalid_type_error: 'Nama harus berupa string',
})
.min(1, 'Nama tidak boleh kosong')
.max(50, 'Nama tidak boleh lebih dari 50 karakter'),
password: z
.string({
required_error: 'Password tidak boleh kosong',
invalid_type_error: 'Password harus berupa string',
})
.min(8, 'Password harus minimal 8 karakter')
.max(50, 'Password tidak boleh lebih dari 50 karakter')
.regex(
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).+$/,
'Password harus mengandung setidaknya satu huruf kapital, satu huruf kecil, satu angka, dan satu karakter spesial'
),
confirm_password: z
.string({
required_error: 'Konfirmasi password tidak boleh kosong',
})
.min(8, 'Konfirmasi password harus minimal 8 karakter')
.max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
phone_number: z
.string({
required_error: 'Nomor telepon tidak boleh kosong',
invalid_type_error: 'Nomor telepon harus berupa string',
})
.min(10, 'Nomor telepon tidak boleh kurang dari 10 karakter')
.max(15, 'Nomor telepon tidak boleh lebih dari 15 karakter')
.regex(/^\d+$/, 'Nomor telepon hanya boleh berisi angka'),
})
.refine((data) => data.password === data.confirm_password, {
message: 'Password dan Konfirmasi Password harus sama',
path: ['confirm_password'],
});
export const stepTwoSignupValidationSchema = z.object({
token: z.string(),
});
export const signupValidationSchema = stepOneSignupValidationSchema.and(
stepTwoSignupValidationSchema
);
export type SignupValidationSchema = z.infer<typeof signupValidationSchema>;
apps/landing/src/app/(auth)/signup/page.tsx
-36
View File
@@ -1,36 +0,0 @@
import { LogoSimple } from '@/app/_components/logo';
import { Metadata } from 'next';
import Link from 'next/link';
import { SignupForm } from './_components/signup-form';
export const metadata: Metadata = {
title: 'IMPHNEN - Signup',
};
export default function Page() {
return (
<>
<div className="flex flex-col items-center gap-4">
<LogoSimple />
<p className="text-muted-foreground text-center text-sm sm:text-base">
Buat akunmu sekarang
</p>
</div>
<SignupForm />
<div className="w-full space-y-4">
<p className="text-muted-foreground px-4 text-center text-xs leading-5 text-balance sm:text-sm">
Sudah punya akun?{' '}
<Link
href="/signin"
className="font-bold hover:underline hover:underline-offset-4 transition-colors text-primary-500"
>
Masuk
</Link>
</p>
</div>
</>
);
}
apps/landing/src/app/(auth)/verification/_actions/resend-otp-action.ts
-31
View File
@@ -1,31 +0,0 @@
'use server';
import { fetcher } from '@/lib/fetcher';
import { getRemoteIp } from '@/lib/headers';
import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
import {
resendOTPValidationSchema,
type ResendOTPValidationType,
} from '../_validation/resend-otp-validation';
export async function resendOTPAction(request: ResendOTPValidationType) {
const validRequest = resendOTPValidationSchema.parse(request);
const remoteIp = await getRemoteIp();
const isCapchaValid = await fetchPostverifyTurnstile(
validRequest.token,
remoteIp
);
if (!isCapchaValid) throw new Error('Failed to verify captcha');
const { data, error } = await fetcher.POST('/v1/auth/send-otp', {
body: {
email: validRequest.email,
},
});
if (error) throw new Error(error.message);
return data;
}
apps/landing/src/app/(auth)/verification/_actions/verify-email-action.ts
-15
View File
@@ -1,15 +0,0 @@
'use server';
import { fetchPostVerifyEmail } from '../_http/fetch-post-verify-email';
import {
type VerifyEmailValidationType,
verifyEmailValidationSchema,
} from '../_validation/verify-email-validation';
export async function verifyEmailAction(request: VerifyEmailValidationType) {
const validRequest = verifyEmailValidationSchema.parse(request);
const data = await fetchPostVerifyEmail(validRequest);
return data;
}
apps/landing/src/app/(auth)/verification/_components/resend-otp-form.tsx
-74
View File
@@ -1,74 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components';
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
import { useRef } from 'react';
import { useFormResendOTP } from '../_hooks/use-form-resend-otp';
import { usePostResendOTP } from '../_hooks/use-post-resend-otp';
import { ResendOTPValidationType } from '../_validation/resend-otp-validation';
export function ResendOTPForm() {
const ref = useRef<TurnstileInstance | null>(null);
const form = useFormResendOTP();
const { mutate, isPending, error } = usePostResendOTP(form);
const onSubmit = (values: ResendOTPValidationType) => {
mutate(values);
};
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{error && (
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
{(error as Error).message}
</div>
)}
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="emailmu@mail.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Turnstile
ref={ref}
siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
onSuccess={(token) => form.setValue('token', token)}
options={{
theme: 'light',
size: 'flexible',
language: 'id',
}}
/>
<Button
type="submit"
className="w-full"
disabled={isPending || !form.watch('token')}
>
Kirim Ulang Kode OTP
</Button>
</form>
</Form>
);
}
apps/landing/src/app/(auth)/verification/_components/verification-tabs.tsx
-41
View File
@@ -1,41 +0,0 @@
'use client';
import { cn } from '@utils';
import { useState } from 'react';
import { ResendOTPForm } from './resend-otp-form';
import { VerifyEmailForm } from './verify-email-form';
export function VerificationTabs() {
const [activeTab, setActiveTab] = useState<'form' | 'resend'>('form');
return (
<>
<div className="flex space-x-2 border-b">
<button
className={cn(
'py-2 px-4 w-full',
activeTab === 'form'
? 'border-b-2 border-primary-500 font-semibold'
: 'text-gray-500'
)}
onClick={() => setActiveTab('form')}
>
Verifikasi Email
</button>
<button
className={cn(
'py-2 px-4 w-full',
activeTab === 'resend'
? 'border-b-2 border-primary-500 font-semibold'
: 'text-gray-500'
)}
onClick={() => setActiveTab('resend')}
>
Resend OTP
</button>
</div>
{activeTab === 'form' ? <VerifyEmailForm /> : <ResendOTPForm />}
</>
);
}
apps/landing/src/app/(auth)/verification/_components/verify-email-form.tsx
-77
View File
@@ -1,77 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components';
import { LuLoader } from 'react-icons/lu';
import { useFormVerifyEmail } from '../_hooks/use-form-verify-email';
import { usePostVerifyEmail } from '../_hooks/use-post-verify-email';
import { type VerifyEmailValidationType } from '../_validation/verify-email-validation';
export function VerifyEmailForm() {
const form = useFormVerifyEmail();
const { mutate, isPending, error } = usePostVerifyEmail(form);
const onSubmit = (values: VerifyEmailValidationType) => {
mutate(values);
};
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{error && (
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
{(error as Error).message}
</div>
)}
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="emailmu@mail.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="otp"
render={({ field }) => (
<FormItem>
<FormLabel>OTP</FormLabel>
<FormControl>
<Input placeholder="123456" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
disabled={isPending}
className="w-full hover:bg-[#5fbaef] bg-[#22a5f1] font-bold"
>
{isPending ? (
<LuLoader className="h-5 w-5 animate-spin" />
) : (
'Verifikasi'
)}
</Button>
</form>
</Form>
);
}
apps/landing/src/app/(auth)/verification/_hooks/use-form-resend-otp.ts
-20
View File
@@ -1,20 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import {
resendOTPValidationSchema,
type ResendOTPValidationType,
} from '../_validation/resend-otp-validation';
export function useFormResendOTP() {
const searchParams = useSearchParams();
const email = searchParams.get('ref');
return useForm<ResendOTPValidationType>({
resolver: zodResolver(resendOTPValidationSchema),
defaultValues: {
email: email ?? '',
token: '',
},
});
}
apps/landing/src/app/(auth)/verification/_hooks/use-form-verify-email.ts
-20
View File
@@ -1,20 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import {
verifyEmailValidationSchema,
type VerifyEmailValidationType,
} from '../_validation/verify-email-validation';
export function useFormVerifyEmail() {
const searchParams = useSearchParams();
const email = searchParams.get('ref');
return useForm<VerifyEmailValidationType>({
resolver: zodResolver(verifyEmailValidationSchema),
defaultValues: {
email: email ?? '',
otp: '',
},
});
}
apps/landing/src/app/(auth)/verification/_hooks/use-post-resend-otp.ts
-18
View File
@@ -1,18 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';
import { resendOTPAction } from '../_actions/resend-otp-action';
import { useFormResendOTP } from './use-form-resend-otp';
export function usePostResendOTP(form: ReturnType<typeof useFormResendOTP>) {
return useMutation({
mutationFn: resendOTPAction,
onSuccess: ({ message }) => {
form.reset();
toast.success(message);
},
onError: ({ message }) => {
form.reset();
toast.error(message);
},
});
}
apps/landing/src/app/(auth)/verification/_hooks/use-post-verify-email.ts
-20
View File
@@ -1,20 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { verifyEmailAction } from '../_actions/verify-email-action';
import { useFormVerifyEmail } from './use-form-verify-email';
export function usePostVerifyEmail(
form: ReturnType<typeof useFormVerifyEmail>
) {
const router = useRouter();
return useMutation({
mutationFn: verifyEmailAction,
onSuccess: () => {
router.push('/');
},
onError: () => {
form.resetField('otp');
},
});
}
apps/landing/src/app/(auth)/verification/_http/fetch-post-verify-email.ts
-31
View File
@@ -1,31 +0,0 @@
import { fetcher } from '@/lib/fetcher';
import { VerifyEmailValidationType } from '../_validation/verify-email-validation';
export async function fetchPostVerifyEmail({
email,
otp,
}: VerifyEmailValidationType) {
const formattedOTP = parseInt(otp);
const { data, error, response } = await fetcher.POST(
'/v1/auth/verify-email',
{
body: {
email,
otp: formattedOTP,
},
}
);
if (error) {
throw new Error(error.message);
}
if (!response.ok) {
throw new Error('Something went wrong, please try again later');
}
console.log(data);
return data;
}
apps/landing/src/app/(auth)/verification/_validation/resend-otp-validation.ts
-7
View File
@@ -1,7 +0,0 @@
import { z } from 'zod';
export const resendOTPValidationSchema = z.object({
email: z.string().email({ message: 'Format email tidak valid' }),
token: z.string().min(1, { message: 'OTP harus terdiri dari 1 digit' }),
});
export type ResendOTPValidationType = z.infer<typeof resendOTPValidationSchema>;
apps/landing/src/app/(auth)/verification/_validation/verify-email-validation.ts
-12
View File
@@ -1,12 +0,0 @@
import { z } from 'zod';
export const verifyEmailValidationSchema = z.object({
email: z.string().email({ message: 'Format email tidak valid' }),
otp: z
.string()
.min(6, { message: 'OTP harus terdiri dari 6 digit' })
.max(6, { message: 'OTP harus terdiri dari 6 digit' }),
});
export type VerifyEmailValidationType = z.infer<
typeof verifyEmailValidationSchema
>;
apps/landing/src/app/(auth)/verification/page.tsx
-21
View File
@@ -1,21 +0,0 @@
import { Suspense } from 'react';
import { LogoSimple } from '../../_components/logo';
import { VerificationTabs } from './_components/verification-tabs';
export default function Page() {
return (
<>
<div className="flex flex-col items-center gap-4">
<LogoSimple />
<p className="text-muted-foreground text-center text-sm sm:text-base">
Verifikasi akun mu sekarang
</p>
</div>
<Suspense>
<VerificationTabs />
</Suspense>
</>
);
}
apps/landing/src/app/(public)/_components/header.tsx
+1 -46
View File
@@ -2,16 +2,14 @@
import { LogoSimple } from '@/app/_components/logo';
import NAVIGATIONS from '@/data/navigations.json';
import { Button } from '@components';
import { cn } from '@utils';
import { AnimatePresence, motion } from 'framer-motion';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { LuMenu, LuX } from 'react-icons/lu';
export function Header() {
const router = useRouter();
const pathname = usePathname();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -61,22 +59,6 @@ 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>
</div>
<button
onClick={() => setMobileMenuOpen((prev) => !prev)}
className="flex md:hidden relative z-50 p-2 rounded-lg hover:bg-muted transition-colors"
@@ -137,33 +119,6 @@ export function Header() {
</Link>
))}
</motion.nav>
<motion.div
className="container space-y-4 pb-10"
initial={{ y: 20, opacity: 0 }}
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>
</motion.div>
</motion.div>
)}
</AnimatePresence>
apps/landing/src/app/(public)/hackathon/page.tsx
+133 -53
View File
@@ -1,78 +1,158 @@
'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 { useEffect, useState } from 'react';
import { HiOutlineCode, HiOutlineTrophy } from 'react-icons/hi';
import { motion } from 'framer-motion';
export default function HackathonsPage() {
const sortedHackathons = [...hackathons];
interface TeamItem {
id: string;
name: string;
description: string;
city: string;
logo: string | null;
banner: string | null;
}
if (sortedHackathons.length === 0) {
interface WinnerItem {
id: string;
team_id: string;
team_name: string;
rank: number;
prize: string | null;
}
export default function HackathonsPage() {
const [teams, setTeams] = useState<TeamItem[]>([]);
const [winners, setWinners] = useState<WinnerItem[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
Promise.all([
fetch('https://api.imphnen.dev/v1/hackathon/teams/browse?per_page=20')
.then((r) => r.json())
.then((j) => j.data?.data || [])
.catch(() => []),
fetch('https://api.imphnen.dev/v1/hackathon/winners')
.then((r) => r.json())
.then((j) => j.data || [])
.catch(() => []),
]).then(([t, w]) => {
setTeams(t);
setWinners(w);
setLoading(false);
});
}, []);
const getWinnerRank = (teamId: string) => {
const w = winners.find((x) => x.team_id === teamId);
return w ? w.rank : null;
};
if (loading) {
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>
<div className="w-8 h-8 border-3 border-gray-200 border-t-primary-500 rounded-full animate-spin" />
</section>
);
}
if (teams.length === 0) {
return (
<section className="min-h-screen bg-background container py-10 flex items-center justify-center">
<div className="text-center">
<p className="text-muted-foreground text-lg mb-2">No hackathon teams yet.</p>
<a href="https://hackathon.imphnen.dev" className={cn(buttonVariants(), 'mt-4')}>
Join Hackathon
</a>
</div>
</section>
);
}
return (
<section className="min-h-screen bg-background container py-10">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold mb-3 text-foreground">IMPHNEN Hackathon</h1>
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
Tim-tim yang berpartisipasi dalam hackathon IMPHNEN
</p>
</div>
{winners.length > 0 && (
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 text-foreground flex items-center gap-2">
<HiOutlineTrophy className="text-amber-500" /> Pemenang
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{winners.sort((a, b) => a.rank - b.rank).map((w) => (
<div key={w.id} className="bg-amber-50 border-2 border-amber-200 rounded-xl p-6 text-center">
<div className="text-4xl mb-2">{w.rank === 1 ? '🥇' : w.rank === 2 ? '🥈' : '🥉'}</div>
<h3 className="text-lg font-bold text-gray-900">{w.team_name}</h3>
<p className="text-sm text-amber-700 mt-1">Juara {w.rank}</p>
{w.prize && <p className="text-xs text-amber-600 mt-1">{w.prize}</p>}
</div>
))}
</div>
</div>
)}
<h2 className="text-2xl font-bold mb-6 text-foreground">Semua Tim</h2>
<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 } },
}}
variants={{ visible: { transition: { staggerChildren: 0.08 } } }}
>
{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"
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>
{teams.map((team, idx) => {
const rank = getWinnerRank(team.id);
return (
<motion.div
key={team.id}
className={cn(
'rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 bg-card group overflow-hidden',
rank ? 'ring-2 ring-amber-300' : ''
)}
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: idx * 0.06 }}
>
{team.banner ? (
<div className="h-40 bg-muted relative overflow-hidden">
<img src={team.banner} alt={team.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</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'
) : (
<div className="h-40 bg-gradient-to-br from-primary-100 to-primary-200 flex items-center justify-center">
<HiOutlineCode className="w-12 h-12 text-primary-400" />
</div>
)}
<div className="p-6">
<div className="flex items-start justify-between mb-2">
<h3 className="text-lg font-semibold text-foreground">{team.name}</h3>
{rank && (
<span className="text-xs bg-amber-100 text-amber-700 px-2 py-1 rounded-full font-medium">
Juara {rank}
</span>
)}
</div>
{team.city && (
<p className="text-xs text-muted-foreground mb-2">{team.city}</p>
)}
>
Lihat Proyek
</a>
</div>
</motion.div>
))}
{team.description && (
<p className="text-muted-foreground text-sm mb-4 line-clamp-3">{team.description}</p>
)}
<a
href={`https://hackathon.imphnen.dev/teams/${team.id}`}
target="_blank"
className={cn(buttonVariants({ variant: 'bordered' }), 'w-full text-sm')}
>
Lihat Tim
</a>
</div>
</motion.div>
);
})}
</motion.div>
</section>
);
apps/landing/src/app/(public)/roadmap/_components/projects-vote.tsx
+77 -63
View File
@@ -2,64 +2,63 @@
import { Button, Card, CardContent, CardHeader, CardTitle } from '@components';
import { AnimatePresence, motion } from 'framer-motion';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { BiUpvote } from 'react-icons/bi';
import { FiCheckCircle } from 'react-icons/fi';
import { MdOutlineOpenInNew } from 'react-icons/md';
interface RoadmapItem {
id: string;
title: string;
description: string;
status: 'upcoming' | 'in_progress' | 'completed';
votes: number;
created_at: string;
}
export default function ProjectsVote() {
const [upcomingItems, setUpcomingItems] = useState([
{
title: 'IMPHNEN Project Showcase',
description: 'Showcase projectmu ke member lain dan dapatkan feedback',
votes: 42,
voted: false,
},
{
title: 'IMPHNEN Meme Generator',
description: 'Bikin meme kocak kapanpun dengan mudah',
votes: 42,
voted: false,
},
]);
const [items, setItems] = useState<RoadmapItem[]>([]);
const [loading, setLoading] = useState(true);
const [votedIds, setVotedIds] = useState<Set<string>>(new Set());
const inProgressItems = [
{
title: 'IMPHNEN Twibbon',
description: 'Buat Twibbon kece untuk profile media sosialmu',
},
{
title: 'IMPHNEN Certificate',
description: 'Cetak sertifikat keren secara instan untuk anggota IMPHNEN',
},
];
useEffect(() => {
fetch('https://api.imphnen.dev/v1/landing/cms/roadmap')
.then((r) => r.json())
.then((json) => {
setItems(json.data || []);
})
.catch(() => {})
.finally(() => setLoading(false));
}, []);
const completedItems = [
{
title: 'IMPHNEN List Event',
description:
'Koleksi daftar event dan kolaborasi seru yang bisa kamu ikuti',
},
{
title: 'IMPHNEN Testimoni',
description: 'Berikan testimonial gokil buat komunitas IMPHNEN',
},
{
title: 'IMPHNEN Roadmap by Vote',
description: 'Usulkan ide fitur seru dan ajak anggota lain buat voting',
},
];
const upcomingItems = items.filter((i) => i.status === 'upcoming');
const inProgressItems = items.filter((i) => i.status === 'in_progress');
const completedItems = items.filter((i) => i.status === 'completed');
const handleVote = (index: number) => {
const newItems = [...upcomingItems];
newItems[index] = {
...newItems[index],
votes: newItems[index].voted
? newItems[index].votes - 1
: newItems[index].votes + 1,
voted: !newItems[index].voted,
};
setUpcomingItems(newItems);
const handleVote = (id: string) => {
const alreadyVoted = votedIds.has(id);
// Optimistic update
setItems((prev) =>
prev.map((item) =>
item.id === id
? { ...item, votes: item.votes + (alreadyVoted ? -1 : 1) }
: item
)
);
if (alreadyVoted) {
setVotedIds((prev) => {
const next = new Set(prev);
next.delete(id);
return next;
});
} else {
setVotedIds((prev) => new Set(prev).add(id));
fetch(`https://api.imphnen.dev/v1/landing/cms/roadmap/vote/${id}`, {
method: 'POST',
}).catch(() => {});
}
};
const containerVariants = {
@@ -77,6 +76,14 @@ export default function ProjectsVote() {
visible: { opacity: 1, y: 0, transition: { duration: 0.2 } },
};
if (loading) {
return (
<div className="flex items-center justify-center py-20">
<div className="w-8 h-8 border-3 border-gray-200 border-t-primary-500 rounded-full animate-spin" />
</div>
);
}
return (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
@@ -95,8 +102,8 @@ export default function ProjectsVote() {
animate="visible"
className="space-y-5"
>
{upcomingItems.map((item, index) => (
<motion.div key={index} variants={itemVariants} layout>
{upcomingItems.map((item) => (
<motion.div key={item.id} variants={itemVariants} layout>
<Card className="bg-white border border-gray-200 hover:border-primary-200 shadow-sm hover:shadow-md transition-all h-full flex flex-col">
<CardHeader className="pb-3">
<CardTitle className="text-lg font-semibold text-gray-900 flex items-start">
@@ -110,24 +117,24 @@ export default function ProjectsVote() {
<div className="flex items-center justify-between border-t border-gray-100 pt-3">
<motion.button
whileTap={{ scale: 0.95 }}
onClick={() => handleVote(index)}
onClick={() => handleVote(item.id)}
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
item.voted
votedIds.has(item.id)
? 'bg-primary-500 text-white hover:bg-primary-600'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
<motion.span
animate={{ scale: item.voted ? [1, 1.2, 1] : 1 }}
animate={{ scale: votedIds.has(item.id) ? [1, 1.2, 1] : 1 }}
transition={{ duration: 0.2 }}
>
<BiUpvote
className={`w-4 h-4 ${
item.voted ? 'text-white' : 'text-gray-600'
votedIds.has(item.id) ? 'text-white' : 'text-gray-600'
}`}
/>
</motion.span>
<span>{item.voted ? 'Voted' : 'Vote'}</span>
<span>{votedIds.has(item.id) ? 'Voted' : 'Vote'}</span>
</motion.button>
<div className="flex items-center gap-2 bg-gray-50 px-3 py-1.5 rounded-lg">
<BiUpvote className="w-4 h-4 text-gray-500" />
@@ -140,6 +147,9 @@ export default function ProjectsVote() {
</Card>
</motion.div>
))}
{upcomingItems.length === 0 && (
<p className="text-gray-500 text-sm px-2">No upcoming items yet.</p>
)}
</motion.div>
</AnimatePresence>
</div>
@@ -160,7 +170,7 @@ export default function ProjectsVote() {
className="space-y-5"
>
{inProgressItems.map((item, index) => (
<motion.div key={index} variants={itemVariants} layout>
<motion.div key={item.id} variants={itemVariants} layout>
<Card className="bg-white border border-gray-200 hover:border-primary-200 shadow-sm hover:shadow-md transition-all h-full">
<CardHeader className="pb-3">
<CardTitle className="text-lg font-semibold text-gray-900 flex items-start">
@@ -176,14 +186,15 @@ export default function ProjectsVote() {
style={{ width: `${(index + 1) * 33}%` }}
></div>
</div>
<p className="text-xs text-gray-500 mt-2">
{index === 0 ? 'Development started' : 'In development'}
</p>
<p className="text-xs text-gray-500 mt-2">In development</p>
</div>
</CardContent>
</Card>
</motion.div>
))}
{inProgressItems.length === 0 && (
<p className="text-gray-500 text-sm px-2">Nothing in progress.</p>
)}
</motion.div>
</AnimatePresence>
</div>
@@ -203,8 +214,8 @@ export default function ProjectsVote() {
animate="visible"
className="space-y-5"
>
{completedItems.map((item, index) => (
<motion.div key={index} variants={itemVariants} layout>
{completedItems.map((item) => (
<motion.div key={item.id} variants={itemVariants} layout>
<Card className="bg-white border border-gray-200 hover:border-green-200 shadow-sm hover:shadow-md transition-all h-full">
<CardHeader className="pb-3">
<CardTitle className="text-lg font-semibold text-gray-900 flex items-start">
@@ -229,6 +240,9 @@ export default function ProjectsVote() {
</Card>
</motion.div>
))}
{completedItems.length === 0 && (
<p className="text-gray-500 text-sm px-2">No completed items yet.</p>
)}
</motion.div>
</AnimatePresence>
</div>
apps/landing/src/data/events.json
-46
View File
File diff suppressed because one or more lines are too long
apps/landing/src/data/hackathons.json
-178
View File
File diff suppressed because one or more lines are too long
apps/landing/src/data/hero-stats.json
+2 -2
View File
@@ -1,5 +1,5 @@
[
{ "value": "250K+", "label": "Member" },
{ "value": "500+", "label": "Meme Harian" },
{ "value": "24/7", "label": "Yapping" }
{ "value": "7", "label": "Platform" },
{ "value": "24/7", "label": "Community" }
]
apps/landing/src/data/testimonials.json
-44
View File
@@ -1,44 +0,0 @@
[
{
"id": 1,
"name": "Andi Pratama",
"role": "Backend Developer",
"text": "Komunitas ini sangat membantu perkembangan karir saya. Saya bisa belajar teknologi terbaru dan berkolaborasi dengan developer lain.",
"image": "https://picsum.photos/100/100?random=1"
},
{
"id": 2,
"name": "Sarah Wijaya",
"role": "Frontend Engineer",
"text": "Acara sharing session-nya sangat inspiratif. Saya jadi termotivasi untuk terus mengembangkan skill di bidang frontend development.",
"image": "https://picsum.photos/100/100?random=2"
},
{
"id": 3,
"name": "Rizal Fauzi",
"role": "Fullstack Developer",
"text": "Bergabung di komunitas ini membuka banyak kesempatan networking dan project menarik. Sangat recommended untuk developer semua level!",
"image": "https://picsum.photos/100/100?random=5"
},
{
"id": 4,
"name": "Dewi Lestari",
"role": "Mobile Developer",
"text": "Materi workshop-nya praktis dan langsung applicable. Mentor-mentornya juga berpengalaman di industri.",
"image": "https://picsum.photos/100/100?random=9"
},
{
"id": 5,
"name": "Fajar Setiawan",
"role": "DevOps Engineer",
"text": "Komunitas yang solid dan saling support. Tidak pernah ragu untuk bertanya karena semua anggota sangat responsif.",
"image": "https://picsum.photos/100/100?random=10"
},
{
"id": 6,
"name": "Budi Santoso",
"role": "UI/UX Designer",
"text": "Kolaborasi antara designer dan developer di komunitas ini sangat smooth. Banyak belajar best practices untuk workflow yang lebih baik.",
"image": "https://picsum.photos/100/100?random=6"
}
]