updates
This commit is contained in:
Iliyan Angelov
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Hotel,
|
||||
@@ -15,8 +15,51 @@ import {
|
||||
Star
|
||||
} from 'lucide-react';
|
||||
import CookiePreferencesLink from '../common/CookiePreferencesLink';
|
||||
import { pageContentService } from '../../services/api';
|
||||
import type { PageContent } from '../../services/api/pageContentService';
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
const [pageContent, setPageContent] = useState<PageContent | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPageContent = async () => {
|
||||
try {
|
||||
const response = await pageContentService.getPageContent('footer');
|
||||
if (response.status === 'success' && response.data?.page_content) {
|
||||
setPageContent(response.data.page_content);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Error fetching footer content:', err);
|
||||
// Silently fail - use default content
|
||||
}
|
||||
};
|
||||
|
||||
fetchPageContent();
|
||||
}, []);
|
||||
|
||||
// Default links
|
||||
const defaultQuickLinks = [
|
||||
{ label: 'Home', url: '/' },
|
||||
{ label: 'Rooms & Suites', url: '/rooms' },
|
||||
{ label: 'My Bookings', url: '/bookings' },
|
||||
{ label: 'About Us', url: '/about' }
|
||||
];
|
||||
|
||||
const defaultSupportLinks = [
|
||||
{ label: 'FAQ', url: '/faq' },
|
||||
{ label: 'Terms of Service', url: '/terms' },
|
||||
{ label: 'Privacy Policy', url: '/privacy' },
|
||||
{ label: 'Contact Us', url: '/contact' }
|
||||
];
|
||||
|
||||
const quickLinks = pageContent?.footer_links?.quick_links && pageContent.footer_links.quick_links.length > 0
|
||||
? pageContent.footer_links.quick_links
|
||||
: defaultQuickLinks;
|
||||
|
||||
const supportLinks = pageContent?.footer_links?.support_links && pageContent.footer_links.support_links.length > 0
|
||||
? pageContent.footer_links.support_links
|
||||
: defaultSupportLinks;
|
||||
|
||||
return (
|
||||
<footer className="relative bg-gradient-to-b from-[#1a1a1a] via-[#0f0f0f] to-black text-gray-300 overflow-hidden">
|
||||
{/* Elegant top border with gradient */}
|
||||
@@ -39,7 +82,7 @@ const Footer: React.FC = () => {
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-2xl font-serif font-semibold text-white tracking-wide">
|
||||
Luxury Hotel
|
||||
{pageContent?.title || 'Luxury Hotel'}
|
||||
</span>
|
||||
<p className="text-xs text-[#d4af37]/80 font-light tracking-widest uppercase mt-0.5">
|
||||
Excellence Redefined
|
||||
@@ -47,8 +90,7 @@ const Footer: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mb-6 leading-relaxed max-w-md">
|
||||
Experience unparalleled luxury and world-class hospitality.
|
||||
Your journey to exceptional comfort begins here.
|
||||
{pageContent?.description || 'Experience unparalleled luxury and world-class hospitality. Your journey to exceptional comfort begins here.'}
|
||||
</p>
|
||||
|
||||
{/* Premium Certifications */}
|
||||
@@ -65,46 +107,66 @@ const Footer: React.FC = () => {
|
||||
|
||||
{/* Social Media - Premium Style */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<a
|
||||
href="#"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<Facebook className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<Twitter className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<Instagram className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<Linkedin className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="YouTube"
|
||||
>
|
||||
<Youtube className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
{pageContent?.social_links?.facebook && (
|
||||
<a
|
||||
href={pageContent.social_links.facebook}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<Facebook className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
)}
|
||||
{pageContent?.social_links?.twitter && (
|
||||
<a
|
||||
href={pageContent.social_links.twitter}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<Twitter className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
)}
|
||||
{pageContent?.social_links?.instagram && (
|
||||
<a
|
||||
href={pageContent.social_links.instagram}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<Instagram className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
)}
|
||||
{pageContent?.social_links?.linkedin && (
|
||||
<a
|
||||
href={pageContent.social_links.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<Linkedin className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
)}
|
||||
{pageContent?.social_links?.youtube && (
|
||||
<a
|
||||
href={pageContent.social_links.youtube}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group relative w-11 h-11 flex items-center justify-center rounded-full bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 hover:border-[#d4af37]/50 transition-all duration-300 hover:bg-[#d4af37]/10"
|
||||
aria-label="YouTube"
|
||||
>
|
||||
<Youtube className="w-5 h-5 text-gray-400 group-hover:text-[#d4af37] transition-colors" />
|
||||
<div className="absolute inset-0 rounded-full bg-[#d4af37]/0 group-hover:bg-[#d4af37]/20 blur-lg transition-all duration-300"></div>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -115,42 +177,17 @@ const Footer: React.FC = () => {
|
||||
<span className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-[#d4af37]/50 to-transparent"></span>
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<Link
|
||||
to="/"
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">Home</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/rooms"
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">Rooms & Suites</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/bookings"
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">My Bookings</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/about"
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">About Us</span>
|
||||
</Link>
|
||||
</li>
|
||||
{quickLinks.map((link) => (
|
||||
<li key={link.url}>
|
||||
<Link
|
||||
to={link.url}
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">{link.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -161,42 +198,17 @@ const Footer: React.FC = () => {
|
||||
<span className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-[#d4af37]/50 to-transparent"></span>
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<Link
|
||||
to="/faq"
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">FAQ</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/terms"
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">Terms of Service</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/privacy"
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">Privacy Policy</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">Contact Us</span>
|
||||
</Link>
|
||||
</li>
|
||||
{supportLinks.map((link) => (
|
||||
<li key={link.url}>
|
||||
<Link
|
||||
to={link.url}
|
||||
className="group flex items-center text-sm text-gray-400 hover:text-[#d4af37] transition-all duration-300 relative font-light tracking-wide"
|
||||
>
|
||||
<span className="absolute left-0 w-0 h-px bg-[#d4af37] group-hover:w-6 transition-all duration-300"></span>
|
||||
<span className="ml-8 group-hover:translate-x-1 transition-transform duration-300">{link.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -213,8 +225,13 @@ const Footer: React.FC = () => {
|
||||
<div className="absolute inset-0 bg-[#d4af37]/20 blur-md opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
</div>
|
||||
<span className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors leading-relaxed font-light">
|
||||
123 ABC Street, District 1<br />
|
||||
Ho Chi Minh City, Vietnam
|
||||
{((pageContent?.contact_info?.address || '123 ABC Street, District 1\nHo Chi Minh City, Vietnam')
|
||||
.split('\n').map((line, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{line}
|
||||
{i < 1 && <br />}
|
||||
</React.Fragment>
|
||||
)))}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center space-x-4 group">
|
||||
@@ -222,18 +239,22 @@ 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:+842812345678" className="text-sm text-gray-400 group-hover:text-[#d4af37] transition-colors font-light tracking-wide">
|
||||
(028) 1234 5678
|
||||
</a>
|
||||
{pageContent?.contact_info?.phone && (
|
||||
<a href={`tel:${pageContent.contact_info.phone}`} className="text-sm text-gray-400 group-hover:text-[#d4af37] transition-colors font-light tracking-wide">
|
||||
{pageContent.contact_info.phone}
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
<li className="flex items-center space-x-4 group">
|
||||
<div className="relative">
|
||||
<Mail 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="mailto:info@luxuryhotel.com" className="text-sm text-gray-400 group-hover:text-[#d4af37] transition-colors font-light tracking-wide">
|
||||
info@luxuryhotel.com
|
||||
</a>
|
||||
{pageContent?.contact_info?.email && (
|
||||
<a href={`mailto:${pageContent.contact_info.email}`} className="text-sm text-gray-400 group-hover:text-[#d4af37] transition-colors font-light tracking-wide">
|
||||
{pageContent.contact_info.email}
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user