|
@@ -1,4 +1,4 @@
|
|
|
-import { useState } from "react";
|
|
|
|
|
|
|
+import { type KeyboardEvent, useState } from "react";
|
|
|
import {
|
|
import {
|
|
|
BellRing,
|
|
BellRing,
|
|
|
Check,
|
|
Check,
|
|
@@ -31,6 +31,84 @@ const itemReveal = {
|
|
|
transition: { duration: 0.55, ease: "easeOut" as const },
|
|
transition: { duration: 0.55, ease: "easeOut" as const },
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+const homepageFaqs = [
|
|
|
|
|
+ {
|
|
|
|
|
+ question: "开邻智价云适合哪些企业使用?",
|
|
|
|
|
+ answer:
|
|
|
|
|
+ "开邻智价云主要面向需要管理线上渠道价格的医药品牌方,为品牌的渠道管理、市场和数据相关团队提供价格监测、线索溯源、预警协同与价格分析支持。",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ question: "开邻智价云主要解决哪些渠道治理问题?",
|
|
|
|
|
+ answer:
|
|
|
|
|
+ "产品针对跨平台违规商家难锁定、人工监测覆盖有限、预警链路长,以及处置和证据留存不及时等场景,帮助品牌方提升线上渠道价格治理效率。",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ question: "开邻智价云支持哪些监测能力?",
|
|
|
|
|
+ answer:
|
|
|
|
|
+ "产品支持 B 端、C 端及 O 端渠道的 7×24 小时监测,并提供低价链接清洗和多维数据看板。数据监测最高支持 T+1 频率,具体覆盖范围与频率以项目方案为准。",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ question: "发现价格异常后如何进行溯源和处置?",
|
|
|
|
|
+ answer:
|
|
|
|
|
+ "数据颗粒度可细化至单品级,支持店铺主体识别、技术与人工结合的溯源及证据固化;发现线索后,可通过多端通知和链接处置协同推进后续工作。",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ question: "开邻智价云能提供哪些价格分析?",
|
|
|
|
|
+ answer:
|
|
|
|
|
+ "产品可通过多维看板呈现行业整体价格动态,以及品类、区域和竞品价格走势,并可提供行业产品价格报告等数据服务。",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ question: "开邻智价云支持哪些部署和服务方式?",
|
|
|
|
|
+ answer:
|
|
|
|
|
+ "产品提供 SaaS 系统,也支持本地化部署、海量数据对接和个性化开发。企业可通过获取方案页面提交需求,由专业顾问结合实际业务评估方案。",
|
|
|
|
|
+ },
|
|
|
|
|
+];
|
|
|
|
|
+
|
|
|
|
|
+const homepageStructuredData = {
|
|
|
|
|
+ "@context": "https://schema.org",
|
|
|
|
|
+ "@graph": [
|
|
|
|
|
+ {
|
|
|
|
|
+ "@type": "WebPage",
|
|
|
|
|
+ "@id": "https://price.kailin.com.cn/#webpage",
|
|
|
|
|
+ url: "https://price.kailin.com.cn/",
|
|
|
|
|
+ name: "开邻智价云 - 医药品牌线上渠道价格数据治理",
|
|
|
|
|
+ description:
|
|
|
|
|
+ "面向医药品牌方的线上渠道价格数据治理解决方案,提供跨平台价格监测、违规线索溯源、预警协同与价格分析。",
|
|
|
|
|
+ inLanguage: "zh-CN",
|
|
|
|
|
+ isPartOf: {
|
|
|
|
|
+ "@id": "https://price.kailin.com.cn/#website",
|
|
|
|
|
+ },
|
|
|
|
|
+ about: {
|
|
|
|
|
+ "@id": "https://price.kailin.com.cn/#softwareapplication",
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ "@type": "FAQPage",
|
|
|
|
|
+ "@id": "https://price.kailin.com.cn/#faq",
|
|
|
|
|
+ url: "https://price.kailin.com.cn/#faq",
|
|
|
|
|
+ inLanguage: "zh-CN",
|
|
|
|
|
+ mainEntity: homepageFaqs.map(({ question, answer }) => ({
|
|
|
|
|
+ "@type": "Question",
|
|
|
|
|
+ name: question,
|
|
|
|
|
+ acceptedAnswer: {
|
|
|
|
|
+ "@type": "Answer",
|
|
|
|
|
+ text: answer,
|
|
|
|
|
+ },
|
|
|
|
|
+ })),
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleSummaryKeyDown = (event: KeyboardEvent<HTMLElement>) => {
|
|
|
|
|
+ if (event.key !== "Enter" && event.key !== " ") return;
|
|
|
|
|
+
|
|
|
|
|
+ event.preventDefault();
|
|
|
|
|
+ const details = event.currentTarget.parentElement;
|
|
|
|
|
+ if (details instanceof HTMLDetailsElement) {
|
|
|
|
|
+ details.open = !details.open;
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
export default function HomePage() {
|
|
export default function HomePage() {
|
|
|
const navigate = useNavigate();
|
|
const navigate = useNavigate();
|
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
@@ -125,6 +203,9 @@ export default function HomePage() {
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<div className="pt-20">
|
|
<div className="pt-20">
|
|
|
|
|
+ <script type="application/ld+json">
|
|
|
|
|
+ {JSON.stringify(homepageStructuredData)}
|
|
|
|
|
+ </script>
|
|
|
<motion.section
|
|
<motion.section
|
|
|
className="relative overflow-hidden pt-24 pb-32 px-6 bg-slate-950"
|
|
className="relative overflow-hidden pt-24 pb-32 px-6 bg-slate-950"
|
|
|
initial={{ opacity: 0, y: 32, scale: 0.98 }}
|
|
initial={{ opacity: 0, y: 32, scale: 0.98 }}
|
|
@@ -168,10 +249,42 @@ export default function HomePage() {
|
|
|
</div>
|
|
</div>
|
|
|
</motion.section>
|
|
</motion.section>
|
|
|
|
|
|
|
|
- <motion.section 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"
|
|
|
|
|
+ >
|
|
|
|
|
+ 开邻智价云是什么?
|
|
|
|
|
+ </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}
|
|
|
|
|
+ >
|
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="max-w-7xl mx-auto">
|
|
|
<div className="mb-16 text-center">
|
|
<div className="mb-16 text-center">
|
|
|
- <h2 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>
|
|
</h2>
|
|
|
<div className="h-1.5 w-20 bg-blue-600 mx-auto rounded-full"></div>
|
|
<div className="h-1.5 w-20 bg-blue-600 mx-auto rounded-full"></div>
|
|
@@ -220,10 +333,18 @@ export default function HomePage() {
|
|
|
</div>
|
|
</div>
|
|
|
</motion.section>
|
|
</motion.section>
|
|
|
|
|
|
|
|
- <motion.section 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="max-w-7xl mx-auto">
|
|
|
<div className="flex flex-col md:flex-row items-end justify-between mb-16 gap-6">
|
|
<div className="flex flex-col md:flex-row items-end justify-between mb-16 gap-6">
|
|
|
- <h2 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 服务优势
|
|
4+1 服务优势
|
|
|
<br />
|
|
<br />
|
|
|
<span className="text-blue-600">全方位守护品牌渠道价值</span>
|
|
<span className="text-blue-600">全方位守护品牌渠道价值</span>
|
|
@@ -297,12 +418,17 @@ export default function HomePage() {
|
|
|
</motion.section>
|
|
</motion.section>
|
|
|
|
|
|
|
|
<motion.section
|
|
<motion.section
|
|
|
|
|
+ id="service-advantages"
|
|
|
|
|
+ aria-labelledby="service-advantages-title"
|
|
|
className="py-24 bg-slate-900 text-white px-6 border-y border-slate-800"
|
|
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="max-w-7xl mx-auto">
|
|
|
<div className="text-center mb-20">
|
|
<div className="text-center mb-20">
|
|
|
- <h2 className="text-4xl font-extrabold font-headline mb-4">
|
|
|
|
|
|
|
+ <h2
|
|
|
|
|
+ id="service-advantages-title"
|
|
|
|
|
+ className="text-4xl font-extrabold font-headline mb-4"
|
|
|
|
|
+ >
|
|
|
为什么选择开邻智价云?
|
|
为什么选择开邻智价云?
|
|
|
</h2>
|
|
</h2>
|
|
|
<p className="text-slate-300 text-lg">
|
|
<p className="text-slate-300 text-lg">
|
|
@@ -350,6 +476,49 @@ export default function HomePage() {
|
|
|
</div>
|
|
</div>
|
|
|
</motion.section>
|
|
</motion.section>
|
|
|
|
|
|
|
|
|
|
+ <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"
|
|
|
|
|
+ >
|
|
|
|
|
+ 关于开邻智价云
|
|
|
|
|
+ </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"
|
|
|
|
|
+ >
|
|
|
|
|
+ <summary
|
|
|
|
|
+ onKeyDown={handleSummaryKeyDown}
|
|
|
|
|
+ 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>
|
|
|
|
|
+ </summary>
|
|
|
|
|
+ <p className="pt-4 pr-10 text-slate-300 leading-7">{answer}</p>
|
|
|
|
|
+ </details>
|
|
|
|
|
+ ))}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </motion.section>
|
|
|
|
|
+
|
|
|
<motion.section
|
|
<motion.section
|
|
|
className="py-24 px-6 text-center bg-slate-950"
|
|
className="py-24 px-6 text-center bg-slate-950"
|
|
|
{...sectionReveal}
|
|
{...sectionReveal}
|