feat: initialize OneOSS Hydrogen Box project
Set up the project structure using Vite, React, and Tailwind CSS. Added initial landing page components, assets, and build configuration for the OneOSS Hydrogen Safety & Carbon Factor Box application.
This commit is contained in:
pazz09adk-glitch
914
src/App.tsx
Normal file
914
src/App.tsx
Normal file
@@ -0,0 +1,914 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import {
|
||||
Activity, ShieldCheck, Zap, Server, ChevronRight,
|
||||
Database, Cpu, Cloud, Truck, Factory, Building, Target,
|
||||
Leaf, AlertTriangle, Wind, Thermometer, Gauge, Navigation,
|
||||
Settings, Battery, Link2, Share2, Search, LineChart, BarChart,
|
||||
Radio, HardDrive, Network, MapPin, CheckCircle2, Factory as FactoryIcon, ShieldAlert, Workflow,
|
||||
Maximize2, Eye, Sliders, Flame, Compass, RefreshCw
|
||||
} from 'lucide-react';
|
||||
|
||||
// --- Import assets ---
|
||||
import oneossBoxImage from './assets/images/oneoss_box_1779852084134.png';
|
||||
import oneossSideFacet from './assets/images/oneoss_side_facet_1779862455874.png';
|
||||
import oneossTopFacet from './assets/images/oneos_top_facet_1779864912925.png';
|
||||
import scenarioFleetImage from './assets/images/scenario_fleet_1779863559233.png';
|
||||
import scenarioStationImage from './assets/images/scenario_station_1779863574991.png';
|
||||
import scenarioDatacenterImage from './assets/images/scenario_datacenter_1779863590420.png';
|
||||
|
||||
// --- Reusable Compact Architecture Component ---
|
||||
|
||||
const CompactArchCard = ({ title, children, className = "", headerClass = "bg-[#121212]" }: { title?: React.ReactNode, children: React.ReactNode, className?: string, headerClass?: string }) => (
|
||||
<div className={`bg-[#0D0D0D]/90 border border-neutral-800/80 rounded shadow-lg flex flex-col overflow-hidden relative transition-all duration-300 hover:border-[#00F2FF]/40 ${className}`}>
|
||||
{/* Decorative micro LED accent on card edge */}
|
||||
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/20 to-transparent"></div>
|
||||
{title && (
|
||||
<div className={`${headerClass} px-3 py-1.5 border-b border-neutral-800/60 text-[10px] font-extrabold tracking-wider uppercase text-neutral-300 flex items-center justify-between`}>
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
<div className="p-3 flex flex-col gap-2 flex-1 relative z-10 font-sans">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CompactArchList = ({ items }: { items: { icon?: any, text: string, textEn?: string }[] }) => (
|
||||
<ul className="flex flex-col gap-1.5 text-[10px] text-neutral-400">
|
||||
{items.map((item, i) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<li key={i} className="flex items-start gap-1.5 leading-tight">
|
||||
{Icon ? (
|
||||
<Icon size={11} className="text-[#00F2FF] shrink-0 mt-[2px]" />
|
||||
) : (
|
||||
<div className="w-[3px] h-[3px] bg-[#00F2FF] rounded-full shadow-[0_0_4px_#00F2FF] shrink-0 mt-[6px]"></div>
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
<span className="text-neutral-200">{item.text}</span>
|
||||
{item.textEn && <span className="text-[8px] font-mono text-neutral-600 uppercase tracking-tight">{item.textEn}</span>}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
|
||||
type StylePreset = 'cyan' | 'amber' | 'crimson';
|
||||
|
||||
interface PerspectiveFacet {
|
||||
id: string;
|
||||
nameCn: string;
|
||||
nameEn: string;
|
||||
image: string;
|
||||
descriptionCn: string;
|
||||
descriptionEn: string;
|
||||
specs: { label: string; value: string }[];
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'architecture'>('overview');
|
||||
|
||||
// Custom futuristic theme/preset selector state
|
||||
const [styleTheme, setStyleTheme] = useState<StylePreset>('cyan');
|
||||
|
||||
// Interactive Perspective Switcher State
|
||||
const [activeFacet, setActiveFacet] = useState<string>('top');
|
||||
|
||||
const themes = {
|
||||
cyan: {
|
||||
accent: '#00F2FF',
|
||||
glow: 'shadow-[0_0_20px_rgba(0,242,255,0.25)]',
|
||||
border: 'border-[#00F2FF]/30',
|
||||
textAccent: 'text-[#00F2FF]',
|
||||
bgAccent: 'bg-[#00F2FF]',
|
||||
borderAccent: 'border-[#00F2FF]',
|
||||
gradient: 'from-[#00F2FF] to-[#0066FF]',
|
||||
radialGlow: 'bg-[#00F2FF]/5',
|
||||
nameCn: '极光霓虹',
|
||||
nameEn: 'Aurora Cyan'
|
||||
},
|
||||
amber: {
|
||||
accent: '#FBBF24',
|
||||
glow: 'shadow-[0_0_20px_rgba(251,191,36,0.25)]',
|
||||
border: 'border-[#FBBF24]/30',
|
||||
textAccent: 'text-[#FBBF24]',
|
||||
bgAccent: 'bg-[#FBBF24]',
|
||||
borderAccent: 'border-[#FBBF24]',
|
||||
gradient: 'from-[#FBBF24] to-[#D97706]',
|
||||
radialGlow: 'bg-[#FBBF24]/5',
|
||||
nameCn: '航天鎏金',
|
||||
nameEn: 'Aerospace Amber'
|
||||
},
|
||||
crimson: {
|
||||
accent: '#EF4444',
|
||||
glow: 'shadow-[0_0_20px_rgba(239,68,68,0.25)]',
|
||||
border: 'border-[#EF4444]/30',
|
||||
textAccent: 'text-[#EF4444]',
|
||||
bgAccent: 'bg-[#EF4444]',
|
||||
borderAccent: 'border-[#EF4444]',
|
||||
gradient: 'from-[#EF4444] to-[#991B1B]',
|
||||
radialGlow: 'bg-[#EF4444]/5',
|
||||
nameCn: '聚变红核',
|
||||
nameEn: 'Fusion Crimson'
|
||||
}
|
||||
};
|
||||
|
||||
const activeTheme = themes[styleTheme];
|
||||
|
||||
const facets: PerspectiveFacet[] = [
|
||||
{
|
||||
id: 'iso',
|
||||
nameCn: '立体主视图',
|
||||
nameEn: 'Isometric View',
|
||||
image: oneossBoxImage,
|
||||
descriptionCn: '全铝阳极氧化磨砂太空灰机壳，线条凝练锐利，边缘搭载可变色长条形高精度脉冲 LED 光斑状态指示器，彰显现代工业极简美学。',
|
||||
descriptionEn: 'Anodized sandblasted space-gray aluminum casing with razor-sharp geometric contours, presenting active pulsating high-frequency pulse status LEDs.',
|
||||
specs: [
|
||||
{ label: 'Chassis Material', value: 'Anodized Aluminum' },
|
||||
{ label: 'Ingress Rating', value: 'IP67 Waterproof' },
|
||||
{ label: 'Operating Temp', value: '-40°C to +85°C' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'side',
|
||||
nameCn: '连接器切面',
|
||||
nameEn: 'Connector Detail',
|
||||
image: oneossSideFacet,
|
||||
descriptionCn: '机身侧部配置重工业级 M12 耐高负载密封金属插座，保障信号链路与大电流供应在多端复杂极端环境下的无损传输。',
|
||||
descriptionEn: 'High-load heavy industrial M12 sealed metal connectors designed to safeguard physical connectivity under extreme multi-node environments.',
|
||||
specs: [
|
||||
{ label: 'Interface Type', value: 'M12 Industrial A-Coded' },
|
||||
{ label: 'Contact Finish', value: 'Gold-Plated/Copper Alloy' },
|
||||
{ label: 'Coupling Method', value: 'Threaded Locking Joint' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'top',
|
||||
nameCn: '顶板盖透视图',
|
||||
nameEn: 'Holographic Deck',
|
||||
image: oneossTopFacet,
|
||||
descriptionCn: '半透明暗色钢化玻璃盖板板底饰有沉金电路纹章，结合内部微弱背光结构，完美融合未来感科技韵味。',
|
||||
descriptionEn: 'High-strength semi-translucent dark tempered glass with complex circuit tracing architecture embedded under subtle microchips array.',
|
||||
specs: [
|
||||
{ label: 'Panel Type', value: 'Corning Gorilla Glass v5' },
|
||||
{ label: 'Thermal Shielding', value: 'Aerogel Thermal Layer' },
|
||||
{ label: 'Chassis Pressure', value: 'Internal Relief Valves' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const selectedFacet = facets.find(f => f.id === activeFacet) || facets[0];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col font-sans selection:bg-neutral-800 selection:text-white bg-[#030303] text-[#E5E5E5] overflow-hidden">
|
||||
|
||||
{/* 1. Header Navigation */}
|
||||
<header className="h-20 flex items-center justify-between px-6 md:px-12 border-b border-neutral-900 bg-[#060606] z-30 sticky top-0 flex-shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative group">
|
||||
<div className={`w-9 h-9 rounded-sm bg-gradient-to-br ${activeTheme.gradient} flex items-center justify-center transition-all ${activeTheme.glow}`}>
|
||||
<div className="w-4 h-4 bg-[#030303] rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-sans font-black tracking-[0.25em] text-sm text-white uppercase flex items-center gap-2">
|
||||
OneOS <span className="text-[9px] px-1.5 py-0.5 rounded border border-neutral-800 bg-neutral-950 text-[#fff]">V2.0</span>
|
||||
</span>
|
||||
<span className="text-[9px] text-neutral-500 tracking-[0.15em] uppercase font-mono">Hydrogen Safety Control Matrix</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab & Language Header Selector */}
|
||||
<div className="flex items-center gap-2 md:gap-8">
|
||||
<div className="flex items-center rounded-sm bg-neutral-950 p-[3px] border border-neutral-900">
|
||||
<button
|
||||
onClick={() => setActiveTab('overview')}
|
||||
className={`px-4 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'overview' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
|
||||
>
|
||||
产品明细 <span className="text-[9px] ml-1 opacity-50">DETAIL</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('architecture')}
|
||||
className={`px-4 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'architecture' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
|
||||
>
|
||||
逻辑架构 <span className="text-[9px] ml-1 opacity-50">ARCH</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-neutral-900 hidden md:block"></div>
|
||||
|
||||
{/* Theme Preset Selector */}
|
||||
<div className="hidden md:flex items-center gap-2">
|
||||
<span className="text-[9px] font-mono text-neutral-500 uppercase tracking-widest mr-1">Style Matrix:</span>
|
||||
{(['cyan', 'amber', 'crimson'] as StylePreset[]).map((themeName) => {
|
||||
const t = themes[themeName];
|
||||
return (
|
||||
<button
|
||||
key={themeName}
|
||||
onClick={() => setStyleTheme(themeName)}
|
||||
className={`w-6 h-6 rounded-full border flex items-center justify-center transition-all ${styleTheme === themeName ? 'border-white scale-110' : 'border-neutral-900 hover:border-neutral-700'}`}
|
||||
title={`${t.nameCn} / ${t.nameEn}`}
|
||||
>
|
||||
<span className={`w-3 h-3 rounded-full ${t.bgAccent}`} />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 2. Main Workspace */}
|
||||
<main className="flex-1 w-full bg-[#080808] overflow-y-auto relative h-full">
|
||||
|
||||
{/* Futuristic Ambient Grid Overlay */}
|
||||
<div className="fixed inset-0 z-0 pointer-events-none opacity-25">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(#1A1A1A_1px,transparent_1px)] [background-size:24px_24px]" />
|
||||
<div className={`absolute top-[10%] right-[15%] w-[650px] h-[650px] ${activeTheme.radialGlow} blur-[180px] rounded-full`} />
|
||||
<div className="absolute bottom-[5%] left-[5%] w-[550px] h-[550px] bg-blue-950/10 blur-[150px] rounded-full" />
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
|
||||
{/* =========================================================================
|
||||
TAB: PRODUCT OVERVIEW & CUT SECTIONS (中英双语)
|
||||
========================================================================= */}
|
||||
{activeTab === 'overview' && (
|
||||
<motion.div
|
||||
key="overview"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="grid grid-cols-1 xl:grid-cols-12 w-full max-w-[1920px] mx-auto min-h-full divide-y xl:divide-y-0 xl:divide-x divide-neutral-900 relative z-10"
|
||||
>
|
||||
{/* LEFT INTRODUCTORY PANEL (Bilingual, Rich Copy) */}
|
||||
<div className="col-span-1 xl:col-span-6 flex flex-col justify-between p-8 md:p-16 bg-[#090909]/90 relative">
|
||||
|
||||
{/* Style Palette Mobile Hotbar */}
|
||||
<div className="flex md:hidden items-center justify-between p-3 rounded bg-neutral-950/60 border border-neutral-900 mb-6">
|
||||
<span className="text-[10px] font-mono text-neutral-400">切换科技氛围</span>
|
||||
<div className="flex gap-2">
|
||||
{(['cyan', 'amber', 'crimson'] as StylePreset[]).map((themeName) => {
|
||||
const t = themes[themeName];
|
||||
return (
|
||||
<button
|
||||
key={themeName}
|
||||
onClick={() => setStyleTheme(themeName)}
|
||||
className={`w-5 h-5 rounded-full border flex items-center justify-center transition-all ${styleTheme === themeName ? 'border-white scale-110' : 'border-neutral-900'}`}
|
||||
>
|
||||
<span className={`w-2.5 h-2.5 rounded-full ${t.bgAccent}`} />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Small tag */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-2 h-2 rounded-full ${activeTheme.bgAccent} shadow-[0_0_8px_${activeTheme.accent}] animate-pulse`} />
|
||||
<span className="font-mono text-[10px] tracking-[0.25em] text-neutral-400 uppercase">
|
||||
OneOS Industrial v6.0 Terminal Protocol
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title Matrix */}
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-light tracking-tight text-white leading-[1.15]">
|
||||
Hydrogen Safety & <br />
|
||||
<span className="font-extrabold tracking-wide uppercase bg-gradient-to-r from-white via-neutral-100 to-neutral-400 bg-clip-text text-transparent">
|
||||
Carbon Factor Box
|
||||
</span>
|
||||
</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className={`font-mono text-xl md:text-2xl font-bold tracking-widest ${activeTheme.textAccent}`}>
|
||||
LNbox 氢能智能终端
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copy Block in Chinese & English */}
|
||||
<div className="space-y-4 max-w-xl text-neutral-400 text-sm leading-relaxed border-l-2 border-neutral-800 pl-6 py-1">
|
||||
<p className="font-sans font-light">
|
||||
OneOS AI 氢能控制终端 (LNbox) 是一款专为工业复杂场景定制的紧凑级高可靠核心控制设备。全机采用微几何立体机架防爆架构，精调极简工艺，支持多点秒级 H2 浓度、管网压力数据采集分析及碳因子追踪。
|
||||
</p>
|
||||
<p className="font-mono text-[11px] text-neutral-500 uppercase leading-relaxed">
|
||||
The LNbox AI-powered telemetry unit encapsulates raw hydrogen safety algorithms and active carbon factor logging. Crafted out of highgrade materials to endure corrosive industrial environments.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature Pillars Highlights (Bilingual) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6 border-t border-neutral-900 pt-8">
|
||||
<div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-cyan-500/20" />
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-1.5 rounded bg-cyan-950/30 text-cyan-400">
|
||||
<ShieldAlert size={16} />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">防爆与泄漏监测</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-neutral-400 leading-normal mb-1">精细感知泄漏阀值及车压变化，支持秒级自动气路阻断控制。</p>
|
||||
<span className="text-[9px] font-mono text-neutral-500 block uppercase">Level 4 Active Isolation Protocol</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-emerald-500/20" />
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-1.5 rounded bg-emerald-950/30 text-emerald-400">
|
||||
<Leaf size={16} />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">低碳因子动态上链</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-neutral-400 leading-normal mb-1">原生搭载碳估算模型核准装置，提供实时清洁绿氢因子加密认证。</p>
|
||||
<span className="text-[9px] font-mono text-neutral-500 block uppercase">Encrypted Carbon Ledger Hub</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-amber-500/20" />
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-1.5 rounded bg-amber-950/30 text-amber-400">
|
||||
<Zap size={16} />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">能源 AI 智能调度</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-neutral-400 leading-normal mb-1">结合边缘端负荷估算与最优分配策略，实现绿电制氢与用能消纳自适应分配。</p>
|
||||
<span className="text-[9px] font-mono text-neutral-500 block uppercase">Autonomous Energy AI Dispatch</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-[#00F2FF]/20" />
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-1.5 rounded bg-[#00F2FF]/10 text-[#00F2FF]">
|
||||
<Cpu size={16} />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold tracking-[0.15em] uppercase text-neutral-300">本地自研边缘算力</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-neutral-400 leading-normal mb-1">整合轻量级故障预测神经网络，支持离网计算及异常智能判断。</p>
|
||||
<span className="text-[9px] font-mono text-neutral-500 block uppercase">Intellectual AI Inference Engine</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* RIGHT PREMIUM VISUAL PRESENTATION WITH PERSPECTIVE/STYLE SWAPPER */}
|
||||
<div className="col-span-1 xl:col-span-6 flex flex-col justify-start p-8 md:p-12 bg-[#050505] relative overflow-hidden">
|
||||
|
||||
{/* Absolute status background */}
|
||||
<div className="absolute top-6 right-6 flex items-center gap-2 px-3 py-1 bg-neutral-950 border border-neutral-900 rounded font-mono text-[9px] text-neutral-400">
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${activeTheme.bgAccent}`} />
|
||||
ACCENT STATE: {activeTheme.nameEn}
|
||||
</div>
|
||||
|
||||
{/* Main Visual Display Block */}
|
||||
<div className="flex flex-col justify-start items-center pt-2 pb-4">
|
||||
|
||||
{/* Dynamic interactive heading showcasing which viewpoint we're examining */}
|
||||
<div className="text-center mb-4">
|
||||
<div className="text-[10px] font-mono tracking-[0.3em] uppercase text-neutral-500">Live Render Viewpoint</div>
|
||||
<div className="text-xl font-bold tracking-widest text-[#FFF] uppercase mt-1 flex items-center justify-center gap-2">
|
||||
<span>{selectedFacet.nameCn}</span>
|
||||
<span className="text-neutral-500">/</span>
|
||||
<span className={`text-xs ${activeTheme.textAccent} font-mono font-medium`}>{selectedFacet.nameEn}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-lg mt-2 group flex flex-col justify-center">
|
||||
{/* Pulsing neon halo under the device frame mirroring styleTheme */}
|
||||
<div className={`absolute -inset-2 bg-gradient-to-tr ${activeTheme.gradient} opacity-10 blur-xl rounded-xl transition-all duration-700 group-hover:opacity-20`} />
|
||||
|
||||
{/* Device Rendering Box with active styles */}
|
||||
<div className="relative border border-neutral-800/80 bg-[#0E0E0E]/95 shadow-[0_0_50px_rgba(0,0,0,0.8)] p-8 rounded flex items-center justify-center min-h-[300px] md:min-h-[360px] overflow-hidden transition-all hover:border-neutral-700">
|
||||
|
||||
{/* Compact 2-line floating brand brand overlay as requested: LN on top, ONEOS below */}
|
||||
<div className="absolute top-6 left-6 z-20 select-none flex flex-col gap-1 text-left">
|
||||
<div className="font-sans font-black text-3xl md:text-4xl tracking-wider text-[#00F2FF] leading-none drop-shadow-[0_0_10px_rgba(0,242,255,0.5)]">
|
||||
LN
|
||||
</div>
|
||||
<div className="font-sans font-black text-xs md:text-sm tracking-[0.3em] text-white/90 leading-none">
|
||||
ONEOS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive image layer with smooth transitions */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.img
|
||||
key={selectedFacet.id}
|
||||
src={selectedFacet.image}
|
||||
alt={selectedFacet.nameCn}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-full h-auto object-contain max-h-[260px] md:max-h-[300px] object-center opacity-95 brightness-[1.05] group-hover:scale-105 transition-all duration-500"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Tech alignment markers representing standard octane studio photo overlays */}
|
||||
<div className="absolute top-4 right-4 font-mono text-[7px] text-neutral-600 flex flex-col text-right">
|
||||
<span>OCTANE_RENDER_V6_HD</span>
|
||||
<span>GRID_LOCK_ALGN [OK]</span>
|
||||
</div>
|
||||
|
||||
{/* Accent lighting element overlays that dynamically changes colors based on chosen matrix preset */}
|
||||
<div className="absolute inset-0 bg-[#00F2FF]/0 pointer-events-none transition-all duration-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mini details spec card for active perspective */}
|
||||
<div className="w-full max-w-lg mt-6 grid grid-cols-3 gap-2 shrink-0">
|
||||
{selectedFacet.specs.map((item, idx) => (
|
||||
<div key={idx} className="bg-[#090909] p-2.5 border border-neutral-900 flex flex-col rounded">
|
||||
<span className="text-[7.5px] font-mono text-neutral-500 uppercase tracking-wider">{item.label}</span>
|
||||
<span className="text-[10.5px] font-bold text-neutral-200 mt-0.5 truncate">{item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Perspective selector tab featuring three actual small product preview images */}
|
||||
<div className="border-t border-neutral-900/40 pt-4 mt-2 shrink-0">
|
||||
<div className="grid grid-cols-3 gap-3 max-w-lg mx-auto">
|
||||
{facets.map((facet) => {
|
||||
const isSelected = activeFacet === facet.id;
|
||||
return (
|
||||
<button
|
||||
key={facet.id}
|
||||
onClick={() => setActiveFacet(facet.id)}
|
||||
className={`group flex flex-col items-center p-1.5 border rounded bg-[#070707] transition-all duration-300 ${isSelected ? `border-white ring-1 ring-white/10 ${activeTheme.glow}` : 'border-neutral-900 hover:border-neutral-700/60'}`}
|
||||
>
|
||||
{/* Inner thumbnail photo */}
|
||||
<div className="w-full aspect-[4/3] rounded bg-[#0A0A0A] border border-neutral-900 overflow-hidden flex items-center justify-center p-1 mb-1.5 group-hover:border-neutral-700">
|
||||
<img
|
||||
src={facet.image}
|
||||
alt={facet.nameCn}
|
||||
className={`max-h-full max-w-full object-contain filter group-hover:scale-110 transition-transform duration-300 ${isSelected ? 'brightness-[1.1] opacity-100' : 'brightness-90 opacity-70'}`}
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-[10px] font-bold tracking-tight leading-tight ${isSelected ? activeTheme.textAccent : 'text-neutral-400'}`}>
|
||||
{facet.nameCn}
|
||||
</span>
|
||||
<span className="text-[7.5px] font-mono text-neutral-500 uppercase tracking-wide mt-0.5">
|
||||
{facet.nameEn}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* =========================================================================
|
||||
TAB: CORE LOGICAL ARCHITECTURE FLOW (Bilingual & Exactly Matching Attached Diagram)
|
||||
========================================================================= */}
|
||||
{activeTab === 'architecture' && (
|
||||
<motion.div
|
||||
key="architecture"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-full h-full xl:max-h-[calc(100vh-140px)] flex flex-col items-center justify-between p-3 md:p-5 lg:p-6 z-10 relative overflow-hidden"
|
||||
>
|
||||
|
||||
{/* Architecture Title block with both ENG and CN */}
|
||||
<div className="text-center mb-2 md:mb-4 max-w-2xl px-4 flex-shrink-0">
|
||||
<div className="inline-flex items-center gap-2 px-2 py-0.5 bg-[#121212]/80 border border-neutral-800 text-[9px] uppercase tracking-widest text-[#00F2FF] rounded font-mono mb-1">
|
||||
Logical Data Flow and System Infrastructure
|
||||
</div>
|
||||
<h2 className="text-xl md:text-2xl font-light tracking-tight text-white mb-0.5">
|
||||
OneOS AI 氢能盒子 - <span className="font-extrabold text-[#00F2FF] tracking-wide">核心逻辑架构图</span>
|
||||
</h2>
|
||||
<p className="text-[9px] font-mono text-neutral-500 uppercase tracking-widest">
|
||||
BI-LINGUAL SCHEMATIC FLOW CHART • 100% FULL-SCREEN COCKPIT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Exact column layout with custom bidirectional connectors */}
|
||||
<div className="w-full max-w-[1780px] mx-auto flex flex-col xl:flex-row gap-2.5 items-stretch relative flex-1 min-h-0 min-w-0">
|
||||
|
||||
{/* COLUMN 1: 数据采集层 (Data Capture Layer, ~18% width) */}
|
||||
<div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
|
||||
<div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
|
||||
<div className="text-[10px] font-bold tracking-[0.1em] text-[#00F2FF] uppercase">数据采集层</div>
|
||||
<div className="text-[7.5px] font-mono text-neutral-500 uppercase">Data Capture Matrix</div>
|
||||
</div>
|
||||
|
||||
<CompactArchCard title={<div className="flex items-center gap-1.5"><Settings size={11} className="text-[#00F2FF]"/><span>车辆/设备数据</span></div>} className="flex-[1.3_1.3_0%]">
|
||||
<CompactArchList items={[
|
||||
{ text: 'OBD/VCU', textEn: 'Vehicle Controller' },
|
||||
{ text: '电池系统', textEn: 'BMS monitoring' },
|
||||
{ text: '氢系统传感器', textEn: 'Hydrogen sensors' },
|
||||
{ text: '压力传感器', textEn: 'Pressure metrics' },
|
||||
{ text: '温度传感器', textEn: 'Temperature status' },
|
||||
{ text: '其他传感器', textEn: 'Auxiliary metrics' },
|
||||
]} />
|
||||
</CompactArchCard>
|
||||
|
||||
<CompactArchCard title={<div className="flex items-center gap-1.5"><Cloud size={11} className="text-[#00F2FF]"/><span>环境数据</span></div>} className="flex-1">
|
||||
<CompactArchList items={[
|
||||
{ text: '气体浓度', textEn: 'H2 Gas Sniffer' },
|
||||
{ text: '环境温湿度', textEn: 'Cabinet temperature' },
|
||||
{ text: '定位信息', textEn: 'GNSS coordinates' },
|
||||
]} />
|
||||
</CompactArchCard>
|
||||
</div>
|
||||
|
||||
{/* FLOW CONNECTOR 1: Left to Center (Capture <-> AI Core) */}
|
||||
<div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
|
||||
<div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
|
||||
{/* Left/Top arrowhead */}
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||||
<path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
{/* Glowing vertical path */}
|
||||
<div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
|
||||
{/* Right/Bottom arrowhead */}
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||||
<path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* COLUMN 2: ONEOS AI 氢能盒子 (Intelligent Core Box Node, Flex-1) */}
|
||||
<div className="flex-1 flex flex-col gap-2 p-2.5 border border-neutral-800 bg-[#040404]/90 rounded shadow-2xl relative min-w-[320px]">
|
||||
{/* Glowing halo behind box node */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-b ${activeTheme.radialGlow} to-transparent rounded z-0 pointer-events-none opacity-20`} />
|
||||
|
||||
<div className="p-1 bg-[#000] border border-neutral-900 rounded text-center z-10 shrink-0">
|
||||
<div className={`text-[11px] font-extrabold tracking-[0.15em] ${activeTheme.textAccent} uppercase`}>
|
||||
OneOS AI 氢能盒子
|
||||
</div>
|
||||
<div className="text-[7px] font-mono text-neutral-500 uppercase">LNbox Core Hardware Hub</div>
|
||||
</div>
|
||||
|
||||
{/* 3-Column Internal Layout: Modules - Central Hardware - Modules */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-2 items-stretch flex-1 z-10 min-h-0 min-w-0 py-1">
|
||||
|
||||
{/* Left Sub-column: Safety & Carbon */}
|
||||
<div className="flex flex-col gap-2 h-full justify-between">
|
||||
<CompactArchCard title={<div className="flex items-center gap-1.5 text-red-400 font-extrabold"><ShieldAlert size={11} /><span>氢安全管理模块</span></div>} className="flex-1">
|
||||
<CompactArchList items={[
|
||||
{ text: '泄漏监测', textEn: 'Liquid H2 gas leakage' },
|
||||
{ text: '压力监测', textEn: 'Chassis pressure variables' },
|
||||
{ text: '温度监测', textEn: 'Thermal safety telemetry' },
|
||||
{ text: '风险预警', textEn: 'Instant warning algorithms' },
|
||||
{ text: '自动/远程干预 (预留)', textEn: 'Pre-emptive emergency isolation' },
|
||||
]} />
|
||||
</CompactArchCard>
|
||||
|
||||
<CompactArchCard title={<div className="flex items-center gap-1.5 text-[#00F2FF] font-extrabold"><Leaf size={11} /><span>碳因子管理模块</span></div>} className="flex-1">
|
||||
<CompactArchList items={[
|
||||
{ text: '碳数据采集', textEn: 'Realtime carbon footprint ingesting' },
|
||||
{ text: '碳因子计算', textEn: 'Bilingual translation analytics' },
|
||||
{ text: '碳资产关联', textEn: 'Clean credits assignment' },
|
||||
{ text: '碳数据上链 (预留)', textEn: 'Secure blockchain accounting' },
|
||||
]} />
|
||||
</CompactArchCard>
|
||||
</div>
|
||||
|
||||
{/* Central Sub-column: Interactive Hardware Showcase */}
|
||||
<div className="flex flex-col border border-neutral-800/80 rounded bg-[#070707] p-2 justify-between gap-2 overflow-hidden relative group">
|
||||
{/* Interactive circuit-like subtle glow */}
|
||||
<div className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/40 to-transparent"></div>
|
||||
|
||||
<div className="relative w-full flex-1 border border-neutral-900 rounded bg-[#0A0A0A] p-2 flex flex-col items-center justify-center overflow-hidden min-h-[140px]">
|
||||
<img
|
||||
src={oneossTopFacet}
|
||||
alt="OneOS AI Hardware cover plate"
|
||||
className="w-full h-full max-h-[110px] object-contain opacity-95 brightness-[1.1] hover:scale-105 transition-all duration-300"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
|
||||
{/* Custom status overlays */}
|
||||
<div className="absolute top-1.5 left-2 px-1.5 py-0.5 rounded bg-black/80 border border-neutral-800 text-[8px] font-mono font-extrabold text-[#00F2FF] shadow-[0_0_8px_rgba(0,186,255,0.4)]">
|
||||
LN
|
||||
</div>
|
||||
<div className="absolute bottom-1.5 right-2 px-1.5 py-0.5 rounded bg-neutral-900/90 border border-neutral-800 text-[8px] font-mono font-black text-white tracking-widest leading-none">
|
||||
ONEOS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Small operational thumbnails */}
|
||||
<div className="grid grid-cols-3 gap-1 shrink-0">
|
||||
<div className="border border-[#00F2FF]/40 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF] transition-all cursor-pointer">
|
||||
<img src={oneossTopFacet} alt="Top Facet" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
|
||||
</div>
|
||||
<div className="border border-neutral-800 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF]/50 transition-all cursor-pointer">
|
||||
<img src={oneossSideFacet} alt="Side Facet" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
|
||||
</div>
|
||||
<div className="border border-neutral-800 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF]/50 transition-all cursor-pointer">
|
||||
<img src={oneossBoxImage} alt="Full Box" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Sub-column: AI Analyzers & Device Management */}
|
||||
<div className="flex flex-col gap-2 h-full justify-between">
|
||||
<CompactArchCard title={<div className="flex items-center gap-1.5 text-amber-400 font-extrabold"><Cpu size={11} /><span>AI分析决策模块</span></div>} className="flex-1">
|
||||
<CompactArchList items={[
|
||||
{ text: '数据分析', textEn: 'High freq operational analysis' },
|
||||
{ text: '风险预测', textEn: 'Predictive security forecasting' },
|
||||
{ text: '故障诊断', textEn: 'Automated modular diagnostics' },
|
||||
{ text: '能耗优化', textEn: 'Energy efficient constraints' },
|
||||
{ text: '智能决策', textEn: 'Autonomous hardware decisions' },
|
||||
]} />
|
||||
</CompactArchCard>
|
||||
|
||||
<CompactArchCard title={<div className="flex items-center gap-1.5 text-neutral-200 font-extrabold"><Sliders size={11} /><span>设备管理模块</span></div>} className="flex-1">
|
||||
<CompactArchList items={[
|
||||
{ text: '设备状态监控', textEn: 'Node integrity health checks' },
|
||||
{ text: '远程升级', textEn: 'Over-The-Air OTA flash' },
|
||||
{ text: '故障告警', textEn: 'Telemetry fault alerting' },
|
||||
{ text: '运行日志管理', textEn: 'Secure operational metrics logs' },
|
||||
]} />
|
||||
</CompactArchCard>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Vertical flow connector pointing up from Data Security to Central Hardware (Modification 1) */}
|
||||
<div className="flex lg:grid lg:grid-cols-3 shrink-0 h-4 lg:h-5 justify-center items-center relative select-none z-10 -my-1">
|
||||
<div className="hidden lg:block"></div> {/* Left empty */}
|
||||
<div className="flex flex-col items-center justify-center text-[#00F2FF] animate-pulse">
|
||||
{/* Arrowhead pointing UP */}
|
||||
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" className="rotate-180 mb-[2px]">
|
||||
<path d="M5 0L10 7H0L5 0Z" fill="#00F2FF" />
|
||||
</svg>
|
||||
{/* Vertical line with glow */}
|
||||
<div className="w-[1.5px] h-3 lg:h-4 bg-gradient-to-t from-[#00F2FF]/10 via-[#00F2FF]/80 to-[#00F2FF] shadow-[0_0_8px_rgba(0,242,255,0.8)]" />
|
||||
</div>
|
||||
<div className="hidden lg:block"></div> {/* Right empty */}
|
||||
</div>
|
||||
|
||||
{/* Stretching bottom card: 数据安全模块 */}
|
||||
<div className="border border-neutral-900 bg-neutral-950/80 rounded p-2 z-10 shrink-0">
|
||||
<div className="text-[8px] font-mono font-bold uppercase tracking-widest text-[#00F2FF]/70 text-center mb-1 bg-black/40 py-0.5 rounded border border-neutral-900">
|
||||
数据安全模块 (Data Security Framework)
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
<div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
|
||||
<ShieldCheck size={11} className="text-[#00F2FF] mb-0.5" />
|
||||
<span className="text-[9px] font-extrabold text-neutral-200">数据加密</span>
|
||||
<span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">AES/ECC</span>
|
||||
</div>
|
||||
<div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
|
||||
<Settings size={11} className="text-[#00F2FF] mb-0.5" />
|
||||
<span className="text-[9px] font-extrabold text-neutral-200">权限管理</span>
|
||||
<span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">RBAC Mode</span>
|
||||
</div>
|
||||
<div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
|
||||
<Database size={11} className="text-[#00F2FF] mb-0.5" />
|
||||
<span className="text-[9px] font-extrabold text-neutral-200">安全存储</span>
|
||||
<span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">Enclave Vault</span>
|
||||
</div>
|
||||
<div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
|
||||
<Link2 size={11} className="text-[#00F2FF] mb-0.5" />
|
||||
<span className="text-[9px] font-extrabold text-neutral-200">可信通信</span>
|
||||
<span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">TLS Tunneling</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* FLOW CONNECTOR 2: Center to Cloud (AI Core <-> Cloud AIoT) */}
|
||||
<div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
|
||||
<div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||||
<path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||||
<path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* COLUMN 3: OneOS 云平台 (OneOS AIoT Cloud Platform, ~18% width) */}
|
||||
<div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
|
||||
<div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
|
||||
<div className="text-[10px] font-bold tracking-[0.1em] text-[#00F2FF] uppercase">OneOS 云平台</div>
|
||||
<div className="text-[7.5px] font-mono text-neutral-500 uppercase">Core AIoT Cloud</div>
|
||||
</div>
|
||||
|
||||
<CompactArchCard title={<div className="flex items-center gap-1.5"><Cloud size={11} className="text-[#00F2FF]"/><span>OneOS AIoT 平台</span></div>} className="flex-1">
|
||||
{/* Futuristic Large Cloud core visualization panel (Modification 2) */}
|
||||
<div className="h-[120px] lg:h-[155px] w-full border border-cyan-500/20 bg-gradient-to-b from-[#080E16] to-[#040609] rounded-lg relative flex flex-col items-center justify-center mb-2.5 p-3 overflow-hidden group shadow-[inset_0_1px_12px_rgba(0,242,255,0.08)] shrink-0">
|
||||
{/* Abstract grid matrix */}
|
||||
<div className="absolute inset-0 opacity-[0.06] bg-[linear-gradient(to_right,#00F2FF_1px,transparent_1px),linear-gradient(to_bottom,#00F2FF_1px,transparent_1px)] bg-[size:10px_10px]" />
|
||||
|
||||
{/* Pulsing orbital rings */}
|
||||
<div className="absolute w-20 h-20 rounded-full border border-[#00F2FF]/5 animate-[spin_12s_linear_infinite]" />
|
||||
<div className="absolute w-24 h-24 rounded-full border border-dashed border-[#00F2FF]/5 animate-[spin_24s_linear_infinite]" />
|
||||
|
||||
{/* Main cloud glowing structure */}
|
||||
<div className="relative flex items-center justify-center text-[#00F2FF] p-3 bg-[#0c1a24]/45 border border-cyan-400/20 rounded-xl shadow-[0_0_15px_rgba(0,242,255,0.1)] mb-1.5 hover:scale-105 transition-transform duration-300">
|
||||
<Cloud size={28} className="animate-pulse duration-1000" />
|
||||
<div className="absolute inset-0 bg-[#00F2FF] opacity-15 blur-md rounded-full" />
|
||||
<div className="absolute -top-1 -right-1 w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping" />
|
||||
</div>
|
||||
|
||||
{/* Description & name */}
|
||||
<span className="text-[9px] font-extrabold text-cyan-400 tracking-widest font-mono uppercase">OneOS Cloud Hub</span>
|
||||
<span className="text-[7px] font-mono text-neutral-500 tracking-wider text-center max-w-[85%] mt-0.5 uppercase">Omni AIoT Control Core</span>
|
||||
|
||||
{/* Flowing particle stream */}
|
||||
<div className="flex gap-1.5 mt-2 items-center justify-center">
|
||||
<div className="w-[3px] h-[3px] rounded-full bg-cyan-400 animate-bounce" />
|
||||
<div className="w-4 h-[1px] bg-gradient-to-r from-cyan-500/20 via-cyan-400 to-cyan-500/20" />
|
||||
<div className="w-[3px] h-[3px] rounded-full bg-cyan-400 animate-bounce delay-150" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CompactArchList items={[
|
||||
{ text: '数据存储与计算', textEn: 'Storage & Distributed computing' },
|
||||
{ text: 'AI模型训练与优化', textEn: 'Neural model continuous training' },
|
||||
{ text: '可视化监控大屏', textEn: 'Omni-channel control boards' },
|
||||
{ text: '运营管理系统', textEn: 'Integrated management suite' },
|
||||
{ text: '开放API服务', textEn: 'Standard programmatic endpoint' },
|
||||
]} />
|
||||
</CompactArchCard>
|
||||
</div>
|
||||
|
||||
{/* FLOW CONNECTOR 3: Cloud to Applications (Cloud AIoT <-> Scenario Scopes) */}
|
||||
<div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
|
||||
<div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||||
<path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||||
<path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* COLUMN 4: 应用场景 (Operational Scenarios Layer, ~18% width) */}
|
||||
<div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
|
||||
<div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
|
||||
<div className="text-[10px] font-bold tracking-[0.15em] text-white uppercase">应用场景</div>
|
||||
<div className="text-[7.5px] font-mono text-neutral-500 uppercase">Operational Scenarios</div>
|
||||
</div>
|
||||
|
||||
{/* Scenario 1: Fleet Operations (Modification 3) */}
|
||||
<div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-[#00F2FF]/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
|
||||
<div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
|
||||
<div className="w-[15px] h-[15px] bg-cyan-950/45 border border-cyan-900/45 rounded flex items-center justify-center text-cyan-400">
|
||||
<Truck size={9} />
|
||||
</div>
|
||||
<span className="text-[9px] font-extrabold text-neutral-200">氢能车队运营</span>
|
||||
<span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Fleet</span>
|
||||
</div>
|
||||
{/* Horizontal split body */}
|
||||
<div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
|
||||
{/* Left: Thumbnail */}
|
||||
<div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
|
||||
<img src={scenarioFleetImage} alt="Fleet" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
|
||||
</div>
|
||||
{/* Right: Combined bullet checks */}
|
||||
<div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
|
||||
<div className="flex items-center gap-1 truncate">
|
||||
<div className="w-[3px] h-[3px] rounded-full bg-[#00F2FF] shadow-[0_0_3px_#00F2FF] shrink-0" />
|
||||
<span className="text-neutral-200 font-sans">车辆监控 • 运营调度</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 truncate">
|
||||
<div className="w-[3px] h-[3px] rounded-full bg-[#00F2FF]/30 shrink-0" />
|
||||
<span className="text-neutral-400 font-sans">能耗管理 • 安全预警</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scenario 2: Refueling Station Operations (Modification 3) */}
|
||||
<div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-amber-400/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
|
||||
<div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
|
||||
<div className="w-[15px] h-[15px] bg-amber-950/45 border border-amber-900/45 rounded flex items-center justify-center text-amber-400">
|
||||
<FactoryIcon size={9} />
|
||||
</div>
|
||||
<span className="text-[9px] font-extrabold text-neutral-200">加氢站运营</span>
|
||||
<span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Station</span>
|
||||
</div>
|
||||
{/* Horizontal split body */}
|
||||
<div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
|
||||
{/* Left: Thumbnail */}
|
||||
<div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
|
||||
<img src={scenarioStationImage} alt="Station" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
|
||||
</div>
|
||||
{/* Right: Combined bullet checks */}
|
||||
<div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
|
||||
<div className="flex items-center gap-1 truncate">
|
||||
<div className="w-[3px] h-[3px] rounded-full bg-amber-400 shadow-[0_0_3px_#fbbf24] shrink-0" />
|
||||
<span className="text-neutral-200 font-sans">氢源调度 • 加氢优化</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 truncate">
|
||||
<div className="w-[3px] h-[3px] rounded-full bg-amber-400/30 shrink-0" />
|
||||
<span className="text-neutral-400 font-sans">库存管理 • 安全监管</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scenario 3: Energy & Data Center Computes (Modification 3) */}
|
||||
<div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-red-400/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
|
||||
<div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
|
||||
<div className="w-[15px] h-[15px] bg-red-950/45 border border-red-900/45 rounded flex items-center justify-center text-red-500">
|
||||
<Server size={9} />
|
||||
</div>
|
||||
<span className="text-[9px] font-extrabold text-neutral-200">能源/算力中心</span>
|
||||
<span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Center</span>
|
||||
</div>
|
||||
{/* Horizontal split body */}
|
||||
<div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
|
||||
{/* Left: Thumbnail */}
|
||||
<div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
|
||||
<img src={scenarioDatacenterImage} alt="Data Center" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
|
||||
</div>
|
||||
{/* Right: Combined bullet checks */}
|
||||
<div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
|
||||
<div className="flex items-center gap-1 truncate">
|
||||
<div className="w-[3px] h-[3px] rounded-full bg-red-400 shadow-[0_0_3px_#f87171] shrink-0" />
|
||||
<span className="text-neutral-200 font-sans">能耗优化 • 安全监测</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 truncate">
|
||||
<div className="w-[3px] h-[3px] rounded-full bg-red-400/30 shrink-0" />
|
||||
<span className="text-neutral-400 font-sans">运维管理 • 智能决策</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom value matrix (价值输出层 中英双语 - Extremely Compact Layout for Full screen) */}
|
||||
<div className="w-full bg-[#070707] border border-neutral-800/80 border-l-4 border-l-[#00F2FF] rounded shrink-0 relative overflow-hidden py-3 px-6 mt-4 flex items-center justify-between">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#00F2FF]/5 to-transparent pointer-events-none" />
|
||||
|
||||
<div className="hidden xl:block shrink-0 font-extrabold text-[#E5E5E5] tracking-widest text-[11px] uppercase mr-6">
|
||||
价值输出层 <br />
|
||||
<span className="text-[8px] font-mono text-neutral-500 font-light block">VALUE MATRIX SYSTEM</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 grid grid-cols-2 md:grid-cols-5 gap-4 divide-y md:divide-y-0 md:divide-x divide-neutral-900">
|
||||
{[
|
||||
{ title: '强化安全减灾', sub: '极速预警防爆泄漏风险', icon: ShieldCheck, subEn: 'RISK CONTROL' },
|
||||
{ title: '显著降本增益', sub: '优化气耗能耗控制开支', icon: Search, subEn: 'COST MINIMIZE' },
|
||||
{ title: '多端业务提效', sub: '云端统筹告别积料负压', icon: Activity, subEn: 'EFFICIENT ROUTING' },
|
||||
{ title: '绿氢数据资产', sub: '实时认证双碳属性归集', icon: Leaf, subEn: 'CARBON CERTIFIED' },
|
||||
{ title: 'AI边算一体化', sub: '全面释放物联数据潜能', icon: LineChart, subEn: 'DATA ASSET INFERENCE' },
|
||||
].map((val, i) => {
|
||||
const Icon = val.icon;
|
||||
return (
|
||||
<div key={i} className="flex items-center gap-2 px-1 xl:px-4 w-full pt-2 md:pt-0">
|
||||
<div className="text-[#00F2FF] bg-[#00F2FF]/10 p-1.5 rounded shrink-0 border border-[#00F2FF]/20 shadow-[0_0_10px_rgba(0,242,255,0.05)]">
|
||||
<Icon size={13} />
|
||||
</div>
|
||||
<div className="flex flex-col items-start min-w-0">
|
||||
<span className="text-[11px] font-semibold text-white tracking-wider truncate max-w-[130px]">{val.title}</span>
|
||||
<span className="text-[9px] text-neutral-400 truncate max-w-[130px]">{val.sub}</span>
|
||||
<span className="text-[8px] font-mono text-neutral-600 uppercase tracking-widest font-bold">{val.subEn}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
</main>
|
||||
|
||||
{/* 3. Global Dashboard Footer Accent */}
|
||||
<footer className="w-full bg-[#050505] border-t border-neutral-900 relative flex-shrink-0 z-30">
|
||||
<div className="absolute top-0 left-0 right-0 h-0.5 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[#00F2FF] opacity-10 animate-pulse" />
|
||||
<div className={`absolute left-0 top-0 h-full w-[45%] bg-gradient-to-r ${activeTheme.gradient} shadow-[0_0_15px_${activeTheme.accent}]`} />
|
||||
</div>
|
||||
<div className="py-5 px-6 md:px-12 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<span className="text-[10px] tracking-[0.25em] text-neutral-600 font-mono uppercase text-center md:text-left">
|
||||
© 2026 OneOSS. ALL INDUSTRIAL TELEMETRY AND FACTOR ASSURANCE SYSTEMS REGISTERED.
|
||||
</span>
|
||||
<div className="flex items-center gap-6 text-[9px] font-mono text-neutral-500 uppercase tracking-[0.15em]">
|
||||
<span>Secured Node ID: OOSS-LNBOX-999-ACTIVE</span>
|
||||
<span className="hidden md:inline">•</span>
|
||||
<span>Link Strength: 100% SECURE</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user