Python/玄潮官网/index.html

1258 lines
59 KiB
HTML
Raw Permalink 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>玄潮科技 - 全域数据营销服务,赋能产业数智增长</title>
<meta
name="description"
content="玄潮科技是一家聚焦数据营销场景、数据服务、产业智能分析的数智科技企业,深耕商业数据与产业营销领域多年,为多垂直行业客户提供标准化、定制化的产业数据服务与营销增长解决方案。"
/>
<meta
name="keywords"
content="玄潮科技,数据营销,产业智能分析,数智化服务,用户智能评级,精准拓新,全域营销,营销风控"
/>
<!-- Google Fonts -->
<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=Noto+Sans+SC:wght@300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
"xuan-dark": "#171717",
"xuan-darker": "#0a0a0a",
"xuan-primary": "#1f1f1f",
"xuan-accent": "#9a191e",
"xuan-accent-light": "#e53935",
"xuan-accent-dark": "#7a0f14",
},
fontFamily: {
sans: [
'"Noto Sans SC"',
"system-ui",
"-apple-system",
"sans-serif",
],
},
},
},
};
</script>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body class="font-sans bg-white text-gray-800">
<!-- ==================== Header / Navigation ==================== -->
<header
id="header"
class="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md shadow-sm transition-all duration-300"
>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<a href="#home" class="flex items-center space-x-2.5 flex-shrink-0">
<img
src="assets/xuanchao-logo.png"
alt="玄潮科技"
class="w-10 h-10 object-contain"
/>
<span class="text-2xl font-bold text-xuan-dark">玄潮科技</span>
</a>
<!-- Desktop Nav -->
<nav class="hidden md:flex items-center space-x-2">
<a
href="#home"
class="nav-link active text-xuan-dark px-4 py-2 text-base font-semibold transition-colors duration-200 rounded-lg"
>首页</a
>
<a
href="#about"
class="nav-link text-gray-800 hover:text-xuan-accent px-4 py-2 text-base font-semibold transition-colors duration-200 rounded-lg"
>关于我们</a
>
<a
href="#products"
class="nav-link text-gray-800 hover:text-xuan-accent px-4 py-2 text-base font-semibold transition-colors duration-200 rounded-lg"
>产品服务</a
>
<a
href="#contact"
class="nav-link text-gray-800 hover:text-xuan-accent px-4 py-2 text-base font-semibold transition-colors duration-200 rounded-lg"
>联系我们</a
>
</nav>
<!-- CTA Button -->
<a
href="#contact"
class="hidden md:inline-flex items-center bg-gradient-to-r from-xuan-accent-light to-xuan-accent text-white text-sm font-medium px-5 py-2.5 rounded-lg hover:shadow-lg hover:scale-105 transition-all duration-300"
>
立即咨询
</a>
<!-- Mobile Menu Button -->
<button
id="mobile-menu-btn"
class="md:hidden p-2 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors"
aria-label="菜单"
>
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="md:hidden hidden bg-white border-t border-gray-100"
>
<nav class="px-4 py-3 space-y-1">
<a
href="#home"
class="mobile-nav-link block py-3 px-4 text-gray-700 hover:bg-gray-50 hover:text-xuan-dark rounded-lg font-medium transition-colors"
>首页</a
>
<a
href="#about"
class="mobile-nav-link block py-3 px-4 text-gray-700 hover:bg-gray-50 hover:text-xuan-dark rounded-lg font-medium transition-colors"
>关于我们</a
>
<a
href="#products"
class="mobile-nav-link block py-3 px-4 text-gray-700 hover:bg-gray-50 hover:text-xuan-dark rounded-lg font-medium transition-colors"
>产品服务</a
>
<a
href="#contact"
class="mobile-nav-link block py-3 px-4 text-gray-700 hover:bg-gray-50 hover:text-xuan-dark rounded-lg font-medium transition-colors"
>联系我们</a
>
<a
href="#contact"
class="mobile-nav-link block py-3 px-4 bg-gradient-to-r from-xuan-accent-light to-xuan-accent text-white rounded-lg font-medium text-center"
>立即咨询</a
>
</nav>
</div>
</header>
<main class="flex-1 pt-16">
<!-- ==================== Hero / Banner ==================== -->
<section
id="home"
class="relative min-h-[560px] md:min-h-[640px] flex items-center justify-center overflow-hidden bg-xuan-dark py-20"
>
<!-- Background Image -->
<div
class="absolute inset-0 bg-cover bg-center"
style="background-image: url(&quot;assets/hero-bg2.png&quot;)"
></div>
<!-- Dark Overlay for readability -->
<div
class="absolute inset-0 bg-gradient-to-b from-xuan-darker/70 via-xuan-dark/40 to-xuan-darker/80"
></div>
<!-- Subtle Red Glow Orbs (keep for ambient depth) -->
<div
class="absolute top-1/4 left-1/4 w-72 h-72 bg-xuan-accent/8 rounded-full blur-3xl animate-float-slow"
></div>
<div
class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-xuan-accent-dark/8 rounded-full blur-3xl animate-float-delayed"
></div>
<!-- Content -->
<div class="relative z-10 text-center px-4 max-w-5xl mx-auto">
<div
class="inline-flex items-center bg-white/10 backdrop-blur-sm border border-white/20 text-xuan-accent-light text-sm font-medium px-4 py-2 rounded-full mb-6 reveal-up"
>
<i class="fas fa-sparkles mr-2"></i>
数智营销 · 合规驱动 · 全域增长
</div>
<h1
class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-5 tracking-tight leading-tight reveal-up"
style="animation-delay: 0.1s"
>
全域数据营销服务<br />
<span
class="bg-gradient-to-r from-xuan-accent-light to-xuan-accent bg-clip-text text-transparent"
>赋能产业数智增长</span
>
</h1>
<p
class="text-lg md:text-xl text-gray-300 font-light mb-8 reveal-up"
style="animation-delay: 0.2s"
>
合规产业洞察 | 智能用户分析 | 全场景营销增长解决方案
</p>
<div
class="flex flex-col sm:flex-row items-center justify-center gap-4 reveal-up"
style="animation-delay: 0.3s"
>
<a
href="#products"
class="w-full sm:w-auto inline-flex items-center justify-center bg-gradient-to-r from-xuan-accent-light to-xuan-accent text-white font-medium px-8 py-3.5 rounded-lg hover:shadow-2xl hover:shadow-xuan-accent/30 hover:scale-105 transition-all duration-300"
>
了解产品服务
<i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
<a
href="#contact"
class="w-full sm:w-auto inline-flex items-center justify-center bg-white/10 backdrop-blur-sm border border-white/30 text-white font-medium px-8 py-3.5 rounded-lg hover:bg-white/20 transition-all duration-300"
>
<i class="fas fa-headset mr-2 text-sm"></i>
联系我们
</a>
</div>
</div>
<!-- Scroll Indicator -->
<a
href="#about"
class="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/50 hover:text-white transition-colors animate-bounce-slow"
>
<i class="fas fa-chevron-down text-2xl"></i>
</a>
</section>
<!-- ==================== About Us ==================== -->
<section id="about" class="py-20 md:py-28 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Company Intro -->
<div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center mb-20">
<div class="reveal-left">
<div class="relative">
<div
class="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl border border-gray-200 bg-white relative"
>
<!-- 已去掉背景图 -->
<!-- 已去掉顶部红色方块 -->
<div
class="relative w-full h-full flex items-center justify-center p-4"
>
<div class="w-full h-full grid grid-cols-2 gap-4">
<div
class="bg-white rounded-xl shadow-md border border-gray-100 flex flex-col items-center justify-center p-5"
>
<i
class="fas fa-database text-xuan-accent text-3xl mb-3"
></i>
<div class="text-gray-800 text-sm font-semibold">
数据治理
</div>
</div>
<div
class="bg-white rounded-xl shadow-md border border-gray-100 flex flex-col items-center justify-center p-5"
>
<i
class="fas fa-brain text-xuan-accent text-3xl mb-3"
></i>
<div class="text-gray-800 text-sm font-semibold">
智能分析
</div>
</div>
<div
class="bg-white rounded-xl shadow-md border border-gray-100 flex flex-col items-center justify-center p-5"
>
<i
class="fas fa-bullhorn text-xuan-accent text-3xl mb-3"
></i>
<div class="text-gray-800 text-sm font-semibold">
营销增长
</div>
</div>
<div
class="bg-white rounded-xl shadow-md border border-gray-100 flex flex-col items-center justify-center p-5"
>
<i
class="fas fa-shield-halved text-xuan-accent text-3xl mb-3"
></i>
<div class="text-gray-800 text-sm font-semibold">
合规体系
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="reveal-right">
<span
class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
>关于玄潮</span
>
<h2
class="text-3xl md:text-4xl font-bold text-xuan-dark mb-6 leading-tight"
>
数智科技企业<br />深耕产业数据营销
</h2>
<p class="text-gray-600 leading-relaxed mb-5">
玄潮是一家聚焦<strong class="text-xuan-dark"
>数据营销场景、数据服务、产业智能分析</strong
>的数智科技企业,深耕商业数据与产业营销领域多年,汇聚资深技术研发与产业运营团队,具备成熟的数智化服务落地能力。
</p>
<p class="text-gray-600 leading-relaxed mb-8">
公司立足合规数据体系,依托自主研发的算法模型与智能分析能力,为多垂直行业客户提供标准化、定制化的产业数据服务与营销增长解决方案,聚焦解决企业营销粗放、用户价值挖掘不足、运营效率偏低等核心痛点,助力企业实现精细化运营、降本增效与可持续增长,已落地多行业标杆服务项目。
</p>
<div class="flex flex-wrap gap-3">
<span
class="inline-flex items-center bg-red-50 text-xuan-accent text-sm font-medium px-4 py-2 rounded-full"
>
<i class="fas fa-check mr-2 text-xs"></i>精细化运营
</span>
<span
class="inline-flex items-center bg-red-50 text-xuan-accent text-sm font-medium px-4 py-2 rounded-full"
>
<i class="fas fa-check mr-2 text-xs"></i>降本增效
</span>
<span
class="inline-flex items-center bg-red-50 text-xuan-accent text-sm font-medium px-4 py-2 rounded-full"
>
<i class="fas fa-check mr-2 text-xs"></i>可持续增长
</span>
</div>
</div>
</div>
<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-20">
<div
class="stat-card group bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300"
>
<div
class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-red-50 mb-4 group-hover:bg-xuan-accent group-hover:scale-110 transition-all duration-300"
>
<i
class="fas fa-layer-group text-xuan-accent text-xl group-hover:text-white transition-colors"
></i>
</div>
<div class="text-4xl font-bold text-xuan-dark mb-1">
<span class="counter" data-target="10">0</span
><span class="text-xuan-accent">+</span>
</div>
<div class="text-gray-500 text-sm">覆盖垂直行业</div>
</div>
<div
class="stat-card group bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300"
>
<div
class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-red-50 mb-4 group-hover:bg-xuan-accent group-hover:scale-110 transition-all duration-300"
>
<i
class="fas fa-thumbs-up text-xuan-accent text-xl group-hover:text-white transition-colors"
></i>
</div>
<div class="text-4xl font-bold text-xuan-dark mb-1">
<span class="counter" data-target="95">0</span
><span class="text-xuan-accent">%+</span>
</div>
<div class="text-gray-500 text-sm">客户满意度</div>
</div>
<div
class="stat-card group bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300"
>
<div
class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-red-50 mb-4 group-hover:bg-xuan-accent group-hover:scale-110 transition-all duration-300"
>
<i
class="fas fa-arrow-trend-up text-xuan-accent text-xl group-hover:text-white transition-colors"
></i>
</div>
<div class="text-4xl font-bold text-xuan-dark mb-1">
<span class="counter" data-target="30">0</span
><span class="text-xuan-accent">%+</span>
</div>
<div class="text-gray-500 text-sm">企业营销投入效益提效</div>
</div>
</div>
<!-- Core Advantages -->
<div class="text-center mb-12">
<span
class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
>Our Strengths</span
>
<h2 class="text-3xl md:text-4xl font-bold text-xuan-dark mb-4">
核心优势
</h2>
<div
class="w-20 h-1 bg-gradient-to-r from-xuan-accent-light to-xuan-accent mx-auto rounded-full"
></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
<div
class="advantage-card group bg-white rounded-2xl p-7 border border-gray-100 hover:border-xuan-accent hover:shadow-xl transition-all duration-300"
>
<div
class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-5 group-hover:scale-110 transition-transform duration-300"
>
<i class="fas fa-magnifying-glass-chart text-white text-lg"></i>
</div>
<h3 class="text-lg font-bold text-xuan-dark mb-3">
行业深度洞察
</h3>
<p class="text-gray-500 text-sm leading-relaxed">
深耕多领域产业营销场景,深度拆解各行业运营特征与增长痛点,结合产业发展趋势与客户业务场景,输出适配性极强的数智化运营与增长策略。
</p>
</div>
<div
class="advantage-card group bg-white rounded-2xl p-7 border border-gray-100 hover:border-xuan-accent hover:shadow-xl transition-all duration-300"
>
<div
class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-5 group-hover:scale-110 transition-transform duration-300"
>
<i class="fas fa-shield-halved text-white text-lg"></i>
</div>
<h3 class="text-lg font-bold text-xuan-dark mb-3">
合规数据体系
</h3>
<p class="text-gray-500 text-sm leading-relaxed">
严格恪守国家数据安全、个人隐私保护相关法律法规,建立全流程合规数据治理机制,标准化数据采集、分析、应用流程,保障所有服务合规可控、风险可控。
</p>
</div>
<div
class="advantage-card group bg-white rounded-2xl p-7 border border-gray-100 hover:border-xuan-accent hover:shadow-xl transition-all duration-300"
>
<div
class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-5 group-hover:scale-110 transition-transform duration-300"
>
<i class="fas fa-arrows-rotate text-white text-lg"></i>
</div>
<h3 class="text-lg font-bold text-xuan-dark mb-3">
全域闭环赋能
</h3>
<p class="text-gray-500 text-sm leading-relaxed">
打通公私域产业运营链路,构建「用户分析-策略匹配-流量运营-效果复盘」全闭环服务体系,实现方案可落地、运营可追踪、增长可量化。
</p>
</div>
<div
class="advantage-card group bg-white rounded-2xl p-7 border border-gray-100 hover:border-xuan-accent hover:shadow-xl transition-all duration-300"
>
<div
class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-5 group-hover:scale-110 transition-transform duration-300"
>
<i class="fas fa-people-group text-white text-lg"></i>
</div>
<h3 class="text-lg font-bold text-xuan-dark mb-3">
专业落地服务
</h3>
<p class="text-gray-500 text-sm leading-relaxed">
配备专属技术与运营服务团队,基于不同行业属性定制差异化服务方案,全程跟进项目落地、优化迭代,保障服务实效与客户价值落地。
</p>
</div>
</div>
<!-- Team Background & Mission -->
<div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center mb-20">
<div class="reveal-left order-2 md:order-1">
<span
class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
>Our Team</span
>
<h2
class="text-3xl md:text-4xl font-bold text-xuan-dark mb-6 leading-tight"
>
团队背景
</h2>
<p class="text-gray-600 leading-relaxed mb-8">
团队核心成员深耕产业数据、智能算法、数字营销、产业运营领域多年,具备丰富的技术研发与项目落地实战经验。团队立足产业真实需求,持续迭代智能分析模型与服务体系,快速响应各行业客户的定制化需求,已成功落地多个跨区域、跨行业数智服务项目,持续为客户输出稳定、高效、合规的产业增长服务能力。
</p>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center space-x-3">
<div
class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0"
>
<i class="fas fa-code text-xuan-accent"></i>
</div>
<span class="text-sm text-gray-700 font-medium"
>技术研发</span
>
</div>
<div class="flex items-center space-x-3">
<div
class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0"
>
<i class="fas fa-chart-bar text-xuan-accent"></i>
</div>
<span class="text-sm text-gray-700 font-medium"
>产业运营</span
>
</div>
<div class="flex items-center space-x-3">
<div
class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0"
>
<i class="fas fa-microchip text-xuan-accent"></i>
</div>
<span class="text-sm text-gray-700 font-medium"
>智能算法</span
>
</div>
<div class="flex items-center space-x-3">
<div
class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center flex-shrink-0"
>
<i class="fas fa-bullhorn text-xuan-accent"></i>
</div>
<span class="text-sm text-gray-700 font-medium"
>数字营销</span
>
</div>
</div>
</div>
<div class="reveal-right order-1 md:order-2">
<!-- Mission Box -->
<div
class="relative rounded-2xl overflow-hidden bg-gradient-to-br from-xuan-dark to-xuan-darker p-8 md:p-12 shadow-2xl"
>
<div class="absolute inset-0 opacity-10">
<div
class="absolute top-0 left-0 w-full h-full"
style="
background-image: radial-gradient(
circle,
rgba(154, 25, 30, 0.3) 1px,
transparent 1px
);
background-size: 25px 25px;
"
></div>
</div>
<div
class="absolute -top-10 -right-10 w-40 h-40 bg-xuan-accent/20 rounded-full blur-3xl"
></div>
<div class="relative z-10">
<div
class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-6"
>
<i class="fas fa-bullseye text-white text-xl"></i>
</div>
<span
class="block text-xuan-accent-light text-sm font-bold uppercase tracking-wider mb-4"
>企业使命</span
>
<p
class="text-white text-xl md:text-2xl font-medium leading-relaxed"
>
以合规化产业数据服务与智能分析能力,赋能企业精细化营销运营,让每一次产业投入都收获<span
class="text-xuan-accent-light"
>可量化的真实增长价值</span
>。
</p>
</div>
</div>
</div>
</div>
<!-- Covered Industries -->
<div class="text-center mb-12">
<span
class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
>Industries</span
>
<h2 class="text-3xl md:text-4xl font-bold text-xuan-dark mb-4">
覆盖行业
</h2>
<p class="text-gray-500 max-w-2xl mx-auto">
深耕多领域产业营销场景,已服务多个垂直行业标杆项目
</p>
<div
class="w-20 h-1 bg-gradient-to-r from-xuan-accent-light to-xuan-accent mx-auto rounded-full mt-4"
></div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-car text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">汽车</div>
</div>
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-credit-card text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">信贷</div>
</div>
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-baby text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">母婴</div>
</div>
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-stethoscope text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">医美</div>
</div>
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-spray-can-sparkles text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">美妆</div>
</div>
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-seedling text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">植发</div>
</div>
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-bag-shopping text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">快消</div>
</div>
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-plane text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">文旅</div>
</div>
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-gamepad text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">游戏</div>
</div>
<div
class="industry-card group bg-white rounded-xl p-6 text-center border border-gray-100 hover:border-xuan-accent hover:shadow-lg transition-all duration-300"
>
<i
class="fas fa-video text-2xl text-gray-400 group-hover:text-xuan-accent mb-3 transition-colors"
></i>
<div class="text-sm font-medium text-gray-700">品牌MCN</div>
</div>
</div>
</div>
</section>
<!-- ==================== Products & Services ==================== -->
<section id="products" class="py-20 md:py-28 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-12">
<span
class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
>Our Services</span
>
<h2 class="text-3xl md:text-4xl font-bold text-xuan-dark mb-4">
产品服务
</h2>
<p class="text-gray-500 max-w-2xl mx-auto">
全链路数智化营销服务体系,赋能企业精细化运营与可持续增长
</p>
<div
class="w-20 h-1 bg-gradient-to-r from-xuan-accent-light to-xuan-accent mx-auto rounded-full mt-4"
></div>
</div>
<!-- Service Cards (1-4) -->
<div class="grid md:grid-cols-2 gap-6 lg:gap-8 mb-12">
<!-- Service 1 -->
<div
class="service-card group bg-gradient-to-br from-gray-50 to-white rounded-2xl p-8 border border-gray-100 hover:border-xuan-accent hover:shadow-2xl transition-all duration-300"
>
<div class="flex items-start justify-between mb-6">
<div
class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent group-hover:scale-110 transition-transform duration-300"
>
<i class="fas fa-users-gear text-white text-xl"></i>
</div>
<span
class="text-5xl font-bold text-gray-100 group-hover:text-red-100 transition-colors"
>01</span
>
</div>
<h3 class="text-xl font-bold text-xuan-dark mb-4">
产业用户智能评级服务
</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-3">
依托多维产业数据与自研算法模型,构建标准化用户价值评估体系,基于用户行为特征、产业需求、消费偏好等多维度信号,完成用户分层分级与价值研判。
</p>
<p class="text-gray-600 text-sm leading-relaxed">
通过智能化标签体系区分用户潜力层级,为企业运营决策、用户跟进、资源配置提供数据参考,结合不同行业属性完成模型迭代调优,有效提升产业用户匹配精准度与运营转化效率。
</p>
</div>
<!-- Service 2 -->
<div
class="service-card group bg-gradient-to-br from-gray-50 to-white rounded-2xl p-8 border border-gray-100 hover:border-xuan-accent hover:shadow-2xl transition-all duration-300"
>
<div class="flex items-start justify-between mb-6">
<div
class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent group-hover:scale-110 transition-transform duration-300"
>
<i class="fas fa-bullseye text-white text-xl"></i>
</div>
<span
class="text-5xl font-bold text-gray-100 group-hover:text-red-100 transition-colors"
>02</span
>
</div>
<h3 class="text-xl font-bold text-xuan-dark mb-4">
精准产业拓新服务
</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-3">
基于行业产业特征与目标用户画像,搭建精细化人群研判体系,精准挖掘具备真实产业需求与消费潜力的目标客群。
</p>
<p class="text-gray-600 text-sm leading-relaxed">
适配多类型用户承接与运营场景,结合行业特性定制差异化拓新与运营策略,精准过滤无效流量与非目标客群,帮助企业高效完成优质用户扩容,实现低成本精准拓新。
</p>
</div>
<!-- Service 3 -->
<div
class="service-card group bg-gradient-to-br from-gray-50 to-white rounded-2xl p-8 border border-gray-100 hover:border-xuan-accent hover:shadow-2xl transition-all duration-300"
>
<div class="flex items-start justify-between mb-6">
<div
class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent group-hover:scale-110 transition-transform duration-300"
>
<i class="fas fa-diagram-project text-white text-xl"></i>
</div>
<span
class="text-5xl font-bold text-gray-100 group-hover:text-red-100 transition-colors"
>03</span
>
</div>
<h3 class="text-xl font-bold text-xuan-dark mb-4">
全域智能营销赋能服务
</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-3">
整合全域公私域运营渠道,搭建「智能人群分析、策略适配、全渠道赋能、数据复盘优化」的全链路营销服务体系。
</p>
<p class="text-gray-600 text-sm leading-relaxed">
依托产业数据沉淀与智能分析能力,完成精细化人群划分、竞品客群挖掘、自有用户数据联动分析,配套标准化运营工具与落地策略支撑。通过全维度数据复盘,梳理运营链路核心痛点,助力客户持续优化营销资源配置,提升整体运营收益。
</p>
</div>
<!-- Service 4 -->
<div
class="service-card group bg-gradient-to-br from-gray-50 to-white rounded-2xl p-8 border border-gray-100 hover:border-xuan-accent hover:shadow-2xl transition-all duration-300"
>
<div class="flex items-start justify-between mb-6">
<div
class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent group-hover:scale-110 transition-transform duration-300"
>
<i class="fas fa-shield-halved text-white text-xl"></i>
</div>
<span
class="text-5xl font-bold text-gray-100 group-hover:text-red-100 transition-colors"
>04</span
>
</div>
<h3 class="text-xl font-bold text-xuan-dark mb-4">
营销智能风控服务
</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-3">
针对各类产业营销运营场景,搭建智能化风险识别与防护体系,依托算法能力精准识别异常流量、批量作弊、恶意薅羊毛等各类营销风险行为。
</p>
<p class="text-gray-600 text-sm leading-relaxed">
实现异常账号、异常访问行为的智能监测与拦截,全方位守护企业营销预算与运营秩序,适配线上活动运营、全域拓新、广告投放等多类商业场景,保障营销运营公平高效。
</p>
</div>
</div>
<!-- Service 5: Vertical Industry Solutions -->
<div
class="rounded-3xl bg-gradient-to-br from-xuan-dark to-xuan-darker p-8 md:p-12 shadow-2xl overflow-hidden relative"
>
<div class="absolute inset-0 opacity-10">
<div
class="absolute top-0 left-0 w-full h-full"
style="
background-image: radial-gradient(
circle,
rgba(154, 25, 30, 0.3) 1px,
transparent 1px
);
background-size: 30px 30px;
"
></div>
</div>
<div
class="absolute -top-20 -right-20 w-72 h-72 bg-xuan-accent/10 rounded-full blur-3xl"
></div>
<div class="relative z-10">
<div
class="flex flex-col md:flex-row items-start md:items-center justify-between mb-10 gap-4"
>
<div>
<div class="flex items-center space-x-3 mb-4">
<div
class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent"
>
<i class="fas fa-layer-group text-white text-lg"></i>
</div>
<span class="text-5xl font-bold text-white/10">05</span>
</div>
<h3 class="text-2xl md:text-3xl font-bold text-white mb-3">
垂直行业数智解决方案
</h3>
<p class="text-gray-400 max-w-2xl text-sm leading-relaxed">
聚焦多类主流垂直行业,基于行业产业特征与增长痛点,定制专属数智化营销与数据服务方案,以产业智能分析、精细化用户运营、全域增长赋能为核心,助力各行业企业实现数字化转型与业务增长。
</p>
</div>
</div>
<!-- Industry Solutions Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div
class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
>
<div class="flex items-center space-x-3 mb-3">
<i class="fas fa-car text-xuan-accent-light text-lg"></i>
<h4 class="text-white font-bold">汽车行业</h4>
</div>
<p class="text-gray-400 text-xs leading-relaxed">
依托用户购车需求研判、用户价值分层能力,赋能车企及渠道精细化运营与销售转化提升。
</p>
</div>
<div
class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
>
<div class="flex items-center space-x-3 mb-3">
<i
class="fas fa-money-check-dollar text-xuan-accent-light text-lg"
></i>
<h4 class="text-white font-bold">金融信贷行业</h4>
</div>
<p class="text-gray-400 text-xs leading-relaxed">
挖掘用户金融服务需求与潜力,构建高价值客群体系,助力金融机构精准运营、合规拓客。
</p>
</div>
<div
class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
>
<div class="flex items-center space-x-3 mb-3">
<i class="fas fa-baby text-xuan-accent-light text-lg"></i>
<h4 class="text-white font-bold">母婴消费行业</h4>
</div>
<p class="text-gray-400 text-xs leading-relaxed">
精准识别备孕、孕期、育儿全周期人群,匹配精细化运营与拓新方案,赋能消费品牌用户增长。
</p>
</div>
<div
class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
>
<div class="flex items-center space-x-3 mb-3">
<i
class="fas fa-heart-pulse text-xuan-accent-light text-lg"
></i>
<h4 class="text-white font-bold">医美行业</h4>
</div>
<p class="text-gray-400 text-xs leading-relaxed">
挖掘医美消费意向与潜力客群,为线下医美机构提供精准用户运营与增长赋能。
</p>
</div>
<div
class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
>
<div class="flex items-center space-x-3 mb-3">
<i
class="fas fa-spray-can-sparkles text-xuan-accent-light text-lg"
></i>
<h4 class="text-white font-bold">美妆快消行业</h4>
</div>
<p class="text-gray-400 text-xs leading-relaxed">
覆盖竞品客群挖掘、大促节点拓新、存量用户唤醒、精细化会员运营等全场景增长服务。
</p>
</div>
<div
class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10 hover:bg-white/10 hover:border-xuan-accent/50 transition-all duration-300"
>
<div class="flex items-center space-x-3 mb-3">
<i
class="fas fa-gamepad text-xuan-accent-light text-lg"
></i>
<h4 class="text-white font-bold">游戏与品牌MCN行业</h4>
</div>
<p class="text-gray-400 text-xs leading-relaxed">
精准挖掘潜力用户、智能防控运营风险、复盘优化投放效果,助力内容品牌长效增长。
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Contact Us ==================== -->
<section id="contact" class="py-20 md:py-28 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-12">
<span
class="inline-block text-xuan-accent text-sm font-bold uppercase tracking-wider mb-3"
>Contact Us</span
>
<h2 class="text-3xl md:text-4xl font-bold text-xuan-dark mb-4">
联系我们
</h2>
<p class="text-gray-500 max-w-2xl mx-auto">
商务合作咨询:欢迎各行业品牌企业、广告机构、渠道服务商洽谈深度合作,共创产业数智增长新价值。
</p>
<div
class="w-20 h-1 bg-gradient-to-r from-xuan-accent-light to-xuan-accent mx-auto rounded-full mt-4"
></div>
</div>
<div class="grid md:grid-cols-2 gap-8 lg:gap-12">
<!-- Contact Info -->
<div class="space-y-6">
<div
class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
>
<h3 class="text-lg font-bold text-xuan-dark mb-6">联系方式</h3>
<div class="space-y-5">
<div class="flex items-start space-x-4">
<div
class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center flex-shrink-0"
>
<i class="fas fa-location-dot text-xuan-accent"></i>
</div>
<div>
<div class="text-sm font-semibold text-xuan-dark mb-1">
公司地址
</div>
<p class="text-gray-500 text-sm">
浙江省杭州市西湖区古荡街道西溪路525号C楼5686室
</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div
class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center flex-shrink-0"
>
<i class="fas fa-phone text-xuan-accent"></i>
</div>
<div>
<div class="text-sm font-semibold text-xuan-dark mb-1">
联系电话
</div>
<p class="text-gray-500 text-sm">
<a
href="tel:19521568866"
class="hover:text-xuan-accent transition-colors"
>19521568866</a
>
</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div
class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center flex-shrink-0"
>
<i class="fas fa-envelope text-xuan-accent"></i>
</div>
<div>
<div class="text-sm font-semibold text-xuan-dark mb-1">
电子邮箱
</div>
<p class="text-gray-500 text-sm">
<a
href="mailto:q@pangjukeji.com"
class="hover:text-xuan-accent transition-colors"
>q@pangjukeji.com</a
>
</p>
</div>
</div>
</div>
</div>
<!-- Business Cooperation Card -->
<div
class="rounded-2xl p-8 shadow-xl relative overflow-hidden border border-xuan-accent/15"
style="background-color: #fdf0ee"
>
<div
class="absolute -bottom-10 -right-10 w-40 h-40 bg-xuan-accent/8 rounded-full blur-3xl"
></div>
<div class="relative z-10">
<div
class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-xuan-accent-light to-xuan-accent mb-4"
>
<i class="fas fa-handshake text-white text-lg"></i>
</div>
<h3 class="text-xuan-dark text-lg font-bold mb-3">
商务合作咨询
</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-5">
欢迎各行业品牌企业、广告机构、渠道服务商洽谈深度合作,共创产业数智增长新价值。
</p>
<a
href="tel:19521568866"
class="inline-flex items-center bg-xuan-accent text-white text-sm font-medium px-5 py-2.5 rounded-lg hover:bg-xuan-accent-dark transition-all duration-300"
>
<i class="fas fa-phone mr-2 text-xs"></i>立即致电
</a>
</div>
</div>
</div>
<!-- Contact Form -->
<div
class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
>
<h3 class="text-lg font-bold text-xuan-dark mb-6">在线留言</h3>
<form id="contact-form" class="space-y-5" novalidate>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2"
>姓名 <span class="text-red-500">*</span></label
>
<input
type="text"
name="name"
id="name"
required
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all"
placeholder="请输入您的姓名"
/>
<p class="error-msg hidden text-red-500 text-xs mt-1">
请输入您的姓名
</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2"
>联系电话 <span class="text-red-500">*</span></label
>
<input
type="tel"
name="phone"
id="phone"
required
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all"
placeholder="请输入您的联系电话"
/>
<p class="error-msg hidden text-red-500 text-xs mt-1">
请输入正确的联系电话
</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2"
>邮箱地址 <span class="text-red-500">*</span></label
>
<input
type="email"
name="email"
id="email"
required
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all"
placeholder="请输入您的邮箱地址"
/>
<p class="error-msg hidden text-red-500 text-xs mt-1">
请输入正确的邮箱地址
</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2"
>公司名称 <span class="text-red-500">*</span></label
>
<input
type="text"
name="company"
id="company"
required
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all"
placeholder="请输入您的公司名称"
/>
<p class="error-msg hidden text-red-500 text-xs mt-1">
请输入您的公司名称
</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2"
>业务需求描述 <span class="text-red-500">*</span></label
>
<textarea
name="message"
id="message"
rows="4"
required
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-xuan-accent focus:border-transparent transition-all resize-none"
placeholder="请描述您的业务需求,以便我们更好地为您提供服务"
></textarea>
<p class="error-msg hidden text-red-500 text-xs mt-1">
请输入业务需求描述
</p>
</div>
<button
type="submit"
class="w-full bg-gradient-to-r from-xuan-accent-light to-xuan-accent text-white py-3.5 px-6 rounded-lg hover:shadow-lg hover:shadow-xuan-accent/30 hover:scale-[1.02] transition-all duration-300 font-medium flex items-center justify-center"
>
<i class="fas fa-paper-plane mr-2"></i>提交留言
</button>
</form>
<!-- Success Message -->
<div
id="form-success"
class="hidden mt-5 p-4 bg-green-50 border border-green-200 rounded-lg"
>
<div class="flex items-center space-x-2">
<i class="fas fa-circle-check text-green-500 text-lg"></i>
<p class="text-green-700 text-sm font-medium">
提交成功!我们会尽快与您联系,感谢您的关注。
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ==================== Footer ==================== -->
<footer class="bg-xuan-dark text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid md:grid-cols-3 gap-8 mb-8">
<!-- Company Info -->
<div>
<div class="flex items-center space-x-2 mb-4">
<img
src="assets/xuanchao-logo.png"
alt="玄潮科技"
class="w-9 h-9 object-contain"
/>
<span class="text-xl font-bold">玄潮科技</span>
</div>
<p class="text-gray-400 text-sm leading-relaxed mb-4">
全域数据营销服务,赋能产业数智增长
</p>
<div class="flex space-x-3">
<a
href="#"
class="w-9 h-9 rounded-lg bg-white/10 hover:bg-xuan-accent flex items-center justify-center transition-all duration-300"
aria-label="微信"
>
<i class="fab fa-weixin text-sm"></i>
</a>
<a
href="#"
class="w-9 h-9 rounded-lg bg-white/10 hover:bg-xuan-accent flex items-center justify-center transition-all duration-300"
aria-label="微博"
>
<i class="fab fa-weibo text-sm"></i>
</a>
<a
href="#"
class="w-9 h-9 rounded-lg bg-white/10 hover:bg-xuan-accent flex items-center justify-center transition-all duration-300"
aria-label="领英"
>
<i class="fab fa-linkedin-in text-sm"></i>
</a>
</div>
</div>
<!-- Contact Info -->
<div>
<h3 class="text-lg font-semibold mb-4">联系方式</h3>
<div class="space-y-3 text-sm text-gray-400">
<div class="flex items-start space-x-2">
<i class="fas fa-location-dot w-4 mt-1 flex-shrink-0"></i>
<span>浙江省杭州市西湖区古荡街道西溪路525号C楼5686室</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-phone w-4 flex-shrink-0"></i>
<a
href="tel:19521568866"
class="hover:text-white transition-colors"
>19521568866</a
>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-envelope w-4 flex-shrink-0"></i>
<a
href="mailto:q@pangjukeji.com"
class="hover:text-white transition-colors"
>q@pangjukeji.com</a
>
</div>
</div>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-lg font-semibold mb-4">快速链接</h3>
<div class="space-y-2 text-sm text-gray-400">
<a href="#home" class="block hover:text-white transition-colors"
>首页</a
>
<a href="#about" class="block hover:text-white transition-colors"
>关于我们</a
>
<a
href="#products"
class="block hover:text-white transition-colors"
>产品服务</a
>
<a
href="#contact"
class="block hover:text-white transition-colors"
>联系我们</a
>
</div>
</div>
</div>
<div
class="border-t border-white/10 pt-6 text-center text-sm text-gray-500"
>
<p>
&copy; <span id="current-year">2026</span> 玄潮科技. All rights
reserved.
</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button
id="back-to-top"
class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-gradient-to-br from-xuan-accent-light to-xuan-accent text-white shadow-lg opacity-0 invisible hover:scale-110 transition-all duration-300 z-40 flex items-center justify-center"
aria-label="返回顶部"
>
<i class="fas fa-arrow-up"></i>
</button>
<!-- ==================== Scripts ==================== -->
<script src="js/main.js"></script>
</body>
</html>