Fullscreen Navigation Menu

"use client"
import { useRef } from "react"
import FullScreenNav from "../components/ui/fullscreen-navigation-menu.tsx"

export default function Home() {
	const mainref = useRef<HTMLDivElement>(null)
	const socialLinks = [
		{ label: "Behance", href: "#" },
		{ label: "Dribbble", href: "#" },
		{ label: "LinkedIn", href: "#" },
		{ label: "Instagram", href: "#" },
	]

	const menuLinks = [
		{ label: "Visions", href: "#", img: "https://cdn.21st.dev/assets/mirror/c0/c0ff95f9ec7fea007b8236e8efddfcc6c0dfdd56f8e4c38c8ffed8fde655d8a7.jpg" },
		{ label: "Core", href: "#", img: "https://cdn.21st.dev/assets/mirror/c0/c0ff95f9ec7fea007b8236e8efddfcc6c0dfdd56f8e4c38c8ffed8fde655d8a7.jpg" },
		{ label: "Signals", href: "#", img: "https://cdn.21st.dev/assets/mirror/c0/c0ff95f9ec7fea007b8236e8efddfcc6c0dfdd56f8e4c38c8ffed8fde655d8a7.jpg" },
		{ label: "Connect", href: "#", img: "https://cdn.21st.dev/assets/mirror/c0/c0ff95f9ec7fea007b8236e8efddfcc6c0dfdd56f8e4c38c8ffed8fde655d8a7.jpg" },
	]
	return (
		<section className="w-screen h-screen overflow-hidden">
			<FullScreenNav
				menuLinks={menuLinks}
				socialLinks={socialLinks}
				mainRef={mainref}
			/>

			<div className=" w-full h-full " ref={mainref}>
				<section className="hero relative w-screen h-[100svh] flex items-end overflow-hidden p-2 md:p-[2.5em]">
					<div className="hero-img absolute w-full h-[100svh] z-[-1] left-0 top-0">
						<img
							src="https://cdn.21st.dev/assets/mirror/c0/c0ff95f9ec7fea007b8236e8efddfcc6c0dfdd56f8e4c38c8ffed8fde655d8a7.jpg"
							alt="bg"
							className="w-full h-full object-cover object-center"
						/>
					</div>
					<div className="w-full flex flex-col justify-end gap-2 max-w-[600px]">
						<h1 className="text-white text-[3rem] lg:text-[4rem] font-normal tracking-[-0.2rem] leading-[1]">
							Architecture from
							<br />
							the void.
						</h1>
						<p className="text-white/80 font-light tracking-tight text-sm md:text-base">
							An unorthodox approach to digital architecture.
							<br />
							Unstruct brings a new perspective to the world of digital
							architecture.
						</p>
						<div className="w-full h-px bg-white/60" />
						<button className="px-6 py-1.5 rounded-md bg-white text-black cursor-pointer mt-3 font-medium hover:opacity-80 duration-300 w-max">
							Learn more
						</button>
					</div>
				</section>
			</div>
		</section>
	)
}