新增页面: 游轮体验、游轮空间。

src/App.tsx

@@ -6,9 +6,11 @@ import Ships from '@/src/pages/Ships.tsx';
 import Itineraries from '@/src/pages/Itineraries.tsx';
 import AboutUs from '@/src/pages/AboutUs.tsx';
 import Guide from '@/src/pages/Guide.tsx';
+import CruiseExperience from '@/src/pages/CruiseExperience.tsx';
 import { LanguageProvider } from '@/src/contexts/LanguageContext.tsx';
 import { ThemeProvider } from '@/src/contexts/ThemeContext.tsx';
 import './styles.css';
+import CruiseSpace from "@/src/pages/CruiseSpace.tsx";
 
 const App: React.FC = () => {
   return (
@@ -18,9 +20,11 @@ const App: React.FC = () => {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/ships" element={<Ships />} />
-            <Route path="/about" element={<AboutUs />} />
             <Route path="/itineraries" element={<Itineraries />} />
             <Route path="/guide" element={<Guide />} />
+            <Route path="/space" element={<CruiseSpace />} />
+            <Route path="/experience" element={<CruiseExperience />} />
+            <Route path="/about" element={<AboutUs />} />
             <Route path="*" element={<Home />} />
           </Routes>
         </Router>

src/constants.ts

@@ -44,20 +44,20 @@ export const CONTENT = {
         },
         { 
           title: "游轮体验", 
-          link: "#experience",
+          link: "#/experience",
           submenu: [
-            { title: "品质服务", link: "#exp-service" },
-            { title: "星级餐饮", link: "#exp-dining" },
-            { title: "丰富活动", link: "#exp-activities" },
+            { title: "品质服务", link: "#/experience?section=service" },
+            { title: "星级餐饮", link: "#/experience?section=dining" },
+            { title: "丰富活动", link: "#/experience?section=activities" },
           ]
         },
         { 
           title: "游轮空间", 
-          link: "#spaces",
+          link: "#/space",
           submenu: [
-            { title: "设施设备", link: "#space-facilities" },
-            { title: "房型介绍", link: "#space-rooms" },
-            { title: "尊享礼遇", link: "#space-vip" },
+            { title: "设施设备", link: "#/space?section=facilities" },
+            { title: "房型介绍", link: "#/space?section=rooms" },
+            { title: "尊享礼遇", link: "#/space?section=vip" },
           ]
         },
         { 
@@ -148,6 +148,102 @@ export const CONTENT = {
       aurora: {
         title: "长江行·极光",
         desc: "2026首航，敬请期待。"
+      },
+      spaces: {
+        facilities: {
+          title: "设施设备",
+          desc: "长江行游轮配备了世界一流的设施设备，为您提供无与伦比的舒适体验。",
+          items: [
+            { title: "观景甲板", desc: "360度全景观景，欣赏长江美景" },
+            { title: "健身中心", desc: "配备最新健身设备，保持健康活力" },
+            { title: "SPA中心", desc: "专业按摩和美容服务，放松身心" },
+            { title: "多功能厅", desc: "举办各类活动和演出" },
+            { title: "美食餐厅", desc: "提供中西式美食，满足不同口味" },
+            { title: "酒吧", desc: "享用各类饮品，度过悠闲时光" }
+          ]
+        },
+        rooms: {
+          title: "房型介绍",
+          desc: "长江行游轮提供多种房型选择，满足不同需求。",
+          types: [
+            { 
+              name: "豪华标准间", 
+              desc: "舒适宽敞的标准间，配备两张单人床",
+              area: "28平方米",
+              view: "江景"
+            },
+            { 
+              name: "豪华大床房", 
+              desc: "温馨舒适的大床房，配备一张双人床",
+              area: "28平方米",
+              view: "江景"
+            },
+            { 
+              name: "行政套房", 
+              desc: "豪华行政套房，独立客厅和卧室",
+              area: "56平方米",
+              view: "全景江景"
+            },
+            { 
+              name: "总统套房", 
+              desc: "极致奢华的总统套房，享受尊贵礼遇",
+              area: "120平方米",
+              view: "全景江景"
+            }
+          ]
+        },
+        vip: {
+          title: "尊享礼遇",
+          desc: "为尊贵客人提供专属服务和礼遇。",
+          benefits: [
+            "24小时私人管家服务",
+            "优先登船和离船",
+            "专属餐厅用餐",
+            "免费迷你吧",
+            "每日水果和点心",
+            "免费洗衣服务",
+            "专属接送服务",
+            "生日惊喜安排"
+          ]
+        }
+      },
+      experience: {
+        service: {
+          title: "品质服务",
+          desc: "我们致力于为每一位客人提供卓越的品质服务，让您的游轮之旅更加舒适和难忘。",
+          items: [
+            { title: "专业服务团队", desc: "经验丰富的船员和导游，为您提供全方位的服务" },
+            { title: "个性化定制", desc: "根据您的需求，提供个性化的旅行方案" },
+            { title: "24小时服务", desc: "全天候服务，随时满足您的需求" },
+            { title: "安全保障", desc: "严格的安全管理，确保您的旅行安全" },
+            { title: "细致关怀", desc: "关注每一个细节，让您感受到家的温暖" },
+            { title: "文化体验", desc: "专业的文化讲解，让您深入了解长江文化" }
+          ]
+        },
+        dining: {
+          title: "星级餐饮",
+          desc: "我们的厨师团队精心为您准备各种美食，让您在游轮上享受星级餐饮体验。",
+          items: [
+            { title: "中西合璧", desc: "提供中式和西式美食，满足不同口味需求" },
+            { title: "当地特色", desc: "精选当地特色食材，制作地道美食" },
+            { title: "米其林品质", desc: "借鉴米其林餐厅理念，打造精致美食" },
+            { title: "私人定制", desc: "为VIP客人提供私人定制菜单" },
+            { title: "主题晚宴", desc: "定期举办主题晚宴，增添用餐乐趣" },
+            { title: "健康饮食", desc: "提供健康养生菜品，满足不同饮食需求" }
+          ]
+        },
+        activities: {
+          title: "丰富活动",
+          desc: "船上安排了丰富多彩的活动，让您的游轮之旅充满乐趣和惊喜。",
+          items: [
+            { title: "文化讲座", desc: "邀请专家学者举办长江文化讲座" },
+            { title: "音乐表演", desc: "专业音乐家带来精彩的音乐表演" },
+            { title: "互动游戏", desc: "组织各种互动游戏，增进乘客之间的交流" },
+            { title: "手工制作", desc: "体验中国传统手工艺制作" },
+            { title: "健身课程", desc: "专业健身教练指导的健身课程" },
+            { title: "星空夜话", desc: "在甲板上欣赏星空，聆听长江故事" }
+          ]
+        }
       }
     },
     guide: {
@@ -517,6 +613,102 @@ export const CONTENT = {
       aurora: {
         title: "Vista Aurora",
         desc: "Maiden Voyage 2026. Stay tuned."
+      },
+      spaces: {
+        facilities: {
+          title: "Facilities",
+          desc: "Vista Cruises are equipped with world-class facilities to provide you with unparalleled comfort.",
+          items: [
+            { title: "Observation Deck", desc: "360-degree panoramic views of the Yangtze River" },
+            { title: "Fitness Center", desc: "Latest fitness equipment to keep you active" },
+            { title: "SPA Center", desc: "Professional massage and beauty services" },
+            { title: "Multi-Function Hall", desc: "Hosting various activities and performances" },
+            { title: "Dining Restaurant", desc: "Western and Chinese cuisine to satisfy different tastes" },
+            { title: "Bar", desc: "Enjoy various drinks and relax" }
+          ]
+        },
+        rooms: {
+          title: "Room Types",
+          desc: "Vista Cruises offer a variety of room types to meet different needs.",
+          types: [
+            { 
+              name: "Deluxe Standard Room", 
+              desc: "Comfortable and spacious standard room with two single beds",
+              area: "28 sqm",
+              view: "River View"
+            },
+            { 
+              name: "Deluxe King Room", 
+              desc: "Warm and comfortable room with one double bed",
+              area: "28 sqm",
+              view: "River View"
+            },
+            { 
+              name: "Executive Suite", 
+              desc: "Luxury executive suite with separate living room and bedroom",
+              area: "56 sqm",
+              view: "Panoramic River View"
+            },
+            { 
+              name: "Presidential Suite", 
+              desc: "Ultimate luxury presidential suite with exclusive benefits",
+              area: "120 sqm",
+              view: "Panoramic River View"
+            }
+          ]
+        },
+        vip: {
+          title: "VIP Privileges",
+          desc: "Exclusive services and privileges for our distinguished guests.",
+          benefits: [
+            "24-hour personal butler service",
+            "Priority boarding and disembarkation",
+            "Exclusive restaurant dining",
+            "Free minibar",
+            "Daily fruits and snacks",
+            "Free laundry service",
+            "Exclusive transfer service",
+            "Birthday surprise arrangement"
+          ]
+        }
+      },
+      experience: {
+        service: {
+          title: "Quality Service",
+          desc: "We are committed to providing every guest with exceptional quality service, allowing you to feel at home during your cruise.",
+          items: [
+            { title: "Professional Service Team", desc: "Experienced crew and tour guides to ensure your journey is smooth and enjoyable" },
+            { title: "Personalized Customization", desc: "Customized itineraries and services based on your preferences" },
+            { title: "24-hour Room Service", desc: "Round-the-clock room service to meet all your needs" },
+            { title: "Multilingual Support", desc: "Professional translation services to eliminate language barriers" },
+            { title: "Concierge Service", desc: "One-stop concierge service to assist with shore excursions and activity arrangements" },
+            { title: "Safety First", desc: "Strict safety protocols and professional emergency response team" }
+          ]
+        },
+        dining: {
+          title: "Star Dining",
+          desc: "Experience exquisite cuisine from around the world, prepared by our master chefs using the finest ingredients.",
+          items: [
+            { title: "Chinese-Western Fusion", desc: "Creative fusion dishes that combine traditional Chinese and Western culinary techniques" },
+            { title: "Local Specialties", desc: "Authentic local specialties from along the Yangtze River" },
+            { title: "Michelin-inspired", desc: "Gourmet dishes inspired by Michelin-starred restaurants" },
+            { title: "Specialty Restaurants", desc: "Multiple specialty restaurants offering different cuisines" },
+            { title: "Wine Pairing", desc: "Professional wine pairing service to enhance your dining experience" },
+            { title: "Dietary Options", desc: "Special menus for vegetarian, vegan, and other dietary requirements" }
+          ]
+        },
+        activities: {
+          title: "Rich Activities",
+          desc: "A wide range of onboard and shore activities to keep you entertained throughout your journey.",
+          items: [
+            { title: "Cultural Lectures", desc: "Fascinating lectures on the history and culture of the Yangtze River" },
+            { title: "Musical Performances", desc: "Live music and dance performances showcasing local culture" },
+            { title: "Interactive Games", desc: "Fun games and activities for guests of all ages" },
+            { title: "Wellness Classes", desc: "Yoga, tai chi, and other wellness activities to relax your mind and body" },
+            { title: "Shore Excursions", desc: "Carefully selected shore excursions to explore scenic spots and historical sites" },
+            { title: "Themed Parties", desc: "Exciting themed parties and social events" }
+          ]
+        }
       }
     },
     guide: {

src/pages/CruiseExperience.tsx

@@ -0,0 +1,164 @@
+import React 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 { useEffect } from 'react';
+
+const CruiseExperience: React.FC = () => {
+  const { language } = useLanguage();
+  const { itineraries } = useTheme();
+  const location = useLocation();
+  
+  const t = CONTENT[language];
+  
+  // Get section from query parameters
+  const section = new URLSearchParams(location.search).get('section');
+  
+  // Scroll to section when location changes with better timing
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const section = params.get('section');
+    
+    // Always scroll to top first if no section is specified
+    if (!section) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      // Use setTimeout to ensure DOM is fully rendered before attempting scroll
+      const timeoutId = setTimeout(() => {
+        const element = document.getElementById(`experience-${section}`);
+        if (element) {
+          element.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'start',
+            inline: 'nearest'
+          });
+        }
+      }, 300);
+      
+      // Cleanup timeout to prevent memory leaks
+      return () => clearTimeout(timeoutId);
+    }
+  }, [location.search]);
+
+  return (
+    <div className="min-h-screen bg-white font-sans text-vista-darkblue overflow-x-hidden">
+      <Navbar />
+      <Sidebar />
+
+      {/* Hero Section */}
+      <section className="relative h-[60vh] md:h-[70vh] w-full overflow-hidden bg-vista-darkblue">
+        <div className="absolute inset-0 bg-gradient-to-br from-vista-darkblue/95 to-vista-darkblue/60 z-10"></div>
+        <div className="absolute inset-0 bg-cover bg-center opacity-40" style={{ backgroundImage: `url(https://picsum.photos/1920/1080?random=25)` }}></div>
+        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNMTAgMTBoMjB2MjBIMTB6TTMwIDEwaDIwdjIwSDMweiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L3N2Zz4=')] opacity-10 z-20"></div>
+        <div className="relative z-30 h-full flex flex-col justify-center items-center text-center px-4 py-12">
+          <span className="text-vista-gold uppercase tracking-widest text-xs sm:text-sm font-bold mb-4">{t.nav.menu[3]?.title || 'CRUISE EXPERIENCE'}</span>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-serif text-white mb-4 sm:mb-6 leading-tight">{t.nav.menu[3]?.title || 'Cruise Experience'}</h1>
+          <p className="text-white/90 max-w-2xl sm:max-w-3xl text-base sm:text-lg md:text-xl mb-6 sm:mb-8 leading-relaxed">{language === 'zh' ? '享受豪华游轮带来的全方位优质体验' : 'Enjoy the comprehensive premium experience of luxury cruises'}</p>
+          <a href="#experience-service" className="px-8 sm:px-10 py-3 sm:py-4 bg-vista-gold text-white font-bold tracking-widest uppercase text-xs sm:text-sm hover:bg-opacity-90 transition-all duration-300 shadow-lg hover:shadow-xl">
+            {t.nav.book}
+          </a>
+        </div>
+      </section>
+
+      {/* 品质服务 Section */}
+      <section className="py-24 bg-white" id="experience-service">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <div className="inline-block relative mb-4">
+              <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.nav.menu[3]?.submenu?.[0].title || 'QUALITY SERVICE'}</span>
+              <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-vista-gold/30"></div>
+            </div>
+            <h2 className="text-4xl md:text-5xl font-serif text-vista-darkblue mt-3 mb-6">{t.shipsPage.experience.service.title}</h2>
+            <p className="text-vista-darkblue/70 max-w-3xl mx-auto text-lg">
+              {t.shipsPage.experience.service.desc}
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+            {t.shipsPage.experience.service.items.map((item: any, index: number) => (
+              <div key={index} className="bg-white rounded-lg p-8 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-vista-gold transform hover:-translate-y-2">
+                <div className="w-16 h-16 bg-vista-gold rounded-full flex items-center justify-center mb-6">
+                  <span className="text-white text-2xl font-bold">{index + 1}</span>
+                </div>
+                <h3 className="text-2xl font-serif text-vista-darkblue mb-4 group-hover:text-vista-gold transition-colors">{item.title}</h3>
+                <p className="text-vista-darkblue/70 leading-relaxed">
+                  {item.desc}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+      
+      {/* 星级餐饮 Section */}
+      <section className="py-24 bg-gray-50" id="experience-dining">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <div className="inline-block relative mb-4">
+              <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.nav.menu[3]?.submenu?.[1].title || 'STAR DINING'}</span>
+              <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-vista-gold/30"></div>
+            </div>
+            <h2 className="text-4xl md:text-5xl font-serif text-vista-darkblue mt-3 mb-6">{t.shipsPage.experience.dining.title}</h2>
+            <p className="text-vista-darkblue/70 max-w-3xl mx-auto text-lg">
+              {t.shipsPage.experience.dining.desc}
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+            {t.shipsPage.experience.dining.items.map((item: any, index: number) => (
+              <div key={index} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
+                <div className="h-48 bg-gradient-to-br from-vista-darkblue to-vista-gold flex items-center justify-center">
+                  <span className="text-white text-4xl">🍽️</span>
+                </div>
+                <div className="p-8">
+                  <h3 className="text-2xl font-serif text-vista-darkblue mb-4 group-hover:text-vista-gold transition-colors">{item.title}</h3>
+                  <p className="text-vista-darkblue/70 leading-relaxed">
+                    {item.desc}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+      
+      {/* 丰富活动 Section */}
+      <section className="py-24 bg-white" id="experience-activities">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <div className="inline-block relative mb-4">
+              <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.nav.menu[3]?.submenu?.[2].title || 'RICH ACTIVITIES'}</span>
+              <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-vista-gold/30"></div>
+            </div>
+            <h2 className="text-4xl md:text-5xl font-serif text-vista-darkblue mt-3 mb-6">{t.shipsPage.experience.activities.title}</h2>
+            <p className="text-vista-darkblue/70 max-w-3xl mx-auto text-lg">
+              {t.shipsPage.experience.activities.desc}
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+            {t.shipsPage.experience.activities.items.map((item: any, index: number) => (
+              <div key={index} className="bg-white rounded-lg p-8 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-vista-gold transform hover:-translate-y-2">
+                <div className="w-16 h-16 bg-vista-gold rounded-full flex items-center justify-center mb-6">
+                  <span className="text-white text-2xl">�</span>
+                </div>
+                <h3 className="text-2xl font-serif text-vista-darkblue mb-4 group-hover:text-vista-gold transition-colors">{item.title}</h3>
+                <p className="text-vista-darkblue/70 leading-relaxed">
+                  {item.desc}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default CruiseExperience;

src/pages/CruiseSpace.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect } 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, Link } from 'react-router-dom';
+import { ArrowRight, Anchor, Star, ChevronRight } from 'lucide-react';
+
+const CruiseSpace: React.FC = () => {
+    const { language } = useLanguage();
+    const { shipsPageImages } = useTheme();
+    // We explicitly type 'any' here or assume CONTENT structure is updated because
+    // TS might not immediately pick up the new keys added to constants without a full types reload in this context.
+    // In a real app, types.ts should be updated, but here we access the object properties.
+    const t = CONTENT[language].shipsPage as any;
+    const location = useLocation();
+
+//
+//     const params = new URLSearchParams(location.search);
+//     const section = params.get('section');
+//
+//     let elementId = '';
+//     if (section === 'tips') {
+//         elementId = 'guide-tips';
+//     } else if (section === 'faq') {
+//         elementId = 'guide-faq';
+//     }
+//
+//     if (elementId) {
+//         const element = document.getElementById(elementId);
+//         if (element) {
+//             element.scrollIntoView({ behavior: 'smooth' });
+//         }
+//     }
+// }, [location.search]);
+
+// Scroll to section on load or location change
+    useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const section = params.get('section');
+        const preStr = 'space-';
+        let elementId = preStr;
+        
+        // Always scroll to top first
+        if (!section) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        } else {
+            // Correctly construct elementId with section parameter
+            elementId = preStr + section;
+            const element = document.getElementById(elementId);
+            if (element) {
+                // Small delay to ensure render
+                setTimeout(() => {
+                    element.scrollIntoView({ behavior: 'smooth' });
+                }, 300);
+            }
+        }
+    }, [location.search]);
+
+    return (
+        <div className="min-h-screen bg-white font-sans text-vista-darkblue overflow-x-hidden">
+            <Navbar />
+            <Sidebar />
+
+            {/* Hero Section */}
+            <div className="relative h-[70vh] w-full bg-vista-darkblue flex items-center justify-center overflow-hidden">
+                <div className="absolute inset-0 bg-black/40 z-10"></div>
+                <img
+                    src="https://images.unsplash.com/photo-1548291616-3c0f5f743538?q=80&w=1920&auto=format&fit=crop"
+                    alt="Ships Hero"
+                    className="absolute inset-0 w-full h-full object-cover animate-slow-zoom"
+                    loading="lazy"
+                />
+                <div className="relative z-20 text-center text-white px-4 animate-fade-in-up">
+                    <span className="block text-sm md:text-base tracking-[0.3em] uppercase mb-4 text-vista-gold">{t.hero_sub}</span>
+                    <h1 className="text-5xl md:text-8xl font-serif italic mb-6">{CONTENT[language].nav.menu[1].title}</h1>
+                    <p className="max-w-xl mx-auto text-white/80 font-light text-lg">
+                        {t.hero_desc}
+                    </p>
+                </div>
+            </div>
+
+            {/* Section 1: Facilities */}
+            <section id="space-facilities" className="py-32 max-w-7xl mx-auto px-6">
+                <div className="text-center mb-20">
+                    <h2 className="text-5xl md:text-7xl font-serif text-vista-darkblue mb-8">{t.spaces.facilities.title}</h2>
+                    <p className="text-vista-darkblue/70 text-lg md:text-xl leading-relaxed font-light max-w-3xl mx-auto">
+                        {t.spaces.facilities.desc}
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
+                    {t.spaces.facilities.items.map((item: any, index: number) => (
+                        <div key={index} className="group bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
+                            <div className="w-16 h-16 bg-vista-gold/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-vista-gold transition-colors">
+                                <span className="text-vista-gold text-2xl">{index + 1}</span>
+                            </div>
+                            <h3 className="text-xl font-bold text-vista-darkblue mb-4">{item.title}</h3>
+                            <p className="text-vista-darkblue/70 leading-relaxed">{item.desc}</p>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            {/* Section 2: Room Types */}
+            <section id="space-rooms" className="py-32 bg-vista-gray">
+                <div className="max-w-7xl mx-auto px-6">
+                    <div className="text-center mb-20">
+                        <h2 className="text-5xl md:text-7xl font-serif text-vista-darkblue mb-8">{t.spaces.rooms.title}</h2>
+                        <p className="text-vista-darkblue/70 text-lg md:text-xl leading-relaxed font-light max-w-3xl mx-auto">
+                            {t.spaces.rooms.desc}
+                        </p>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+                        {t.spaces.rooms.types.map((room: any, index: number) => (
+                            <div key={index} className="bg-white rounded-lg overflow-hidden shadow-lg group">
+                                <div className="h-64 bg-vista-gold/20 relative overflow-hidden">
+                                    <img
+                                        src={`https://picsum.photos/600/400?random=${index + 10}`}
+                                        alt={room.name}
+                                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                                    />
+                                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
+                                        <div className="p-6 text-white">
+                                            <div className="flex gap-4 mb-4">
+                                                <span className="text-xs uppercase tracking-widest font-bold bg-white/20 px-3 py-1 rounded-full">{room.area}</span>
+                                                <span className="text-xs uppercase tracking-widest font-bold bg-white/20 px-3 py-1 rounded-full">{room.view}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="p-8">
+                                    <h3 className="text-2xl font-serif text-vista-darkblue mb-4">{room.name}</h3>
+                                    <p className="text-vista-darkblue/70 leading-relaxed mb-6">{room.desc}</p>
+                                    <div className="flex justify-between items-center">
+                                        <div className="flex gap-4">
+                                            <div className="text-center">
+                                                <div className="text-vista-gold font-bold">{room.area}</div>
+                                                <div className="text-xs text-vista-darkblue/70">面积</div>
+                                            </div>
+                                            <div className="text-center">
+                                                <div className="text-vista-gold font-bold">{room.view}</div>
+                                                <div className="text-xs text-vista-darkblue/70">景观</div>
+                                            </div>
+                                        </div>
+                                        <Link to="#" className="inline-flex items-center gap-2 text-vista-darkblue hover:text-vista-gold transition-colors font-bold uppercase text-xs tracking-wider">
+                                            {t.view_itineraries} <ChevronRight size={16} />
+                                        </Link>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+
+            {/* Section 3: VIP Privileges */}
+            <section id="space-vip" className="py-32 relative overflow-hidden">
+                {/* Background */}
+                <div className="absolute inset-0 opacity-10">
+                    <img
+                        src={shipsPageImages.lanyue[0]}
+                        alt="VIP"
+                        className="w-full h-full object-cover"
+                    />
+                </div>
+
+                <div className="max-w-7xl mx-auto px-6 relative z-10">
+                    <div className="text-center mb-20">
+                        <h2 className="text-5xl md:text-7xl font-serif text-vista-darkblue mb-8">{t.spaces.vip.title}</h2>
+                        <p className="text-vista-darkblue/70 text-lg md:text-xl leading-relaxed font-light max-w-3xl mx-auto">
+                            {t.spaces.vip.desc}
+                        </p>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+                        {t.spaces.vip.benefits.map((benefit: string, index: number) => (
+                            <div key={index} className="bg-white p-6 rounded-lg shadow-md group hover:shadow-lg transition-all duration-300">
+                                <div className="w-12 h-12 bg-vista-gold/10 rounded-full flex items-center justify-center mb-4 group-hover:bg-vista-gold group-hover:text-white transition-colors">
+                                    <Star size={20} className="text-vista-gold group-hover:text-white" />
+                                </div>
+                                <p className="text-center text-vista-darkblue font-medium">{benefit}</p>
+                            </div>
+                        ))}
+                    </div>
+
+                    <div className="mt-16 text-center">
+                        <Link to="/itineraries" className="inline-flex items-center gap-3 px-10 py-4 bg-vista-darkblue text-white uppercase tracking-widest text-xs font-bold hover:bg-vista-gold transition-colors duration-300">
+                            {t.view_itineraries} <ChevronRight size={16} />
+                        </Link>
+                    </div>
+                </div>
+            </section>
+
+            <Footer />
+        </div>
+    );
+};
+
+export default CruiseSpace;

src/pages/Itineraries.tsx

@@ -302,6 +302,7 @@ const Itineraries: React.FC = () => {
           </div>
         </div>
       </section>
+
       
       {/* 游轮航期 Section */}
       <section className="py-24 bg-white" id="itinerary-schedules">
@@ -309,7 +310,7 @@ const Itineraries: React.FC = () => {
           {/* Section Title */}
           <div className="text-center mb-16">
             <div className="inline-block relative mb-4">
-              <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.nav.menu[2].submenu?.[2].title}</span>
+              <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">游轮航期</span>
               <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-vista-gold/30"></div>
             </div>
             <h2 className="text-4xl md:text-5xl font-serif text-vista-darkblue mt-3 mb-6">游轮航期</h2>

src/pages/Ships.tsx

@@ -9,240 +9,241 @@ import { useLocation, Link } from 'react-router-dom';
 import { ArrowRight, Anchor, Star, ChevronRight } from 'lucide-react';
 
 const Ships: React.FC = () => {
-  const { language } = useLanguage();
-  const { shipsPageImages } = useTheme();
-  // We explicitly type 'any' here or assume CONTENT structure is updated because
-  // TS might not immediately pick up the new keys added to constants without a full types reload in this context.
-  // In a real app, types.ts should be updated, but here we access the object properties.
-  const t = CONTENT[language].shipsPage as any;
-  const location = useLocation();
-
-  // Scroll to section on load or location change
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const section = params.get('section');
-
-    // Always scroll to top first
-    if (!section) {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    } else {
-        const element = document.getElementById(section);
-        if (element) {
-            // Small delay to ensure render
-            setTimeout(() => {
-                element.scrollIntoView({ behavior: 'smooth' });
-            }, 300);
+    const { language } = useLanguage();
+    const { shipsPageImages } = useTheme();
+    // We explicitly type 'any' here or assume CONTENT structure is updated because
+    // TS might not immediately pick up the new keys added to constants without a full types reload in this context.
+    // In a real app, types.ts should be updated, but here we access the object properties.
+    const t = CONTENT[language].shipsPage as any;
+    const location = useLocation();
+
+    // Scroll to section on load or location change
+    useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const section = params.get('section');
+
+        // Always scroll to top first
+        if (!section) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        } else {
+            const element = document.getElementById(section);
+            if (element) {
+                // Small delay to ensure render
+                setTimeout(() => {
+                    element.scrollIntoView({ behavior: 'smooth' });
+                }, 300);
+            }
         }
-    }
-  }, [location]);
-
-  return (
-    <div className="min-h-screen bg-white font-sans text-vista-darkblue overflow-x-hidden">
-      <Navbar />
-      <Sidebar />
-
-      {/* Hero Section */}
-      <div className="relative h-[70vh] w-full bg-vista-darkblue flex items-center justify-center overflow-hidden">
-         <div className="absolute inset-0 bg-black/40 z-10"></div>
-         <img
-            src="https://images.unsplash.com/photo-1548291616-3c0f5f743538?q=80&w=1920&auto=format&fit=crop"
-            alt="Ships Hero"
-            className="absolute inset-0 w-full h-full object-cover animate-slow-zoom"
-            loading="lazy"
-         />
-         <div className="relative z-20 text-center text-white px-4 animate-fade-in-up">
-             <span className="block text-sm md:text-base tracking-[0.3em] uppercase mb-4 text-vista-gold">{t.hero_sub}</span>
-             <h1 className="text-5xl md:text-8xl font-serif italic mb-6">{CONTENT[language].nav.menu[1].title}</h1>
-             <p className="max-w-xl mx-auto text-white/80 font-light text-lg">
-                 {t.hero_desc}
-             </p>
-         </div>
-      </div>
-
-      {/* Section 1: Vista Series Intro */}
-      <section id="series" className="py-24 max-w-7xl mx-auto px-6">
-         <div className="flex flex-col lg:flex-row gap-16 items-start">
-            {/* Left: Text Content */}
-            <div className="lg:w-3/5 space-y-12">
-                <div>
-                    <h2 className="text-4xl md:text-5xl font-serif text-vista-darkblue mb-8 leading-tight">
-                        {t.intro.title}
-                    </h2>
-                    <div className="w-20 h-1 bg-vista-gold mb-8"></div>
-                    <p className="text-xl font-light leading-relaxed text-vista-darkblue/80">
-                        {t.intro.desc}
+    }, [location]);
+
+    return (
+        <div className="min-h-screen bg-white font-sans text-vista-darkblue overflow-x-hidden">
+            <Navbar />
+            <Sidebar />
+
+            {/* Hero Section */}
+            <div className="relative h-[70vh] w-full bg-vista-darkblue flex items-center justify-center overflow-hidden">
+                <div className="absolute inset-0 bg-black/40 z-10"></div>
+                <img
+                    src="https://images.unsplash.com/photo-1548291616-3c0f5f743538?q=80&w=1920&auto=format&fit=crop"
+                    alt="Ships Hero"
+                    className="absolute inset-0 w-full h-full object-cover animate-slow-zoom"
+                    loading="lazy"
+                />
+                <div className="relative z-20 text-center text-white px-4 animate-fade-in-up">
+                    <span className="block text-sm md:text-base tracking-[0.3em] uppercase mb-4 text-vista-gold">{t.hero_sub}</span>
+                    <h1 className="text-5xl md:text-8xl font-serif italic mb-6">{CONTENT[language].nav.menu[1].title}</h1>
+                    <p className="max-w-xl mx-auto text-white/80 font-light text-lg">
+                        {t.hero_desc}
                     </p>
                 </div>
+            </div>
+
+            {/* Section 1: Vista Series Intro */}
+            <section id="series" className="py-24 max-w-7xl mx-auto px-6">
+                <div className="flex flex-col lg:flex-row gap-16 items-start">
+                    {/* Left: Text Content */}
+                    <div className="lg:w-3/5 space-y-12">
+                        <div>
+                            <h2 className="text-4xl md:text-5xl font-serif text-vista-darkblue mb-8 leading-tight">
+                                {t.intro.title}
+                            </h2>
+                            <div className="w-20 h-1 bg-vista-gold mb-8"></div>
+                            <p className="text-xl font-light leading-relaxed text-vista-darkblue/80">
+                                {t.intro.desc}
+                            </p>
+                        </div>
 
-                <div className="space-y-12">
-                    {t.intro.points.map((point: any, index: number) => (
-                        <div key={index} className="flex gap-8 group">
+                        <div className="space-y-12">
+                            {t.intro.points.map((point: any, index: number) => (
+                                <div key={index} className="flex gap-8 group">
                             <span className="text-6xl font-serif text-vista-gold/20 font-bold -mt-2 group-hover:text-vista-gold/40 transition-colors duration-500">
                                 0{index + 1}
                             </span>
-                            <div>
-                                <h3 className="text-xl font-bold text-vista-darkblue mb-3 uppercase tracking-wider">{point.title}</h3>
-                                <p className="text-vista-darkblue/70 leading-relaxed">{point.desc}</p>
-                            </div>
+                                    <div>
+                                        <h3 className="text-xl font-bold text-vista-darkblue mb-3 uppercase tracking-wider">{point.title}</h3>
+                                        <p className="text-vista-darkblue/70 leading-relaxed">{point.desc}</p>
+                                    </div>
+                                </div>
+                            ))}
                         </div>
-                    ))}
-                </div>
-            </div>
+                    </div>
 
-            {/* Right: Navigation Cards */}
-            <div className="lg:w-2/5 flex flex-col gap-8 sticky top-24">
-                <Link to="/ships?section=lanyue" className="group relative h-72 overflow-hidden block shadow-2xl rounded-sm">
-                    <img
-                        src={shipsPageImages.lanyue[0]}
-                        alt="Lanyue"
-                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
-                        loading="lazy"
-                    />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-90 transition-opacity"></div>
-                    <div className="absolute bottom-8 left-8 text-white">
-                        <span className="text-xs uppercase tracking-widest block mb-2 text-vista-gold">{t.now_sailing}</span>
-                        <span className="text-3xl font-serif italic flex items-center gap-4">
+                    {/* Right: Navigation Cards */}
+                    <div className="lg:w-2/5 flex flex-col gap-8 sticky top-24">
+                        <Link to="/ships?section=lanyue" className="group relative h-72 overflow-hidden block shadow-2xl rounded-sm">
+                            <img
+                                src={shipsPageImages.lanyue[0]}
+                                alt="Lanyue"
+                                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                                loading="lazy"
+                            />
+                            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-90 transition-opacity"></div>
+                            <div className="absolute bottom-8 left-8 text-white">
+                                <span className="text-xs uppercase tracking-widest block mb-2 text-vista-gold">{t.now_sailing}</span>
+                                <span className="text-3xl font-serif italic flex items-center gap-4">
                              {t.lanyue.title} <ArrowRight size={24} className="transform group-hover:translate-x-4 transition-transform text-vista-gold" />
                         </span>
+                            </div>
+                        </Link>
+
+                        <Link to="/ships?section=aurora" className="group relative h-72 overflow-hidden block shadow-2xl rounded-sm">
+                            <img
+                                src={shipsPageImages.aurora}
+                                alt="Aurora"
+                                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"
+                                loading="lazy"
+                            />
+                            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-90 transition-opacity"></div>
+                            <div className="absolute bottom-8 left-8 text-white">
+                                <span className="text-xs uppercase tracking-widest block mb-2 text-vista-gold">{t.coming_soon}</span>
+                                <span className="text-3xl font-serif italic flex items-center gap-4">
+                             {t.aurora.title} <ArrowRight size={24} className="transform group-hover:translate-x-4 transition-transform text-vista-gold" />
+                        </span>
+                            </div>
+                        </Link>
+                    </div>
+                </div>
+            </section>
+
+            {/* Divider */}
+            <div className="w-full h-px bg-vista-darkblue/10 max-w-7xl mx-auto"></div>
+
+            {/* Section 2: Vista Lanyue Details */}
+            <section id="lanyue" className="py-32 bg-vista-gray relative">
+                {/* Background Decor */}
+                <div className="absolute top-0 right-0 w-1/3 h-full bg-white/50 skew-x-12 hidden lg:block pointer-events-none"></div>
+
+                <div className="max-w-7xl mx-auto px-6 relative z-10">
+                    <div className="text-center mb-20 max-w-4xl mx-auto">
+                        <div className="flex items-center justify-center gap-4 mb-6">
+                            <div className="h-px w-12 bg-vista-gold"></div>
+                            <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.flagship_label}</span>
+                            <div className="h-px w-12 bg-vista-gold"></div>
+                        </div>
+                        <h2 className="text-5xl md:text-7xl font-serif text-vista-darkblue mb-10">{t.lanyue.title}</h2>
+                        <p className="text-vista-darkblue/70 text-lg md:text-xl leading-relaxed font-light">
+                            {t.lanyue.desc}
+                        </p>
+
+                        <div className="mt-12 flex justify-center gap-6">
+                            <div className="flex flex-col items-center gap-2 px-6 border-r border-vista-darkblue/10">
+                                <Anchor size={24} className="text-vista-gold" />
+                                <span className="text-xs uppercase tracking-widest font-bold">{t.stats_tons}</span>
+                            </div>
+                            <div className="flex flex-col items-center gap-2 px-6 border-r border-vista-darkblue/10">
+                                <Star size={24} className="text-vista-gold" />
+                                <span className="text-xs uppercase tracking-widest font-bold">{t.stats_stars}</span>
+                            </div>
+                            <div className="flex flex-col items-center gap-2 px-6">
+                                <span className="text-xl font-serif font-bold text-vista-gold">1:1</span>
+                                <span className="text-xs uppercase tracking-widest font-bold">{t.stats_ratio}</span>
+                            </div>
+                        </div>
                     </div>
-                </Link>
 
-                <Link to="/ships?section=aurora" className="group relative h-72 overflow-hidden block shadow-2xl rounded-sm">
-                     <img
+                    {/* Lanyue Image Grid (Masonry style) */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 auto-rows-[200px]">
+                        {/* Large Hero Image */}
+                        <div className="lg:col-span-8 lg:row-span-2 relative group overflow-hidden shadow-lg">
+                            <img
+                                src={shipsPageImages.lanyue[0]}
+                                alt="Lanyue Exterior"
+                                className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
+                                loading="lazy"
+                            />
+                        </div>
+                        {/* Smaller Detail Images */}
+                        <div className="lg:col-span-4 lg:row-span-1 relative group overflow-hidden shadow-lg">
+                            <img
+                                src={shipsPageImages.lanyue[1]}
+                                alt="Lanyue Interior"
+                                className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
+                                loading="lazy"
+                            />
+                        </div>
+                        <div className="lg:col-span-4 lg:row-span-1 relative group overflow-hidden shadow-lg">
+                            <img
+                                src={shipsPageImages.lanyue[2]}
+                                alt="Lanyue Deck"
+                                className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
+                                loading="lazy"
+                            />
+                        </div>
+                        <div className="lg:col-span-12 lg:row-span-1 relative group overflow-hidden shadow-lg md:hidden lg:block">
+                            <img
+                                src={shipsPageImages.lanyue[3]}
+                                alt="Lanyue Wide"
+                                className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
+                                loading="lazy"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="mt-16 text-center">
+                        <Link to="/itineraries" className="inline-flex items-center gap-3 px-10 py-4 bg-vista-darkblue text-white uppercase tracking-widest text-xs font-bold hover:bg-vista-gold transition-colors duration-300">
+                            {t.view_itineraries} <ChevronRight size={16} />
+                        </Link>
+                    </div>
+                </div>
+            </section>
+
+            {/* Section 3: Vista Aurora Teaser */}
+            <section id="aurora" className="relative h-screen flex items-center justify-center overflow-hidden bg-black">
+                <div className="absolute inset-0 opacity-70">
+                    <img
                         src={shipsPageImages.aurora}
                         alt="Aurora"
-                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"
+                        className="w-full h-full object-cover animate-slow-zoom"
                         loading="lazy"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-90 transition-opacity"></div>
-                    <div className="absolute bottom-8 left-8 text-white">
-                        <span className="text-xs uppercase tracking-widest block mb-2 text-vista-gold">{t.coming_soon}</span>
-                         <span className="text-3xl font-serif italic flex items-center gap-4">
-                             {t.aurora.title} <ArrowRight size={24} className="transform group-hover:translate-x-4 transition-transform text-vista-gold" />
-                        </span>
+                    <div className="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black"></div>
+                </div>
+
+                <div className="relative z-10 text-center text-white px-6 max-w-4xl">
+                    <span className="inline-block border border-white/30 px-4 py-1 rounded-full text-xs uppercase tracking-widest mb-8 backdrop-blur-sm">{t.future_label}</span>
+                    <h2 className="text-6xl md:text-9xl font-serif italic mb-8 bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-white/50">
+                        {t.aurora.title}
+                    </h2>
+                    <p className="text-xl md:text-2xl font-light tracking-wide mb-12 text-white/90">
+                        {t.aurora.desc}
+                    </p>
+
+                    <div className="flex flex-col md:flex-row items-center justify-center gap-6">
+                        <button className="px-10 py-4 bg-white text-black font-bold uppercase text-xs tracking-[0.2em] hover:bg-vista-gold hover:text-white transition-colors">
+                            {t.coming_soon}
+                        </button>
+                        <button className="px-10 py-4 border border-white/30 text-white font-bold uppercase text-xs tracking-[0.2em] hover:bg-white/10 transition-colors backdrop-blur-sm">
+                            {t.waitlist_btn}
+                        </button>
                     </div>
-                </Link>
-            </div>
-         </div>
-      </section>
-
-      {/* Divider */}
-      <div className="w-full h-px bg-vista-darkblue/10 max-w-7xl mx-auto"></div>
-
-      {/* Section 2: Vista Lanyue Details */}
-      <section id="lanyue" className="py-32 bg-vista-gray relative">
-          {/* Background Decor */}
-          <div className="absolute top-0 right-0 w-1/3 h-full bg-white/50 skew-x-12 hidden lg:block pointer-events-none"></div>
-
-          <div className="max-w-7xl mx-auto px-6 relative z-10">
-              <div className="text-center mb-20 max-w-4xl mx-auto">
-                  <div className="flex items-center justify-center gap-4 mb-6">
-                      <div className="h-px w-12 bg-vista-gold"></div>
-                      <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.flagship_label}</span>
-                      <div className="h-px w-12 bg-vista-gold"></div>
-                  </div>
-                  <h2 className="text-5xl md:text-7xl font-serif text-vista-darkblue mb-10">{t.lanyue.title}</h2>
-                  <p className="text-vista-darkblue/70 text-lg md:text-xl leading-relaxed font-light">
-                      {t.lanyue.desc}
-                  </p>
-
-                  <div className="mt-12 flex justify-center gap-6">
-                      <div className="flex flex-col items-center gap-2 px-6 border-r border-vista-darkblue/10">
-                          <Anchor size={24} className="text-vista-gold" />
-                          <span className="text-xs uppercase tracking-widest font-bold">{t.stats_tons}</span>
-                      </div>
-                      <div className="flex flex-col items-center gap-2 px-6 border-r border-vista-darkblue/10">
-                          <Star size={24} className="text-vista-gold" />
-                          <span className="text-xs uppercase tracking-widest font-bold">{t.stats_stars}</span>
-                      </div>
-                       <div className="flex flex-col items-center gap-2 px-6">
-                          <span className="text-xl font-serif font-bold text-vista-gold">1:1</span>
-                          <span className="text-xs uppercase tracking-widest font-bold">{t.stats_ratio}</span>
-                      </div>
-                  </div>
-              </div>
-
-              {/* Lanyue Image Grid (Masonry style) */}
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 auto-rows-[200px]">
-                  {/* Large Hero Image */}
-                  <div className="lg:col-span-8 lg:row-span-2 relative group overflow-hidden shadow-lg">
-                      <img
-                        src={shipsPageImages.lanyue[0]}
-                        alt="Lanyue Exterior"
-                        className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
-                        loading="lazy"
-                      />
-                  </div>
-                  {/* Smaller Detail Images */}
-                  <div className="lg:col-span-4 lg:row-span-1 relative group overflow-hidden shadow-lg">
-                       <img
-                        src={shipsPageImages.lanyue[1]}
-                        alt="Lanyue Interior"
-                        className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
-                        loading="lazy"
-                      />
-                  </div>
-                  <div className="lg:col-span-4 lg:row-span-1 relative group overflow-hidden shadow-lg">
-                       <img
-                        src={shipsPageImages.lanyue[2]}
-                        alt="Lanyue Deck"
-                        className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
-                        loading="lazy"
-                      />
-                  </div>
-                  <div className="lg:col-span-12 lg:row-span-1 relative group overflow-hidden shadow-lg md:hidden lg:block">
-                       <img
-                        src={shipsPageImages.lanyue[3]}
-                        alt="Lanyue Wide"
-                        className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
-                        loading="lazy"
-                      />
-                  </div>
-              </div>
-
-              <div className="mt-16 text-center">
-                  <Link to="/itineraries" className="inline-flex items-center gap-3 px-10 py-4 bg-vista-darkblue text-white uppercase tracking-widest text-xs font-bold hover:bg-vista-gold transition-colors duration-300">
-                      {t.view_itineraries} <ChevronRight size={16} />
-                  </Link>
-              </div>
-          </div>
-      </section>
-
-      {/* Section 3: Vista Aurora Teaser */}
-      <section id="aurora" className="relative h-screen flex items-center justify-center overflow-hidden bg-black">
-          <div className="absolute inset-0 opacity-70">
-               <img
-                 src={shipsPageImages.aurora}
-                 alt="Aurora"
-                 className="w-full h-full object-cover animate-slow-zoom"
-                 loading="lazy"
-               />
-               <div className="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black"></div>
-          </div>
-
-          <div className="relative z-10 text-center text-white px-6 max-w-4xl">
-               <span className="inline-block border border-white/30 px-4 py-1 rounded-full text-xs uppercase tracking-widest mb-8 backdrop-blur-sm">{t.future_label}</span>
-               <h2 className="text-6xl md:text-9xl font-serif italic mb-8 bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-white/50">
-                   {t.aurora.title}
-               </h2>
-               <p className="text-xl md:text-2xl font-light tracking-wide mb-12 text-white/90">
-                   {t.aurora.desc}
-               </p>
-
-               <div className="flex flex-col md:flex-row items-center justify-center gap-6">
-                   <button className="px-10 py-4 bg-white text-black font-bold uppercase text-xs tracking-[0.2em] hover:bg-vista-gold hover:text-white transition-colors">
-                       {t.coming_soon}
-                   </button>
-                   <button className="px-10 py-4 border border-white/30 text-white font-bold uppercase text-xs tracking-[0.2em] hover:bg-white/10 transition-colors backdrop-blur-sm">
-                       {t.waitlist_btn}
-                   </button>
-               </div>
-          </div>
-      </section>
-
-      <Footer />
-    </div>
-  );
+                </div>
+            </section>
+
+
+            <Footer />
+        </div>
+    );
 };
 
 export default Ships;