Compare commits

..
Author SHA1 Message Date
ArraysID a84e2fc31a fix: remove mistakenly added env from test-build workflow 2025-05-11 05:53:31 +07:00
ArraysID 6e1c561387 Merge branch 'feat/landing-cms' of https://github.com/IMPHNEN/imphnen-frontend-service into feat/landing-cms 2025-05-11 05:36:24 +07:00
ArraysID b39e918b3c fix: remove unused environment variables from test build workflow 2025-05-11 05:32:55 +07:00
ArraysID 0a217341a5 chore: add environment placeholder variables for CMS configuration in test build workflow 2025-05-11 05:32:55 +07:00
ArraysID f1f72402b2 fix: add placeholder to .env.example 2025-05-11 05:32:55 +07:00
ArraysID 3f1b2a2bd7 fix: supress scss deps warning 2025-05-11 05:32:55 +07:00
ArraysID 57b27c6784 feat: wrap logo image in a link to navigate to the homepage 2025-05-11 05:32:55 +07:00
ArraysID f191ffc4b1 feat: update button components to use onClick for external links and improve styling 2025-05-11 05:32:25 +07:00
ArraysID 31e4ffae92 feat: update CallToActionSection label and wrap Discord button in link 2025-05-11 05:29:34 +07:00
ArraysID c9f7ce24ed feat: implement CallToAction section with dynamic data fetching and UI integration 2025-05-11 05:29:01 +07:00
ArraysID d21adebf73 feat: simplify joinTitle rendering in Testimonials section 2025-05-11 05:28:20 +07:00
ArraysID 744d39ea75 feat: implement Testimonials section with dynamic data fetching and UI integration 2025-05-11 05:28:20 +07:00
ArraysID da11ba5894 refactor: reorganize layout structure by moving Header and Footer components to RootLayout 2025-05-11 05:27:19 +07:00
ArraysID 6d29c81dad feat: enhance LearningResourcesSection with primary and secondary button links 2025-05-11 05:26:07 +07:00
ArraysID 4a7135dd17 feat: add Learning Resources section with dynamic data fetching and UI integration 2025-05-11 05:24:31 +07:00
ArraysID 33d750b221 feat: add heroImage field to HeroSection and implement image formatting utility 2025-05-11 05:24:31 +07:00
ArraysID 1f9aa2e6b3 feat: update FeaturesSection to use Iconify icons and adjust icon properties 2025-05-11 05:24:31 +07:00
ArraysID 7722c98c84 feat: replace Link component with Button for improved button styling in Community component 2025-05-11 05:24:31 +07:00
ArraysID 0914361635 feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration 2025-05-11 05:24:31 +07:00
ArraysID 74aabd1eba feat: add support for s3 bucket for media 2025-05-11 05:24:31 +07:00
ArraysID d1fc7a8fd5 refactor: move global section functions to services directory 2025-05-11 05:24:31 +07:00
ArraysID 009cabfc1c feat: add CommunitiesSection configuration and integrate with Community component 2025-05-11 05:24:31 +07:00
ArraysID a7f7521761 fix: update revalidation interval to 10 seconds 2025-05-11 05:24:31 +07:00
ArraysID 54b7a2f0eb refactor: optimize data fetching by using Promise.all 2025-05-11 05:24:31 +07:00
ArraysID ef042f2f40 feat: add revalidate constant to control page revalidation interval 2025-05-11 05:24:31 +07:00
ArraysID fd35cb9525 feat: add FeaturesSection global configuration and integrate with Features component 2025-05-11 05:24:31 +07:00
ArraysID 18d11fd1c3 feat: implement HeroSection global configuration and integrate with Hero component 2025-05-11 05:24:31 +07:00
ArraysID c82d9bcc70 fix: include withPayload in Next.js plugins for proper configuration 2025-05-11 05:24:31 +07:00
ArraysID a4dd793bb7 refactor: update config import paths to use local payload.config 2025-05-11 05:24:31 +07:00
ArraysID bba3c89b23 fix: update TypeScript paths for payload configuration 2025-05-11 05:24:31 +07:00
ArraysID 8b6aa21f82 feat: add payload configuration and update TypeScript target 2025-05-11 05:24:31 +07:00
ArraysID 0fffe2d403 feat: integrate payload cms to landing page 2025-05-11 05:24:09 +07:00
ArraysID 919fac811d fix: remove unused environment variables from test build workflow 2025-05-10 17:07:51 +07:00
ArraysID 4316dcf8b3 chore: add environment placeholder variables for CMS configuration in test build workflow 2025-05-10 17:04:33 +07:00
ArraysID b9b71c4c25 fix: add placeholder to .env.example 2025-05-10 16:50:26 +07:00
ArraysID 121faf89c3 fix: supress scss deps warning 2025-05-10 16:26:32 +07:00
ArraysID 07913efb16 Merge branch 'develop' into feat/landing-cms 2025-05-10 16:01:05 +07:00
ArraysID 4b2733511c feat: wrap logo image in a link to navigate to the homepage 2025-05-10 15:50:42 +07:00
ArraysID 9f3d00a0db feat: update button components to use onClick for external links and improve styling 2025-05-10 15:48:35 +07:00
ArraysID 7ac571c019 feat: update CallToActionSection label and wrap Discord button in link 2025-05-10 15:34:18 +07:00
ArraysID a8c958400d feat: implement CallToAction section with dynamic data fetching and UI integration 2025-05-10 15:19:54 +07:00
ArraysID 760ab67ae0 feat: simplify joinTitle rendering in Testimonials section 2025-05-10 14:56:07 +07:00
ArraysID c4cf9e4e6c feat: implement Testimonials section with dynamic data fetching and UI integration 2025-05-10 14:52:35 +07:00
ArraysID a800b1e293 refactor: reorganize layout structure by moving Header and Footer components to RootLayout 2025-05-10 13:20:43 +07:00
ArraysID da0e599b9a feat: enhance LearningResourcesSection with primary and secondary button links 2025-05-10 12:58:34 +07:00
ArraysID a02a259f4e feat: add Learning Resources section with dynamic data fetching and UI integration 2025-05-10 12:48:07 +07:00
ArraysID ff99564b05 feat: add heroImage field to HeroSection and implement image formatting utility 2025-05-10 08:54:45 +07:00
ArraysID 13ab089afc feat: update FeaturesSection to use Iconify icons and adjust icon properties 2025-05-10 07:45:29 +07:00
ArraysID 378e258520 feat: replace Link component with Button for improved button styling in Community component 2025-05-10 07:30:06 +07:00
ArraysID 88468081b6 feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration 2025-05-10 07:26:38 +07:00
ArraysID aba462e462 feat: add support for s3 bucket for media 2025-05-10 06:55:11 +07:00
ArraysID 55fd1fa443 refactor: move global section functions to services directory 2025-05-10 05:38:01 +07:00
ArraysID 07a1eb8dbc feat: add CommunitiesSection configuration and integrate with Community component 2025-05-10 05:35:24 +07:00
ArraysID aad04b6f94 fix: update revalidation interval to 10 seconds 2025-05-10 04:33:06 +07:00
ArraysID d4a91abb63 refactor: optimize data fetching by using Promise.all 2025-05-10 04:29:46 +07:00
ArraysID 7fd5528c0d feat: add revalidate constant to control page revalidation interval 2025-05-10 04:29:28 +07:00
ArraysID 39a57b4fed feat: add FeaturesSection global configuration and integrate with Features component 2025-05-10 04:08:37 +07:00
ArraysID 7b490702b9 feat: implement HeroSection global configuration and integrate with Hero component 2025-05-10 03:32:19 +07:00
ArraysID f31aad8570 fix: include withPayload in Next.js plugins for proper configuration 2025-05-08 16:07:51 +07:00
ArraysID acb7f4aef9 fix: update quotation marks for testimonials to use HTML entities 2025-05-08 15:42:24 +07:00
ArraysID c69614531b refactor: update config import paths to use local payload.config 2025-05-08 15:39:21 +07:00
ArraysID c82426282c fix: update TypeScript paths for payload configuration 2025-05-08 15:24:44 +07:00
ArraysID 45295953aa feat: add payload configuration and update TypeScript target 2025-05-08 15:16:59 +07:00
ArraysID 0561555276 feat: integrate payload cms to landing page 2025-05-08 15:12:32 +07:00
98 changed files with 474 additions and 6117 deletions
-6
View File
@@ -62,9 +62,3 @@ storybook-static
# Next.js
.next
out
.cursor/rules/nx-rules.mdc
.github/instructions/nx.instructions.md
.cursor/rules/nx-rules.mdc
.github/instructions/nx.instructions.md
Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

