qudo-project
/
qudoco-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update landing
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Anang Yusman 2026-04-16 15:34:49 +08:00
parent eb039a3ca4
commit d969a83690
2 changed files with 200 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

329
components/landing-page/landing-site-nav.tsx
View File

@ -24,7 +24,9 @@ import {
const LANDING_SECTION_IDS = new Set(["products", "services"]); const LANDING_SECTION_IDS = new Set(["products", "services"]);
function scrollToSectionId(id: string) { function scrollToSectionId(id: string) {
document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" }); document
.getElementById(id)
?.scrollIntoView({ behavior: "smooth", block: "start" });
} }
export type LandingSiteNavProps = { export type LandingSiteNavProps = {
@ -46,6 +48,7 @@ export default function LandingSiteNav({
const router = useRouter(); const router = useRouter();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [openKonten, setOpenKonten] = useState(false); const [openKonten, setOpenKonten] = useState(false);
const [activeMenu, setActiveMenu] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
if (pathname !== "/") return; if (pathname !== "/") return;
@ -77,6 +80,26 @@ export default function LandingSiteNav({
} }
}; };
function MenuItem({
icon,
label,
onClick,
}: {
icon: React.ReactNode;
label: string;
onClick?: () => void;
}) {
return (
<div
onClick={onClick}
className="flex cursor-pointer items-center gap-3 border-white/20 pb-3 hover:opacity-80"
>
{icon}
<span>{label}</span>
</div>
);
}
const searchField = ( const searchField = (
<div className="relative min-w-0 max-w-[min(100%,11rem)] flex-1 sm:max-w-none sm:flex-initial md:w-56 lg:w-64"> <div className="relative min-w-0 max-w-[min(100%,11rem)] flex-1 sm:max-w-none sm:flex-initial md:w-56 lg:w-64">
<Search <Search
@ -96,8 +119,11 @@ export default function LandingSiteNav({
return ( return (
<> <>
<nav <nav
className="fixed top-0 left-0 right-0 z-30 w-full border-b border-gray-100 bg-white/95 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-white/80" className={`fixed top-0 left-0 right-0 z-100 w-full transition-all duration-300 ${
aria-label="Main" open
? "bg-[#966314] text-white border-none"
: "bg-white/95 text-gray-900 border-b border-gray-100"
}`}
> >
<div className="container mx-auto flex items-center justify-between gap-4 px-4 py-4 md:px-6"> <div className="container mx-auto flex items-center justify-between gap-4 px-4 py-4 md:px-6">
<Link href="/" className="shrink-0"> <Link href="/" className="shrink-0">
@ -113,11 +139,7 @@ export default function LandingSiteNav({
<div className="flex min-w-0 flex-1 items-center justify-end gap-3 md:gap-5"> <div className="flex min-w-0 flex-1 items-center justify-end gap-3 md:gap-5">
{searchFormAction ? ( {searchFormAction ? (
<form <form method="get" action={searchFormAction} className="contents">
method="get"
action={searchFormAction}
className="contents"
>
{searchField} {searchField}
</form> </form>
) : ( ) : (
@ -126,9 +148,16 @@ export default function LandingSiteNav({
<button <button
type="button" type="button"
className="hidden items-center gap-2 text-sm text-gray-800 sm:flex" className={`hidden items-center gap-2 text-sm sm:flex ${
open ? " text-white" : " text-black "
}`}
> >
<Globe className="size-[18px] text-gray-600" strokeWidth={1.75} /> <Globe
className={`size-[18px] ${
open ? " text-white" : " text-black "
}`}
strokeWidth={1.75}
/>
English English
</button> </button>
@ -140,9 +169,14 @@ export default function LandingSiteNav({
<button <button
type="button" type="button"
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
className="flex items-center gap-2 text-sm font-semibold text-gray-900" className={`flex items-center gap-2 text-sm font-semibold ${
open ? " text-white" : " text-black "
}`}
> >
<Menu className="size-5 text-gray-900" strokeWidth={2} /> <Menu
className={`size-5 ${open ? " text-white" : " text-black "}`}
strokeWidth={2}
/>
Menu Menu
</button> </button>
</div> </div>
@ -158,132 +192,169 @@ export default function LandingSiteNav({
/> />
) : null} ) : null}
<aside <div
className={`fixed top-0 right-0 z-[100] h-full w-[280px] bg-[#966314] text-white transition-transform duration-300 ${ className={`fixed top-[80px] left-0 right-0 bottom-0 z-100 bg-gradient-to-bl from-[#966314] to-[#b07a1c] text-white transition-all duration-300 ${
open ? "translate-x-0" : "translate-x-full" open ? "opacity-100 visible" : "opacity-0 invisible"
}`} }`}
> >
<div className="flex items-center justify-between border-b border-white/20 p-6"> <div className="flex h-full flex-col p-10">
<div className="flex rounded-full bg-white text-sm font-semibold text-[#966314]"> {/* TOP BAR */}
<button type="button" className="rounded-full bg-white px-3 py-1"> <div className="flex justify-end items-end mb-10">
ID <button onClick={() => setOpen(false)}>
</button> <X size={24} />
<button type="button" className="px-3 py-1">
EN
</button> </button>
</div> </div>
<button type="button" onClick={() => setOpen(false)}> {/* MENU */}
<X /> <div className="grid grid-cols-2 gap-16 flex-1">
</button> <div className="flex flex-col gap-6 text-2xl font-semibold">
</div> <MenuItem
icon={<Home size={22} />}
label="Home"
onClick={goHome}
/>
<nav className="flex flex-col gap-6 overflow-y-auto p-6 text-sm font-medium"> <MenuItem
<button icon={<Box size={22} />}
type="button" label="Product"
className="w-full border-0 bg-transparent p-0 text-left text-inherit" onClick={() => setActiveMenu("product")}
onClick={goHome} />
>
<MenuItem icon={<Home size={18} />} label="Home" />
</button>
{newsHub ? ( <MenuItem
<div className="-mt-2 border-b border-white/20 pb-2"> icon={<Briefcase size={22} />}
<button label="Services"
type="button" onClick={() => setActiveMenu("services")}
className="flex w-full items-center justify-between border-0 bg-transparent py-1 text-left text-inherit" />
onClick={() => setOpenKonten((v) => !v)}
> <MenuItem
<span>Konten</span> icon={<Newspaper size={22} />}
<ChevronDown label="News and Services"
size={18} onClick={() => setActiveMenu("news&services")}
className={`transition-transform ${openKonten ? "rotate-180" : ""}`} />
/>
</button> <MenuItem
<div icon={<LogIn size={22} />}
className={`mt-2 space-y-1 overflow-hidden pl-2 transition-all ${ label="Login"
openKonten ? "max-h-60 opacity-100" : "max-h-0 opacity-0" onClick={() => router.push("/auth")}
}`} />
> </div>
<Link <div className="flex flex-col justify-start pt-4">
href="/video/filter" {activeMenu === "product" && (
className="block rounded-md px-2 py-2 hover:bg-white/10" <div className="space-y-4">
onClick={() => setOpen(false)} <p className="text-sm opacity-70">Product</p>
>
<span className="flex items-center justify-between text-sm"> <p className="text-lg font-semibold cursor-pointer hover:underline">
Audio Visual <Video size={16} /> MediaHUB Content Aggregator
</span> </p>
</Link> <p className="text-lg font-semibold cursor-pointer hover:underline">
<Link Multipool Reputation Management
href="/audio/filter" </p>
className="block rounded-md px-2 py-2 hover:bg-white/10" <p className="text-lg font-semibold cursor-pointer hover:underline">
onClick={() => setOpen(false)} PR Room Opinion Management
> </p>
<span className="flex items-center justify-between text-sm"> </div>
Audio <Music size={16} /> )}
</span>
</Link> {activeMenu === "services" && (
<Link <div className="space-y-4">
href="/image/filter" <p className="text-sm opacity-70">Services</p>
className="block rounded-md px-2 py-2 hover:bg-white/10"
onClick={() => setOpen(false)} <p className="text-lg font-semibold cursor-pointer hover:underline">
> Artifintel
<span className="flex items-center justify-between text-sm"> </p>
Foto <ImageIcon size={16} /> <p className="text-lg font-semibold cursor-pointer hover:underline">
</span> Produksi Video Animasi
</Link> </p>
<Link <p className="text-lg font-semibold cursor-pointer hover:underline">
href="/document/filter" Reelithic
className="block rounded-md px-2 py-2 hover:bg-white/10" </p>
onClick={() => setOpen(false)} <p className="text-lg font-semibold cursor-pointer hover:underline">
> Qudoin
<span className="flex items-center justify-between text-sm"> </p>
Teks <FileText size={16} /> <p className="text-lg font-semibold cursor-pointer hover:underline">
</span> Talkshow Ai
</Link> </p>
</div>
)}
{activeMenu === "news&services" && (
<div className="space-y-4">
<p className="text-sm opacity-70">News & Services</p>
<Link
href="/news-services"
className="block rounded-md px-2 py-2 hover:bg-white/10"
onClick={() => setOpen(false)}
>
<p className="text-lg font-semibold cursor-pointer hover:underline">
Homepage News
</p>
</Link>
<Link
href="/video/filter"
className="block rounded-md px-2 py-2 hover:bg-white/10"
onClick={() => setOpen(false)}
>
<p className="text-lg font-semibold cursor-pointer hover:underline">
Audio Visual
</p>
</Link>
<Link
href="/audio/filter"
className="block rounded-md px-2 py-2 hover:bg-white/10"
onClick={() => setOpen(false)}
>
<p className="text-lg font-semibold cursor-pointer hover:underline">
Audio
</p>
</Link>
<Link
href="/image/filter"
className="block rounded-md px-2 py-2 hover:bg-white/10"
onClick={() => setOpen(false)}
>
<p className="text-lg font-semibold cursor-pointer hover:underline">
Foto
</p>
</Link>
<Link
href="/document/filter"
className="block rounded-md px-2 py-2 hover:bg-white/10"
onClick={() => setOpen(false)}
>
<p className="text-lg font-semibold cursor-pointer hover:underline">
Teks
</p>
</Link>
</div>
)}
</div>
</div>
<div className="mt-auto grid grid-cols-2 gap-10 pt-10">
{/* POPULAR */}
<div>
<p className="text-sm opacity-70 mb-3">POPULAR PAGES</p>
<ul className="space-y-2 text-sm">
<li>Berita 1...</li>
<li>Berita 2...</li>
<li>Berita 3...</li>
</ul>
</div>
{/* EVENT */}
<div>
<p className="text-sm opacity-70 mb-3">Upcoming Event</p>
<div className="bg-white/10 rounded-xl p-4 flex gap-3">
<div className="w-16 h-16 bg-white/20 rounded-md" />
<div>
<p className="font-semibold">2026 Internal Conference</p>
<p className="text-xs opacity-70">
Lorem ipsum dolor sit amet...
</p>
</div>
</div> </div>
</div> </div>
) : null} </div>
</div>
<button </div>
type="button"
className="w-full border-0 bg-transparent p-0 text-left text-inherit"
onClick={() => {
setOpen(false);
if (pathname === "/") {
scrollToSectionId("products");
} else {
router.push("/#products");
}
}}
>
<MenuItem icon={<Box size={18} />} label="Product" />
</button>
<button
type="button"
className="w-full border-0 bg-transparent p-0 text-left text-inherit"
onClick={() => {
setOpen(false);
if (pathname === "/") {
scrollToSectionId("services");
} else {
router.push("/#services");
}
}}
>
<MenuItem icon={<Briefcase size={18} />} label="Services" />
</button>
<Link href="/news-services?highlight=1" onClick={() => setOpen(false)}>
<MenuItem
icon={<Newspaper size={18} />}
label="News and Services"
/>
</Link>
<Link href="/auth" onClick={() => setOpen(false)}>
<MenuItem icon={<LogIn size={18} />} label="Login" />
</Link>
</nav>
</aside>
</> </>
); );
} }

3
components/landing-page/retracting-sidedar.tsx
View File

@ -402,9 +402,6 @@ const SidebarContent = ({
<div className="space-y-2"> <div className="space-y-2">
{section.items?.map((item: any) => { {section.items?.map((item: any) => {
// =============================
// ITEM WITH CHILDREN (ACCORDION)
// =============================
if (item.children) { if (item.children) {
const isExpanded = openMenus.includes(item.title); const isExpanded = openMenus.includes(item.title);