first commit

.gitignore

@@ -0,0 +1,30 @@
+# Dependencies
+node_modules/
+
+# Production builds
+dist/
+
+# Local environment files
+.env
+.env.*
+!.env.example
+
+# Logs and debug output
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor settings
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Operating system files
+.DS_Store
+Thumbs.db
+
+# Local archives
+*.zip

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>云端未来 Future in Cloud - 云游戏|云手机|云直播解决方案</title>
+    <meta name="description" content="深圳市云端未来科技有限公司，专注云游戏、云手机、云直播领域，为客户提供异构分布式算力运营服务，ARM云计算服务商。" />
+    <meta name="keywords" content="云游戏,云手机,云直播,ARM云计算,分布式算力,移动端部署" />
+    <meta name="author" content="深圳市云端未来科技有限公司" />
+    <meta name="robots" content="index, follow" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

nginx.conf.example

@@ -0,0 +1,14 @@
+server {
+  listen 80;
+  server_name example.com;
+  root /var/www/ydwl-website;
+
+  # Serve the .gz files emitted by `npm run build` when the client supports gzip.
+  gzip_static on;
+  gzip_vary on;
+  gzip_types text/plain text/css application/javascript application/json image/svg+xml application/xml;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "company-website",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.0"
+  }
+}

public/logo-1.svg