@@ -1,86 +0,0 @@
'use client';
import { motion } from 'framer-motion';
import { useEffect, useMemo, useState } from 'react';
import {
SiCplusplus,
SiCss3,
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: SiCss3, 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>
);
}
@@ -1,19 +0,0 @@
import { Card } from '@components/atoms';
import { ReactNode } from 'react';
import { AnimatedBackground } from './_components/animated-background';
export default function Layout({ children }: { children: ReactNode }) {
return (
<div 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>
);
}
@@ -1,24 +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) {
console.log(request);
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;
}
@@ -1,73 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components/atoms';
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 />
</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" /> : 'Masuk'}
</Button>
</form>
</Form>
);
}
@@ -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: '',
},
});
}
@@ -1,18 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
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: () => {
form.resetField('password');
},
});
}
@@ -1,24 +0,0 @@
import { fetcher } from '@/lib/openapi';
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;
}
@@ -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>;
@@ -1,38 +0,0 @@
import { Metadata } from 'next';
import Link from 'next/link';
import { LogoSimple } from '../../_components/logo';
import { SigninForm } from './_components/signin-form';
export const metadata: Metadata = {
title: 'IMPHNEN - Signin',
description:
'Komunitas Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
};
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="text-[#22a5f1] font-bold hover:underline hover:underline-offset-4 transition-colors"
>
Daftar
</Link>
</p>
</div>
</>
);
}
@@ -1,15 +0,0 @@
'use server';
import { z } from 'zod';
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 data = await fetchPostSignin({ ...validRequest });
return data;
}
@@ -1,267 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components/atoms';
import { zodResolver } from '@hookform/resolvers/zod';
import { Turnstile } from '@marsidev/react-turnstile';
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { 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 [step, setStep] = useState(1);
const [stepOneData, setStepOneData] = useState<z.infer<
typeof stepOneSignupValidationSchema
> | null>(null);
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: () => {
secondForm.reset();
},
});
const firstForm = useForm<z.infer<typeof stepOneSignupValidationSchema>>({
resolver: zodResolver(stepOneSignupValidationSchema),
defaultValues: {
email: '',
fullname: '',
password: '',
confirm_password: '',
},
});
const secondForm = useForm<z.infer<typeof stepTwoSignupValidationSchema>>({
resolver: zodResolver(stepTwoSignupValidationSchema),
defaultValues: {
phone_number: '',
referral_code: '',
referred_by: '',
student_type: '',
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="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>
)}
<FormField
control={secondForm.control}
name="phone_number"
render={({ field }) => (
<FormItem>
<FormLabel>Nomor Telepon</FormLabel>
<FormControl>
<Input placeholder="081234567890" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex gap-x-4">
<FormField
control={secondForm.control}
name="referral_code"
render={({ field }) => (
<FormItem>
<FormLabel>Kode Referral</FormLabel>
<FormControl>
<Input placeholder="ABCD" maxLength={4} {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={secondForm.control}
name="referred_by"
render={({ field }) => (
<FormItem>
<FormLabel>Referrer</FormLabel>
<FormControl>
<Input placeholder="Referral ID" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={secondForm.control}
name="student_type"
render={({ field }) => (
<FormItem>
<FormLabel>Status</FormLabel>
<FormControl>
<Input placeholder="e.g., Undergraduate" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Turnstile
siteKey="1x00000000000000000000AA"
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')}
className="flex items-center gap-2 hover:bg-[#5fbaef] bg-[#22a5f1]"
>
{isPending ? (
<LuLoader className="h-5 w-5 animate-spin" />
) : (
'Daftar'
)}
</Button>
</div>
</form>
</Form>
)}
</>
);
}
@@ -1,34 +0,0 @@
import { fetcher } from '@/lib/openapi';
import { SignupValidationSchema } from '../_validation/signup-validation';
export async function fetchPostSignin({
email,
password,
fullname,
phone_number,
student_type,
referral_code,
referred_by,
}: SignupValidationSchema) {
const { data, error, response } = await fetcher.POST('/v1/auth/register', {
body: {
email,
password,
fullname,
phone_number,
student_type,
referral_code,
referred_by,
},
});
if (error) {
throw new Error(error.message);
}
if (!response.ok) {
throw new Error('Someting went wrong, please try again later');
}
return data;
}
@@ -1,76 +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(1, 'Password tidak boleh kosong')
.min(8, 'Password harus lebih dari 8 karakter')
.max(50, 'Password tidak boleh lebih dari 50 karakter')
.regex(
/(?=.*[A-Z])/,
'Password harus mengandung setidaknya satu huruf kapital'
)
.regex(
/(?=.*[a-z])/,
'Password harus mengandung setidaknya satu huruf kecil'
)
.regex(/(?=.*\d)/, 'Password harus mengandung setidaknya satu angka')
.regex(
/(?=.*[!@#$%^&*()_\-+={}[\]|\\:;"'<>,.?/~`])/,
'Password harus mengandung setidaknya satu karakter spesial'
),
confirm_password: z
.string({
required_error: 'Konfirmasi password tidak boleh kosong',
})
.min(1, 'Konfirmasi password tidak boleh kosong')
.max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
})
.refine((data) => data.password === data.confirm_password, {
message: 'Password dan Konfirmasi Password harus sama',
path: ['confirm_password'],
});
export const stepTwoSignupValidationSchema = z.object({
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'),
referral_code: z
.string()
.max(4, 'Kode referral tidak boleh lebih dari 4 karakter')
.optional(),
referred_by: z
.string()
.max(50, 'Kode referral tidak boleh lebih dari 50 karakter')
.optional(),
student_type: z.string(),
token: z.string(),
});
export const signupValidationSchema = stepOneSignupValidationSchema.and(
stepTwoSignupValidationSchema
);
export type SignupValidationSchema = z.infer<typeof signupValidationSchema>
@@ -1,18 +0,0 @@
import { LogoSimple } from '../../_components/logo';
import { SignupForm } from './_components/signup-form';
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 />
</>
);
}
@@ -1,15 +0,0 @@
'use server';
import { fetcher } from '@/lib/openapi';
export async function resendOTPAction(email: string) {
const data = await fetcher.POST('/v1/auth/send-otp', {
body: {
email,
},
});
console.log(data);
return data;
}
@@ -1,15 +0,0 @@
'use server';
import { fetchPostVerifyEmail } from '../_http/fetch-post-verify-email';
import {
type VerifyEmailValidationType,
verifyEmailSchema,
} from '../_validation/verify-email-validation';
export async function verifyEmailAction(request: VerifyEmailValidationType) {
const validRequest = verifyEmailSchema.parse(request);
const data = await fetchPostVerifyEmail(validRequest);
return data;
}
@@ -1,16 +0,0 @@
'use client';
import { Button } from '@components/atoms';
import { usePostResendOTP } from '../_hooks/use-post-resend-otp';
export function ButtonResendOTP({ email }: { email: string }) {
const { mutate } = usePostResendOTP();
const handleResendOTP = () => mutate(email);
return (
<Button onClick={handleResendOTP} className="w-full -mt-2">
Kirim Ulang Kode OTP
</Button>
);
}
@@ -1,80 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components/atoms';
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';
import { ButtonResendOTP } from './button-resend-otp';
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>
<ButtonResendOTP email={form.watch('email')} />
</Form>
);
}
@@ -1,20 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import {
verifyEmailSchema,
type VerifyEmailValidationType,
} from '../_validation/verify-email-validation';
export function useFormVerifyEmail() {
const searchParams = useSearchParams();
const email = searchParams.get('ref');
return useForm<VerifyEmailValidationType>({
resolver: zodResolver(verifyEmailSchema),
defaultValues: {
email: email ?? '',
otp: '',
},
});
}
@@ -1,12 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { resendOTPAction } from '../_actions/resend-otp-action';
export function usePostResendOTP() {
const router = useRouter();
return useMutation({
mutationFn: resendOTPAction,
onSuccess: () => router.replace('/verification?success=true'),
});
}
@@ -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('/feedback');
},
onError: () => {
form.resetField('otp');
},
});
}
@@ -1,31 +0,0 @@
import { fetcher } from '@/lib/openapi';
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;
}
@@ -1,10 +0,0 @@
import { z } from 'zod';
export const verifyEmailSchema = 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 verifyEmailSchema>;
@@ -1,18 +0,0 @@
import { LogoSimple } from '../../_components/logo';
import { VerifyEmailForm } from './_components/verify-email-form';
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>
<VerifyEmailForm />
</>
);
}
@@ -1,71 +0,0 @@
'use client';
import { Button } from '@components/atoms';
import { motion, useInView } from 'framer-motion';
import { useRouter } from 'next/navigation';
import { useRef } from 'react';
export function CallToAction() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
const router = useRouter();
return (
<section className="w-full py-20 md:py-32 relative overflow-hidden">
{/* Background Elements */}
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-b from-background to-primary/20" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.2),transparent_70%)]" />
</div>
<div className="container px-4 md:px-6" ref={ref}>
<motion.div
className="max-w-4xl mx-auto rounded-2xl overflow-hidden border shadow-lg"
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.5 }}
>
<div className="relative p-8 md:p-12 lg:p-16 bg-background">
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5" />
<div className="relative z-10 text-center">
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
Siap Menjadi{' '}
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
Programmer Handal?
</span>
</h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai
perjalanan programming mu dengan cara yang menyenangkan!
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg"
onClick={() => router.push('#community')}
>
Gabung Komunitas
</Button>
<Button
size="lg"
variant="outline"
className="border-primary hover:bg-primary/10"
onClick={() => router.push('/events')}
>
Explore Event
</Button>
</div>
</div>
{/* Decorative Elements */}
<div className="absolute -top-12 -left-12 w-24 h-24 rounded-full bg-primary/10 blur-2xl" />
<div className="absolute -bottom-12 -right-12 w-24 h-24 rounded-full bg-blue-400/10 blur-2xl" />
</div>
</motion.div>
</div>
</section>
);
}
@@ -1,247 +0,0 @@
'use client';
import { Button } from '@components/atoms';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import {
FaDiscord,
FaFacebook,
FaInstagram,
FaLinkedin,
FaTiktok,
} from 'react-icons/fa';
export function Communities() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
const communities = [
{
icon: FaFacebook,
title: 'Facebook Group',
description:
'Komunitas aktif dengan 180K+ anggota berdiskusi seputar programming dan sharing meme',
buttonText: 'Gabung Sekarang',
buttonLink: 'https://facebook.com/groups/programmerhandal',
},
{
icon: FaDiscord,
title: 'Discord Server',
description:
'Diskusi real-time dengan developer berbagai level, mulai dari pemula sampai expert!',
buttonText: 'Join Server',
buttonLink: 'https://discord.com/invite/imphnen',
},
{
icon: FaInstagram,
title: 'Instagram',
description:
'Temukan visual tutorial coding & tech trends terkini setiap harinya',
buttonText: 'Follow Kami',
buttonLink: 'https://www.instagram.com/imphnen.dev',
},
{
icon: FaTiktok,
title: 'TikTok',
description:
'Tips coding singkat & trik development praktis dalam 60 detik',
buttonText: 'Follow Sekarang',
buttonLink: 'https://www.tiktok.com/@imphnen',
},
{
icon: FaLinkedin,
title: 'LinkedIn',
description:
'Bangun jaringan profesional dengan perusahaan teknologi ternama & recruiter IT',
buttonText: 'Segera Hadir',
buttonLink: '#',
},
];
const stats = [
{ value: '180K+', label: 'Komunitas Aktif' },
{ value: '25K+', label: 'Postingan/Bulan' },
{ value: '95%', label: 'Respon Cepat' },
{ value: '10K+', label: 'Problem Solved' },
];
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.15,
delayChildren: 0.2,
},
},
};
const cardVariants = {
hidden: { y: 40, opacity: 0, scale: 0.95 },
visible: {
y: 0,
opacity: 1,
scale: 1,
transition: {
type: 'spring',
stiffness: 100,
damping: 20,
},
},
};
const statVariants = {
hidden: { opacity: 0, y: 20 },
visible: (i: number) => ({
opacity: 1,
y: 0,
transition: {
delay: i * 0.1 + 0.5,
duration: 0.6,
},
}),
};
return (
<section
id="community"
className="w-full py-20 md:py-32 relative overflow-hidden container"
>
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background" />
<div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-primary/5 to-transparent blur-3xl" />
<div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-primary/5 to-transparent blur-3xl" />
</div>
<div className="w-full px-4 md:px-6 lg:px-0" ref={ref}>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
>
<h2 className="text-4xl font-bold tracking-tighter md:text-5xl/tight lg:text-6xl text-center mb-6">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
Komunitas Programmer
</span>{' '}
<br className="hidden md:block" />
Terbesar di Indonesia
</h2>
<p className="max-w-4xl mx-auto text-muted-foreground text-center md:text-xl text-balance">
Bergabung dengan jaringan developer profesional untuk berkolaborasi,
belajar, dan berkembang bersama komunitas yang aktif dan suportif
</p>
</motion.div>
{/* First Row - Facebook & Discord */}
<motion.div
className="grid gap-4 grid-cols-1 md:grid-cols-2 w-full mt-16"
variants={containerVariants}
initial="hidden"
animate={isInView ? 'visible' : 'hidden'}
>
{communities.slice(0, 2).map((community, index) => (
<motion.div
key={index}
variants={cardVariants}
className="group relative overflow-hidden rounded-2xl border bg-background p-8 hover:shadow-xl transition-shadow h-full"
whileHover={{
y: -5,
transition: { duration: 0.2 },
}}
>
<div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary to-primary/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<div className="relative z-10">
<div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
<community.icon className="h-7 w-7 text-primary" />
</div>
<h3 className="mb-4 text-2xl font-bold">{community.title}</h3>
<p className="mb-8 text-muted-foreground text-lg">
{community.description}
</p>
<Button
variant="outline"
className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 text-base h-12"
onClick={() => window.open(community.buttonLink, '_blank')}
>
{community.buttonText}
</Button>
</div>
<div className="absolute -bottom-40 -right-40 w-80 h-80 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-20 group-hover:-translate-x-20" />
</motion.div>
))}
</motion.div>
{/* Second Row - Instagram, TikTok, LinkedIn */}
<motion.div
className="grid gap-4 grid-cols-1 md:grid-cols-3 w-full mt-8"
variants={containerVariants}
initial="hidden"
animate={isInView ? 'visible' : 'hidden'}
>
{communities.slice(2).map((community, index) => (
<motion.div
key={index + 2}
variants={cardVariants}
className="group relative overflow-hidden rounded-2xl border bg-background p-6 hover:shadow-xl transition-shadow h-full"
whileHover={{
y: -5,
transition: { duration: 0.2 },
}}
>
<div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary/50 to-primary/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<div className="relative z-10">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
<community.icon className="h-6 w-6 text-primary" />
</div>
<h3 className="mb-3 text-xl font-bold">{community.title}</h3>
<p className="mb-6 text-muted-foreground">
{community.description}
</p>
<Button
variant="outline"
className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 h-11"
onClick={() => window.open(community.buttonLink, '_blank')}
disabled={community.title === 'LinkedIn'}
>
{community.buttonText}
</Button>
</div>
<div className="absolute -bottom-32 -right-32 w-64 h-64 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-10 group-hover:-translate-x-10" />
</motion.div>
))}
</motion.div>
{/* Stats Section */}
<motion.div
className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 text-center"
initial="hidden"
animate={isInView ? 'visible' : 'hidden'}
>
{stats.map((stat, index) => (
<motion.div
key={index}
variants={statVariants}
custom={index}
className="space-y-3 p-6 rounded-xl bg-background border"
>
<div className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
{stat.value}
</div>
<div className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
{stat.label}
</div>
</motion.div>
))}
</motion.div>
</div>
</section>
);
}
@@ -1,164 +0,0 @@
'use client';
import { Button } from '@components/atoms';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
export function Events() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
const events = [
{
image: '/images/event-1.jpg',
title: 'Tech Summit 2024',
description:
'Konferensi teknologi terbesar tahun ini dengan pembicara expert dari perusahaan unicorn',
type: 'offline',
price: 'berbayar',
link: '#',
},
{
image: '/images/event-2.jpg',
title: 'Web Development Bootcamp',
description:
'Pelatihan intensif full-stack development selama 2 minggu secara online',
type: 'online',
price: 'gratis',
link: '#',
},
{
image: '/images/event-3.jpg',
title: 'UI/UX Workshop',
description:
'Workshop praktis membuat prototype aplikasi dengan Figma dan Framer',
type: 'hybrid',
price: 'berbayar',
link: '#',
},
];
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.15,
delayChildren: 0.2,
},
},
};
const cardVariants = {
hidden: { y: 40, opacity: 0, scale: 0.95 },
visible: {
y: 0,
opacity: 1,
scale: 1,
transition: {
type: 'spring',
stiffness: 100,
damping: 20,
},
},
};
return (
<section
id="events"
className="w-full py-20 md:py-32 relative overflow-hidden container"
>
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background" />
<div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-primary/5 to-transparent blur-3xl" />
<div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-primary/5 to-transparent blur-3xl" />
</div>
<div className="w-full px-4 md:px-6 lg:px-0" ref={ref}>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold tracking-tighter md:text-5xl/tight lg:text-6xl mb-6">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
Event Terbaru
</span>
</h2>
<p className="max-w-2xl mx-auto text-muted-foreground text-center md:text-xl text-balance">
Lihat dan ikuti event terbaru dari IMPHNEN
</p>
</motion.div>
<motion.div
className="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full"
variants={containerVariants}
initial="hidden"
animate={isInView ? 'visible' : 'hidden'}
>
{events.map((event, index) => (
<motion.div
key={index}
variants={cardVariants}
className="group relative overflow-hidden rounded-2xl border bg-background hover:shadow-xl transition-shadow h-full"
whileHover={{
y: -5,
transition: { duration: 0.2 },
}}
>
<div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary to-primary/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<div className="relative z-10">
<div className="h-48 bg-muted/20 relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-t from-background to-transparent z-10" />
<div className="absolute top-4 right-4 flex gap-2">
<span
className={`px-3 py-1 rounded-full text-sm font-medium ${
event.type === 'online'
? 'bg-green-500/10 text-green-500'
: event.type === 'offline'
? 'bg-purple-500/10 text-purple-500'
: 'bg-yellow-500/10 text-yellow-500'
}`}
>
{event.type === 'hybrid'
? 'Hybrid'
: event.type.toUpperCase()}
</span>
<span
className={`px-3 py-1 rounded-full text-sm font-medium ${
event.price === 'gratis'
? 'bg-blue-500/10 text-blue-500'
: 'bg-orange-500/10 text-orange-500'
}`}
>
{event.price.toUpperCase()}
</span>
</div>
</div>
<div className="p-6">
<h3 className="text-2xl font-bold mb-3">{event.title}</h3>
<p className="text-muted-foreground mb-6">
{event.description}
</p>
<Button
variant="outline"
className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 text-base h-12"
onClick={() => window.open(event.link, '_blank')}
>
Lihat Detail
</Button>
</div>
</div>
<div className="absolute -bottom-40 -right-40 w-80 h-80 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-20 group-hover:-translate-x-20" />
</motion.div>
))}
</motion.div>
</div>
</section>
);
}
@@ -1,21 +0,0 @@
'use client';
import { Button } from '@components/atoms';
import { useRouter } from 'next/navigation';
import { TbCalendarStar } from 'react-icons/tb';
export function ButtonExploreEvent() {
const router = useRouter();
return (
<Button
size="lg"
variant="outline"
className="w-full sm:w-auto group relative overflow-hidden border-primary flex items-center justify-center gap-2"
onClick={() => router.push('/events')}
>
<TbCalendarStar className="size-7" />
<span className="relative">Explore Event</span>
</Button>
);
}
@@ -1,21 +0,0 @@
'use client';
import { Button } from '@components/atoms';
import { useRouter } from 'next/navigation';
import { TbLocationFilled } from 'react-icons/tb';
export function ButtonJoinCommunity() {
const router = useRouter();
return (
<Button
variant="default"
size="lg"
className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg"
onClick={() => router.push('#community')}
>
<TbLocationFilled className="size-6" />
Gabung Komunitas
</Button>
);
}
@@ -1,7 +0,0 @@
export function HeroBadge() {
return (
<div className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit truncate">
<span>🇮🇩 Komunitas Programmer Indonesia</span>
</div>
);
}
@@ -1,24 +0,0 @@
'use client';
import { motion } from 'framer-motion';
import Image from 'next/image';
export function HeroImage() {
return (
<motion.div
className="relative w-full lg:w-auto mx-auto lg:ml-auto max-w-[600px] mt-8 lg:mt-0"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<Image
src="/logo.png"
alt=""
width={800}
height={600}
className="w-full h-auto object-cover"
priority
/>
</motion.div>
);
}
@@ -1,16 +0,0 @@
export function HeroMainText() {
return (
<div className="space-y-4">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70 leading-tight">
Programmer Handal <br />
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
Namun Enggan Ngoding
</span>
</h1>
<p className="max-w-[600px] text-muted-foreground md:text-xl lg:text-lg">
Tempat para programmer struggle bersama, berbagi meme, pengalaman,
tutorial, dan tempat yapping yang nyaman
</p>
</div>
);
}
@@ -1,26 +0,0 @@
import { Avatar, AvatarFallback, AvatarImage } from '@components/atoms';
export function HeroStat() {
return (
<div className="flex items-center rounded-full border border-border bg-background p-1 shadow shadow-black/5 md:w-fit">
<div className="flex -space-x-4">
<Avatar>
<AvatarImage src="/maulana.webp" />
<AvatarFallback />
</Avatar>
<Avatar>
<AvatarImage src="/rasyid.webp" />
<AvatarFallback />
</Avatar>
<Avatar>
<AvatarImage src="/ega.webp" />
<AvatarFallback />
</Avatar>
</div>
<p className="px-2 text-xs text-muted-foreground">
<strong className="font-medium text-foreground">180K+</strong>{' '}
Programmer Indonesia telah bergabung
</p>
</div>
);
}
@@ -1,40 +0,0 @@
'use client';
import { ReactNode, useEffect, useState } from 'react';
export function HeroWrapper({ children }: { children: ReactNode }) {
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollY(window.scrollY);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<section className="relative w-full py-16 md:py-24 lg:py-32 xl:py-40 overflow-hidden">
<div className="absolute inset-0 -z-10 overflow-hidden">
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background to-background/50" />
<div
className="absolute top-1/4 -left-20 w-80 h-80 rounded-full bg-gradient-to-r from-primary/20 to-blue-400/20 blur-3xl"
style={{
transform: `translate(${scrollY * 0.1}px, ${scrollY * -0.05}px)`,
opacity: Math.max(0.2, 1 - scrollY * 0.0005),
}}
/>
<div
className="absolute bottom-1/3 -right-20 w-80 h-80 rounded-full bg-gradient-to-r from-blue-400/20 to-primary/20 blur-3xl"
style={{
transform: `translate(${scrollY * -0.1}px, ${scrollY * 0.05}px)`,
opacity: Math.max(0.2, 1 - scrollY * 0.0005),
}}
/>
<div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] bg-[size:40px_40px]" />
</div>
{children}
</section>
);
}
@@ -1,39 +0,0 @@
'use client';
import { motion } from 'framer-motion';
import { ButtonExploreEvent } from './button-explore-event';
import { ButtonJoinCommunity } from './button-join-community';
import { HeroBadge } from './hero-badge';
import { HeroImage } from './hero-image';
import { HeroMainText } from './hero-main-text';
import { HeroStat } from './hero-stat';
import { HeroWrapper } from './hero-wrapper';
export function Hero() {
return (
<HeroWrapper>
<div className="container px-4 md:px-8 relative">
<div className="grid gap-8 lg:grid-cols-2 lg:gap-16 items-center">
<motion.div
className="flex flex-col justify-center space-y-4"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<HeroBadge />
<HeroMainText />
<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
<ButtonJoinCommunity />
<ButtonExploreEvent />
</div>
<HeroStat />
</motion.div>
<HeroImage />
</div>
</div>
</HeroWrapper>
);
}
@@ -1,143 +0,0 @@
'use client';
import { Button } from '@components/atoms';
import { motion, useInView } from 'framer-motion';
import Image from 'next/image';
import { useRef } from 'react';
import { ImPencil2 } from 'react-icons/im';
const testimonials = [
{
author: {
name: 'Ega',
role: 'Backend Engineer',
avatar: '/ega.webp',
},
quote:
'Tralalero Tralala, IMPHENOTRUNASA merupakan anomali yang sering datang ketika melihat orang ngoding',
},
{
author: {
name: 'Rasyid',
role: 'Fullsnack Engineer',
avatar: '/rasyid.webp',
},
quote:
'Dapet job dari meme yang di-share disini. Gak nyangka yapping random bisa jadi koneksi kerja akwokaowkoak',
},
{
author: {
name: 'Maulana Sodiqin',
role: 'Backend Engineer',
avatar: '/maulana.webp',
},
quote: 'Anjay aku bohong? Admin yang bohong',
},
];
export function Testimonials() {
const ref = useRef<HTMLDivElement>(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
// Double the testimonials for seamless loop
const duplicatedTestimonials = [...testimonials, ...testimonials];
return (
<section
id="testimoni"
className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
ref={ref}
>
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(var(--primary)/0.1),transparent_50%)]" />
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(var(--primary)/0.1),transparent_50%)]" />
</div>
<div className="container px-4 md:px-6">
<motion.div
className="flex flex-col items-center justify-center space-y-4 text-center mb-16"
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5 }}
>
<h2 className="text-3xl font-bold tracking-tighter md:text-4xl lg:text-5xl">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
Testimoni{' '}
</span>
Member
</h2>
<p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
Apa kata mereka yang telah bergabung dengan komunitas IMPHNEN?
</p>
</motion.div>
{/* Infinite Marquee Section */}
<div className="relative w-full overflow-hidden py-4 marquee-container">
<motion.div
className="flex"
animate={{
x: ['0%', '-100%'],
}}
transition={{
duration: 40,
ease: 'linear',
repeat: Infinity,
}}
>
{duplicatedTestimonials.map((testimonial, i) => (
<div
key={i}
className="w-[300px] md:w-[400px] shrink-0 mx-4 p-6 rounded-xl bg-background border border-border/20 hover:border-primary/30 transition-colors group flex flex-col"
style={{ minHeight: '200px' }} // Set a fixed minimum height
>
<div className="flex flex-col gap-4 flex-grow">
<p className="text-muted-foreground italic leading-relaxed line-clamp-4">
&ldquo;{testimonial.quote}&rdquo;
</p>
<div className="mt-auto">
{' '}
{/* This pushes the author info to the bottom */}
<div className="flex items-center gap-4">
<div className="relative h-12 w-12 rounded-full overflow-hidden border-2 border-primary/20 group-hover:border-primary/50 transition-colors">
<Image
src={testimonial.author.avatar}
alt={testimonial.author.name}
width={48}
height={48}
className="object-cover"
unoptimized
/>
</div>
<div>
<h4 className="font-bold">{testimonial.author.name}</h4>
<p className="text-sm text-muted-foreground">
{testimonial.author.role}
</p>
</div>
</div>
</div>
</div>
</div>
))}
</motion.div>
</div>
{/* Call to Action */}
<motion.div
className="mt-16 text-center"
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ delay: 0.2 }}
>
<Button
size="lg"
className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg"
>
<ImPencil2 className="size-5" />
Tulis dan Tampilkan Disini
</Button>
</motion.div>
</div>
</section>
);
}
@@ -1,17 +0,0 @@
import { CallToAction } from './_components/call-to-action';
import { Communities } from './_components/communites';
import { Events } from './_components/events';
import { Hero } from './_components/hero';
import { Testimonials } from './_components/testimonials';
export default function Page() {
return (
<>
<Hero />
<Events />
<Communities />
<Testimonials />
<CallToAction />
</>
);
}
@@ -1,194 +0,0 @@
'use client';
import events from '@/data/events.json';
import { buttonVariants } from '@components/atoms';
import { cn } from '@utils/ui';
import Image from 'next/image';
import { HiCalendar, HiClock, HiLocationMarker } from 'react-icons/hi';
const formatDate = (dateString: string) => {
const date = new Date(dateString);
return date.toLocaleDateString('id-ID', {
day: 'numeric',
month: 'long',
year: 'numeric',
});
};
const formatTime = (dateString: string) => {
const date = new Date(dateString);
return date.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
timeZone: 'Asia/Jakarta',
});
};
const getEventStatus = (endDate: string) => {
const now = new Date();
const end = new Date(endDate);
return end > now ? 'upcoming' : 'past';
};
export default function EventsPage() {
const sortedEvents = [...events].sort(
(a, b) =>
new Date(b.start_date).getTime() - new Date(a.start_date).getTime()
);
return (
<div className="min-h-screen bg-background">
<div className="max-w-7xl mx-auto px-4 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{/* Featured Card */}
<div className="col-span-full">
<div className="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden bg-card">
<div className="grid md:grid-cols-2">
<div className="min-h-96 bg-muted relative">
<Image
src={sortedEvents[0].thumbnail}
alt={sortedEvents[0].name}
fill
className="object-cover object-top"
sizes="(max-width: 768px) 100vw, 50vw"
priority
unoptimized
/>
</div>
<div className="p-8 flex flex-col">
<div className="flex items-center gap-2 mb-4">
<span className="bg-primary/20 text-primary text-xs px-2.5 py-1 rounded-full">
Event Terbaru
</span>
<span
className={cn(
'px-2 py-1 rounded-full text-xs',
getEventStatus(sortedEvents[0].end_date) === 'upcoming'
? 'bg-primary/20 text-primary'
: 'bg-muted text-muted-foreground'
)}
>
{getEventStatus(sortedEvents[0].end_date) === 'upcoming'
? 'Upcoming'
: 'Selesai'}
</span>
</div>
<h2 className="text-2xl font-bold mb-4 text-foreground">
{sortedEvents[0].name}
</h2>
<div className="space-y-3 mb-6 text-sm text-muted-foreground">
<div className="flex items-center gap-2">
<HiCalendar className="w-4 h-4" />
<span>{formatDate(sortedEvents[0].start_date)}</span>
</div>
<div className="flex items-center gap-2">
<HiClock className="w-4 h-4" />
<span>
{formatTime(sortedEvents[0].start_date)} -{' '}
{formatTime(sortedEvents[0].end_date)} WIB
</span>
</div>
<div className="flex items-center gap-2">
<HiLocationMarker className="w-4 h-4" />
<span>
{sortedEvents[0].type === 'online'
? 'Online'
: sortedEvents[0].location}
</span>
</div>
{sortedEvents[0].price > 0 && (
<div className="mt-1 font-medium">
Rp {sortedEvents[0].price.toLocaleString('id-ID')}
</div>
)}
</div>
<p className="text-muted-foreground mb-6 line-clamp-4">
{sortedEvents[0].description}
</p>
<a
href={sortedEvents[0].detail_link}
target="_blank"
className={cn(
buttonVariants({ variant: 'default' }),
'mt-auto w-full md:w-fit'
)}
>
Lihat Detail
</a>
</div>
</div>
</div>
</div>
{/* Regular Cards */}
{sortedEvents.slice(1).map((event) => (
<div
key={event.name}
className="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 bg-card"
>
<div className="h-48 bg-muted relative">
<Image
src={event.thumbnail}
alt={event.name}
fill
className="object-cover object-top rounded-t-xl"
sizes="(max-width: 768px) 100vw, 33vw"
unoptimized
/>
</div>
<div className="p-6">
<div className="flex justify-between items-start mb-4">
<span
className={cn(
'px-2 py-1 rounded-full text-xs',
getEventStatus(event.end_date) === 'upcoming'
? 'bg-primary/20 text-primary'
: 'bg-muted text-muted-foreground'
)}
>
{getEventStatus(event.end_date) === 'upcoming'
? 'Upcoming'
: 'Selesai'}
</span>
</div>
<h3 className="text-lg font-semibold mb-3 text-foreground">
{event.name}
</h3>
<div className="space-y-2 mb-4 text-sm text-muted-foreground">
<div className="flex items-center gap-2">
<HiCalendar className="w-4 h-4" />
<span>{formatDate(event.start_date)}</span>
</div>
<div className="flex items-center gap-2">
<HiLocationMarker className="w-4 h-4" />
<span>
{event.type === 'online' ? 'Online' : event.location}
</span>
</div>
{event.price > 0 && (
<div className="font-medium">
Rp {event.price.toLocaleString('id-ID')}
</div>
)}
</div>
<p className="text-muted-foreground text-sm mb-4 line-clamp-3">
{event.description}
</p>
<a
href={event.detail_link}
target="_blank"
className={cn(
buttonVariants({ variant: 'outline' }),
'w-full text-sm'
)}
>
Lihat Detail
</a>
</div>
</div>
))}
</div>
</div>
</div>
);
}
@@ -1,13 +0,0 @@
import { ReactNode } from 'react';
import Footer from '../_components/footer';
import { Header } from '../_components/header';
export default function Layout({ children }: { children: ReactNode }) {
return (
<div className="flex min-h-screen flex-col">
<Header />
<main className="flex-1">{children}</main>
<Footer />
</div>
);
}
@@ -1,3 +0,0 @@
export default function Page() {
return <></>;
}
@@ -1,114 +0,0 @@
import {
Button,
Input,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@components/atoms';
import Link from 'next/link';
import { BsChatLeftQuote } from 'react-icons/bs';
const testimonials = [
{
id: 1,
name: 'User 1',
date: 'April 2025',
text: 'Bergabung dengan komunitas ini memberikan saya banyak inspirasi. Saya belajar banyak hal baru dan bertemu dengan orang-orang yang luar biasa.',
},
{
id: 2,
name: 'User 2',
date: 'Maret 2025',
text: 'Pengalaman yang sangat berharga. Saya mendapatkan banyak wawasan baru dan dapat mengembangkan keterampilan menulis saya dengan lebih baik.',
},
{
id: 3,
name: 'User 3',
date: 'Maret 2025',
text: 'Komunitas ini sangat mendukung dan memotivasi. Saya senang bisa menjadi bagian dari perjalanan ini dan berbagi pengalaman dengan sesama anggota.',
},
];
export default function TestimonialPage() {
return (
<div className="min-h-screen">
{/* Hero Section */}
<div className="py-16 px-4 text-center border-b border-border">
<BsChatLeftQuote className="size-14 mx-auto my-4 text-foreground" />
<h1 className="text-4xl font-bold mb-4 text-foreground">Testimonial</h1>
<p className="max-w-2xl mx-auto text-lg mb-8 text-balance text-muted-foreground">
Menampilkan pengalaman dan cerita para member yang telah join ke dalam
komunitas kami
</p>
<Link href="/testimonial/submit">
<Button>Tulis Testimonialmu</Button>
</Link>
</div>
{/* Search and Filter */}
<div className="max-w-7xl mx-auto px-4 py-6 border-b border-border">
<div className="flex flex-col md:flex-row gap-4 justify-between">
<div className="relative w-full md:w-96">
<Input
type="text"
placeholder="Cari berdasarkan topik..."
className="w-full bg-background"
/>
</div>
<div className="flex gap-4">
<Select defaultValue="all-time">
<SelectTrigger className="w-[180px] bg-background">
<SelectValue placeholder="Semua Periode" />
</SelectTrigger>
<SelectContent className="bg-popover text-popover-foreground">
<SelectItem value="all-time">Semua Periode</SelectItem>
<SelectItem value="this-month">Bulan Ini</SelectItem>
<SelectItem value="last-month">Bulan Lalu</SelectItem>
<SelectItem value="this-year">Tahun Ini</SelectItem>
</SelectContent>
</Select>
<Select defaultValue="all-topics">
<SelectTrigger className="w-[180px] bg-background">
<SelectValue placeholder="Semua Topik" />
</SelectTrigger>
<SelectContent className="bg-popover text-popover-foreground">
<SelectItem value="all-topics">Semua Topik</SelectItem>
<SelectItem value="writing">Menulis</SelectItem>
<SelectItem value="community">Komunitas</SelectItem>
<SelectItem value="learning">Pembelajaran</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
{/* Testimonial Cards */}
<div className="max-w-7xl mx-auto px-4 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{testimonials.map((testimonial) => (
<div
key={testimonial.id}
className="border rounded-lg p-6 shadow-sm bg-card border-border"
>
<div className="flex items-center mb-4">
<div>
<h3 className="font-semibold text-foreground">
{testimonial.name}
</h3>
<p className="text-sm text-muted-foreground">
Lulus: {testimonial.date}
</p>
</div>
</div>
<p className="text-foreground/80 italic">
&quot;{testimonial.text}&quot;
</p>
</div>
))}
</div>
</div>
</div>
);
}
@@ -1,7 +1,7 @@
'use client';
import { CallToActionSection } from '@/payload-types';
import { Button } from '@components/atoms';
import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
import { CallToActionSection } from 'apps/landing/src/payload-types';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
@@ -1,8 +1,8 @@
'use client';
import { CommunitiesSection } from '@/payload-types';
import { Button } from '@components/atoms';
import { Icon } from '@iconify/react';
import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
import { CommunitiesSection } from 'apps/landing/src/payload-types';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
@@ -32,7 +32,7 @@ export function Community(props: CommunitiesSection) {
return (
<section
id="community"
id="komunitas"
className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
>
<div className="absolute inset-0 -z-10">
@@ -1,7 +1,7 @@
'use client';
import { FeaturesSection } from '@/payload-types';
import { Icon } from '@iconify/react';
import { FeaturesSection } from 'apps/landing/src/payload-types';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
@@ -0,0 +1,159 @@
'use client';
import {
Button,
MenuIcon,
XIcon,
} from '@imphnen-frontend-service/shadcn-ui/atoms';
import { cn } from '@imphnen-frontend-service/utils';
import Image from 'next/image';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { SimpleThemeToggle } from './simple-theme-toggle';
export function Header() {
const [isScrolled, setIsScrolled] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 10);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<header
className={cn(
'sticky top-0 z-50 w-full transition-all duration-300',
isScrolled
? 'bg-background/80 backdrop-blur-md border-b shadow-sm'
: 'bg-transparent'
)}
>
<div className="container flex h-16 items-center justify-between">
<div className="flex items-center gap-2">
<div className="relative overflow-hidden rounded">
<Link href="/">
<Image
src="/logo.png"
alt="IMPHNEN"
width={64}
height={64}
className="object-cover"
/>
</Link>
</div>
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-8">
<Link href="#fitur" className="text-sm font-medium relative group">
<span className="transition-colors hover:text-primary">Fitur</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
</Link>
<Link
href="#komunitas"
className="text-sm font-medium relative group"
>
<span className="transition-colors hover:text-primary">
Komunitas
</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
</Link>
<Link
href="#sumber-belajar"
className="text-sm font-medium relative group"
>
<span className="transition-colors hover:text-primary">
Sumber Belajar
</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
</Link>
<Link
href="#testimoni"
className="text-sm font-medium relative group"
>
<span className="transition-colors hover:text-primary">
Testimoni
</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
</Link>
</nav>
<div className="flex items-center gap-4">
<SimpleThemeToggle />
<Button
className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
onClick={() =>
window.open('https://discord.com/invite/imphnen', '_blank')
}
>
Gabung Discord
</Button>
{/* Mobile Menu Button */}
<Button
variant="ghost"
size="icon"
className="md:hidden"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
{mobileMenuOpen ? (
<XIcon className="h-6 w-6" />
) : (
<MenuIcon className="h-6 w-6" />
)}
</Button>
</div>
</div>
{/* Mobile Menu */}
{mobileMenuOpen && (
<div className="md:hidden border-t bg-background/95 backdrop-blur-md">
<nav className="container flex flex-col py-4 text-center">
<Link
href="#fitur"
className="py-3 text-sm font-medium border-b border-border/50"
onClick={() => setMobileMenuOpen(false)}
>
Fitur
</Link>
<Link
href="#komunitas"
className="py-3 text-sm font-medium border-b border-border/50"
onClick={() => setMobileMenuOpen(false)}
>
Komunitas
</Link>
<Link
href="#sumber-belajar"
className="py-3 text-sm font-medium border-b border-border/50"
onClick={() => setMobileMenuOpen(false)}
>
Sumber Belajar
</Link>
<Link
href="#testimoni"
className="py-3 text-sm font-medium"
onClick={() => setMobileMenuOpen(false)}
>
Testimoni
</Link>
<a
href="https://discord.com/invite/imphnen"
target="_blank"
className="mt-4"
>
<Button className="mt-4 bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer">
Gabung Discord
</Button>
</a>
</nav>
</div>
)}
</header>
);
}
@@ -1,11 +0,0 @@
import { buttonVariants } from '@components/atoms';
import { cn } from '@utils/ui';
import Link from 'next/link';
export function ButtonSignin() {
return (
<Link href="/signin" className={cn(buttonVariants(), 'hidden lg:flex')}>
Masuk
</Link>
);
}
@@ -1,14 +0,0 @@
import { buttonVariants } from '@components/atoms';
import { cn } from '@utils/ui';
import Link from 'next/link';
export function ButtonSignup() {
return (
<Link
href="/signup"
className={cn(buttonVariants({ variant: 'outline' }), 'hidden lg:flex')}
>
Daftar
</Link>
);
}
@@ -1,28 +0,0 @@
import Link from 'next/link';
export function DesktopNavigation() {
return (
<nav className="hidden md:flex items-center gap-8">
<Link href="/" className="text-sm font-medium relative group">
<span className="transition-colors hover:text-primary">Home</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
</Link>
<Link href="/events" className="text-sm font-medium relative group">
<span className="transition-colors hover:text-primary">Event</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
</Link>
<Link href="/testimonials" className="text-sm font-medium relative group">
<span className="transition-colors hover:text-primary">
Testimonial
</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
</Link>
<Link href="/request" className="text-sm font-medium relative group">
<span className="transition-colors hover:text-primary">
Request Fitur
</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
</Link>
</nav>
);
}
@@ -1,29 +0,0 @@
'use client';
import { cn } from '@utils/ui';
import { ReactNode, useEffect, useState } from 'react';
export function HeaderWrapper({ children }: { children: ReactNode }) {
const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 10);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<header
className={cn(
'sticky top-0 z-50 w-full transition-all duration-300',
isScrolled
? 'bg-background/80 backdrop-blur-md border-b shadow-sm'
: 'bg-transparent'
)}
>
{children}
</header>
);
}
@@ -1,32 +0,0 @@
'use client';
import { useMobileMenuStore } from '@/stores/mobile-menu-store';
import { ButtonSignin } from './button-signin';
import { ButtonSignup } from './button-signup';
import { DesktopNavigation } from './desktop-navigation';
import { HeaderWrapper } from './header-wrapper';
import { Logo } from './logo';
import { MobileMenuHamburger } from './mobile-menu-hamburger';
import { MobileNavigation } from './mobile-navigation';
export function Header() {
const mobileMenuOpen = useMobileMenuStore((s) => s.mobileMenuOpen);
return (
<HeaderWrapper>
<div className="container flex h-16 items-center justify-between">
<Logo />
<DesktopNavigation />
<div className="flex items-center gap-x-2">
<ButtonSignin />
<ButtonSignup />
<MobileMenuHamburger />
</div>
</div>
{mobileMenuOpen && <MobileNavigation />}
</HeaderWrapper>
);
}
@@ -1,16 +0,0 @@
import Image from 'next/image';
import Link from 'next/link';
export function Logo() {
return (
<Link href="/">
<Image
src="/logo.png"
alt="IMPHNEN"
width={64}
height={64}
className="object-cover"
/>
</Link>
);
}
@@ -1,25 +0,0 @@
'use client';
import { useMobileMenuStore } from '@/stores/mobile-menu-store';
import { Button } from '@components/atoms';
import { LuMenu, LuX } from 'react-icons/lu';
export function MobileMenuHamburger() {
const mobileMenuOpen = useMobileMenuStore((s) => s.mobileMenuOpen);
const toggleMobileMenu = useMobileMenuStore((s) => s.toggleMobileMenu);
return (
<Button
variant="ghost"
size="icon"
className="md:hidden"
onClick={toggleMobileMenu}
>
{mobileMenuOpen ? (
<LuX className="h-6 w-6" />
) : (
<LuMenu className="h-6 w-6" />
)}
</Button>
);
}
@@ -1,34 +0,0 @@
import Link from 'next/link';
export function MobileNavigation() {
return (
<div className="md:hidden border-t bg-background/95 backdrop-blur-md">
<nav className="container flex flex-col py-4 text-center">
<Link
href="/"
className="py-3 text-sm font-medium border-b border-border/50"
>
Home
</Link>
<Link
href="/events"
className="py-3 text-sm font-medium border-b border-border/50"
>
Event
</Link>
<Link
href="/testimonias"
className="py-3 text-sm font-medium border-b border-border/50"
>
Testimonial
</Link>
<Link href="/request" className="text-sm font-medium relative group">
<span className="transition-colors hover:text-primary">
Request Fitur
</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
</Link>
</nav>
</div>
);
}
@@ -0,0 +1,154 @@
'use client';
import {
Button,
CodeIcon,
SparklesIcon,
UsersIcon,
} from '@imphnen-frontend-service/shadcn-ui/atoms';
import { formatCMSImageDataToMedia } from 'apps/landing/src/lib/format';
import { HeroSection } from 'apps/landing/src/payload-types';
import { motion } from 'framer-motion';
import Image from 'next/image';
import { Fragment, useEffect, useState } from 'react';
export function Hero(props: HeroSection) {
const {
badgeText,
buttons,
description,
highlight,
title,
stats,
heroImage,
} = props;
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollY(window.scrollY);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<section className="relative w-full py-20 md:py-32 lg:py-40 overflow-hidden">
<div className="absolute inset-0 -z-10 overflow-hidden">
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background to-background/50" />
<div
className="absolute top-1/4 -left-20 w-80 h-80 rounded-full bg-gradient-to-r from-primary/20 to-blue-400/20 blur-3xl"
style={{
transform: `translate(${scrollY * 0.1}px, ${scrollY * -0.05}px)`,
opacity: Math.max(0.2, 1 - scrollY * 0.001),
}}
/>
<div
className="absolute bottom-1/3 -right-20 w-80 h-80 rounded-full bg-gradient-to-r from-blue-400/20 to-primary/20 blur-3xl"
style={{
transform: `translate(${scrollY * -0.1}px, ${scrollY * 0.05}px)`,
opacity: Math.max(0.2, 1 - scrollY * 0.001),
}}
/>
<div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] bg-[size:40px_40px]" />
</div>
<div className="container px-4 md:px-6 relative">
<div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
<motion.div
className="flex flex-col justify-center space-y-8"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<div className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit">
<SparklesIcon className="mr-1 h-3.5 w-3.5 text-primary" />
<span>{badgeText}</span>
</div>
<div className="space-y-4">
<h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
{title} <br />
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
{highlight}
</span>
</h1>
<p className="max-w-[600px] text-muted-foreground md:text-xl">
{description}
</p>
</div>
<div className="flex flex-col sm:flex-row gap-4">
<Button
size="lg"
className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
onClick={() => window.open(buttons.primaryUrl, '_blank')}
>
{buttons.primaryLabel}
</Button>
<Button
size="lg"
variant="outline"
className="group relative overflow-hidden border-primary"
onClick={() => window.open(buttons.secondaryUrl, '_blank')}
>
<span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
<span className="relative">{buttons.secondaryLabel}</span>
</Button>
</div>
<div className="flex items-center gap-8">
{stats?.map(({ value, label }, i) => (
<Fragment key={i}>
<div className="flex flex-col items-center">
<div className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
{value}
</div>
<div className="text-xs text-muted-foreground">{label}</div>
</div>
{i < stats.length - 1 && (
<div className="h-10 border-r border-border mx-4" />
)}
</Fragment>
))}
</div>
</motion.div>
<motion.div
className="relative mx-auto lg:ml-auto"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<div className="relative">
<div className="absolute -top-6 -left-6 w-12 h-12 rounded-lg border border-primary/30 bg-background/50 backdrop-blur-sm flex items-center justify-center">
<CodeIcon className="h-6 w-6 text-primary" />
</div>
<div className="absolute -bottom-6 -right-6 w-12 h-12 rounded-lg border border-blue-400/30 bg-background/50 backdrop-blur-sm flex items-center justify-center">
<UsersIcon className="h-6 w-6 text-blue-400" />
</div>
<div className="relative z-10 rounded-2xl overflow-hidden border shadow-2xl">
<div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-blue-400/10" />
{(() => {
const media = formatCMSImageDataToMedia(heroImage);
if (!media) return null;
return (
<Image
src={media.url!}
alt={media.alt}
width={600}
height={500}
className="w-full h-auto object-cover"
/>
);
})()}
</div>
</div>
</motion.div>
</div>
</div>
</section>
);
}
@@ -1,8 +1,8 @@
'use client';
import { LearningResourcesSection } from '@/payload-types';
import { Button } from '@components/atoms';
import { Icon } from '@iconify/react';
import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
import { LearningResourcesSection } from 'apps/landing/src/payload-types';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
File diff suppressed because one or more lines are too long
@@ -1,13 +0,0 @@
'use client';
import { QueryProvider } from '@utils/ui';
import type { ThemeProviderProps } from 'next-themes';
import { ThemeProvider as NextThemesProvider } from 'next-themes';
export function Providers({ children, ...props }: ThemeProviderProps) {
return (
<QueryProvider>
<NextThemesProvider {...props}>{children}</NextThemesProvider>
</QueryProvider>
);
}
@@ -1,9 +1,12 @@
'use client';
import { Button } from '@components/atoms';
import {
Button,
MoonIcon,
SunIcon,
} from '@imphnen-frontend-service/shadcn-ui/atoms';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
import { LuMoon, LuSun } from 'react-icons/lu';
export function SimpleThemeToggle() {
const { theme, setTheme } = useTheme();
@@ -29,9 +32,9 @@ export function SimpleThemeToggle() {
className="focus-visible:ring-0 cursor-pointer"
>
{theme === 'dark' ? (
<LuSun className="h-[1.2rem] w-[1.2rem]" />
<SunIcon className="h-[1.2rem] w-[1.2rem]" />
) : (
<LuMoon className="h-[1.2rem] w-[1.2rem]" />
<MoonIcon className="h-[1.2rem] w-[1.2rem]" />
)}
<span className="sr-only">Toggle theme</span>
</Button>
@@ -1,8 +1,8 @@
'use client';
import { formatCMSImageDataToMedia } from '@/lib/format';
import { TestimonialsSection } from '@/payload-types';
import { QuoteIcon } from '@components/atoms';
import { QuoteIcon } from '@imphnen-frontend-service/shadcn-ui/atoms';
import { formatCMSImageDataToMedia } from 'apps/landing/src/lib/format';
import { TestimonialsSection } from 'apps/landing/src/payload-types';
import { motion, useInView } from 'framer-motion';
import Image from 'next/image';
import { useRef } from 'react';
@@ -0,0 +1,8 @@
'use client';
import type { ThemeProviderProps } from 'next-themes';
import { ThemeProvider as NextThemesProvider } from 'next-themes';
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}
+18 -11
View File
@@ -1,12 +1,15 @@
import { poppins } from '@/lib/fonts';
import '@/styles/globals.css';
import { type Metadata } from 'next';
import { Providers } from './_components/providers';
import { Inter } from 'next/font/google';
import '../../styles/globals.css';
import Footer from './_components/footer';
import { Header } from './_components/header';
import { ThemeProvider } from './_components/theme-provider';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan Ngonding',
description:
'Komunitas Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
title: 'IMPHNEN - Ingin Menjadi Programmer Handal?',
description: 'Komunitas belajar programming untuk semua level',
};
export default function RootLayout({
@@ -16,15 +19,19 @@ export default function RootLayout({
}) {
return (
<html lang="id" suppressHydrationWarning>
<body className={poppins.className}>
<Providers
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="light"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</Providers>
<div className="flex min-h-screen flex-col">
<Header />
<main className="flex-1">{children}</main>
<Footer />
</div>
</ThemeProvider>
</body>
</html>
);
+43
View File
@@ -0,0 +1,43 @@
import { getGlobalsCallToActionSection } from '../../services/get-globals-call-to-action-section';
import { getGlobalsCommunitiesSection } from '../../services/get-globals-communitues-section';
import { getGlobalsFeaturesSection } from '../../services/get-globals-features-section';
import { getGlobalsHeroSection } from '../../services/get-globals-hero-section';
import { getGlobalsLearningResourcesSection } from '../../services/get-globals-learning-resources-section';
import { getGlobalsTestimonialsSection } from '../../services/get-globals-testimonials-section';
import { CallToAction } from './_components/call-to-action';
import { Community } from './_components/community';
import { Features } from './_components/features';
import { Hero } from './_components/hero';
import { LearningResources } from './_components/learning-resources';
import { Testimonials } from './_components/testimonials';
export const revalidate = 10; // Seconds
export default async function Page() {
const [
heroData,
featuresData,
communitiesData,
learningResourcesData,
testimonialsData,
callToActionData,
] = await Promise.all([
getGlobalsHeroSection(),
getGlobalsFeaturesSection(),
getGlobalsCommunitiesSection(),
getGlobalsLearningResourcesSection(),
getGlobalsTestimonialsSection(),
getGlobalsCallToActionSection(),
]);
return (
<>
<Hero {...heroData} />
<Features {...featuresData} />
<Community {...communitiesData} />
<LearningResources {...learningResourcesData} />
<Testimonials {...testimonialsData} />
<CallToAction {...callToActionData} />
</>
);
}
@@ -2,8 +2,8 @@
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import type { Metadata } from 'next';
import config from '@/payload.config';
import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views';
import config from '../../../../payload.config';
import { importMap } from '../importMap';
type Args = {
@@ -2,8 +2,8 @@
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import type { Metadata } from 'next';
import config from '@/payload.config';
import { RootPage, generatePageMetadata } from '@payloadcms/next/views';
import config from '../../../../payload.config';
import { importMap } from '../importMap';
type Args = {
@@ -1,6 +1,5 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import config from '@/payload.config';
import '@payloadcms/next/css';
import {
REST_DELETE,
@@ -10,6 +9,7 @@ import {
REST_POST,
REST_PUT,
} from '@payloadcms/next/routes';
import config from '../../../../payload.config';
export const GET = REST_GET(config);
export const POST = REST_POST(config);
@@ -1,7 +1,7 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import config from '@/payload.config';
import '@payloadcms/next/css';
import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes';
import config from '../../../../payload.config';
export const GET = GRAPHQL_PLAYGROUND_GET(config);
@@ -1,7 +1,7 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import config from '@/payload.config';
import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes';
import config from '../../../../payload.config';
export const POST = GRAPHQL_POST(config);
+1 -1
View File
@@ -1,10 +1,10 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import config from '@/payload.config';
import '@payloadcms/next/css';
import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts';
import type { ServerFunctionClient } from 'payload';
import React from 'react';
import config from '../../payload.config';
import { importMap } from './admin/importMap.js';
import './custom.scss';
-46
View File
@@ -1,46 +0,0 @@
[
{
"name": "IMPHNEN X GDG Medan",
"description": "Join us for the Google Cloud Roadshow: Build with AI in Medan! This is your chance to dive deep into the latest advancements in cloud technology and AI, guided by industry experts.",
"start_date": "2025-04-26T13:00:00+07:00",
"end_date": "2025-04-26T17:00:00+07:00",
"thumbnail": "https://scontent.fsoc1-2.fna.fbcdn.net/v/t39.30808-6/492363939_2132158393873766_2304913620264481070_n.jpg?_nc_cat=105&ccb=1-7&_nc_sid=127cfc&_nc_eui2=AeFe43oCdy2FOIVI6pr_grkO_q5XyVVxt5v-rlfJVXG3m9KgINIp9lo_vzXP4CtAAFJviDNJdDPaPyGnz7B8-gfE&_nc_ohc=bv3GExoL4pUQ7kNvwEpV7xQ&_nc_oc=Adk45dIpzgFxCHgtQKDTo99Sewj0ZMO4LX1cNEI2Dj7VeQDp8jd1RzYnG_UwsKkaTug&_nc_zt=23&_nc_ht=scontent.fsoc1-2.fna&_nc_gid=ZPKg-Y9FLRXcDiSak5WcLA&oh=00_AfL7BFg5g-q6MALMRFUlgaUWK8jHxQVTHdZ_1ezxBthXfw&oe=68354615",
"type": "onsite",
"price": 0,
"location": "Magnificient, Medan",
"detail_link": "https://n8n.gdgmedan.com/form/8466f60d-94b0-42a6-93aa-8738ae4ab5df?fbclid=IwY2xjawKcQoNleHRuA2FlbQIxMABicmlkETFnQ1RvSU5aWVhpWldaOXBjAR7LUWa_npCLb-QSfk1QFTl12tyw_eBhNO8oI8N2LvhwweeE5_41uQsARsEQGw_aem_1IP2vqrQcvjsvLCBy2C6Hg"
},
{
"name": "IMPHNEN X Connect Citcom",
"description": "Unleash the Future with AI: Decode the potential of artificial intelligence to revolutionize your strategies, unchain innovation, and gain a powerful competitive edge in today's fast-evolving business landscape. Harness the transformative capabilities of AI to outsmart competitors, optimize operations, and drive sustainable growth.",
"start_date": "2025-04-22T13:00:00+07:00",
"end_date": "2025-04-22T17:00:00+07:00",
"thumbnail": "https://scontent.fsoc1-2.fna.fbcdn.net/v/t39.30808-6/490432625_2122941998128739_5372979458124718061_n.jpg?stp=dst-jpg_p526x296_tt6&_nc_cat=105&ccb=1-7&_nc_sid=aa7b47&_nc_eui2=AeGc_W_0Gd3XY9X9ImKz1h1HpYKlinPYX-qlgqWKc9hf6k75HObQiJ8A8m6BZOIe2OrVQjjyXnHq08Rc4JuQWeCQ&_nc_ohc=uoSae0n37k0Q7kNvwHch8E5&_nc_oc=AdngSKtrCdZ4H3hlHh-9cttOnaKyrwiFEcm88kjp0gaflvQ65LUp4OT45-XVGDAoIo8&_nc_zt=23&_nc_ht=scontent.fsoc1-2.fna&_nc_gid=YGkoLGAxNuB0uF3C9hSYGQ&oh=00_AfLRkrzG7DRYa3HRuy9aXfUfG6zLkRBDj9LxqXKOfF9x7Q&oe=683546E0",
"type": "onsite",
"price": 0,
"location": "El Hotel, Bandung",
"detail_link": "/events/1"
},
{
"name": "JVM Meetup #64",
"description": "Join us for an insightful talk where well explore how AI is reshaping the payment industry. Whether youre into tech, AI, or just curious about the future of transactions, this is a must-attend event!",
"start_date": "2025-04-30T13:00:00+07:00",
"end_date": "2025-04-30T17:00:00+07:00",
"thumbnail": "https://scontent.fsoc1-1.fna.fbcdn.net/v/t39.30808-6/494158983_2136830150073257_5259003432367969457_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=833d8c&_nc_eui2=AeGcneO8ihnXyQ_7WV93z7Onz0UPVTr-bf_PRQ9VOv5t_wI-el8xouZ-Z4TKGMMlBPi21d9AA55SP54MHkzO4rx1&_nc_ohc=3Q9NKGIkpT4Q7kNvwHKzwXr&_nc_oc=AdkRJ--zwRGcfX_F2eIgx0qhK-N3OkhwqRwujFhgSRWy5mH_SdIyBmwW8PHHXp71ZUM&_nc_zt=23&_nc_ht=scontent.fsoc1-1.fna&_nc_gid=Xi30SjzSBAU1XN9rRxp0VA&oh=00_AfKvjd9LTMfOwfPLD43U8lKYEr4KABecj336J8hAY8ekMg&oe=68353105",
"type": "onsite",
"price": 0,
"location": "El Hotel, Bandung",
"detail_link": "https://lu.ma/422jkgz0?utm_campaign=jvmmeetup&utm_medium=social%2C%20event%2C%20meetup&utm_source=google%2C%20facebook%2C%20linkedin%2C%20instagram"
},
{
"name": "JVM Meetup #65",
"description": "Di era digital yang terus berkembang, Artificial Intelligence (AI) bukan lagi teknologi masa depantapi alat bantu masa kini yang siap mendongkrak efisiensi, kreativitas, dan produktivitas kita semua, terutama para penggiat IT dan pelaku usaha!",
"start_date": "2025-05-15T13:00:00+07:00",
"end_date": "2025-05-15T17:00:00+07:00",
"thumbnail": "https://scontent.fsoc1-1.fna.fbcdn.net/v/t39.30808-6/495382435_2144684952621110_8304851620615091109_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=833d8c&_nc_eui2=AeHwnU4KixfUsslo3M90ahT8GwMEI7zWSnQbAwQjvNZKdP3RHiUjdDZtuF1dIMvorL0nW0rDGOD6tPDi0i9ERK96&_nc_ohc=R1NyXnu-FKEQ7kNvwGbO-iN&_nc_oc=Adluf-uw1tmzkNME9vNhwkTv5-x_GHMfsLj1bzGyYds_ODq3UnWMq2DthyUisF9e3gU&_nc_zt=23&_nc_ht=scontent.fsoc1-1.fna&_nc_gid=kykMk9nPtcrtk-InL6tF6w&oh=00_AfLZSrEPpV83lVFRMz19n9RzfnsM4o7K7TijpdAjWYViiA&oe=6835231B",
"type": "onsite",
"price": 0,
"location": "Telkom Landmark Tower (Lt.31)",
"detail_link": "s.id/jvm65"
}
]
-24
View File
@@ -1,24 +0,0 @@
import { cookies } from 'next/headers';
const REFRESH_TOKEN_NAME = '__imphnen_refresh_token__';
const ACCESS_TOKEN_NAME = '__imphnen_access_token__';
export async function setRefreshToken(refreshToken: string) {
const cookieStore = await cookies();
cookieStore.set(REFRESH_TOKEN_NAME, refreshToken);
}
export async function setAccessToken(accessToken: string) {
const cookieStore = await cookies();
cookieStore.set(ACCESS_TOKEN_NAME, accessToken);
}
export async function getRefreshToken() {
const cookieStore = await cookies();
return cookieStore.get(REFRESH_TOKEN_NAME)?.value;
}
export async function getAccessToken() {
const cookieStore = await cookies();
return cookieStore.get(ACCESS_TOKEN_NAME)?.value;
}
-8
View File
@@ -1,8 +0,0 @@
// fonts.ts
import { Poppins } from 'next/font/google';
export const poppins = Poppins({
subsets: ['latin'],
weight: ['300', '400', '500', '600', '700'],
display: 'swap',
});
-6
View File
@@ -1,6 +0,0 @@
import type { paths } from '@/openapi-types';
import createClient from 'openapi-fetch';
export const fetcher = createClient<paths>({
baseUrl: 'https://api.imphnen.dev',
});
File diff suppressed because it is too large Load Diff
@@ -1,12 +0,0 @@
import { create } from 'zustand';
interface MobileMenuState {
mobileMenuOpen: boolean;
toggleMobileMenu: () => void;
}
export const useMobileMenuStore = create<MobileMenuState>((set) => ({
mobileMenuOpen: false,
toggleMobileMenu: () =>
set((state) => ({ mobileMenuOpen: !state.mobileMenuOpen })),
}));
+1 -20
View File
@@ -1,22 +1,3 @@
@import 'tailwindcss';
@import '../../../../libs/shadcn-ui/src/index.css';
@import "../../../../libs/shadcn-ui/src/index.css";
@source "../../../../libs/shadcn-ui/src/atoms/**/*.{ts,tsx}";
@layer utilities {
.marquee-container {
mask-image: linear-gradient(
to right,
transparent 0%,
black 5%,
black 95%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 5%,
black 95%,
transparent 100%
);
}
}
+12 -10
View File
@@ -11,7 +11,11 @@
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"lib": ["dom", "dom.iterable", "esnext"],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
@@ -20,14 +24,7 @@
{
"name": "next"
}
],
"baseUrl": ".",
"paths": {
"@components/atoms": ["../../libs/shadcn-ui/src/atoms/index.ts"],
"@utils/ui": ["../../libs/utils/src/index.ts"],
"@schemas": ["../../libs/service/src/schemas/index.ts"],
"@/*": ["src/*"]
}
]
},
"include": [
"**/*.js",
@@ -39,5 +36,10 @@
"next-env.d.ts",
".next/types/**/*.ts"
],
"exclude": ["node_modules", "jest.config.ts", "**/*.spec.ts", "**/*.test.ts"]
"exclude": [
"node_modules",
"jest.config.ts",
"**/*.spec.ts",
"**/*.test.ts"
]
}
+5 -182
View File
@@ -8,17 +8,14 @@
"name": "@imphnen-frontend-service/shadcn-ui",
"version": "0.0.1",
"dependencies": {
"@radix-ui/react-avatar": "^1.1.9",
"@radix-ui/react-label": "^2.1.6",
"@radix-ui/react-slot": "^1.2.2",
"@radix-ui/react-slot": "^1.2.0",
"@tailwindcss/vite": "^4.1.4",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.503.0",
"react-icons": "^5.5.0",
"tailwind-merge": "^3.2.0",
"tailwindcss": "^4.1.4",
"zod": "^3.24.4"
"tailwindcss": "^4.1.4"
},
"devDependencies": {
"tw-animate-css": "^1.2.8"
@@ -449,33 +446,6 @@
"node": ">=18"
}
},
"node_modules/@radix-ui/react-avatar": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.9.tgz",
"integrity": "sha512-10tQokfvZdFvnvDkcOJPjm2pWiP8A0R4T83MoD7tb15bC/k2GU7B1YBuzJi8lNQ8V1QqhP8ocNqp27ByZaNagQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-primitive": "2.1.2",
"@radix-ui/react-use-callback-ref": "1.1.1",
"@radix-ui/react-use-is-hydrated": "0.1.0",
"@radix-ui/react-use-layout-effect": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -491,71 +461,10 @@
}
}
},
"node_modules/@radix-ui/react-context": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-label": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.6.tgz",
"integrity": "sha512-S/hv1mTlgcPX2gCTJrWuTjSXf7ER3Zf7zWGtOprxhIIY93Qin3n5VgNA0Ez9AgrK/lEtlYgzLd4f5x6AVar4Yw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-primitive": "2.1.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-primitive": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.2.tgz",
"integrity": "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.2.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slot": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
"integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
"integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2"
@@ -570,54 +479,6 @@
}
}
},
"node_modules/@radix-ui/react-use-callback-ref": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
"integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-is-hydrated": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
"integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
"license": "MIT",
"dependencies": {
"use-sync-external-store": "^1.5.0"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-layout-effect": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
"integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.40.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
@@ -1603,19 +1464,6 @@
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
"license": "MIT",
"peer": true,
"dependencies": {
"scheduler": "^0.26.0"
},
"peerDependencies": {
"react": "^19.1.0"
}
},
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -1665,13 +1513,6 @@
"fsevents": "~2.3.2"
}
},
"node_modules/scheduler": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
"license": "MIT",
"peer": true
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1734,15 +1575,6 @@
"url": "https://github.com/sponsors/Wombosvideo"
}
},
"node_modules/use-sync-external-store": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
"integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/vite": {
"version": "6.3.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.3.tgz",
@@ -1817,15 +1649,6 @@
"optional": true
}
}
},
"node_modules/zod": {
"version": "3.24.4",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.24.4.tgz",
"integrity": "sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
}
}
}
+2 -5
View File
@@ -10,17 +10,14 @@
}
},
"dependencies": {
"@radix-ui/react-avatar": "^1.1.9",
"@radix-ui/react-label": "^2.1.6",
"@radix-ui/react-slot": "^1.2.2",
"@radix-ui/react-slot": "^1.2.0",
"@tailwindcss/vite": "^4.1.4",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.503.0",
"react-icons": "^5.5.0",
"tailwind-merge": "^3.2.0",
"tailwindcss": "^4.1.4",
"zod": "^3.24.4"
"tailwindcss": "^4.1.4"
},
"devDependencies": {
"tw-animate-css": "^1.2.8"
-49
View File
@@ -1,49 +0,0 @@
'use client';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import * as React from 'react';
import { cn } from './cn';
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
className
)}
{...props}
/>
));
Avatar.displayName = AvatarPrimitive.Root.displayName;
const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn('aspect-square h-full w-full', className)}
{...props}
/>
));
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
'flex h-full w-full items-center justify-center rounded-[inherit] bg-secondary text-xs',
className
)}
{...props}
/>
));
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
export { Avatar, AvatarFallback, AvatarImage };
+1 -1
View File
@@ -1,9 +1,9 @@
'use client';
import { cn } from '@imphnen-frontend-service/utils';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import * as React from 'react';
import { cn } from './cn';
const buttonVariants = cva(
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-82
View File
@@ -1,82 +0,0 @@
import * as React from 'react';
import { cn } from './cn';
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
'rounded-xl border bg-card text-card-foreground shadow',
className
)}
{...props}
/>
));
Card.displayName = 'Card';
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('flex flex-col space-y-1.5 p-6', className)}
{...props}
/>
));
CardHeader.displayName = 'CardHeader';
const CardTitle = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('font-semibold leading-none tracking-tight', className)}
{...props}
/>
));
CardTitle.displayName = 'CardTitle';
const CardDescription = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
));
CardDescription.displayName = 'CardDescription';
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
));
CardContent.displayName = 'CardContent';
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('flex items-center p-6 pt-0', className)}
{...props}
/>
));
CardFooter.displayName = 'CardFooter';
export {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
};
-6
View File
@@ -1,6 +0,0 @@
import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs));
};
-167
View File
@@ -1,167 +0,0 @@
'use client';
import * as LabelPrimitive from '@radix-ui/react-label';
import { Slot } from '@radix-ui/react-slot';
import * as React from 'react';
import {
Controller,
FormProvider,
useFormContext,
useFormState,
type ControllerProps,
type FieldPath,
type FieldValues,
} from 'react-hook-form';
import { cn } from './cn';
import { Label } from './label';
const Form = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
name: TName;
};
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
);
};
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext);
const itemContext = React.useContext(FormItemContext);
const { getFieldState } = useFormContext();
const formState = useFormState({ name: fieldContext.name });
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
throw new Error('useFormField should be used within <FormField>');
}
const { id } = itemContext;
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
};
};
type FormItemContextValue = {
id: string;
};
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
);
function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
<div
data-slot="form-item"
className={cn('grid gap-2', className)}
{...props}
/>
</FormItemContext.Provider>
);
}
function FormLabel({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
const { error, formItemId } = useFormField();
return (
<Label
data-slot="form-label"
data-error={!!error}
className={cn('data-[error=true]:text-rose-500', className)}
htmlFor={formItemId}
{...props}
/>
);
}
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
const { error, formItemId, formDescriptionId, formMessageId } =
useFormField();
return (
<Slot
data-slot="form-control"
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
);
}
function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
const { formDescriptionId } = useFormField();
return (
<p
data-slot="form-description"
id={formDescriptionId}
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
);
}
function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message ?? '') : props.children;
if (!body) {
return null;
}
return (
<p
data-slot="form-message"
id={formMessageId}
className={cn('text-rose-500 text-xs', className)}
{...props}
>
{body}
</p>
);
}
export {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
useFormField,
};
+37
View File
@@ -0,0 +1,37 @@
import {
LuArrowDown as ArrowDownIcon,
LuBookOpen as BookOpenIcon,
LuCode as CodeIcon,
LuFacebook as FacebookIcon,
LuInstagram as InstagramIcon,
LuLaptop as LaptopIcon,
LuMenu as MenuIcon,
LuMessageCircle as MessageCircleIcon,
LuMoon as MoonIcon,
LuQuote as QuoteIcon,
LuShare2 as Share2Icon,
LuSparkles as SparklesIcon,
LuSun as SunIcon,
LuUsers as UsersIcon,
LuVideo as VideoIcon,
LuX as XIcon,
} from 'react-icons/lu';
export {
ArrowDownIcon,
BookOpenIcon,
CodeIcon,
FacebookIcon,
InstagramIcon,
LaptopIcon,
MenuIcon,
MessageCircleIcon,
MoonIcon,
QuoteIcon,
Share2Icon,
SparklesIcon,
SunIcon,
UsersIcon,
VideoIcon,
XIcon,
};
+1 -6
View File
@@ -1,7 +1,2 @@
export * from './avatar';
export * from './button';
export * from './card';
export * from './form';
export * from './input';
export * from './label';
export * from './select';
export * from './icons';
-21
View File
@@ -1,21 +0,0 @@
import * as React from 'react';
import { cn } from './cn';
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
className
)}
ref={ref}
{...props}
/>
);
}
);
Input.displayName = 'Input';
export { Input };
-23
View File
@@ -1,23 +0,0 @@
'use client';
import * as LabelPrimitive from '@radix-ui/react-label';
import * as React from 'react';
import { cn } from './cn';
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
className
)}
{...props}
/>
);
}
export { Label };
-158
View File
@@ -1,158 +0,0 @@
'use client';
import * as SelectPrimitive from '@radix-ui/react-select';
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
import * as React from 'react';
import { cn } from './cn';
const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectScrollUpButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
'flex cursor-default items-center justify-center py-1',
className
)}
{...props}
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
const SelectScrollDownButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
'flex cursor-default items-center justify-center py-1',
className
)}
{...props}
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
));
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName;
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = 'popper', ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
'relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className
)}
position={position}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
'p-1',
position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
));
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn('px-2 py-1.5 text-sm font-semibold', className)}
{...props}
/>
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item
ref={ref}
className={cn(
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className
)}
{...props}
>
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn('-mx-1 my-1 h-px bg-muted', className)}
{...props}
/>
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
};
+3 -3
View File
@@ -1,5 +1,5 @@
@import 'tailwindcss';
@import 'tw-animate-css';
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@@ -123,8 +123,8 @@
.container {
margin-left: auto;
margin-right: auto;
padding-left: 4rem;
padding-right: 4rem;
padding-left: 2rem;
padding-right: 2rem;
width: 100%;
}
@media (min-width: 1536px) {
+5 -1039
View File
File diff suppressed because it is too large Load Diff
+1 -7
View File
@@ -18,7 +18,6 @@
"landing:dev": "nx serve landing",
"landing:build": "nx build landing",
"landing:prod": "cd ./dist/apps/landing && npx next start",
"landing:openapi": "npx openapi-typescript https://api.imphnen.dev/openapi.json -o ./apps/landing/src/openapi-types.ts",
"landing:generate:importmap": "PAYLOAD_CONFIG_PATH=apps/landing/src/payload.config.ts payload generate:importmap",
"landing:generate:types": "PAYLOAD_CONFIG_PATH=apps/landing/src/payload.config.ts payload generate:types",
"ui:test": "nx test ui",
@@ -30,13 +29,10 @@
"@ant-design/icons": "^6.0.0",
"@hookform/resolvers": "^5.0.1",
"@iconify/react": "^6.0.0",
"@marsidev/react-turnstile": "^1.1.0",
"@payloadcms/db-postgres": "^3.37.0",
"@payloadcms/next": "^3.37.0",
"@payloadcms/richtext-lexical": "^3.37.0",
"@payloadcms/storage-s3": "^3.37.0",
"@radix-ui/react-avatar": "^1.1.9",
"@radix-ui/react-select": "^2.2.5",
"@radix-ui/react-slot": "^1.2.0",
"@smithy/node-http-handler": "^4.0.4",
"@tanstack/react-query": "^5.74.4",
@@ -50,7 +46,6 @@
"js-cookie": "^3.0.5",
"next": "~15.2.4",
"next-themes": "^0.4.6",
"openapi-fetch": "^0.14.0",
"payload": "^3.37.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
@@ -60,8 +55,7 @@
"sharp": "^0.34.1",
"sonner": "^2.0.3",
"tailwind-merge": "^3.0.2",
"zod": "^3.24.2",
"zustand": "^5.0.4"
"zod": "^3.24.2"
},
"devDependencies": {
"@babel/core": "^7.14.5",