Feat/dimentorin landing page (#49)

* feat(dimentorin): slicing landing page menu mentoring

* feat(dimentorin): slicing landing page detail mentor

* feat(dimentorin): slicing modal booking mentor

* feat(dimentorin): slicing landing - resources page

* feat(dimentorin): slicing landing - articles page

* feat(dimentorin): slicing landing - detail articles page
This commit is contained in:
Muhamad Rijal
2025-07-28 23:26:22 +07:00
committed by GitHub
parent 228f92e9ed
commit f3a19fa460
44 changed files with 1952 additions and 23 deletions
@@ -2,8 +2,8 @@ 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";
import { FC, useMemo, useState } from "react";
import { Link, NavLink, useLocation } from "react-router-dom";
const MENUS: { label: string; href: string }[] = [
{ label: "Home", href: "/" },
@@ -30,8 +30,15 @@ export const Header: FC = () => {
else setShow(true)
})
const isActive = useMemo(() => {
return (path: string) => {
if (path === '/' && location.pathname !== '/') return false
return location.pathname.includes(path)
}
}, [location.pathname]);
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">
<div className={cn("w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky", !show && "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"
@@ -63,18 +70,22 @@ export const Header: FC = () => {
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"
isActive(menu.href) && "text-primary-500 hover:text-primary-500"
)}
>
<Link to={menu.href}>{menu.label}</Link>
<NavLink to={menu.href}>{menu.label}</NavLink>
</Button>
)}
</For>
<Button type="button" className="px-12 py-1 md:hidden">Login</Button>
<Link to="/auth/login">
<Button type="button" className="px-12 py-1 lg:hidden">Login</Button>
</Link>
</nav>
<div>
<Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
<Link to="/auth/login">
<Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
</Link>
<Button
type="button"
variant="text"