gnx/Hotel-Booking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Iliyan Angelov
2025-12-07 20:36:17 +02:00
parent 876af48145
commit b818d645a9
91 changed files with 3692 additions and 4501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Frontend/src/shared/components/ConfirmationDialog.tsx
View File

@@ -57,11 +57,11 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
{}
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div className="relative transform overflow-hidden rounded-sm bg-gradient-to-b from-white to-gray-50 text-left shadow-2xl border border-[#d4af37]/20 transition-all sm:my-8 sm:w-full sm:max-w-lg animate-fade-in">
<div className="relative transform overflow-hidden rounded-sm bg-gradient-to-b from-white to-gray-50 text-left shadow-2xl border border-[var(--luxury-gold)]/20 transition-all sm:my-8 sm:w-full sm:max-w-lg animate-fade-in">
{}
<button
onClick={onClose}
className="absolute right-4 top-4 text-gray-400 hover:text-[#d4af37] focus:outline-none focus:ring-2 focus:ring-[#d4af37]/50 rounded-sm p-1 transition-colors"
className="absolute right-4 top-4 text-gray-400 hover:text-[var(--luxury-gold)] focus:outline-none focus:ring-2 focus:ring-[var(--luxury-gold)]/50 rounded-sm p-1 transition-colors"
aria-label="Close"
>
<X className="w-5 h-5" />
@@ -74,8 +74,8 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
variant === 'danger'
? 'bg-red-100 border-2 border-red-200'
: variant === 'warning'
? 'bg-[#d4af37]/20 border-2 border-[#d4af37]/40'
: 'bg-[#d4af37]/20 border-2 border-[#d4af37]/40'
? 'bg-[var(--luxury-gold)]/20 border-2 border-[var(--luxury-gold)]/40'
: 'bg-[var(--luxury-gold)]/20 border-2 border-[var(--luxury-gold)]/40'
} sm:mx-0 sm:h-10 sm:w-10`}
>
<AlertTriangle
@@ -83,8 +83,8 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
variant === 'danger'
? 'text-red-600'
: variant === 'warning'
? 'text-[#d4af37]'
: 'text-[#d4af37]'
? 'text-[var(--luxury-gold)]'
: 'text-[var(--luxury-gold)]'
}`}
aria-hidden="true"
/>
@@ -111,8 +111,8 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
variant === 'danger'
? 'bg-red-600 hover:bg-red-700 focus:ring-red-500'
: variant === 'warning'
? 'bg-gradient-to-r from-[#d4af37] to-[#c9a227] hover:from-[#f5d76e] hover:to-[#d4af37] focus:ring-[#d4af37]'
: 'btn-luxury-primary focus:ring-[#d4af37]'
? 'bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] hover:from-[var(--luxury-gold-light)] hover:to-[var(--luxury-gold)] focus:ring-[var(--luxury-gold)]'
: 'btn-luxury-primary focus:ring-[var(--luxury-gold)]'
}`}
>
{isLoading ? (
@@ -147,7 +147,7 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
type="button"
onClick={onClose}
disabled={isLoading}
className="mt-3 inline-flex w-full justify-center rounded-sm bg-white/80 backdrop-blur-sm px-4 py-2.5 text-sm font-medium tracking-wide text-gray-700 shadow-sm border border-gray-300 hover:bg-white hover:border-[#d4af37]/30 hover:text-[#d4af37] sm:mt-0 sm:w-auto disabled:opacity-50 disabled:cursor-not-allowed transition-all"
className="mt-3 inline-flex w-full justify-center rounded-sm bg-white/80 backdrop-blur-sm px-4 py-2.5 text-sm font-medium tracking-wide text-gray-700 shadow-sm border border-gray-300 hover:bg-white hover:border-[var(--luxury-gold)]/30 hover:text-[var(--luxury-gold)] sm:mt-0 sm:w-auto disabled:opacity-50 disabled:cursor-not-allowed transition-all"
>
{cancelText}
</button>

24
Frontend/src/shared/components/CookieConsentBanner.tsx
View File

@@ -60,10 +60,10 @@ const CookieConsentBanner: React.FC = () => {
};
return (
<div className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4 pb-4 sm:px-6 sm:pb-6">
<div className="pointer-events-none fixed inset-x-0 bottom-0 z-[9998] flex justify-center px-4 pb-4 sm:px-6 sm:pb-6">
<div className="pointer-events-auto relative w-full max-w-4xl overflow-hidden rounded-2xl bg-gradient-to-r from-black/85 via-zinc-900/90 to-black/85 p-[1px] shadow-[0_24px_60px_rgba(0,0,0,0.8)]">
{}
<div className="absolute inset-0 rounded-2xl border border-[#d4af37]/40" />
<div className="absolute inset-0 rounded-2xl border border-[var(--luxury-gold)]/40" />
{}
<div className="pointer-events-none absolute -inset-8 bg-[radial-gradient(circle_at_top,_rgba(212,175,55,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(0,0,0,0.8),_transparent_60%)] opacity-80" />
@@ -71,8 +71,8 @@ const CookieConsentBanner: React.FC = () => {
<div className="relative flex flex-col gap-4 bg-gradient-to-br from-zinc-950/80 via-zinc-900/90 to-black/90 px-4 py-4 sm:px-6 sm:py-5 lg:px-8 lg:py-6 sm:flex-row sm:items-start sm:justify-between">
{}
<div className="space-y-3 sm:max-w-xl">
<div className="inline-flex items-center gap-2 rounded-full bg-black/60 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.16em] text-[#d4af37]/90 ring-1 ring-[#d4af37]/30">
<span className="h-1.5 w-1.5 rounded-full bg-[#d4af37]" />
<div className="inline-flex items-center gap-2 rounded-full bg-black/60 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.16em] text-[var(--luxury-gold)]/90 ring-1 ring-[var(--luxury-gold)]/30">
<span className="h-1.5 w-1.5 rounded-full bg-[var(--luxury-gold)]" />
Privacy Suite
</div>
@@ -90,14 +90,14 @@ const CookieConsentBanner: React.FC = () => {
<div className="flex flex-wrap items-center gap-3">
<button
type="button"
className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[#d4af37] underline underline-offset-4 hover:text-[#f6e7b4]"
className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--luxury-gold)] underline underline-offset-4 hover:text-[#f6e7b4]"
onClick={() => setShowDetails((prev) => !prev)}
>
{showDetails ? 'Hide detailed preferences' : 'Fine-tune preferences'}
</button>
<Link
to="/gdpr"
className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[#d4af37] underline underline-offset-4 hover:text-[#f6e7b4]"
className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--luxury-gold)] underline underline-offset-4 hover:text-[#f6e7b4]"
>
Data Privacy (GDPR)
</Link>
@@ -107,7 +107,7 @@ const CookieConsentBanner: React.FC = () => {
<div className="mt-1.5 space-y-3 rounded-xl bg-black/40 p-3 ring-1 ring-zinc-800/80 backdrop-blur-md sm:p-4">
<div className="flex flex-col gap-2 text-xs text-zinc-200 sm:text-[13px]">
<div className="flex items-start gap-3">
<div className="mt-0.5 h-4 w-4 rounded border border-[#d4af37]/50 bg-[#d4af37]/20" />
<div className="mt-0.5 h-4 w-4 rounded border border-[var(--luxury-gold)]/50 bg-[var(--luxury-gold)]/20" />
<div>
<p className="font-semibold text-zinc-50">Strictly necessary</p>
<p className="text-[11px] text-zinc-400">
@@ -121,7 +121,7 @@ const CookieConsentBanner: React.FC = () => {
<input
id="cookie-analytics"
type="checkbox"
className="mt-0.5 h-4 w-4 rounded border-zinc-500 bg-black/40 text-[#d4af37] focus:ring-[#d4af37]"
className="mt-0.5 h-4 w-4 rounded border-zinc-500 bg-black/40 text-[var(--luxury-gold)] focus:ring-[var(--luxury-gold)]"
checked={analyticsChecked}
onChange={(e) => setAnalyticsChecked(e.target.checked)}
/>
@@ -138,7 +138,7 @@ const CookieConsentBanner: React.FC = () => {
<input
id="cookie-marketing"
type="checkbox"
className="mt-0.5 h-4 w-4 rounded border-zinc-500 bg-black/40 text-[#d4af37] focus:ring-[#d4af37]"
className="mt-0.5 h-4 w-4 rounded border-zinc-500 bg-black/40 text-[var(--luxury-gold)] focus:ring-[var(--luxury-gold)]"
checked={marketingChecked}
onChange={(e) => setMarketingChecked(e.target.checked)}
/>
@@ -155,7 +155,7 @@ const CookieConsentBanner: React.FC = () => {
<input
id="cookie-preferences"
type="checkbox"
className="mt-0.5 h-4 w-4 rounded border-zinc-500 bg-black/40 text-[#d4af37] focus:ring-[#d4af37]"
className="mt-0.5 h-4 w-4 rounded border-zinc-500 bg-black/40 text-[var(--luxury-gold)] focus:ring-[var(--luxury-gold)]"
checked={preferencesChecked}
onChange={(e) => setPreferencesChecked(e.target.checked)}
/>
@@ -176,7 +176,7 @@ const CookieConsentBanner: React.FC = () => {
<div className="mt-2 flex flex-col gap-2 sm:mt-0 sm:w-56">
<button
type="button"
className="inline-flex w-full items-center justify-center rounded-full bg-gradient-to-r from-[#d4af37] via-[#f2cf74] to-[#d4af37] px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.16em] text-black shadow-[0_10px_30px_rgba(0,0,0,0.6)] transition hover:from-[#f8e4a6] hover:via-[#ffe6a3] hover:to-[#f2cf74] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#d4af37]/70"
className="inline-flex w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--luxury-gold)] via-[#f2cf74] to-[var(--luxury-gold)] px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.16em] text-black shadow-[0_10px_30px_rgba(0,0,0,0.6)] transition hover:from-[#f8e4a6] hover:via-[#ffe6a3] hover:to-[#f2cf74] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--luxury-gold)]/70"
onClick={handleAcceptAll}
>
Accept all & continue
@@ -191,7 +191,7 @@ const CookieConsentBanner: React.FC = () => {
{showDetails && (
<button
type="button"
className="inline-flex w-full items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/80 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.16em] text-zinc-100 shadow-[0_8px_22px_rgba(0,0,0,0.6)] transition hover:border-[#d4af37]/60 hover:text-[#f5e9c6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#d4af37]/70"
className="inline-flex w-full items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/80 px-4 py-2.5 text-xs font-semibold uppercase tracking-[0.16em] text-zinc-100 shadow-[0_8px_22px_rgba(0,0,0,0.6)] transition hover:border-[var(--luxury-gold)]/60 hover:text-[#f5e9c6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--luxury-gold)]/70"
onClick={handleSaveSelection}
>
Save my selection

2
Frontend/src/shared/components/CookiePreferencesLink.tsx
View File

@@ -9,7 +9,7 @@ const CookiePreferencesLink: React.FC = () => {
<button
type="button"
onClick={handleClick}
className="hover:text-[#d4af37] transition-colors cursor-pointer font-light tracking-wide text-gray-700"
className="hover:text-[var(--luxury-gold)] transition-colors cursor-pointer font-light tracking-wide text-gray-700"
>
Cookie Preferences
</button>

24
Frontend/src/shared/components/CookiePreferencesModal.tsx
View File

@@ -79,10 +79,10 @@ const CookiePreferencesModal: React.FC = () => {
};
return (
<div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div className="fixed inset-0 z-[10000] overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
className="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity z-[10000]"
onClick={() => setIsOpen(false)}
aria-hidden="true"
/>
@@ -91,7 +91,7 @@ const CookiePreferencesModal: React.FC = () => {
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<div
ref={modalRef}
className="relative transform overflow-hidden rounded-2xl bg-gradient-to-br from-zinc-950/95 via-zinc-900/95 to-black/95 text-left shadow-2xl border border-[#d4af37]/30 transition-all sm:my-8 sm:w-full sm:max-w-2xl"
className="relative transform overflow-hidden rounded-2xl bg-gradient-to-br from-zinc-950/95 via-zinc-900/95 to-black/95 text-left shadow-2xl border border-[var(--luxury-gold)]/30 transition-all sm:my-8 sm:w-full sm:max-w-2xl"
>
{/* Close button */}
<button
@@ -105,8 +105,8 @@ const CookiePreferencesModal: React.FC = () => {
<div className="px-6 py-6 sm:px-8 sm:py-8">
{/* Header */}
<div className="mb-6">
<div className="inline-flex items-center gap-2 rounded-full bg-black/60 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.16em] text-[#d4af37]/90 ring-1 ring-[#d4af37]/30 mb-4">
<span className="h-1.5 w-1.5 rounded-full bg-[#d4af37]" />
<div className="inline-flex items-center gap-2 rounded-full bg-black/60 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.16em] text-[var(--luxury-gold)]/90 ring-1 ring-[var(--luxury-gold)]/30 mb-4">
<span className="h-1.5 w-1.5 rounded-full bg-[var(--luxury-gold)]" />
Privacy Suite
</div>
<h2 className="text-2xl font-elegant font-bold text-white mb-2">
@@ -121,8 +121,8 @@ const CookiePreferencesModal: React.FC = () => {
<div className="space-y-4 mb-6">
<div className="rounded-xl bg-black/40 p-4 ring-1 ring-zinc-800/80 backdrop-blur-md">
<div className="flex items-start gap-3">
<div className="mt-0.5 h-5 w-5 rounded border border-[#d4af37]/50 bg-[#d4af37]/20 flex items-center justify-center">
<span className="text-[#d4af37] text-xs">✓</span>
<div className="mt-0.5 h-5 w-5 rounded border border-[var(--luxury-gold)]/50 bg-[var(--luxury-gold)]/20 flex items-center justify-center">
<span className="text-[var(--luxury-gold)] text-xs">✓</span>
</div>
<div className="flex-1">
<p className="font-semibold text-zinc-50 mb-1">Strictly necessary</p>
@@ -138,7 +138,7 @@ const CookiePreferencesModal: React.FC = () => {
<input
id="cookie-analytics-modal"
type="checkbox"
className="mt-0.5 h-5 w-5 rounded border-zinc-500 bg-black/40 text-[#d4af37] focus:ring-[#d4af37] cursor-pointer"
className="mt-0.5 h-5 w-5 rounded border-zinc-500 bg-black/40 text-[var(--luxury-gold)] focus:ring-[var(--luxury-gold)] cursor-pointer"
checked={analyticsChecked}
onChange={(e) => setAnalyticsChecked(e.target.checked)}
/>
@@ -156,7 +156,7 @@ const CookiePreferencesModal: React.FC = () => {
<input
id="cookie-marketing-modal"
type="checkbox"
className="mt-0.5 h-5 w-5 rounded border-zinc-500 bg-black/40 text-[#d4af37] focus:ring-[#d4af37] cursor-pointer"
className="mt-0.5 h-5 w-5 rounded border-zinc-500 bg-black/40 text-[var(--luxury-gold)] focus:ring-[var(--luxury-gold)] cursor-pointer"
checked={marketingChecked}
onChange={(e) => setMarketingChecked(e.target.checked)}
/>
@@ -174,7 +174,7 @@ const CookiePreferencesModal: React.FC = () => {
<input
id="cookie-preferences-modal"
type="checkbox"
className="mt-0.5 h-5 w-5 rounded border-zinc-500 bg-black/40 text-[#d4af37] focus:ring-[#d4af37] cursor-pointer"
className="mt-0.5 h-5 w-5 rounded border-zinc-500 bg-black/40 text-[var(--luxury-gold)] focus:ring-[var(--luxury-gold)] cursor-pointer"
checked={preferencesChecked}
onChange={(e) => setPreferencesChecked(e.target.checked)}
/>
@@ -193,7 +193,7 @@ const CookiePreferencesModal: React.FC = () => {
<button
type="button"
onClick={handleAcceptAll}
className="flex-1 inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#d4af37] via-[#f2cf74] to-[#d4af37] px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-black shadow-lg transition hover:from-[#f8e4a6] hover:via-[#ffe6a3] hover:to-[#f2cf74] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#d4af37]/70"
className="flex-1 inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--luxury-gold)] via-[#f2cf74] to-[var(--luxury-gold)] px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-black shadow-lg transition hover:from-[#f8e4a6] hover:via-[#ffe6a3] hover:to-[#f2cf74] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--luxury-gold)]/70"
>
Accept all
</button>
@@ -207,7 +207,7 @@ const CookiePreferencesModal: React.FC = () => {
<button
type="button"
onClick={handleSaveSelection}
className="flex-1 inline-flex items-center justify-center rounded-full border border-[#d4af37]/60 bg-zinc-900/80 px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-[#d4af37] shadow-lg transition hover:border-[#d4af37] hover:bg-zinc-800/80 hover:text-[#f5e9c6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#d4af37]/70"
className="flex-1 inline-flex items-center justify-center rounded-full border border-[var(--luxury-gold)]/60 bg-zinc-900/80 px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-[var(--luxury-gold)] shadow-lg transition hover:border-[var(--luxury-gold)] hover:bg-zinc-800/80 hover:text-[#f5e9c6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--luxury-gold)]/70"
>
Save selection
</button>

4
Frontend/src/shared/components/CurrencySelector.tsx
View File

@@ -83,7 +83,7 @@ const CurrencySelector: React.FC<CurrencySelectorProps> = ({
<select
value={currency}
onChange={handleChange}
className="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm font-medium text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37] transition-colors cursor-pointer"
className="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm font-medium text-gray-900 focus:outline-none focus:ring-2 focus:ring-[var(--luxury-gold)] focus:border-[var(--luxury-gold)] transition-colors cursor-pointer"
>
{supportedCurrencies.map((curr) => (
<option key={curr} value={curr}>
@@ -110,7 +110,7 @@ const CurrencySelector: React.FC<CurrencySelectorProps> = ({
<select
value={currency}
onChange={handleChange}
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37] transition-colors cursor-pointer"
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-[var(--luxury-gold)] focus:border-[var(--luxury-gold)] transition-colors cursor-pointer"
>
{supportedCurrencies.map((curr) => (
<option key={curr} value={curr}>

102
Frontend/src/shared/components/Footer.tsx
View File

@@ -194,7 +194,7 @@ const Footer: React.FC = () => {
return (
<footer className="relative bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-black text-gray-300 overflow-hidden">
{/* Top Gold Accent Line */}
<div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#d4af37] to-transparent shadow-lg shadow-[#d4af37]/50"></div>
<div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[var(--luxury-gold)] to-transparent shadow-lg shadow-[var(--luxury-gold)]/50"></div>
{/* Decorative Pattern Overlay */}
<div className="absolute inset-0 opacity-[0.03]" style={{
@@ -212,7 +212,7 @@ const Footer: React.FC = () => {
<div className="flex items-center space-x-4 mb-6 sm:mb-8">
{logoUrl ? (
<div className="relative group">
<div className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/20 to-transparent rounded-lg blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div className="absolute inset-0 bg-gradient-to-r from-[var(--luxury-gold)]/20 to-transparent rounded-lg blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img
src={logoUrl}
alt={settings.company_name}
@@ -221,17 +221,17 @@ const Footer: React.FC = () => {
</div>
) : (
<div className="relative group">
<div className="p-3 bg-gradient-to-br from-[#d4af37]/10 to-[#c9a227]/5 rounded-lg border border-[#d4af37]/20 backdrop-blur-sm">
<Hotel className="w-8 h-8 sm:w-10 sm:h-10 text-[#d4af37] relative z-10 drop-shadow-lg" />
<div className="p-3 bg-gradient-to-br from-[var(--luxury-gold)]/10 to-[var(--luxury-gold-dark)]/5 rounded-lg border border-[var(--luxury-gold)]/20 backdrop-blur-sm">
<Hotel className="w-8 h-8 sm:w-10 sm:h-10 text-[var(--luxury-gold)] relative z-10 drop-shadow-lg" />
</div>
<div className="absolute inset-0 bg-[#d4af37]/20 blur-2xl opacity-50 group-hover:opacity-75 transition-opacity duration-500"></div>
<div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-2xl opacity-50 group-hover:opacity-75 transition-opacity duration-500"></div>
</div>
)}
<div>
<h2 className="text-2xl sm:text-3xl font-display font-semibold text-white tracking-tight mb-1">
{settings.company_name || pageContent?.title || 'Luxury Hotel'}
</h2>
<p className="text-xs sm:text-sm text-[#d4af37] font-light tracking-[3px] sm:tracking-[4px] uppercase">
<p className="text-xs sm:text-sm text-[var(--luxury-gold)] font-light tracking-[3px] sm:tracking-[4px] uppercase">
{settings.company_tagline || 'Excellence Redefined'}
</p>
</div>
@@ -249,10 +249,10 @@ const Footer: React.FC = () => {
return (
<div
key={index}
className="group flex items-center space-x-2 px-3 py-2 bg-gradient-to-r from-[#d4af37]/5 to-transparent border border-[#d4af37]/10 rounded-lg hover:border-[#d4af37]/30 hover:from-[#d4af37]/10 transition-all duration-300"
className="group flex items-center space-x-2 px-3 py-2 bg-gradient-to-r from-[var(--luxury-gold)]/5 to-transparent border border-[var(--luxury-gold)]/10 rounded-lg hover:border-[var(--luxury-gold)]/30 hover:from-[var(--luxury-gold)]/10 transition-all duration-300"
>
<BadgeIcon className="w-4 h-4 sm:w-5 sm:h-5 text-[#d4af37] group-hover:scale-110 transition-transform duration-300" />
<span className="text-xs sm:text-sm font-medium tracking-wide text-gray-300 group-hover:text-[#d4af37] transition-colors">{badge.text}</span>
<BadgeIcon className="w-4 h-4 sm:w-5 sm:h-5 text-[var(--luxury-gold)] group-hover:scale-110 transition-transform duration-300" />
<span className="text-xs sm:text-sm font-medium tracking-wide text-gray-300 group-hover:text-[var(--luxury-gold)] transition-colors">{badge.text}</span>
</div>
);
})}
@@ -266,11 +266,11 @@ const Footer: React.FC = () => {
href={pageContent.social_links.facebook}
target="_blank"
rel="noopener noreferrer"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[#d4af37]/10 hover:to-[#c9a227]/10 hover:shadow-lg hover:shadow-[#d4af37]/20 hover:-translate-y-0.5"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5"
aria-label="Facebook"
>
<Facebook className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[#d4af37] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[#d4af37]/0 group-hover:bg-[#d4af37]/10 blur-xl transition-all duration-500"></div>
<Facebook className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
</a>
)}
{pageContent?.social_links?.twitter && (
@@ -278,11 +278,11 @@ const Footer: React.FC = () => {
href={pageContent.social_links.twitter}
target="_blank"
rel="noopener noreferrer"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[#d4af37]/10 hover:to-[#c9a227]/10 hover:shadow-lg hover:shadow-[#d4af37]/20 hover:-translate-y-0.5"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5"
aria-label="Twitter"
>
<Twitter className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[#d4af37] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[#d4af37]/0 group-hover:bg-[#d4af37]/10 blur-xl transition-all duration-500"></div>
<Twitter className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
</a>
)}
{pageContent?.social_links?.instagram && (
@@ -290,11 +290,11 @@ const Footer: React.FC = () => {
href={pageContent.social_links.instagram}
target="_blank"
rel="noopener noreferrer"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[#d4af37]/10 hover:to-[#c9a227]/10 hover:shadow-lg hover:shadow-[#d4af37]/20 hover:-translate-y-0.5"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5"
aria-label="Instagram"
>
<Instagram className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[#d4af37] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[#d4af37]/0 group-hover:bg-[#d4af37]/10 blur-xl transition-all duration-500"></div>
<Instagram className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
</a>
)}
{pageContent?.social_links?.linkedin && (
@@ -302,11 +302,11 @@ const Footer: React.FC = () => {
href={pageContent.social_links.linkedin}
target="_blank"
rel="noopener noreferrer"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[#d4af37]/10 hover:to-[#c9a227]/10 hover:shadow-lg hover:shadow-[#d4af37]/20 hover:-translate-y-0.5"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5"
aria-label="LinkedIn"
>
<Linkedin className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[#d4af37] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[#d4af37]/0 group-hover:bg-[#d4af37]/10 blur-xl transition-all duration-500"></div>
<Linkedin className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
</a>
)}
{pageContent?.social_links?.youtube && (
@@ -314,11 +314,11 @@ const Footer: React.FC = () => {
href={pageContent.social_links.youtube}
target="_blank"
rel="noopener noreferrer"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[#d4af37]/10 hover:to-[#c9a227]/10 hover:shadow-lg hover:shadow-[#d4af37]/20 hover:-translate-y-0.5"
className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50 hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5"
aria-label="YouTube"
>
<Youtube className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[#d4af37] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[#d4af37]/0 group-hover:bg-[#d4af37]/10 blur-xl transition-all duration-500"></div>
<Youtube className="w-5 h-5 sm:w-6 sm:h-6 text-gray-400 group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
<div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
</a>
)}
</div>
@@ -329,16 +329,16 @@ const Footer: React.FC = () => {
<div className="lg:col-span-2">
<h3 className="text-white font-elegant font-semibold text-lg sm:text-xl mb-4 sm:mb-6 relative inline-block tracking-wide">
<span className="relative z-10">Quick Links</span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[#d4af37] via-[#d4af37]/50 to-transparent"></span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold)]/50 to-transparent"></span>
</h3>
<ul className="space-y-3 sm:space-y-4">
{quickLinks.map((link) => (
<li key={link.url}>
<Link
to={link.url}
className="group flex items-center text-sm sm:text-base text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
className="group flex items-center text-sm sm:text-base text-gray-400 hover:text-[var(--luxury-gold)] transition-all duration-300 relative font-light tracking-wide"
>
<span className="absolute left-0 w-0 h-[2px] bg-gradient-to-r from-[#d4af37] to-[#c9a227] group-hover:w-8 transition-all duration-300 rounded-full"></span>
<span className="absolute left-0 w-0 h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] group-hover:w-8 transition-all duration-300 rounded-full"></span>
<span className="ml-10 group-hover:translate-x-2 transition-transform duration-300 group-hover:font-medium">{link.label}</span>
</Link>
</li>
@@ -352,16 +352,16 @@ const Footer: React.FC = () => {
<div className="lg:col-span-2">
<h3 className="text-white font-elegant font-semibold text-lg sm:text-xl mb-4 sm:mb-6 relative inline-block tracking-wide">
<span className="relative z-10">Guest Services</span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[#d4af37] via-[#d4af37]/50 to-transparent"></span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold)]/50 to-transparent"></span>
</h3>
<ul className="space-y-3 sm:space-y-4">
{supportLinks.map((link) => (
<li key={link.url}>
<Link
to={link.url}
className="group flex items-center text-sm sm:text-base text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
className="group flex items-center text-sm sm:text-base text-gray-400 hover:text-[var(--luxury-gold)] transition-all duration-300 relative font-light tracking-wide"
>
<span className="absolute left-0 w-0 h-[2px] bg-gradient-to-r from-[#d4af37] to-[#c9a227] group-hover:w-8 transition-all duration-300 rounded-full"></span>
<span className="absolute left-0 w-0 h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] group-hover:w-8 transition-all duration-300 rounded-full"></span>
<span className="ml-10 group-hover:translate-x-2 transition-transform duration-300 group-hover:font-medium">{link.label}</span>
</Link>
</li>
@@ -374,7 +374,7 @@ const Footer: React.FC = () => {
<div className="lg:col-span-2">
<h3 className="text-white font-elegant font-semibold text-lg sm:text-xl mb-6 sm:mb-8 relative inline-block tracking-wide">
<span className="relative z-10">{homePageContent?.newsletter_section_title || 'Newsletter'}</span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[#d4af37] via-[#d4af37]/50 to-transparent"></span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold)]/50 to-transparent"></span>
</h3>
{homePageContent?.newsletter_section_subtitle && (
<p className="text-sm text-gray-400 mb-4 font-light leading-relaxed">
@@ -416,14 +416,14 @@ const Footer: React.FC = () => {
value={newsletterEmail}
onChange={(e) => setNewsletterEmail(e.target.value)}
placeholder={homePageContent?.newsletter_placeholder || 'Enter your email'}
className="w-full px-4 py-2.5 rounded-lg border border-gray-700 bg-gray-800/50 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm"
className="w-full px-4 py-2.5 rounded-lg border border-gray-700 bg-gray-800/50 text-white placeholder-gray-400 focus:border-[var(--luxury-gold)] focus:ring-2 focus:ring-[var(--luxury-gold)]/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm"
required
disabled={newsletterSubmitting}
/>
<button
type="submit"
disabled={newsletterSubmitting || !newsletterEmail}
className="w-full px-4 py-2.5 bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-[#0f0f0f] rounded-lg font-semibold hover:from-[#f5d76e] hover:to-[#d4af37] transition-all duration-300 shadow-lg shadow-[#d4af37]/30 hover:shadow-xl hover:shadow-[#d4af37]/40 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
className="w-full px-4 py-2.5 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] rounded-lg font-semibold hover:from-[var(--luxury-gold-light)] hover:to-[var(--luxury-gold)] transition-all duration-300 shadow-lg shadow-[var(--luxury-gold)]/30 hover:shadow-xl hover:shadow-[var(--luxury-gold)]/40 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
>
{newsletterSubmitting ? 'Subscribing...' : (homePageContent?.newsletter_button_text || 'Subscribe')}
</button>
@@ -443,17 +443,17 @@ const Footer: React.FC = () => {
<div className="lg:col-span-2">
<h3 className="text-white font-elegant font-semibold text-lg sm:text-xl mb-4 sm:mb-6 relative inline-block tracking-wide">
<span className="relative z-10">Contact</span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[#d4af37] via-[#d4af37]/50 to-transparent"></span>
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold)]/50 to-transparent"></span>
</h3>
{(displayAddress || displayPhone || displayEmail) && (
<ul className="space-y-5 sm:space-y-6">
{displayAddress && (
<li className="flex items-start space-x-4 group">
<div className="relative mt-1 flex-shrink-0">
<div className="p-2 bg-gradient-to-br from-[#d4af37]/10 to-[#c9a227]/5 rounded-lg border border-[#d4af37]/20 group-hover:border-[#d4af37]/40 transition-all duration-300">
<MapPin className="w-4 h-4 sm:w-5 sm:h-5 text-[#d4af37] transition-all duration-300 group-hover:scale-110" />
<div className="p-2 bg-gradient-to-br from-[var(--luxury-gold)]/10 to-[var(--luxury-gold-dark)]/5 rounded-lg border border-[var(--luxury-gold)]/20 group-hover:border-[var(--luxury-gold)]/40 transition-all duration-300">
<MapPin className="w-4 h-4 sm:w-5 sm:h-5 text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
</div>
<div className="absolute inset-0 bg-[#d4af37]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<span className="text-sm sm:text-base text-gray-400 group-hover:text-gray-300 transition-colors leading-relaxed font-light pt-1">
{displayAddress
@@ -469,12 +469,12 @@ const Footer: React.FC = () => {
{displayPhone && (
<li className="flex items-center space-x-4 group">
<div className="relative flex-shrink-0">
<div className="p-2 bg-gradient-to-br from-[#d4af37]/10 to-[#c9a227]/5 rounded-lg border border-[#d4af37]/20 group-hover:border-[#d4af37]/40 transition-all duration-300">
<Phone className="w-4 h-4 sm:w-5 sm:h-5 text-[#d4af37] transition-all duration-300 group-hover:scale-110" />
<div className="p-2 bg-gradient-to-br from-[var(--luxury-gold)]/10 to-[var(--luxury-gold-dark)]/5 rounded-lg border border-[var(--luxury-gold)]/20 group-hover:border-[var(--luxury-gold)]/40 transition-all duration-300">
<Phone className="w-4 h-4 sm:w-5 sm:h-5 text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
</div>
<div className="absolute inset-0 bg-[#d4af37]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<a href={phoneHref} className="text-sm sm:text-base text-gray-400 group-hover:text-[#d4af37] transition-colors font-light tracking-wide">
<a href={phoneHref} className="text-sm sm:text-base text-gray-400 group-hover:text-[var(--luxury-gold)] transition-colors font-light tracking-wide">
{displayPhone}
</a>
</li>
@@ -482,12 +482,12 @@ const Footer: React.FC = () => {
{displayEmail && (
<li className="flex items-center space-x-4 group">
<div className="relative flex-shrink-0">
<div className="p-2 bg-gradient-to-br from-[#d4af37]/10 to-[#c9a227]/5 rounded-lg border border-[#d4af37]/20 group-hover:border-[#d4af37]/40 transition-all duration-300">
<Mail className="w-4 h-4 sm:w-5 sm:h-5 text-[#d4af37] transition-all duration-300 group-hover:scale-110" />
<div className="p-2 bg-gradient-to-br from-[var(--luxury-gold)]/10 to-[var(--luxury-gold-dark)]/5 rounded-lg border border-[var(--luxury-gold)]/20 group-hover:border-[var(--luxury-gold)]/40 transition-all duration-300">
<Mail className="w-4 h-4 sm:w-5 sm:h-5 text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
</div>
<div className="absolute inset-0 bg-[#d4af37]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<a href={`mailto:${displayEmail}`} className="text-sm sm:text-base text-gray-400 group-hover:text-[#d4af37] transition-colors font-light tracking-wide break-all">
<a href={`mailto:${displayEmail}`} className="text-sm sm:text-base text-gray-400 group-hover:text-[var(--luxury-gold)] transition-colors font-light tracking-wide break-all">
{displayEmail}
</a>
</li>
@@ -499,7 +499,7 @@ const Footer: React.FC = () => {
<div className="mt-8 sm:mt-10 pt-6 sm:pt-8 border-t border-gray-800/50">
<div className="flex items-center space-x-1 mb-3">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-4 h-4 sm:w-5 sm:h-5 fill-[#d4af37] text-[#d4af37] drop-shadow-lg" />
<Star key={i} className="w-4 h-4 sm:w-5 sm:h-5 fill-[var(--luxury-gold)] text-[var(--luxury-gold)] drop-shadow-lg" />
))}
</div>
<p className="text-xs sm:text-sm text-gray-500 font-light tracking-wide">Rated 5.0 by 10,000+ guests</p>
@@ -514,7 +514,7 @@ const Footer: React.FC = () => {
</div>
<div className="relative flex justify-center">
<div className="bg-gradient-to-b from-[#0f0f0f] to-[#1a1a1a] px-6">
<div className="w-24 sm:w-32 h-[2px] bg-gradient-to-r from-transparent via-[#d4af37]/50 to-transparent shadow-lg shadow-[#d4af37]/30"></div>
<div className="w-24 sm:w-32 h-[2px] bg-gradient-to-r from-transparent via-[var(--luxury-gold)]/50 to-transparent shadow-lg shadow-[var(--luxury-gold)]/30"></div>
</div>
</div>
</div>
@@ -530,11 +530,11 @@ const Footer: React.FC = () => {
})()}
</div>
<div className="flex items-center space-x-4 sm:space-x-6 text-xs sm:text-sm text-gray-600">
<Link to="/privacy" className="hover:text-[#d4af37] transition-colors cursor-pointer font-light tracking-wide">Privacy</Link>
<Link to="/privacy" className="hover:text-[var(--luxury-gold)] transition-colors cursor-pointer font-light tracking-wide">Privacy</Link>
<span className="text-gray-700">•</span>
<Link to="/terms" className="hover:text-[#d4af37] transition-colors cursor-pointer font-light tracking-wide">Terms</Link>
<Link to="/terms" className="hover:text-[var(--luxury-gold)] transition-colors cursor-pointer font-light tracking-wide">Terms</Link>
<span className="text-gray-700">•</span>
<Link to="/refunds" className="hover:text-[#d4af37] transition-colors cursor-pointer font-light tracking-wide">Refunds</Link>
<Link to="/refunds" className="hover:text-[var(--luxury-gold)] transition-colors cursor-pointer font-light tracking-wide">Refunds</Link>
<span className="text-gray-700">•</span>
<CookiePreferencesLink />
</div>
@@ -542,7 +542,7 @@ const Footer: React.FC = () => {
</div>
{/* Bottom Gold Accent Line */}
<div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#d4af37] to-transparent shadow-lg shadow-[#d4af37]/50"></div>
<div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[var(--luxury-gold)] to-transparent shadow-lg shadow-[var(--luxury-gold)]/50"></div>
{/* Chat Widget */}
<ChatWidget />

582
Frontend/src/shared/components/Header.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useRef } from 'react';
import { Link } from 'react-router-dom';
import React, { useState, useRef, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import {
Hotel,
User,
@@ -41,6 +41,7 @@ const Header: React.FC<HeaderProps> = ({
}) => {
const { settings } = useCompanySettings();
const { openModal } = useAuthModal();
const location = useLocation();
const displayPhone = settings.company_phone || '+1 (234) 567-890';
@@ -55,6 +56,23 @@ const Header: React.FC<HeaderProps> = ({
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
const userMenuRef = useRef<HTMLDivElement>(null);
// Track previous pathname to detect actual navigation
const prevPathnameRef = useRef(location.pathname);
// Close menu when navigation happens
useEffect(() => {
const prevPathname = prevPathnameRef.current;
const currentPathname = location.pathname;
// Only close menu if it's an actual navigation (pathname changed)
if (prevPathname !== currentPathname && isMobileMenuOpen) {
setIsMobileMenuOpen(false);
}
// Update ref for next comparison
prevPathnameRef.current = currentPathname;
}, [location.pathname, isMobileMenuOpen]);
useClickOutside(userMenuRef, () => {
if (isUserMenuOpen) {
@@ -84,32 +102,42 @@ const Header: React.FC<HeaderProps> = ({
{!isAuthenticated ? (
<>
<button
onClick={() => {
setIsMobileMenuOpen(false);
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
openModal('login');
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
rounded-sm transition-all duration-300
space-x-2 px-4 py-3.5 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.15)] hover:text-[var(--luxury-gold)]
rounded-md transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide w-full text-left"
hover:border-[var(--luxury-gold)] font-light tracking-wider text-sm w-full text-left group relative mx-2 cursor-pointer"
style={{ touchAction: 'manipulation' }}
>
<LogIn className="w-4 h-4" />
<span>Login</span>
</button>
<button
onClick={() => {
setIsMobileMenuOpen(false);
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
openModal('register');
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 bg-gradient-to-r
from-[#d4af37] to-[#c9a227] text-[#0f0f0f]
rounded-sm hover:from-[#f5d76e]
hover:to-[#d4af37] transition-all
duration-300 font-medium tracking-wide
mt-2 w-full text-left"
space-x-2 px-4 py-3.5 bg-gradient-to-r
from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f]
rounded-md hover:from-[var(--luxury-gold-light)]
hover:to-[var(--luxury-gold)] transition-all
duration-300 font-medium tracking-wider text-sm
mt-2 w-full text-left mx-2 cursor-pointer"
style={{ touchAction: 'manipulation' }}
>
<UserPlus className="w-4 h-4" />
<span>Register</span>
@@ -118,21 +146,26 @@ const Header: React.FC<HeaderProps> = ({
) : (
<>
<div className="px-4 py-2 text-sm
text-[#d4af37]/70 font-light tracking-wide"
text-text-[rgba(var(--luxury-gold-rgb),0.7)] font-light tracking-wide"
>
Hello, {userInfo?.name}
</div>
<Link
to="/profile"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
rounded-sm transition-all duration-300
space-x-2 px-4 py-3.5 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.15)] hover:text-[var(--luxury-gold)]
rounded-md transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wider text-sm group relative mx-2"
style={{ touchAction: 'manipulation' }}
>
<User className="w-4 h-4" />
<span>Profile</span>
@@ -141,120 +174,160 @@ const Header: React.FC<HeaderProps> = ({
<>
<Link
to="/dashboard"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<Calendar className="w-4 h-4" />
<span>Dashboard</span>
</Link>
<Link
to="/favorites"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<Heart className="w-4 h-4" />
<span>Favorites</span>
</Link>
<Link
to="/bookings"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<Calendar className="w-4 h-4" />
<span>My Bookings</span>
</Link>
<Link
to="/loyalty"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<Star className="w-4 h-4" />
<span>Loyalty Program</span>
</Link>
<Link
to="/group-bookings"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<Users className="w-4 h-4" />
<span>Group Bookings</span>
</Link>
<Link
to="/complaints"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<AlertCircle className="w-4 h-4" />
<span>Complaints</span>
</Link>
<Link
to="/guest-requests"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<Bell className="w-4 h-4" />
<span>Guest Requests</span>
</Link>
<Link
to="/gdpr"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<Shield className="w-4 h-4" />
<span>Privacy & Data</span>
@@ -264,15 +337,20 @@ const Header: React.FC<HeaderProps> = ({
{userInfo?.role === 'admin' && (
<Link
to="/admin"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<User className="w-4 h-4" />
<span>Admin</span>
@@ -281,15 +359,20 @@ const Header: React.FC<HeaderProps> = ({
{userInfo?.role === 'staff' && (
<Link
to="/staff"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<User className="w-4 h-4" />
<span>Staff Dashboard</span>
@@ -298,15 +381,20 @@ const Header: React.FC<HeaderProps> = ({
{userInfo?.role === 'accountant' && (
<Link
to="/accountant"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<User className="w-4 h-4" />
<span>Accountant Dashboard</span>
@@ -315,30 +403,38 @@ const Header: React.FC<HeaderProps> = ({
{userInfo?.role === 'housekeeping' && (
<Link
to="/housekeeping"
onClick={() =>
setIsMobileMenuOpen(false)
}
onClick={(e) => {
e.stopPropagation();
setTimeout(() => setIsMobileMenuOpen(false), 100);
}}
onTouchStart={(e) => {
e.stopPropagation();
}}
className="flex items-center
space-x-2 px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
style={{ touchAction: 'manipulation' }}
>
<User className="w-4 h-4" />
<span>Housekeeping Dashboard</span>
</Link>
)}
<div className="border-t border-[#d4af37]/20 my-2"></div>
<div className="border-t border-[rgba(var(--luxury-gold-rgb),0.2)] my-2"></div>
<button
onClick={handleLogout}
onClick={(e) => {
e.stopPropagation();
handleLogout();
}}
className="w-full flex items-center
space-x-2 px-4 py-3 text-red-400/90
hover:bg-red-500/10 hover:text-red-400
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-red-500/50 text-left
font-light tracking-wide"
font-light tracking-wide cursor-pointer"
>
<LogOut className="w-4 h-4" />
<span>Logout</span>
@@ -349,18 +445,20 @@ const Header: React.FC<HeaderProps> = ({
);
return (
<header className="bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f] sticky top-0 z-50 border-b border-[#d4af37]/20 shadow-2xl">
<div className="hidden lg:block bg-[#0a0a0a]/50 border-b border-[#d4af37]/10">
<header
className="bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] sticky top-0 z-50 border-b border-[rgba(var(--luxury-gold-rgb),0.15)] shadow-[0_8px_32px_rgba(0,0,0,0.4)] backdrop-blur-sm"
>
<div className="hidden lg:block bg-[#0a0a0a]/50 border-b border-[rgba(var(--luxury-gold-rgb),0.1)]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
<div className="flex items-center justify-end space-x-6 text-sm">
{displayPhone && (
<a href={`tel:${displayPhone.replace(/\s+/g, '').replace(/[()]/g, '')}`} className="flex items-center space-x-2 text-[#d4af37] hover:text-[#f5d76e] transition-colors duration-300 font-light">
<a href={`tel:${displayPhone.replace(/\s+/g, '').replace(/[()]/g, '')}`} className="flex items-center space-x-2 text-[var(--luxury-gold)] hover:text-[var(--luxury-gold-light)] transition-colors duration-300 font-light">
<Phone className="w-3.5 h-3.5" />
<span className="tracking-wide">{displayPhone}</span>
</a>
)}
{displayEmail && (
<a href={`mailto:${displayEmail}`} className="flex items-center space-x-2 text-[#d4af37] hover:text-[#f5d76e] transition-colors duration-300 font-light">
<a href={`mailto:${displayEmail}`} className="flex items-center space-x-2 text-[var(--luxury-gold)] hover:text-[var(--luxury-gold-light)] transition-colors duration-300 font-light">
<Mail className="w-3.5 h-3.5" />
<span className="tracking-wide">{displayEmail}</span>
</a>
@@ -369,96 +467,120 @@ const Header: React.FC<HeaderProps> = ({
</div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">
<Link
to="/"
className="flex items-center space-x-3
group transition-all duration-300 hover:opacity-90"
>
{logoUrl ? (
<div className="relative">
<img
src={logoUrl}
alt={settings.company_name}
className="h-10 w-auto object-contain drop-shadow-lg"
/>
<div className="w-full py-3 sm:py-4 md:py-5">
<div className="flex items-center justify-between relative w-full">
{/* Logo - Left - Always visible on all screens, flush with left edge */}
<div className="flex items-center flex-shrink-0 pl-2 sm:pl-4 md:pl-6 lg:pl-8 max-w-[50%] sm:max-w-none">
<Link
to="/"
className="flex items-center space-x-1.5 sm:space-x-2 md:space-x-3
group transition-all duration-300 hover:opacity-90 z-10"
>
{logoUrl ? (
<div className="relative flex-shrink-0">
<div className="absolute inset-0 bg-gradient-to-br from-[var(--luxury-gold)]/20 to-transparent rounded-lg blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img
src={logoUrl}
alt={settings.company_name}
className="h-8 w-8 sm:h-10 sm:w-10 md:h-12 md:w-auto object-contain drop-shadow-[0_4px_12px_rgba(var(--luxury-gold-rgb),0.3)] relative z-10 transition-transform duration-300 group-hover:scale-105"
/>
</div>
) : (
<div className="relative flex-shrink-0">
<div className="absolute inset-0 bg-gradient-to-br from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] rounded-full blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-500"></div>
<Hotel className="relative w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-[var(--luxury-gold)] drop-shadow-[0_4px_12px_rgba(var(--luxury-gold-rgb),0.4)] transition-transform duration-300 group-hover:scale-110" />
</div>
)}
<div className="flex flex-col min-w-0">
<span className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl font-display font-semibold text-white tracking-tight leading-tight bg-gradient-to-r from-white to-white/90 bg-clip-text truncate">
{settings.company_name}
</span>
<span className="text-[8px] sm:text-[9px] md:text-[10px] text-[var(--luxury-gold)] tracking-[0.25em] uppercase font-light hidden sm:block">
{settings.company_tagline || 'Excellence Redefined'}
</span>
</div>
) : (
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-br from-[#d4af37] to-[#f5d76e] rounded-full blur-md opacity-30 group-hover:opacity-50 transition-opacity duration-300"></div>
<Hotel className="relative w-10 h-10 text-[#d4af37] drop-shadow-lg" />
</div>
)}
<div className="flex flex-col">
<span className="text-2xl font-display font-semibold text-white tracking-tight leading-tight">
{settings.company_name}
</span>
<span className="text-[10px] text-[#d4af37] tracking-[0.2em] uppercase font-light">
{settings.company_tagline || 'Excellence Redefined'}
</span>
</div>
</Link>
</Link>
</div>
<Navbar
isMobileMenuOpen={isMobileMenuOpen}
onMobileMenuToggle={toggleMobileMenu}
onLinkClick={() => setIsMobileMenuOpen(false)}
mobileMenuContent={mobileMenuContent}
/>
{/* Navigation Links - Center */}
<div className="absolute left-1/2 transform -translate-x-1/2 hidden md:block z-20">
<Navbar
isMobileMenuOpen={isMobileMenuOpen}
onMobileMenuToggle={toggleMobileMenu}
onLinkClick={() => setIsMobileMenuOpen(false)}
mobileMenuContent={mobileMenuContent}
/>
</div>
{/* Mobile Menu Button - Right (for smaller screens) */}
<div className="flex items-center justify-end md:hidden z-20 pr-2 sm:pr-4">
<Navbar
isMobileMenuOpen={isMobileMenuOpen}
onMobileMenuToggle={toggleMobileMenu}
onLinkClick={() => setIsMobileMenuOpen(false)}
mobileMenuContent={mobileMenuContent}
/>
</div>
{/* Login/Register - Right */}
<div className="hidden md:flex items-center
space-x-3"
justify-end space-x-4 z-10 flex-shrink-0 pr-4 sm:pr-6 lg:pr-8"
>
{!isAuthenticated ? (
<>
<button
onClick={() => openModal('login')}
className="flex items-center space-x-2
px-5 py-2 text-white/90
hover:text-[#d4af37] transition-all duration-300
font-light tracking-wide relative group"
px-6 py-2.5 text-white/95
hover:text-[var(--luxury-gold)] transition-all duration-300
font-light tracking-wider relative group overflow-hidden"
>
<LogIn className="w-4 h-4 relative z-10" />
<span className="relative z-10">Login</span>
<span className="absolute inset-0 border border-[#d4af37]/30 rounded-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span className="absolute inset-0 border border-[rgba(var(--luxury-gold-rgb),0.2)] rounded-md opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:border-[rgba(var(--luxury-gold-rgb),0.5)]"></span>
<span className="absolute inset-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.05)] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<LogIn className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="relative z-10 text-sm">Login</span>
</button>
<button
onClick={() => openModal('register')}
className="flex items-center space-x-2
px-6 py-2.5 bg-gradient-to-r from-[#d4af37] to-[#c9a227]
text-[#0f0f0f] rounded-sm hover:from-[#f5d76e]
hover:to-[#d4af37] transition-all duration-300
font-medium tracking-wide shadow-lg shadow-[#d4af37]/20
hover:shadow-[#d4af37]/30 relative overflow-hidden group"
px-7 py-2.5 bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold-light)] to-[var(--luxury-gold)]
text-[#0f0f0f] rounded-md hover:from-[var(--luxury-gold-light)]
hover:via-[var(--luxury-gold)] hover:to-[var(--luxury-gold-dark)] transition-all duration-500
font-medium tracking-wider shadow-[0_4px_20px_rgba(var(--luxury-gold-rgb),0.3)]
hover:shadow-[0_6px_30px_rgba(var(--luxury-gold-rgb),0.5)] relative overflow-hidden group
transform hover:scale-105 transition-transform duration-300"
>
<span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
<UserPlus className="w-4 h-4 relative z-10" />
<span className="relative z-10">Register</span>
<span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/30 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></span>
<UserPlus className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:rotate-12" />
<span className="relative z-10 text-sm">Register</span>
</button>
</>
) : (
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 justify-end w-full">
{isAuthenticated && <InAppNotificationBell />}
<div className="relative" ref={userMenuRef}>
<button
onClick={toggleUserMenu}
className="flex items-center space-x-3
px-3 py-2 rounded-sm hover:bg-white/10
px-4 py-2.5 rounded-md hover:bg-[rgba(var(--luxury-gold-rgb),0.1)]
transition-all duration-300 border border-transparent
hover:border-[#d4af37]/30"
hover:border-[rgba(var(--luxury-gold-rgb),0.3)] group"
>
{userInfo?.avatar ? (
<img
src={normalizeImageUrl(userInfo.avatar)}
alt={userInfo.name}
className="w-9 h-9 rounded-full
object-cover ring-2 ring-[#d4af37]/50"
className="w-10 h-10 rounded-full
object-cover ring-2 ring-[var(--luxury-gold)]/50
transition-all duration-300 group-hover:ring-[var(--luxury-gold)]/80
group-hover:scale-105 shadow-lg"
/>
) : (
<div className="w-9 h-9 bg-gradient-to-br from-[#d4af37] to-[#c9a227]
<div className="w-10 h-10 bg-gradient-to-br from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)]
rounded-full flex items-center
justify-center ring-2 ring-[#d4af37]/50 shadow-lg"
justify-center ring-2 ring-[var(--luxury-gold)]/50 shadow-lg
transition-all duration-300 group-hover:ring-[var(--luxury-gold)]/80
group-hover:scale-105"
>
<span className="text-[#0f0f0f]
font-semibold text-sm"
@@ -468,28 +590,29 @@ const Header: React.FC<HeaderProps> = ({
</span>
</div>
)}
<span className="font-light text-white/90 tracking-wide">
<span className="font-light text-white/95 tracking-wider text-sm">
{userInfo?.name}
</span>
</button>
{isUserMenuOpen && (
<div className="absolute right-0 mt-2
w-52 bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f]
rounded-sm shadow-2xl py-2 border border-[#d4af37]/20
z-50 backdrop-blur-xl animate-fade-in"
<div className="absolute right-0 mt-3
w-56 bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f]
rounded-lg shadow-[0_8px_32px_rgba(0,0,0,0.6)] py-3 border border-[rgba(var(--luxury-gold-rgb),0.2)]
z-[9999] backdrop-blur-xl animate-fade-in"
>
<Link
to="/profile"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<User className="w-4 h-4" />
<span className="font-light tracking-wide">Profile</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Profile</span>
</Link>
{userInfo?.role !== 'admin' && userInfo?.role !== 'staff' && userInfo?.role !== 'accountant' && userInfo?.role !== 'housekeeping' && (
<>
@@ -497,97 +620,105 @@ const Header: React.FC<HeaderProps> = ({
to="/dashboard"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<Calendar className="w-4 h-4" />
<span className="font-light tracking-wide">Dashboard</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<Calendar className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Dashboard</span>
</Link>
<Link
to="/favorites"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<Heart className="w-4 h-4" />
<span className="font-light tracking-wide">Favorites</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<Heart className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Favorites</span>
</Link>
<Link
to="/bookings"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<Calendar className="w-4 h-4" />
<span className="font-light tracking-wide">My Bookings</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<Calendar className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">My Bookings</span>
</Link>
<Link
to="/loyalty"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<Star className="w-4 h-4" />
<span className="font-light tracking-wide">Loyalty Program</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<Star className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Loyalty Program</span>
</Link>
<Link
to="/group-bookings"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<Users className="w-4 h-4" />
<span className="font-light tracking-wide">Group Bookings</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<Users className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Group Bookings</span>
</Link>
<Link
to="/complaints"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<AlertCircle className="w-4 h-4" />
<span className="font-light tracking-wide">Complaints</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<AlertCircle className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Complaints</span>
</Link>
<Link
to="/guest-requests"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<Bell className="w-4 h-4" />
<span className="font-light tracking-wide">Guest Requests</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<Bell className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Guest Requests</span>
</Link>
<Link
to="/gdpr"
onClick={() => setIsUserMenuOpen(false)}
className="flex items-center space-x-3
px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<Shield className="w-4 h-4" />
<span className="font-light tracking-wide">Privacy & Data</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<Shield className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Privacy & Data</span>
</Link>
</>
)}
@@ -598,13 +729,14 @@ const Header: React.FC<HeaderProps> = ({
setIsUserMenuOpen(false)
}
className="flex items-center
space-x-3 px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
space-x-3 px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<User className="w-4 h-4" />
<span className="font-light tracking-wide">Admin</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Admin</span>
</Link>
)}
{userInfo?.role === 'staff' && (
@@ -614,13 +746,14 @@ const Header: React.FC<HeaderProps> = ({
setIsUserMenuOpen(false)
}
className="flex items-center
space-x-3 px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
space-x-3 px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<User className="w-4 h-4" />
<span className="font-light tracking-wide">Staff Dashboard</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Staff Dashboard</span>
</Link>
)}
{userInfo?.role === 'accountant' && (
@@ -630,13 +763,14 @@ const Header: React.FC<HeaderProps> = ({
setIsUserMenuOpen(false)
}
className="flex items-center
space-x-3 px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
space-x-3 px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<User className="w-4 h-4" />
<span className="font-light tracking-wide">Accountant Dashboard</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Accountant Dashboard</span>
</Link>
)}
{userInfo?.role === 'housekeeping' && (
@@ -646,26 +780,28 @@ const Header: React.FC<HeaderProps> = ({
setIsUserMenuOpen(false)
}
className="flex items-center
space-x-3 px-4 py-2.5 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
space-x-3 px-5 py-3 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)]
transition-all duration-300 border-l-2 border-transparent
hover:border-[#d4af37]"
hover:border-[var(--luxury-gold)] rounded-md group relative"
>
<User className="w-4 h-4" />
<span className="font-light tracking-wide">Housekeeping Dashboard</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Housekeeping Dashboard</span>
</Link>
)}
<div className="border-t border-[#d4af37]/20 my-1"></div>
<div className="border-t border-[rgba(var(--luxury-gold-rgb),0.2)] my-2"></div>
<button
onClick={handleLogout}
className="w-full flex items-center
space-x-3 px-4 py-2.5 text-red-400/90
space-x-3 px-5 py-3 text-red-400/95
hover:bg-red-500/10 hover:text-red-400
transition-all duration-300 border-l-2 border-transparent
hover:border-red-500/50 text-left"
hover:border-red-500/50 text-left rounded-md group relative"
>
<LogOut className="w-4 h-4" />
<span className="font-light tracking-wide">Logout</span>
<span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-red-500/10 to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
<LogOut className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
<span className="font-light tracking-wider text-sm relative z-10">Logout</span>
</button>
</div>
)}

232
Frontend/src/shared/components/Navbar.tsx
View File

@@ -1,7 +1,7 @@
import React, { useRef } from 'react';
import { createPortal } from 'react-dom';
import { Link } from 'react-router-dom';
import { Menu, X } from 'lucide-react';
import { useClickOutside } from '../hooks/useClickOutside';
interface NavbarProps {
isMobileMenuOpen: boolean;
@@ -28,12 +28,50 @@ const Navbar: React.FC<NavbarProps> = ({
mobileMenuContent
}) => {
const mobileMenuContainerRef = useRef<HTMLDivElement>(null);
const mobileMenuDropdownRef = useRef<HTMLDivElement>(null);
useClickOutside(mobileMenuContainerRef, () => {
if (isMobileMenuOpen) {
// Handle click outside for the portal-rendered dropdown
// Note: We don't use useClickOutside here because the dropdown is rendered via portal
React.useEffect(() => {
if (!isMobileMenuOpen) return;
const handleClickOutside = (event: MouseEvent | TouchEvent) => {
const target = event.target as Node;
const targetElement = target as Element;
// Check if click is on a link - if so, don't close (let navigation happen)
const linkElement = targetElement.closest('a');
if (linkElement && mobileMenuDropdownRef.current?.contains(linkElement)) {
return; // Let the link handle navigation
}
// Check if click is inside the dropdown menu
if (mobileMenuDropdownRef.current?.contains(target)) {
return; // Don't close if clicking inside menu
}
// Check if click is on the menu button
if (mobileMenuContainerRef.current?.contains(target)) {
return; // Don't close if clicking the menu button
}
// Close menu if clicking outside
onMobileMenuToggle();
}
});
};
// Use a delay to avoid interfering with link clicks
// This ensures link navigation happens before the handler is active
const timeoutId = setTimeout(() => {
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('touchstart', handleClickOutside);
}, 300);
return () => {
clearTimeout(timeoutId);
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('touchstart', handleClickOutside);
};
}, [isMobileMenuOpen, onMobileMenuToggle]);
const handleLinkClick = () => {
if (onLinkClick) {
@@ -51,10 +89,10 @@ const Navbar: React.FC<NavbarProps> = ({
to={link.to}
onClick={handleLinkClick}
className="px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
hover:bg-[var(--luxury-gold)]/10 hover:text-[var(--luxury-gold)]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
hover:border-[var(--luxury-gold)] font-light tracking-wide"
>
{link.label}
</Link>
@@ -66,17 +104,24 @@ const Navbar: React.FC<NavbarProps> = ({
return (
<div className="relative" ref={mobileMenuContainerRef}>
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center space-x-1">
<nav className="hidden md:flex items-center space-x-2">
{navLinks.map((link) => (
<Link
key={link.to}
to={link.to}
className="text-white/90 hover:text-[#d4af37]
transition-all duration-300 font-light px-4 py-2
relative group tracking-wide"
className="text-white/95 hover:text-[var(--luxury-gold)]
transition-all duration-300 font-light px-5 py-2.5
relative group tracking-wider text-sm uppercase"
>
<span className="relative z-10">{link.label}</span>
<span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span className="relative z-10 transition-all duration-300 group-hover:tracking-widest">
{link.label}
</span>
{/* Underline effect */}
<span className="absolute bottom-0 left-0 w-0 h-[1px] bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] group-hover:w-full transition-all duration-500"></span>
{/* Background glow on hover */}
<span className="absolute inset-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.05)] via-[rgba(var(--luxury-gold-rgb),0.1)] to-[rgba(var(--luxury-gold-rgb),0.05)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-sm"></span>
{/* Subtle border on hover */}
<span className="absolute inset-0 border border-[rgba(var(--luxury-gold-rgb),0.1)] rounded-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</Link>
))}
</nav>
@@ -84,49 +129,138 @@ const Navbar: React.FC<NavbarProps> = ({
{/* Mobile Menu Button */}
<button
onClick={onMobileMenuToggle}
className="md:hidden p-2 rounded-sm
hover:bg-white/10 border border-transparent
hover:border-[#d4af37]/30 transition-all duration-300"
className="md:hidden p-3 rounded-lg
bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:bg-[rgba(var(--luxury-gold-rgb),0.2)]
border border-[rgba(var(--luxury-gold-rgb),0.3)]
hover:border-[rgba(var(--luxury-gold-rgb),0.5)] transition-all duration-300
group shadow-lg"
aria-label="Toggle menu"
>
{isMobileMenuOpen ? (
<X className="w-6 h-6 text-[#d4af37]" />
<X className="w-6 h-6 text-[var(--luxury-gold)] transition-transform duration-300 group-hover:rotate-90" />
) : (
<Menu className="w-6 h-6 text-white/90" />
<Menu className="w-6 h-6 text-[var(--luxury-gold)] group-hover:text-[var(--luxury-gold-light)] transition-colors duration-300" />
)}
</button>
{/* Mobile Menu Dropdown - Absolute positioned */}
{isMobileMenuOpen && (
<div
className="md:hidden absolute right-0 mt-2 w-64
bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f]
rounded-sm shadow-2xl py-2 border border-[#d4af37]/20
z-50 backdrop-blur-xl animate-fade-in max-h-[calc(100vh-120px)]
overflow-y-auto"
>
<div className="flex flex-col space-y-1">
{navLinks.map((link) => (
<Link
key={link.to}
to={link.to}
onClick={handleLinkClick}
className="px-4 py-3 text-white/90
hover:bg-[#d4af37]/10 hover:text-[#d4af37]
rounded-sm transition-all duration-300
border-l-2 border-transparent
hover:border-[#d4af37] font-light tracking-wide"
>
{link.label}
</Link>
))}
{mobileMenuContent && (
<>
<div className="border-t border-[#d4af37]/20 my-2"></div>
{mobileMenuContent}
</>
)}
{/* Mobile Menu Backdrop and Dropdown - Rendered via Portal */}
{isMobileMenuOpen && typeof document !== 'undefined' && createPortal(
<>
{/* Mobile Menu Backdrop */}
<div
className="md:hidden fixed inset-0 bg-black/70 backdrop-blur-sm"
style={{
top: '73px',
zIndex: 99998,
position: 'fixed',
pointerEvents: 'auto'
} as React.CSSProperties}
onClick={(e) => {
// Only close if clicking directly on backdrop, not on dropdown content
const target = e.target as HTMLElement;
if (target === e.currentTarget) {
onMobileMenuToggle();
}
}}
onTouchStart={(e) => {
// Prevent backdrop from interfering with touch events on links
const target = e.target as HTMLElement;
if (mobileMenuDropdownRef.current?.contains(target)) {
e.stopPropagation();
}
}}
/>
{/* Mobile Menu Dropdown - Right side on mobile */}
<div
ref={mobileMenuDropdownRef}
className="md:hidden fixed top-[73px] right-0 w-80 max-w-[85vw]
bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f]
shadow-[0_8px_32px_rgba(0,0,0,0.9),_-4px_0_20px_rgba(var(--luxury-gold-rgb),0.2)]
py-4 border-l-2 border-[rgba(var(--luxury-gold-rgb),0.4)]
backdrop-blur-xl animate-fade-in
overflow-y-auto h-[calc(100vh-73px)]"
style={{
zIndex: 99999,
position: 'fixed',
touchAction: 'auto',
pointerEvents: 'auto'
} as React.CSSProperties}
onClick={(e) => {
// Stop propagation to prevent backdrop from closing menu when clicking inside
e.stopPropagation();
}}
onTouchStart={(e) => {
// Stop touch events from propagating to backdrop
e.stopPropagation();
}}
onTouchEnd={(e) => {
// Stop touch end events from propagating
e.stopPropagation();
}}
>
<div className="flex flex-col space-y-1 px-2">
{navLinks.map((link) => (
<Link
key={link.to}
to={link.to}
onClick={(e) => {
// Stop propagation to prevent backdrop from closing menu
e.stopPropagation();
// Close mobile menu after navigation starts
setTimeout(() => {
if (handleLinkClick) {
handleLinkClick();
}
}, 150);
}}
onTouchStart={(e) => {
// Stop touch events from propagating to backdrop
e.stopPropagation();
}}
onTouchEnd={(e) => {
// Ensure touch end doesn't trigger backdrop
e.stopPropagation();
}}
onMouseDown={(e) => {
// Ensure mouse events work
e.stopPropagation();
}}
className="px-4 py-3.5 text-white/95
hover:bg-[rgba(var(--luxury-gold-rgb),0.15)] hover:text-[var(--luxury-gold)]
rounded-md transition-all duration-300
border-l-2 border-transparent
hover:border-[var(--luxury-gold)] font-light tracking-wider text-sm uppercase
group relative mx-2 cursor-pointer text-left w-full block"
style={{
touchAction: 'manipulation',
WebkitTapHighlightColor: 'transparent',
pointerEvents: 'auto'
}}
>
<span
className="relative z-10"
style={{ pointerEvents: 'none' }}
>
{link.label}
</span>
<span
className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.15)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"
style={{ pointerEvents: 'none' }}
></span>
</Link>
))}
{mobileMenuContent && (
<>
<div className="border-t border-[var(--luxury-gold)]/20 my-2"></div>
{mobileMenuContent}
</>
)}
</div>
</div>
</div>
</>,
document.body
)}
</div>
);

16
Frontend/src/shared/components/OfflineIndicator.tsx
View File

@@ -14,19 +14,19 @@ const OfflineIndicator: React.FC = () => {
aria-live="polite"
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-4 sm:pb-6">
<div className="relative overflow-hidden rounded-lg shadow-2xl border border-[#d4af37]/30 backdrop-blur-xl bg-gradient-to-r from-slate-900/95 via-slate-800/95 to-slate-900/95">
<div className="relative overflow-hidden rounded-lg shadow-2xl border border-[var(--luxury-gold)]/30 backdrop-blur-xl bg-gradient-to-r from-slate-900/95 via-slate-800/95 to-slate-900/95">
{/* Gold accent border top */}
<div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#d4af37] to-transparent"></div>
<div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[var(--luxury-gold)] to-transparent"></div>
{/* Subtle glow effect */}
<div className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/5 via-transparent to-[#d4af37]/5 pointer-events-none"></div>
<div className="absolute inset-0 bg-gradient-to-r from-[var(--luxury-gold)]/5 via-transparent to-[var(--luxury-gold)]/5 pointer-events-none"></div>
{/* Content */}
<div className="relative px-6 py-4 sm:px-8 sm:py-5 flex items-center justify-center gap-3 sm:gap-4">
{/* Icon with gold accent */}
<div className="relative flex-shrink-0">
<div className="absolute inset-0 bg-[#d4af37]/20 blur-xl rounded-full"></div>
<div className="relative bg-gradient-to-br from-[#d4af37] to-[#c9a227] p-2.5 rounded-full shadow-lg shadow-[#d4af37]/30">
<div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-xl rounded-full"></div>
<div className="relative bg-gradient-to-br from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] p-2.5 rounded-full shadow-lg shadow-[var(--luxury-gold)]/30">
<WifiOff className="w-5 h-5 sm:w-6 sm:h-6 text-slate-900" strokeWidth={2.5} />
</div>
</div>
@@ -43,9 +43,9 @@ const OfflineIndicator: React.FC = () => {
{/* Decorative elements */}
<div className="hidden sm:flex absolute right-6 top-1/2 -translate-y-1/2 items-center gap-1 opacity-30">
<div className="w-1 h-1 rounded-full bg-[#d4af37] animate-pulse"></div>
<div className="w-1 h-1 rounded-full bg-[#d4af37] animate-pulse" style={{ animationDelay: '0.2s' }}></div>
<div className="w-1 h-1 rounded-full bg-[#d4af37] animate-pulse" style={{ animationDelay: '0.4s' }}></div>
<div className="w-1 h-1 rounded-full bg-[var(--luxury-gold)] animate-pulse"></div>
<div className="w-1 h-1 rounded-full bg-[var(--luxury-gold)] animate-pulse" style={{ animationDelay: '0.2s' }}></div>
<div className="w-1 h-1 rounded-full bg-[var(--luxury-gold)] animate-pulse" style={{ animationDelay: '0.4s' }}></div>
</div>
</div>
</div>

12
Frontend/src/shared/components/SidebarAdmin.tsx
View File

@@ -177,6 +177,11 @@ const SidebarAdmin: React.FC<SidebarAdminProps> = ({
icon: FileText,
label: 'Invoices'
},
{
path: '/admin/promotions',
icon: Tag,
label: 'Promotions'
},
{
path: '/admin/financial-audit',
icon: FileCheck,
@@ -193,11 +198,6 @@ const SidebarAdmin: React.FC<SidebarAdminProps> = ({
icon: BarChart3,
label: 'Reports & Analytics'
},
{
path: '/admin/business',
icon: TrendingUp,
label: 'Business Insights'
},
]
},
{
@@ -367,7 +367,7 @@ const SidebarAdmin: React.FC<SidebarAdminProps> = ({
const isActive = (path: string) => {
if (location.pathname === path) return true;
if (path === '/admin/settings' || path === '/admin/analytics' || path === '/admin/business' || path === '/admin/reception' || path === '/admin/advanced-rooms' || path === '/admin/page-content' || path === '/admin/loyalty') {
if (path === '/admin/settings' || path === '/admin/analytics' || path === '/admin/reception' || path === '/admin/advanced-rooms' || path === '/admin/page-content' || path === '/admin/loyalty') {
return location.pathname === path;
}