|
|
@@ -0,0 +1,260 @@
|
|
|
+import React, { useEffect, useState } from 'react';
|
|
|
+import Navbar from '@/src/components/Navbar.tsx';
|
|
|
+import Sidebar from '@/src/components/Sidebar.tsx';
|
|
|
+import Footer from '@/src/components/Footer.tsx';
|
|
|
+import { CONTENT } from '../constants.ts';
|
|
|
+import { useLanguage } from '@/src/contexts/LanguageContext.tsx';
|
|
|
+import { useTheme } from '@/src/contexts/ThemeContext.tsx';
|
|
|
+import { useLocation } from 'react-router-dom';
|
|
|
+import { X } from 'lucide-react';
|
|
|
+import WeChatIcon from '@/src/assets/logo/wechat.png';
|
|
|
+import TiktokIcon from '@/src/assets/logo/tiktok.png';
|
|
|
+import RedBook from '@/src/assets/logo/redbook.png';
|
|
|
+import MiniProgramQRCode from '@/src/assets/QRPicture/wechat-QR.png';
|
|
|
+import TiktokQRCode from '@/src/assets/QRPicture/Tiktok-QR.png';
|
|
|
+import RedBookQRCode from '@/src/assets/QRPicture/redbook-QR.png';
|
|
|
+import CompanyLogo from '@/src/assets/logo/company.png';
|
|
|
+
|
|
|
+
|
|
|
+const AboutUs: React.FC = () => {
|
|
|
+ const { language } = useLanguage();
|
|
|
+ const { aboutHeroImage } = useTheme();
|
|
|
+ const location = useLocation();
|
|
|
+ const t = CONTENT[language];
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ const params = new URLSearchParams(location.search);
|
|
|
+ const section = params.get('section');
|
|
|
+
|
|
|
+ let elementId = '';
|
|
|
+ if (section === 'intro') {
|
|
|
+ elementId = 'about-intro';
|
|
|
+ } else if (section === 'media') {
|
|
|
+ elementId = 'official-media';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (elementId) {
|
|
|
+ setTimeout(() => {
|
|
|
+ const element = document.getElementById(elementId);
|
|
|
+ if (element) {
|
|
|
+ element.scrollIntoView({ behavior: 'smooth' });
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ }, [location.search]);
|
|
|
+
|
|
|
+ // Modal state
|
|
|
+ const [modalOpen, setModalOpen] = useState(false);
|
|
|
+ const [selectedMedia, setSelectedMedia] = useState<{name: string, nameEn: string, qrCode: string} | null>(null);
|
|
|
+
|
|
|
+ // Mock data for official media section
|
|
|
+ const socialMedia = [
|
|
|
+ {
|
|
|
+ name: '微信公众号',
|
|
|
+ nameEn: 'WeChat Official Account',
|
|
|
+ icon: WeChatIcon,
|
|
|
+ desc: '关注获取最新游轮资讯',
|
|
|
+ descEn: 'Follow for the latest cruise information',
|
|
|
+ link: '#',
|
|
|
+ qrCode: MiniProgramQRCode
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '抖音',
|
|
|
+ nameEn: 'TikTok',
|
|
|
+ icon: TiktokIcon,
|
|
|
+ desc: '观看精彩游轮视频',
|
|
|
+ descEn: 'Watch exciting cruise videos',
|
|
|
+ link: '#',
|
|
|
+ qrCode: TiktokQRCode
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '小红书',
|
|
|
+ nameEn: 'Xiaohongshu',
|
|
|
+ icon: RedBook,
|
|
|
+ desc: '查看真实用户体验',
|
|
|
+ descEn: 'Check real user experiences',
|
|
|
+ link: '#',
|
|
|
+ qrCode: RedBookQRCode
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '微信视频号',
|
|
|
+ nameEn: 'WeChat Video Channel',
|
|
|
+ icon: WeChatIcon,
|
|
|
+ desc: '关注游轮直播动态',
|
|
|
+ descEn: 'Follow cruise live broadcasts',
|
|
|
+ link: '#',
|
|
|
+ qrCode: MiniProgramQRCode
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ // Modal handlers
|
|
|
+ const openModal = (media: typeof socialMedia[0]) => {
|
|
|
+ setSelectedMedia({
|
|
|
+ name: media.name,
|
|
|
+ nameEn: media.nameEn,
|
|
|
+ qrCode: media.qrCode
|
|
|
+ });
|
|
|
+ setModalOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ const closeModal = () => {
|
|
|
+ setModalOpen(false);
|
|
|
+ setSelectedMedia(null);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="min-h-screen bg-white font-sans text-vista-darkblue overflow-x-hidden">
|
|
|
+ <Navbar />
|
|
|
+ <Sidebar />
|
|
|
+
|
|
|
+ {/* Hero Section */}
|
|
|
+ <section className="relative h-[50vh] w-full overflow-hidden">
|
|
|
+ <div className="absolute inset-0 z-0">
|
|
|
+ <img
|
|
|
+ src={aboutHeroImage || "https://images.unsplash.com/photo-1578474843222-9593bc88d8b0?q=80&w=1920&auto=format&fit=crop"}
|
|
|
+ alt="About Us"
|
|
|
+ className="w-full h-full object-cover object-center"
|
|
|
+ />
|
|
|
+ <div className="absolute inset-0 bg-black/40 pointer-events-none"></div>
|
|
|
+ </div>
|
|
|
+ <div className="relative z-10 h-full flex flex-col justify-center items-center text-center px-4 drop-shadow-md">
|
|
|
+ <h1 className="text-white text-4xl md:text-6xl font-serif leading-tight italic">
|
|
|
+ {language === 'zh' ? '关于我们' : 'About Us'}
|
|
|
+ </h1>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ {/* Main Content */}
|
|
|
+ <main className="py-20">
|
|
|
+ {/* Company Introduction Section */}
|
|
|
+ <section id="about-intro" className="max-w-7xl mx-auto px-6 mb-24">
|
|
|
+ <div className="flex flex-col md:flex-row items-center gap-12">
|
|
|
+ <div className="md:w-1/2">
|
|
|
+ <div className="relative">
|
|
|
+ <img
|
|
|
+ src={ CompanyLogo || "https://images.unsplash.com/photo-1599640845513-2627a35c602a?q=80&w=1920&auto=format&fit=crop"}
|
|
|
+ alt="Company"
|
|
|
+ className="w-full h-auto rounded-lg shadow-xl"
|
|
|
+ />
|
|
|
+ <div className="absolute -bottom-6 -right-6 bg-vista-gold text-white p-6 rounded-lg shadow-lg">
|
|
|
+ <span className="text-3xl font-serif">10+</span>
|
|
|
+ <p className="text-sm uppercase tracking-widest mt-1">{language === 'zh' ? '年行业经验' : 'Years Experience'}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="md:w-1/2">
|
|
|
+ <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{language === 'zh' ? '企业简介' : 'Company Profile'}</span>
|
|
|
+ <h2 className="text-4xl font-serif text-vista-darkblue mt-3 mb-6">{language === 'zh' ? '长江行游轮' : 'Vista Cruises'}</h2>
|
|
|
+ <p className="text-vista-darkblue/70 leading-relaxed mb-6">
|
|
|
+ {language === 'zh'
|
|
|
+ ? '长江行游轮是三峡旅游集团旗下高端游轮品牌，致力于为宾客提供长江之上的奢华体验。我们的船队由多艘现代化游轮组成，每一艘都配备了顶级设施和专业服务团队，确保您的每一次航行都成为难忘的记忆。'
|
|
|
+ : 'Vista Cruises is a premium cruise brand under the Three Gorges Tourism Group, dedicated to providing luxurious experiences on the Yangtze River. Our fleet consists of multiple modern cruise ships, each equipped with top-tier facilities and a professional service team to ensure every voyage becomes an unforgettable memory.'}
|
|
|
+ </p>
|
|
|
+ <p className="text-vista-darkblue/70 leading-relaxed mb-8">
|
|
|
+ {language === 'zh'
|
|
|
+ ? '我们秉承着"奢华与传承的完美交融"的理念，重新定义长江之旅。从精美的餐饮到丰富的岸上活动，从舒适的住宿到贴心的服务，每一个细节都旨在为您打造无与伦比的游轮体验。'
|
|
|
+ : 'We uphold the philosophy of "perfect blend of luxury and heritage", redefining travel on the Yangtze River. From exquisite dining to rich shore activities, from comfortable accommodations to attentive service, every detail is designed to create an unparalleled cruise experience for you.'}
|
|
|
+ </p>
|
|
|
+ <div className="grid grid-cols-2 gap-6">
|
|
|
+ <div className="bg-vista-teal/5 p-4 rounded-lg">
|
|
|
+ <span className="text-3xl font-serif text-vista-gold">17,000+</span>
|
|
|
+ <p className="text-xs uppercase tracking-widest text-vista-darkblue/60 mt-1">{language === 'zh' ? '总吨位' : 'Total Tonnage'}</p>
|
|
|
+ </div>
|
|
|
+ <div className="bg-vista-teal/5 p-4 rounded-lg">
|
|
|
+ <span className="text-3xl font-serif text-vista-gold">500+</span>
|
|
|
+ <p className="text-xs uppercase tracking-widest text-vista-darkblue/60 mt-1">{language === 'zh' ? '客房数量' : 'Rooms'}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ {/* Official Media Section */}
|
|
|
+ <section id="official-media" className="py-24 bg-vista-teal">
|
|
|
+ <div className="max-w-7xl mx-auto px-6">
|
|
|
+ <div className="text-center mb-16">
|
|
|
+ <span className="text-white uppercase tracking-widest text-sm font-bold">{language === 'zh' ? '官方媒体' : 'Official Media'}</span>
|
|
|
+ <h2 className="text-4xl font-serif text-white mt-3">{language === 'zh' ? '关注我们' : 'Follow Us'}</h2>
|
|
|
+ </div>
|
|
|
+ <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
|
+ {socialMedia.map((media, index) => (
|
|
|
+ <div
|
|
|
+ key={index}
|
|
|
+ className="bg-white rounded-lg shadow-xl p-8 text-center hover:shadow-2xl transition-shadow duration-300"
|
|
|
+ >
|
|
|
+ <div className="w-16 h-16 mx-auto mb-6 bg-vista-teal/10 rounded-full flex items-center justify-center">
|
|
|
+ <img
|
|
|
+ src={media.icon}
|
|
|
+ alt={media.name}
|
|
|
+ className="w-8 h-8 object-contain"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <h3 className="text-xl font-serif text-vista-darkblue mb-2">
|
|
|
+ {language === 'zh' ? media.name : media.nameEn}
|
|
|
+ </h3>
|
|
|
+ <p className="text-vista-darkblue/70 text-sm mb-6">
|
|
|
+ {language === 'zh' ? media.desc : media.descEn}
|
|
|
+ </p>
|
|
|
+ <button
|
|
|
+ onClick={() => openModal(media)}
|
|
|
+ className="inline-block px-6 py-3 bg-vista-gold text-white font-bold tracking-widest uppercase text-xs hover:bg-white hover:text-vista-darkblue hover:border hover:border-vista-gold transition-all cursor-pointer"
|
|
|
+ >
|
|
|
+ {language === 'zh' ? '关注' : 'Follow'}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ {/* QR Code Modal */}
|
|
|
+ {modalOpen && selectedMedia && (
|
|
|
+ <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
|
|
|
+ <div className="bg-white rounded-lg shadow-2xl max-w-md w-full mx-auto">
|
|
|
+ {/* Modal Header */}
|
|
|
+ <div className="flex justify-between items-center p-6 border-b">
|
|
|
+ <h3 className="text-xl font-serif text-vista-darkblue">
|
|
|
+ {language === 'zh' ? selectedMedia.name : selectedMedia.nameEn}
|
|
|
+ </h3>
|
|
|
+ <button
|
|
|
+ onClick={closeModal}
|
|
|
+ className="text-vista-darkblue/70 hover:text-vista-darkblue transition-colors"
|
|
|
+ >
|
|
|
+ <X size={24} />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Modal Body */}
|
|
|
+ <div className="p-8 text-center">
|
|
|
+ <p className="text-vista-darkblue/70 mb-6">
|
|
|
+ {language === 'zh' ? '扫描二维码关注我们' : 'Scan the QR code to follow us'}
|
|
|
+ </p>
|
|
|
+ <div className="flex justify-center items-center">
|
|
|
+ <img
|
|
|
+ src={selectedMedia.qrCode as string}
|
|
|
+ alt={`${language === 'zh' ? selectedMedia.name : selectedMedia.nameEn} QR Code`}
|
|
|
+ className="w-64 h-64 object-contain border border-vista-gold/30 p-4"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* Modal Footer */}
|
|
|
+ <div className="flex justify-center p-6 border-t">
|
|
|
+ <button
|
|
|
+ onClick={closeModal}
|
|
|
+ className="px-8 py-3 bg-vista-gold text-white font-bold tracking-widest uppercase text-xs hover:bg-white hover:text-vista-darkblue hover:border hover:border-vista-gold transition-all"
|
|
|
+ >
|
|
|
+ {language === 'zh' ? '关闭' : 'Close'}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <Footer />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default AboutUs;
|
