update landing
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
eb039a3ca4
commit
d969a83690
|
|
@ -24,7 +24,9 @@ import {
|
|||
const LANDING_SECTION_IDS = new Set(["products", "services"]);
|
||||
|
||||
function scrollToSectionId(id: string) {
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
document
|
||||
.getElementById(id)
|
||||
?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
|
||||
export type LandingSiteNavProps = {
|
||||
|
|
@ -46,6 +48,7 @@ export default function LandingSiteNav({
|
|||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [openKonten, setOpenKonten] = useState(false);
|
||||
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
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 = (
|
||||
<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
|
||||
|
|
@ -96,8 +119,11 @@ export default function LandingSiteNav({
|
|||
return (
|
||||
<>
|
||||
<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"
|
||||
aria-label="Main"
|
||||
className={`fixed top-0 left-0 right-0 z-100 w-full transition-all duration-300 ${
|
||||
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">
|
||||
<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">
|
||||
{searchFormAction ? (
|
||||
<form
|
||||
method="get"
|
||||
action={searchFormAction}
|
||||
className="contents"
|
||||
>
|
||||
<form method="get" action={searchFormAction} className="contents">
|
||||
{searchField}
|
||||
</form>
|
||||
) : (
|
||||
|
|
@ -126,9 +148,16 @@ export default function LandingSiteNav({
|
|||
|
||||
<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
|
||||
</button>
|
||||
|
||||
|
|
@ -140,9 +169,14 @@ export default function LandingSiteNav({
|
|||
<button
|
||||
type="button"
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -158,132 +192,169 @@ export default function LandingSiteNav({
|
|||
/>
|
||||
) : null}
|
||||
|
||||
<aside
|
||||
className={`fixed top-0 right-0 z-[100] h-full w-[280px] bg-[#966314] text-white transition-transform duration-300 ${
|
||||
open ? "translate-x-0" : "translate-x-full"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-white/20 p-6">
|
||||
<div className="flex rounded-full bg-white text-sm font-semibold text-[#966314]">
|
||||
<button type="button" className="rounded-full bg-white px-3 py-1">
|
||||
ID
|
||||
</button>
|
||||
<button type="button" className="px-3 py-1">
|
||||
EN
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="button" onClick={() => setOpen(false)}>
|
||||
<X />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex flex-col gap-6 overflow-y-auto p-6 text-sm font-medium">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full border-0 bg-transparent p-0 text-left text-inherit"
|
||||
onClick={goHome}
|
||||
>
|
||||
<MenuItem icon={<Home size={18} />} label="Home" />
|
||||
</button>
|
||||
|
||||
{newsHub ? (
|
||||
<div className="-mt-2 border-b border-white/20 pb-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between border-0 bg-transparent py-1 text-left text-inherit"
|
||||
onClick={() => setOpenKonten((v) => !v)}
|
||||
>
|
||||
<span>Konten</span>
|
||||
<ChevronDown
|
||||
size={18}
|
||||
className={`transition-transform ${openKonten ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
className={`mt-2 space-y-1 overflow-hidden pl-2 transition-all ${
|
||||
openKonten ? "max-h-60 opacity-100" : "max-h-0 opacity-0"
|
||||
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 ? "opacity-100 visible" : "opacity-0 invisible"
|
||||
}`}
|
||||
>
|
||||
<div className="flex h-full flex-col p-10">
|
||||
{/* TOP BAR */}
|
||||
<div className="flex justify-end items-end mb-10">
|
||||
<button onClick={() => setOpen(false)}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* MENU */}
|
||||
<div className="grid grid-cols-2 gap-16 flex-1">
|
||||
<div className="flex flex-col gap-6 text-2xl font-semibold">
|
||||
<MenuItem
|
||||
icon={<Home size={22} />}
|
||||
label="Home"
|
||||
onClick={goHome}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
icon={<Box size={22} />}
|
||||
label="Product"
|
||||
onClick={() => setActiveMenu("product")}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
icon={<Briefcase size={22} />}
|
||||
label="Services"
|
||||
onClick={() => setActiveMenu("services")}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
icon={<Newspaper size={22} />}
|
||||
label="News and Services"
|
||||
onClick={() => setActiveMenu("news&services")}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
icon={<LogIn size={22} />}
|
||||
label="Login"
|
||||
onClick={() => router.push("/auth")}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-start pt-4">
|
||||
{activeMenu === "product" && (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm opacity-70">Product</p>
|
||||
|
||||
<p className="text-lg font-semibold cursor-pointer hover:underline">
|
||||
MediaHUB Content Aggregator
|
||||
</p>
|
||||
<p className="text-lg font-semibold cursor-pointer hover:underline">
|
||||
Multipool Reputation Management
|
||||
</p>
|
||||
<p className="text-lg font-semibold cursor-pointer hover:underline">
|
||||
PR Room Opinion Management
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeMenu === "services" && (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm opacity-70">Services</p>
|
||||
|
||||
<p className="text-lg font-semibold cursor-pointer hover:underline">
|
||||
Artifintel
|
||||
</p>
|
||||
<p className="text-lg font-semibold cursor-pointer hover:underline">
|
||||
Produksi Video Animasi
|
||||
</p>
|
||||
<p className="text-lg font-semibold cursor-pointer hover:underline">
|
||||
Reelithic
|
||||
</p>
|
||||
<p className="text-lg font-semibold cursor-pointer hover:underline">
|
||||
Qudoin
|
||||
</p>
|
||||
<p className="text-lg font-semibold cursor-pointer hover:underline">
|
||||
Talkshow Ai
|
||||
</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)}
|
||||
>
|
||||
<span className="flex items-center justify-between text-sm">
|
||||
Audio Visual <Video size={16} />
|
||||
</span>
|
||||
<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)}
|
||||
>
|
||||
<span className="flex items-center justify-between text-sm">
|
||||
Audio <Music size={16} />
|
||||
</span>
|
||||
<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)}
|
||||
>
|
||||
<span className="flex items-center justify-between text-sm">
|
||||
Foto <ImageIcon size={16} />
|
||||
</span>
|
||||
<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)}
|
||||
>
|
||||
<span className="flex items-center justify-between text-sm">
|
||||
Teks <FileText size={16} />
|
||||
</span>
|
||||
<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>
|
||||
) : null}
|
||||
|
||||
<button
|
||||
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>
|
||||
{/* 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>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -402,9 +402,6 @@ const SidebarContent = ({
|
|||
|
||||
<div className="space-y-2">
|
||||
{section.items?.map((item: any) => {
|
||||
// =============================
|
||||
// ITEM WITH CHILDREN (ACCORDION)
|
||||
// =============================
|
||||
if (item.children) {
|
||||
const isExpanded = openMenus.includes(item.title);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue