80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
export default function Header() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<header className="ux-header">
|
|
<div className="container">
|
|
<div className="ux-navbar">
|
|
|
|
<Link href="/">
|
|
<Image
|
|
src="/assets/images/footerlogo.png"
|
|
alt="Logo"
|
|
width={120}
|
|
height={40}
|
|
/>
|
|
</Link>
|
|
|
|
<ul className="ux-nav">
|
|
<li><Link href="/work">Work</Link></li>
|
|
<li><Link href="/services">Services</Link></li>
|
|
<li><Link href="/about">About</Link></li>
|
|
<li><Link href="/process">Process</Link></li>
|
|
|
|
{/* ⚠️ FIX */}
|
|
<li className="ux-nav-cta">
|
|
<Link href="/start_project">Start a Project</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* TOGGLE BUTTON */}
|
|
<div
|
|
className="ux-menu"
|
|
onClick={() => setOpen(!open)}
|
|
>
|
|
<Image
|
|
className="icon open-icon"
|
|
src="/assets/images/menutoggle.svg"
|
|
alt="menu"
|
|
width={30}
|
|
height={30}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* RIGHT PANEL */}
|
|
<div className={`contact-panel ${open ? 'active' : ''}`}>
|
|
<h4>
|
|
<Image src="/assets/images/hello.svg" alt="hello" width={24} height={24} />
|
|
Say hello!
|
|
</h4>
|
|
|
|
<div className="images">
|
|
<Image src="/assets/images/popup1.png" alt="" width={80} height={80} />
|
|
<Image src="/assets/images/popup2.png" alt="" width={80} height={80} />
|
|
<Image src="/assets/images/popup3.png" alt="" width={80} height={80} />
|
|
</div>
|
|
|
|
<p>
|
|
<Image src="/assets/images/location.svg" alt="location" width={18} height={18} />
|
|
<span>410 Sandtown, California 94001, USA</span>
|
|
</p>
|
|
|
|
<p>
|
|
<Image src="/assets/images/email.svg" alt="email" width={18} height={18} />
|
|
<span> info@example.com</span>
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
} |