|
|
@@ -1,14 +1,5 @@
|
|
|
import { type KeyboardEvent, useState } from "react";
|
|
|
-import {
|
|
|
- BellRing,
|
|
|
- Check,
|
|
|
- EyeOff,
|
|
|
- Globe,
|
|
|
- Lock,
|
|
|
- UserSearch,
|
|
|
- Users,
|
|
|
- Zap,
|
|
|
-} from "lucide-react";
|
|
|
+import { BellRing, Check, EyeOff, Globe, Lock, UserSearch, Users, Zap } from "lucide-react";
|
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
import imageM3T11 from "../../assets/images/zjy/m3_t11.png";
|
|
|
@@ -34,33 +25,27 @@ const itemReveal = {
|
|
|
const homepageFaqs = [
|
|
|
{
|
|
|
question: "开邻智价云适合哪些企业使用?",
|
|
|
- answer:
|
|
|
- "开邻智价云主要面向需要管理线上渠道价格的医药品牌方,为品牌的渠道管理、市场和数据相关团队提供价格监测、线索溯源、预警协同与价格分析支持。",
|
|
|
+ answer: "开邻智价云主要面向需要管理线上渠道价格的医药品牌方,为品牌的渠道管理、市场和数据相关团队提供价格监测、线索溯源、预警协同与价格分析支持。",
|
|
|
},
|
|
|
{
|
|
|
question: "开邻智价云主要解决哪些渠道治理问题?",
|
|
|
- answer:
|
|
|
- "产品针对跨平台违规商家难锁定、人工监测覆盖有限、预警链路长,以及处置和证据留存不及时等场景,帮助品牌方提升线上渠道价格治理效率。",
|
|
|
+ answer: "产品针对跨平台违规商家难锁定、人工监测覆盖有限、预警链路长,以及处置和证据留存不及时等场景,帮助品牌方提升线上渠道价格治理效率。",
|
|
|
},
|
|
|
{
|
|
|
question: "开邻智价云支持哪些监测能力?",
|
|
|
- answer:
|
|
|
- "产品支持 B 端、C 端及 O 端渠道的 7×24 小时监测,并提供低价链接清洗和多维数据看板。数据监测最高支持 T+1 频率,具体覆盖范围与频率以项目方案为准。",
|
|
|
+ answer: "产品支持 B 端、C 端及 O 端渠道的 7×24 小时监测,并提供低价链接清洗和多维数据看板。数据监测最高支持 T+0 频率,具体覆盖范围与频率以项目方案为准。",
|
|
|
},
|
|
|
{
|
|
|
question: "发现价格异常后如何进行溯源和处置?",
|
|
|
- answer:
|
|
|
- "数据颗粒度可细化至单品级,支持店铺主体识别、技术与人工结合的溯源及证据固化;发现线索后,可通过多端通知和链接处置协同推进后续工作。",
|
|
|
+ answer: "数据颗粒度可细化至单品级,支持店铺主体识别、技术与人工结合的溯源及证据固化;发现线索后,可通过多端通知和链接处置协同推进后续工作。",
|
|
|
},
|
|
|
{
|
|
|
question: "开邻智价云能提供哪些价格分析?",
|
|
|
- answer:
|
|
|
- "产品可通过多维看板呈现行业整体价格动态,以及品类、区域和竞品价格走势,并可提供行业产品价格报告等数据服务。",
|
|
|
+ answer: "产品可通过多维看板呈现行业整体价格动态,以及品类、区域和竞品价格走势,并可提供行业产品价格报告等数据服务。",
|
|
|
},
|
|
|
{
|
|
|
question: "开邻智价云支持哪些部署和服务方式?",
|
|
|
- answer:
|
|
|
- "产品提供 SaaS 系统,也支持本地化部署、海量数据对接和个性化开发。企业可通过获取方案页面提交需求,由专业顾问结合实际业务评估方案。",
|
|
|
+ answer: "产品提供 SaaS 系统,也支持本地化部署、海量数据对接和个性化开发。企业可通过获取方案页面提交需求,由专业顾问结合实际业务评估方案。",
|
|
|
},
|
|
|
];
|
|
|
|
|
|
@@ -72,8 +57,7 @@ const homepageStructuredData = {
|
|
|
"@id": "https://price.kailin.com.cn/#webpage",
|
|
|
url: "https://price.kailin.com.cn/",
|
|
|
name: "开邻智价云 - 医药品牌线上渠道价格数据治理",
|
|
|
- description:
|
|
|
- "面向医药品牌方的线上渠道价格数据治理解决方案,提供跨平台价格监测、违规线索溯源、预警协同与价格分析。",
|
|
|
+ description: "面向医药品牌方的线上渠道价格数据治理解决方案,提供跨平台价格监测、违规线索溯源、预警协同与价格分析。",
|
|
|
inLanguage: "zh-CN",
|
|
|
isPartOf: {
|
|
|
"@id": "https://price.kailin.com.cn/#website",
|
|
|
@@ -203,15 +187,12 @@ export default function HomePage() {
|
|
|
|
|
|
return (
|
|
|
<div className="pt-20">
|
|
|
- <script type="application/ld+json">
|
|
|
- {JSON.stringify(homepageStructuredData)}
|
|
|
- </script>
|
|
|
+ <script type="application/ld+json">{JSON.stringify(homepageStructuredData)}</script>
|
|
|
<motion.section
|
|
|
className="relative overflow-hidden pt-24 pb-32 px-6 bg-slate-950"
|
|
|
initial={{ opacity: 0, y: 32, scale: 0.98 }}
|
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
|
- transition={{ duration: 0.9, ease: "easeOut" }}
|
|
|
- >
|
|
|
+ transition={{ duration: 0.9, ease: "easeOut" }}>
|
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(37,99,235,0.18),transparent_45%)]"></div>
|
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_bottom,rgba(15,23,42,0),rgba(15,23,42,0.75))]"></div>
|
|
|
@@ -223,25 +204,20 @@ export default function HomePage() {
|
|
|
initial={{ opacity: 0, y: 24 }}
|
|
|
animate={{ opacity: 1, y: 0 }}
|
|
|
transition={{ delay: 0.15, duration: 0.7, ease: "easeOut" }}
|
|
|
- className="relative z-10 max-w-5xl mx-auto space-y-8 text-center"
|
|
|
- >
|
|
|
+ className="relative z-10 max-w-5xl mx-auto space-y-8 text-center">
|
|
|
<div
|
|
|
style={{ fontSize: "2em", padding: "20px" }}
|
|
|
- className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-blue-200 text-xs font-bold uppercase tracking-widest"
|
|
|
- >
|
|
|
+ className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-blue-200 text-xs font-bold uppercase tracking-widest">
|
|
|
开邻智价云
|
|
|
</div>
|
|
|
<h1 className="text-4xl md:text-7xl font-extrabold font-headline leading-[1.08] tracking-tight text-white">
|
|
|
药品价格 尽在掌握 <br />
|
|
|
</h1>
|
|
|
- <p className="text-xl text-slate-300 font-medium max-w-3xl leading-relaxed mx-auto">
|
|
|
- 线上平台价格数据治理,医药品牌工业全链路解决方案。
|
|
|
- </p>
|
|
|
+ <p className="text-xl text-slate-300 font-medium max-w-3xl leading-relaxed mx-auto">线上平台价格数据治理,医药品牌工业全链路解决方案。</p>
|
|
|
<div className="flex items-center justify-center gap-6 flex-wrap">
|
|
|
<button
|
|
|
onClick={() => navigate("/contact")}
|
|
|
- className="bg-blue-600 text-white px-10 py-4 rounded-xl font-bold text-lg hover:shadow-[0_0_30px_rgba(37,99,235,0.45)] transition-all hover:-translate-y-1"
|
|
|
- >
|
|
|
+ className="bg-blue-600 text-white px-10 py-4 rounded-xl font-bold text-lg hover:shadow-[0_0_30px_rgba(37,99,235,0.45)] transition-all hover:-translate-y-1">
|
|
|
获取方案
|
|
|
</button>
|
|
|
</div>
|
|
|
@@ -249,42 +225,23 @@ export default function HomePage() {
|
|
|
</div>
|
|
|
</motion.section>
|
|
|
|
|
|
- <motion.section
|
|
|
- id="product-definition"
|
|
|
- aria-labelledby="product-definition-title"
|
|
|
- className="py-24 bg-slate-900 px-6"
|
|
|
- {...sectionReveal}
|
|
|
- >
|
|
|
+ <motion.section id="product-definition" aria-labelledby="product-definition-title" className="py-24 bg-slate-900 px-6" {...sectionReveal}>
|
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
|
- <p className="text-sm font-bold uppercase tracking-[0.2em] text-blue-400 mb-4">
|
|
|
- 产品定义
|
|
|
- </p>
|
|
|
- <h2
|
|
|
- id="product-definition-title"
|
|
|
- className="text-3xl md:text-4xl font-extrabold font-headline text-white mb-6"
|
|
|
- >
|
|
|
+ <p className="text-sm font-bold uppercase tracking-[0.2em] text-blue-400 mb-4">产品定义</p>
|
|
|
+ <h2 id="product-definition-title" className="text-3xl md:text-4xl font-extrabold font-headline text-white mb-6">
|
|
|
开邻智价云是什么?
|
|
|
</h2>
|
|
|
<p className="text-lg text-slate-300 leading-8">
|
|
|
开邻智价云是深圳大方无隅科技有限公司面向医药品牌方提供的线上渠道价格数据治理解决方案。
|
|
|
- 产品围绕跨平台价格监测、违规线索溯源、预警与处置协同、行业及竞品价格分析,
|
|
|
- 帮助品牌方提升渠道管理效率。
|
|
|
+ 产品围绕跨平台价格监测、违规线索溯源、预警与处置协同、行业及竞品价格分析, 帮助品牌方提升渠道管理效率。
|
|
|
</p>
|
|
|
</div>
|
|
|
</motion.section>
|
|
|
|
|
|
- <motion.section
|
|
|
- id="pain-points"
|
|
|
- aria-labelledby="pain-points-title"
|
|
|
- className="py-24 bg-slate-950 px-6"
|
|
|
- {...sectionReveal}
|
|
|
- >
|
|
|
+ <motion.section id="pain-points" aria-labelledby="pain-points-title" className="py-24 bg-slate-950 px-6" {...sectionReveal}>
|
|
|
<div className="max-w-7xl mx-auto">
|
|
|
<div className="mb-16 text-center">
|
|
|
- <h2
|
|
|
- id="pain-points-title"
|
|
|
- className="text-3xl font-extrabold font-headline text-white mb-4"
|
|
|
- >
|
|
|
+ <h2 id="pain-points-title" className="text-3xl font-extrabold font-headline text-white mb-4">
|
|
|
行业渠道治理的痛点
|
|
|
</h2>
|
|
|
<div className="h-1.5 w-20 bg-blue-600 mx-auto rounded-full"></div>
|
|
|
@@ -316,35 +273,22 @@ export default function HomePage() {
|
|
|
key={i}
|
|
|
{...itemReveal}
|
|
|
whileHover={{ y: -5 }}
|
|
|
- className="bg-slate-900/70 p-8 rounded-xl shadow-sm border border-slate-800 transition-all"
|
|
|
- >
|
|
|
+ className="bg-slate-900/70 p-8 rounded-xl shadow-sm border border-slate-800 transition-all">
|
|
|
<div className="w-12 h-12 rounded-lg bg-blue-500/15 flex items-center justify-center text-blue-400 mb-6">
|
|
|
<item.icon className="w-6 h-6" />
|
|
|
</div>
|
|
|
- <h3 className="text-xl font-bold mb-3 font-headline text-white">
|
|
|
- {item.title}
|
|
|
- </h3>
|
|
|
- <p className="text-slate-300 text-sm leading-relaxed">
|
|
|
- {item.desc}
|
|
|
- </p>
|
|
|
+ <h3 className="text-xl font-bold mb-3 font-headline text-white">{item.title}</h3>
|
|
|
+ <p className="text-slate-300 text-sm leading-relaxed">{item.desc}</p>
|
|
|
</motion.div>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
</motion.section>
|
|
|
|
|
|
- <motion.section
|
|
|
- id="capabilities"
|
|
|
- aria-labelledby="capabilities-title"
|
|
|
- className="py-32 px-6 bg-slate-950"
|
|
|
- {...sectionReveal}
|
|
|
- >
|
|
|
+ <motion.section id="capabilities" aria-labelledby="capabilities-title" className="py-32 px-6 bg-slate-950" {...sectionReveal}>
|
|
|
<div className="max-w-7xl mx-auto">
|
|
|
<div className="flex flex-col md:flex-row items-end justify-between mb-16 gap-6">
|
|
|
- <h2
|
|
|
- id="capabilities-title"
|
|
|
- className="text-4xl font-extrabold font-headline text-white leading-tight"
|
|
|
- >
|
|
|
+ <h2 id="capabilities-title" className="text-4xl font-extrabold font-headline text-white leading-tight">
|
|
|
4+1 服务优势
|
|
|
<br />
|
|
|
<span className="text-blue-600">全方位守护品牌渠道价值</span>
|
|
|
@@ -355,11 +299,8 @@ export default function HomePage() {
|
|
|
key={i}
|
|
|
onClick={() => setActiveTab(i)}
|
|
|
className={`px-6 py-2 font-bold whitespace-nowrap transition-all ${
|
|
|
- activeTab === i
|
|
|
- ? "text-blue-600 border-b-2 border-blue-600"
|
|
|
- : "text-slate-400 hover:text-white"
|
|
|
- }`}
|
|
|
- >
|
|
|
+ activeTab === i ? "text-blue-600 border-b-2 border-blue-600" : "text-slate-400 hover:text-white"
|
|
|
+ }`}>
|
|
|
{tab}
|
|
|
</button>
|
|
|
))}
|
|
|
@@ -373,17 +314,12 @@ export default function HomePage() {
|
|
|
animate={{ opacity: 1, y: 0 }}
|
|
|
exit={{ opacity: 0, y: -10 }}
|
|
|
transition={{ duration: 0.3 }}
|
|
|
- className="bg-slate-900 rounded-3xl p-8 md:p-12 border border-slate-800"
|
|
|
- >
|
|
|
+ className="bg-slate-900 rounded-3xl p-8 md:p-12 border border-slate-800">
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
|
|
<div className="space-y-8">
|
|
|
<div>
|
|
|
- <h3 className="text-3xl font-extrabold text-white mb-4 font-headline">
|
|
|
- {tabData[activeTab].title}
|
|
|
- </h3>
|
|
|
- <p className="text-slate-300 leading-relaxed text-lg">
|
|
|
- {tabData[activeTab].desc}
|
|
|
- </p>
|
|
|
+ <h3 className="text-3xl font-extrabold text-white mb-4 font-headline">{tabData[activeTab].title}</h3>
|
|
|
+ <p className="text-slate-300 leading-relaxed text-lg">{tabData[activeTab].desc}</p>
|
|
|
</div>
|
|
|
<div className="space-y-4">
|
|
|
{tabData[activeTab].features.map((feature, i) => (
|
|
|
@@ -392,12 +328,8 @@ export default function HomePage() {
|
|
|
<Check className="w-4 h-4" />
|
|
|
</div>
|
|
|
<div>
|
|
|
- <p className="font-bold text-slate-100">
|
|
|
- {feature.title}
|
|
|
- </p>
|
|
|
- <p className="text-sm text-slate-400">
|
|
|
- {feature.desc}
|
|
|
- </p>
|
|
|
+ <p className="font-bold text-slate-100">{feature.title}</p>
|
|
|
+ <p className="text-sm text-slate-400">{feature.desc}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|
|
|
@@ -421,19 +353,13 @@ export default function HomePage() {
|
|
|
id="service-advantages"
|
|
|
aria-labelledby="service-advantages-title"
|
|
|
className="py-24 bg-slate-900 text-white px-6 border-y border-slate-800"
|
|
|
- {...sectionReveal}
|
|
|
- >
|
|
|
+ {...sectionReveal}>
|
|
|
<div className="max-w-7xl mx-auto">
|
|
|
<div className="text-center mb-20">
|
|
|
- <h2
|
|
|
- id="service-advantages-title"
|
|
|
- className="text-4xl font-extrabold font-headline mb-4"
|
|
|
- >
|
|
|
+ <h2 id="service-advantages-title" className="text-4xl font-extrabold font-headline mb-4">
|
|
|
为什么选择开邻智价云?
|
|
|
</h2>
|
|
|
- <p className="text-slate-300 text-lg">
|
|
|
- 更智能的数据治理,更高效的渠道管理
|
|
|
- </p>
|
|
|
+ <p className="text-slate-300 text-lg">更智能的数据治理,更高效的渠道管理</p>
|
|
|
</div>
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-12">
|
|
|
{[
|
|
|
@@ -458,17 +384,11 @@ export default function HomePage() {
|
|
|
desc: "专属技术团队支持个性化开发",
|
|
|
},
|
|
|
].map((item, i) => (
|
|
|
- <motion.div
|
|
|
- key={i}
|
|
|
- className="text-center space-y-4"
|
|
|
- {...itemReveal}
|
|
|
- >
|
|
|
+ <motion.div key={i} className="text-center space-y-4" {...itemReveal}>
|
|
|
<div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-blue-500/15 text-blue-400 mb-2">
|
|
|
<item.icon className="w-10 h-10" />
|
|
|
</div>
|
|
|
- <h4 className="text-xl font-bold font-headline">
|
|
|
- {item.title}
|
|
|
- </h4>
|
|
|
+ <h4 className="text-xl font-bold font-headline">{item.title}</h4>
|
|
|
<p className="text-slate-300 text-sm">{item.desc}</p>
|
|
|
</motion.div>
|
|
|
))}
|
|
|
@@ -476,39 +396,22 @@ export default function HomePage() {
|
|
|
</div>
|
|
|
</motion.section>
|
|
|
|
|
|
- <motion.section
|
|
|
- id="faq"
|
|
|
- aria-labelledby="faq-title"
|
|
|
- className="py-24 px-6 bg-slate-950"
|
|
|
- {...sectionReveal}
|
|
|
- >
|
|
|
+ <motion.section id="faq" aria-labelledby="faq-title" className="py-24 px-6 bg-slate-950" {...sectionReveal}>
|
|
|
<div className="max-w-4xl mx-auto">
|
|
|
<div className="text-center mb-12">
|
|
|
- <p className="text-sm font-bold uppercase tracking-[0.2em] text-blue-400 mb-4">
|
|
|
- 常见问题
|
|
|
- </p>
|
|
|
- <h2
|
|
|
- id="faq-title"
|
|
|
- className="text-3xl md:text-4xl font-extrabold font-headline text-white"
|
|
|
- >
|
|
|
+ <p className="text-sm font-bold uppercase tracking-[0.2em] text-blue-400 mb-4">常见问题</p>
|
|
|
+ <h2 id="faq-title" className="text-3xl md:text-4xl font-extrabold font-headline text-white">
|
|
|
关于开邻智价云
|
|
|
</h2>
|
|
|
</div>
|
|
|
<div className="space-y-4">
|
|
|
{homepageFaqs.map(({ question, answer }) => (
|
|
|
- <details
|
|
|
- key={question}
|
|
|
- className="group rounded-2xl border border-slate-800 bg-slate-900/70 px-6 py-5"
|
|
|
- >
|
|
|
+ <details key={question} className="group rounded-2xl border border-slate-800 bg-slate-900/70 px-6 py-5">
|
|
|
<summary
|
|
|
onKeyDown={handleSummaryKeyDown}
|
|
|
- className="flex cursor-pointer list-none items-center justify-between gap-6 font-headline text-lg font-bold text-white"
|
|
|
- >
|
|
|
+ className="flex cursor-pointer list-none items-center justify-between gap-6 font-headline text-lg font-bold text-white">
|
|
|
<span>{question}</span>
|
|
|
- <span
|
|
|
- aria-hidden="true"
|
|
|
- className="text-2xl font-normal text-blue-400 transition-transform group-open:rotate-45"
|
|
|
- >
|
|
|
+ <span aria-hidden="true" className="text-2xl font-normal text-blue-400 transition-transform group-open:rotate-45">
|
|
|
+
|
|
|
</span>
|
|
|
</summary>
|
|
|
@@ -519,22 +422,14 @@ export default function HomePage() {
|
|
|
</div>
|
|
|
</motion.section>
|
|
|
|
|
|
- <motion.section
|
|
|
- className="py-24 px-6 text-center bg-slate-950"
|
|
|
- {...sectionReveal}
|
|
|
- >
|
|
|
+ <motion.section className="py-24 px-6 text-center bg-slate-950" {...sectionReveal}>
|
|
|
<div className="max-w-3xl mx-auto space-y-8">
|
|
|
- <h2 className="text-4xl font-extrabold font-headline text-white">
|
|
|
- 技术沉淀,只为提供更可靠的解决方案!
|
|
|
- </h2>
|
|
|
- <p className="text-xl text-slate-300 font-medium">
|
|
|
- 做更具价值和效率的服务商
|
|
|
- </p>
|
|
|
+ <h2 className="text-4xl font-extrabold font-headline text-white">技术沉淀,只为提供更可靠的解决方案!</h2>
|
|
|
+ <p className="text-xl text-slate-300 font-medium">做更具价值和效率的服务商</p>
|
|
|
<div className="flex flex-col md:flex-row items-center justify-center gap-4">
|
|
|
<button
|
|
|
onClick={() => navigate("/contact")}
|
|
|
- className="w-full md:w-auto bg-blue-600 text-white px-10 py-4 rounded-lg font-bold hover:bg-blue-500 transition-colors"
|
|
|
- >
|
|
|
+ className="w-full md:w-auto bg-blue-600 text-white px-10 py-4 rounded-lg font-bold hover:bg-blue-500 transition-colors">
|
|
|
联系我们
|
|
|
</button>
|
|
|
</div>
|