Files
admin-ui/public/web/index.html
2025-12-31 16:35:28 +08:00

187 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能营销服务平台 - CID广告 & AI客服</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/3.0.23/tailwind.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
brand: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
600: '#0284c7',
900: '#0c4a6e',
}
}
}
}
}
</script>
</head>
<body class="bg-slate-50 text-slate-800 font-sans">
<!-- 导航栏 -->
<nav class="bg-white shadow-sm fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<span class="text-2xl font-bold text-brand-600">红动未来科技</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#services" class="text-slate-600 hover:text-brand-600 transition">核心业务</a>
<a href="#advantage" class="text-slate-600 hover:text-brand-600 transition">优势</a>
<a href="auth.html?mode=register" class="bg-brand-600 text-white px-5 py-2 rounded-full hover:bg-brand-700 transition shadow-md">商家入驻</a>
<a href="/index.html#/login" class="text-slate-600 hover:text-brand-600 transition font-medium">后台登录</a>
</div>
</div>
</div>
</nav>
<!-- Hero 区域 -->
<section class="relative pt-32 pb-20 bg-gradient-to-br from-brand-50 via-white to-brand-50 overflow-hidden">
<!-- 背景装饰 -->
<div class="absolute top-0 left-0 -ml-20 -mt-20 w-96 h-96 bg-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 fade-in-up">
<div class="text-center max-w-3xl mx-auto">
<h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight mb-6 leading-tight">
赋能商业增长的 <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 to-brand-400">智能营销解决方案</span>
</h1>
<p class="text-lg text-slate-600 mb-10 leading-relaxed max-w-2xl mx-auto">
通过精准的 CID 广告归因技术与 24/7 智能 AI 客服,帮助企业降低获客成本,提升转化效率,实现全链路营销闭环。
</p>
<div class="flex justify-center gap-4">
<a href="auth.html?mode=register" class="px-8 py-4 bg-brand-600 text-white rounded-lg font-semibold hover:bg-brand-700 active:scale-95 transition-all duration-200 shadow-lg hover:shadow-brand-500/30">立即入驻</a>
<a href="#services" class="px-8 py-4 bg-white text-brand-600 border border-brand-200 rounded-lg font-semibold hover:bg-slate-50 hover:border-brand-300 active:scale-95 transition-all duration-200">了解服务</a>
</div>
</div>
</div>
</section>
<!-- 核心业务介绍 -->
<section id="services" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 fade-in-up" style="animation-delay: 0.2s;">
<h2 class="text-3xl font-bold text-slate-900 mb-4">核心业务板块</h2>
<p class="text-slate-600 max-w-2xl mx-auto">专注于电商与服务行业的两大核心痛点:流量获取与用户留存。</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- CID 广告业务 -->
<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.3s;">
<div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-blue-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
<div class="relative z-10">
<div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-100 transition-colors duration-300">
<svg class="w-8 h-8 text-blue-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">CID 广告业务</h3>
<p class="text-slate-600 mb-6 leading-relaxed">
打破平台数据壁垒,实现跨平台广告投放效果精准归因。
</p>
<ul class="space-y-3">
<li class="flex items-center text-slate-700">
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
全链路转化数据回传
</li>
<li class="flex items-center text-slate-700">
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
提升 ROI 投产比
</li>
<li class="flex items-center text-slate-700">
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
支持多媒体平台
</li>
</ul>
</div>
</div>
<!-- 聚合电商业务 -->
<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.4s;">
<div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-orange-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
<div class="relative z-10">
<div class="w-14 h-14 bg-orange-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-orange-100 transition-colors duration-300">
<svg class="w-8 h-8 text-orange-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-orange-600 transition-colors">聚合电商业务</h3>
<p class="text-slate-600 mb-6 leading-relaxed">
一站式聚合主流电商平台资源,实现流量共享与销售增长。
</p>
<ul class="space-y-3">
<li class="flex items-center text-slate-700">
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
多平台商品一键管理
</li>
<li class="flex items-center text-slate-700">
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
聚合流量分发体系
</li>
<li class="flex items-center text-slate-700">
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
供应链深度整合
</li>
</ul>
</div>
</div>
<!-- AI 客服业务 -->
<div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl border border-slate-100 p-8 hover:border-brand-200 transition-all duration-300 hover:-translate-y-2 fade-in-up" style="animation-delay: 0.5s;">
<div class="absolute top-0 right-0 -mt-6 -mr-6 w-24 h-24 bg-purple-100 rounded-full opacity-0 group-hover:opacity-50 blur-2xl transition duration-500"></div>
<div class="relative z-10">
<div class="w-14 h-14 bg-purple-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-purple-100 transition-colors duration-300">
<svg class="w-8 h-8 text-purple-600 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-purple-600 transition-colors">AI 智能客服业务</h3>
<p class="text-slate-600 mb-6 leading-relaxed">
基于大模型的智能对话系统7x24小时在线秒级响应客户咨询。
</p>
<ul class="space-y-3">
<li class="flex items-center text-slate-700">
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
自动接待与意图识别
</li>
<li class="flex items-center text-slate-700">
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
智能话术推荐
</li>
<li class="flex items-center text-slate-700">
<svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
降低人工成本
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 底部 CTA -->
<section class="py-20 bg-brand-900 text-white">
<div class="max-w-4xl mx-auto text-center px-4">
<h2 class="text-3xl font-bold mb-6">准备好提升您的业务了吗?</h2>
<p class="text-brand-100 mb-8 text-lg">加入数千家已经在使用我们服务的商家行列,开启智能营销新时代。</p>
<a href="auth.html?mode=register" class="inline-block px-10 py-4 bg-white text-brand-900 rounded-lg font-bold text-lg hover:bg-brand-50 transition transform hover:scale-105">
免费商家入驻
</a>
</div>
</section>
<footer class="bg-slate-900 text-slate-400 py-8">
<div class="max-w-7xl mx-auto px-4 text-center">
<p>&copy; 2025 红动未来科技. All rights reserved.</p>
</div>
</footer>
</body>
</html>