Compare commits
3 Commits
version_5_
...
version_6_
| Author | SHA1 | Date | |
|---|---|---|---|
| e865e78cba | |||
| edd8c98400 | |||
| 71fe2e377b |
@@ -1,123 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
interface NavbarFullscreenProps {
|
||||
logo: string;
|
||||
navItems: { name: string; href: string }[];
|
||||
ctaButton: { text: string; href: string };
|
||||
}
|
||||
|
||||
const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, onClose: () => void) => {
|
||||
if (href.startsWith("#")) {
|
||||
e.preventDefault();
|
||||
const element = document.getElementById(href.slice(1));
|
||||
element?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
const NavbarFullscreen = ({ logo, navItems, ctaButton }: NavbarFullscreenProps) => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape" && menuOpen) setMenuOpen(false);
|
||||
};
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [menuOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (menuOpen) {
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = "";
|
||||
};
|
||||
}, [menuOpen]);
|
||||
|
||||
return (
|
||||
<nav className="fixed inset-0 z-1000 pointer-events-none">
|
||||
<div className="absolute z-10 top-5 left-1/2 -translate-x-1/2 flex items-center justify-between w-content-width pointer-events-auto">
|
||||
<a
|
||||
href="/"
|
||||
className={cls(
|
||||
"text-xl font-medium transition-colors duration-500",
|
||||
menuOpen ? "text-background" : "text-foreground"
|
||||
)}
|
||||
>
|
||||
{logo}
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-2 xl:gap-3 2xl:gap-4">
|
||||
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} />
|
||||
|
||||
<button
|
||||
className="relative flex items-center justify-center size-9 rounded cursor-pointer primary-button"
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
<span
|
||||
className={cls(
|
||||
"absolute w-3 h-px bg-primary-cta-text transition-all duration-300",
|
||||
menuOpen ? "rotate-45" : "-translate-y-1"
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cls(
|
||||
"absolute w-3 h-px bg-primary-cta-text transition-all duration-300",
|
||||
menuOpen ? "-rotate-45" : "translate-y-1"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute inset-0 flex flex-col items-center justify-center bg-foreground pointer-events-auto transition-[clip-path] duration-700 ease-[cubic-bezier(0.9,0,0.1,1)]"
|
||||
style={{
|
||||
clipPath: menuOpen
|
||||
? "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
|
||||
: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)"
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
{navItems.map((item, index) => (
|
||||
<div key={item.name} className="overflow-hidden">
|
||||
<a
|
||||
href={item.href}
|
||||
onClick={(e) => handleNavClick(e, item.href, () => setMenuOpen(false))}
|
||||
className="group flex items-center gap-4 py-4"
|
||||
style={{
|
||||
transform: menuOpen ? "translateY(0%)" : "translateY(100%)",
|
||||
transition: "transform 0.5s cubic-bezier(0.7, 0, 0.3, 1)",
|
||||
transitionDelay: menuOpen
|
||||
? `${0.3 + index * 0.05}s`
|
||||
: `${(navItems.length - 1 - index) * 0.05}s`
|
||||
}}
|
||||
>
|
||||
<span className="text-7xl md:text-9xl font-medium text-background group-hover:ml-4 transition-[margin] duration-300">
|
||||
{item.name}
|
||||
</span>
|
||||
<ArrowUpRight
|
||||
className="h-(--text-7xl) md:h-(--text-9xl) w-auto text-background group-hover:rotate-45 group-hover:mr-4 transition-all duration-300"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</a>
|
||||
{index < navItems.length - 1 && (
|
||||
<div className="h-px bg-background/20" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavbarFullscreen;
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface TagProps {
|
||||
text: string;
|
||||
icon?: LucideIcon;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Tag = ({ text, icon: Icon, className = "" }: TagProps) => (
|
||||
<div className={cls("flex items-center gap-1 px-3 py-1 text-sm card rounded w-fit", className)}>
|
||||
{Icon && <Icon className="h-(--text-sm) w-auto" />}
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Tag;
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function HomePage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBrand
|
||||
brand="Luxuryury"
|
||||
brand="hoteeel "
|
||||
description="Experience unparalleled elegance and world-clasrvice in the heart of the city."
|
||||
primaryButton={{
|
||||
text: "Book Your Stay",
|
||||
|
||||
Reference in New Issue
Block a user