updates
This commit is contained in:
Iliyan Angelov
@@ -26,6 +26,7 @@ import {
|
||||
LucideIcon
|
||||
} from 'lucide-react';
|
||||
import CookiePreferencesLink from '../common/CookiePreferencesLink';
|
||||
import ChatWidget from '../chat/ChatWidget';
|
||||
import { pageContentService } from '../../services/api';
|
||||
import type { PageContent } from '../../services/api/pageContentService';
|
||||
import { useCompanySettings } from '../../contexts/CompanySettingsContext';
|
||||
@@ -43,26 +44,28 @@ const Footer: React.FC = () => {
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Error fetching footer content:', err);
|
||||
// Silently fail - use default content
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
fetchPageContent();
|
||||
}, []);
|
||||
|
||||
// Get phone, email, and address from centralized company settings
|
||||
|
||||
const displayPhone = settings.company_phone || null;
|
||||
const displayEmail = settings.company_email || null;
|
||||
const displayAddress = settings.company_address || '123 ABC Street, District 1\nHo Chi Minh City, Vietnam';
|
||||
const phoneNumber = displayPhone ? displayPhone.replace(/\s+/g, '').replace(/[()]/g, '') : '';
|
||||
const phoneHref = displayPhone ? 'tel:' + phoneNumber : '';
|
||||
|
||||
|
||||
// Get logo URL from centralized company settings
|
||||
const logoUrl = settings.company_logo_url
|
||||
? (settings.company_logo_url.startsWith('http')
|
||||
? settings.company_logo_url
|
||||
: `${import.meta.env.VITE_API_URL || 'http://localhost:8000'}${settings.company_logo_url}`)
|
||||
: null;
|
||||
|
||||
// Icon map for badges
|
||||
|
||||
const iconMap: Record<string, LucideIcon> = {
|
||||
Award,
|
||||
Star,
|
||||
@@ -79,10 +82,10 @@ const Footer: React.FC = () => {
|
||||
TrendingUp,
|
||||
};
|
||||
|
||||
// Get badges from page content
|
||||
|
||||
const badges = pageContent?.badges || [];
|
||||
|
||||
// Default links
|
||||
|
||||
const defaultQuickLinks = [
|
||||
{ label: 'Home', url: '/' },
|
||||
{ label: 'Rooms & Suites', url: '/rooms' },
|
||||
@@ -107,18 +110,18 @@ const Footer: React.FC = () => {
|
||||
|
||||
return (
|
||||
<footer className="relative bg-gradient-to-b from-[#1a1a1a] via-[#0f0f0f] to-black text-gray-300 overflow-hidden">
|
||||
{/* Elegant top border with gradient */}
|
||||
{}
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#d4af37]/50 to-transparent"></div>
|
||||
|
||||
{/* Subtle background pattern */}
|
||||
{}
|
||||
<div className="absolute inset-0 opacity-5" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9zM25 0h2v20h-2zM41 0h2v20h-2zM57 0h2v20h-2zM0 9h20v2H0zM0 25h20v2H0zM0 41h20v2H0zM0 57h20v2H0zM40 9h20v2H40zM40 25h20v2H40zM40 41h20v2H40zM40 57h20v2H40zM9 40h2v20H9zM25 40h2v20h-2zM41 40h2v20h-2zM57 40h2v20h-2z' fill='%23d4af37' opacity='0.05'/%3E%3C/svg%3E")`
|
||||
}}></div>
|
||||
|
||||
<div className="relative container mx-auto px-6 lg:px-8 py-16 lg:py-20">
|
||||
{/* Main Footer Content */}
|
||||
{}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-16 mb-16">
|
||||
{/* Company Info - Enhanced */}
|
||||
{}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex items-center space-x-3 mb-6">
|
||||
{logoUrl ? (
|
||||
@@ -148,7 +151,7 @@ const Footer: React.FC = () => {
|
||||
{pageContent?.description || 'Experience unparalleled luxury and world-class hospitality. Your journey to exceptional comfort begins here.'}
|
||||
</p>
|
||||
|
||||
{/* Premium Certifications */}
|
||||
{}
|
||||
{badges.length > 0 && badges.some(b => b.text) && (
|
||||
<div className="flex items-center space-x-6 mb-8">
|
||||
{badges.map((badge, index) => {
|
||||
@@ -164,7 +167,7 @@ const Footer: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Social Media - Premium Style */}
|
||||
{}
|
||||
<div className="flex items-center space-x-3">
|
||||
{pageContent?.social_links?.facebook && (
|
||||
<a
|
||||
@@ -229,7 +232,7 @@ const Footer: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links - Enhanced */}
|
||||
{}
|
||||
<div>
|
||||
<h3 className="text-white font-semibold text-lg mb-6 relative inline-block tracking-wide">
|
||||
<span className="relative z-10">Quick Links</span>
|
||||
@@ -250,7 +253,7 @@ const Footer: React.FC = () => {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Support - Enhanced */}
|
||||
{}
|
||||
<div>
|
||||
<h3 className="text-white font-semibold text-lg mb-6 relative inline-block tracking-wide">
|
||||
<span className="relative z-10">Guest Services</span>
|
||||
@@ -271,7 +274,7 @@ const Footer: React.FC = () => {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Info - Premium Style */}
|
||||
{}
|
||||
<div>
|
||||
<h3 className="text-white font-semibold text-lg mb-6 relative inline-block tracking-wide">
|
||||
<span className="relative z-10">Contact</span>
|
||||
@@ -299,7 +302,7 @@ const Footer: React.FC = () => {
|
||||
<Phone className="w-5 h-5 text-[#d4af37]/80 group-hover:text-[#d4af37] transition-colors flex-shrink-0" />
|
||||
<div className="absolute inset-0 bg-[#d4af37]/20 blur-md opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
</div>
|
||||
<a href={`tel:${displayPhone.replace(/\s+/g, '').replace(/[()]/g, '')}`} className="text-sm text-gray-400 group-hover:text-[#d4af37] transition-colors font-light tracking-wide">
|
||||
<a href={phoneHref} className="text-sm text-gray-400 group-hover:text-[#d4af37] transition-colors font-light tracking-wide">
|
||||
{displayPhone}
|
||||
</a>
|
||||
</li>
|
||||
@@ -317,7 +320,7 @@ const Footer: React.FC = () => {
|
||||
)}
|
||||
</ul>
|
||||
|
||||
{/* Star Rating Display */}
|
||||
{}
|
||||
<div className="mt-6 pt-6 border-t border-gray-800/50">
|
||||
<div className="flex items-center space-x-1 mb-2">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
@@ -329,7 +332,7 @@ const Footer: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider with Elegance */}
|
||||
{}
|
||||
<div className="relative my-12">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-800"></div>
|
||||
@@ -341,13 +344,13 @@ const Footer: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copyright - Enhanced */}
|
||||
{}
|
||||
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
|
||||
<div className="text-sm text-gray-500 font-light tracking-wide">
|
||||
{(() => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
const copyrightText = pageContent?.copyright_text || '© {YEAR} Luxury Hotel. All rights reserved.';
|
||||
// Replace {YEAR} placeholder with current year
|
||||
|
||||
return copyrightText.replace(/{YEAR}/g, currentYear.toString());
|
||||
})()}
|
||||
</div>
|
||||
@@ -361,8 +364,11 @@ const Footer: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Elegant bottom accent */}
|
||||
{}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#d4af37]/30 to-transparent"></div>
|
||||
|
||||
{}
|
||||
<ChatWidget />
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user