231 lines
7.7 KiB
TypeScript
231 lines
7.7 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";
|
|
import { Input } from "../ui/input";
|
|
import { Label } from "../ui/label";
|
|
import { Textarea } from "../ui/textarea";
|
|
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
|
|
|
|
export default function Header() {
|
|
const [open, setOpen] = useState(false);
|
|
const [contactOpen, setContactOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<header className="relative w-full bg-white overflow-hidden">
|
|
{/* SIDEBAR */}
|
|
<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>
|
|
|
|
{/* HERO */}
|
|
<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"
|
|
onClick={() => setContactOpen(true)}
|
|
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>
|
|
|
|
{/* CONTACT MODAL */}
|
|
{contactOpen && <ContactDialog onClose={() => setContactOpen(false)} />}
|
|
</>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
function ContactDialog({ onClose }: { onClose: () => void }) {
|
|
const [contactMethod, setContactMethod] = useState("office");
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[999] bg-black/40 backdrop-blur-sm flex items-end md:items-center justify-center">
|
|
{/* CONTAINER */}
|
|
<div
|
|
className="
|
|
w-full
|
|
h-[90vh] md:h-auto
|
|
md:max-w-2xl
|
|
bg-white
|
|
rounded-t-3xl md:rounded-2xl
|
|
p-5 md:p-8
|
|
shadow-2xl
|
|
relative
|
|
overflow-y-auto
|
|
"
|
|
>
|
|
{/* Close Button */}
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute right-4 top-4 md:right-6 md:top-6 text-gray-500 hover:text-black"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
|
|
{/* Header */}
|
|
<h2 className="text-xl md:text-2xl font-bold text-[#966314] mb-2">
|
|
Contact Us
|
|
</h2>
|
|
<p className="text-sm md:text-base text-gray-500 mb-6">
|
|
Select a contact method and fill in your personal information. We will
|
|
get back to you shortly.
|
|
</p>
|
|
|
|
{/* Contact Method */}
|
|
<div className="space-y-3 md:space-y-4 mb-6">
|
|
<RadioGroup
|
|
value={contactMethod}
|
|
onValueChange={setContactMethod}
|
|
className="space-y-3"
|
|
>
|
|
{/* Option 1 */}
|
|
<div
|
|
className={`flex items-start space-x-3 rounded-xl p-4 cursor-pointer border transition ${
|
|
contactMethod === "office" ? "border-[#966314]" : "border-muted"
|
|
}`}
|
|
>
|
|
<RadioGroupItem value="office" id="office" className="mt-1" />
|
|
<div className="space-y-1">
|
|
<Label htmlFor="office" className="font-medium cursor-pointer">
|
|
Office Presentation
|
|
</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Our team will come to your office for a presentation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Option 2 */}
|
|
<div
|
|
className={`flex items-start space-x-3 rounded-xl p-4 cursor-pointer border transition ${
|
|
contactMethod === "hais" ? "border-[#966314]" : "border-muted"
|
|
}`}
|
|
>
|
|
<RadioGroupItem value="hais" id="hais" className="mt-1" />
|
|
<div className="space-y-1">
|
|
<Label htmlFor="hais" className="font-medium cursor-pointer">
|
|
Via HAIs
|
|
</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Online consultation through HAIs platform.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="fullName">
|
|
Full Name <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input id="fullName" placeholder="Enter full name" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">
|
|
Email <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input id="email" type="email" placeholder="email@example.com" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">
|
|
Phone Number <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input id="phone" placeholder="08xx xxxx xxxx" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="company">
|
|
Company Name <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input id="company" placeholder="PT. Example Company" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 mt-4">
|
|
<Label htmlFor="message">Message / Requirement</Label>
|
|
<Textarea
|
|
id="message"
|
|
placeholder="Describe your needs or questions..."
|
|
className="min-h-[120px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Buttons */}
|
|
<div className="mt-6 flex flex-col-reverse md:flex-row gap-3 md:justify-end">
|
|
<button
|
|
onClick={onClose}
|
|
className="w-full md:w-auto rounded-xl border px-6 py-3 hover:bg-gray-100"
|
|
>
|
|
Cancel
|
|
</button>
|
|
|
|
<button className="w-full md:w-auto rounded-xl bg-[#966314] px-6 py-3 text-white hover:bg-[#7c520f]">
|
|
Send Request
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|