Compare commits

..
Author SHA1 Message Date
arraysid 2280bd6085 feat: enable rich colors for Toaster component in layout 2025-05-28 01:39:18 +07:00
arraysid d39960f446 fix: update password validation rules for clarity and consistency 2025-05-28 01:39:09 +07:00
arraysid 1c1c66fc0f feat: implement forgot password functionality with validation and UI components 2025-05-28 00:57:23 +07:00
arraysid 60f0e98476 feat: add base styles for borders and background to improve UI consistency 2025-05-28 00:49:54 +07:00
arraysid 472e02e0b0 refactor: clean up unused ThemeProvider code and CSS variables 2025-05-28 00:47:28 +07:00
arraysid 8d71173897 feat: add "Forgot Password?" link to the signin form 2025-05-27 16:35:59 +07:00
arraysid d2292a7fa0 feat: add signin link to the signup page 2025-05-27 16:35:51 +07:00
arraysid b655de92c0 feat: implement verification page 2025-05-27 16:22:24 +07:00
arraysid 761eb0963a feat: integrate Turnstile captcha verification in signup process 2025-05-27 13:49:02 +07:00
arraysid fc3c275fea feat: add signup page 2025-05-27 13:00:17 +07:00
arraysid 3527458bc9 refactor: replace hardcoded testimonials with dynamic data from JSON 2025-05-27 09:42:05 +07:00
arraysid a7a7abddd2 feat: implement HeroSection component with dynamic content and animations 2025-05-27 09:33:07 +07:00
arraysid 06c71e8dcd feat: update Footer component to use dynamic navigation and social links 2025-05-27 09:28:03 +07:00
arraysid 50b9380add feat: add CommunitySection component and integrate it into the main page 2025-05-27 09:27:58 +07:00
arraysid 9bd326d7ad fix: update text in CTASection for improved emphasis and consistency 2025-05-27 09:14:12 +07:00
arraysid 432a2d8d9e fix: update join URL in hero content for consistency 2025-05-27 09:11:57 +07:00
arraysid a9ec7e947f feat: add CTASection component with interactive elements and background pattern 2025-05-27 09:11:52 +07:00
arraysid a867891001 fix: update section ID from 'komunitas' to 'community' for consistency 2025-05-27 09:11:49 +07:00
arraysid 6850313fe3 feat: add TestimonialSection component and update testimonials data 2025-05-27 09:11:42 +07:00
arraysid c3c203b555 fix: replace text logo with LogoSimple component in Footer and restore Footer in Layout 2025-05-27 09:11:31 +07:00
arraysid 341b4eef98 fix: update font imports in layout components for consistency 2025-05-27 08:32:34 +07:00
arraysid d03deb2d91 fix: adjust grid gap in Communities component for better layout 2025-05-27 06:13:19 +07:00
arraysid 5f97352031 feat: add communites component and integrate social links from JSON data 2025-05-27 06:12:18 +07:00
arraysid 3b71a97d16 fix: correct link path for testimonial submission 2025-05-27 05:30:49 +07:00
arraysid 6e940d749a feat: implement testimonials display and add submission page 2025-05-27 05:30:07 +07:00
arraysid e971d33a05 fix: update navigations import to uppercase and add missing Testimoni entry 2025-05-27 05:16:32 +07:00
arraysid 0296a891eb feat: add HERO_CONTENT data and integrate into Hero component 2025-05-27 05:04:03 +07:00
arraysid 47c8a25574 feat: add signup button and page 2025-05-27 04:37:05 +07:00
arraysid 671a4f596b feat: implement EventsPage component with event listing and details 2025-05-27 04:28:44 +07:00
arraysid 8c8e2c646f fix: update label for tutorial stat in hero-stats.json 2025-05-27 04:12:51 +07:00
arraysid 035f7fa8cd feat: replace Image component with LogoSimple in Header and update Logo component to accept props 2025-05-27 04:11:18 +07:00
arraysid 0a4921f2ef fix: header style 2025-05-27 04:03:26 +07:00
arraysid dbaaddab2e feat: hide the footer 2025-05-27 03:47:45 +07:00
arraysid 6c640f1cd4 feat: add react query support 2025-05-27 03:40:32 +07:00
arraysid e6f1b80cd3 feat: move old components to __old__ dir 2025-05-27 03:38:35 +07:00
arraysid 5ca4caa0ba feat: update dependencies and enhance button and form components with new variants and context 2025-05-27 03:37:02 +07:00
arraysid 5e70f36a7e feat: expand theme colors in index.css for improved styling options 2025-05-27 03:36:49 +07:00
arraysid d009adcd70 feat: add Poppins font to the font utility 2025-05-27 03:35:52 +07:00
arraysid 92842c29bb feat: add signin 2025-05-27 03:35:41 +07:00
arraysid 684f299194 feat: replace Inter font with Bai Jamjuree in layout and add font utility 2025-05-27 02:33:04 +07:00
arraysid d5607b456b feat: implement cookie management for access and refresh tokens 2025-05-27 02:19:45 +07:00
arraysid bb9c2f30a8 feat: add auth layout 2025-05-27 02:16:02 +07:00
arraysid 6819c24c6a feat: movee landing providers 2025-05-27 02:12:16 +07:00
arraysid f05fd5331d feat: seperate landing layouts 2025-05-27 02:07:46 +07:00
arraysid b1d9a56dda feat: setup openapi libs for landing 2025-05-27 02:03:01 +07:00
110 changed files with 1014 additions and 3911 deletions
-33
View File
@@ -1,33 +0,0 @@
name: Deploy Landing
on:
push:
paths:
- 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v4
- name: Deploy via SSH
uses: appleboy/ssh-action@v1.0.3
with:
host: ${{ secrets.SSH_HOST }}
username: ${{ secrets.SSH_USER }}
key: ${{ secrets.SSH_KEY }}
port: ${{ secrets.SSH_PORT }}
script: |
set -e
if [ ! -d ~/imphnen-frontend-service ]; then
git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service
else
cd ~/imphnen-frontend-service && git pull
fi
echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" > ~/imphnen-frontend-service/apps/landing/.env
docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build
docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d
docker image prune -af
Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 351 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 511 KiB

