hexavii-aboutus / index.html
doniexun's picture
Add 2 files
bdc84e4 verified
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于我们 | 科技引领未来</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
scroll-behavior: smooth;
}
.hero-gradient {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}
.nav-item:hover {
color: #3b82f6;
transform: translateY(-2px);
}
.company-value:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.team-member:hover .team-img {
transform: scale(1.05);
}
.timeline-item:not(:last-child)::after {
content: '';
position: absolute;
left: 50%;
bottom: -50px;
width: 2px;
height: 40px;
background-color: #3b82f6;
transform: translateX(-50%);
}
.qrcode-container:hover {
transform: scale(1.05);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header & Navigation -->
<header class="sticky top-0 z-50 shadow-md bg-white">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-cubes text-blue-600 text-3xl"></i>
<span class="text-2xl font-bold text-blue-800">科技先锋</span>
</div>
<nav class="hidden md:flex space-x-8">
<a href="index.html" class="nav-item font-medium text-gray-700 hover:text-blue-600 transition">首页</a>
<a href="technology.html" class="nav-item font-medium text-gray-700 hover:text-blue-600 transition">核心技术</a>
<a href="products.html" class="nav-item font-medium text-gray-700 hover:text-blue-600 transition">产品中心</a>
<a href="solutions.html" class="nav-item font-medium text-gray-700 hover:text-blue-600 transition">解决方案</a>
<a href="support.html" class="nav-item font-medium text-gray-700 hover:text-blue-600 transition">服务支持</a>
<a href="news.html" class="nav-item font-medium text-gray-700 hover:text-blue-600 transition">新闻动态</a>
<a href="partners.html" class="nav-item font-medium text-gray-700 hover:text-blue-600 transition">合作伙伴</a>
<a href="about.html" class="nav-item font-medium text-blue-600 hover:text-blue-700 transition">关于我们</a>
</nav>
<button class="md:hidden text-gray-700">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</header>
<!-- Hero Section -->
<section class="hero-gradient text-white">
<div class="container mx-auto px-4 py-24 md:py-32 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">关于科技先锋</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">致力于前沿科技研发,推动行业创新,为客户创造长期价值</p>
<a href="#history" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-blue-50 transition duration-300">
了解我们的历程
</a>
</div>
</section>
<!-- Company Intro -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">企业简介</h2>
<p class="text-gray-600 text-lg leading-relaxed">
科技先锋成立于2008年,是国家高新技术企业、专精特新"小巨人"企业。我们专注于人工智能、大数据和云计算技术的研发与应用,致力于为企业数字化转型提供全方位的技术解决方案。经过十余年发展,已成为行业领先的科技服务提供商。
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-xl company-value transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-globe-americas text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">全球视野</h3>
<p class="text-gray-600">业务覆盖全球30多个国家和地区,服务超过2000家企业客户</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl company-value transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-users text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">精英团队</h3>
<p class="text-gray-600">500+专业技术人才,研发人员占比超过60%,博士团队50余人</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl company-value transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-medal text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">技术创新</h3>
<p class="text-gray-600">拥有300余项发明专利,荣获国家级科技奖项10余次</p>
</div>
</div>
</div>
</section>
<!-- Development History -->
<section id="history" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">发展历程</h2>
<p class="text-gray-600 max-w-2xl mx-auto">十余年砥砺前行,见证我们的每一步成长</p>
</div>
<div class="relative max-w-4xl mx-auto">
<!-- Timeline -->
<div class="space-y-16">
<div class="relative timeline-item">
<div class="flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/2 mb-6 md:mb-0 md:pr-10">
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-600 mb-2">2022年</h3>
<p>完成D轮融资,设立欧洲研发中心,年度营收突破20亿元</p>
</div>
</div>
<div class="hidden md:block md:w-1/2"></div>
</div>
</div>
<div class="relative timeline-item">
<div class="flex flex-col md:flex-row items-center">
<div class="hidden md:block md:w-1/2"></div>
<div class="w-full md:w-1/2 mb-6 md:mb-0 md:pl-10">
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-600 mb-2">2019年</h3>
<p>推出行业首个AI+云原生解决方案,服务客户突破1000家</p>
</div>
</div>
</div>
</div>
<div class="relative timeline-item">
<div class="flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/2 mb-6 md:mb-0 md:pr-10">
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-600 mb-2">2016年</h3>
<p>在全国建立5大区域技术服务中心,实现业务覆盖全国</p>
</div>
</div>
<div class="hidden md:block md:w-1/2"></div>
</div>
</div>
<div class="relative timeline-item">
<div class="flex flex-col md:flex-row items-center">
<div class="hidden md:block md:w-1/2"></div>
<div class="w-full md:w-1/2 mb-6 md:mb-0 md:pl-10">
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-600 mb-2">2012年</h3>
<p>获得国家高新技术企业认定,核心产品实现技术突破</p>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/2 mb-6 md:mb-0 md:pr-10">
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-600 mb-2">2008年</h3>
<p>公司正式成立,专注于企业级软件研发与服务</p>
</div>
</div>
<div class="hidden md:block md:w-1/2"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Management Team -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">核心团队</h2>
<p class="text-gray-600 max-w-2xl mx-auto">汇聚行业顶尖人才,引领技术创新</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="team-member">
<div class="overflow-hidden rounded-xl mb-4">
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200" alt="CEO" class="w-full h-auto team-img transition duration-500">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-1">张晓明 博士</h3>
<p class="text-blue-600 font-medium mb-2">创始人兼CEO</p>
<p class="text-gray-600">曾任国际知名科技公司技术总监,拥有20余年行业经验,主导多项国家级科研项目</p>
</div>
<div class="team-member">
<div class="overflow-hidden rounded-xl mb-4">
<img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200" alt="CTO" class="w-full h-auto team-img transition duration-500">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-1">李华章</h3>
<p class="text-blue-600 font-medium mb-2">首席技术官</p>
<p class="text-gray-600">人工智能专家,主导公司技术研发体系构建,拥有10余项发明专利</p>
</div>
<div class="team-member">
<div class="overflow-hidden rounded-xl mb-4">
<img src="https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200" alt="CFO" class="w-full h-auto team-img transition duration duration-500">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-1">王雪琴</h3>
<p class="text-blue-600 font-medium mb-2">首席财务官</p>
<p class="text-gray-600">资深财务管理专家,曾主导多轮融资及并购项目,保障公司稳健发展</p>
</div>
</div>
</div>
</section>
<!-- Corporate Culture -->
<section class="py-20 bg-blue-600 text-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-6">企业文化</h2>
<p class="text-blue-100 max-w-2xl mx-auto">创新、协作、责任、共赢是我们的核心价值观</p>
</div>
<div class="grid md:grid-cols-4 gap-6">
<div class="bg-blue-700 p-6 rounded-xl">
<h3 class="text-xl font-bold mb-4">使命</h3>
<p>用科技力量推动产业升级,为社会创造价值</p>
</div>
<div class="bg-blue-700 p-6 rounded-xl">
<h3 class="text-xl font-bold mb-4">愿景</h3>
<p>成为全球领先的智能科技解决方案提供商</p>
</div>
<div class="bg-blue-700 p-6 rounded-xl">
<h3 class="text-xl font-bold mb-4">价值观</h3>
<p>客户至上、创新进取、诚信务实、协作共赢</p>
</div>
<div class="bg-blue-700 p-6 rounded-xl">
<h3 class="text-xl font-bold mb-4">社会责任</h3>
<p>积极参与公益事业,推动科技教育普及</p>
</div>
</div>
</div>
</section>
<!-- Honors -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">荣誉资质</h2>
<p class="text-gray-600 max-w-2xl mx-auto">业界认可,权威认证</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="bg-gray-50 p-6 rounded-xl flex flex-col items-center">
<i class="fas fa-medal text-4xl text-yellow-500 mb-4"></i>
<p class="text-center font-medium">国家级专精特新"小巨人"企业</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl flex flex-col items-center">
<i class="fas fa-award text-4xl text-blue-500 mb-4"></i>
<p class="text-center font-medium">高新技术企业认证</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl flex flex-col items-center">
<i class="fas fa-certificate text-4xl text-green-500 mb-4"></i>
<p class="text-center font-medium">ISO27001信息安全认证</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl flex flex-col items-center">
<i class="fas fa-trophy text-4xl text-red-500 mb-4"></i>
<p class="text-center font-medium">中国科技企业50强</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-5 gap-8 mb-12">
<!-- Logo & Slogan -->
<div class="md:col-span-2">
<div class="flex items-center mb-6">
<i class="fas fa-cubes text-blue-400 text-3xl mr-2"></i>
<span class="text-2xl font-bold">科技先锋</span>
</div>
<p class="text-gray-400 mb-6 leading-relaxed">
"技术驱动未来,创新引领变革" — 我们致力于为企业提供最具前瞻性的技术解决方案,携手客户共同成长。
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-weixin"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-weibo"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
</div>
</div>
<!-- Sitemap -->
<div>
<h4 class="text-lg font-semibold mb-4">网站导航</h4>
<ul class="space-y-3">
<li><a href="index.html" class="text-gray-400 hover:text-white transition">首页</a></li>
<li><a href="technology.html" class="text-gray-400 hover:text-white transition">核心技术</a></li>
<li><a href="products.html" class="text-gray-400 hover:text-white transition">产品中心</a></li>
<li><a href="solutions.html" class="text-gray-400 hover:text-white transition">解决方案</a></li>
<li><a href="support.html" class="text-gray-400 hover:text-white transition">服务支持</a></li>
<li><a href="news.html" class="text-gray-400 hover:text-white transition">新闻动态</a></li>
<li><a href="partners.html" class="text-gray-400 hover:text-white transition">合作伙伴</a></li>
<li><a href="about.html" class="text-gray-400 hover:text-white transition">关于我们</a></li>
</ul>
</div>
<!-- QR Codes -->
<div>
<h4 class="text-lg font-semibold mb-4">关注我们</h4>
<div class="flex space-x-4">
<div class="qrcode-container transition duration-300">
<img src="https://via.placeholder.com/120x120" alt="微信公众号" class="w-28 h-28 mb-2 rounded">
<p class="text-sm text-gray-400 text-center">微信公众号</p>
</div>
<div class="qrcode-container transition duration-300">
<img src="https://via.placeholder.com/120x120" alt="抖音号" class="w-28 h-28 mb-2 rounded">
<p class="text-sm text-gray-400 text-center">官方抖音号</p>
</div>
</div>
</div>
<!-- Contact Info -->
<div>
<h4 class="text-lg font-semibold mb-4">联系我们</h4>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-2"></i>
<span class="text-gray-400">中国上海市浦东新区张江高科技园区科技大道88号</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt text-blue-400 mr-2"></i>
<span class="text-gray-400">400-888-8888</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope text-blue-400 mr-2"></i>
<span class="text-gray-400">[email protected]</span>
</li>
<li class="flex items-center">
<i class="fas fa-clock text-blue-400 mr-2"></i>
<span class="text-gray-400">周一至周五 9:00-18:00</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-sm">
<p class="mb-2">© 2008-2023 科技先锋科技有限公司 版权所有</p>
<p class="mb-2">
<a href="#" class="hover:text-gray-300 transition">隐私政策</a> |
<a href="#" class="hover:text-gray-300 transition">使用条款</a> |
<a href="#" class="hover:text-gray-300 transition">法律声明</a>
</p>
<p>ICP备案号:沪ICP备12345678号-1 | 沪公网安备31011502001234号</p>
</div>
</div>
</footer>
<script>
// Simple mobile menu toggle
document.querySelector('button').addEventListener('click', function() {
// In a real implementation, this would toggle a mobile menu
alert('移动端菜单将在实际实现中展开');
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=doniexun/hexavii-aboutus" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>