PageSourceSearch

https://arcrobo.com.sg/

html arcrobo.com.sg collected 2026-10-08 00:02:20 UTC 73,702 bytes, 1,864 lines download raw bytes

1<!doctype html>
2<html lang="zh-CN">
3
4<head>
5  <meta charset="UTF-8" />
6  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7  <title>Why Arcrobo - Arcrobo</title>
8  <link rel="shortcut icon" href="./images/favicon.jpg" type="image/x-icon" />
9  <!-- Tailwind CSS -->
10  <!-- 
10<script src="https://cdn.tailwindcss.com"></script>
10 -->
11  
11<script src="./js/3.4.17.js"></script>
11
12  <!-- Font Awesome -->
13  <!-- <link
14      rel="stylesheet"
15      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
16    /> -->
17  <link rel="stylesheet" href="./css/all.min.css" />
18  <!-- Three.js -->
19  <!-- 
19<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
19 -->
20  
20<script src="./js/three.min.js"></script>
20
21  <!-- GSAP 动画库 -->
22  <!-- 
22<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
22 -->
23  
23<script src="./js/gsap.min.js"></script>
23
24  <!-- 
24<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
24 -->
25  
25<script src="./js/ScrollTrigger.min.js"></script>
25
26  
26<script src="./js/fetchAPI.js"></script>
26
27  <link rel="stylesheet" href="./css/index.css" />
28
29  
29<script>
30    tailwind.config = {
31      theme: {
32        extend: {
33          colors: {
34            primary: {
35              50: "#e6f1ff",
36              100: "#cce3ff",
37              200: "#99c7ff",
38              300: "#66abff",
39              400: "#338fff",
40              500: "#0073ff",
41              600: "#005ccc",
42              700: "#004599",
43              800: "#002e66",
44              900: "#001733",
45            },
46            secondary: {
47              50: "#f3e6ff",
48              100: "#e7ccff",
49              200: "#cf99ff",
50              300: "#b766ff",
51              400: "#9f33ff",
52              500: "#8700ff",
53              600: "#6e00cc",
54              700: "#560099",
55              800: "#3d0066",
56              900: "#1f0033",
57            },
58          },
59          fontFamily: {
60            sans: ["Inter", "sans-serif"],
61          },
62        },
63      },
64    };
65  </script>
65
66
67  <style>
68    @import url("./css/css2?family=Inter:wght@300;400;500;600;700&display=swap");
69
70    /* 入场动画初始状态 */
71    .animate-in {
72      opacity: 0;
73      transform: translateY(50px);
74    }
75
76    .animate-in-left {
77      opacity: 0;
78      transform: translateX(-50px);
79    }
80
81    .animate-in-right {
82      opacity: 0;
83      transform: translateX(50px);
84    }
85
86    .animate-in-scale {
87      opacity: 0;
88      transform: scale(0.8);
89    }
90
91    .animate-in-fade {
92      opacity: 0;
93    }
94
95    html {
96      scroll-behavior: smooth;
97    }
98
99    body {
100      font-family: "Inter", sans-serif;
101      overflow-x: hidden;
102    }
103
104    #canvas-container {
105      position: fixed;
106      top: 0;
107      left: 0;
108      width: 100%;
109      height: 100%;
110      z-index: -1;
111    }
112
113    .gradient-text {
114      background: linear-gradient(90deg, #0073ff, #8700ff);
115      -webkit-background-clip: text;
116      background-clip: text;
117      color: transparent;
118    }
119
120    .card {
121      background: rgba(13, 17, 23, 0.7);
122      backdrop-filter: blur(10px);
123      border: 1px solid rgba(255, 255, 255, 0.1);
124      transition: all 0.3s ease;
125    }
126
127    .card:hover {
128      transform: translateY(-5px);
129      box-shadow: 0 10px 20px rgba(0, 115, 255, 0.2);
130      border: 1px solid rgba(0, 115, 255, 0.3);
131    }
132
133    .btn-primary {
134      background: linear-gradient(90deg, #0073ff, #8700ff);
135      transition: all 0.3s ease;
136      position: relative;
137      overflow: hidden;
138    }
139
140    .btn-primary:hover {
141      transform: translateY(-2px);
142      box-shadow: 0 5px 15px rgba(0, 115, 255, 0.4);
143    }
144
145    .btn-primary::after {
146      content: "";
147      position: absolute;
148      top: 50%;
149      left: 50%;
150      width: 0;
151      height: 0;
152      background: rgba(255, 255, 255, 0.2);
153      border-radius: 50%;
154      transform: translate(-50%, -50%);
155      transition:
156        width 0.6s,
157        height 0.6s;
158    }
159
160    .btn-primary:hover::after {
161      width: 300px;
162      height: 300px;
163    }
164
165    .nav-link {
166      position: relative;
167      transition: all 0.3s ease;
168    }
169
170    .nav-link::after {
171      content: "";
172      position: absolute;
173      bottom: -5px;
174      left: 0;
175      width: 0;
176      height: 2px;
177      background: linear-gradient(90deg, #0073ff, #8700ff);
178      transition: width 0.3s ease;
179    }
180
181    .nav-link-active::after {
182      width: 100%;
183    }
184
185    .nav-link:hover::after {
186      width: 100%;
187    }
188
189    .animate-float {
190      animation: float 6s ease-in-out infinite;
191    }
192
193    @keyframes float {
194      0% {
195        transform: translateY(0px);
196      }
197
198      50% {
199        transform: translateY(-20px);
200      }
201
202      100% {
203        transform: translateY(0px);
204      }
205    }
206
207    .glow {
208      box-shadow: 0 0 15px rgba(0, 115, 255, 0.5);
209    }
210
211    .tech-pattern {
212      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230073ff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
213    }
214
215    /* 响应式调整 */
216    @media (max-width: 768px) {
217      .hero-content {
218        padding-top: 6rem;
219        padding-bottom: 3rem;
220      }
221
222      .hero-title {
223        font-size: 2.5rem;
224      }
225    }
226
227    /* 加载动画 */
228    .loader {
229      position: fixed;
230      top: 0;
231      left: 0;
232      width: 100%;
233      height: 100%;
234      background: #0d1117;
235      display: flex;
236      justify-content: center;
237      align-items: center;
238      z-index: 9999;
239      transition:
240        opacity 0.5s ease,
241        visibility 0.5s ease;
242    }
243
244    .loader.hidden {
245      opacity: 0;
246      visibility: hidden;
247    }
248
249    .loader-circle {
250      width: 50px;
251      height: 50px;
252      border: 3px solid rgba(0, 115, 255, 0.3);
253      border-top: 3px solid #0073ff;
254      border-radius: 50%;
255      animation: spin 1s linear infinite;
256    }
257
258    @keyframes spin {
259      0% {
260        transform: rotate(0deg);
261      }
262
263      100% {
264        transform: rotate(360deg);
265      }
266    }
267  </style>
268</head>
269
270<body class="bg-gray-900 text-white">
271  <!-- 加载动画 -->
272  <div class="loader">
273    <div class="loader-circle"></div>
274  </div>
275
276  <!-- 3D背景容器 -->
277  <div id="canvas-container"></div>
278
279  <!-- 导航栏 -->
280  <nav class="fixed top-0 left-0 w-full z-50 bg-opacity-80 bg-gray-900 backdrop-blur-md border-b border-gray-800">
281    <div class="container mx-auto px-4 py-3">
282      <div class="flex justify-between items-center">
283        <!-- Logo -->
284        <div class="flex items-center">
285          <img src="./images/logo.png" alt="Arcrobo Logo" class="h-10 w-auto" />
286          <!-- <span class="ml-3 text-xl font-bold gradient-text hidden md:block"
287              >Arcrobo</span
288            > -->
289        </div>
290
291        <!-- 桌面导航链接 -->
292        <div class="hidden md:flex space-x-8">
293          <a href="./index.html" class="nav-link nav-link-active text-gray-300 hover:text-white">Why Arcrobo</a>
294          <!-- <a
295              href="./companyHistory.html"
296              class="nav-link text-gray-300 hover:text-white"
297              >公司历史</a
298            > -->
299          <a href="./product.html" class="nav-link text-gray-300 hover:text-white">Product</a>
300          <a href="/ourPartners.html" class="nav-link text-gray-300 hover:text-white">Our Partners</a>
301          <a href="./contact.html" class="nav-link text-gray-300 hover:text-white">Contact</a>
302        </div>
303
304        <!-- 移动端菜单按钮 -->
305        <div class="md:hidden">
306          <button id="menu-toggle" class="text-gray-300 hover:text-white focus:outline-none">
307            <i class="fas fa-bars text-xl"></i>
308          </button>
309        </div>
310      </div>
311
312      <!-- 移动端导航菜单 -->
313      <div id="mobile-menu"
314        class="md:hidden overflow-hidden transition-all duration-300 ease-in-out transform opacity-0 h-0 mt-4 pb-0">
315        <div class="py-2 space-y-2">
316          <a href="./index.html"
317            class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2">Why
318            Arcrobo</a>
319          <!-- <a
320              href="./companyHistory.html"
321              class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2"
322              >公司历史</a
323            > -->
324          <a href="./product.html"
325            class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2">Product</a>
326          <a href="./ourPartners.html"
327            class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2">Our
328            Partners</a>
329          <a href="./contact.html"
330            class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2">Contact</a>
331        </div>
332      </div>
333    </div>
334  </nav>
335
336  <!-- 英雄区域 -->
337  <section id="home" class="min-h-screen flex items-center pt-16 tech-pattern">
338    <div class="container mx-auto px-4 py-16">
339      <div class="flex flex-col md:flex-row items-center">
340        <!-- 左侧内容 -->
341        <div class="md:w-1/2 mb-10 md:mb-0 hero-content">
342          <h1 class="hero-title text-4xl md:text-6xl font-bold mb-6 leading-tight animate-in-left" data-delay="0.2">
343            <span class="gradient-text">Leading Technology,</span><br />
344            Creating the Future
345          </h1>
346          <p class="text-xl text-gray-300 mb-8 max-w-lg animate-in-left" data-delay="0.4">
347            We provide cutting-edge technology and solutions, empowering
348            drones, robots, and smart devices to create a smarter, more
349            efficient future world.
350          </p>
351          <div class="flex flex-wrap gap-4 animate-in-left" data-delay="0.6">
352            <a href="#products" class="btn-primary px-8 py-3 rounded-full font-medium text-white">
353              Explore Products
354            </a>
355            <a href="#contact"
356              class="px-8 py-3 rounded-full font-medium border border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white transition duration-300">
357              Contact Us
358            </a>
359          </div>
360        </div>
361
362        <!-- 右侧图片 -->
363        <div class="md:w-1/2 flex justify-center animate-in-right" data-delay="0.4">
364          <img src="./images/index/index1.jfif" alt="无人机与机器人"
365            class="w-full max-w-lg rounded-lg shadow-2xl animate-float glow" />
366        </div>
367      </div>
368    </div>
369  </section>
370
371  <!-- 产品展示区域 -->
372  <!-- <section id="products" class="py-20 bg-gray-900 relative overflow-hidden">
373      <div class="absolute inset-0 opacity-10">
374        <img
375          src="./images/indexBG1.jpg"
376          alt="背景"
377          class="w-full h-full object-cover"
378        />
379      </div>
380
381      <div class="container mx-auto px-4 relative z-10">
382        <div class="text-center mb-16 animate-in-fade" data-delay="0.2">
383          <h2 class="text-3xl md:text-5xl font-bold mb-4">
384            <span class="gradient-text">Cutting-Edge Tech</span> Products
385          </h2>
386          <p class="text-xl text-gray-300 max-w-3xl mx-auto">
387            We offer a diverse range of  products and solutions to meet the
388            intelligent device needs in various fields.
389          </p>
390        </div>
391
392        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
393          <div
394            class="card rounded-xl overflow-hidden animate-in-scale"
395            data-delay="0.4"
396          >
397            <div class="h-48 overflow-hidden">
398              <img
399                src="./images/indexBG2.jpg"
400                alt="高性能芯片"
401                class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
402              />
403            </div>
404            <div class="p-6">
405              <div class="flex items-center mb-4">
406                <div
407                  class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-3"
408                >
409                  <i class="fas fa-microchip text-white"></i>
410                </div>
411                <h3 class="text-xl font-semibold">高性能芯片</h3>
412              </div>
413              <p class="text-gray-400 mb-4">
414                采用先进工艺制程,提供卓越的计算能力和能效比,适用于各类高端智能设备。
415              </p>
416              <div class="flex justify-between items-center">
417                <span class="text-sm text-primary-400">了解更多</span>
418                <i class="fas fa-arrow-right text-primary-400"></i>
419              </div>
420            </div>
421          </div>
422
423          <div
424            class="card rounded-xl overflow-hidden animate-in-scale"
425            data-delay="0.6"
426          >
427            <div class="h-48 overflow-hidden">
428              <img
429                src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/e020aad2e38b4a03a75795f9589b2de3~tplv-a9rns2rl98-image.image?lk3s=8e244e95&rcl=2026012615543169494D2E1A884E172CBC&rrcfp=f06b921b&x-expires=1772006099&x-signature=HvDMGwclC%2F%2Fy6%2BlET4cGOic18gM%3D"
430                alt="无人机解决方案"
431                class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
432              />
433            </div>
434            <div class="p-6">
435              <div class="flex items-center mb-4">
436                <div
437                  class="w-10 h-10 rounded-full bg-secondary-500 flex items-center justify-center mr-3"
438                >
439                  <i class="fas fa-plane text-white"></i>
440                </div>
441                <h3 class="text-xl font-semibold">无人机解决方案</h3>
442              </div>
443              <p class="text-gray-400 mb-4">
444                专为无人机设计的芯片组,提供稳定的飞控系统、高清图像处理和智能避障功能。
445              </p>
446              <div class="flex justify-between items-center">
447                <span class="text-sm text-secondary-400">了解更多</span>
448                <i class="fas fa-arrow-right text-secondary-400"></i>
449              </div>
450            </div>
451          </div>
452
453          <div
454            class="card rounded-xl overflow-hidden animate-in-scale"
455            data-delay="0.8"
456          >
457            <div class="h-48 overflow-hidden">
458              <img
459                src="./images/indexBG1.jpg"
460                alt="智能机器人芯片"
461                class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
462              />
463            </div>
464            <div class="p-6">
465              <div class="flex items-center mb-4">
466                <div
467                  class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-3"
468                >
469                  <i class="fas fa-robot text-white"></i>
470                </div>
471                <h3 class="text-xl font-semibold">智能机器人芯片</h3>
472              </div>
473              <p class="text-gray-400 mb-4">
474                为各类机器人提供强大的AI计算能力,支持复杂环境感知、决策和执行任务。
475              </p>
476              <div class="flex justify-between items-center">
477                <span class="text-sm text-primary-400">了解更多</span>
478                <i class="fas fa-arrow-right text-primary-400"></i>
479              </div>
480            </div>
481          </div>
482        </div>
483
484        <div class="text-center mt-12">
485          <a
486            href="#contact"
487            class="btn-primary px-8 py-3 rounded-full font-medium text-white inline-block"
488          >
489            Consulting Solutions
490          </a>
491        </div>
492      </div>
493    </section> -->
494  <!-- 产品展示区域 -->
495  <section id="products" class="py-20 bg-gray-900 relative overflow-hidden">
496    <div class="absolute inset-0 opacity-10">
497      <img src="./images/indexBG1.jpg" alt="背景" class="w-full h-full object-cover" />
498    </div>
499
500    <div class="container mx-auto px-4 relative z-10">
501      <div class="text-center mb-16 animate-in-fade" data-delay="0.2">
502        <h2 class="text-3xl md:text-5xl font-bold mb-4">
503          <span class="gradient-text">Cutting-Edge Tech</span> Products
504        </h2>
505        <p class="text-xl text-gray-300 max-w-3xl mx-auto">
506          We offer a diverse range of products and solutions to meet the
507          intelligent device needs in various fields.
508        </p>
509      </div>
510
511      <!-- 产品卡片网格容器(清空固定卡片,留空用于JS渲染) -->
512      <div id="productGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
513        <!-- 动态内容将在这里插入 -->
514      </div>
515
516      <div class="text-center mt-12">
517        <a href="#contact" class="btn-primary px-8 py-3 rounded-full font-medium text-white inline-block">
518          Consulting Solutions
519        </a>
520      </div>
521    </div>
522  </section>
523
524  <!-- Our Solutions Design Process 模块 -->
525  <section id="process" class="py-20 relative overflow-hidden">
526    <div class="absolute inset-0 opacity-5">
527      <div class="tech-pattern w-full h-full"></div>
528    </div>
529
530    <div class="container mx-auto px-4 relative z-10">
531      <div class="text-center mb-16 animate-in-fade" data-delay="0.2">
532        <h2 class="text-3xl md:text-5xl font-bold mb-4">
533          Our Solutions <span class="gradient-text">Design Process</span>
534        </h2>
535        <p class="text-xl text-gray-300 max-w-3xl mx-auto">
536          We adopt a systematic design process to ensure we provide our
537          clients with the highest quality solutions.
538        </p>
539      </div>
540
541      <!-- 时间轴流程 -->
542      <div class="relative max-w-4xl mx-auto mt-12">
543        <!-- 中央时间轴线 -->
544        <div
545          class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-primary-500 to-secondary-500 z-0 hidden md:block">
546        </div>
547
548        <!-- 时间轴步骤 -->
549        <div class="space-y-16 relative z-10">
550          <!-- 步骤1: Idea -->
551          <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.2">
552            <!-- 左侧内容 -->
553            <div class="w-full md:w-1/2 md:pr-12 text-center md:text-right mb-4 md:mb-0">
554              <h3 class="text-xl font-semibold text-white mb-2">01. Idea</h3>
555              <!-- <p class="text-gray-300 mb-4">
556                  创意构思与需求收集,确定项目目标和初步方向
557                </p> -->
558              <div class="card rounded-xl overflow-hidden">
559                <img src="./images/index/our1.png" alt="Idea"
560                  class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" />
561              </div>
562            </div>
563
564            <!-- 中央节点 -->
565            <div class="z-20 my-4 md:my-0 hidden md:block">
566              <div
567                class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30">
568                <i class="fas fa-lightbulb"></i>
569              </div>
570            </div>
571
572            <!-- 右侧空白 -->
573            <div class="w-1/2 pl-12"></div>
574          </div>
575
576          <!-- 步骤2: Design Concept -->
577          <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.3">
578            <!-- 左侧空白 -->
579            <div class="w-1/2 pr-12"></div>
580
581            <!-- 中央节点 -->
582            <div class="z-20 my-4 md:my-0 hidden md:block">
583              <div
584                class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30">
585                <i class="fas fa-pencil-ruler"></i>
586              </div>
587            </div>
588
589            <!-- 右侧内容 -->
590            <div class="w-full md:w-1/2 md:pl-12 text-center md:text-left">
591              <h3 class="text-xl font-semibold text-white mb-2">
592                02. Design Concept
593              </h3>
594              <!-- <p class="text-gray-300 mb-4">
595                  创意构思与需求收集,确定项目目标和初步方向
596                </p> -->
597              <div class="card rounded-xl overflow-hidden">
598                <img src="./images/index/our2.png" alt="Idea"
599                  class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" />
600              </div>
601            </div>
602          </div>
603
604          <!-- 步骤3: System Design -->
605          <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.4">
606            <!-- 左侧内容 -->
607            <div class="w-full md:w-1/2 md:pr-12 text-center md:text-right mb-4 md:mb-0">
608              <h3 class="text-xl font-semibold text-white mb-2">
609                03. System Design
610              </h3>
611              <!-- <p class="text-gray-300 mb-4">
612                  创意构思与需求收集,确定项目目标和初步方向
613                </p> -->
614              <div class="card rounded-xl overflow-hidden">
615                <img src="./images/index/our3.png" alt="System Design"
616                  class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" />
617              </div>
618            </div>
619
620            <!-- 中央节点 手机端隐藏-->
621            <div class="z-20 my-4 md:my-0 hidden md:block">
622              <div
623                class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30">
624                <i class="fas fa-sitemap"></i>
625              </div>
626            </div>
627
628            <!-- 右侧空白 -->
629            <div class="w-1/2 pl-12"></div>
630          </div>
631
632          <!-- 步骤4: Hardware/Software Design -->
633          <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.5">
634            <!-- 左侧空白 -->
635            <div class="w-1/2 pr-12"></div>
636
637            <!-- 中央节点 -->
638            <div class="z-20 my-4 md:my-0 hidden md:block">
639              <div
640                class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30">
641                <i class="fas fa-microchip"></i>
642              </div>
643            </div>
644
645            <!-- 右侧内容 -->
646            <div class="w-full md:w-1/2 md:pl-12 text-center md:text-left">
647              <h3 class="text-xl font-semibold text-white mb-2">
648                04. Hardware/Software Design
649              </h3>
650              <!-- <p class="text-gray-300 mb-4">
651                  创意构思与需求收集,确定项目目标和初步方向
652                </p> -->
653              <div class="card rounded-xl overflow-hidden">
654                <img src="./images/index/our4.png" alt="Hardware/Software Design"
655                  class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" />
656              </div>
657            </div>
658          </div>
659
660          <!-- 步骤5: Circuit Board Production -->
661          <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.6">
662            <!-- 左侧内容 -->
663            <div class="w-full md:w-1/2 md:pr-12 text-center md:text-right mb-4 md:mb-0">
664              <h3 class="text-xl font-semibold text-white mb-2">
665                05. Circuit Board Production
666              </h3>
667              <!-- <p class="text-gray-300 mb-4">
668                  创意构思与需求收集,确定项目目标和初步方向
669                </p> -->
670              <div class="card rounded-xl overflow-hidden">
671                <img src="./images/index/our5.png"
672                  class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" />
673              </div>
674            </div>
675
676            <!-- 中央节点 -->
677            <div class="z-20 my-4 md:my-0 hidden md:block">
678              <div
679                class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30">
680                <i class="fas fa-book"></i>
681              </div>
682            </div>
683
684            <!-- 右侧空白 -->
685            <div class="w-1/2 pl-12"></div>
686          </div>
687
688          <!-- 步骤6: Verification/Certification -->
689          <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.7">
690            <!-- 左侧空白 -->
691            <div class="w-1/2 pr-12"></div>
692
693            <!-- 中央节点 -->
694            <div class="z-20 my-4 md:my-0 hidden md:block">
695              <div
696                class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30">
697                <i class="fas fa-check-circle"></i>
698              </div>
699            </div>
700
701            <!-- 右侧内容 -->
702            <div class="w-full md:w-1/2 md:pl-12 text-center md:text-left">
703              <h3 class="text-xl font-semibold text-white mb-2">
704                06. Verification/Certification
705              </h3>
706              <!-- <p class="text-gray-300 mb-4">
707                  创意构思与需求收集,确定项目目标和初步方向
708                </p> -->
709              <div class="card rounded-xl overflow-hidden">
710                <img src="./images/index/our6.png" alt="Verification/Certification"
711                  class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" />
712              </div>
713            </div>
714          </div>
715
716          <!-- 步骤7: Mass Production -->
717          <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.8">
718            <!-- 左侧内容 -->
719            <div class="w-full md:w-1/2 md:pr-12 text-center md:text-right mb-4 md:mb-0">
720              <h3 class="text-xl font-semibold text-white mb-2">
721                07. Mass Production
722              </h3>
723              <!-- <p class="text-gray-300 mb-4">
724                  创意构思与需求收集,确定项目目标和初步方向
725                </p> -->
726              <div class="card rounded-xl overflow-hidden">
727                <img src="./images/index/our7.png" alt="Mass Production"
728                  class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" />
729              </div>
730            </div>
731
732            <!-- 中央节点 -->
733            <div class="z-20 my-4 md:my-0 hidden md:block">
734              <div
735                class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30">
736                <i class="fas fa-industry"></i>
737              </div>
738            </div>
739
740            <!-- 右侧空白 -->
741            <div class="w-1/2 pl-12"></div>
742          </div>
743        </div>
744      </div>
745
746      <!-- 流程优势 -->
747      <div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8">
748        <!-- 优势1 -->
749        <div class="card p-8 rounded-xl animate-in-left" data-delay="1.2">
750          <div class="w-12 h-12 mb-6 rounded-lg bg-primary-500 flex items-center justify-center">
751            <i class="fas fa-cogs text-2xl text-white"></i>
752          </div>
753          <h3 class="text-xl font-semibold mb-4 text-white">
754            Standardized process
755          </h3>
756          <p class="text-gray-300">
757            Adopting industry-standard development processes to ensure the
758            project is completed on time, with high quality, and to the
759            required quantity
760          </p>
761        </div>
762
763        <!-- 优势2 -->
764        <div class="card p-8 rounded-xl animate-in" data-delay="1.4">
765          <div class="w-12 h-12 mb-6 rounded-lg bg-primary-500 flex items-center justify-center">
766            <i class="fas fa-users text-2xl text-white"></i>
767          </div>
768          <h3 class="text-xl font-semibold mb-4 text-white">
769            Professional team
770          </h3>
771          <p class="text-gray-300">
772            An experienced development team capable of tackling various
773            complex technical challenges
774          </p>
775        </div>
776
777        <!-- 优势3 -->
778        <div class="card p-8 rounded-xl animate-in-right" data-delay="1.6">
779          <div class="w-12 h-12 mb-6 rounded-lg bg-primary-500 flex items-center justify-center">
780            <i class="fas fa-chart-line text-2xl text-white"></i>
781          </div>
782          <h3 class="text-xl font-semibold mb-4 text-white">
783            Continuous improvement
784          </h3>
785          <p class="text-gray-300">
786            Providing continuous technical support and performance
787            optimization services after project completion
788          </p>
789        </div>
790      </div>
791
792      <!-- 联系我们按钮 -->
793      <div class="text-center mt-16 animate-in-fade" data-delay="1.8">
794        <a href="#contact" class="btn-primary inline-block px-8 py-4 rounded-lg font-medium text-white">
795          Start your project <i class="fas fa-arrow-right ml-2"></i>
796        </a>
797      </div>
798    </div>
799  </section>
800
801  <!-- Design Capability 模块 -->
802  <section id="capability" class="py-20 bg-gray-900 relative overflow-hidden">
803    <div class="absolute inset-0 opacity-5">
804      <div class="tech-pattern w-full h-full"></div>
805    </div>
806
807    <div class="container mx-auto px-4 relative z-10">
808      <div class="text-center mb-16 animate-in-fade" data-delay="0.2">
809        <h2 class="text-3xl md:text-5xl font-bold mb-4">
810          <span class="gradient-text">Design Capability</span>
811        </h2>
812        <p class="text-xl text-gray-300 max-w-3xl mx-auto">
813          We possess comprehensive design capabilities, covering everything
814          from hardware to software, and from concept to mass production, to
815          provide you with complete solutions.
816        </p>
817      </div>
818
819      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
820        <!-- Engineering Services -->
821        <div
822          class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in"
823          data-delay="0.1">
824          <div class="flex items-start mb-4">
825            <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4">
826              <img src="./images/index/design1.png" alt="硬件设计" class="w-10 h-10 object-contain" />
827            </div>
828            <div>
829              <h3 class="text-xl font-semibold text-white mb-1">
830                Engineering Services
831              </h3>
832              <!-- <p class="text-gray-400 text-sm">XXXXX</p> -->
833            </div>
834          </div>
835          <ul class="space-y-2 text-gray-300">
836            <li class="flex items-center">
837              <i class="fas fa-check text-primary-500 mr-2"></i>
838              <span>Turn-key Embedded System Design</span>
839            </li>
840            <li class="flex items-center">
841              <i class="fas fa-check text-primary-500 mr-2"></i>
842              <span>ARM-based MCU/MPU/DSP/FPGA Developmen</span>
843            </li>
844            <li class="flex items-center">
845              <i class="fas fa-check text-primary-500 mr-2"></i>
846              <span>PWR /ETH /CAN /EMC /WiFi /BT /MIPI /LVDS /TP Module and
847                Accessories</span>
848            </li>
849            <li class="flex items-center">
850              <i class="fas fa-check text-primary-500 mr-2"></i>
851              <span>SoMs (System on Module)</span>
852            </li>
853            <li class="flex items-center">
854              <i class="fas fa-check text-primary-500 mr-2"></i>
855              <span>Customized EVKs (Evaluation Kits)</span>
856            </li>
857          </ul>
858        </div>
859
860        <!-- PCB Layout -->
861        <div
862          class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in"
863          data-delay="0.2">
864          <div class="flex items-start mb-4">
865            <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4">
866              <img src="./images/index/design2.png" alt="机械设计" class="w-10 h-10 object-contain" />
867            </div>
868            <div>
869              <h3 class="text-xl font-semibold text-white mb-1">
870                PCB Layout
871              </h3>
872              <!-- <p class="text-gray-400 text-sm">XXXXXX</p> -->
873            </div>
874          </div>
875          <ul class="space-y-2 text-gray-300">
876            <li class="flex items-center">
877              <i class="fas fa-check text-primary-500 mr-2"></i>
878              <span>Custom PCB Design (High-Speed, High-Density, Multi-Layer, and
879                Flexible Boards)</span>
880            </li>
881            <li class="flex items-center">
882              <i class="fas fa-check text-primary-500 mr-2"></i>
883              <span>Design for Manufacturability(DFM) & Compliance</span>
884            </li>
885            <li class="flex items-center">
886              <i class="fas fa-check text-primary-500 mr-2"></i>
887              <span>Thermal Management & Signal Integrity Analysis</span>
888            </li>
889            <li class="flex items-center">
890              <i class="fas fa-check text-primary-500 mr-2"></i>
891              <span>Rapid Prototyping & Testing</span>
892            </li>
893            <li class="flex items-center">
894              <i class="fas fa-check text-primary-500 mr-2"></i>
895              <span>Collaborative Design Process</span>
896            </li>
897          </ul>
898        </div>
899
900        <!-- Mechanical Design -->
901        <div
902          class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in"
903          data-delay="0.3">
904          <div class="flex items-start mb-4">
905            <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4">
906              <img src="./images/index/design3.png" alt="电气设计" class="w-10 h-10 object-contain" />
907            </div>
908            <div>
909              <h3 class="text-xl font-semibold text-white mb-1">
910                Mechanical Design
911              </h3>
912              <!-- <p class="text-gray-400 text-sm">XXXXXX</p> -->
913            </div>
914          </div>
915          <ul class="space-y-2 text-gray-300">
916            <li class="flex items-center">
917              <i class="fas fa-check text-primary-500 mr-2"></i>
918              <span>ID/Mechanical Design</span>
919            </li>
920            <li class="flex items-center">
921              <i class="fas fa-check text-primary-500 mr-2"></i>
922              <span>Thermal Simulations/Cooling/Packaging solutions</span>
923            </li>
924            <li class="flex items-center">
925              <i class="fas fa-check text-primary-500 mr-2"></i>
926              <span>Accessory design (power supply, cables connector...)</span>
927            </li>
928            <li class="flex items-center">
929              <i class="fas fa-check text-primary-500 mr-2"></i>
930              <span>Molding Design</span>
931            </li>
932          </ul>
933        </div>
934
935        <!-- Software Design -->
936        <div
937          class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in"
938          data-delay="0.4">
939          <div class="flex items-start mb-4">
940            <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4">
941              <img src="./images/index/design4.png" alt="仿真分析" class="w-10 h-10 object-contain" />
942            </div>
943            <div>
944              <h3 class="text-xl font-semibold text-white mb-1">
945                Software Design
946              </h3>
947              <!-- <p class="text-gray-400 text-sm">XXXXX</p> -->
948            </div>
949          </div>
950          <ul class="space-y-2 text-gray-300">
951            <li class="flex items-center">
952              <i class="fas fa-check text-primary-500 mr-2"></i>
953              <span>Edge Computing</span>
954            </li>
955            <li class="flex items-center">
956              <i class="fas fa-check text-primary-500 mr-2"></i>
957              <span>MCU /RTOS /Linux /Android /IOs system</span>
958            </li>
959            <li class="flex items-center">
960              <i class="fas fa-check text-primary-500 mr-2"></i>
961              <span>Embedded software design</span>
962            </li>
963            <li class="flex items-center">
964              <i class="fas fa-check text-primary-500 mr-2"></i>
965              <span>Saas Cloud Platform Server</span>
966            </li>
967            <li class="flex items-center">
968              <i class="fas fa-check text-primary-500 mr-2"></i>
969              <span>IOT Architecture and software & Al software and model
970                design</span>
971            </li>
972          </ul>
973        </div>
974
975        <!-- Compliance Testing -->
976        <div
977          class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in"
978          data-delay="0.5">
979          <div class="flex items-start mb-4">
980            <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4">
981              <img src="./images/index/design5.png" alt="认证测试" class="w-10 h-10 object-contain" />
982            </div>
983            <div>
984              <h3 class="text-xl font-semibold text-white mb-1">
985                Compliance Testing
986              </h3>
987              <!-- <p class="text-gray-400 text-sm">XXXXXX</p> -->
988            </div>
989          </div>
990          <ul class="space-y-2 text-gray-300">
991            <li class="flex items-center">
992              <i class="fas fa-check text-primary-500 mr-2"></i>
993              <span>Regulatory Compliance:CE, FCC, 3C,UL certification</span>
994            </li>
995            <li class="flex items-center">
996              <i class="fas fa-check text-primary-500 mr-2"></i>
997              <span>Pre-Scan & Environmental Testing: EMC, ESD,themmal,
998                vibration; RoHS & REACH compliant</span>
999            </li>
1000            <li class="flex items-center">
1001              <i class="fas fa-check text-primary-500 mr-2"></i>
1002              <span>Electrical & Functional Testing: Performance verification and
1003                reliability assessments</span>
1004            </li>
1005            <li class="flex items-center">
1006              <i class="fas fa-check text-primary-500 mr-2"></i>
1007              <span>Quality Assurance:Rigorous QA protocols and comprehensive
1008                reporting</span>
1009            </li>
1010          </ul>
1011        </div>
1012
1013        <!-- RMA Services -->
1014        <div
1015          class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in"
1016          data-delay="0.6">
1017          <div class="flex items-start mb-4">
1018            <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4">
1019              <img src="./images/index/design6.png" alt="认证测试" class="w-10 h-10 object-contain" />
1020            </div>
1021            <div>
1022              <h3 class="text-xl font-semibold text-white mb-1">
1023                RMA Services
1024              </h3>
1025              <!-- <p class="text-gray-400 text-sm">XXXXX</p> -->
1026            </div>
1027          </div>
1028          <ul class="space-y-2 text-gray-300">
1029            <li class="flex items-center">
1030              <i class="fas fa-check text-primary-500 mr-2"></i>
1031              <span>Custom PCB Design (High-Speed, High-Density, Multi-Layer, and
1032                Flexible Boards)</span>
1033            </li>
1034            <li class="flex items-center">
1035              <i class="fas fa-check text-primary-500 mr-2"></i>
1036              <span>Design for Manufacturability (DFM) &Compliance</span>
1037            </li>
1038            <li class="flex items-center">
1039              <i class="fas fa-check text-primary-500 mr-2"></i>
1040              <span>Thermal Management & Signal Integrity Analysis</span>
1041            </li>
1042          </ul>
1043        </div>
1044      </div>
1045    </div>
1046  </section>
1047
1048  <!-- 关于我们 -->
1049  <section id="about" class="py-20 bg-gray-800 relative">
1050    <div class="container mx-auto px-4">
1051      <div class="text-center mb-16 animate-in-fade" data-delay="0.2">
1052        <h2 class="text-3xl md:text-5xl font-bold mb-4">
1053          About <span class="gradient-text">Arcrobo</span>
1054        </h2>
1055        <!-- <p class="text-xl text-gray-300 max-w-3xl mx-auto">
1056            We are a high-tech enterprise specializing in  research and
1057            development, dedicated to providing core computing power support for
1058            intelligent devices
1059          </p> -->
1060      </div>
1061
1062      <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
1063        <div class="animate-in-left" data-delay="0.4">
1064          <!-- <h3 class="text-2xl font-semibold mb-6 gradient-text">
1065              Our Mission
1066            </h3> -->
1067          <p class="text-gray-300 mb-6 text-lg">
1068            <!-- Through innovative technology, we empower intelligent
1069              devices, driving the development of Artificial Intelligence, the
1070              Internet of Things, and automation, thereby creating a smarter and
1071              more convenient lifestyle for humanity. -->
1072          </p>
1073
1074          <!-- <h3 class="text-2xl font-semibold mb-6 gradient-text">
1075              Core Advantages
1076            </h3> -->
1077          <div class="space-y-4">
1078            <div class="flex items-start animate-in-left" data-delay="0.6">
1079              <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
1080                <i class="fas fa-lightbulb text-white"></i>
1081              </div>
1082              <p class="text-gray-300">
1083
1084                Arcrobo is a leading Edge AI solution provider with deep expertise in advanced embedded computing
1085                architectures. We work closely with global semiconductor leaders across AI MCUs, FPGAs, and
1086                heterogeneous computing platforms, enabling next-generation intelligent applications at the edge.
1087              </p>
1088            </div>
1089            <div class="flex items-start animate-in-left" data-delay="1.0">
1090              <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
1091                <i class="fas fa-lightbulb text-white"></i>
1092              </div>
1093              <p class="text-gray-300">
1094
1095                Our core capabilities span the entire technology stack, including custom hardware design, low-level
1096                firmware and driver development, AI algorithm integration, and system-level software optimization. By
1097                tightly coupling hardware and software design, Arcrobo delivers high-performance, power-efficient, and
1098                scalable Edge AI platforms tailored to complex real-world applications.
1099              </p>
1100            </div>
1101            <div class="flex items-start animate-in-left" data-delay="1.0">
1102              <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
1103                <i class="fas fa-lightbulb text-white"></i>
1104              </div>
1105              <p class="text-gray-300">
1106
1107                In addition, Arcrobo provides end-to-end engineering and manufacturing support, from prototype
1108                development and validation to mass production and global deployment. Our vertically integrated approach
1109                allows customers to accelerate innovation while reducing development risk and time-to-market.
1110              </p>
1111            </div>
1112          </div>
1113        </div>
1114
1115        <div class="relative animate-in-right" data-delay="0.6">
1116          <div class="absolute -top-10 -left-10 w-40 h-40 bg-primary-500 rounded-full filter blur-3xl opacity-20"></div>
1117          <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-secondary-500 rounded-full filter blur-3xl opacity-20">
1118          </div>
1119
1120          <div class="card p-8 rounded-xl relative z-10">
1121            <h3 class="text-2xl font-semibold mb-6 gradient-text">
1122              Company Data
1123            </h3>
1124
1125            <div class="grid grid-cols-2 gap-6">
1126              <div class="text-center animate-in-scale" data-delay="0.8">
1127                <div class="text-4xl font-bold text-primary-400 mb-2 counter" data-target="50">
1128                  50
1129                </div>
1130                <p class="text-gray-400">R&D Patents</p>
1131              </div>
1132              <div class="text-center animate-in-scale" data-delay="1.0">
1133                <div class="text-4xl font-bold text-secondary-400 mb-2 counter" data-target="200">
1134                  200
1135                </div>
1136                <p class="text-gray-400">Global Customers</p>
1137              </div>
1138              <div class="text-center animate-in-scale" data-delay="1.2">
1139                <div class="text-4xl font-bold text-primary-400 mb-2 counter" data-target="150">
1140                  150
1141                </div>
1142                <p class="text-gray-400">R&D Staff</p>
1143              </div>
1144              <div class="text-center animate-in-scale" data-delay="1.4">
1145                <div class="text-4xl font-bold text-secondary-400 mb-2 counter" data-target="98">
1146                  98
1147                </div>
1148                <p class="text-gray-400">Customer Satisfaction %</p>
1149              </div>
1150            </div>
1151          </div>
1152        </div>
1153      </div>
1154    </div>
1155  </section>
1156
1157  <!-- 联系我们 -->
1158  <section id="contact" class="py-20 bg-gray-900 relative overflow-hidden">
1159    <div class="absolute inset-0 opacity-10">
1160      <img src="./images/indexBG2.jpg" alt="背景" class="w-full h-full object-cover" />
1161    </div>
1162
1163    <div class="container mx-auto px-4 relative z-10">
1164      <div class="text-center mb-16 animate-in-fade" data-delay="0.2">
1165        <h2 class="text-3xl md:text-5xl font-bold mb-4">
1166          Contact <span class="gradient-text">Us</span>
1167        </h2>
1168        <p class="text-xl text-gray-300 max-w-3xl mx-auto">
1169          Whatever your questions or needs, our team is always ready to
1170          support you
1171        </p>
1172      </div>
1173
1174      <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
1175        <!-- 联系表单 -->
1176        <div class="card p-8 rounded-xl animate-in-left" data-delay="0.4">
1177          <h3 class="text-2xl font-semibold mb-6 gradient-text">
1178            Send Message
1179          </h3>
1180
1181          <form id="contact-form" class="space-y-6">
1182            <div>
1183              <label for="name" class="block text-gray-300 mb-2">Name</label>
1184              <input type="text" id="name"
1185                class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" />
1186            </div>
1187
1188            <div>
1189              <label for="email" class="block text-gray-300 mb-2">Email</label>
1190              <input type="email" id="email" required
1191                class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" />
1192            </div>
1193
1194            <div>
1195              <label for="company" class="block text-gray-300 mb-2">Company</label>
1196              <input type="company" id="company"
1197                class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" />
1198            </div>
1199
1200            <div>
1201              <label for="phone" class="block text-gray-300 mb-2">Phone</label>
1202              <input type="text" id="phone" required
1203                class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" />
1204            </div>
1205
1206            <div class="form-group">
1207              <label for="product" class="block text-gray-300 mb-2">
1208                <!-- 产品 -->
1209                Product
1210              </label>
1211              <select id="product"
1212                class="form-input w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none text-white appearance-none">
1213                <option value="" disabled selected>
1214                  <!-- 请选择产品 -->
1215                  Please select a product
1216                </option>
1217                <!-- <option value="sales">
1218                    Sales product
1219                  </option>
1220                  <option value="tech">
1221                    Technical Support
1222                  </option>
1223                  <option value="hr">
1224                    Human Resources
1225                  </option>
1226                  <option value="marketing">
1227                    Marketing product
1228                  </option>
1229                  <option value="other">
1230                    Other
1231                  </option> -->
1232              </select>
1233            </div>
1234
1235            <div>
1236              <label for="message" class="block text-gray-300 mb-2">Message</label>
1237              <textarea id="message" rows="5"
1238                class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white"></textarea>
1239            </div>
1240
1241            <div class="flex items-center">
1242              <input type="checkbox" id="privacy"
1243                class="w-4 h-4 text-primary-500 border-gray-700 rounded focus:ring-primary-500" required />
1244              <label for="privacy" class="ml-2 text-gray-300">I agree to Arcrobo's<a href="#"
1245                  class="text-primary-400 hover:underline">Privacy Policy</a></label>
1246            </div>
1247
1248            <button type="submit" class="btn-primary w-full py-3 rounded-lg font-medium text-white">
1249              Send Message
1250            </button>
1251          </form>
1252        </div>
1253
1254        <!-- 联系信息 -->
1255        <div>
1256          <div class="card p-8 rounded-xl mb-8 animate-in-right" data-delay="0.6">
1257            <h3 class="text-2xl font-semibold mb-6 gradient-text">
1258              Contact Us
1259            </h3>
1260
1261            <div class="space-y-6">
1262              <div class="flex items-start animate-in-right" data-delay="1.0">
1263                <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-4 flex-shrink-0">
1264                  <i class="fas fa-map-marker-alt text-white"></i>
1265                </div>
1266                <div>
1267                  <h4 class="font-semibold text-white mb-1">Add</h4>
1268                  <p class="text-gray-300">
1269                    17 Tractor Road Singapore 627975
1270                  </p>
1271                </div>
1272              </div>
1273
1274              <div class="flex items-start animate-in-right" data-delay="1.2">
1275                <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-4 flex-shrink-0">
1276                  <i class="fas fa-phone-alt text-white"></i>
1277                </div>
1278                <div>
1279                  <h4 class="font-semibold text-white mb-1">Tel</h4>
1280                  <p class="text-gray-300">(+ 65)8153 3313</p>
1281                </div>
1282              </div>
1283
1284              <div class="flex items-start animate-in-right" data-delay="1.4">
1285                <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-4 flex-shrink-0">
1286                  <i class="fas fa-envelope text-white"></i>
1287                </div>
1288                <div>
1289                  <h4 class="font-semibold text-white mb-1">Email</h4>
1290                  <p class="text-gray-300">[email protected]</p>
1291                </div>
1292              </div>
1293            </div>
1294          </div>
1295
1296          <!-- AI助手 -->
1297          <div class="card p-8 rounded-xl animate-in-right" data-delay="0.8">
1298            <h3 class="text-2xl font-semibold mb-6 gradient-text">
1299              AI Smart Assistant
1300            </h3>
1301
1302            <div class="bg-gray-800 rounded-lg p-4 mb-4 h-64 overflow-y-auto" id="chat-container">
1303              <div class="flex mb-4">
1304                <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-2 flex-shrink-0">
1305                  <i class="fas fa-robot text-white text-sm"></i>
1306                </div>
1307                <div class="bg-gray-700 rounded-lg py-2 px-4 max-w-[80%]">
1308                  <p class="text-gray-300">
1309                    Hello! I am Arcrobo's AI assistant, how can I help you?
1310                  </p>
1311                </div>
1312              </div>
1313            </div>
1314
1315            <div class="flex">
1316              <input type="text" id="ai-input"
1317                class="flex-1 px-4 py-3 bg-gray-800 border border-gray-700 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white"
1318                placeholder="Enter your question..." />
1319              <button id="ai-send" class="btn-primary px-6 py-3 rounded-r-lg">
1320                <i class="fas fa-paper-plane"></i>
1321              </button>
1322            </div>
1323          </div>
1324        </div>
1325      </div>
1326    </div>
1327  </section>
1328
1329  <!-- 页脚 -->
1330  <footer class="bg-gray-900 border-t border-gray-800 py-12">
1331    <div class="container mx-auto px-4">
1332      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
1333        <!-- Logo和简介 -->
1334        <div class="md:col-span-1">
1335          <div class="flex items-center mb-4">
1336            <img src="./images/logo.png" alt="Arcrobo Logo" class="h-4 w-auto" />
1337            <span class="ml-2 text-lg font-bold gradient-text">Arcrobo</span>
1338          </div>
1339          <p class="text-gray-400 mb-4">
1340            Leading Technology,creating the Future
1341          </p>
1342          <div class="flex space-x-4">
1343           
1344          </div>
1345        </div>
1346
1347        <!-- 快速链接 -->
1348        <div>
1349          <h4 class="text-lg font-semibold mb-4 text-white">Quick Link</h4>
1350          <ul class="space-y-2">
1351            <li>
1352              <a href="./index.html" class="text-gray-400 hover:text-primary-500">Homepage</a>
1353            </li>
1354            <li>
1355              <a href="./product.html" class="text-gray-400 hover:text-primary-500">Product</a>
1356            </li>
1357            <li>
1358              <a href="./ourPartners.html" class="text-gray-400 hover:text-primary-500">About us</a>
1359            </li>
1360            <li>
1361              <a href="./contact.html" class="text-gray-400 hover:text-primary-500">Contact us</a>
1362            </li>
1363          </ul>
1364        </div>
1365
1366        <!-- 产品 -->
1367        <div>
1368          <h4 class="text-lg font-semibold mb-4 text-white">Product</h4>
1369          <ul class="space-y-2">
1370            <li>
1371              <a href="#" class="text-gray-400 hover:text-primary-500">High-Performance Product</a>
1372            </li>
1373            <li>
1374              <a href="#" class="text-gray-400 hover:text-primary-500">Drone Solutions</a>
1375            </li>
1376            <li>
1377              <a href="#" class="text-gray-400 hover:text-primary-500">Smart Robot Product</a>
1378            </li>
1379            <li>
1380              <a href="#" class="text-gray-400 hover:text-primary-500">Customized Service</a>
1381            </li>
1382          </ul>
1383        </div>
1384
1385        <!-- 订阅 -->
1386        <div>
1387          <h4 class="text-lg font-semibold mb-4 text-white">
1388            Subscribe to us
1389          </h4>
1390          <p class="text-gray-400 mb-4">
1391            Subscribe to our newsletter to get the latest product and
1392            technology news
1393          </p>
1394          <form id="footerForm" class="flex">
1395            <input style="width: 100%" type="email" id="footerEmail" required placeholder="Your Email"
1396              class="flex-1 px-4 py-2 bg-gray-800 border border-gray-700 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" />
1397            <button type="submit" class="btn-primary px-4 py-2 rounded-r-lg">
1398              <i class="fas fa-arrow-right"></i>
1399            </button>
1400          </form>
1401        </div>
1402      </div>
1403
1404      <div class="border-t border-gray-800 mt-12 pt-8 text-center">
1405        <p class="text-gray-400">&copy; 2026 Arcrobo.All rights reserved.</p>
1406      </div>
1407    </div>
1408  </footer>
1409  
1409<script src="./js/footer.js"></script>
1409
1410
1411  
1411<script src="./js/index.js"></script>
1411
1412  
1412<script src="./js/qaDatabase.js"></script>
1412
1413  
1413<script>
1414    // 页面加载完成后执行
1415    document.addEventListener("DOMContentLoaded", function () {
1416      // 加载动画
1417      setTimeout(function () {
1418        document.querySelector(".loader").classList.add("hidden");
1419
1420        // 初始化入场动画
1421        initScrollAnimations();
1422      }, 1500);
1423
1424      // 入场动画函数
1425      function initScrollAnimations() {
1426        // 获取所有需要动画的元素
1427        const animatedElements = document.querySelectorAll(
1428          ".animate-in, .animate-in-left, .animate-in-right, .animate-in-scale, .animate-in-fade",
1429        );
1430
1431        // 创建Intersection Observer
1432        const observer = new IntersectionObserver(
1433          (entries) => {
1434            entries.forEach((entry) => {
1435              if (entry.isIntersecting) {
1436                // 获取延迟时间
1437                const delay = entry.target.getAttribute("data-delay") || 0;
1438
1439                // 设置延迟动画
1440                setTimeout(() => {
1441                  // 添加动画类
1442                  entry.target.style.transition =
1443                    "all 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
1444                  entry.target.style.opacity = "1";
1445
1446                  // 根据不同的动画类型设置不同的transform
1447                  if (entry.target.classList.contains("animate-in")) {
1448                    entry.target.style.transform = "translateY(0)";
1449                  } else if (
1450                    entry.target.classList.contains("animate-in-left")
1451                  ) {
1452                    entry.target.style.transform = "translateX(0)";
1453                  } else if (
1454                    entry.target.classList.contains("animate-in-right")
1455                  ) {
1456                    entry.target.style.transform = "translateX(0)";
1457                  } else if (
1458                    entry.target.classList.contains("animate-in-scale")
1459                  ) {
1460                    entry.target.style.transform = "scale(1)";
1461                  }
1462
1463                  // 添加强调动画效果
1464                  if (entry.target.querySelector(".gradient-text")) {
1465                    const gradientText =
1466                      entry.target.querySelector(".gradient-text");
1467                    gradientText.style.transition = "all 1s ease";
1468                    gradientText.style.textShadow =
1469                      "0 0 15px rgba(0, 115, 255, 0.7)";
1470                  }
1471                }, delay * 500);
1472
1473                // 停止观察该元素
1474                observer.unobserve(entry.target);
1475              }
1476            });
1477          },
1478          {
1479            threshold: 0.1, // 当元素10%进入视口时触发
1480            rootMargin: "0px 0px -50px 0px", // 提前50px触发
1481          },
1482        );
1483
1484        // 观察所有动画元素
1485        animatedElements.forEach((el) => {
1486          observer.observe(el);
1487        });
1488      }
1489
1490      // 移动端菜单切换
1491      const menuToggle = document.getElementById("menu-toggle");
1492      const mobileMenu = document.getElementById("mobile-menu");
1493      let menuOpen = false;
1494
1495      menuToggle.addEventListener("click", function () {
1496        if (!menuOpen) {
1497          // 打开菜单
1498          mobileMenu.style.height = "auto";
1499          const height = mobileMenu.offsetHeight + "px";
1500          mobileMenu.style.height = "0px";
1501
1502          // 触发重排
1503          mobileMenu.offsetHeight;
1504
1505          // 应用过渡动画
1506          mobileMenu.style.height = height;
1507          mobileMenu.style.opacity = "1";
1508          mobileMenu.style.transform = "translateY(0)";
1509
1510          // 更改图标
1511          menuToggle.innerHTML = '<i class="fas fa-times text-xl"></i>';
1512        } else {
1513          // 关闭菜单
1514          mobileMenu.style.height = "0px";
1515          mobileMenu.style.opacity = "0";
1516          mobileMenu.style.transform = "translateY(-10px)";
1517
1518          // 更改图标
1519          menuToggle.innerHTML = '<i class="fas fa-bars text-xl"></i>';
1520        }
1521
1522        menuOpen = !menuOpen;
1523      });
1524
1525      // 点击菜单项后关闭菜单
1526      const mobileMenuItems = mobileMenu.querySelectorAll("a");
1527      mobileMenuItems.forEach((item) => {
1528        item.addEventListener("click", function () {
1529          if (menuOpen) {
1530            mobileMenu.style.height = "0px";
1531            mobileMenu.style.opacity = "0";
1532            mobileMenu.style.transform = "translateY(-10px)";
1533            menuToggle.innerHTML = '<i class="fas fa-bars text-xl"></i>';
1534            menuOpen = false;
1535          }
1536        });
1537      });
1538
1539      // 平滑滚动
1540      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
1541        anchor.addEventListener("click", function (e) {
1542          e.preventDefault();
1543
1544          const targetId = this.getAttribute("href");
1545          const targetElement = document.querySelector(targetId);
1546
1547          if (targetElement) {
1548            window.scrollTo({
1549              top: targetElement.offsetTop - 80,
1550              behavior: "smooth",
1551            });
1552
1553            // 如果是移动端,点击后关闭菜单
1554            if (window.innerWidth < 768) {
1555              mobileMenu.classList.add("hidden");
1556            }
1557          }
1558        });
1559      });
1560
1561      // 数字增长动画
1562      const counters = document.querySelectorAll(".counter");
1563      const speed = 200; // 动画速度
1564
1565      const animateCounters = () => {
1566        counters.forEach((counter) => {
1567          const target = +counter.getAttribute("data-target");
1568          const count = +counter.innerText;
1569          const increment = target / speed;
1570
1571          if (count < target) {
1572            counter.innerText = Math.ceil(count + increment);
1573            setTimeout(animateCounters, 1);
1574          } else {
1575            counter.innerText = target;
1576          }
1577        });
1578      };
1579
1580      // 监听滚动,当元素进入视口时开始动画
1581      const observer = new IntersectionObserver((entries) => {
1582        entries.forEach((entry) => {
1583          if (entry.isIntersecting) {
1584            animateCounters();
1585            observer.unobserve(entry.target);
1586          }
1587        });
1588      });
1589
1590      counters.forEach((counter) => {
1591        observer.observe(counter);
1592      });
1593
1594      // 联系表单提交
1595      const contactForm = document.getElementById("contact-form");
1596
1597      contactForm.addEventListener("submit", function (e) {
1598        e.preventDefault();
1599
1600        const name = document.getElementById("name").value;
1601        const email = document.getElementById("email").value;
1602        const company = document.getElementById("company").value;
1603        const phone = document.getElementById("phone").value;
1604        const product = document.getElementById("product").value;
1605        const message = document.getElementById("message").value;
1606
1607        async function submitForm() {
1608          await window.http.post("/user/contactForm/save", {
1609            name: name || "",
1610            email: email || "",
1611            company: company || "",
1612            telephone: phone || "",
1613            productName: product || "",
1614            messageContent: message || "",
1615          });
1616        }
1617        submitForm();
1618        // 模拟表单提交
1619        alert(
1620          "Thank you for your message! We will get back to you as soon as possible.",
1621        );
1622        contactForm.reset();
1623      });
1624
1625      // AI助手功能
1626      const aiInput = document.getElementById("ai-input");
1627      const aiSend = document.getElementById("ai-send");
1628      const chatContainer = document.getElementById("chat-container");
1629
1630      // 发送消息函数
1631      const sendMessage = () => {
1632        const message = aiInput.value.trim();
1633
1634        if (!message) return;
1635
1636        // 添加用户消息
1637        addMessage(message, "user");
1638        aiInput.value = "";
1639
1640        // 模拟AI思考
1641        setTimeout(() => {
1642          const response = getAIResponse(message);
1643          addMessage(response, "ai");
1644        }, 1000);
1645      };
1646
1647      // 添加消息到聊天窗口
1648      const addMessage = (message, sender) => {
1649        const messageDiv = document.createElement("div");
1650        messageDiv.className =
1651          "flex mb-4" + (sender === "user" ? " justify-end" : "");
1652
1653        if (sender === "user") {
1654          messageDiv.innerHTML = `
1655                        <div class="bg-primary-500 rounded-lg py-2 px-4 max-w-[80%]">
1656                            <p class="text-white">${message}</p>
1657                        </div>
1658                        <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center ml-2 flex-shrink-0">
1659                            <i class="fas fa-user text-white text-sm"></i>
1660                        </div>
1661                    `;
1662        } else {
1663          messageDiv.innerHTML = `
1664                        <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-2 flex-shrink-0">
1665                            <i class="fas fa-robot text-white text-sm"></i>
1666                        </div>
1667                        <div class="bg-gray-700 rounded-lg py-2 px-4 max-w-[80%]">
1668                            <p class="text-gray-300">${message}</p>
1669                        </div>
1670                    `;
1671        }
1672
1673        chatContainer.appendChild(messageDiv);
1674        chatContainer.scrollTop = chatContainer.scrollHeight;
1675      };
1676
1677      // 获取AI响应
1678      const getAIResponse = (message) => {
1679        // 转换为小写用于匹配
1680        const lowerMessage = message.toLowerCase();
1681
1682        // 检查是否匹配预设问答
1683        for (const qa of qaDatabase) {
1684          for (const keyword of qa.keywords) {
1685            if (lowerMessage.includes(keyword)) {
1686              return qa.response;
1687            }
1688          }
1689        }
1690
1691        // 默认回复
1692        return "Thank you for your inquiry! This is a great question. Our professional team will provide you with a detailed answer. Please leave your contact information, and we will c
1692ontact you as soon as possible.";
1693      };
1694
1695      // 发送按钮点击事件
1696      aiSend.addEventListener("click", sendMessage);
1697
1698      // 输入框回车事件
1699      aiInput.addEventListener("keypress", function (e) {
1700        if (e.key === "Enter") {
1701          sendMessage();
1702        }
1703      });
1704
1705      // 初始化Three.js场景
1706      initThreeScene();
1707    });
1708
1709    // Three.js 3D背景
1710    function initThreeScene() {
1711      const container = document.getElementById("canvas-container");
1712
1713      // 创建场景
1714      const scene = new THREE.Scene();
1715
1716      // 创建相机
1717      const camera = new THREE.PerspectiveCamera(
1718        75,
1719        window.innerWidth / window.innerHeight,
1720        0.1,
1721        1000,
1722      );
1723      camera.position.z = 5;
1724
1725      // 创建渲染器
1726      const renderer = new THREE.WebGLRenderer({ alpha: true });
1727      renderer.setSize(window.innerWidth, window.innerHeight);
1728      renderer.setClearColor(0x000000, 0); // 透明背景
1729      container.appendChild(renderer.domElement);
1730
1731      // 创建粒子系统
1732      const particlesGeometry = new THREE.BufferGeometry();
1733      const particlesCount = 1500;
1734
1735      const posArray = new Float32Array(particlesCount * 3);
1736
1737      for (let i = 0; i < particlesCount * 3; i++) {
1738        posArray[i] = (Math.random() - 0.5) * 15;
1739      }
1740
1741      particlesGeometry.setAttribute(
1742        "position",
1743        new THREE.BufferAttribute(posArray, 3),
1744      );
1745
1746      // 创建材质
1747      const particlesMaterial = new THREE.PointsMaterial({
1748        size: 0.02,
1749        color: 0x0073ff,
1750        transparent: true,
1751        opacity: 0.8,
1752      });
1753
1754      // 创建粒子系统
1755      const particlesMesh = new THREE.Points(
1756        particlesGeometry,
1757        particlesMaterial,
1758      );
1759      scene.add(particlesMesh);
1760
1761      // 添加连线
1762      const lineMaterial = new THREE.LineBasicMaterial({
1763        color: 0x0073ff,
1764        transparent: true,
1765        opacity: 0.2,
1766      });
1767
1768      const lineGeometry = new THREE.BufferGeometry();
1769      const linePositions = new Float32Array(particlesCount * 6); // 每条线两个点,每个点xyz三个坐标
1770      lineGeometry.setAttribute(
1771        "position",
1772        new THREE.BufferAttribute(linePositions, 3),
1773      );
1774
1775      const lineMesh = new THREE.LineSegments(lineGeometry, lineMaterial);
1776      scene.add(lineMesh);
1777
1778      // 鼠标移动效果
1779      let mouseX = 0;
1780      let mouseY = 0;
1781
1782      document.addEventListener("mousemove", (event) => {
1783        mouseX = (event.clientX / window.innerWidth) * 2 - 1;
1784        mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
1785      });
1786
1787      // 窗口大小调整
1788      window.addEventListener("resize", () => {
1789        camera.aspect = window.innerWidth / window.innerHeight;
1790        camera.updateProjectionMatrix();
1791        renderer.setSize(window.innerWidth, window.innerHeight);
1792      });
1793
1794      // 动画循环
1795      const animate = () => {
1796        requestAnimationFrame(animate);
1797
1798        // 旋转粒子系统
1799        particlesMesh.rotation.y += 0.001;
1800        particlesMesh.rotation.x += 0.0005;
1801
1802        // 根据鼠标位置调整旋转
1803        particlesMesh.rotation.y += mouseX * 0.0005;
1804        particlesMesh.rotation.x += mouseY * 0.0005;
1805
1806        // 更新连线
1807        const positions = particlesMesh.geometry.attributes.position.array;
1808        let lineIndex = 0;
1809
1810        // 寻找最近的粒子并连线
1811        for (let i = 0; i < particlesCount; i++) {
1812          const x1 = positions[i * 3];
1813          const y1 = positions[i * 3 + 1];
1814          const z1 = positions[i * 3 + 2];
1815
1816          let minDist = 2; // 最大连线距离
1817          let closestParticle = null;
1818
1819          for (let j = i + 1; j < particlesCount; j++) {
1820            const x2 = positions[j * 3];
1821            const y2 = positions[j * 3 + 1];
1822            const z2 = positions[j * 3 + 2];
1823
1824            const dist = Math.sqrt(
1825              Math.pow(x2 - x1, 2) +
1826              Math.pow(y2 - y1, 2) +
1827              Math.pow(z2 - z1, 2),
1828            );
1829
1830            if (dist < minDist) {
1831              minDist = dist;
1832              closestParticle = j;
1833            }
1834          }
1835
1836          // 如果找到最近的粒子,添加连线
1837          if (
1838            closestParticle !== null &&
1839            lineIndex < linePositions.length - 6
1840          ) {
1841            const j = closestParticle;
1842
1843            linePositions[lineIndex++] = positions[i * 3];
1844            linePositions[lineIndex++] = positions[i * 3 + 1];
1845            linePositions[lineIndex++] = positions[i * 3 + 2];
1846
1847            linePositions[lineIndex++] = positions[j * 3];
1848            linePositions[lineIndex++] = positions[j * 3 + 1];
1849            linePositions[lineIndex++] = positions[j * 3 + 2];
1850          }
1851        }
1852
1853        // 更新线条几何体
1854        lineGeometry.attributes.position.needsUpdate = true;
1855
1856        renderer.render(scene, camera);
1857      };
1858
1859      animate();
1860    }
1861  </script>
1861
1862</body>
1863
1864</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.