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 18:35:46 +02:00
parent a1bd576540
commit ab832f851b
26 changed files with 8878 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
Frontend/src/pages/AboutPage.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import {
Hotel,
Award,
@@ -12,8 +12,100 @@ import {
Clock
} from 'lucide-react';
import { Link } from 'react-router-dom';
import { pageContentService } from '../services/api';
import type { PageContent } from '../services/api/pageContentService';
const AboutPage: React.FC = () => {
const [pageContent, setPageContent] = useState<PageContent | null>(null);
useEffect(() => {
const fetchPageContent = async () => {
try {
const response = await pageContentService.getPageContent('about');
if (response.status === 'success' && response.data?.page_content) {
setPageContent(response.data.page_content);
// Update document title and meta tags
if (response.data.page_content.meta_title) {
document.title = response.data.page_content.meta_title;
}
if (response.data.page_content.meta_description) {
let metaDescription = document.querySelector('meta[name="description"]');
if (!metaDescription) {
metaDescription = document.createElement('meta');
metaDescription.setAttribute('name', 'description');
document.head.appendChild(metaDescription);
}
metaDescription.setAttribute('content', response.data.page_content.meta_description);
}
}
} catch (err: any) {
console.error('Error fetching page content:', err);
// Silently fail - use default content
}
};
fetchPageContent();
}, []);
// Default values
const defaultValues = [
{
icon: Heart,
title: 'Passion',
description: 'We are passionate about hospitality and dedicated to creating exceptional experiences for every guest.'
},
{
icon: Award,
title: 'Excellence',
description: 'We strive for excellence in every aspect of our service, from the smallest detail to the grandest gesture.'
},
{
icon: Shield,
title: 'Integrity',
description: 'We conduct our business with honesty, transparency, and respect for our guests and community.'
},
{
icon: Users,
title: 'Service',
description: 'Our guests are at the heart of everything we do. Your comfort and satisfaction are our top priorities.'
}
];
const defaultFeatures = [
{
icon: Star,
title: 'Premium Accommodations',
description: 'Luxuriously appointed rooms and suites designed for ultimate comfort and relaxation.'
},
{
icon: Clock,
title: '24/7 Service',
description: 'Round-the-clock concierge and room service to attend to your needs at any time.'
},
{
icon: Award,
title: 'Award-Winning',
description: 'Recognized for excellence in hospitality and guest satisfaction.'
}
];
const values = pageContent?.values && pageContent.values.length > 0
? pageContent.values.map((v: any) => ({
icon: defaultValues.find(d => d.title === v.title)?.icon || Heart,
title: v.title,
description: v.description
}))
: defaultValues;
const features = pageContent?.features && pageContent.features.length > 0
? pageContent.features.map((f: any) => ({
icon: defaultFeatures.find(d => d.title === f.title)?.icon || Star,
title: f.title,
description: f.description
}))
: defaultFeatures;
return (
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
{/* Hero Section */}
@@ -27,10 +119,10 @@ const AboutPage: React.FC = () => {
</div>
</div>
<h1 className="text-5xl md:text-6xl font-serif font-bold mb-6 tracking-tight">
About Luxury Hotel
{pageContent?.title || 'About Luxury Hotel'}
</h1>
<p className="text-xl text-gray-300 font-light leading-relaxed">
Where Excellence Meets Unforgettable Experiences
{pageContent?.subtitle || pageContent?.description || 'Where Excellence Meets Unforgettable Experiences'}
</p>
</div>
</div>
@@ -47,21 +139,27 @@ const AboutPage: React.FC = () => {
<div className="w-24 h-1 bg-gradient-to-r from-[#d4af37] to-[#f5d76e] mx-auto"></div>
</div>
<div className="prose prose-lg max-w-none text-gray-700 leading-relaxed space-y-6 animate-slide-up">
<p>
Welcome to Luxury Hotel, where timeless elegance meets modern sophistication.
Since our founding, we have been dedicated to providing exceptional hospitality
and creating unforgettable memories for our guests.
</p>
<p>
Nestled in the heart of the city, our hotel combines classic architecture with
contemporary amenities, offering a perfect blend of comfort and luxury. Every
detail has been carefully curated to ensure your stay exceeds expectations.
</p>
<p>
Our commitment to excellence extends beyond our beautiful rooms and facilities.
We believe in creating meaningful connections with our guests, understanding
their needs, and delivering personalized service that makes each visit special.
</p>
{pageContent?.story_content ? (
<div dangerouslySetInnerHTML={{ __html: pageContent.story_content.replace(/\n/g, '<br />') }} />
) : (
<>
<p>
Welcome to Luxury Hotel, where timeless elegance meets modern sophistication.
Since our founding, we have been dedicated to providing exceptional hospitality
and creating unforgettable memories for our guests.
</p>
<p>
Nestled in the heart of the city, our hotel combines classic architecture with
contemporary amenities, offering a perfect blend of comfort and luxury. Every
detail has been carefully curated to ensure your stay exceeds expectations.
</p>
<p>
Our commitment to excellence extends beyond our beautiful rooms and facilities.
We believe in creating meaningful connections with our guests, understanding
their needs, and delivering personalized service that makes each visit special.
</p>
</>
)}
</div>
</div>
</div>
@@ -78,28 +176,7 @@ const AboutPage: React.FC = () => {
<div className="w-24 h-1 bg-gradient-to-r from-[#d4af37] to-[#f5d76e] mx-auto"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{[
{
icon: Heart,
title: 'Passion',
description: 'We are passionate about hospitality and dedicated to creating exceptional experiences for every guest.'
},
{
icon: Award,
title: 'Excellence',
description: 'We strive for excellence in every aspect of our service, from the smallest detail to the grandest gesture.'
},
{
icon: Shield,
title: 'Integrity',
description: 'We conduct our business with honesty, transparency, and respect for our guests and community.'
},
{
icon: Users,
title: 'Service',
description: 'Our guests are at the heart of everything we do. Your comfort and satisfaction are our top priorities.'
}
].map((value, index) => (
{values.map((value, index) => (
<div
key={value.title}
className="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 animate-slide-up"
@@ -132,23 +209,7 @@ const AboutPage: React.FC = () => {
<div className="w-24 h-1 bg-gradient-to-r from-[#d4af37] to-[#f5d76e] mx-auto"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[
{
icon: Star,
title: 'Premium Accommodations',
description: 'Luxuriously appointed rooms and suites designed for ultimate comfort and relaxation.'
},
{
icon: Clock,
title: '24/7 Service',
description: 'Round-the-clock concierge and room service to attend to your needs at any time.'
},
{
icon: Award,
title: 'Award-Winning',
description: 'Recognized for excellence in hospitality and guest satisfaction.'
}
].map((feature, index) => (
{features.map((feature, index) => (
<div
key={feature.title}
className="text-center p-6 animate-slide-up"
@@ -192,9 +253,13 @@ const AboutPage: React.FC = () => {
Address
</h3>
<p className="text-gray-600">
123 Luxury Street<br />
City, State 12345<br />
Country
{(pageContent?.contact_info?.address || '123 Luxury Street\nCity, State 12345\nCountry')
.split('\n').map((line, i) => (
<React.Fragment key={i}>
{line}
{i < 2 && <br />}
</React.Fragment>
))}
</p>
</div>
<div className="text-center p-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 animate-slide-up" style={{ animationDelay: '0.1s' }}>
@@ -205,8 +270,8 @@ const AboutPage: React.FC = () => {
Phone
</h3>
<p className="text-gray-600">
<a href="tel:+1234567890" className="hover:text-[#d4af37] transition-colors">
+1 (234) 567-890
<a href={`tel:${pageContent?.contact_info?.phone || '+1234567890'}`} className="hover:text-[#d4af37] transition-colors">
{pageContent?.contact_info?.phone || '+1 (234) 567-890'}
</a>
</p>
</div>
@@ -218,8 +283,8 @@ const AboutPage: React.FC = () => {
Email
</h3>
<p className="text-gray-600">
<a href="mailto:info@luxuryhotel.com" className="hover:text-[#d4af37] transition-colors">
info@luxuryhotel.com
<a href={`mailto:${pageContent?.contact_info?.email || 'info@luxuryhotel.com'}`} className="hover:text-[#d4af37] transition-colors">
{pageContent?.contact_info?.email || 'info@luxuryhotel.com'}
</a>
</p>
</div>