@@ -1,154 +0,0 @@
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { cn } from '@imphnen-frontend-service/utils';
import { FC, useRef } from 'react';
import { motion, useInView, Variants } from 'framer-motion';
export const CTASection: FC = () => {
const ref = useRef(null)
const isInView = useInView(ref, { once: true, amount: 0.2 })
const containerVariants: Variants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
}
const scaleVariant: Variants = {
hidden: { scale: 0 },
visible: {
scale: 1,
transition: {
duration: 0.5,
ease: [0.25, 0.46, 0.45, 0.94],
},
},
}
const contentVariant: Variants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
ease: [0.25, 0.46, 0.45, 0.94],
},
},
}
return (
<section ref={ref} className="w-full mx-auto px-8 py-4 md:px-[60px] md:py-8 lg:px-20">
<motion.div
className="relative max-w-7xl mx-auto bg-white rounded-lg border-2 border-primary-200 py-20 overflow-hidden md:rounded-3xl lg:py-24"
variants={containerVariants}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
>
{/* Background gradients and shapes */}
<div className="absolute inset-0">
<motion.div
className={cn("absolute top-8 -left-14 size-28 bg-gradient-to-tl from-primary-400 to-primary-300 rounded-full",
"md:size-52 md:-top-20 md:-left-10 lg:size-72 lg:-top-16 lg:-left-14"
)}
variants={scaleVariant}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
/>
<motion.div
className={cn(
"absolute top-24 -right-14 size-[89px] bg-gradient-to-b from-primary-400 to-primary-300 rounded-full blur-[1.8px]",
"md:size-[182px] md:-right-24 md:blur-[2px] lg:size-[392px] lg:top-16 lg:-right-52 lg:blur-[4px]"
)}
variants={scaleVariant}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
/>
<motion.div
variants={scaleVariant}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
className={cn(
"absolute bottom-10 -left-[88px] size-28 bg-primary-200 rounded-full flex justify-center items-center",
"md:size-56 md:-bottom-28 md:-left-28 lg:size-[274px] lg:-bottom-24 lg:-left-24"
)}
>
<motion.div
initial={{ scale: 0 }}
animate={{ scale: isInView ? 1 : 0 }}
transition={{ duration: 0.3, delay: 0.1 }}
className="size-[72px] bg-primary-50 rounded-full md:size-40 lg:size-[200px]"
/>
</motion.div>
<div
className={cn(
"absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-primary-400 via-primary-200 opacity-90",
"md:h-[22%] md:opacity-85 lg:h-1/4"
)}
/>
</div>
<motion.img
src="/logos/logo.svg"
alt="IMPHNEN Logo"
className="relative w-28 mx-auto mb-8 md:w-[186px]"
variants={contentVariant}
/>
<div className="relative mb-8 max-w-52 mx-auto md:max-w-[446px] lg:max-w-[688px]">
<motion.h1
className={cn(
"mb-3 text-xl text-center font-semibold leading-tight text-primary-500",
"md:text-4xl md:mb-2 lg:text-5xl lg:font-bold"
)}
variants={contentVariant}
>
Start Your IT Journey Now!
</motion.h1>
<motion.p
className={cn(
"mb-6 text-[15px] font-medium text-center leading-tight text-primary-400",
"md:text-2xl md:mb-8 lg:text-[29px]"
)}
variants={contentVariant}
>
Jangan biarkan progress mu hanya jadi side story!
</motion.p>
<motion.p
className={cn(
"text-xs font-semibold text-center leading-tight text-primary-400",
"md:text-[19px] lg:text-[23px] lg:max-w-[628px] lg:mx-auto"
)}
variants={contentVariant}
>
Dapatkan mentor terbaik dan gunakan AI untuk belajar lebih cepat. Waktunya jadi protagonist dalam perjalanan IT-mu!
</motion.p>
</div>
<motion.div
className="relative max-w-52 mx-auto space-y-3 md:max-w-full md:flex md:gap-x-6 md:justify-center md:space-y-0 md:items-center"
variants={contentVariant}
>
<Button
type="button"
className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
>
Mulai Belajar Dengan AI
</Button>
<Button
type="button"
variant="secondary"
className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
>
Temukan Mentor
</Button>
</motion.div>
</motion.div>
</section>
)
}
@@ -1,114 +0,0 @@
import { Button } from '@imphnen-frontend-service/ui/atoms'
import { Accordion, AccordionOptions } from '@imphnen-frontend-service/ui/molecules'
import { FC, useRef } from 'react'
import { motion, useInView, Variants } from 'framer-motion'
import { cn, For } from '@imphnen-frontend-service/utils'
const FAQ_DATA: AccordionOptions[] = [
{ title: 'Apakah saya bisa memilih mentor sendiri?', description: 'Tentu! Kamu bisa memilih mentor yang sesuai dengan kebutuhan dan level skill kamu.' },
{ title: 'Apakah mentoring ini cocok untuk pemula?', description: 'Yap! Baik newbie maupun seasoned dev bisa menemukan mentor yang pas untuk mempercepat progres belajarnya.' },
{ title: 'Apakah ini seperti sekolah coding biasa?', description: 'Nope! Ini lebih dari sekadar kursus-kursus AI guide dan mentor berpengalaman, kamu mendapatkan pengalaman belajar yang jauh lebih personal dan efektif.' },
]
export const FAQSection: FC = () => {
const ref = useRef(null)
const isInView = useInView(ref, { once: true, amount: 0.2 })
const containerVariants: Variants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
}
const childVariants: Variants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.4,
ease: [0.25, 0.46, 0.45, 0.94],
},
},
}
return (
<section ref={ref} className="relative mx-auto py-4 px-8 overflow-x-clip md:py-8 md:px-[60px] lg:px-20 md:pb-8">
{/* Background shapes */}
<div className="absolute inset-0">
<motion.div
initial={{ scale: 0 }}
animate={{ scale: isInView ? 1 : 0 }}
transition={{ duration: 0.5 }}
className={cn(
"absolute -top-10 -right-14 size-60 bg-primary-200 rounded-full justify-center items-center hidden",
"md:flex lg:size-[344px] lg:top-48 lg:-right-[88px]"
)}
>
<motion.div
initial={{ scale: 0 }}
animate={{ scale: isInView ? 1 : 0 }}
transition={{ duration: 0.3, delay: 0.1 }}
className="size-[168px] bg-primary-50 rounded-full lg:size-64"
/>
</motion.div>
</div>
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="relative mb-6 flex justify-center md:mb-10"
>
<Button
type="button"
size="sm"
variant="bordered"
className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
>
Frequently Ask Question
</Button>
</motion.div>
<div
className={cn(
"relative grid max-w-7xl mx-auto gap-y-7 divide-y-2 divide-primary-200",
"md:grid-cols-11 md:gap-x-10 md:divide-y-0 md:divide-x-2 lg:grid-cols-7 lg:gap-x-[72px]"
)}
>
<motion.h1
className={cn(
"pb-7 text-2xl font-semibold text-primary-500 text-center leading-none",
"md:pe-10 md:pb-0 md:text-start md:col-span-5 lg:text-4xl lg:col-span-3 lg:pe-[72px]"
)}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
>
Console log for new developers
</motion.h1>
<motion.div
className="flex flex-col gap-4 md:col-span-6 lg:col-span-4"
variants={containerVariants}
animate={isInView ? "visible" : "hidden"}
>
<For data={FAQ_DATA}>
{(props) => (
<motion.div key={props.title} variants={childVariants}>
<Accordion {...props} />
</motion.div>
)}
</For>
</motion.div>
</div>
</section>
)
}
@@ -1,73 +0,0 @@
import { Button } from "@imphnen-frontend-service/ui/atoms";
import { motion } from 'framer-motion'
export function HeroSection() {
return (
<section className="relative w-full py-20 md:py-28 lg:py-32">
{/* Background gradients and shapes */}
<div className="absolute inset-0 -z-10 overflow-x-clip hidden md:block">
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="absolute top-10 -left-64 size-[448px] bg-primary-200 rounded-full justify-center items-center hidden lg:flex"
>
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.3, delay: 0.1 }}
viewport={{ once: true }}
className="size-[296px] bg-primary-50 rounded-full"
/>
</motion.div>
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="absolute top-3/5 -right-56 size-96 bg-primary-500 rounded-full flex justify-center items-center lg:top-1/2 lg:-right-64 lg:size-[600px]"
>
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.3, delay: 0.1 }}
viewport={{ once: true }}
className="size-64 bg-primary-50 rounded-full lg:size-[400px]"
/>
</motion.div>
<div className="absolute -top-28 -left-20 size-[248px] bg-radial from-primary-300 rounded-full blur-3xl" />
<div className="absolute top-0 -right-72 size-[480px] bg-radial from-primary-400 rounded-full blur-[80px]" />
</div>
<div className="flex flex-col items-center gap-y-10">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="flex flex-col items-center gap-y-6"
>
<h1 className="text-2xl font-semibold text-primary-500 md:text-4xl md:font-bold lg:text-5xl">DIMENTORIN</h1>
<p className="max-w-52 text-center font-semibold text-xl leading-tight text-primary-500 md:max-w-72 lg:text-4xl lg:max-w-lg">
Learn IT smarter with AI & expert mentors!
</p>
<p className="max-w-3xs text-xs text-neutral-500 text-center font-medium md:max-w-lg md:text-base lg:text-lg lg:max-w-[646px]">
Apakah kamu siap untuk grind skill TI-mu ke level Ultimate? Dengan AI sebagai navigator dan mentor profesional sebagai sensei-mu, perjalanan belajarmu akan lebih cepat, efektif, dan penuh EXP!
</p>
</motion.div>
<motion.div initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }} viewport={{ once: true }}>
<Button
type="button"
size="sm"
className="text-[10px] h-auto px-2.5 py-2 md:text-sm"
>
Belajar Dengan AI Sekarang
</Button>
</motion.div>
</div>
</section>
)
}
@@ -1,113 +0,0 @@
import { Button } from '@imphnen-frontend-service/ui/atoms'
import { For } from '@imphnen-frontend-service/utils'
import { FC, useRef } from 'react'
import { motion, useInView, Variants } from 'framer-motion'
import { StarFilled } from '@ant-design/icons'
export const TestimonialSection: FC = () => {
const ref = useRef(null)
const isInView = useInView(ref, { once: true, amount: 0.2 })
const containerVariants: Variants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
}
const childVariants: Variants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.4,
ease: [0.25, 0.46, 0.45, 0.94],
},
},
}
return (
<section ref={ref} className="mx-auto py-4 md:py-8 xl:px-20">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="flex justify-center"
>
<Button
type="button"
size="sm"
variant="bordered"
className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
>
Testimonial
</Button>
</motion.div>
<motion.h1
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="my-6 text-lg font-semibold mx-auto text-center text-primary-500 md:text-2xl lg:my-10 lg:text-4xl"
>
Words from our dellow devs
</motion.h1>
<div className="scrollbar-hide w-full mx-auto max-w-7xl px-8 overflow-auto md:px-[60px] xl:px-0">
<motion.div
className="mb-2 flex gap-x-5 min-w-max w-auto md:gap-x-6 xl:min-w-full xl:max-w-7xl xl:grid xl:grid-cols-2"
variants={containerVariants}
initial="hidden"
animate={isInView ? 'visible' : 'hidden'}
>
<For data={Array.from({ length: 2 })}>
{(_, index) => (
<motion.div
key={index}
variants={childVariants}
className="flex flex-col gap-6 p-6 w-52 bg-white rounded-xl shadow-md md:w-xl md:flex-row md:gap-8 xl:w-full"
>
<div className="w-full aspect-[8/7] rounded-lg overflow-hidden md:w-40 md:aspect-[7/6] lg:aspect-square">
<img
src="/image/testimonial.webp"
alt="Testimonial"
className="w-full object-cover"
/>
</div>
<div className="flex-1">
<h3 className="mb-3 font-semibold text-primary-500 md:text-lg lg:text-2xl">
Riko, Junior Web Developer
</h3>
<p className="mb-6 text-[10px] text-neutral-500 font-medium md:text-sm lg:text-base">
Rasanya seperti punya AI waifu yang ngajarin ngoding! Mentoringnya juga super insightful. Thanks, Dimentorin!
</p>
<motion.div className="w-max" whileHover={{ scale: 1.1, rotate: -3 }}>
<Button
type="button"
size="sm"
variant="bordered"
className="bg-primary-50 flex items-center gap-x-2 h-auto px-2 py-1 hover:bg-primary-50"
>
<StarFilled className="md:text-lg" />
<span>
<span className="text-sm font-medium md:text-lg md:font-semibold lg:text-xl">4.8</span>
<span className="text-[10px] text-primary-300 md:text-sm md:font-medium lg:text-base">/5.0</span>
</span>
</Button>
</motion.div>
</div>
</motion.div>
)}
</For>
</motion.div>
</div>
</section>
)
}
@@ -1,84 +0,0 @@
import { Button } from "@imphnen-frontend-service/ui/atoms";
import { For } from "@imphnen-frontend-service/utils";
import { FC, useRef } from "react";
import { motion, useInView, Variants } from 'framer-motion'
const OFFERS: { title: string; description: string; image: string }[] = [
{ title: "AI-Powered Learning", description: "Level Up Instantly!", image: "/image/what-we-offer/ai-powered-learning.webp" },
{ title: "1-on-1 Mentoring", description: "Sensei dari Dunia Nyata!", image: "/image/what-we-offer/1-on-1-mentoring.webp" },
{ title: "Community & Resources", description: "Connect dengan Fellow Devs!", image: "/image/what-we-offer/community.webp" },
]
export const WhatWeOfferSection: FC = () => {
const ref = useRef(null)
const isInView = useInView(ref, { once: true, amount: 0.2 })
const containerVariants: Variants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
}
const childVariants: Variants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.4,
ease: [0.25, 0.46, 0.45, 0.94],
},
},
}
return (
<section ref={ref} className="w-full mx-auto px-8 pb-4 md:px-[60px] lg:px-20 lg:pt-4">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="mb-6 flex justify-center lg:mb-10"
>
<Button
type="button"
size="sm"
variant="bordered"
className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
>
Apa yang Kami Tawarkan
</Button>
</motion.div>
<motion.div
className="grid gap-6 max-w-7xl mx-auto md:grid-cols-3"
variants={containerVariants}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
>
<For data={OFFERS}>
{(offer) => (
<motion.div
key={offer.title}
className="relative aspect-[16/10] overflow-hidden rounded-lg md:aspect-[24/35] lg:aspect-[6/7]"
variants={childVariants}
>
<img src={offer.image} alt={offer.title} className="size-full object-cover" />
<div
className="absolute bottom-0 inset-x-0 p-4 h-1/2 text-primary-50 bg-gradient-to-t from-primary-500 via-primary-500/80 flex flex-col items-center justify-end gap-y-1 md:items-start lg:px-6 lg:pb-8"
>
<p className="font-semibold lg:text-[26px] lg:font-bold">{offer.title}</p>
<p className="text-xs lg:text-[22px] lg:font-medium">{offer.description}</p>
</div>
</motion.div>
)}
</For>
</motion.div>
</section>
)
}
@@ -1,20 +0,0 @@
import { FC, ReactElement } from 'react';
import { HeroSection } from './_components/hero-section';
import { WhatWeOfferSection } from './_components/what-we-offer-section';
import { TestimonialSection } from './_components/testimonial-section';
import { FAQSection } from './_components/faq-section';
import { CTASection } from './_components/cta-section';
export const Components: FC = (): ReactElement => {
return (
<>
<HeroSection />
<WhatWeOfferSection />
<TestimonialSection />
<FAQSection />
<CTASection />
</>
);
};
export default Components;
@@ -1,157 +0,0 @@
import { DiscordOutlined, GithubOutlined, InstagramOutlined } from '@ant-design/icons';
import { cn, For } from '@imphnen-frontend-service/utils';
import React, { FC, useRef } from 'react';
import { Link } from 'react-router-dom';
import { motion, useInView, Variants } from 'framer-motion';
import { SteamIcon } from '../../_components/icons';
const PAGES: { label: string; href: string }[] = [
{ label: "Home", href: "/" },
{ label: 'Mentoring', href: '/mentoring' },
{ label: 'Resources', href: '/resources' },
{ label: 'Articles', href: '/articles' },
]
const COMMUNITY: { label: string; href: string; icon: React.ReactNode }[] = [
{ label: 'Discord', href: 'https://discord.gg/imphnen', icon: <DiscordOutlined /> },
{ label: 'Steam', href: 'https://steamcommunity.com/groups/IMPHNEN', icon: <SteamIcon /> },
{ label: 'Github', href: 'https://github.com/IMPHNEN', icon: <GithubOutlined /> },
{ label: 'Instagram', href: 'https://www.instagram.com/imphnen.dev', icon: <InstagramOutlined /> },
]
export const Footer: FC = () => {
const ref = useRef(null)
const isInView = useInView(ref, { once: true, amount: 0.2 })
const containerVariants: Variants = {
hidden: { opacity: 0 },
visible: { opacity: 1 },
}
const childVariants: Variants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
ease: [0.25, 0.46, 0.45, 0.94],
},
},
}
const mascotVariants: Variants = {
hidden: { opacity: 0, y: 20, rotate: -12 },
visible: {
opacity: 1,
y: 0,
rotate: 0,
transition: {
duration: 0.5,
ease: [0.25, 0.46, 0.45, 0.94],
},
},
}
const mascotTextVariants: Variants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.4,
delay: 0.4,
ease: [0.25, 0.46, 0.45, 0.94],
},
},
}
return (
<footer ref={ref} className="w-full mx-auto px-8 py-4 md:px-[60px] md:pt-8 md:pb-16 lg:px-20 lg:pb-20">
<motion.div
className={cn(
"relative max-w-7xl mx-auto px-10 py-8 bg-primary-500 text-primary-50 grid gap-10 rounded-lg",
"lg:grid-cols-3 lg:rounded-xl"
)}
variants={containerVariants}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
>
{/* Mascot */}
<motion.div
className="hidden absolute bottom-0 right-0 size-40 md:block lg:size-72"
variants={mascotVariants}
>
<motion.img
src="/image/mascot-character.webp"
alt="IMPHNEN Mascot"
className="w-full h-auto absolute inset-x-0 bottom-0"
/>
<motion.img
src="/image/mascot-text.webp"
alt="IMPHNEN Mascot"
className="w-4/6 absolute top-0 left-0"
variants={mascotTextVariants}
/>
</motion.div>
<div className="relative">
<div className="text-center lg:text-start lg:mb-16">
<motion.img
src="/logos/logo.svg"
alt="IMPHNEN Logo"
className="w-[84px] mb-6 mx-auto md:w-32 lg:w-40 lg:ms-0"
variants={childVariants}
/>
<motion.h4 className="mb-2 font-semibold text-[15px] md:mb-2.5 md:text-xl" variants={childVariants}>
Dimentorin by IMPHNEN
</motion.h4>
<motion.p className="font-medium text-xs md:text-[15px] md:max-w-[232px] md:mx-auto lg:ms-0" variants={childVariants}>
Karena Belajar IT Itu Harusnya Se-Seru Anime Favoritmu!
</motion.p>
</div>
<motion.p className="relative hidden text-xs font-medium text-[15px] lg:block" variants={childVariants}>
&copy; IMPHNEN {new Date().getFullYear()} All Rights Reserved
</motion.p>
</div>
<motion.div className="relative grid gap-10 md:flex md:justify-center lg:gap-x-20" variants={childVariants}>
<div className="text-center text-xs md:text-[15px] lg:text-start">
<h4 className="mb-5 font-medium md:mb-7 lg:text-xl">Pages</h4>
<ul className="font-semibold space-y-5">
<For data={PAGES}>
{({ label, href }) => (
<li key={label}>
<Link to={href}>{label}</Link>
</li>
)}
</For>
</ul>
</div>
<div className="text-center text-xs md:text-[15px] lg:text-start">
<h4 className="mb-5 font-medium md:mb-7 lg:text-xl">Join Our Community</h4>
<ul className="font-semibold space-y-5">
<For data={COMMUNITY}>
{({ label, href, icon }) => (
<li key={label}>
<Link to={href} target="_blank" className="flex items-center justify-center gap-x-3 lg:justify-start">
<span className="text-primary-900">{icon}</span>
<span>{label}</span>
</Link>
</li>
)}
</For>
</ul>
</div>
</motion.div>
<motion.p className="relative text-center text-xs font-medium md:text-[15px] lg:hidden" variants={childVariants}>
&copy; IMPHNEN {new Date().getFullYear()} All Rights Reserved
</motion.p>
</motion.div>
</footer>
)
}
@@ -1,93 +0,0 @@
import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
import { Button } from "@imphnen-frontend-service/ui/atoms";
import { cn, For, Show } from "@imphnen-frontend-service/utils";
import { motion, useMotionValueEvent, useScroll, Variants } from "framer-motion";
import { FC, useState } from "react";
import { Link, useLocation } from "react-router-dom";
const MENUS: { label: string; href: string }[] = [
{ label: "Home", href: "/" },
{ label: 'Mentoring', href: '/mentoring' },
{ label: 'Resources', href: '/resources' },
{ label: 'Articles', href: '/articles' },
]
export const Header: FC = () => {
const location = useLocation();
const { scrollY } = useScroll()
const [expandMenu, setExpandMenu] = useState(false);
const [show, setShow] = useState(true)
const headerVariants: Variants = {
hidden: { opacity: 0, y: -100 },
show: { opacity: 1, y: 0 },
};
useMotionValueEvent(scrollY, "change", (latest) => {
const prev = scrollY.getPrevious() || 0
if (latest > prev && latest > 100) setShow(false)
else setShow(true)
})
return (
<div className="w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky overflow-hidden">
<motion.header
className="bg-white shadow-lg rounded-lg h-12 flex justify-between w-full max-w-7xl xl:mx-auto md:h-[60px] lg:h-[71px]"
aria-roledescription="nav"
variants={headerVariants}
animate={show ? "show" : "hidden"}
transition={{ duration: 0.5, ease: "easeInOut" }}
>
<div className="flex w-full items-center justify-between p-4 md:px-8 md:py-2.5">
<div className="flex items-center">
<img
src="/logos/simple.svg"
alt="IMPHNEN Logo"
className="h-8 md:h-10 lg:h-[52px] w-auto"
/>
</div>
<nav
className={cn(
"flex flex-col items-center py-2 fixed top-24 bg-white shadow-lg rounded-lg transition-all duration-300",
"md:top-32 lg:static lg:py-0 lg:flex-row lg:bg-transparent lg:shadow-none lg:gap-x-4",
!expandMenu ? "-right-96" : "right-8 md:right-[60px]"
)}
>
<For data={MENUS}>
{(menu) => (
<Button
key={menu.label}
type="button"
variant="text"
className={cn(
"px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
location.pathname === menu.href && "text-primary-500 hover:text-primary-500"
)}
>
<Link to={menu.href}>{menu.label}</Link>
</Button>
)}
</For>
<Button type="button" className="px-12 py-1 md:hidden">Login</Button>
</nav>
<div>
<Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
<Button
type="button"
variant="text"
className={cn("transition-transform duration-300 rotate-0 lg:hidden", expandMenu && "rotate-90")}
onClick={() => setExpandMenu(prev => !prev)}
>
<Show condition={!expandMenu} fallback={<CloseOutlined />}>
<MenuOutlined />
</Show>
</Button>
</div>
</div>
</motion.header>
</div>
);
}
@@ -1,15 +0,0 @@
import { Outlet } from "react-router-dom";
import { Header } from "./_components/header";
import { Footer } from "./_components/footer";
export default function Layout() {
return (
<div className="flex min-h-screen flex-col bg-primary-50">
<Header />
<main className="flex-1 z-0">
<Outlet />
</main>
<Footer />
</div>
);
}
@@ -1 +0,0 @@
export * from './steam';
File diff suppressed because one or more lines are too long
@@ -1,10 +0,0 @@
import { useSendOTP } from '@imphnen-frontend-service/utils';
export const useResendOtpHook = () => {
const { resendOTP, isLoading } = useSendOTP();
return {
resendOTP
};
};
@@ -51,11 +51,6 @@ export const Components: FC = (): ReactElement => {
Daftar Disini
</a>
</div>
<div className='text-center w-full mb-1'>
<a href="/auth/register-mentor" className="text-primary-500 font-medium">
Daftar Sebagai Mentor
</a>
</div>
<div className="flex items-center w-full">
<div className="flex-grow border-t border-blue-400 opacity-50"></div>
<span className="px-3 text-blue-400">Or</span>
@@ -1,12 +0,0 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
export const AppLayout: FC = (): ReactElement => {
return (
<main className="bg-primary-50 min-h-screen">
<Outlet />
</main>
);
};
export default AppLayout;
@@ -1,242 +0,0 @@
import { FC, ReactElement, useState } from 'react';
import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
import { Button, Select } from '@imphnen-frontend-service/ui/atoms';
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
import { InputField, RegisterMentorStep, SelectField } from '@imphnen-frontend-service/ui/molecules';
export const Components: FC = (): ReactElement => {
const [ step, setStep ] = useState(1)
return (
<div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
<div className="bg-white xl:min-w-[1130px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
<RegisterResetBanner />
<div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
<div className="xl:w-[714px]">
<Button
className='xl:hidden gap-3'
variant='secondary'
>
<ArrowLeftOutlined />
Login
</Button>
<RegisterMentorStep step={step} />
<h3 className="mt-5 text-3xl font-semibold text-primary-500">
Register
</h3>
<h5 className="text-primary-500 font-medium">
Welcome to the team, Mentor - powered by IMPHNEN
</h5>
<form>
<div className={`${step !== 1 ? 'hidden' : ''}`}>
<div className='mt-7 mb-2'>
<InputField
label="Nama Lengkap"
size="lg"
className="w-full"
placeholder="Nama Lengkap"
name={'fullname'}
/>
</div>
<SelectField
label="Jenis Kelamin"
defaultValue=""
size="lg"
error=""
>
<option value="" disabled hidden>
Pilih Jenis Kelamin
</option>
<option value="laki-laki">Laki - Laki</option>
<option value="perempuan">Perempuan</option>
</SelectField>
<div className='my-2'>
<InputField
label="No Telp/Whatsapp Only"
size="lg"
className="w-full"
placeholder="Nama Lengkap"
name={'fullname'}
/>
</div>
<SelectField
label="Domisili"
defaultValue=""
size="lg"
error=""
>
<option value="" disabled hidden>
Pilih Domisili
</option>
<option value="aceh">Aceh</option>
<option value="jawa-selatan">Jawa Selatan</option>
</SelectField>
<div className='mt-2'>
<SelectField
label="Pendidikan Terakhir"
defaultValue=""
size="lg"
error=""
>
<option value="" disabled hidden>
Apa pendidikan terakhir senpai
</option>
<option value="SMA">SMA</option>
<option value="S1">S1</option>
<option value="S2">S2</option>
<option value="S3">S3</option>
</SelectField>
</div>
</div>
<div className={`${step !== 2 ? 'hidden' : ''}`}>
<div className='mt-7 mb-2 gap-2 flex flex-col'>
<InputField
label="Perusahaan Saat Ini"
size="lg"
className="w-full"
placeholder="Masukkan Perusahaan tempat kerja, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
name={'fullname'}
/>
<InputField
label="Masukan jabatan senpai di perusahaan"
size="lg"
className="w-full"
placeholder="Masukan jabatan senpai di perusahaan"
name={'fullname'}
/>
<SelectField
label="Topik Keahlian Yang Ingin Diajarkan"
defaultValue=""
size="lg"
error=""
>
<option value="" disabled hidden>
Apa yang ingin anda ajarkan senpaii
</option>
<option value="Frontend Developer">Frontend Developer</option>
<option value="Backend Developer">Backend Developer</option>
<option value="Other">Other</option>
</SelectField>
<InputField
label="Jika Mengisi “Other”, Tulis Topik yang Kamu Kuasai"
size="lg"
className="w-full"
placeholder="Tolong isi jika tidak ada di pilihan senpai"
name={'fullname'}
/>
<InputField
label="Skill Utama yang Kamu Miliki (boleh lebih dari satu)"
size="lg"
className="w-full"
placeholder="Isi Skill nya dong senpai"
name={'fullname'}
/>
</div>
</div>
<div className={`${step !== 3 ? 'hidden' : ''}`}>
<div className='mt-7 mb-2 gap-2 flex flex-col'>
<SelectField
label="Durasi Sesi Mentoring"
defaultValue=""
size="lg"
error=""
>
<option value="" disabled hidden>
Placeholder
</option>
</SelectField>
<SelectField
label="Format Pengajaran yang Anda Sediakan"
defaultValue=""
size="lg"
error=""
>
<option value="" disabled hidden>
Placeholder
</option>
</SelectField>
<InputField
type="file"
label="Unggah Curiculum Vitae"
size="lg"
className="w-full"
/>
<InputField
label="Unggah Portofolio"
size="lg"
className="w-full"
placeholder="Google Drive, Behance, GitHub, Notion, dan lainnya"
/>
<InputField
type='number'
label="Honorarium yang Diharapkan per Sesi (Online) Durasi rata-rata sesi: 2,53 jam"
size="lg"
className="w-full"
placeholder="Isi Nominalnya dong senpaiii!!!"
/>
<h6 className='text-xs'>Silahkan isi dalam angka (Contoh:500.000)</h6>
</div>
</div>
<div className={`${step !== 4 ? 'hidden' : ''}`}>
<div className='mt-7 mb-2 gap-2 flex flex-col'>
<InputField
type='email'
label="Email"
size="lg"
className="w-full"
placeholder="isi emailnya dong senpai!!!"
/>
<InputField
type='password'
label="Buat Password"
size="lg"
className="w-full"
placeholder="Buat Password"
/>
<InputField
type='password'
label="Buat Password"
size="lg"
className="w-full"
placeholder="Buat Password"
/>
</div>
</div>
<div className='flex justify-end mt-4 gap-2'>
<Button
variant='secondary'
onClick={() => setStep(step - 1)}
type='button'
className={`${step === 1 ? 'hidden' : ''}`}
>
<ArrowLeftOutlined />
Kembali
</Button>
<Button
variant='primary'
onClick={() => setStep(step + 1)}
type='button'
className={`${step === 4 ? 'hidden' : ''}`}
>
Lanjutkan
<ArrowRightOutlined />
</Button>
<Button
variant='primary'
onClick={() => setStep(step + 1)}
type='button'
className={`${step === 4 ? '' : 'hidden'}`}
>
Selesaikan
<ArrowRightOutlined />
</Button>
</div>
</form>
</div>
</div>
</div>
</div>
);
};
export default Components;
@@ -1,12 +0,0 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
export const AppLayout: FC = (): ReactElement => {
return (
<main className="bg-primary-50 min-h-screen">
<Outlet />
</main>
);
};
export default AppLayout;
File diff suppressed because one or more lines are too long
@@ -1,12 +0,0 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
export const AppLayout: FC = (): ReactElement => {
return (
<main className="bg-primary-50 min-h-screen">
<Outlet />
</main>
);
};
export default AppLayout;
@@ -1,57 +0,0 @@
import { FC, ReactElement, useEffect } from 'react';
import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { ArrowRightOutlined } from '@ant-design/icons';
export const Components: FC = (): ReactElement => {
return (
<div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
<div className="bg-white xl:min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
<RegisterResetBanner />
<div className="border-2 border-primary-500/50 xl:w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
<div className="xl:w-[704px] flex flex-col justify-center items-center">
<h2 className="text-4xl text-primary-500 font-semibold">
Register Akun Mentor Berhasil
</h2>
<h4 className="mt-3 text-primary-500 font-medium text-xl">
Akun Kamu Telah Berhasil Diverifikasi!
</h4>
<svg
width="198"
height="198"
viewBox="0 0 198 198"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="mt-10"
>
<circle cx="99" cy="99" r="99" fill="#BCF8B0" />
<rect
x="31.1152"
y="32.9141"
width="133.971"
height="133.971"
rx="66.9857"
fill="#35BA43"
/>
<path
d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
fill="#E0FBD8"
/>
</svg>
<h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
Kamu sekarang bisa login dan mulai menggunakan layanan kami. Selamat bergabung! SENPAIIII
</h4>
<a href="/auth/login">
<Button className="gap-3 mt-10" size="lg">
Masuk Jalur Mentor Isekai
<ArrowRightOutlined />
</Button>
</a>
</div>
</div>
</div>
</div>
);
};
export default Components;
@@ -1,38 +1,12 @@
import { FC, ReactElement, useEffect, useState } from 'react';
import { FC, ReactElement } from 'react';
import { ControlledInputField, RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
import { useOtpHook } from '../../../_hooks/use-otp';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { useSearchParams } from 'react-router-dom';
import { useResendOtpHook } from '../../../_hooks/use-resend-otp';
export const Components: FC = (): ReactElement => {
const { form, onSubmit, isLoading } = useOtpHook()
const [ searchParams ] = useSearchParams()
const [ disabled, setDisabled] = useState(true);
const [ timeLeft, setTimeLeft ] = useState(5 * 60);
const { resendOTP } = useResendOtpHook()
useEffect(() => {
if (disabled) {
const interval = setInterval(() => {
setTimeLeft(prev => {
if (prev <= 1) {
clearInterval(interval);
setDisabled(false);
return 0;
}
return prev - 1;
});
}, 1000);
return () => clearInterval(interval);
}
}, [disabled]);
const formatTime = (seconds: number) => {
const m = Math.floor(seconds / 60);
const s = seconds % 60;
return `${m}:${s.toString().padStart(2, '0')}`;
};
return (
<div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
@@ -52,13 +26,6 @@ export const Components: FC = (): ReactElement => {
maxLength={6}
control={form.control}
/>
<Button type="button" className="mt-2" disabled={disabled} onClick={
() => {
resendOTP({email: searchParams.get("email") || ""})
setDisabled(true)
setTimeLeft(5 * 60)
}
}>Kirim ulang otp {disabled? `(${formatTime(timeLeft)})`: ""}</Button>
<Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
</form>
</div>
+1 -6
View File
@@ -1,12 +1,7 @@
import { Navbar } from '@imphnen-frontend-service/ui/organisms';
import { FC, ReactElement } from 'react';
export const Components: FC = (): ReactElement => {
return (
<div className='bg-blue-50'>
<Navbar />
</div>
);
return <>Hallo</>;
};
export default Components;
-6
View File
@@ -119,9 +119,3 @@
font-weight: 400;
}
}
@layer utilities {
.scrollbar-hide::-webkit-scrollbar {
@apply hidden;
}
}
-3
View File
@@ -6,7 +6,6 @@ import {
add404PageToRoutesChildren,
addErrorElementToRoutes,
convertPagesToRoute,
ModalLoginProvider,
QueryProvider,
} from '@imphnen-frontend-service/utils';
import { Toaster } from 'sonner';
@@ -36,10 +35,8 @@ if (!rootElement) throw new Error('Failed to find the root element');
createRoot(rootElement).render(
<StrictMode>
<QueryProvider>
<ModalLoginProvider>
<Toaster position="top-right" />
<RouterProvider router={router} />
</ModalLoginProvider>
</QueryProvider>
</StrictMode>
);
-3
View File
@@ -14,9 +14,6 @@ const mappingPublicRoutes = [
'/auth/register/otp',
'/auth/register/success',
'/auth/new-password',
'/auth/register-mentor',
'/auth/register-mentor/pending',
'/auth/register-mentor/success'
];
const mappingRoutePermissions = [
+1 -3
View File
@@ -1,4 +1,2 @@
NEXT_PUBLIC_API_URL=
TURNSTILE_SECRET_KEY=
NEXT_PUBLIC_TURNSTILE_SITEKEY=
NEXT_PUBLIC_TURNSTILE_SITEKEY=1x00000000000000000000AA
-2
View File
@@ -1,10 +1,8 @@
const { composePlugins, withNx } = require('@nx/next');
const path = require('path');
/** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */
const nextConfig = {
nx: { svgr: false },
output: 'standalone',
};
module.exports = composePlugins(withNx)(nextConfig);
@@ -1,8 +1,6 @@
'use server';
import { fetcher } from '@/lib/fetcher';
import { getRemoteIp } from '@/lib/headers';
import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
import {
forgotPasswordValidationSchema,
ForgotPasswordValidationType,
@@ -12,14 +10,6 @@ export async function ForgotPasswordAction(
request: ForgotPasswordValidationType
) {
const validRequest = forgotPasswordValidationSchema.parse(request);
const remoteIp = await getRemoteIp();
const isCapchaValid = await fetchPostverifyTurnstile(
validRequest.token,
remoteIp
);
if (!isCapchaValid) throw new Error('Failed to verify captcha');
const { data, error } = await fetcher.POST('/v1/auth/forgot', {
body: {
@@ -27,6 +17,8 @@ export async function ForgotPasswordAction(
},
});
console.log(data, error);
if (error) throw new Error(error.message);
return data;
@@ -11,7 +11,7 @@ import {
Input,
} from '@components';
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
import { useRef, useState } from 'react';
import { useRef } from 'react';
import { LuLoader } from 'react-icons/lu';
import { useFormForgotPassword } from '../_hooks/use-form-forgot-password';
import { usePostForgotPassowrd } from '../_hooks/use-post-forgot-password';
@@ -20,41 +20,22 @@ import { ForgotPasswordValidationType } from '../_validation/forgot-password-val
export function ForgotPasswordForm() {
const ref = useRef<TurnstileInstance | null>(null);
const [step, setStep] = useState<number>(1);
const [emailValue, setEmailValue] = useState<string>('');
const form = useFormForgotPassword();
const { mutate, isPending, error } = usePostForgotPassowrd(form);
const handleFirstStep = (values: ForgotPasswordValidationType) => {
setEmailValue(values.email);
setStep(2);
};
const handleSecondStep = () => {
mutate({ email: emailValue, token: form.getValues('token') });
const onSubmit = (values: ForgotPasswordValidationType) => {
mutate(values);
};
return (
<Form {...form}>
<form
onSubmit={
step === 1
? form.handleSubmit(handleFirstStep)
: (e) => {
e.preventDefault();
handleSecondStep();
}
}
className="w-full space-y-4"
>
<form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-4">
{error && (
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
{(error as Error).message}
</div>
)}
{step === 1 && (
<FormField
control={form.control}
name="email"
@@ -68,26 +49,25 @@ export function ForgotPasswordForm() {
</FormItem>
)}
/>
)}
{step === 2 && (
<Turnstile
ref={ref}
siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
onSuccess={(token) => form.setValue('token', token)}
options={{ theme: 'light', size: 'flexible', language: 'id' }}
options={{
theme: 'light',
size: 'flexible',
language: 'id',
}}
/>
)}
<Button
type="submit"
disabled={isPending || (step === 2 && !form.watch('token'))}
disabled={isPending}
className="w-full hover:bg-[#5fbaef] bg-[#22a5f1] font-bold"
>
{isPending ? (
<LuLoader className="h-5 w-5 animate-spin" />
) : step === 1 ? (
'Selanjutnya'
) : (
'Reset password'
)}
@@ -10,11 +10,7 @@ export function usePostForgotPassowrd(
mutationFn: ForgotPasswordAction,
onSuccess: ({ message }) => {
form.reset();
toast.success(message);
},
onError: ({ message }) => {
form.reset();
toast.error(message);
toast(message);
},
});
}
@@ -1,28 +0,0 @@
'use server';
import { fetcher } from '@/lib/fetcher';
import {
resetPasswordValidationSchema,
ResetPasswordValidationSchema,
} from '../_validation/reset-password-validation';
export async function resetPasswordAction(
request: ResetPasswordValidationSchema
) {
const validRequest = resetPasswordValidationSchema.parse(request);
if (validRequest.confirm_password !== validRequest.confirm_password) {
throw new Error('Password missmatch');
}
const { data, error } = await fetcher.POST('/v1/auth/new-password', {
body: {
password: validRequest.password,
token: validRequest.token,
},
});
if (error) throw new Error(error.message);
return data;
}
@@ -1,73 +0,0 @@
'use client';
import {
Button,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@components';
import { LuLoaderCircle } from 'react-icons/lu';
import { usePostResetPassword } from '../_hooks/use-post-reset-password';
import { useResetPasswordForm } from '../_hooks/use-reset-password-form';
import { ResetPasswordValidationSchema } from '../_validation/reset-password-validation';
export function ResetPasswordForm() {
const form = useResetPasswordForm();
const { mutate, error, isPending } = usePostResetPassword(form);
const onSubmit = (values: ResetPasswordValidationSchema) => {
mutate(values);
};
return (
<Form {...form}>
{error && (
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm w-full">
{(error as Error).message}
</div>
)}
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-full">
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>New Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="confirm_password"
render={({ field }) => (
<FormItem>
<FormLabel>Confirm New Password</FormLabel>
<FormControl>
<Input type="password" placeholder="••••••••" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-full" disabled={isPending}>
{isPending ? (
<LuLoaderCircle className="size-5 animate-spin" />
) : (
'Ubah password'
)}
</Button>
</form>
</Form>
);
}
@@ -1,24 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { resetPasswordAction } from '../_actions/reset-password-actions';
import { useResetPasswordForm } from './use-reset-password-form';
export function usePostResetPassword(
form: ReturnType<typeof useResetPasswordForm>
) {
const router = useRouter();
return useMutation({
mutationFn: resetPasswordAction,
onSuccess: ({ message }) => {
form.reset();
router.replace('/signin');
toast.success(message);
},
onError: ({ message }) => {
form.reset();
toast.error(message);
},
});
}
@@ -1,22 +0,0 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import {
resetPasswordValidationSchema,
ResetPasswordValidationSchema,
} from '../_validation/reset-password-validation';
export function useResetPasswordForm() {
const searchParams = useSearchParams();
const tokenFromQuery = searchParams.get('token') ?? '';
return useForm<ResetPasswordValidationSchema>({
resolver: zodResolver(resetPasswordValidationSchema),
defaultValues: {
password: '',
confirm_password: '',
token: tokenFromQuery,
},
});
}
@@ -1,31 +0,0 @@
import { z } from 'zod';
export const resetPasswordValidationSchema = z
.object({
password: z
.string({
required_error: 'Password tidak boleh kosong',
invalid_type_error: 'Password harus berupa string',
})
.min(8, 'Password harus minimal 8 karakter')
.max(50, 'Password tidak boleh lebih dari 50 karakter')
.regex(
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).+$/,
'Password harus mengandung setidaknya satu huruf kapital, satu huruf kecil, satu angka, dan satu karakter spesial'
),
confirm_password: z
.string({
required_error: 'Konfirmasi password tidak boleh kosong',
})
.min(8, 'Konfirmasi password harus minimal 8 karakter')
.max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
token: z.string(),
})
.refine((data) => data.password === data.confirm_password, {
message: 'Password dan Konfirmasi Password harus sama',
path: ['confirm_password'],
});
export type ResetPasswordValidationSchema = z.infer<
typeof resetPasswordValidationSchema
>;
@@ -1,30 +0,0 @@
import { LogoSimple } from '@/app/_components/logo';
import { redirect } from 'next/navigation';
import { use } from 'react';
import { ResetPasswordForm } from './_components/reset-password-form';
export const dynamic = 'force-dynamic';
export default function Page({
searchParams,
}: {
searchParams: Promise<{ token?: string }>;
}) {
const { token } = use(searchParams);
if (!token) redirect('/signin');
return (
<>
<div className="flex flex-col items-center gap-4">
<LogoSimple />
<p className="text-muted-foreground text-center text-sm sm:text-base">
Ubah passwordmu
</p>
<ResetPasswordForm />
</div>
</>
);
}
@@ -8,6 +8,8 @@ import {
} from '../_validation/signin-validation';
export async function SigninAction(request: SignInValidationType) {
console.log(request);
const validRequest = signInValidationSchema.parse(request);
const { data } = await fetchPostSignin(validRequest);
@@ -1,6 +1,5 @@
import { useMutation } from '@tanstack/react-query';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { SigninAction } from '../_actions/signin-action';
import { useFormSignin } from './use-form-signin';
@@ -9,20 +8,11 @@ export function usePostSignin(form: ReturnType<typeof useFormSignin>) {
return useMutation({
mutationFn: SigninAction,
onSuccess: () => {
router.push('/');
},
onError: (error, variables) => {
onError: () => {
form.resetField('password');
if (error.message.includes('not active')) {
setTimeout(() => {
router.push(`/verification?ref=${variables.email}`);
}, 750);
}
toast.error(error.message);
},
});
}
@@ -1,23 +1,20 @@
'use server';
import { getRemoteIp } from '@/lib/headers';
import { z } from 'zod';
import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
import { fetchPostSignin } from '../_http/fetch-post-signup';
import { fetchPostverifyTurnstile } from '../_http/fetch-post-verify-turnstile';
import { signupValidationSchema } from '../_validation/signup-validation';
export async function SignupAction(
request: z.infer<typeof signupValidationSchema>
) {
const validRequest = signupValidationSchema.parse(request);
const remoteIp = await getRemoteIp();
const isCapchaValid = await fetchPostverifyTurnstile(
validRequest.token,
remoteIp
const isCapchaValidationValid = await fetchPostverifyTurnstile(
validRequest.token
);
if (!isCapchaValid) throw new Error('Failed to verify captcha');
if (!isCapchaValidationValid) throw new Error('Failed to verify captcha');
const data = await fetchPostSignin(validRequest);
@@ -1,8 +1,7 @@
'use server';
import { fetcher } from '@/lib/fetcher';
import { getRemoteIp } from '@/lib/headers';
import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
import { fetchPostverifyTurnstile } from '../_http/fetch-post-verify-turnstile';
import {
resendOTPValidationSchema,
type ResendOTPValidationType,
@@ -10,22 +9,20 @@ import {
export async function resendOTPAction(request: ResendOTPValidationType) {
const validRequest = resendOTPValidationSchema.parse(request);
const remoteIp = await getRemoteIp();
const isCapchaValid = await fetchPostverifyTurnstile(
validRequest.token,
remoteIp
const isCapchaValidationValid = await fetchPostverifyTurnstile(
validRequest.token
);
if (!isCapchaValid) throw new Error('Failed to verify captcha');
if (!isCapchaValidationValid) throw new Error('Failed to verify captcha');
const { data, error } = await fetcher.POST('/v1/auth/send-otp', {
const { data } = await fetcher.POST('/v1/auth/send-otp', {
body: {
email: validRequest.email,
},
});
if (error) throw new Error(error.message);
console.log(data);
return data;
return data?.message;
}

Some files were not shown because too many files have changed in this diff Show More