382 lines
20 KiB
HTML
382 lines
20 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>{{.Title}} - 微信自动化管理平台</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
background-color: #f8fafc;
|
||
}
|
||
|
||
/* 更精致的背景效果 */
|
||
.hero-section {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-color: white;
|
||
}
|
||
|
||
.hero-dots {
|
||
background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
|
||
background-size: 20px 20px;
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.feature-card {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-8px);
|
||
}
|
||
|
||
.animate-float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0% { transform: translateY(0px); }
|
||
50% { transform: translateY(-15px); }
|
||
100% { transform: translateY(0px); }
|
||
}
|
||
|
||
.glass-card {
|
||
background: white;
|
||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<header class="fixed w-full z-50 bg-white shadow-sm border-b border-gray-100">
|
||
<nav class="container mx-auto px-4 py-4 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<div class="text-2xl font-bold text-slate-700 flex items-center">
|
||
<i class="fas fa-robot mr-2"></i> WeChat<span class="text-gray-800">Bot</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-8">
|
||
<a href="#features" class="text-gray-700 hover:text-slate-900 transition-colors text-sm font-medium">功能特性</a>
|
||
<a href="#use-cases" class="text-gray-700 hover:text-slate-900 transition-colors text-sm font-medium">应用场景</a>
|
||
<a href="/login" class="bg-white text-slate-700 border border-slate-300 hover:border-slate-400 py-2.5 px-5 rounded-lg shadow-sm hover:shadow transition-all text-sm font-medium">
|
||
登录系统
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- 英雄区域 - 更简洁精致的设计 -->
|
||
<section class="hero-section pt-32 pb-24">
|
||
<!-- 装饰背景 -->
|
||
<div class="absolute inset-0 hero-dots"></div>
|
||
<div class="absolute top-20 right-10 w-64 h-64 rounded-full bg-blue-50 blur-3xl opacity-50"></div>
|
||
<div class="absolute bottom-10 left-10 w-64 h-64 rounded-full bg-indigo-50 blur-3xl opacity-50"></div>
|
||
|
||
<div class="container mx-auto px-4 relative z-10">
|
||
<div class="flex flex-col lg:flex-row items-center justify-between">
|
||
<div class="lg:w-1/2 mb-10 lg:mb-0 text-center lg:text-left animate-float">
|
||
<div class="inline-block px-4 py-1 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-6">
|
||
新一代管理工具
|
||
</div>
|
||
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-gray-900 leading-tight">
|
||
智能微信<br />自动化管理系统
|
||
</h1>
|
||
<p class="text-xl text-gray-600 mb-10 max-w-lg mx-auto lg:mx-0 leading-relaxed">
|
||
提升您的社交效率和业务拓展能力，智能化管理多个微信账号的一站式平台
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
|
||
<a href="/login" class="bg-slate-800 hover:bg-slate-700 text-white py-4 px-8 rounded-lg shadow-md hover:shadow-lg transition-all text-center">
|
||
立即体验
|
||
</a>
|
||
<a href="#features" class="bg-white hover:bg-gray-50 text-slate-800 border border-gray-200 py-4 px-8 rounded-lg shadow-sm hover:shadow transition-all text-center">
|
||
了解更多
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优雅的分隔线 -->
|
||
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-gray-50"></div>
|
||
</section>
|
||
|
||
<!-- 特性区域 -->
|
||
<section id="features" 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-900 mb-4">强大功能特性</h2>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">我们提供完整的微信自动化管理解决方案，满足多样化的业务需求</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
|
||
<div class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600 mb-6">
|
||
<i class="fas fa-robot text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-gray-900">多机器人管理</h3>
|
||
<p class="text-gray-600 leading-relaxed">集中管理多个微信账号，实现业务统一调度和集中监控，提高运营效率</p>
|
||
</div>
|
||
|
||
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
|
||
<div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center text-green-600 mb-6">
|
||
<i class="fas fa-comments text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-gray-900">智能自动回复</h3>
|
||
<p class="text-gray-600 leading-relaxed">设置自动回复规则，让您的社交沟通更高效，提升客户响应速度</p>
|
||
</div>
|
||
|
||
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
|
||
<div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 mb-6">
|
||
<i class="fas fa-chart-line text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-gray-900">数据分析报表</h3>
|
||
<p class="text-gray-600 leading-relaxed">全面分析互动数据，挖掘有价值信息，辅助决策，提升社交效率</p>
|
||
</div>
|
||
|
||
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
|
||
<div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center text-purple-600 mb-6">
|
||
<i class="fas fa-users text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-gray-900">高效群组管理</h3>
|
||
<p class="text-gray-600 leading-relaxed">一键管理多个群组，自动化欢迎和群组通知，轻松维护群关系</p>
|
||
</div>
|
||
|
||
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
|
||
<div class="w-14 h-14 bg-amber-100 rounded-xl flex items-center justify-center text-amber-600 mb-6">
|
||
<i class="fas fa-clock text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-gray-900">定时任务系统</h3>
|
||
<p class="text-gray-600 leading-relaxed">设置消息定时发送，构建自动化工作流程，解放人力，提高效率</p>
|
||
</div>
|
||
|
||
<div class="feature-card bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl">
|
||
<div class="w-14 h-14 bg-rose-100 rounded-xl flex items-center justify-center text-rose-600 mb-6">
|
||
<i class="fas fa-shield-alt text-2xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3 text-gray-900">安全容器隔离</h3>
|
||
<p class="text-gray-600 leading-relaxed">采用容器化技术，保障账号安全，数据加密存储，保护隐私</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 使用场景 -->
|
||
<section id="use-cases" class="py-20 bg-white relative">
|
||
<!-- 使用更柔和的背景 -->
|
||
<div class="absolute left-0 right-0 h-64 bg-gray-50/50 top-0"></div>
|
||
<div class="container mx-auto px-4 relative z-10">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">应用场景</h2>
|
||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">适用于各行各业的微信自动化需求，提升管理效率</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
|
||
<div class="flex items-center mb-6">
|
||
<div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600 mr-4">
|
||
<i class="fas fa-store text-xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-900">客户服务</h3>
|
||
</div>
|
||
<p class="text-gray-600 mb-6 leading-relaxed">自动化客户咨询回复，提供产品信息和服务支持，大幅提升客户满意度与服务效率</p>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
智能分类和处理客户需求
|
||
</li>
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
24小时无间断自动响应
|
||
</li>
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
定制化客户服务流程
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
|
||
<div class="flex items-center mb-6">
|
||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center text-green-600 mr-4">
|
||
<i class="fas fa-bullhorn text-xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-900">营销推广</h3>
|
||
</div>
|
||
<p class="text-gray-600 mb-6 leading-relaxed">精准投放营销内容，管理营销活动，统计用户反馈数据，提升转化率和ROI</p>
|
||
<ul class="space-y-3">
|
||
<!-- 修正这里的语法错误：将items中心改为items-center -->
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
智能分群精准营销
|
||
</li>
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
定时推送营销内容
|
||
</li>
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
营销效果数据分析
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
|
||
<div class="flex items-center mb-6">
|
||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 mr-4">
|
||
<i class="fas fa-chalkboard-teacher text-xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-900">教育培训</h3>
|
||
</div>
|
||
<p class="text-gray-600 mb-6 leading-relaxed">管理学习群组，自动发送学习资料，组织在线答疑和互动，提升学习体验</p>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
智能学习进度跟踪
|
||
</li>
|
||
<!-- 修正此处的错误：将"items中心"改为"items-center" -->
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
自动推送学习资料
|
||
</li>
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
智能答疑与互动
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl shadow-lg p-8 transition-all hover:shadow-xl hover:-translate-y-1">
|
||
<div class="flex items-center mb-6">
|
||
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center text-purple-600 mr-4">
|
||
<i class="fas fa-users-cog text-xl"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-900">团队协作</h3>
|
||
</div>
|
||
<p class="text-gray-600 mb-6 leading-relaxed">自动化团队通知，日程提醒，简化内部沟通流程，提高协作效率</p>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
自动项目进度通知
|
||
</li>
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
智能会议安排提醒
|
||
</li>
|
||
<li class="flex items-center text-gray-700">
|
||
<span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mr-3 text-green-600">
|
||
<i class="fas fa-check text-sm"></i>
|
||
</span>
|
||
团队任务自动分配
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 行动号召区域 - 更优雅 -->
|
||
<!-- 修复这里的错误：将"bg白"改为"bg-white" -->
|
||
<section class="py-20 relative bg-white overflow-hidden">
|
||
<!-- 装饰背景 -->
|
||
<div class="absolute inset-0 hero-dots opacity-30"></div>
|
||
<div class="absolute top-0 right-0 bottom-0 w-1/3 bg-gradient-to-l from-gray-50 to-transparent"></div>
|
||
<div class="absolute top-0 left-0 bottom-0 w-1/3 bg-gradient-to-r from-gray-50 to-transparent"></div>
|
||
|
||
<div class="container mx-auto px-4 relative z-10 text-center">
|
||
<div class="max-w-3xl mx-auto">
|
||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">准备好提升微信管理效率了吗？</h2>
|
||
<p class="text-xl text-gray-600 mb-8">立即体验我们的平台，享受自动化带来的便利与效率</p>
|
||
<a href="/login" class="inline-block bg-slate-800 text-white py-4 px-8 rounded-lg shadow-md font-medium text-lg transition-all hover:shadow-lg hover:-translate-y-1">
|
||
立即开始使用
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 回到顶部按钮 - 更新为深色调 -->
|
||
<button id="back-to-top" class="fixed bottom-6 right-6 bg-slate-800 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all z-50 hover:-translate-y-1 hover:shadow-xl">
|
||
<i class="fas fa-arrow-up"></i>
|
||
</button>
|
||
|
||
<script>
|
||
// 回到顶部按钮功能
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const backToTopButton = document.getElementById('back-to-top');
|
||
|
||
window.addEventListener('scroll', function() {
|
||
if (window.pageYOffset > 300) {
|
||
backToTopButton.classList.remove('opacity-0', 'invisible');
|
||
backToTopButton.classList.add('opacity-100', 'visible');
|
||
} else {
|
||
backToTopButton.classList.remove('opacity-100', 'visible');
|
||
backToTopButton.classList.add('opacity-0', 'invisible');
|
||
}
|
||
});
|
||
|
||
backToTopButton.addEventListener('click', function() {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
|
||
// 平滑滚动到锚点
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
const targetId = this.getAttribute('href');
|
||
if (targetId === '#') return;
|
||
|
||
const targetElement = document.querySelector(targetId);
|
||
if (targetElement) {
|
||
targetElement.scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 导航栏滚动效果
|
||
const header = document.querySelector('header');
|
||
window.addEventListener('scroll', function() {
|
||
if (window.scrollY > 50) {
|
||
header.classList.add('shadow-md');
|
||
} else {
|
||
header.classList.remove('shadow-md');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|