@@ -0,0 +1,21 @@
+<svg width="267" height="27" viewBox="0 0 267 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#181;&#132;&#230;&#186;&#144; 1 1" clip-path="url(#clip0_72_12054)">
+<g id="&#229;&#155;&#190;&#229;&#177;&#130; 2">
+<g id="&#229;&#155;&#190;&#229;&#177;&#130; 1">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M52.09 13.03H65.12V26.06H52.09V13.03L42.54 22.59L39.06 26.06H26.04V13.08L13.03 26.08H0V13.05L13.03 0.02H26.06V13L39.06 0H52.09V13.03Z" fill="url(#paint0_linear_72_12054)"/>
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M169.529 22.6598C170.096 20.6598 170.669 18.3765 171.249 15.8098C171.829 13.2698 172.299 10.9998 172.679 8.98982H174.679H176.539L175.999 11.2798C176.282 10.9508 176.583 10.6371 176.899 10.3398C177.183 10.0814 177.491 9.85039 177.819 9.64982C178.181 9.43092 178.567 9.25315 178.969 9.11982C179.395 8.97111 179.833 8.86067 180.279 8.78982C180.761 8.70894 181.25 8.6688 181.739 8.66982C182.496 8.66871 183.249 8.76962 183.979 8.96982C184.6 9.13648 185.157 9.48468 185.579 9.96982C185.932 10.3748 186.155 10.8765 186.219 11.4098C186.269 11.9572 186.246 12.5088 186.149 13.0498C186.099 13.2998 186.019 13.6798 185.899 14.2098L184.589 20.0898C184.409 20.8998 184.239 21.7698 184.069 22.6898H182.259H180.199C180.399 21.9098 180.729 20.5598 181.199 18.6198C181.669 16.6798 181.919 15.3898 182.029 14.7598C182.169 14.1984 182.169 13.6113 182.029 13.0498C181.957 12.8341 181.843 12.6348 181.694 12.4632C181.544 12.2916 181.363 12.1511 181.159 12.0498C180.703 11.8225 180.199 11.7093 179.689 11.7198C179.154 11.7193 178.624 11.8247 178.129 12.0298C177.622 12.239 177.16 12.5446 176.769 12.9298C176.318 13.3579 175.945 13.8623 175.669 14.4198C175.237 15.422 174.902 16.4635 174.669 17.5298C174.356 18.8098 173.986 20.5232 173.559 22.6698H171.689L169.529 22.6598ZM162.529 22.6598C163.279 19.5798 164.009 16.4198 164.699 13.1798C165.389 9.93983 165.909 7.46982 166.209 5.74982L166.449 4.31982H168.689H170.749C169.562 9.03316 168.259 15.1465 166.839 22.6598H164.839H162.529ZM146.999 14.1798H153.289C153.359 13.7398 153.399 13.4298 153.409 13.1798C153.415 12.9454 153.399 12.711 153.359 12.4798C153.316 12.2309 153.225 11.9929 153.089 11.7798C152.968 11.5803 152.808 11.407 152.619 11.2698C152.407 11.1313 152.174 11.0267 151.929 10.9598C151.623 10.8992 151.31 10.879 150.999 10.8998C150.615 10.9009 150.234 10.9616 149.869 11.0798C149.493 11.1967 149.135 11.3685 148.809 11.5898C148.485 11.7971 148.195 12.0535 147.949 12.3498C147.74 12.5921 147.559 12.8571 147.409 13.1398C147.249 13.477 147.112 13.8244 146.999 14.1798ZM154.729 19.6098C154.529 20.1398 154.189 21.0898 153.729 22.4598C152.722 22.6732 151.882 22.8132 151.209 22.8798C150.545 22.9503 149.877 22.9871 149.209 22.9898C148.168 23.0033 147.13 22.8857 146.119 22.6398C145.275 22.427 144.509 21.9798 143.909 21.3498C143.312 20.7141 142.912 19.9185 142.759 19.0598C142.584 18.1179 142.584 17.1518 142.759 16.2098C142.958 15.0884 143.339 14.0073 143.889 13.0098C144.407 12.0365 145.11 11.1737 145.959 10.4698C146.728 9.82923 147.619 9.35278 148.579 9.06982C149.505 8.79882 150.464 8.66077 151.429 8.65982C152.291 8.65589 153.149 8.77029 153.979 8.99982C154.699 9.18815 155.351 9.57646 155.859 10.1198C156.348 10.6504 156.692 11.2978 156.859 11.9998C157.026 12.8046 157.026 13.6351 156.859 14.4398C156.782 14.8839 156.661 15.3193 156.499 15.7398H146.639C146.569 16.0798 146.509 16.3398 146.479 16.5398C146.364 17.0838 146.364 17.6458 146.479 18.1898C146.584 18.6707 146.82 19.1134 147.159 19.4698C147.507 19.8338 147.945 20.0995 148.429 20.2398C148.937 20.4007 149.466 20.485 149.999 20.4898C150.687 20.4815 151.373 20.4146 152.049 20.2898C152.941 20.1137 153.823 19.8867 154.689 19.6098H154.729ZM131.969 22.6598L133.469 16.2798L134.229 12.5698C134.379 11.8098 134.529 11.0398 134.659 10.2698C134.659 10.1298 134.749 9.70982 134.859 8.98982H136.689H138.509L138.109 10.8898C138.438 10.5029 138.795 10.1419 139.179 9.80982C139.458 9.56799 139.768 9.36298 140.099 9.19982C140.433 9.02269 140.79 8.8915 141.159 8.80982C141.539 8.71956 141.928 8.67259 142.319 8.66982C142.683 8.6721 143.046 8.71912 143.399 8.80982C143.259 9.63982 143.109 10.6998 142.969 11.9698C142.511 11.8374 142.036 11.7667 141.559 11.7598C141.075 11.7533 140.594 11.8346 140.139 11.9998C139.698 12.1626 139.29 12.4068 138.939 12.7198C138.545 13.0534 138.207 13.4485 137.939 13.8898C137.672 14.3501 137.461 14.8401 137.309 15.3498C137.149 15.8198 136.959 16.6198 136.709 17.7498C136.459 18.8798 136.249 19.9898 136.059 21.0798C135.979 21.4998 135.899 22.0298 135.809 22.6598H133.949H131.969ZM129.319 22.6598H127.509H125.699L126.119 20.4398C125.809 20.8098 125.529 21.1098 125.309 21.3398C125.044 21.5901 124.756 21.8144 124.449 22.0098C124.11 22.2321 123.743 22.4102 123.359 22.5398C122.914 22.6886 122.46 22.8088 121.999 22.8998C121.508 22.9896 121.009 23.0331 120.509 23.0298C119.642 23.0523 118.778 22.9028 117.969 22.5898C117.316 22.3394 116.772 21.869 116.429 21.2598C116.077 20.4641 116.003 19.5728 116.219 18.7298V18.4398L117.049 14.9798L118.049 10.3998C118.119 10.0398 118.209 9.57982 118.299 9.02982H120.299H122.159L120.639 15.1598C120.539 15.6398 120.439 16.0398 120.369 16.3598C120.299 16.6798 120.259 16.9298 120.229 17.0698C120.112 17.6001 120.112 18.1495 120.229 18.6798C120.287 18.8967 120.391 19.0984 120.534 19.271C120.677 19.4437 120.857 19.5831 121.059 19.6798C121.517 19.9118 122.025 20.0285 122.539 20.0198C123.064 20.0189 123.583 19.917 124.069 19.7198C124.514 19.5442 124.924 19.2902 125.279 18.9698C125.6Line truncated
+<path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd" d="M261.301 11.46C260.686 11.2841 260.05 11.1933 259.411 11.19C258.707 11.186 258.007 11.2837 257.331 11.48C256.641 11.6845 255.998 12.0245 255.441 12.48C254.847 12.9913 254.358 13.6128 254.001 14.31C253.628 14.9841 253.365 15.7132 253.221 16.47C253.085 17.0926 253.085 17.7374 253.221 18.36C253.348 18.9092 253.672 19.3929 254.131 19.72C254.623 20.0615 255.212 20.2367 255.811 20.22C256.284 20.2232 256.754 20.1314 257.191 19.95C257.653 19.7622 258.077 19.491 258.441 19.15C258.869 18.7362 259.233 18.261 259.521 17.74C259.912 17.0204 260.211 16.2543 260.411 15.46C260.611 14.76 260.901 13.43 261.301 11.46ZM262.651 22.66H260.921H259.071L259.591 20.32C259.208 20.7406 258.801 21.1379 258.371 21.51C258.007 21.8086 257.611 22.0668 257.191 22.28C256.737 22.5212 256.253 22.6995 255.751 22.81C255.246 22.9296 254.73 22.99 254.211 22.99C253.405 23.0014 252.607 22.8376 251.871 22.51C251.205 22.2209 250.623 21.7666 250.181 21.19C249.754 20.5983 249.476 19.9122 249.371 19.19C249.237 18.3789 249.237 17.5511 249.371 16.74C249.593 15.5272 250.026 14.3628 250.651 13.3C251.232 12.2539 252.017 11.3356 252.961 10.6C253.825 9.92923 254.809 9.43023 255.861 9.13C256.92 8.83866 258.013 8.69398 259.111 8.7C260.022 8.70987 260.931 8.78674 261.831 8.93C262.111 7.77 262.351 6.55 262.571 5.26L262.731 4.35H264.671H266.671C266.081 6.63 265.351 9.72 264.491 13.64C263.631 17.56 263.001 20.55 262.651 22.66ZM246.101 22.66H244.291H242.481L242.901 20.44C242.581 20.81 242.311 21.11 242.081 21.34C241.818 21.5926 241.53 21.8171 241.221 22.01C240.886 22.2341 240.523 22.4124 240.141 22.54C239.718 22.6713 239.287 22.7781 238.851 22.86C238.36 22.9498 237.861 22.9933 237.361 22.99C236.49 23.0125 235.624 22.863 234.811 22.55C234.162 22.2976 233.621 21.8274 233.281 21.22C232.929 20.4243 232.855 19.533 233.071 18.69L233.121 18.4L233.941 14.94L234.941 10.36C235.011 10 235.091 9.54 235.191 8.99H237.191H239.041L237.531 15.12L237.261 16.32L237.111 17.03C236.999 17.5608 236.999 18.1092 237.111 18.64C237.169 18.8581 237.275 19.0606 237.42 19.2335C237.565 19.4063 237.746 19.545 237.951 19.64C238.409 19.8731 238.917 19.9899 239.431 19.98C239.956 19.979 240.475 19.8772 240.961 19.68C241.406 19.5044 241.816 19.2503 242.171 18.93C242.569 18.5507 242.907 18.1122 243.171 17.63C243.438 17.1058 243.652 16.5565 243.811 15.99C243.951 15.49 244.161 14.65 244.421 13.44C244.751 12 245.061 10.52 245.351 9.02H247.351H249.151C248.821 10.3 248.421 11.91 247.971 13.83C247.521 15.75 247.161 17.34 246.901 18.59C246.641 19.84 246.381 21.18 246.101 22.66ZM225.221 11.44C224.454 11.4367 223.699 11.6332 223.031 12.01C222.324 12.4107 221.745 13.0036 221.361 13.72C220.925 14.4782 220.627 15.3077 220.481 16.17C220.335 16.8557 220.335 17.5643 220.481 18.25C220.601 18.8424 220.936 19.3695 221.421 19.73C221.971 20.1299 222.641 20.3309 223.321 20.3C224.087 20.3071 224.84 20.1066 225.501 19.72C226.189 19.296 226.754 18.6996 227.141 17.99C227.585 17.2166 227.886 16.3699 228.031 15.49C228.157 14.8293 228.157 14.1507 228.031 13.49C227.919 12.8998 227.586 12.3744 227.101 12.02C226.554 11.6277 225.894 11.4241 225.221 11.44ZM225.701 8.67C226.68 8.66573 227.652 8.8211 228.581 9.13C229.411 9.39586 230.158 9.87115 230.751 10.51C231.309 11.1347 231.689 11.898 231.851 12.72C232.021 13.6355 232.021 14.5745 231.851 15.49C231.677 16.5203 231.339 17.5162 230.851 18.44C230.341 19.3703 229.671 20.2031 228.871 20.9C228.067 21.603 227.128 22.1339 226.111 22.46C225.062 22.8034 223.965 22.9789 222.861 22.98C221.881 22.9883 220.907 22.8294 219.981 22.51C219.151 22.2457 218.406 21.7661 217.821 21.12C217.267 20.4861 216.881 19.7225 216.701 18.9C216.526 17.9783 216.526 17.0317 216.701 16.11C216.887 15.124 217.224 14.1728 217.701 13.29C218.706 11.3995 220.4 9.96754 222.431 9.29C223.479 8.90212 224.584 8.69255 225.701 8.67ZM209.291 22.67C209.691 21.1567 210.331 18.4367 211.211 14.51C212.091 10.5833 212.801 7.19 213.341 4.33H215.341H217.281L216.101 9.23L213.721 20.17L213.231 22.67H211.361H209.291ZM207.931 19.32C207.551 20.32 207.191 21.43 206.861 22.51C205.811 22.7 204.861 22.82 203.991 22.89C203.121 22.96 202.391 23 201.781 23C200.505 23.0111 199.236 22.8187 198.021 22.43C196.898 22.0737 195.872 21.4647 195.021 20.65C194.192 19.8567 193.63 18.8261 193.411 17.7C193.181 16.4472 193.181 15.1628 193.411 13.91C193.665 12.4562 194.18 11.0604 194.931 9.79C195.663 8.5476 196.627 7.45775 197.771 6.58C198.929 5.71064 200.233 5.05379 201.621 4.64C203.042 4.21631 204.518 4.00074 206.001 4C207.573 4.01085 209.141 4.17496 210.681 4.49C210.561 5.29 210.491 5.86 210.461 6.19L210.301 7.63C209.501 7.40205 208.69 7.21514 207.871 7.07C207.242 6.98043 206.607 6.93365 205.971 6.93C205.008 6.92933 204.051 7.07431 203.131 7.36C202.194 7.6624 201.319 8.13346 200.551 8.75C199.749 9.39158 199.071 10.1745 198.551 11.06C198.054 11.9337 197.715 12.8884 197.551 13.88C197.343 14.9154 197.388 15.9855 197.681 17C197.971 17.9411 198.597 18.7422 199.441 19.25C200.511 19.8679 201.736 20.1664 202.971 2Line truncated
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_72_12054" x1="14.5" y1="-1.98404e-06" x2="65" y2="26" gradientUnits="userSpaceOnUse">
+<stop stop-color="#205EFE"/>
+<stop offset="1" stop-color="#1890FF"/>
+<stop offset="1" stop-color="#000200" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_72_12054">
+<rect width="266.68" height="26.09" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/logo-h.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1113" height="113" viewBox="0 0 1113 113">
+  <image id="_1" data-name="1" width="1112" height="110" xlink:href="data:img/png;base64,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 truncated
+</svg>

public/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1113" height="113" viewBox="0 0 1113 113">
+  <image id="_1" data-name="1" x="-49" width="912" height="148" xlink:href="data:img/png;base64,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 truncated
+</svg>

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://yunduanweilai.com/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://yunduanweilai.com/</loc>
+    <lastmod>2026-08-28</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://yunduanweilai.com/about</loc>
+    <lastmod>2026-08-28</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://yunduanweilai.com/products</loc>
+    <lastmod>2026-08-28</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://yunduanweilai.com/contact</loc>
+    <lastmod>2026-08-28</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+</urlset>

src/App.jsx

@@ -0,0 +1,28 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import Header from './components/Header'
+import Footer from './components/Footer'
+import Home from './pages/Home'
+import About from './pages/About'
+import Products from './pages/Products'
+import Contact from './pages/Contact'
+
+function App() {
+  return (
+    <Router>
+      <div className="app">
+        <Header />
+        <main>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/products" element={<Products />} />
+            <Route path="/contact" element={<Contact />} />
+          </Routes>
+        </main>
+        <Footer />
+      </div>
+    </Router>
+  )
+}
+
+export default App

src/components/Footer.css

@@ -0,0 +1,177 @@
+.footer {
+  background-color: var(--gray-900);
+  color: var(--gray-300);
+  padding: 60px 0 0;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 40px;
+}
+
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.footer-logo-img {
+  height: 40px;
+  width: auto;
+}
+
+.footer-desc {
+  font-size: 0.875rem;
+  line-height: 1.8;
+  color: var(--gray-400);
+}
+
+.footer-section h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--white);
+  margin-bottom: 20px;
+}
+
+.footer-links li {
+  margin-bottom: 12px;
+}
+
+.footer-links a {
+  color: var(--gray-400);
+  font-size: 0.875rem;
+  transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+  color: var(--primary);
+}
+
+.footer-contact li {
+  color: var(--gray-400);
+  font-size: 0.875rem;
+  margin-bottom: 12px;
+}
+
+.footer-social {
+  display: flex;
+  gap: 24px;
+}
+
+.social-item {
+  position: relative;
+  text-align: center;
+  min-width: 60px;
+}
+
+.social-name {
+  display: block;
+  color: var(--gray-400);
+  font-size: 0.875rem;
+  cursor: pointer;
+  padding: 8px 16px;
+  background-color: var(--gray-800);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.social-name:hover {
+  background-color: var(--primary);
+  color: var(--white);
+}
+
+.social-qr {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding-bottom: 16px;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  width: 220px;
+}
+
+@media (max-width: 768px) {
+  .footer-social {
+    justify-content: flex-start;
+    gap: 12px;
+  }
+
+  .social-item {
+    position: relative;
+  }
+
+  .social-qr {
+    left: 0;
+    transform: none;
+    width: 180px;
+  }
+
+  .social-qr-img {
+    width: 180px !important;
+    height: 180px !important;
+  }
+}
+
+.social-item:hover .social-qr {
+  opacity: 1;
+  visibility: visible;
+}
+
+.social-qr .qr-placeholder {
+  width: 220px;
+  height: 220px;
+  background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-500);
+  font-size: 0.875rem;
+}
+
+.social-qr-img {
+  width: 220px !important;
+  height: 220px !important;
+  border-radius: 8px;
+  object-fit: contain !important;
+}
+
+.footer-bottom {
+  border-top: 1px solid var(--gray-800);
+  padding: 20px 0;
+  margin-top: 60px;
+  text-align: center;
+}
+
+.footer-bottom p {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+}
+
+.icp-link {
+  color: var(--gray-500);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.icp-link:hover {
+  color: var(--primary);
+}
+
+@media (max-width: 768px) {
+  .footer-content {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  .footer {
+    padding: 40px 0 0;
+  }
+}

src/components/Footer.jsx

@@ -0,0 +1,64 @@
+import { Link } from 'react-router-dom'
+import './Footer.css'
+
+function Footer() {
+  return (
+    <footer className="footer">
+      <div className="container">
+        <div className="footer-content">
+          <div className="footer-section">
+            <div className="footer-logo">
+              <img src="/logo-h.svg" alt="logo" className="footer-logo-img" />
+            </div>
+            <p className="footer-desc">
+              我们致力于提供高品质产品与专业服务，以科技创新赋能行业进步
+            </p>
+          </div>
+
+          <div className="footer-section">
+            <h4>快速链接</h4>
+            <ul className="footer-links">
+              <li><Link to="/">首页</Link></li>
+              <li><Link to="/about">关于我们</Link></li>
+              <li><Link to="/products">产品中心</Link></li>
+              <li><Link to="/contact">联系我们</Link></li>
+            </ul>
+          </div>
+
+          <div className="footer-section">
+            <h4>联系方式</h4>
+            <ul className="footer-contact">
+              <li>地址：深圳市南山区粤海街道高新区社区高新南九道53号航空航天大厦2号楼1108</li>
+              <li>电话：0755-86702680</li>
+              <li>邮箱：luosihai@yunduanweilai.com</li>
+            </ul>
+          </div>
+
+          <div className="footer-section">
+            <h4>关注我们</h4>
+            <div className="footer-social">
+              <div className="social-item">
+                <span className="social-name">公众号</span>
+                <div className="social-qr">
+                  <img src="/gzh.png" alt="公众号" className="social-qr-img" />
+                </div>
+              </div>
+              <div className="social-item">
+                <span className="social-name">抖音</span>
+                <div className="social-qr">
+                  <img src="/dy.png" alt="抖音" className="social-qr-img" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="footer-bottom">
+          <p>&copy; 2026 深圳市云端未来科技有限公司 版权所有 | <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" className="icp-link">粤ICP备2022021444号</a></p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/Header.css

@@ -0,0 +1,144 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--white);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 70px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+}
+
+.logo-img {
+  height: 40px;
+  width: auto;
+}
+
+.nav {
+  display: flex;
+  gap: 32px;
+}
+
+.nav-link {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--gray-600);
+  padding: 8px 0;
+  position: relative;
+  transition: color 0.3s ease;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: var(--primary);
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background-color: var(--primary);
+  transition: width 0.3s ease;
+}
+
+.nav-link:hover::after,
+.nav-link.active::after {
+  width: 100%;
+}
+
+.menu-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+}
+
+.menu-toggle span {
+  width: 24px;
+  height: 2px;
+  background-color: var(--gray-700);
+  transition: all 0.3s ease;
+}
+
+.menu-toggle.active span:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
+}
+
+.menu-toggle.active span:nth-child(2) {
+  opacity: 0;
+}
+
+.menu-toggle.active span:nth-child(3) {
+  transform: rotate(-45deg) translate(5px, -5px);
+}
+
+@media (max-width: 768px) {
+  .header-content {
+    height: 60px;
+    padding: 0 12px;
+  }
+
+  .logo {
+    flex: 1;
+    max-width: calc(100% - 60px);
+  }
+
+  .logo-img {
+    height: 36px;
+    max-width: 100%;
+    object-fit: contain;
+  }
+
+  .menu-toggle {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .nav {
+    position: fixed;
+    top: 70px;
+    left: 0;
+    right: 0;
+    background-color: var(--white);
+    flex-direction: column;
+    padding: 20px;
+    gap: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transform: translateY(-100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
+  }
+
+  .nav-open {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .nav-link {
+    padding: 15px 0;
+    border-bottom: 1px solid var(--gray-200);
+  }
+
+  .nav-link::after {
+    display: none;
+  }
+}

src/components/Header.jsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import './Header.css'
+
+function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const location = useLocation()
+
+  const navLinks = [
+    { path: '/', label: '首页' },
+    { path: '/about', label: '关于我们' },
+    { path: '/products', label: '产品中心' },
+    { path: '/contact', label: '联系我们' },
+  ]
+
+  const isActive = (path) => location.pathname === path
+
+  return (
+    <header className="header">
+      <div className="container header-content">
+        <Link to="/" className="logo">
+          <img src="/logo.svg" alt="logo" className="logo-img" />
+        </Link>
+
+        <nav className={`nav ${isMenuOpen ? 'nav-open' : ''}`}>
+          {navLinks.map((link) => (
+            <Link
+              key={link.path}
+              to={link.path}
+              className={`nav-link ${isActive(link.path) ? 'active' : ''}`}
+              onClick={() => setIsMenuOpen(false)}
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+
+        <button
+          className={`menu-toggle ${isMenuOpen ? 'active' : ''}`}
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+          aria-label="切换菜单"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/index.css

@@ -0,0 +1,138 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary: #3b82f6;
+  --primary-dark: #2563eb;
+  --secondary: #64748b;
+  --dark: #1e293b;
+  --light: #f8fafc;
+  --white: #ffffff;
+  --gray-100: #f1f5f9;
+  --gray-200: #e2e8f0;
+  --gray-300: #cbd5e1;
+  --gray-400: #94a3b8;
+  --gray-500: #64748b;
+  --gray-600: #475569;
+  --gray-700: #334155;
+  --gray-800: #1e293b;
+  --gray-900: #0f172a;
+}
+
+main {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.6;
+  color: var(--gray-800);
+  background-color: var(--white);
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.section {
+  padding: 80px 0;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 1rem;
+  color: var(--gray-900);
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  text-align: center;
+  color: var(--gray-500);
+  margin-bottom: 3rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.btn {
+  display: inline-block;
+  padding: 12px 32px;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: none;
+}
+
+.btn-primary {
+  background-color: var(--primary);
+  color: var(--white);
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+.btn-secondary {
+  background-color: transparent;
+  color: var(--primary);
+  border: 2px solid var(--primary);
+}
+
+.btn-secondary:hover {
+  background-color: var(--primary);
+  color: var(--white);
+}
+
+@media (max-width: 768px) {
+  .section {
+    padding: 60px 0;
+  }
+
+  .section-title {
+    font-size: 2rem;
+  }
+
+  .section-subtitle {
+    font-size: 1rem;
+  }
+}

src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/pages/About.css

@@ -0,0 +1,216 @@
+.about {
+  padding-top: 70px;
+}
+
+.page-header {
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: var(--white);
+  padding: 80px 0;
+  text-align: center;
+}
+
+.page-header h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.page-header p {
+  font-size: 1.125rem;
+  opacity: 0.9;
+}
+
+/* About Intro */
+.about-intro {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 60px;
+  align-items: center;
+}
+
+.about-intro-content h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 24px;
+  color: var(--gray-900);
+}
+
+.about-intro-content p {
+  font-size: 1rem;
+  color: var(--gray-600);
+  line-height: 1.8;
+  margin-bottom: 16px;
+}
+
+.about-intro-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.company-image {
+  width: 100%;
+  height: auto;
+  border-radius: 12px;
+}
+
+/* Stats Section */
+.stats-section {
+  background-color: var(--gray-50);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 32px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 40px 20px;
+  background: var(--white);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.stat-value {
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--primary);
+  margin-bottom: 8px;
+}
+
+.stat-label {
+  font-size: 1rem;
+  color: var(--gray-600);
+}
+
+/* Team Section */
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px;
+}
+
+.team-card {
+  text-align: center;
+  padding: 40px 24px;
+  background: var(--white);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.team-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
+
+.team-avatar {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: var(--white);
+  font-size: 2.5rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin: 0 auto 20px;
+}
+
+.team-card h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin-bottom: 8px;
+}
+
+.team-position {
+  font-size: 0.875rem;
+  color: var(--primary);
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+.team-desc {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+  line-height: 1.6;
+}
+
+/* Values Section */
+.values-section {
+  background-color: var(--gray-50);
+}
+
+.values-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 32px;
+}
+
+.value-card {
+  background: var(--white);
+  padding: 40px 24px;
+  border-radius: 12px;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.value-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
+
+.value-card h3 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--primary);
+  margin-bottom: 16px;
+}
+
+.value-card p {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+  line-height: 1.6;
+}
+
+@media (max-width: 992px) {
+  .about-intro {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+
+  .stats-grid,
+  .team-grid,
+  .values-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    padding: 60px 0;
+  }
+
+  .page-header h1 {
+    font-size: 2rem;
+  }
+
+  .about-intro-content h2 {
+    font-size: 1.5rem;
+  }
+
+  .stats-grid,
+  .team-grid,
+  .values-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stat-value {
+    font-size: 2.5rem;
+  }
+}

src/pages/About.jsx

@@ -0,0 +1,67 @@
+import { useEffect } from 'react'
+import './About.css'
+
+function About() {
+  useEffect(() => {
+    document.title = '关于我们 - 深圳市云端未来科技有限公司'
+  }, [])
+
+  return (
+    <div className="about">
+      <div className="page-header">
+        <div className="container">
+          <h1>关于我们</h1>
+          <p>了解我们的故事、文化</p>
+        </div>
+      </div>
+
+      {/* Company Intro */}
+      <section className="section">
+        <div className="container">
+          <div className="about-intro">
+            <div className="about-intro-content">
+              <h2>公司简介</h2>
+              <p>
+                深圳市云端未来科技有限公司，专注云游戏、云手机、云直播领域。面向大规模移动端部署场景提供综合解决方案，同时为高算力需求客户提供异构分布式算力运营服务，帮助客户实现成本优化。
+              </p>
+              <p>
+                作为 ARM 云计算服务商，我们依托自研 ARM 核心技术及软硬件产品，为行业客户提供实时算力，应用优化、快速部署的一体化交付服务。
+              </p>
+            </div>
+            <div className="about-intro-image">
+              <img src="/Company.png" alt="深圳市云端未来科技有限公司办公环境" className="company-image" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Values Section */}
+      <section className="section values-section">
+        <div className="container">
+          <h2 className="section-title">核心价值观</h2>
+          <p className="section-subtitle">指引我们前行的信念</p>
+          <div className="values-grid">
+            <div className="value-card">
+              <h3>创新</h3>
+              <p>持续创新是企业的灵魂，我们不断探索新技术、新方法，为客户创造更大价值。</p>
+            </div>
+            <div className="value-card">
+              <h3>诚信</h3>
+              <p>诚信是合作的基石，我们始终以诚相待，信守承诺，赢得客户信赖。</p>
+            </div>
+            <div className="value-card">
+              <h3>共赢</h3>
+              <p>我们追求与客户、员工、合作伙伴的共同发展，实现多方共赢。</p>
+            </div>
+            <div className="value-card">
+              <h3>卓越</h3>
+              <p>卓越是我们永恒的追求，我们不断挑战自我，追求更高目标。</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default About

src/pages/Contact.css

@@ -0,0 +1,265 @@
+.contact {
+  padding-top: 70px;
+}
+
+.contact-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 60px;
+}
+
+/* Contact Info */
+.contact-info h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--gray-900);
+  margin-bottom: 16px;
+}
+
+.contact-desc {
+  font-size: 1rem;
+  color: var(--gray-600);
+  margin-bottom: 40px;
+}
+
+.info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.info-item {
+  display: flex;
+  gap: 20px;
+  align-items: flex-start;
+}
+
+.info-icon {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: var(--white);
+  font-size: 0.875rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+.info-content h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin-bottom: 4px;
+}
+
+.info-content p {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+  word-break: break-word;
+  line-height: 1.6;
+}
+
+/* Contact Form */
+.contact-form-wrapper {
+  background: var(--white);
+  border-radius: 12px;
+  padding: 40px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.contact-form h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin-bottom: 32px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--gray-700);
+  margin-bottom: 8px;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 1rem;
+  color: var(--gray-800);
+  background-color: var(--gray-50);
+  border: 1px solid var(--gray-300);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+  background-color: var(--white);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.form-group input.error,
+.form-group textarea.error {
+  border-color: #ef4444;
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+  color: var(--gray-400);
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.error-msg {
+  display: block;
+  font-size: 0.75rem;
+  color: #ef4444;
+  margin-top: 4px;
+}
+
+.contact-form .btn {
+  width: 100%;
+  padding: 14px;
+}
+
+/* Success Message */
+.success-message {
+  text-align: center;
+  padding: 60px 40px;
+}
+
+.success-icon {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: var(--white);
+  font-size: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin: 0 auto 24px;
+}
+
+.success-message h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin-bottom: 12px;
+}
+
+.success-message p {
+  font-size: 1rem;
+  color: var(--gray-600);
+  margin-bottom: 32px;
+}
+
+/* Map Section */
+.map-section {
+  padding: 0 0 80px;
+}
+
+.map-iframe {
+  border-radius: 12px;
+  border: none;
+}
+
+/* QR Codes */
+.qr-codes {
+  padding: 32px;
+  background: var(--white);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.qr-codes h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin-bottom: 24px;
+}
+
+.qr-hint {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.qr-list {
+  display: flex;
+  gap: 32px;
+}
+
+.qr-item {
+  text-align: center;
+}
+
+.qr-placeholder {
+  width: 200px;
+  height: 200px;
+  background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-500);
+  font-size: 0.875rem;
+  margin-bottom: 12px;
+}
+
+.qr-image {
+  width: 200px;
+  height: 200px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  object-fit: cover;
+}
+
+.qr-item p {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+}
+
+@media (max-width: 992px) {
+  .contact-content {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+}
+
+@media (max-width: 768px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .contact-form-wrapper {
+    padding: 24px;
+  }
+
+  .qr-list {
+    flex-direction: column;
+    align-items: center;
+  }
+}

src/pages/Contact.jsx

@@ -0,0 +1,136 @@
+import { useState, useEffect } from 'react'
+import './Contact.css'
+
+function Contact() {
+  useEffect(() => {
+    document.title = '联系我们 - 深圳市云端未来科技有限公司'
+  }, [])
+  const [formData, setFormData] = useState({
+    name: '',
+    phone: '',
+    email: '',
+    company: '',
+    message: '',
+  })
+
+  const [errors, setErrors] = useState({})
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+    if (errors[name]) {
+      setErrors((prev) => ({ ...prev, [name]: '' }))
+    }
+  }
+
+  const validate = () => {
+    const newErrors = {}
+    if (!formData.name.trim()) {
+      newErrors.name = '请输入您的姓名'
+    }
+    if (!formData.phone.trim()) {
+      newErrors.phone = '请输入您的电话'
+    } else if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
+      newErrors.phone = '请输入正确的手机号码'
+    }
+    if (!formData.email.trim()) {
+      newErrors.email = '请输入您的邮箱'
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = '请输入正确的邮箱地址'
+    }
+    if (!formData.message.trim()) {
+      newErrors.message = '请输入您的留言内容'
+    }
+    return newErrors
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    const newErrors = validate()
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors)
+      return
+    }
+    setSubmitted(true)
+    setFormData({
+      name: '',
+      phone: '',
+      email: '',
+      company: '',
+      message: '',
+    })
+  }
+
+  const contactInfo = [
+    {
+      icon: '地址',
+      title: '公司地址',
+      content: '深圳市南山区粤海街道高新区社区高新南九道53号航空航天大厦2号楼1108',
+    },
+    {
+      icon: '电话',
+      title: '联系电话',
+      content: '0755-86702680',
+    },
+    {
+      icon: '邮箱',
+      title: '电子邮箱',
+      content: 'luosihai@yunduanweilai.com',
+    },
+  ]
+
+  return (
+    <div className="contact">
+      <div className="page-header">
+        <div className="container">
+          <h1>联系我们</h1>
+          <p>有任何问题或建议，请随时联系我们</p>
+        </div>
+      </div>
+
+      <section className="section">
+        <div className="container">
+          <div className="contact-content">
+            {/* Contact Info */}
+            <div className="contact-info">
+              <h2>联系方式</h2>
+              <p className="contact-desc">
+                期待您的来信，我们会尽快回复您的问题和需求
+              </p>
+              <div className="info-list">
+                {contactInfo.map((item, index) => (
+                  <div key={index} className="info-item">
+                    <div className="info-icon">{item.icon}</div>
+                    <div className="info-content">
+                      <h4>{item.title}</h4>
+                      <p>{item.content}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* QR Codes */}
+            <div className="qr-codes">
+              <h3>关注我们</h3>
+              <p className="qr-hint">扫码关注，获取更多资讯</p>
+              <div className="qr-list">
+                <div className="qr-item">
+                  <img src="/gzh.png" alt="公众号" className="qr-image" />
+                  <p>公众号</p>
+                </div>
+                <div className="qr-item">
+                  <img src="/dy.png" alt="抖音" className="qr-image" />
+                  <p>抖音</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default Contact

src/pages/Home.css

@@ -0,0 +1,239 @@
+.home {
+  padding-top: 70px;
+}
+
+/* Hero Section */
+.hero {
+  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
+  color: var(--white);
+  padding: 120px 0;
+  text-align: center;
+}
+
+.hero-content h1 {
+  font-size: 3.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 24px;
+}
+
+.hero-content p {
+  font-size: 1.25rem;
+  opacity: 0.9;
+  margin-bottom: 40px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hero-btns {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.hero .btn-secondary {
+  color: var(--white);
+  border-color: var(--white);
+}
+
+.hero .btn-secondary:hover {
+  background-color: var(--white);
+  color: var(--primary);
+}
+
+/* Features Section */
+.features {
+  background-color: var(--gray-50);
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 32px;
+}
+
+.feature-card {
+  background: var(--white);
+  padding: 40px 24px;
+  border-radius: 12px;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
+
+.feature-icon {
+  width: 64px;
+  height: 64px;
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: var(--white);
+  font-size: 1.25rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  margin: 0 auto 20px;
+}
+
+.feature-card h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--gray-900);
+}
+
+.feature-card p {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+  line-height: 1.6;
+}
+
+/* Products Preview Section */
+.products-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px;
+}
+
+.product-card {
+  background: var(--white);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.product-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
+
+.product-image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
+}
+
+.product-img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.product-tag {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background-color: var(--primary);
+  color: var(--white);
+  padding: 4px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 4px;
+}
+
+.product-info {
+  padding: 24px;
+}
+
+.product-info h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--gray-900);
+}
+
+.product-info p {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+  line-height: 1.6;
+  margin-bottom: 16px;
+}
+
+.product-link {
+  color: var(--primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: color 0.3s ease;
+}
+
+.product-link:hover {
+  color: var(--primary-dark);
+}
+
+/* CTA Section */
+.cta {
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: var(--white);
+  text-align: center;
+}
+
+.cta h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.cta p {
+  font-size: 1.125rem;
+  opacity: 0.9;
+  margin-bottom: 32px;
+}
+
+.cta .btn-primary {
+  background-color: var(--white);
+  color: var(--primary);
+}
+
+.cta .btn-primary:hover {
+  background-color: var(--gray-100);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+@media (max-width: 992px) {
+  .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .products-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .hero {
+    padding: 80px 0;
+  }
+
+  .hero-content h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero-content p {
+    font-size: 1rem;
+  }
+
+  .hero-btns {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .features-grid,
+  .products-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .cta h2 {
+    font-size: 2rem;
+  }
+}

src/pages/Home.jsx

@@ -0,0 +1,124 @@
+import { useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import './Home.css'
+
+function Home() {
+  useEffect(() => {
+    document.title = '云端未来 Future in Cloud - 云游戏|云手机|云直播解决方案'
+  }, [])
+  const features = [
+    {
+      icon: '01',
+      title: '专业团队',
+      desc: '汇聚行业精英，为您提供专业的服务',
+    },
+    {
+      icon: '02',
+      title: '优质产品',
+      desc: '严选品质，确保每一款产品都达到高标准',
+    },
+    {
+      icon: '03',
+      title: '创新技术',
+      desc: '持续研发投入，推动行业技术革新',
+    },
+    {
+      icon: '04',
+      title: '完善服务',
+      desc: '贴心服务，全程无忧',
+    },
+  ]
+
+  const products = [
+    {
+      name: 'FC-3580',
+      desc: '2U架构ARM集群服务器，80核心节点，支持IDC建设',
+      tag: '热门推荐',
+      image: '3580.png',
+      imageAlt: '3580云游戏产品图片',
+    },
+    {
+      name: 'FC-3520',
+      desc: '高性能桌面服务器，20核心节点，中小企业/工作室的推荐方案',
+      tag: '热门推荐',
+      image: '3520.png',
+      imageAlt: '3520云手机产品图片',
+    },
+    {
+      name: 'AI 个人算力终端',
+      desc: '小型服务器，双核心架构，面向个体用户的智能体',
+      tag: '热销中',
+      image: 'cloudbox.png',
+      imageAlt: 'cloudbox云手机产品图片',
+    },
+  ]
+
+  return (
+    <div className="home">
+      {/* Hero Section */}
+      <section className="hero">
+        <div className="container">
+          <div className="hero-content">
+            <h1>深耕创新发展<br />共筑美好未来</h1>
+            <p>我们致力于提供高品质产品与专业服务，以科技创新赋能行业进步</p>
+            <div className="hero-btns">
+              <Link to="/products" className="btn btn-primary">了解更多产品</Link>
+              <Link to="/contact" className="btn btn-secondary">联系我们</Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="section features">
+        <div className="container">
+          <h2 className="section-title">为什么选择我们</h2>
+          <p className="section-subtitle">专业品质，值得信赖</p>
+          <div className="features-grid">
+            {features.map((item, index) => (
+              <div key={index} className="feature-card">
+                <div className="feature-icon">{item.icon}</div>
+                <h3>{item.title}</h3>
+                <p>{item.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Products Section */}
+      <section className="section products-preview">
+        <div className="container">
+          <h2 className="section-title">热门产品</h2>
+          <p className="section-subtitle">精选产品，品质保证</p>
+          <div className="products-grid">
+            {products.map((item, index) => (
+              <div key={index} className="product-card">
+                <div className="product-image">
+                  <img src={`/${item.image}`} alt={item.imageAlt} className="product-img" />
+                  <span className="product-tag">{item.tag}</span>
+                </div>
+                <div className="product-info">
+                  <h3>{item.name}</h3>
+                  <p>{item.desc}</p>
+                  <Link to="/products" className="product-link">查看详情 &rarr;</Link>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="section cta">
+        <div className="container">
+          <h2>准备好开始了吗？</h2>
+          <p>联系我们，获取更多信息和专业咨询</p>
+          <Link to="/contact" className="btn btn-primary">立即咨询</Link>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default Home

src/pages/Products.css

@@ -0,0 +1,164 @@
+.products {
+  padding-top: 70px;
+}
+
+.products-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px;
+}
+
+.product-card {
+  background: var(--white);
+  border-radius: 12px;
+  padding: 32px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.product-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
+
+.product-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.product-tag {
+  background-color: var(--primary);
+  color: var(--white);
+  padding: 4px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 4px;
+}
+
+.product-category {
+  font-size: 0.75rem;
+  color: var(--gray-500);
+}
+
+.product-card h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin-bottom: 12px;
+}
+
+.product-desc {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+  line-height: 1.6;
+  margin-bottom: 20px;
+  flex-grow: 1;
+}
+
+.product-features {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.feature-tag {
+  background-color: var(--gray-100);
+  color: var(--gray-700);
+  padding: 4px 12px;
+  font-size: 0.75rem;
+  border-radius: 4px;
+}
+
+.product-card .btn {
+  width: 100%;
+  text-align: center;
+}
+
+/* Service Section */
+.service-section {
+  background-color: var(--gray-50);
+}
+
+.service-steps {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 32px;
+}
+
+.service-step {
+  text-align: center;
+  padding: 40px 24px;
+  background: var(--white);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.service-step::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: -16px;
+  width: 32px;
+  height: 2px;
+  background-color: var(--gray-300);
+}
+
+.service-step:last-child::after {
+  display: none;
+}
+
+.step-number {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: var(--white);
+  font-size: 1.5rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin: 0 auto 20px;
+}
+
+.service-step h4 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin-bottom: 8px;
+}
+
+.service-step p {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+}
+
+@media (max-width: 992px) {
+  .products-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .service-steps {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .service-step::after {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .products-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .service-steps {
+    grid-template-columns: 1fr;
+  }
+}

src/pages/Products.jsx

@@ -0,0 +1,97 @@
+import { useEffect } from 'react'
+import './Products.css'
+
+function Products() {
+  useEffect(() => {
+    document.title = '产品中心 - 云端未来|云游戏|云手机|云直播产品'
+  }, [])
+  const products = [
+    {
+      name: 'FC-3580',
+      category: '企业/政务解决方案',
+      desc: '2U架构ARM集群服务器，80核心节点，支持IDC建设，帮助企业实现数字化管理，提升运营效率。',
+      features: ['高性能', 'IDC部署', '移动办公', 'API接口'],
+      tag: '热门推荐',
+    },
+    {
+      name: 'FC-3520',
+      category: '企业级智能体',
+      desc: '高性能桌面服务器，20核心节点，中小企业/工作室的推荐方案，提供个性化的服务体验，适用于多种场景。',
+      features: ['AI智能体', '矩阵社媒', '远程可控', 'API接口'],
+      tag: '热门推荐',
+    },
+    {
+      name: 'AI 个人算力终端',
+      category: '个人智能助理',
+      desc: '小型服务器，双核心架构，面向个体用户的智能体',
+      features: ['opc', '矩阵社媒', '游戏多开', 'API接口'],
+      tag: '热销中',
+    }
+  ]
+
+  return (
+    <div className="products">
+      <div className="page-header">
+        <div className="container">
+          <h1>产品中心</h1>
+          <p>精选产品，品质保证</p>
+        </div>
+      </div>
+
+      <section className="section">
+        <div className="container">
+          <div className="products-grid">
+            {products.map((item, index) => (
+              <div key={index} className="product-card">
+                <div className="product-header">
+                  <span className="product-tag">{item.tag}</span>
+                  <span className="product-category">{item.category}</span>
+                </div>
+                <h3>{item.name}</h3>
+                <p className="product-desc">{item.desc}</p>
+                <div className="product-features">
+                  {item.features.map((feature, idx) => (
+                    <span key={idx} className="feature-tag">{feature}</span>
+                  ))}
+                </div>
+                <button className="btn btn-primary">了解更多</button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Service Process */}
+      <section className="section service-section">
+        <div className="container">
+          <h2 className="section-title">服务流程</h2>
+          <p className="section-subtitle">专业服务，全程贴心</p>
+          <div className="service-steps">
+            <div className="service-step">
+              <div className="step-number">1</div>
+              <h4>需求咨询</h4>
+              <p>了解您的需求，提供专业建议</p>
+            </div>
+            <div className="service-step">
+              <div className="step-number">2</div>
+              <h4>方案定制</h4>
+              <p>根据需求定制专属解决方案</p>
+            </div>
+            <div className="service-step">
+              <div className="step-number">3</div>
+              <h4>实施部署</h4>
+              <p>专业团队高效部署实施</p>
+            </div>
+            <div className="service-step">
+              <div className="step-number">4</div>
+              <h4>售后服务</h4>
+              <p>持续服务，保障稳定运行</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default Products

vite.config.js

@@ -0,0 +1,52 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { promises as fs } from 'node:fs'
+import path from 'node:path'
+import { gzip } from 'node:zlib'
+import { promisify } from 'node:util'
+
+const gzipAsync = promisify(gzip)
+
+// Emit pre-compressed assets so Nginx can serve them with `gzip_static on`.
+function gzipAssets() {
+  const compressibleExtensions = new Set(['.html', '.css', '.js', '.mjs', '.json', '.svg', '.txt', '.xml'])
+
+  return {
+    name: 'gzip-assets',
+    apply: 'build',
+    async closeBundle() {
+      const outputDir = path.resolve(process.cwd(), 'dist')
+
+      async function compressDirectory(directory) {
+        const entries = await fs.readdir(directory, { withFileTypes: true })
+
+        await Promise.all(entries.map(async (entry) => {
+          const filePath = path.join(directory, entry.name)
+
+          if (entry.isDirectory()) {
+            await compressDirectory(filePath)
+            return
+          }
+
+          if (!compressibleExtensions.has(path.extname(entry.name).toLowerCase())) {
+            return
+          }
+
+          const source = await fs.readFile(filePath)
+          const compressed = await gzipAsync(source, { level: 9 })
+          await fs.writeFile(`${filePath}.gz`, compressed)
+        }))
+      }
+
+      await compressDirectory(outputDir)
+    },
+  }
+}
+
+export default defineConfig({
+  plugins: [react(), gzipAssets()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  },
+})