Compare commits
9 Commits
version_4_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| cc3950c348 | |||
| e865e78cba | |||
| edd8c98400 | |||
| 71fe2e377b | |||
| 1457c619db | |||
|
|
b4fbdf323c | ||
| 179c82d33b | |||
| d77a269fa2 | |||
| d6cc7bdadd |
@@ -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;
|
|
||||||
|
|||||||
@@ -5,15 +5,15 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||||
--background: #0a0a0a;
|
--background: #0d1117;
|
||||||
--card: #1a1a1a;
|
--card: #161b22;
|
||||||
--foreground: #f5f5f5;
|
--foreground: #c9d1d9;
|
||||||
--primary-cta: #ffdf7d;
|
--primary-cta: #58a6ff;
|
||||||
--primary-cta-text: #0a0a0a;
|
--primary-cta-text: #0d1117;
|
||||||
--secondary-cta: #1a1a1a;
|
--secondary-cta: #21262d;
|
||||||
--secondary-cta-text: #ffffff;
|
--secondary-cta-text: #c9d1d9;
|
||||||
--accent: #b8860b;
|
--accent: #3080d0;
|
||||||
--background-accent: #8b6914;
|
--background-accent: #1f3652;
|
||||||
|
|
||||||
/* @layout/border-radius/rounded */
|
/* @layout/border-radius/rounded */
|
||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export default function HomePage() {
|
|||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<SectionErrorBoundary name="hero">
|
<SectionErrorBoundary name="hero">
|
||||||
<HeroBrand
|
<HeroBrand
|
||||||
brand="Luxuryury"
|
brand="hoteeel "
|
||||||
description="Experience unparalleled elegance and world-clasrvice in the heart of the city."
|
description="Experience unparalleled elegance and world-clasrvice in the heart of the city."
|
||||||
primaryButton={{
|
primaryButton={{
|
||||||
text: "Book Your Stay",
|
text: "Book Your Stay",
|
||||||
|
|||||||
Reference in New Issue
Block a user