ai mail

src/components/AiorzWebARLanding.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Terminal, Cpu, Camera, ChevronRight, Activity } from 'lucide-react';
+import { Terminal, Cpu, Camera, ChevronRight, Activity, Mail } from 'lucide-react';
 
 // 脚本加载辅助函数
 const loadScript = (src: string): Promise<void> => {
@@ -1003,15 +1003,24 @@ const AiorzWebARLanding = () => {
           </div>
           <span className="text-xl font-bold tracking-wider text-white group-hover:text-emerald-400 transition-colors">AIORZ</span>
         </div>
-        <div className="hidden md:flex gap-6 text-sm">
+        <div className="hidden md:flex gap-6 text-sm items-center">
           <div className="flex items-center gap-2 text-emerald-500/80">
             <Activity size={14} className={cameraActive ? "animate-pulse" : ""} />
             <span>{systemStatus}</span>
           </div>
+          <a 
+            href="mailto:[email protected]" 
+            className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-gray-900/50 border border-gray-700/50 text-gray-400 hover:text-emerald-400 hover:border-emerald-500/50 hover:bg-emerald-500/10 transition-all duration-300 group"
+            title="Contact"
+          >
+            <Mail size={14} className="group-hover:text-emerald-400 transition-colors" />
+            <span className="text-xs font-mono">[email protected]</span>
+          </a>
         </div>
       </nav>
 
       <main className="relative z-20 max-w-7xl mx-auto px-6 pt-16 h-[calc(100vh-100px)]">
+        {/* 左侧主要内容区域 */}
         <div className="max-w-2xl space-y-8">
           <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-900/30 border border-emerald-500/30 text-emerald-400 text-xs font-bold uppercase tracking-widest">
             <span className={`w-2 h-2 rounded-full ${cameraActive ? 'bg-emerald-400 animate-ping' : 'bg-gray-500'}`}></span>
@@ -1053,8 +1062,105 @@ const AiorzWebARLanding = () => {
           </div>
         </div>
 
-        {/* 手势提示框 - 改为绝对定位，放在右下角 */}
-        <div className="absolute bottom-6 right-6 hidden lg:block max-w-xs">
+        {/* 右侧信息面板区域 - 绝对定位，不遮挡中间粒子图 */}
+        <div className="hidden lg:flex flex-col gap-6 absolute top-1/2 -translate-y-1/2 right-6 w-80">
+            {/* 系统状态卡片 */}
+            <div className="bg-gray-900/60 backdrop-blur-sm border border-gray-700/40 rounded-lg p-6 font-mono pointer-events-auto">
+              <div className="flex items-center gap-2 mb-4 border-b border-gray-700/50 pb-3">
+                <Activity size={16} className="text-emerald-500" />
+                <span className="text-gray-300 font-bold text-sm">SYSTEM_STATUS</span>
+              </div>
+              <div className="space-y-3 text-xs">
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-500">Status:</span>
+                  <span className="text-emerald-400 font-bold">{systemStatus}</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-500">Camera:</span>
+                  <span className={cameraActive ? "text-green-400" : "text-red-400"}>
+                    {cameraActive ? "ACTIVE" : "STANDBY"}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-500">Hand Tracking:</span>
+                  <span className={cameraActive ? "text-green-400" : "text-gray-600"}>
+                    {cameraActive ? "ON" : "OFF"}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-500">Latency:</span>
+                  <span className="text-cyan-400">16ms</span>
+                </div>
+              </div>
+            </div>
+
+            {/* 手势提示框 */}
+            <div className="bg-gray-900/60 backdrop-blur-sm border border-gray-700/40 rounded-lg p-4 font-mono text-xs shadow-xl pointer-events-auto">
+              <div className="flex items-center gap-2 mb-3 border-b border-gray-700/50 pb-2">
+                <Terminal size={12} className="text-emerald-500" />
+                <span className="text-gray-400 text-xs">interaction_guide.md</span>
+              </div>
+              <div className="space-y-2.5 text-gray-300">
+                <div className="flex items-center gap-2">
+                  <div className="w-6 h-6 rounded bg-gray-800/50 flex items-center justify-center text-sm flex-shrink-0">🖐️</div>
+                  <div className="min-w-0">
+                    <div className="text-orange-400 font-bold text-xs">SATURN</div>
+                    <div className="text-[10px] text-gray-500 leading-tight">Open hand</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-6 h-6 rounded bg-gray-800/50 flex items-center justify-center text-sm flex-shrink-0">✊</div>
+                  <div className="min-w-0">
+                    <div className="text-emerald-400 font-bold text-xs">SPHERE</div>
+                    <div className="text-[10px] text-gray-500 leading-tight">Close fist</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-6 h-6 rounded bg-gray-800/50 flex items-center justify-center text-sm flex-shrink-0">✌️</div>
+                  <div className="min-w-0">
+                    <div className="text-cyan-400 font-bold text-xs">IDENTITY</div>
+                    <div className="text-[10px] text-gray-500 leading-tight">Victory sign</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-6 h-6 rounded bg-gray-800/50 flex items-center justify-center text-sm flex-shrink-0">☝️</div>
+                  <div className="min-w-0">
+                    <div className="text-gray-200 font-bold text-xs">MECHA</div>
+                    <div className="text-[10px] text-gray-500 leading-tight">Index finger</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* 功能特性卡片 */}
+            <div className="bg-gray-900/60 backdrop-blur-sm border border-gray-700/40 rounded-lg p-6 font-mono pointer-events-auto">
+              <div className="flex items-center gap-2 mb-4 border-b border-gray-700/50 pb-3">
+                <Cpu size={16} className="text-emerald-500" />
+                <span className="text-gray-300 font-bold text-sm">FEATURES</span>
+              </div>
+              <div className="space-y-3 text-xs text-gray-400">
+                <div className="flex items-start gap-2">
+                  <span className="text-emerald-400 mt-0.5">▸</span>
+                  <span>Real-time hand gesture recognition</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <span className="text-emerald-400 mt-0.5">▸</span>
+                  <span>3D particle physics simulation</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <span className="text-emerald-400 mt-0.5">▸</span>
+                  <span>Cross-border commerce AI agent</span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <span className="text-emerald-400 mt-0.5">▸</span>
+                  <span>Spatial computing interface</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        {/* 移动端手势提示框 - 绝对定位在右下角 */}
+        <div className="absolute bottom-6 right-6 lg:hidden max-w-xs">
            <div className="relative bg-gray-900/60 backdrop-blur-sm border border-gray-700/40 rounded-lg p-4 font-mono text-xs shadow-xl">
               <div className="flex items-center gap-2 mb-3 border-b border-gray-700/50 pb-2">
                  <Terminal size={12} className="text-emerald-500" />
@@ -1098,6 +1204,17 @@ const AiorzWebARLanding = () => {
         </div>
       </main>
 
+      {/* 移动端联系方式 - 底部显示 */}
+      <footer className="relative z-20 md:hidden px-6 py-4 border-t border-gray-800/50">
+        <a 
+          href="mailto:[email protected]" 
+          className="flex items-center justify-center gap-2 text-xs text-gray-500 hover:text-emerald-400 transition-colors"
+        >
+          <Mail size={12} />
+          <span className="font-mono">[email protected]</span>
+        </a>
+      </footer>
+
     </div>
   );
 };