1.优化出行攻略，分模块维护

src/components/FAQItem.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export interface FAQItemProps {
+  question: string;
+  answer: string;
+}
+
+const FAQItem: React.FC<FAQItemProps> = ({ question, answer }) => {
+  return (
+    <div className="bg-white rounded-lg shadow-xl p-6">
+      <h3 className="text-xl font-serif text-vista-darkblue mb-3">
+        {question}
+      </h3>
+      <p className="text-vista-darkblue/70">
+        {answer}
+      </p>
+    </div>
+  );
+};
+
+export default FAQItem;

src/components/TipsCategory.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export interface TipsCategoryProps {
+  icon: string;
+  title: string;
+  items: string[];
+}
+
+const TipsCategory: React.FC<TipsCategoryProps> = ({ icon, title, items }) => {
+  return (
+    <div className="bg-white rounded-lg shadow-xl p-8 border border-vista-darkblue/10">
+      <h3 className="text-2xl font-serif text-vista-darkblue mb-6 flex items-center gap-3">
+        <span className="text-3xl">{icon}</span>
+        {title}
+      </h3>
+      <ul className="space-y-4 text-vista-darkblue/70">
+        {items.map((item, itemIndex) => (
+          <li key={itemIndex} className="flex items-start gap-3">
+            <span className="text-vista-gold font-bold mt-1">•</span>
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default TipsCategory;

src/pages/AhoutUs.tsx

@@ -15,7 +15,6 @@ 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();

src/pages/Guide.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 import Navbar from '@/src/components/Navbar.tsx';
 import Sidebar from '@/src/components/Sidebar.tsx';
 import Footer from '@/src/components/Footer.tsx';
+import TipsCategory from '@/src/components/TipsCategory.tsx';
+import FAQItem from '@/src/components/FAQItem.tsx';
 import { CONTENT } from '../constants.ts';
 import { useLanguage } from '@/src/contexts/LanguageContext.tsx';
 import { useTheme } from '@/src/contexts/ThemeContext.tsx';
@@ -13,7 +15,7 @@ const Guide: React.FC = () => {
   const location = useLocation();
   const t = CONTENT[language];
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const params = new URLSearchParams(location.search);
     const section = params.get('section');
     
@@ -25,12 +27,10 @@ const Guide: React.FC = () => {
     }
     
     if (elementId) {
-      setTimeout(() => {
-        const element = document.getElementById(elementId);
-        if (element) {
-          element.scrollIntoView({ behavior: 'smooth' });
-        }
-      }, 100);
+      const element = document.getElementById(elementId);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
     }
   }, [location.search]);
 
@@ -46,6 +46,11 @@ const Guide: React.FC = () => {
             src={guideHeroImage || "https://images.unsplash.com/photo-1578474843222-9593bc88d8b0?q=80&w=1920&auto=format&fit=crop"} 
             alt="Travel Guide" 
             className="w-full h-full object-cover object-center" 
+            loading="lazy"
+            onError={(e) => {
+              const target = e.target as HTMLImageElement;
+              target.src = "https://images.unsplash.com/photo-1578474843222-9593bc88d8b0?q=80&w=1920&auto=format&fit=crop";
+            }}
           />
           <div className="absolute inset-0 bg-black/40 pointer-events-none"></div>
         </div>
@@ -69,21 +74,13 @@ const Guide: React.FC = () => {
           </div>
           
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {t.guide.tips.categories.map((category, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-xl p-8 border border-vista-darkblue/10">
-                <h3 className="text-2xl font-serif text-vista-darkblue mb-6 flex items-center gap-3">
-                  <span className="text-3xl">{category.icon}</span>
-                  {category.title}
-                </h3>
-                <ul className="space-y-4 text-vista-darkblue/70">
-                  {category.items.map((item, itemIndex) => (
-                    <li key={itemIndex} className="flex items-start gap-3">
-                      <span className="text-vista-gold font-bold mt-1">•</span>
-                      <span>{item}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
+            {t.guide.tips.categories.map((category) => (
+              <TipsCategory 
+                key={category.title} 
+                icon={category.icon} 
+                title={category.title} 
+                items={category.items} 
+              />
             ))}
           </div>
         </section>
@@ -97,15 +94,12 @@ const Guide: React.FC = () => {
             </div>
             
             <div className="max-w-3xl mx-auto space-y-6">
-              {t.guide.faq.items.map((faq, index) => (
-                <div key={index} className="bg-white rounded-lg shadow-xl p-6">
-                  <h3 className="text-xl font-serif text-vista-darkblue mb-3">
-                    {faq.question}
-                  </h3>
-                  <p className="text-vista-darkblue/70">
-                    {faq.answer}
-                  </p>
-                </div>
+              {t.guide.faq.items.map((faq) => (
+                <FAQItem 
+                  key={faq.question} 
+                  question={faq.question} 
+                  answer={faq.answer} 
+                />
               ))}
             </div>
           </div>