1648 lines
96 KiB
HTML
1648 lines
96 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>ArchitStudio 敏捷开发平台 - 隼瞻科技</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Font Awesome & Google Fonts -->
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.glass-panel {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
box-shadow: 0 8px 32px -4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
.glass-panel-light {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
box-shadow: 0 4px 16px -2px rgba(59, 130, 246, 0.05);
|
|
}
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.text-shadow {
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3b82f6',
|
|
secondary: '#2563eb',
|
|
accent: '#60a5fa',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/css">
|
|
#sj-product-page {
|
|
font-family: "Inter", sans-serif;
|
|
color: #1e293b !important;
|
|
line-height: 1.5;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
#sj-product-page .relative z-10 { background-color: transparent !important; }
|
|
#sj-product-page .relative z-10 { background-color: transparent !important; }
|
|
#sj-product-page .text-primary { color: #3b82f6 !important; }
|
|
#sj-product-page .bg-primary { background-color: #3b82f6 !important; }
|
|
#sj-product-page .border-primary { border-color: #3b82f6 !important; }
|
|
#sj-product-page .bg-primary-10 { background-color: rgba(59, 130, 246, 0.1) !important; }
|
|
#sj-product-page .bg-primary-20 { background-color: rgba(59, 130, 246, 0.2) !important; }
|
|
|
|
/* Animations & Utilities */
|
|
#sj-product-page .animate-fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
}
|
|
#sj-product-page .animate-fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
#sj-product-page .hover-lift {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
#sj-product-page .hover-lift:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
/* Layout */
|
|
#sj-product-page .container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
|
|
#sj-product-page .max-w-7xl { max-width: 80rem; }
|
|
#sj-product-page .grid { display: grid; gap: 2rem; }
|
|
@media (min-width: 768px) {
|
|
#sj-product-page .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
|
|
#sj-product-page .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
|
|
#sj-product-page .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
|
|
/* Hero */
|
|
#sj-product-page .hero-bg {
|
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0;
|
|
}
|
|
#sj-product-page .hero-bg::before {
|
|
content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
|
|
background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
|
|
animation: heroGradient 20s ease-in-out infinite;
|
|
}
|
|
@keyframes heroGradient {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
50% { transform: translate(5%, 5%) rotate(5deg); }
|
|
}
|
|
|
|
#sj-product-page .grid-bg {
|
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
background-image: linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
|
|
background-size: 50px 50px; animation: gridMove 30s linear infinite; z-index: 0;
|
|
}
|
|
@keyframes gridMove { 100% { background-position: 50px 50px; } }
|
|
|
|
/* Process Steps */
|
|
#sj-product-page .step-connector {
|
|
position: absolute; top: 2rem; left: 50%; width: 100%; height: 2px;
|
|
background: rgba(59, 130, 246, 0.3); z-index: 0; transform: translateX(50%);
|
|
}
|
|
#sj-product-page .step-item:last-child .step-connector { display: none; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-slate-50 text-slate-800 font-inter antialiased">
|
|
<!-- 固定在背景的全局毛玻璃淡蓝光晕 -->
|
|
<div class="fixed inset-0 z-0 pointer-events-none bg-slate-50">
|
|
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full bg-blue-200/50 blur-[100px]"></div>
|
|
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-sky-200/40 blur-[100px]"></div>
|
|
<div class="absolute top-[40%] right-[10%] w-[30%] h-[30%] rounded-full bg-indigo-100/60 blur-[80px]"></div>
|
|
<div class="absolute bottom-[20%] left-[20%] w-[30%] h-[30%] rounded-full bg-blue-100/50 blur-[80px]"></div>
|
|
</div>
|
|
|
|
<div id="sj-product-page" class="min-h-screen relative overflow-hidden">
|
|
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
|
|
<div class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] rounded-full bg-blue-600/10 blur-[100px]">
|
|
</div>
|
|
<div class="absolute bottom-[-10%] left-[-5%] w-[600px] h-[600px] rounded-full bg-blue-900/10 blur-[120px]">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 1. 头部 Hero Section -->
|
|
<section id="archit-hero-section"
|
|
class="relative z-10 pt-24 md:pt-32 pb-16 relative z-10 overflow-hidden">
|
|
<!-- 星座背景Canvas -->
|
|
<canvas id="archit-constellation-canvas" class="absolute top-0 left-0 w-full h-full"
|
|
style="z-index: 0;"></canvas>
|
|
<!-- 动态背景 -->
|
|
<div class="hero-bg"></div>
|
|
<div class="grid-bg"></div>
|
|
<!-- 粒子效果 -->
|
|
<div class="particles" id="archit-particles"></div>
|
|
|
|
<div class="container relative" style="z-index: 2;">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<div class="inline-block px-5 py-2 rounded-full bg-primary-10 border border-primary/30 mb-6 backdrop-blur-sm">
|
|
<span class="text-primary font-bold tracking-widest md:text-lg">国内最优秀的EDA处理器敏捷开发平台</span>
|
|
</div>
|
|
<h1 class="text-5xl md:text-7xl font-black text-slate-800 mb-6 leading-tight tracking-tight">
|
|
<span class="gradient-text drop-shadow-lg">ArchitStudio</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-slate-600 font-medium mb-10 leading-relaxed max-w-3xl mx-auto font-light">
|
|
基于“算法芯片化，场景架构化”理念，加速 DSA 设计与落地。让开发者摆脱底层繁复工作，一键生成全周期工具链与 SDK，重新定义定制处理器开发。
|
|
</p>
|
|
<div class="w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent mx-auto rounded-full opacity-70"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. 痛点与桥梁 (对应图片 1: 需求"左移"与方案"右移") -->
|
|
<section class="relative z-10 py-16 relative z-10 border-y border-slate-200">
|
|
<div class="container">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="text-center mb-12 animate-fade-in">
|
|
<h2 class="text-3xl font-bold text-slate-800 mb-4">解决行业痛点：双向奔赴</h2>
|
|
<p class="text-slate-500">打破垂直领域与芯片设计之间的壁垒</p>
|
|
</div>
|
|
|
|
<div class="relative relative z-10 p-8 rounded-2xl border border-slate-200 animate-fade-in">
|
|
<div class="grid md:grid-cols-3 gap-8 items-center relative z-10">
|
|
<!-- 左侧：处理器提供方 -->
|
|
<div class="text-center md:text-right">
|
|
<div
|
|
class="bg-blue-100 border-blue-200 p-4 rounded-full w-20 h-20 mx-auto md:ml-auto md:mr-0 mb-4 flex items-center justify-center border border-blue-500/30">
|
|
<i class="fa fa-server fa-2x text-blue-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2">处理器提供方</h3>
|
|
<ul class="text-slate-500 text-sm space-y-2">
|
|
<li class="flex items-center justify-center md:justify-end gap-2"><i
|
|
class="fa fa-check text-green-500"></i> 具备完整的处理器设计能力</li>
|
|
<li class="flex items-center justify-center md:justify-end gap-2"><i
|
|
class="fa fa-times text-red-500"></i> 缺乏对垂直领域的专业理解</li>
|
|
</ul>
|
|
<div class="mt-4 text-blue-400 font-semibold text-sm tracking-wider">方案“右移” <i
|
|
class="fa fa-long-arrow-right"></i></div>
|
|
</div>
|
|
|
|
<!-- 中间：ArchitStudio 桥梁 -->
|
|
<div class="text-center relative">
|
|
<div class="absolute inset-0 flex items-center justify-center -z-10 opacity-20">
|
|
<div class="w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
|
|
</div>
|
|
<div
|
|
class="glass-panel-light p-6 rounded-xl border border-white shadow-xl">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/12/logo_placeholder_bridge.png"
|
|
onerror="this.style.display='none'" class="h-12 mx-auto mb-2" alt="Logo" />
|
|
<h3 class="text-2xl font-bold gradient-text">ArchitStudio</h3>
|
|
<p class="text-xs text-slate-600 font-medium mt-2">连接算法与芯片的桥梁</p>
|
|
<i class="fa fa-exchange text-2xl text-primary mt-3 animate-pulse"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：DSA 需求方 -->
|
|
<div class="text-center md:text-left">
|
|
<div
|
|
class="bg-indigo-100 border-indigo-200 p-4 rounded-full w-20 h-20 mx-auto md:mr-auto md:ml-0 mb-4 flex items-center justify-center border border-indigo-200">
|
|
<i class="fa fa-users fa-2x text-indigo-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2">领域专用需求方</h3>
|
|
<ul class="text-slate-500 text-sm space-y-2">
|
|
<li class="flex items-center justify-center md:justify-start gap-2"><i
|
|
class="fa fa-check text-green-500"></i> 对场景和算法有深刻认识</li>
|
|
<li class="flex items-center justify-center md:justify-start gap-2"><i
|
|
class="fa fa-times text-red-500"></i> 缺乏处理器设计的专业知识</li>
|
|
</ul>
|
|
<div class="mt-4 text-indigo-400 font-semibold text-sm tracking-wider"><i
|
|
class="fa fa-long-arrow-left"></i> 需求“左移”</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. 敏捷开发方法学 (替换为图片4内容) -->
|
|
<section class="relative z-10 py-16 relative z-10 border-t border-slate-200" id="methodology">
|
|
<div class="container max-w-7xl mx-auto px-4">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-bold text-slate-800 mb-4">DSA 敏捷开发方法学</h2>
|
|
<p class="text-slate-500">融合 EDA 设计理念，重新定义处理器设计范式</p>
|
|
</div>
|
|
|
|
<div class="grid xl:grid-cols-12 gap-8 items-start">
|
|
|
|
<!-- 左侧：主要流程图 (9 cols) -->
|
|
<div class="xl:col-span-9">
|
|
|
|
<!-- 顶栏标题 -->
|
|
<div
|
|
class="bg-blue-600 text-white font-bold text-center py-3 rounded-t-lg shadow-lg mb-2 mx-12 md:mx-0">
|
|
DSA自动化设计平台 — “ArchitStudio”
|
|
</div>
|
|
|
|
<!-- 流程图主体 -->
|
|
<div class="space-y-4">
|
|
|
|
<!-- LAYER 1: 架构分析 -->
|
|
<div class="grid md:grid-cols-12 gap-4 items-stretch group animate-fade-in">
|
|
<!-- 左侧轴标 -->
|
|
<div class="hidden md:flex md:col-span-1 justify-center items-center relative">
|
|
<div
|
|
class="absolute right-0 top-0 bottom-0 border-r border-dashed border-slate-300 h-full">
|
|
</div>
|
|
<span
|
|
class="text-slate-500 text-xs tracking-widest [writing-mode:vertical-lr] py-4 border-l border-slate-200 pl-2">架构分析</span>
|
|
</div>
|
|
|
|
<!-- 中间内容框 -->
|
|
<div
|
|
class="md:col-span-8 glass-panel p-4 border border-teal-500/30 rounded-lg hover:border-teal-500 transition-colors relative">
|
|
<div class="flex flex-col sm:flex-row gap-3 text-sm mb-6">
|
|
<div
|
|
class="flex-1 bg-white text-gray-900 font-bold p-3 text-center rounded shadow-inner flex items-center justify-center">
|
|
隼瞻RISC-V处理器““原胚”
|
|
</div>
|
|
<div
|
|
class="flex-1 bg-white text-purple-900 font-bold p-3 text-center rounded shadow-inner flex items-center justify-center border-l-4 border-purple-300">
|
|
用户垂直领域应用算法 (类C语言)
|
|
</div>
|
|
</div>
|
|
<!-- 向下箭头 -->
|
|
<div
|
|
class="absolute left-1/2 top-[3.5rem] -translate-x-1/2 text-teal-400 hidden sm:block">
|
|
<i class="fa fa-arrow-down animate-bounce"></i>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-teal-50 border border-teal-200 p-4 text-center text-teal-800 font-medium rounded">
|
|
使用DSA设计工具分析引擎进行设计提取
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧工具名 -->
|
|
<div
|
|
class="md:col-span-3 flex flex-col justify-center border-l border-slate-200 pl-4 relative">
|
|
<div
|
|
class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-2 h-2 bg-teal-500 rounded-full hidden md:block">
|
|
</div>
|
|
<h3 class="text-xl font-bold text-teal-400">Archit Analyzer</h3>
|
|
<div class="h-0.5 w-8 bg-teal-400 my-2"></div>
|
|
<p class="text-xs text-slate-500">高度智能化的<br>DSA架构探索引擎</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 连接线 -->
|
|
<div class="hidden md:block h-6 border-l w-px border-dashed border-slate-300 ml-[4.16%]">
|
|
</div>
|
|
|
|
<!-- LAYER 2: 架构设计 -->
|
|
<div class="grid md:grid-cols-12 gap-4 items-stretch group animate-fade-in"
|
|
style="transition-delay: 150ms">
|
|
<!-- 左侧轴标 -->
|
|
<div class="hidden md:flex md:col-span-1 justify-center items-center relative">
|
|
<div
|
|
class="absolute right-0 top-0 bottom-0 border-r border-dashed border-slate-300 h-full">
|
|
</div>
|
|
<span
|
|
class="text-slate-500 text-xs tracking-widest [writing-mode:vertical-lr] py-4 border-l border-slate-200 pl-2">架构和指令集设计</span>
|
|
</div>
|
|
|
|
<!-- 中间内容框 -->
|
|
<div
|
|
class="md:col-span-8 glass-panel p-4 border border-orange-500/30 rounded-lg hover:border-orange-500 transition-colors relative">
|
|
<div class="grid sm:grid-cols-3 gap-2 text-xs mb-6 font-bold text-slate-800">
|
|
<div
|
|
class="bg-blue-600/80 p-3 rounded flex items-center justify-center text-center">
|
|
基础RISC-V<br>处理器家族</div>
|
|
<div
|
|
class="bg-blue-600/80 p-3 rounded flex items-center justify-center text-center">
|
|
用户自定义的<br>处理器架构和指令集</div>
|
|
<div
|
|
class="bg-blue-600/80 p-3 rounded flex items-center justify-center text-center">
|
|
可配置的<br>DSP组件</div>
|
|
</div>
|
|
|
|
<!-- 向下箭头 -->
|
|
<div
|
|
class="absolute left-1/2 top-[4rem] -translate-x-1/2 text-orange-400 hidden sm:block">
|
|
<i class="fa fa-arrow-down animate-bounce"></i>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-indigo-50 border border-indigo-200 p-4 text-center rounded text-indigo-800">
|
|
<p class="mb-2 text-sm">使用RISCAL架构描述语言对专用处理器进行设计描述，进而将设计编译到</p>
|
|
<div
|
|
class="bg-white border-slate-200 py-2 px-4 inline-block rounded font-mono text-xs text-indigo-600 font-bold border border-indigo-200">
|
|
一个多层次的语言 “中间件” (Wingsemi Intermediate Representation)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧工具名 -->
|
|
<div
|
|
class="md:col-span-3 flex flex-col justify-center border-l border-slate-200 pl-4 relative">
|
|
<div
|
|
class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-2 h-2 bg-orange-500 rounded-full hidden md:block">
|
|
</div>
|
|
<h3 class="text-xl font-bold text-orange-500">Archit Compiler</h3>
|
|
<div class="h-0.5 w-8 bg-orange-500 my-2"></div>
|
|
<p class="text-xs text-slate-500">高层次架构描述语言<br>“RISCAL” 和 “Super IR” 编译器</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 连接线 -->
|
|
<div class="hidden md:block h-6 border-l w-px border-dashed border-slate-300 ml-[4.16%]">
|
|
</div>
|
|
|
|
<!-- LAYER 3: 建模/生成 -->
|
|
<div class="grid md:grid-cols-12 gap-4 items-stretch group animate-fade-in"
|
|
style="transition-delay: 300ms">
|
|
<!-- 左侧轴标 -->
|
|
<div class="hidden md:flex md:col-span-1 justify-center items-center relative">
|
|
<div
|
|
class="absolute right-0 top-0 bottom-0 border-r border-dashed border-slate-300 h-full">
|
|
</div>
|
|
<span
|
|
class="text-slate-500 text-xs tracking-widest [writing-mode:vertical-lr] py-4 border-l border-slate-200 pl-2">建模<br>自动化生成引擎</span>
|
|
</div>
|
|
|
|
<!-- 中间内容框 -->
|
|
<div
|
|
class="md:col-span-8 glass-panel p-4 border border-purple-500/30 rounded-lg hover:border-purple-500 transition-colors relative">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-2">
|
|
<div
|
|
class="bg-blue-500 text-slate-800 text-[10px] sm:text-xs font-bold p-2 text-center h-20 flex items-center justify-center rounded hover:-translate-y-1 transition-transform">
|
|
处理器RTL<br>源代码自动<br>生成引擎</div>
|
|
<div
|
|
class="bg-blue-500 text-slate-800 text-[10px] sm:text-xs font-bold p-2 text-center h-20 flex items-center justify-center rounded hover:-translate-y-1 transition-transform">
|
|
处理器验证<br>环境 (UVM)<br>自动生成引擎</div>
|
|
<div
|
|
class="bg-blue-500 text-slate-800 text-[10px] sm:text-xs font-bold p-2 text-center h-20 flex items-center justify-center rounded hover:-translate-y-1 transition-transform">
|
|
GCC/LLVM<br>编译器自动<br>生成引擎</div>
|
|
<div
|
|
class="bg-blue-500 text-slate-800 text-[10px] sm:text-xs font-bold p-2 text-center h-20 flex items-center justify-center rounded hover:-translate-y-1 transition-transform">
|
|
软件工具链<br>自动<br>生成引擎</div>
|
|
</div>
|
|
<!-- 底部通用 -->
|
|
<div
|
|
class="mt-2 bg-blue-100 border border-blue-200 text-xs sm:text-sm text-blue-800 py-2 text-center rounded font-medium shadow-lg">
|
|
全局形式验证和测试向量生成
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧工具名 -->
|
|
<div
|
|
class="md:col-span-3 flex flex-col justify-center border-l border-slate-200 pl-4 relative">
|
|
<div
|
|
class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-2 h-2 bg-purple-500 rounded-full hidden md:block">
|
|
</div>
|
|
<h3 class="text-xl font-bold text-purple-500">Archit Generator</h3>
|
|
<div class="h-0.5 w-8 bg-purple-500 my-2"></div>
|
|
<p class="text-xs text-slate-500">“一键式” 生成<br>RISC-V定制处理器IP包<br>(HDK/SDK)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：对比 (3 cols) -->
|
|
<div class="xl:col-span-3 flex flex-col gap-8 h-full">
|
|
|
|
<!-- 传统人工 -->
|
|
<div
|
|
class="bg-slate-100 rounded-lg p-5 shadow-xl transform rotate-1 hover:rotate-0 transition-transform duration-500 border-2 border-gray-300">
|
|
<div class="text-center border-b-2 border-slate-300 pb-2 mb-4">
|
|
<h4 class="font-bold text-slate-800 text-lg">传统人工</h4>
|
|
</div>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-start gap-3">
|
|
<i class="fa fa-times text-red-600 font-bold mt-1"></i>
|
|
<span class="text-xs font-semibold text-slate-700 leading-tight">处理器设计技术门槛高</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i class="fa fa-times text-red-600 font-bold mt-1"></i>
|
|
<span
|
|
class="text-xs font-semibold text-slate-700 leading-tight">项目复杂度高，项目周期长，设计指标难以早期评估</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i class="fa fa-times text-red-600 font-bold mt-1"></i>
|
|
<span
|
|
class="text-xs font-semibold text-slate-700 leading-tight">实现端工作难度高且工作内容多，人力投入巨大</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- VS -->
|
|
<div class="text-center -my-4 relative z-10">
|
|
<span
|
|
class="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 drop-shadow-lg italic">VS</span>
|
|
</div>
|
|
|
|
<!-- DSA工具 -->
|
|
<div
|
|
class="bg-blue-50 rounded-lg p-5 shadow-xl transform -rotate-1 hover:rotate-0 transition-transform duration-500 border-2 border-blue-400 relative overflow-hidden">
|
|
<div
|
|
class="absolute top-0 right-0 w-24 h-24 bg-blue-200 rounded-full blur-xl -mr-12 -mt-12 opacity-50">
|
|
</div>
|
|
|
|
<div class="text-center border-b-2 border-blue-200 pb-2 mb-4 relative z-10">
|
|
<h4 class="font-bold text-blue-900 text-lg">DSA设计工具</h4>
|
|
</div>
|
|
<ul class="space-y-4 relative z-10">
|
|
<li class="flex items-start gap-3">
|
|
<i class="fa fa-check text-green-600 font-bold mt-1"></i>
|
|
<span
|
|
class="text-xs font-semibold text-blue-900 leading-tight">ArchitStudio分析引擎助力处理器架构师精准定位问题</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i class="fa fa-check text-green-600 font-bold mt-1"></i>
|
|
<span
|
|
class="text-xs font-semibold text-blue-900 leading-tight">RISCAL架构描述语言和DSP组件提升设计效率</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i class="fa fa-check text-green-600 font-bold mt-1"></i>
|
|
<span class="text-xs font-semibold text-blue-900 leading-tight">“一键式”
|
|
生成，大大降低人力投入，提升交付效率</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. 产品亮点 Section (基于1.png内容) -->
|
|
<section id="product-highlights"
|
|
class="relative z-10 py-20 bg-slate-50 border-y border-slate-200 overflow-hidden">
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute inset-0 pointer-events-none">
|
|
<div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl"></div>
|
|
<div class="absolute bottom-0 right-1/4 w-80 h-80 bg-purple-500/5 rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
<div class="container relative">
|
|
<!-- 标题区域 -->
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<div class="inline-flex items-center gap-3 mb-4">
|
|
<div class="h-px w-12 bg-gradient-to-r from-transparent to-blue-500"></div>
|
|
<span class="text-blue-400 text-sm font-semibold tracking-widest uppercase">Product
|
|
Highlights</span>
|
|
<div class="h-px w-12 bg-gradient-to-l from-transparent to-blue-500"></div>
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
|
|
<span class="gradient-text">产品亮点</span>
|
|
</h2>
|
|
<p class="text-slate-500 max-w-2xl mx-auto">四大核心优势，重新定义DSA处理器开发体验</p>
|
|
</div>
|
|
|
|
<!-- 亮点卡片网格 -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
|
|
|
|
<!-- 界面友好 -->
|
|
<div class="highlight-card group relative glass-panel-light rounded-2xl p-6 border border-white hover:border-cyan-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
|
|
style="transition-delay: 0ms">
|
|
<!-- 悬浮光效 -->
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-cyan-500/0 to-cyan-500/0 group-hover:from-cyan-500/5 group-hover:to-transparent transition-all duration-500">
|
|
</div>
|
|
<!-- 角标装饰 -->
|
|
<div
|
|
class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-cyan-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<!-- 图标 -->
|
|
<div
|
|
class="w-14 h-14 bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300 border border-cyan-500/20">
|
|
<i class="fa fa-desktop fa-lg text-cyan-400"></i>
|
|
</div>
|
|
|
|
<!-- 标题 -->
|
|
<h3 class="text-xl font-bold text-slate-800 mb-4 group-hover:text-cyan-300 transition-colors">
|
|
界面友好</h3>
|
|
|
|
<!-- 内容列表 -->
|
|
<ul class="space-y-3 text-sm text-slate-500">
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-cyan-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>流畅的交互流程</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-cyan-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>丰富的可视化操作</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-cyan-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>"乐高"式的积木搭建专用处理器</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 底部装饰线 -->
|
|
<div
|
|
class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-cyan-500 to-cyan-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 语言专业 -->
|
|
<div class="highlight-card group relative glass-panel-light rounded-2xl p-6 border border-white hover:border-violet-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
|
|
style="transition-delay: 100ms">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-violet-500/0 to-violet-500/0 group-hover:from-violet-500/5 group-hover:to-transparent transition-all duration-500">
|
|
</div>
|
|
<div
|
|
class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-violet-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<div
|
|
class="w-14 h-14 bg-gradient-to-br from-violet-500/20 to-violet-600/10 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300 border border-violet-500/20">
|
|
<i class="fa fa-code fa-lg text-violet-400"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold text-slate-800 mb-4 group-hover:text-violet-300 transition-colors">
|
|
语言专业</h3>
|
|
|
|
<ul class="space-y-3 text-sm text-slate-500">
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-violet-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>C-like语法，兼具高层抽象与微架构细节表达能力</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-violet-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>灵活支撑AI、通信、工业控制等各类领域专用处理器按需构建</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-violet-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 极致效率 -->
|
|
<div class="highlight-card group relative glass-panel-light rounded-2xl p-6 border border-white hover:border-amber-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
|
|
style="transition-delay: 200ms">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-amber-500/0 to-amber-500/0 group-hover:from-amber-500/5 group-hover:to-transparent transition-all duration-500">
|
|
</div>
|
|
<div
|
|
class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-amber-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<div
|
|
class="w-14 h-14 bg-gradient-to-br from-amber-500/20 to-amber-600/10 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300 border border-amber-500/20">
|
|
<i class="fa fa-bolt fa-lg text-amber-400"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold text-slate-800 mb-4 group-hover:text-amber-300 transition-colors">
|
|
极致效率</h3>
|
|
|
|
<ul class="space-y-3 text-sm text-slate-500">
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-amber-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>分钟级生成完整交付包</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-amber-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>提供PPA预估与瓶颈分析，使能架构级敏捷迭代</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-amber-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>MHz级时序精准仿真，加速验证迭代优化</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-500 to-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 全栈闭环 -->
|
|
<div class="highlight-card group relative glass-panel-light rounded-2xl p-6 border border-white hover:border-emerald-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
|
|
style="transition-delay: 300ms">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-emerald-500/0 to-emerald-500/0 group-hover:from-emerald-500/5 group-hover:to-transparent transition-all duration-500">
|
|
</div>
|
|
<div
|
|
class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-emerald-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<div
|
|
class="w-14 h-14 bg-gradient-to-br from-emerald-500/20 to-emerald-600/10 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300 border border-emerald-500/20">
|
|
<i class="fa fa-refresh fa-lg text-emerald-400"></i>
|
|
</div>
|
|
|
|
<h3
|
|
class="text-xl font-bold text-slate-800 mb-4 group-hover:text-emerald-300 transition-colors">
|
|
全栈闭环</h3>
|
|
|
|
<ul class="space-y-3 text-sm text-slate-500">
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-emerald-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>实现"定义即交付"</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-emerald-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>打通从架构创新到硬件落地的最后一公里</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-500 to-emerald-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部装饰图形 -->
|
|
<div class="flex justify-center mt-12">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-cyan-500 animate-pulse"></div>
|
|
<div class="w-16 h-px bg-gradient-to-r from-cyan-500 to-violet-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-gradient-to-r from-violet-500 to-amber-500 animate-pulse"
|
|
style="animation-delay: 0.2s"></div>
|
|
<div class="w-16 h-px bg-gradient-to-r from-amber-500 to-emerald-500"></div>
|
|
<div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" style="animation-delay: 0.4s">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. 敏捷设计流程 (对应图片 2: EDA 辅助的 DSA 专用处理器设计流程) -->
|
|
<section class="relative z-10 py-16 relative z-10">
|
|
<div class="container">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-bold text-slate-800 mb-4">EDA 辅助的敏捷设计流程</h2>
|
|
<p class="text-slate-500">从目标程序到芯片交付，打造全链路闭环</p>
|
|
</div>
|
|
|
|
<!-- 流程图示化 -->
|
|
<div class="max-w-6xl mx-auto relative">
|
|
<!-- 核心流程框 -->
|
|
<div
|
|
class="glass-panel-light border border-slate-200 rounded-3xl p-8 md:p-12 relative overflow-hidden animate-fade-in">
|
|
<div
|
|
class="absolute top-0 right-0 bg-primary text-slate-800 text-xs font-bold px-4 py-2 rounded-bl-xl">
|
|
ArchitStudio Core Flow</div>
|
|
|
|
<div class="grid md:grid-cols-4 gap-6 relative z-10">
|
|
<!-- Step 1 -->
|
|
<div class="text-center step-item relative">
|
|
<div
|
|
class="bg-blue-100 border-blue-200 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 border border-blue-500/50 z-10 relative relative z-10">
|
|
<i class="fa fa-file-code-o fa-2x text-blue-400"></i>
|
|
</div>
|
|
<div class="hidden md:block step-connector"></div>
|
|
<h4 class="text-slate-800 font-bold">目标程序</h4>
|
|
<p class="text-xs text-slate-500 font-medium mt-2">Profiler 分析</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="text-center step-item relative">
|
|
<div
|
|
class="bg-blue-100 border-blue-200 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 border border-blue-500/50 z-10 relative relative z-10">
|
|
<i class="fa fa-search fa-2x text-blue-400"></i>
|
|
</div>
|
|
<div class="hidden md:block step-connector"></div>
|
|
<h4 class="text-slate-800 font-bold">架构探索</h4>
|
|
<p class="text-xs text-slate-500 font-medium mt-2">RISCAL 建模</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="text-center step-item relative">
|
|
<div
|
|
class="bg-blue-100 border-blue-200 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 border border-blue-500/50 z-10 relative relative z-10">
|
|
<i class="fa fa-cogs fa-2x text-blue-400"></i>
|
|
</div>
|
|
<div class="hidden md:block step-connector"></div>
|
|
<h4 class="text-slate-800 font-bold">自动生成</h4>
|
|
<p class="text-xs text-slate-500 font-medium mt-2">Processor Gen</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="text-center step-item relative">
|
|
<div
|
|
class="bg-emerald-100 border-emerald-200 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 border border-green-500/50 z-10 relative relative z-10">
|
|
<i class="fa fa-gift fa-2x text-green-400"></i>
|
|
</div>
|
|
<h4 class="text-slate-800 font-bold">交付包</h4>
|
|
<p class="text-xs text-slate-500 font-medium mt-2">SDK & HDK</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 迭代闭环示意 -->
|
|
<div
|
|
class="mt-12 relative z-10 rounded-xl p-6 border border-white flex flex-col md:flex-row gap-6 justify-between items-center">
|
|
<div class="flex-1 space-y-2">
|
|
<div class="flex items-center gap-3">
|
|
<i class="fa fa-refresh text-primary animate-spin-slow"
|
|
style="animation-duration: 3s"></i>
|
|
<span class="text-slate-600 font-medium font-medium">敏捷架构迭代</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<i class="fa fa-check-circle-o text-primary"></i>
|
|
<span class="text-slate-600 font-medium font-medium">敏捷功能验证</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<i class="fa fa-bar-chart text-primary"></i>
|
|
<span class="text-slate-600 font-medium font-medium">敏捷性能分析 (PPA)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 grid grid-cols-2 gap-4 w-full">
|
|
<div class="bg-blue-500/10 p-4 rounded border border-blue-500/20">
|
|
<h5 class="text-blue-400 font-bold mb-2">SDK 软件开发包</h5>
|
|
<p class="text-xs text-slate-500">编译器、调试器、仿真器、性能剖析器</p>
|
|
</div>
|
|
<div class="bg-indigo-500/10 p-4 rounded border border-indigo-500/20">
|
|
<h5 class="text-indigo-400 font-bold mb-2">HDK 硬件开发包</h5>
|
|
<p class="text-xs text-slate-500">RTL 代码、验证环境、综合脚本、FPGA网表</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. 核心组件 (对应图片 4: Generator, Compiler, Analyzer) -->
|
|
<section class="relative z-10 py-16 relative z-10">
|
|
<div class="container">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-bold text-slate-800 mb-4">平台核心组件</h2>
|
|
<p class="text-slate-500">Architect the Vision, Shape the Future</p>
|
|
<!-- 核心组件列表 -->
|
|
<div class="flex flex-wrap justify-center gap-3 mt-6">
|
|
<span
|
|
class="bg-primary/20 text-primary px-4 py-2 rounded-full text-sm border border-primary/30">Archit
|
|
Analyzer</span>
|
|
<span
|
|
class="bg-primary/20 text-primary px-4 py-2 rounded-full text-sm border border-primary/30">Archit
|
|
Compiler</span>
|
|
<span
|
|
class="bg-primary/20 text-primary px-4 py-2 rounded-full text-sm border border-primary/30">Archit
|
|
Designer</span>
|
|
<span
|
|
class="bg-primary/20 text-primary px-4 py-2 rounded-full text-sm border border-primary/30">Archit
|
|
Generator</span>
|
|
<span
|
|
class="bg-primary/20 text-primary px-4 py-2 rounded-full text-sm border border-primary/30">Archit
|
|
Agent</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<!-- Archit Analyzer -->
|
|
<div class="glass-panel-light border border-slate-200 rounded-xl p-0 overflow-hidden hover-lift animate-fade-in flex flex-col h-full"
|
|
style="transition-delay: 200ms">
|
|
<div class="bg-gradient-to-r from-purple-600/20 to-purple-800/20 p-6 border-b border-white/5">
|
|
<i class="fa fa-area-chart fa-2x text-purple-500 mb-4"></i>
|
|
<h3 class="text-xl font-bold text-slate-800">Archit Analyzer</h3>
|
|
<p class="text-sm text-purple-500/80 mt-1">全方位性能与PPA剖析</p>
|
|
</div>
|
|
<div class="p-6 text-slate-500 text-sm space-y-4 flex-grow">
|
|
<p>从架构、微架构层面提供不同维度的详细信息，为架构优化指明方向。</p>
|
|
<ul class="space-y-2 list-disc pl-4 marker:text-purple-500">
|
|
<li>指令 Trace & 函数调用关系分析</li>
|
|
<li>流水线分析 & 指令利用率分析</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Archit Compiler -->
|
|
<div class="glass-panel-light border border-slate-200 rounded-xl p-0 overflow-hidden hover-lift animate-fade-in flex flex-col h-full"
|
|
style="transition-delay: 100ms">
|
|
<div class="bg-gradient-to-r from-blue-600/20 to-blue-800/20 p-6 border-b border-white/5">
|
|
<i class="fa fa-cubes fa-2x text-blue-500 mb-4"></i>
|
|
<h3 class="text-xl font-bold text-slate-800">Archit Compiler</h3>
|
|
<p class="text-sm text-blue-500/80 mt-1">统一编译框架</p>
|
|
</div>
|
|
<div class="p-6 text-slate-500 text-sm space-y-4 flex-grow">
|
|
<p>将<strong>RISCAL语言</strong>转换成不同后端组件需要的信息，确保所有信息严格一致、语言对齐。</p>
|
|
<ul class="space-y-2 list-disc pl-4 marker:text-blue-500">
|
|
<li>System Verilog 生成</li>
|
|
<li>LLVM Compiler 支持</li>
|
|
<li>UVM Verification 验证环境</li>
|
|
<li>Simulators & RTOS 实时操作系统</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Archit Designer -->
|
|
<div class="glass-panel-light border border-slate-200 rounded-xl p-0 overflow-hidden hover-lift animate-fade-in flex flex-col h-full"
|
|
style="transition-delay: 150ms">
|
|
<div class="bg-gradient-to-r from-green-600/20 to-green-800/20 p-6 border-b border-white/5">
|
|
<i class="fa fa-pencil-square-o fa-2x text-green-500 mb-4"></i>
|
|
<h3 class="text-xl font-bold text-slate-800">Archit Designer</h3>
|
|
<p class="text-sm text-green-500/80 mt-1">多层次可视化设计环境</p>
|
|
</div>
|
|
<div class="p-6 text-slate-500 text-sm space-y-4 flex-grow">
|
|
<p>由浅入深进行专用处理器设计，<strong>"乐高"式积木搭建</strong>让设计变得简单直观。</p>
|
|
<ul class="space-y-2 list-disc pl-4 marker:text-green-500">
|
|
<li>Core Editor: 打破初学者的入门屏障</li>
|
|
<li>RISCAL Editor: 专用指令集设计</li>
|
|
<li>C/C++ Editor: 出色的开发IDE</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Archit Generator -->
|
|
<div
|
|
class="glass-panel-light border border-slate-200 rounded-xl p-0 overflow-hidden hover-lift animate-fade-in flex flex-col h-full">
|
|
<div class="bg-gradient-to-r from-yellow-600/20 to-yellow-800/20 p-6 border-b border-white/5">
|
|
<i class="fa fa-bolt fa-2x text-yellow-500 mb-4"></i>
|
|
<h3 class="text-xl font-bold text-slate-800">Archit Generator</h3>
|
|
<p class="text-sm text-yellow-500/80 mt-1">全栈工具链一键生成</p>
|
|
</div>
|
|
<div class="p-6 text-slate-500 text-sm space-y-4 flex-grow">
|
|
<p>基于 <strong>RISCAL</strong> 指令描述和 <strong>WingIR</strong> 多层次语言中间表达，自动生成全套开发环境。</p>
|
|
<ul class="space-y-2 list-disc pl-4 marker:text-yellow-500">
|
|
<li>Compiler, Simulator, Profiler 生成</li>
|
|
<li>RTL, Verification, Libraries 生成</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- RISCAL 语言介绍 Section (基于2.png) -->
|
|
<section id="riscal-intro"
|
|
class="relative z-10 py-20 relative z-10 overflow-hidden">
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute inset-0 pointer-events-none">
|
|
<div class="absolute top-1/4 left-0 w-[500px] h-[500px] bg-orange-500/5 rounded-full blur-[120px]">
|
|
</div>
|
|
<div class="absolute bottom-0 right-0 w-[400px] h-[400px] bg-blue-500/5 rounded-full blur-[100px]">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 网格背景 -->
|
|
<div class="absolute inset-0 opacity-30">
|
|
<div class="absolute inset-0"
|
|
style="background-image: linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px); background-size: 40px 40px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container relative max-w-7xl mx-auto px-4">
|
|
<!-- 标题区域 -->
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<div class="inline-flex items-center gap-3 mb-4">
|
|
<div class="h-px w-12 bg-gradient-to-r from-transparent to-orange-500"></div>
|
|
<span class="text-orange-400 text-sm font-semibold tracking-widest uppercase">Architecture
|
|
Language</span>
|
|
<div class="h-px w-12 bg-gradient-to-l from-transparent to-orange-500"></div>
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
|
|
<span class="text-orange-400">R</span>etargetable
|
|
<span class="text-blue-400">I</span>nstruction
|
|
<span class="text-blue-400">S</span>et
|
|
<span class="text-blue-400">C</span>ompiler and
|
|
<span class="text-orange-400">A</span>rchitecture
|
|
<span class="text-orange-400">L</span>anguage
|
|
</h2>
|
|
<div class="mt-6 inline-block">
|
|
<span class="text-4xl md:text-5xl font-black tracking-wider riscal-title-gradient">RISCAL</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 三卡片网格 -->
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
|
|
<!-- Retargetable 卡片 -->
|
|
<div class="riscal-card group relative glass-panel-light rounded-2xl p-8 border border-slate-200 hover:border-orange-400 transition-all duration-500 animate-fade-in overflow-hidden"
|
|
style="transition-delay: 0ms">
|
|
<!-- 顶部装饰 -->
|
|
<div
|
|
class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-orange-500 via-yellow-500 to-orange-400">
|
|
</div>
|
|
<!-- 悬浮光效 -->
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-orange-500/0 to-orange-500/0 group-hover:from-orange-500/5 group-hover:to-transparent transition-all duration-500">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<!-- 标签 -->
|
|
<div
|
|
class="inline-block px-4 py-2 rounded-lg bg-gradient-to-r from-orange-500/20 to-yellow-500/20 border border-orange-500/30 mb-6">
|
|
<span class="text-xl font-bold text-orange-400">"Retargetable"</span>
|
|
</div>
|
|
|
|
<!-- 内容 -->
|
|
<p class="text-slate-600 font-medium leading-relaxed">
|
|
通过可重定向的设计哲学，<strong class="text-orange-300">RISCAL</strong>
|
|
能够基于用户需求快速迭代生成定制化指令集，精准匹配细分场景的计算需求
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 底部装饰 -->
|
|
<div
|
|
class="absolute bottom-4 right-4 w-16 h-16 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="text-orange-400">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RISC 卡片 -->
|
|
<div class="riscal-card group relative glass-panel-light rounded-2xl p-8 border border-slate-200 hover:border-blue-400 transition-all duration-500 animate-fade-in overflow-hidden"
|
|
style="transition-delay: 150ms">
|
|
<!-- 顶部装饰 -->
|
|
<div
|
|
class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-400">
|
|
</div>
|
|
<!-- 悬浮光效 -->
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-blue-500/0 group-hover:from-blue-500/5 group-hover:to-transparent transition-all duration-500">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<!-- 标签 -->
|
|
<div
|
|
class="inline-block px-4 py-2 rounded-lg bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border border-blue-500/30 mb-6">
|
|
<span class="text-xl font-bold text-blue-400">"RISC"</span>
|
|
</div>
|
|
|
|
<!-- 内容 -->
|
|
<p class="text-slate-600 font-medium leading-relaxed">
|
|
以 <strong class="text-blue-300">RISC-V 架构</strong>为根基，赋能领域特定指令集的敏捷定义与高效实现，让 DSA
|
|
设计回归开放与简洁的本质
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 底部装饰 -->
|
|
<div
|
|
class="absolute bottom-4 right-4 w-16 h-16 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="text-blue-400">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CAL 卡片 -->
|
|
<div class="riscal-card group relative glass-panel-light rounded-2xl p-8 border border-slate-200 hover:border-orange-400 transition-all duration-500 animate-fade-in overflow-hidden"
|
|
style="transition-delay: 300ms">
|
|
<!-- 顶部装饰 -->
|
|
<div
|
|
class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-orange-400 via-red-500 to-orange-500">
|
|
</div>
|
|
<!-- 悬浮光效 -->
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-orange-500/0 to-orange-500/0 group-hover:from-orange-500/5 group-hover:to-transparent transition-all duration-500">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<!-- 标签 -->
|
|
<div
|
|
class="inline-block px-4 py-2 rounded-lg bg-gradient-to-r from-orange-500/20 to-red-500/20 border border-orange-500/30 mb-6">
|
|
<span class="text-xl font-bold text-orange-400">"CAL"</span>
|
|
</div>
|
|
|
|
<!-- 内容 -->
|
|
<p class="text-slate-600 font-medium leading-relaxed">
|
|
语言驱动的编译器与硬件 <strong class="text-orange-300">RTL
|
|
同源共生</strong>，从指令定义到工具链生成无缝一致，彻底消除架构与实现间的语义鸿沟
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 底部装饰 -->
|
|
<div
|
|
class="absolute bottom-4 right-4 w-16 h-16 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" class="text-orange-400">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部连接装饰 -->
|
|
<div class="flex justify-center mt-12">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-3 h-3 rounded-full bg-orange-500 animate-pulse"></div>
|
|
<div class="w-20 h-px bg-gradient-to-r from-orange-500 to-blue-500"></div>
|
|
<div class="w-4 h-4 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 animate-pulse"
|
|
style="animation-delay: 0.3s"></div>
|
|
<div class="w-20 h-px bg-gradient-to-r from-blue-500 to-orange-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-orange-500 animate-pulse" style="animation-delay: 0.6s">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- RISCAL Q&A Section (基于3.png) -->
|
|
<section id="riscal-qa" class="relative z-10 py-20 bg-slate-50 border-y border-slate-200 overflow-hidden">
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute inset-0 pointer-events-none">
|
|
<div class="absolute top-0 left-1/4 w-[600px] h-[600px] bg-blue-500/5 rounded-full blur-[150px]"></div>
|
|
<div class="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-orange-500/5 rounded-full blur-[120px]">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container relative max-w-7xl mx-auto px-4">
|
|
<!-- 标题区域 -->
|
|
<div class="text-center mb-8 animate-fade-in">
|
|
<div class="inline-flex items-center gap-3 mb-4">
|
|
<div class="h-px w-12 bg-gradient-to-r from-transparent to-blue-500"></div>
|
|
<span class="text-blue-400 text-sm font-semibold tracking-widest uppercase">Language Q&A</span>
|
|
<div class="h-px w-12 bg-gradient-to-l from-transparent to-blue-500"></div>
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-800">
|
|
<span class="gradient-text">RISCAL</span><sup class="text-sm text-slate-500">™</sup> 语言 Q&A
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- 中心数字方块 - 置顶显示 -->
|
|
<div class="flex justify-center mb-12">
|
|
<div class="qa-center-blocks relative flex gap-3">
|
|
<!-- 4个数字方块横向排列 -->
|
|
<div
|
|
class="w-14 h-14 bg-blue-600 rounded-lg flex items-center justify-center text-slate-800 text-2xl font-bold shadow-lg transform -rotate-3 hover:rotate-0 transition-transform duration-300">
|
|
1
|
|
</div>
|
|
<div
|
|
class="w-14 h-14 bg-orange-500 rounded-lg flex items-center justify-center text-slate-800 text-2xl font-bold shadow-lg transform rotate-3 hover:rotate-0 transition-transform duration-300">
|
|
2
|
|
</div>
|
|
<div
|
|
class="w-14 h-14 bg-blue-600 rounded-lg flex items-center justify-center text-slate-800 text-2xl font-bold shadow-lg transform -rotate-3 hover:rotate-0 transition-transform duration-300">
|
|
3
|
|
</div>
|
|
<div
|
|
class="w-14 h-14 bg-orange-500 rounded-lg flex items-center justify-center text-slate-800 text-2xl font-bold shadow-lg transform rotate-3 hover:rotate-0 transition-transform duration-300">
|
|
4
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 四个Q&A卡片网格 - Answer直接展示 -->
|
|
<div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
|
|
|
<!-- Q1: 动机 -->
|
|
<div class="qa-card group glass-panel-light rounded-2xl p-6 border border-slate-200 hover:border-blue-400 transition-all duration-500 animate-fade-in"
|
|
style="transition-delay: 0ms">
|
|
<!-- 数字标识 + 标签 -->
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-slate-800 text-lg font-bold shadow-md flex-shrink-0">
|
|
1
|
|
</div>
|
|
<div class="inline-block px-4 py-1.5 rounded-full bg-blue-500/20 border border-blue-500/30">
|
|
<span class="text-blue-400 font-semibold">动机</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 问题 -->
|
|
<h3 class="text-lg font-bold text-slate-800 mb-4">为什么设计一个全新的语言？</h3>
|
|
|
|
<!-- Answer 标签 -->
|
|
<div
|
|
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-orange-500/20 border border-orange-500/30 mb-4">
|
|
<span class="text-orange-400 text-sm font-medium">Answer</span>
|
|
</div>
|
|
|
|
<!-- 答案内容 - 直接显示 -->
|
|
<ul class="text-slate-600 font-medium text-sm space-y-2 pt-2 border-t border-white">
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-blue-400 mt-0.5 flex-shrink-0"></i>
|
|
<span>DSA与DSL的关联性</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-blue-400 mt-0.5 flex-shrink-0"></i>
|
|
<span>后端组件的一致性与自动化</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Q2: 门槛 -->
|
|
<div class="qa-card group glass-panel-light rounded-2xl p-6 border border-slate-200 hover:border-orange-400 transition-all duration-500 animate-fade-in"
|
|
style="transition-delay: 150ms">
|
|
<!-- 数字标识 + 标签 -->
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center text-slate-800 text-lg font-bold shadow-md flex-shrink-0">
|
|
2
|
|
</div>
|
|
<div
|
|
class="inline-block px-4 py-1.5 rounded-full bg-orange-500/20 border border-orange-500/30">
|
|
<span class="text-orange-400 font-semibold">门槛</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 问题 -->
|
|
<h3 class="text-lg font-bold text-slate-800 mb-4">这个语言的学习曲线会不会很高？</h3>
|
|
|
|
<!-- Answer 标签 -->
|
|
<div
|
|
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-orange-500/20 border border-orange-500/30 mb-4">
|
|
<span class="text-orange-400 text-sm font-medium">Answer</span>
|
|
</div>
|
|
|
|
<!-- 答案内容 - 直接显示 -->
|
|
<ul class="text-slate-600 font-medium text-sm space-y-2 pt-2 border-t border-white">
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-orange-400 mt-0.5 flex-shrink-0"></i>
|
|
<span>C-like的语法</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-orange-400 mt-0.5 flex-shrink-0"></i>
|
|
<span>聚焦指令语义</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Q3: 能力 -->
|
|
<div class="qa-card group glass-panel-light rounded-2xl p-6 border border-slate-200 hover:border-blue-400 transition-all duration-500 animate-fade-in"
|
|
style="transition-delay: 300ms">
|
|
<!-- 数字标识 + 标签 -->
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-slate-800 text-lg font-bold shadow-md flex-shrink-0">
|
|
3
|
|
</div>
|
|
<div class="inline-block px-4 py-1.5 rounded-full bg-blue-500/20 border border-blue-500/30">
|
|
<span class="text-blue-400 font-semibold">能力</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 问题 -->
|
|
<h3 class="text-lg font-bold text-slate-800 mb-4">这个语言的描述能力怎么样？</h3>
|
|
|
|
<!-- Answer 标签 -->
|
|
<div
|
|
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-orange-500/20 border border-orange-500/30 mb-4">
|
|
<span class="text-orange-400 text-sm font-medium">Answer</span>
|
|
</div>
|
|
|
|
<!-- 答案内容 - 直接显示 -->
|
|
<ul class="text-slate-600 font-medium text-sm space-y-2 pt-2 border-t border-white">
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-blue-400 mt-0.5 flex-shrink-0"></i>
|
|
<span>图灵完备性</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-blue-400 mt-0.5 flex-shrink-0"></i>
|
|
<span>描述性语言</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-check-circle text-blue-400 mt-0.5 flex-shrink-0"></i>
|
|
<span>高层次抽象与精细化的电路描述</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Q4: 收益 -->
|
|
<div class="qa-card group glass-panel-light rounded-2xl p-6 border border-slate-200 hover:border-orange-400 transition-all duration-500 animate-fade-in"
|
|
style="transition-delay: 450ms">
|
|
<!-- 数字标识 + 标签 -->
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center text-slate-800 text-lg font-bold shadow-md flex-shrink-0">
|
|
4
|
|
</div>
|
|
<div
|
|
class="inline-block px-4 py-1.5 rounded-full bg-orange-500/20 border border-orange-500/30">
|
|
<span class="text-orange-400 font-semibold">收益</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 问题 -->
|
|
<h3 class="text-lg font-bold text-slate-800 mb-4">使用这个语言能带来多大的效率提升？</h3>
|
|
|
|
<!-- Answer 标签 -->
|
|
<div
|
|
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-orange-500/20 border border-orange-500/30 mb-4">
|
|
<span class="text-orange-400 text-sm font-medium">Answer</span>
|
|
</div>
|
|
|
|
<!-- 答案内容 - 直接显示 -->
|
|
<ul class="text-slate-600 font-medium text-sm space-y-2 pt-2 border-t border-white">
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-clock-o text-orange-400 mt-0.5 flex-shrink-0"></i>
|
|
<span>第一个RISCAL程序：<strong class="text-slate-800">一周</strong></span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i class="fa fa-clock-o text-orange-400 mt-0.5 flex-shrink-0"></i>
|
|
<span>第一个RISCAL方案：<strong class="text-slate-800">一个月</strong></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. 用户价值 (保留原有内容) -->
|
|
<section id="features" class="section-content py-16 relative z-10">
|
|
<div class="container">
|
|
<div class="max-w-4xl mx-auto mb-16 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-slate-800">用户价值</h2>
|
|
<p class="text-slate-500">为何选择 ArchitStudio 进行 DSA 设计？</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 max-w-6xl mx-auto">
|
|
<!-- Value Items -->
|
|
<div
|
|
class="relative z-10 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
|
|
<div class="flex items-start">
|
|
<i class="fa fa-rocket text-primary mt-1 fa-2x"></i>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">极致的 DSA 性能</h4>
|
|
<p class="text-slate-500 text-sm">通过专用指令集设计，大幅提升 PPA 指标。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative z-10 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
|
|
<div class="flex items-start">
|
|
<i class="fa fa-users text-primary mt-1 fa-2x"></i>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">大幅降低门槛</h4>
|
|
<p class="text-slate-500 text-sm">让更多工程师参与并主导 DSA 处理器设计。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative z-10 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
|
|
<div class="flex items-start">
|
|
<i class="fa fa-clock-o text-primary mt-1 fa-2x"></i>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">显著缩短周期</h4>
|
|
<p class="text-slate-500 text-sm">从架构定义到 IP 包交付时间压缩数倍。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative z-10 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
|
|
<div class="flex items-start">
|
|
<i class="fa fa-shield text-primary mt-1 fa-2x"></i>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">提升设计质量</h4>
|
|
<p class="text-slate-500 text-sm">自动化流程减少人为错误，确保一致性。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative z-10 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
|
|
<div class="flex items-start">
|
|
<i class="fa fa-eye text-primary mt-1 fa-2x"></i>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">早期精准评估</h4>
|
|
<p class="text-slate-500 text-sm">智能探索引擎助力更早、更准确地评估PPA设计指标。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative z-10 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
|
|
<div class="flex items-start">
|
|
<i class="fa fa-lightbulb-o text-primary mt-1 fa-2x"></i>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">聚焦核心创新</h4>
|
|
<p class="text-slate-500 text-sm">设计师得以从繁重的底层实现中解放，专注于最具价值的架构创新和算法优化。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative z-10 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
|
|
<div class="flex items-start">
|
|
<i class="fa fa-globe text-primary mt-1 fa-2x"></i>
|
|
<div class="ml-4">
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">拥抱RISC-V生态</h4>
|
|
<p class="text-slate-500 text-sm">基于开放、活力的RISC-V指令集，确保处理器的灵活性和生态兼容性。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div> <!-- end #sj-product-page -->
|
|
|
|
<!-- 咨询按钮 -->
|
|
<div class="fixed bottom-12 right-12 z-50">
|
|
<button id="consult-button"
|
|
class="bg-primary hover:bg-blue-600 text-slate-800 py-4 px-8 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 flex items-center gap-3">
|
|
<i class="fa fa-comments-o fa-2x"></i>
|
|
<span class="font-bold">立刻咨询</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Scroll Animation Script -->
|
|
<script>
|
|
// 星座背景效果
|
|
class ConstellationBackground {
|
|
constructor(canvasId, sectionId) {
|
|
this.canvas = document.getElementById(canvasId);
|
|
if (!this.canvas) return;
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.section = document.getElementById(sectionId);
|
|
this.particles = [];
|
|
this.mouse = { x: null, y: null, radius: 150 };
|
|
this.particleCount = 80;
|
|
this.connectionDistance = 150;
|
|
this.mouseInfluenceRadius = 200;
|
|
|
|
this.init();
|
|
this.animate();
|
|
this.addEventListeners();
|
|
}
|
|
|
|
init() {
|
|
this.resize();
|
|
this.createParticles();
|
|
}
|
|
|
|
resize() {
|
|
if (!this.section) return;
|
|
this.canvas.width = this.section.offsetWidth;
|
|
this.canvas.height = this.section.offsetHeight;
|
|
}
|
|
|
|
createParticles() {
|
|
this.particles = [];
|
|
for (let i = 0; i < this.particleCount; i++) {
|
|
this.particles.push({
|
|
x: Math.random() * this.canvas.width,
|
|
y: Math.random() * this.canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.5,
|
|
vy: (Math.random() - 0.5) * 0.5,
|
|
radius: Math.random() * 2 + 1,
|
|
baseRadius: Math.random() * 2 + 1,
|
|
color: this.getRandomColor(),
|
|
pulseSpeed: Math.random() * 0.02 + 0.01,
|
|
pulseOffset: Math.random() * Math.PI * 2
|
|
});
|
|
}
|
|
}
|
|
|
|
getRandomColor() {
|
|
const colors = [
|
|
'rgba(59, 130, 246, 0.4)',
|
|
'rgba(96, 165, 250, 0.4)',
|
|
'rgba(139, 92, 246, 0.35)',
|
|
'rgba(147, 197, 253, 0.3)',
|
|
'rgba(255, 255, 255, 0.5)'
|
|
];
|
|
return colors[Math.floor(Math.random() * colors.length)];
|
|
}
|
|
|
|
addEventListeners() {
|
|
window.addEventListener('resize', () => {
|
|
this.resize();
|
|
this.createParticles();
|
|
});
|
|
|
|
if (this.section) {
|
|
this.section.addEventListener('mousemove', (e) => {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
this.mouse.x = e.clientX - rect.left;
|
|
this.mouse.y = e.clientY - rect.top;
|
|
});
|
|
|
|
this.section.addEventListener('mouseleave', () => {
|
|
this.mouse.x = null;
|
|
this.mouse.y = null;
|
|
});
|
|
}
|
|
}
|
|
|
|
drawParticle(particle, time) {
|
|
const pulse = Math.sin(time * particle.pulseSpeed + particle.pulseOffset) * 0.5 + 0.5;
|
|
const currentRadius = particle.baseRadius + pulse * 1.5;
|
|
|
|
const gradient = this.ctx.createRadialGradient(
|
|
particle.x, particle.y, 0,
|
|
particle.x, particle.y, currentRadius * 3
|
|
);
|
|
gradient.addColorStop(0, particle.color);
|
|
gradient.addColorStop(0.5, particle.color.replace('0.8', '0.3').replace('0.7', '0.2').replace('0.6', '0.15').replace('0.9', '0.4'));
|
|
gradient.addColorStop(1, 'transparent');
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(particle.x, particle.y, currentRadius * 3, 0, Math.PI * 2);
|
|
this.ctx.fillStyle = gradient;
|
|
this.ctx.fill();
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(particle.x, particle.y, currentRadius, 0, Math.PI * 2);
|
|
this.ctx.fillStyle = particle.color;
|
|
this.ctx.fill();
|
|
}
|
|
|
|
drawConnections() {
|
|
for (let i = 0; i < this.particles.length; i++) {
|
|
for (let j = i + 1; j < this.particles.length; j++) {
|
|
const dx = this.particles[i].x - this.particles[j].x;
|
|
const dy = this.particles[i].y - this.particles[j].y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < this.connectionDistance) {
|
|
const opacity = (1 - distance / this.connectionDistance) * 0.5;
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
|
|
this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
|
|
this.ctx.strokeStyle = `rgba(59, 130, 246, ${opacity})`;
|
|
this.ctx.lineWidth = 1;
|
|
this.ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
drawMouseConnections() {
|
|
if (this.mouse.x === null || this.mouse.y === null) return;
|
|
|
|
this.particles.forEach(particle => {
|
|
const dx = particle.x - this.mouse.x;
|
|
const dy = particle.y - this.mouse.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < this.mouseInfluenceRadius) {
|
|
const opacity = (1 - distance / this.mouseInfluenceRadius) * 0.8;
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(this.mouse.x, this.mouse.y);
|
|
this.ctx.lineTo(particle.x, particle.y);
|
|
const gradient = this.ctx.createLinearGradient(
|
|
this.mouse.x, this.mouse.y,
|
|
particle.x, particle.y
|
|
);
|
|
gradient.addColorStop(0, `rgba(139, 92, 246, ${opacity})`);
|
|
gradient.addColorStop(1, `rgba(59, 130, 246, ${opacity * 0.5})`);
|
|
this.ctx.strokeStyle = gradient;
|
|
this.ctx.lineWidth = 1.5;
|
|
this.ctx.stroke();
|
|
}
|
|
});
|
|
|
|
const mouseGlow = this.ctx.createRadialGradient(
|
|
this.mouse.x, this.mouse.y, 0,
|
|
this.mouse.x, this.mouse.y, 30
|
|
);
|
|
mouseGlow.addColorStop(0, 'rgba(139, 92, 246, 0.3)');
|
|
mouseGlow.addColorStop(0.5, 'rgba(59, 130, 246, 0.1)');
|
|
mouseGlow.addColorStop(1, 'transparent');
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(this.mouse.x, this.mouse.y, 30, 0, Math.PI * 2);
|
|
this.ctx.fillStyle = mouseGlow;
|
|
this.ctx.fill();
|
|
}
|
|
|
|
updateParticles() {
|
|
this.particles.forEach(particle => {
|
|
particle.x += particle.vx;
|
|
particle.y += particle.vy;
|
|
|
|
if (this.mouse.x !== null && this.mouse.y !== null) {
|
|
const dx = this.mouse.x - particle.x;
|
|
const dy = this.mouse.y - particle.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < this.mouseInfluenceRadius) {
|
|
const force = (this.mouseInfluenceRadius - distance) / this.mouseInfluenceRadius;
|
|
const angle = Math.atan2(dy, dx);
|
|
particle.vx += Math.cos(angle) * force * 0.02;
|
|
particle.vy += Math.sin(angle) * force * 0.02;
|
|
particle.vx += Math.cos(angle + Math.PI / 2) * force * 0.005;
|
|
particle.vy += Math.sin(angle + Math.PI / 2) * force * 0.005;
|
|
}
|
|
}
|
|
|
|
const speed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
|
|
if (speed > 2) {
|
|
particle.vx = (particle.vx / speed) * 2;
|
|
particle.vy = (particle.vy / speed) * 2;
|
|
}
|
|
|
|
particle.vx *= 0.99;
|
|
particle.vy *= 0.99;
|
|
particle.vx += (Math.random() - 0.5) * 0.02;
|
|
particle.vy += (Math.random() - 0.5) * 0.02;
|
|
|
|
if (particle.x < -50) particle.x = this.canvas.width + 50;
|
|
if (particle.x > this.canvas.width + 50) particle.x = -50;
|
|
if (particle.y < -50) particle.y = this.canvas.height + 50;
|
|
if (particle.y > this.canvas.height + 50) particle.y = -50;
|
|
});
|
|
}
|
|
|
|
animate() {
|
|
if (!this.canvas) return;
|
|
const time = Date.now() * 0.001;
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.drawConnections();
|
|
this.drawMouseConnections();
|
|
this.particles.forEach(particle => this.drawParticle(particle, time));
|
|
this.updateParticles();
|
|
requestAnimationFrame(() => this.animate());
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const root = document.getElementById('sj-product-page');
|
|
const animateElements = root.querySelectorAll('.animate-fade-in');
|
|
|
|
function checkScroll() {
|
|
const triggerBottom = window.innerHeight * 0.85;
|
|
animateElements.forEach(element => {
|
|
const elementTop = element.getBoundingClientRect().top;
|
|
if (elementTop < triggerBottom) {
|
|
element.classList.add('visible');
|
|
}
|
|
});
|
|
}
|
|
|
|
window.addEventListener('scroll', checkScroll);
|
|
checkScroll(); // Initial check
|
|
|
|
// 初始化星座背景
|
|
new ConstellationBackground('archit-constellation-canvas', 'archit-hero-section');
|
|
|
|
// 粒子效果初始化
|
|
createParticles();
|
|
});
|
|
|
|
// 创建粒子效果
|
|
function createParticles() {
|
|
const particlesContainer = document.getElementById('archit-particles');
|
|
if (!particlesContainer) return;
|
|
|
|
const particleCount = 30;
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
particle.style.left = Math.random() * 100 + '%';
|
|
particle.style.animationDelay = Math.random() * 15 + 's';
|
|
particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
|
|
particlesContainer.appendChild(particle);
|
|
}
|
|
}
|
|
|
|
// RISCAL 卡片入场动画增强
|
|
function initRiscalCards() {
|
|
const riscalCards = document.querySelectorAll('.riscal-card');
|
|
const qaCards = document.querySelectorAll('.qa-card');
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.2,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
});
|
|
|
|
riscalCards.forEach(card => observer.observe(card));
|
|
qaCards.forEach(card => observer.observe(card));
|
|
}
|
|
|
|
// 在DOMContentLoaded中初始化RISCAL功能
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// 延迟初始化以确保DOM完全加载
|
|
setTimeout(() => {
|
|
initRiscalCards();
|
|
}, 100);
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |