qwq/wig
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
qwq
2026-04-23 14:41:06 +08:00
parent 4d53815955
commit 498af9e2d6
16 changed files with 3540 additions and 2195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
architstudio.html
+186 -111
View File
@@ -4,59 +4,135 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>产品详情 - 隼瞻科技</title>
<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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { primary: '#3b82f6', secondary: '#2563eb', accent: '#60a5fa' },
fontFamily: { inter: ['Inter', 'sans-serif'] }
}
}
}
</script>
<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);
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);
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);
}
.text-gradient {
.gradient-text {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-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);
}
}
#sj-product-page { font-family: 'Inter', sans-serif; color: #1e293b; background-color: transparent !important; }
#sj-product-page a { color: #3b82f6; transition: color 0.3s ease; }
#sj-product-page a:hover { color: #2563eb; }
.section-active { color: #2563eb !important; border-bottom: 2px solid #2563eb !important; }
.hover-float { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-float:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1); }
.animate-fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-fade-in.visible { opacity: 1; transform: translateY(0); }
.bg-grid {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
</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 overflow-x-hidden w-full">
<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>
@@ -65,7 +141,6 @@
<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">
<!-- 背景装饰 -->
@@ -78,7 +153,7 @@
<!-- 1. 头部 Hero Section -->
<section id="archit-hero-section"
class="relative z-10 pt-24 md:pt-32 pb-16 bg-gradient-to-b from-gray-900 to-gray-950 overflow-hidden">
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>
@@ -96,7 +171,7 @@
<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 mb-10 leading-relaxed max-w-3xl mx-auto font-light">
<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>
@@ -105,7 +180,7 @@
</section>
<!-- 3. 痛点与桥梁 (对应图片 1: 需求"左移"与方案"右移") -->
<section class="relative z-10 py-16 bg-card border-y border-slate-200">
<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">
@@ -113,12 +188,12 @@
<p class="text-slate-500">打破垂直领域与芯片设计之间的壁垒</p>
</div>
<div class="relative bg-slate-50 p-8 rounded-2xl border border-slate-200 animate-fade-in">
<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-900/30 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">
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>
@@ -138,11 +213,11 @@
<div class="w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
</div>
<div
class="bg-white/10 backdrop-blur-md p-6 rounded-xl border border-white/20 shadow-xl">
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 mt-2">连接算法与芯片的桥梁</p>
<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>
@@ -150,7 +225,7 @@
<!-- 右侧：DSA 需求方 -->
<div class="text-center md:text-left">
<div
class="bg-indigo-900/30 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-500/30">
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>
@@ -170,7 +245,7 @@
</section>
<!-- 6. 敏捷开发方法学 (替换为图片4内容) -->
<section class="relative z-10 py-16 bg-slate-50 border-t border-slate-200" id="methodology">
<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>
@@ -184,7 +259,7 @@
<!-- 顶栏标题 -->
<div
class="bg-blue-700 text-slate-800 text-center py-3 rounded-t-lg shadow-lg mb-2 mx-12 md:mx-0">
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>
@@ -196,7 +271,7 @@
<!-- 左侧轴标 -->
<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-gray-600 h-full">
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>
@@ -204,7 +279,7 @@
<!-- 中间内容框 -->
<div
class="md:col-span-8 glass-panel/60 p-4 border border-teal-500/30 rounded-lg hover:border-teal-500 transition-colors relative">
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">
@@ -222,7 +297,7 @@
</div>
<div
class="bg-teal-900/40 border border-teal-500/40 p-4 text-center text-teal-100 font-medium rounded">
class="bg-teal-50 border border-teal-200 p-4 text-center text-teal-800 font-medium rounded">
使用DSA设计工具分析引擎进行设计提取
</div>
</div>
@@ -240,7 +315,7 @@
</div>
<!-- 连接线 -->
<div class="hidden md:block h-6 border-l w-px border-dashed border-gray-600 ml-[4.16%]">
<div class="hidden md:block h-6 border-l w-px border-dashed border-slate-300 ml-[4.16%]">
</div>
<!-- LAYER 2: 架构设计 -->
@@ -249,7 +324,7 @@
<!-- 左侧轴标 -->
<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-gray-600 h-full">
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>
@@ -257,7 +332,7 @@
<!-- 中间内容框 -->
<div
class="md:col-span-8 glass-panel/60 p-4 border border-orange-500/30 rounded-lg hover:border-orange-500 transition-colors relative">
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">
@@ -277,10 +352,10 @@
</div>
<div
class="bg-indigo-900/40 border border-indigo-500/40 p-4 text-center rounded text-indigo-100">
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-black/30 py-2 px-4 inline-block rounded font-mono text-xs text-indigo-300 border border-indigo-500/30">
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>
@@ -299,7 +374,7 @@
</div>
<!-- 连接线 -->
<div class="hidden md:block h-6 border-l w-px border-dashed border-gray-600 ml-[4.16%]">
<div class="hidden md:block h-6 border-l w-px border-dashed border-slate-300 ml-[4.16%]">
</div>
<!-- LAYER 3: 建模/生成 -->
@@ -308,7 +383,7 @@
<!-- 左侧轴标 -->
<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-gray-600 h-full">
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>
@@ -316,7 +391,7 @@
<!-- 中间内容框 -->
<div
class="md:col-span-8 glass-panel/60 p-4 border border-purple-500/30 rounded-lg hover:border-purple-500 transition-colors relative">
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">
@@ -333,7 +408,7 @@
</div>
<!-- 底部通用 -->
<div
class="mt-2 bg-blue-800 text-xs sm:text-sm text-slate-800 py-2 text-center rounded font-medium shadow-lg">
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>
@@ -357,24 +432,24 @@
<!-- 传统人工 -->
<div
class="bg-gray-200 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-gray-400 pb-2 mb-4">
<h4 class="font-bold text-gray-800 text-lg">传统人工</h4>
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-gray-700 leading-tight">处理器设计技术门槛高</span>
<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-gray-700 leading-tight">项目复杂度高，项目周期长，设计指标难以早期评估</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-gray-700 leading-tight">实现端工作难度高且工作内容多，人力投入巨大</span>
class="text-xs font-semibold text-slate-700 leading-tight">实现端工作难度高且工作内容多，人力投入巨大</span>
</li>
</ul>
</div>
@@ -382,7 +457,7 @@
<!-- 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-400 to-purple-500 drop-shadow-lg italic">VS</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工具 -->
@@ -421,7 +496,7 @@
<!-- 2. 产品亮点 Section (基于1.png内容) -->
<section id="product-highlights"
class="relative z-10 py-20 bg-gradient-to-b from-gray-950 to-gray-900 overflow-hidden">
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>
@@ -447,7 +522,7 @@
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
<!-- 界面友好 -->
<div class="highlight-card group relative bg-gradient-to-br from-gray-800/80 to-gray-900/80 rounded-2xl p-6 border border-slate-200/50 hover:border-cyan-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
<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
@@ -493,7 +568,7 @@
</div>
<!-- 语言专业 -->
<div class="highlight-card group relative bg-gradient-to-br from-gray-800/80 to-gray-900/80 rounded-2xl p-6 border border-slate-200/50 hover:border-violet-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
<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">
@@ -529,7 +604,7 @@
</div>
<!-- 极致效率 -->
<div class="highlight-card group relative bg-gradient-to-br from-gray-800/80 to-gray-900/80 rounded-2xl p-6 border border-slate-200/50 hover:border-amber-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
<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">
@@ -569,7 +644,7 @@
</div>
<!-- 全栈闭环 -->
<div class="highlight-card group relative bg-gradient-to-br from-gray-800/80 to-gray-900/80 rounded-2xl p-6 border border-slate-200/50 hover:border-emerald-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
<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">
@@ -622,7 +697,7 @@
</section>
<!-- 4. 敏捷设计流程 (对应图片 2: EDA 辅助的 DSA 专用处理器设计流程) -->
<section class="relative z-10 py-16 bg-slate-50">
<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>
@@ -633,7 +708,7 @@
<div class="max-w-6xl mx-auto relative">
<!-- 核心流程框 -->
<div
class="glass-panel/50 border border-slate-200 rounded-3xl p-8 md:p-12 relative overflow-hidden animate-fade-in">
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>
@@ -642,63 +717,63 @@
<!-- Step 1 -->
<div class="text-center step-item relative">
<div
class="bg-blue-900/40 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 border border-blue-500/50 z-10 relative bg-slate-50">
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">目标程序</h4>
<p class="text-xs text-gray-500 mt-2">Profiler 分析</p>
<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-900/40 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 border border-blue-500/50 z-10 relative bg-slate-50">
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">架构探索</h4>
<p class="text-xs text-gray-500 mt-2">RISCAL 建模</p>
<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-900/40 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 border border-blue-500/50 z-10 relative bg-slate-50">
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">自动生成</h4>
<p class="text-xs text-gray-500 mt-2">Processor Gen</p>
<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-green-900/40 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 border border-green-500/50 z-10 relative bg-slate-50">
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">交付包</h4>
<p class="text-xs text-gray-500 mt-2">SDK & HDK</p>
<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 bg-slate-50 rounded-xl p-6 border border-slate-200/50 flex flex-col md:flex-row gap-6 justify-between items-center">
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">敏捷架构迭代</span>
<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">敏捷功能验证</span>
<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">敏捷性能分析 (PPA)</span>
<span class="text-slate-600 font-medium font-medium">敏捷性能分析 (PPA)</span>
</div>
</div>
@@ -719,7 +794,7 @@
</section>
<!-- 5. 核心组件 (对应图片 4: Generator, Compiler, Analyzer) -->
<section class="relative z-10 py-16 bg-card">
<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>
@@ -746,7 +821,7 @@
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Archit Analyzer -->
<div class="card-gradient rounded-xl p-0 overflow-hidden hover-lift animate-fade-in flex flex-col h-full"
<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>
@@ -763,7 +838,7 @@
</div>
<!-- Archit Compiler -->
<div class="card-gradient rounded-xl p-0 overflow-hidden hover-lift animate-fade-in flex flex-col h-full"
<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>
@@ -782,7 +857,7 @@
</div>
<!-- Archit Designer -->
<div class="card-gradient rounded-xl p-0 overflow-hidden hover-lift animate-fade-in flex flex-col h-full"
<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>
@@ -801,7 +876,7 @@
<!-- Archit Generator -->
<div
class="card-gradient rounded-xl p-0 overflow-hidden hover-lift animate-fade-in flex flex-col h-full">
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>
@@ -821,7 +896,7 @@
<!-- RISCAL 语言介绍 Section (基于2.png) -->
<section id="riscal-intro"
class="relative z-10 py-20 bg-gradient-to-b from-gray-900 to-gray-950 overflow-hidden">
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]">
@@ -863,7 +938,7 @@
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Retargetable 卡片 -->
<div class="riscal-card group relative bg-gradient-to-br from-gray-800/80 to-gray-900/90 rounded-2xl p-8 border border-orange-500/20 hover:border-orange-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
<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
@@ -882,7 +957,7 @@
</div>
<!-- 内容 -->
<p class="text-slate-600 leading-relaxed">
<p class="text-slate-600 font-medium leading-relaxed">
通过可重定向的设计哲学，<strong class="text-orange-300">RISCAL</strong>
能够基于用户需求快速迭代生成定制化指令集，精准匹配细分场景的计算需求
</p>
@@ -899,7 +974,7 @@
</div>
<!-- RISC 卡片 -->
<div class="riscal-card group relative bg-gradient-to-br from-gray-800/80 to-gray-900/90 rounded-2xl p-8 border border-blue-500/20 hover:border-blue-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
<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
@@ -918,7 +993,7 @@
</div>
<!-- 内容 -->
<p class="text-slate-600 leading-relaxed">
<p class="text-slate-600 font-medium leading-relaxed">
以 <strong class="text-blue-300">RISC-V 架构</strong>为根基，赋能领域特定指令集的敏捷定义与高效实现，让 DSA
设计回归开放与简洁的本质
</p>
@@ -935,7 +1010,7 @@
</div>
<!-- CAL 卡片 -->
<div class="riscal-card group relative bg-gradient-to-br from-gray-800/80 to-gray-900/90 rounded-2xl p-8 border border-orange-500/20 hover:border-orange-500/50 transition-all duration-500 animate-fade-in overflow-hidden"
<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
@@ -954,7 +1029,7 @@
</div>
<!-- 内容 -->
<p class="text-slate-600 leading-relaxed">
<p class="text-slate-600 font-medium leading-relaxed">
语言驱动的编译器与硬件 <strong class="text-orange-300">RTL
同源共生</strong>，从指令定义到工具链生成无缝一致，彻底消除架构与实现间的语义鸿沟
</p>
@@ -987,7 +1062,7 @@
</section>
<!-- RISCAL Q&A Section (基于3.png) -->
<section id="riscal-qa" class="relative z-10 py-20 bg-gradient-to-b from-gray-950 to-gray-900 overflow-hidden">
<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>
@@ -1035,7 +1110,7 @@
<div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
<!-- Q1: 动机 -->
<div class="qa-card group bg-gradient-to-br from-gray-800/90 to-gray-900/90 rounded-2xl p-6 border border-blue-500/20 hover:border-blue-500/40 transition-all duration-500 animate-fade-in"
<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">
@@ -1058,7 +1133,7 @@
</div>
<!-- 答案内容 - 直接显示 -->
<ul class="text-slate-600 text-sm space-y-2 pt-2 border-t border-slate-200/50">
<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>
@@ -1071,7 +1146,7 @@
</div>
<!-- Q2: 门槛 -->
<div class="qa-card group bg-gradient-to-br from-gray-800/90 to-gray-900/90 rounded-2xl p-6 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-500 animate-fade-in"
<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">
@@ -1095,7 +1170,7 @@
</div>
<!-- 答案内容 - 直接显示 -->
<ul class="text-slate-600 text-sm space-y-2 pt-2 border-t border-slate-200/50">
<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>
@@ -1108,7 +1183,7 @@
</div>
<!-- Q3: 能力 -->
<div class="qa-card group bg-gradient-to-br from-gray-800/90 to-gray-900/90 rounded-2xl p-6 border border-blue-500/20 hover:border-blue-500/40 transition-all duration-500 animate-fade-in"
<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">
@@ -1131,7 +1206,7 @@
</div>
<!-- 答案内容 - 直接显示 -->
<ul class="text-slate-600 text-sm space-y-2 pt-2 border-t border-slate-200/50">
<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>
@@ -1148,7 +1223,7 @@
</div>
<!-- Q4: 收益 -->
<div class="qa-card group bg-gradient-to-br from-gray-800/90 to-gray-900/90 rounded-2xl p-6 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-500 animate-fade-in"
<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">
@@ -1172,7 +1247,7 @@
</div>
<!-- 答案内容 - 直接显示 -->
<ul class="text-slate-600 text-sm space-y-2 pt-2 border-t border-slate-200/50">
<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>
@@ -1188,7 +1263,7 @@
</section>
<!-- 7. 用户价值 (保留原有内容) -->
<section id="features" class="section-content py-16 bg-card">
<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>
@@ -1198,7 +1273,7 @@
<div class="grid md:grid-cols-2 gap-6 max-w-6xl mx-auto">
<!-- Value Items -->
<div
class="bg-slate-50 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
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">
@@ -1209,7 +1284,7 @@
</div>
<div
class="bg-slate-50 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
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">
@@ -1220,7 +1295,7 @@
</div>
<div
class="bg-slate-50 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
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">
@@ -1231,7 +1306,7 @@
</div>
<div
class="bg-slate-50 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
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">
@@ -1242,7 +1317,7 @@
</div>
<div
class="bg-slate-50 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
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">
@@ -1253,7 +1328,7 @@
</div>
<div
class="bg-slate-50 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
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">
@@ -1264,7 +1339,7 @@
</div>
<div
class="bg-slate-50 p-6 rounded-xl border border-slate-200 hover:border-primary transition-all animate-fade-in">
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">