first commit

This commit is contained in:
qwq
2026-04-20 16:18:26 +08:00
commit 51d794376c
2880 changed files with 673212 additions and 0 deletions
+493
View File
@@ -0,0 +1,493 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隼瞻科技 - 专用处理器IP和EDA设计平台提供商</title>
<script src="https://cdn.tailwindcss.com"></script>
<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: {
screens: {
'tablet': '1024px',
// 保留默认断点但调整顺序
'sm': '640px',
'md': '768px',
'lg': '1280px',
'xl': '1536px',
},
extend: {
colors: {
primary: '#165DFF',
secondary: '#0E42D2',
accent: '#69b1ff',
dark: '#0f172a',
light: '#f8fafc',
darkBg: '#1e293b',
darkerBg: '#0f172a',
darkCard: '#334155'
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.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='%23334155' fill-opacity='0.1'%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");
}
/* 滚动动画 */
.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);
}
/* 数值计数动画 */
.count-up {
transition: all 0.8s ease-out;
}
/* 卡片悬停效果 */
.hover-float {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-float:hover {
transform: translateY(-5px);
}
/* 按钮波纹效果 */
.ripple {
position: relative;
overflow: hidden;
}
.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.5s, opacity 0.8s;
}
.ripple:active:after {
transform: scale(0, 0);
opacity: 0.3;
transition: 0s;
}
/* 平滑背景渐变动画 */
@keyframes gradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-animate {
background-size: 200% 200%;
animation: gradientFlow 15s ease infinite;
}
/* 脉冲动画 */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.animate-pulse-slow {
animation: pulse 3s ease-in-out infinite;
}
}
</style>
</head>
<body class="font-inter bg-darkerBg text-gray-200 min-h-screen flex flex-col">
<!-- 首页Hero区域 -->
<section id="home" class="pt-24 md:pt-32 pb-16 md:pb-24 bg-gradient-to-br from-darkBg to-darkerBg gradient-animate overflow-hidden relative">
<div class="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
<div class="w-full h-full bg-[url('https://picsum.photos/id/1/1200/800')] bg-cover bg-center"></div>
</div>
<div class="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
<div class="max-w-3xl mx-auto text-center mb-12 md:mb-16">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white leading-tight text-shadow mb-6">
专用处理器IP与<br/>
<span class="text-primary">EDA设计平台</span>
</h1>
<p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
隼瞻科技专注于提供高性能、低功耗的专用处理器IP和先进的EDA设计平台,助力客户加速芯片设计创新
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#products" class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-lg hover:shadow-xl font-medium text-lg ripple animate-pulse-slow">
探索产品
</a>
<a href="#services" class="px-8 py-3 bg-darkCard text-gray-200 border border-gray-600 rounded-lg hover:bg-darkCard/80 hover:border-primary/50 transition-colors shadow-md hover:shadow-lg font-medium text-lg ripple">
了解服务
</a>
</div>
</div>
<div class="flex justify-center">
<div class="w-full max-w-5xl rounded-xl overflow-hidden shadow-2xl border border-gray-700 bg-darkCard">
<img src="https://picsum.photos/id/20/1920/1080" alt="处理器IP和EDA设计平台" class="w-full h-auto object-cover"/>
</div>
</div>
</div>
</section>
<!-- 产品介绍部分 -->
<section id="products" class="py-16 md:py-24 bg-darkBg relative">
<div class="container mx-auto px-4 md:px-6 lg:px-8">
<div class="text-center mb-12 md:mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">核心产品</h2>
<p class="text-gray-300 max-w-2xl mx-auto">
我们提供高性能、低功耗的处理器IP和ArchitStudio开发平台,满足各种应用场景的需求
</p>
</div>
<!-- 产品卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 处理器IP卡片 -->
<div id="processor-ip" class="group bg-darkCard rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden hover-float animate-fade-in">
<div class="relative overflow-hidden h-48">
<img src="https://picsum.photos/id/96/600/400" alt="处理器IP" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
<a href="products.html" class="px-4 py-2 bg-white text-primary rounded-md text-sm font-medium hover:bg-primary hover:text-white transition-colors">查看详情</a>
</div>
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-3">
<i class="fa fa-microchip text-primary text-xl"></i>
</div>
<h3 class="text-xl font-bold text-white">处理器IP</h3>
</div>
<p class="text-gray-300 mb-4">
高性能、低功耗的处理器IP核,支持RISC-V、ARM等多种架构,适用于从嵌入式到高性能计算的广泛应用场景。
</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center text-sm">
<i class="fa fa-check text-green-400 mr-2"></i>
<span class="text-gray-300">支持RISC-V指令集扩展</span>
</li>
<li class="flex items-center text-sm">
<i class="fa fa-check text-green-400 mr-2"></i>
<span class="text-gray-300">可配置的缓存和管道深度</span>
</li>
<li class="flex items-center text-sm">
<i class="fa fa-check text-green-400 mr-2"></i>
<span class="text-gray-300">低功耗设计,适用于移动设备</span>
</li>
</ul>
</div>
</div>
<!-- EDA设计平台卡片 -->
<div id="eda-platforms" class="group bg-darkCard rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden hover-float animate-fade-in" style="transition-delay: 0.1s">
<div class="relative overflow-hidden h-48">
<img src="https://picsum.photos/id/180/600/400" alt="EDA设计平台" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
<a href="products.html" class="px-4 py-2 bg-white text-primary rounded-md text-sm font-medium hover:bg-primary hover:text-white transition-colors">查看详情</a>
</div>
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-3">
<i class="fa fa-code-fork text-primary text-xl"></i>
</div>
<h3 class="text-xl font-bold text-white">ArchitStudio开发平台</h3>
</div>
<p class="text-gray-300 mb-4">
先进的EDA设计平台,提供从系统级到物理级的完整设计流程支持,加速芯片设计和验证过程。
</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center text-sm">
<i class="fa fa-check text-green-400 mr-2"></i>
<span class="text-gray-300">完整的芯片设计流程支持</span>
</li>
<li class="flex items-center text-sm">
<i class="fa fa-check text-green-400 mr-2"></i>
<span class="text-gray-300">高效的仿真和验证工具</span>
</li>
<li class="flex items-center text-sm">
<i class="fa fa-check text-green-400 mr-2"></i>
<span class="text-gray-300">自动化的布局布线解决方案</span>
</li>
</ul>
</div>
</div>
<!-- 软件开发工具卡片 -->
<div id="software-tools" class="group bg-darkCard rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden hover-float animate-fade-in" style="transition-delay: 0.2s">
<div class="relative overflow-hidden h-48">
<img src="https://picsum.photos/id/0/600/400" alt="软件开发工具" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
<a href="products.html" class="px-4 py-2 bg-white text-primary rounded-md text-sm font-medium hover:bg-primary hover:text-white transition-colors">查看详情</a>
</div>
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-3">
<i class="fa fa-code text-primary text-xl"></i>
</div>
<h3 class="text-xl font-bold text-white">智翼端侧AI解决方案</h3>
</div>
<p class="text-gray-300 mb-4">
集成高性能处理器、专用AI加速器和丰富的开发工具,为物联网、工业控制、智能驾驶等场景提供低功耗、高性能的AI计算能力。
</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center text-sm">
<i class="fa fa-check text-green-400 mr-2"></i>
<span class="text-gray-300">优化的编译器和工具链</span>
</li>
<li class="flex items-center text-sm">
<i class="fa fa-check text-green-400 mr-2"></i>
<span class="text-gray-300">集成开发环境支持</span>
</li>
<li class="flex items-center text-sm">
<i class="fa fa-check text-green-400 mr-2"></i>
<span class="text-gray-300">实时性能分析工具</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 定制服务部分 -->
<section id="services" class="py-16 md:py-24 bg-darkerBg">
<div class="container mx-auto px-4 md:px-6 lg:px-8">
<div class="text-center mb-12 md:mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">技术中心</h2>
<p class="text-gray-300 max-w-2xl mx-auto">
我们提供全方位的定制服务,满足客户的特殊需求,帮助客户快速实现产品创新
</p>
</div>
<!-- 服务卡片 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- IP相关技术 -->
<div id="custom-design" class="bg-darkCard p-8 rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 hover-float animate-fade-in">
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
<i class="fa fa-microchip text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4 text-white">代码压缩技术</h3>
<p class="text-gray-300 mb-6">
用廉价的、大容量的存储空间来换取昂贵的、高性能的片上存储空间和系统带宽的节省。
</p>
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors">
了解更多
<i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
<!-- 中断实时性技术 -->
<div id="ip-integration" class="bg-darkCard p-8 rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 hover-float animate-fade-in" style="transition-delay: 0.1s">
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
<i class="fa fa-puzzle-piece text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4 text-white">中断实时性技术</h3>
<p class="text-gray-300 mb-6">
中断实时性技术的核心在于最大限度地降低中断响应延迟,确保系统在关键时刻能够做出及时且可靠的反应。
</p>
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors">
了解更多
<i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
<!-- 技术支持 -->
<div id="technical-support" class="bg-darkCard p-8 rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 hover-float animate-fade-in" style="transition-delay: 0.2s">
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
<i class="fa fa-life-ring text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4 text-white">AI融合技术</h3>
<p class="text-gray-300 mb-6">
实现高性能、低功耗的智能计算解决方案,为边缘计算和嵌入式系统赋能。
</p>
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors">
了解更多
<i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 关于我们部分 -->
<section id="about" class="py-16 md:py-24 bg-darkBg">
<div class="container mx-auto px-4 md:px-6 lg:px-8">
<div id="company-profile" class="grid md:grid-cols-2 gap-12 items-center mb-20">
<div class="animate-fade-in">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">关于隼瞻科技</h2>
<p class="text-gray-300 mb-6">
隼瞻科技是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司,由一群在半导体行业拥有丰富经验的专家创立。我们致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具,帮助客户加速芯片设计创新,降低开发成本,缩短产品上市时间。
</p>
<p class="text-gray-300 mb-6">
我们的团队由来自国内外知名半导体公司的资深工程师组成,拥有丰富的处理器设计、EDA工具开发和芯片验证经验。我们秉承"创新、卓越、协作、共赢"的核心价值观,不断追求技术创新,为客户创造价值。
</p>
<div class="flex flex-wrap gap-6 mt-8">
<div class="text-center">
<div class="text-3xl font-bold text-primary mb-1 count-up">50</div>
<div class="text-sm text-gray-400">专业工程师</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-primary mb-1 count-up">100</div>
<div class="text-sm text-gray-400">合作伙伴</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-primary mb-1 count-up">20</div>
<div class="text-sm text-gray-400">核心IP产品</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-primary mb-1 count-up">5</div>
<div class="text-sm text-gray-400">行业解决方案</div>
</div>
</div>
</div>
<div class="relative animate-fade-in" style="transition-delay: 0.2s">
<div class="absolute -top-4 -left-4 w-24 h-24 bg-primary/10 rounded-lg -z-10"></div>
<div class="absolute -bottom-4 -right-4 w-24 h-24 bg-primary/10 rounded-lg -z-10"></div>
<img src="https://picsum.photos/id/28/800/600" alt="隼瞻科技团队" class="w-full h-auto rounded-xl shadow-xl"/>
</div>
</div>
</div>
</section>
<!-- 返回顶部按钮 -->
<button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-darkerBg">
<i class="fa fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script>
// 返回顶部按钮控制
const backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
backToTop.classList.remove('opacity-0', 'invisible');
backToTop.classList.add('opacity-100', 'visible');
} else {
backToTop.classList.add('opacity-0', 'invisible');
backToTop.classList.remove('opacity-100', 'visible');
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// 返回顶部按钮
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 滚动动画
const animateOnScroll = () => {
const elements = document.querySelectorAll('.animate-fade-in');
const windowHeight = window.innerHeight;
const elementVisible = 100; // 减小触发阈值,使元素更容易触发动画
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
if (elementPosition < windowHeight - elementVisible) {
element.classList.add('visible');
}
});
// 数值计数动画
const stats = document.querySelectorAll('.count-up');
stats.forEach(stat => {
const statPosition = stat.getBoundingClientRect().top;
const statBottom = stat.getBoundingClientRect().bottom;
// 当元素进入视口时触发动画
if (statPosition < windowHeight - elementVisible && !stat.classList.contains('counted')) {
// 获取原始数值(存储为数据属性以便重置)
if (!stat.dataset.originalValue) {
const targetText = stat.innerText;
let target = 0;
try {
// 提取所有数字字符并转换为整数
const numericPart = targetText.replace(/[^0-9]/g, '');
target = parseInt(numericPart);
stat.dataset.originalValue = target;
} catch (e) {
console.error('无法解析数值:', targetText, e);
target = 0;
}
}
const target = parseInt(stat.dataset.originalValue);
let count = 0;
const duration = 2000; // 动画持续时间(毫秒)
const increment = target / (duration / 16); // 每16ms增加的值
const updateCount = () => {
count += increment;
if (count < target) {
stat.innerText = Math.ceil(count) + '+';
requestAnimationFrame(updateCount);
} else {
stat.innerText = target + '+';
stat.classList.add('counted');
}
};
updateCount();
}
// 当元素完全离开视口时重置动画状态,允许重新触发
if (statBottom < 0) {
if (stat.dataset.originalValue) {
stat.innerText = stat.dataset.originalValue;
}
stat.classList.remove('counted');
}
});
};
// 页面加载时检查一次
window.addEventListener('load', animateOnScroll);
// 滚动时检查
window.addEventListener('scroll', animateOnScroll);
</script>
</body>
</html>