78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useState } from "react";
|
|
import { Menu, X, Home, Box, Briefcase, Newspaper } from "lucide-react";
|
|
|
|
export default function Header() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="relative w-full bg-white overflow-hidden">
|
|
<aside
|
|
className={`fixed right-0 top-0 z-50 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 className="rounded-full bg-white px-3 py-1">ID</button>
|
|
<button className="px-3 py-1">EN</button>
|
|
</div>
|
|
|
|
<button onClick={() => setOpen(false)}>
|
|
<X />
|
|
</button>
|
|
</div>
|
|
|
|
<nav className="flex flex-col gap-6 p-6 text-sm font-medium">
|
|
<MenuItem icon={<Home size={18} />} label="Home" />
|
|
<MenuItem icon={<Box size={18} />} label="Product" />
|
|
<MenuItem icon={<Briefcase size={18} />} label="Services" />
|
|
<MenuItem icon={<Newspaper size={18} />} label="News and Services" />
|
|
</nav>
|
|
</aside>
|
|
|
|
<div className="container mx-auto flex min-h-[90vh] items-center px-6">
|
|
<div className="flex-1 space-y-6">
|
|
<h1 className="text-4xl font-extrabold leading-tight md:text-6xl">
|
|
<span className="relative inline-block">
|
|
<span className="absolute bottom-1 left-0 h-3 w-full bg-[#966314]"></span>
|
|
<span className="relative">Beyond Expectations</span>
|
|
</span>
|
|
<br />
|
|
Build <span className="text-[#966314]">Reputation.</span>
|
|
</h1>
|
|
|
|
<Button
|
|
size="lg"
|
|
className="rounded-full bg-[#966314] px-8 py-6 text-base hover:bg-[#7c520f]"
|
|
>
|
|
Contact Us
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="relative hidden flex-1 justify-end md:flex">
|
|
<Image
|
|
src="/image/img1.png"
|
|
alt="Illustration"
|
|
width={520}
|
|
height={520}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
function MenuItem({ icon, label }: { icon: React.ReactNode; label: string }) {
|
|
return (
|
|
<div className="flex cursor-pointer items-center justify-between border-b border-white/20 pb-3">
|
|
<span>{label}</span>
|
|
{icon}
|
|
</div>
|
|
);
|
|
}
|