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-11-18 23:35:19 +02:00
parent ab832f851b
commit 2043ac897c
27 changed files with 2947 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
Frontend/src/components/layout/Footer.tsx
View File

@@ -12,13 +12,26 @@ import {
Youtube,
Award,
Shield,
Star
Star,
Trophy,
Medal,
BadgeCheck,
CheckCircle,
Heart,
Crown,
Gem,
Zap,
Target,
TrendingUp,
LucideIcon
} from 'lucide-react';
import CookiePreferencesLink from '../common/CookiePreferencesLink';
import { pageContentService } from '../../services/api';
import type { PageContent } from '../../services/api/pageContentService';
import { useCompanySettings } from '../../contexts/CompanySettingsContext';
const Footer: React.FC = () => {
const { settings } = useCompanySettings();
const [pageContent, setPageContent] = useState<PageContent | null>(null);
useEffect(() => {
@@ -37,6 +50,38 @@ const Footer: React.FC = () => {
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';
// 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,
Trophy,
Medal,
BadgeCheck,
CheckCircle,
Shield,
Heart,
Crown,
Gem,
Zap,
Target,
TrendingUp,
};
// Get badges from page content
const badges = pageContent?.badges || [];
// Default links
const defaultQuickLinks = [
{ label: 'Home', url: '/' },
@@ -76,16 +121,26 @@ const Footer: React.FC = () => {
{/* Company Info - Enhanced */}
<div className="lg:col-span-2">
<div className="flex items-center space-x-3 mb-6">
<div className="relative">
<Hotel className="w-10 h-10 text-[#d4af37]" />
<div className="absolute inset-0 bg-[#d4af37]/20 blur-xl"></div>
</div>
{logoUrl ? (
<div className="relative">
<img
src={logoUrl}
alt={settings.company_name}
className="h-10 w-auto object-contain drop-shadow-lg"
/>
</div>
) : (
<div className="relative">
<Hotel className="w-10 h-10 text-[#d4af37]" />
<div className="absolute inset-0 bg-[#d4af37]/20 blur-xl"></div>
</div>
)}
<div>
<span className="text-2xl font-serif font-semibold text-white tracking-wide">
{pageContent?.title || 'Luxury Hotel'}
{settings.company_name || pageContent?.title || 'Luxury Hotel'}
</span>
<p className="text-xs text-[#d4af37]/80 font-light tracking-widest uppercase mt-0.5">
Excellence Redefined
{settings.company_tagline || 'Excellence Redefined'}
</p>
</div>
</div>
@@ -94,16 +149,20 @@ const Footer: React.FC = () => {
</p>
{/* Premium Certifications */}
<div className="flex items-center space-x-6 mb-8">
<div className="flex items-center space-x-2 text-[#d4af37]/90">
<Award className="w-5 h-5" />
<span className="text-xs font-medium tracking-wide">5-Star Rated</span>
{badges.length > 0 && badges.some(b => b.text) && (
<div className="flex items-center space-x-6 mb-8">
{badges.map((badge, index) => {
if (!badge.text) return null;
const BadgeIcon = iconMap[badge.icon] || Award;
return (
<div key={index} className="flex items-center space-x-2 text-[#d4af37]/90">
<BadgeIcon className="w-5 h-5" />
<span className="text-xs font-medium tracking-wide">{badge.text}</span>
</div>
);
})}
</div>
<div className="flex items-center space-x-2 text-[#d4af37]/90">
<Shield className="w-5 h-5" />
<span className="text-xs font-medium tracking-wide">Award Winning</span>
</div>
</div>
)}
{/* Social Media - Premium Style */}
<div className="flex items-center space-x-3">
@@ -225,37 +284,37 @@ 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">
{((pageContent?.contact_info?.address || '123 ABC Street, District 1\nHo Chi Minh City, Vietnam')
{(displayAddress
.split('\n').map((line, i) => (
<React.Fragment key={i}>
{line}
{i < 1 && <br />}
{i < displayAddress.split('\n').length - 1 && <br />}
</React.Fragment>
)))}
</span>
</li>
<li className="flex items-center space-x-4 group">
<div className="relative">
<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>
{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}
{displayPhone && (
<li className="flex items-center space-x-4 group">
<div className="relative">
<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">
{displayPhone}
</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>
{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}
</li>
)}
{displayEmail && (
<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:${displayEmail}`} className="text-sm text-gray-400 group-hover:text-[#d4af37] transition-colors font-light tracking-wide">
{displayEmail}
</a>
)}
</li>
</li>
)}
</ul>
{/* Star Rating Display */}