panhuixia/xunchiProduct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加不同页面有不同的产品展示的主题

Browse Source
This commit is contained in:
小潘
2026-06-11 11:36:53 +08:00
parent 77af4e0dc7
commit 40fb2ab22e
27 changed files with 424 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/pages/ProductPage.jsx
+135 -75
View File
@@ -1,15 +1,14 @@
import { useParams, Link } from 'react-router-dom'
import { ChevronDown, ArrowRight, Shield, Clock, Headphones, AlertCircle } from 'lucide-react'
import { ChevronDown, ArrowRight, Shield, Clock, Headphones, AlertCircle } from 'lucide-react'
import { getProduct } from '../data/products'
import ScrollReveal from '../components/ScrollReveal'
import StatNumber from '../components/StatNumber'
import Carousel from '../components/Carousel'
export default function ProductPage() {
const { slug } = useParams()
const product = getProduct(slug)
if (!product) {
return (
<div className="min-h-screen flex items-center justify-center bg-white">
@@ -22,47 +21,89 @@ export default function ProductPage() {
)
}
// 将 hex 主题色转为 RGB 分量，用于 rgba() 可变透明度
const hex = product.themeColor.replace('#', '')
const r = parseInt(hex.slice(0, 2), 16)
const g = parseInt(hex.slice(2, 4), 16)
const b = parseInt(hex.slice(4, 6), 16)
// const Icon = product.icon
// const otherProducts = products.filter(p => p.slug !== slug)
return (
<main className="bg-white">
<main
className="bg-white"
style={{
'--theme': product.themeColor,
'--theme-r': r,
'--theme-g': g,
'--theme-b': b,
}}
>
{/* ── Hero ── */}
<div className="relative -mt-[70px]">
<section className="relative py-32 md:py-40 text-white overflow-hidden">
{/* Background image */}
{product.heroImage && (
<div className="absolute inset-0">
<img src={product.heroImage} alt="" className="w-full h-full object-cover" />
<section className="relative overflow-hidden" style={{ backgroundColor: product.themeColor }}>
{/* Desktop: left image + right card */}
<div className="hidden md:flex items-center justify-between mx-auto min-h-[760px]">
{/* Image - left */}
<div className="w-1/2 flex items-center justify-center">
{product.heroImage && (
<img src={product.heroImage} alt="" className={`w-full h-auto object-contain ${product.heroSize === 'small' ? 'max-h-[350px]' : 'max-h-[500px]'}`} />
)}
</div>
)}
{/* Black overlay */}
<div className="absolute inset-0 bg-black/50" />
<div className="relative max-w-4xl mx-auto px-6 text-center pt-32">
<h1 className="text-4xl md:text-7xl font-extrabold mb-5 tracking-tight leading-[1.1] text-white hero-product-title">
{product.name}
</h1>
<p className="text-2xl md:text-3xl mb-6 max-w-xl mx-auto leading-relaxed hero-product-slogan">
{product.slogan}
</p>
{/* Stats */}
{product.stats && (
<div className="flex justify-center mt-14 rounded-2xl border border-white/10 overflow-hidden max-w-xl mx-auto"
style={{ backgroundColor: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(8px)' }}>
{product.stats.map((s, i) => (
<div key={i} className={`flex flex-col items-center justify-center px-6 md:px-10 py-5 ${i < product.stats.length - 1 ? 'border-r border-white/10' : ''}`}>
<div className="text-2xl md:text-3xl font-extrabold tracking-tight text-white">
<StatNumber target={s.num} suffix={s.suffix} />
{/* Content - right */}
<div className="w-1/2">
<h1 className="text-5xl md:text-7xl font-extrabold mb-5 tracking-tight leading-[1.1] text-white hero-product-title">
{product.name}
</h1>
<p className="text-2xl md:text-3xl mb-8 leading-relaxed text-white/80 hero-product-slogan">
{product.slogan}
</p>
{product.stats && (
<div className="flex gap-4 max-w-[620px]">
{product.stats.map((s, i) => (
<div key={i} className="flex-1 rounded-2xl p-4 text-center border border-white/20 bg-white/10">
<div className="text-2xl md:text-3xl font-extrabold tracking-tight text-white">
<StatNumber target={s.num} suffix={s.suffix} />
</div>
<div className="text-xs text-white/60 mt-1.5 font-medium">{s.label}</div>
</div>
<div className="text-xs text-white/50 mt-2 font-medium">{s.label}</div>
</div>
))}
</div>
))}
</div>
)}
</div>
</div>
{/* Mobile: stacked layout */}
<div className="md:hidden flex flex-col items-center px-6 pt-32 pb-16">
{product.heroImage && (
<img src={product.heroImage} alt="" className={`w-4/5 max-w-xs h-auto object-contain mb-10 ${product.heroSize === 'small' ? 'max-h-[150px]' : 'max-h-[200px]'}`} />
)}
<div className="text-center w-full">
<span className="inline-block px-4 py-1.5 rounded-full text-xs font-bold tracking-wider uppercase mb-5"
style={{ backgroundColor: product.themeColor + '18', color: product.themeColor }}>
智慧教育解决方案
</span>
<h1 className="text-3xl font-extrabold mb-4 tracking-tight leading-[1.1] text-white hero-product-title">
{product.name}
</h1>
<p className="text-xl mb-6 leading-relaxed text-white/80 hero-product-slogan">
{product.slogan}
</p>
{product.stats && (
<div className="flex gap-3 mt-4">
{product.stats.map((s, i) => (
<div key={i} className="flex-1 rounded-2xl p-3 text-center border border-white/20 bg-white/10">
<div className="text-xl font-extrabold tracking-tight text-white">
<StatNumber target={s.num} suffix={s.suffix} />
</div>
<div className="text-[11px] text-white/60 mt-1 font-medium">{s.label}</div>
</div>
))}
</div>
)}
</div>
</div>
</section>
</div>
@@ -73,9 +114,9 @@ export default function ProductPage() {
<ScrollReveal>
<div className="relative bg-[#f8fafc] rounded-3xl p-10 md:p-14 overflow-hidden">
{/* Floating decorative shapes */}
<div className="absolute -top-6 -right-6 w-24 h-24 rounded-full bg-[#043b8f]" />
<div className="absolute -bottom-8 -left-8 w-20 h-20 rounded-2xl rotate-12 bg-[#043b8f]" />
<div className="absolute top-1/2 -right-4 w-8 h-8 rounded-full border-2 border-[#043b8f]" />
<div className="absolute -top-6 -right-6 w-24 h-24 rounded-full bg-[var(--theme)]" />
<div className="absolute -bottom-8 -left-8 w-20 h-20 rounded-2xl rotate-12 bg-[var(--theme)]" />
<div className="absolute top-1/2 -right-4 w-8 h-8 rounded-full border-2 border-[var(--theme)]" />
<p className="text-[#334155] text-lg md:text-xl leading-loose relative z-10">
{product.brief}
@@ -87,12 +128,12 @@ export default function ProductPage() {
{product.tags.map((tag, i) => (
<span key={i}
className="relative px-6 py-2 text-sm font-bold text-white transition-all duration-200 hover:scale-105 hover:-translate-y-0.5"
style={{ backgroundColor: '#043b8f' }}>
style={{ backgroundColor: product.themeColor }}>
<span className="relative z-10">{tag}</span>
<svg className="absolute -bottom-2 left-0 w-full h-2 text-white/20" viewBox="0 0 100 8" preserveAspectRatio="none">
<path d="M0 0 L35 8 L65 8 L100 0" fill="currentColor" />
</svg>
<span className="absolute top-1/2 -translate-y-1/2 -left-2 w-1 h-4 rounded-full" style={{ backgroundColor: '#043b8f' }} />
<span className="absolute top-1/2 -translate-y-1/2 -left-2 w-1 h-4 rounded-full" style={{ backgroundColor: product.themeColor }} />
</span>
))}
</div>
@@ -108,8 +149,8 @@ export default function ProductPage() {
<ScrollReveal className="mb-14 text-center">
<div className="flex flex-col items-center">
<div className="inline-flex items-center gap-3 mb-5">
<span className="w-5 h-[2px] rounded-full bg-[#043b8f]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Pain Points</span>
<span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Pain Points</span>
</div>
<h2 className="text-2xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
{product.painPointsTitle || `${product.name}解决的核心问题`}
@@ -121,7 +162,7 @@ export default function ProductPage() {
{product.painPoints.map((item, i) => (
<ScrollReveal key={i} delay={i * 0.08}>
<div className="relative bg-white rounded-2xl p-10 border border-gray-100 hover:shadow-lg hover:shadow-gray-200/50 transition-all duration-300 group h-full">
<div className="absolute top-0 left-0 right-0 h-1 rounded-t-2 bg-[#043b8f] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<div className="absolute top-0 left-0 right-0 h-1 rounded-t-2 bg-[var(--theme)] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
{/* Pain point */}
<div className="flex items-start gap-3 mb-5 pb-5 border-b border-dashed border-gray-200">
<div className="shrink-0 w-9 h-9 rounded-full bg-red-50 flex items-center justify-center">
@@ -130,8 +171,8 @@ export default function ProductPage() {
<h3 className="text-lg font-bold text-[#0f172a] leading-relaxed">{item.title}</h3>
</div>
{/* Solution */}
<div className="ml-11 pl-5 border-l-2 border-[#043b8f] bg-[#043b8f]/[0.03] rounded-r-lg py-4 pr-4">
<span className="inline-block text-sm font-semibold text-white bg-[#043b8f] rounded px-3 py-1.5 mb-3">解决方案</span>
<div className="ml-11 pl-5 border-l-2 border-[var(--theme)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.03)] rounded-r-lg py-4 pr-4">
<span className="inline-block text-sm font-semibold text-white bg-[var(--theme)] rounded px-3 py-1.5 mb-3">解决方案</span>
<p className="text-[#334155] text-xl leading-[1.9]">{item.desc}</p>
</div>
</div>
@@ -148,8 +189,8 @@ export default function ProductPage() {
<ScrollReveal className="mb-16 text-center">
<div className="flex flex-col items-center">
<div className="inline-flex items-center gap-3 mb-5">
<span className="w-5 h-[2px] rounded-full bg-[#043b8f]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Core Features</span>
<span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Core Features</span>
</div>
<h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
核心功能
@@ -159,7 +200,7 @@ export default function ProductPage() {
<span className="text-lg text-[#0f172a] font-bold">适用对象：</span>
<div className="flex flex-wrap justify-center gap-3">
{product.target.split('、').map((t, i) => (
<span key={i} className="px-4 py-1.5 rounded-lg text-sm font-bold text-[#043b8f] border border-[#043b8f]/30">{t.trim()}</span>
<span key={i} className="px-4 py-1.5 rounded-lg text-sm font-bold text-[var(--theme)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.3)]">{t.trim()}</span>
))}
</div>
</div>
@@ -170,16 +211,16 @@ export default function ProductPage() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{product.features.map((f, i) => (
<ScrollReveal key={i} delay={i * 0.05}>
<div className="relative bg-white rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#043b8f]/5 transition-all duration-500 group overflow-hidden">
<div className="relative bg-white rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.05)] transition-all duration-500 group overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
style={{ background: `linear-gradient(90deg, transparent, ${product.themeColor}, transparent)` }} />
<div className="absolute top-0 right-0 w-32 h-32 bg-[#043b8f]/[0.02] rounded-bl-full" />
<div className="absolute bottom-0 left-0 w-20 h-20 border border-[#043b8f]/[0.06] rounded-tr-3xl" />
<div className="absolute top-0 right-0 w-32 h-32 bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-bl-full" />
<div className="absolute bottom-0 left-0 w-20 h-20 border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] rounded-tr-3xl" />
<div className="relative z-10">
<div className="flex items-center gap-3 mb-4">
<span className="flex items-center justify-center w-8 h-8 rounded-md bg-[#043b8f]/[0.06] text-xs font-black text-[#043b8f]">0{i + 1}</span>
<div className="h-px flex-1 bg-gradient-to-r from-[#043b8f]/10 to-transparent" />
<span className="flex items-center justify-center w-8 h-8 rounded-md bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] text-xs font-black text-[var(--theme)]">0{i + 1}</span>
<div className="h-px flex-1 bg-gradient-to-r from-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] to-transparent" />
</div>
<h3 className="text-xl font-bold text-[#0f172a] mb-3">{f.title}</h3>
<p className="text-[#64748b] text-lg leading-relaxed">{f.desc}</p>
@@ -191,14 +232,35 @@ export default function ProductPage() {
</div>
</section>
{/* ── Product Showcase ── */}
{product.screenshots && product.screenshots.length > 0 && (
<section className="py-24 px-6 bg-[#fafbfc]">
<div className="max-w-5xl mx-auto">
<ScrollReveal className="mb-16 text-center">
<div className="flex flex-col items-center">
<div className="inline-flex items-center gap-3 mb-5">
<span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Product Showcase</span>
</div>
<h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
产品展示
</h2>
</div>
</ScrollReveal>
<Carousel images={product.screenshots} themeColor={product.themeColor} />
</div>
</section>
)}
{/* ── Advantages ── */}
<section className="py-24 px-6 bg-white">
<div className="max-w-5xl mx-auto">
<ScrollReveal className="mb-16 text-center">
<div className="flex flex-col items-center">
<div className="inline-flex items-center gap-3 mb-5">
<span className="w-5 h-[2px] rounded-full bg-[#043b8f]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Why Choose Us</span>
<span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Why Choose Us</span>
</div>
<h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
为什么选择我们
@@ -213,18 +275,18 @@ export default function ProductPage() {
{ icon: Headphones, title: '专属服务', desc: '7×24 小时响应，专属客户经理全程陪伴' },
].map((item, i) => (
<ScrollReveal key={i} delay={i * 0.08}>
<div className="relative bg-[#fafbfc] rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#043b8f]/5 transition-all duration-500 group overflow-hidden">
<div className="relative bg-[#fafbfc] rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.05)] transition-all duration-500 group overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
style={{ background: `linear-gradient(90deg, transparent, ${product.themeColor}, transparent)` }} />
<div className="absolute top-0 right-0 w-28 h-28 bg-[#043b8f]/[0.02] rounded-bl-full" />
<div className="absolute bottom-0 left-0 w-16 h-16 border border-[#043b8f]/[0.06] rounded-tr-3xl" />
<div className="absolute top-0 right-0 w-28 h-28 bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-bl-full" />
<div className="absolute bottom-0 left-0 w-16 h-16 border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] rounded-tr-3xl" />
<div className="relative z-10">
<div className="flex items-center gap-3 mb-5">
<div className="w-11 h-11 rounded-xl flex items-center justify-center bg-[#043b8f]/[0.06] border border-[#043b8f]/10">
<item.icon className="w-5 h-5" style={{ color: '#043b8f' }} />
<div className="w-11 h-11 rounded-xl flex items-center justify-center bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)]">
<item.icon className="w-5 h-5" style={{ color: product.themeColor }} />
</div>
<div className="h-px flex-1 bg-gradient-to-r from-[#043b8f]/10 to-transparent" />
<div className="h-px flex-1 bg-gradient-to-r from-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] to-transparent" />
</div>
<h3 className="text-xl font-bold text-[#0f172a] mb-3">{item.title}</h3>
<p className="text-[#64748b] text-lg leading-relaxed">{item.desc}</p>
@@ -243,8 +305,8 @@ export default function ProductPage() {
<ScrollReveal className="mb-14 text-center">
<div className="flex flex-col items-center">
<div className="inline-flex items-center gap-3 mb-5">
<span className="w-5 h-[2px] rounded-full bg-[#043b8f]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">FAQ</span>
<span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">FAQ</span>
</div>
<h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
常见问题
@@ -255,20 +317,20 @@ export default function ProductPage() {
<div className="space-y-4 max-w-3xl mx-auto">
{product.faq.map((item, i) => (
<ScrollReveal key={i} delay={i * 0.04}>
<details className="group relative bg-white rounded-2xl border border-gray-100 hover:shadow-lg hover:shadow-[#043b8f]/5 transition-all duration-300 overflow-hidden">
<div className="absolute top-0 left-0 w-1 h-full bg-[#043b8f]/10 group-open:bg-[#043b8f] transition-colors duration-300" />
<div className="absolute top-0 right-0 w-24 h-24 bg-[#043b8f]/[0.02] rounded-bl-full" />
<details className="group relative bg-white rounded-2xl border border-gray-100 hover:shadow-lg hover:shadow-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.05)] transition-all duration-300 overflow-hidden">
<div className="absolute top-0 left-0 w-1 h-full bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] group-open:bg-[var(--theme)] transition-colors duration-300" />
<div className="absolute top-0 right-0 w-24 h-24 bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-bl-full" />
<summary className="relative flex items-center justify-between px-8 py-6 cursor-pointer list-none select-none">
<div className="flex items-center gap-4 pr-4">
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[#043b8f]/[0.06] text-xs font-black text-[#043b8f] shrink-0">Q{i + 1}</span>
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] text-xs font-black text-[var(--theme)] shrink-0">Q{i + 1}</span>
<h3 className="text-lg font-bold text-[#0f172a]">{item.q}</h3>
</div>
<div className="w-8 h-8 rounded-full bg-[#043b8f]/[0.06] border border-[#043b8f]/10 flex items-center justify-center shrink-0 group-open:rotate-180 transition-transform duration-300">
<ChevronDown className="w-4 h-4 text-[#043b8f]" />
<div className="w-8 h-8 rounded-full bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] flex items-center justify-center shrink-0 group-open:rotate-180 transition-transform duration-300">
<ChevronDown className="w-4 h-4 text-[var(--theme)]" />
</div>
</summary>
<div className="relative px-8 pb-7">
<div className="ml-12 pl-5 border-l-2 border-[#043b8f]/10 bg-[#043b8f]/[0.02] rounded-r-lg py-4 pr-4">
<div className="ml-12 pl-5 border-l-2 border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-r-lg py-4 pr-4">
<p className="text-[#64748b] text-lg leading-relaxed">{item.a}</p>
</div>
</div>
@@ -282,10 +344,10 @@ export default function ProductPage() {
{/* ── CTA ── */}
<section className="py-40 px-4 relative overflow-hidden"
style={{ background: 'linear-gradient(135deg, #0a1628, #0f1f3a)' }}>
style={{ background: `linear-gradient(135deg, ${product.themeFrom || '#0a1628'}, ${product.themeTo || '#0f1f3a'})` }}>
<div className="absolute inset-0 opacity-[0.04]"
style={{
backgroundImage: 'radial-gradient(#004ec4 1px, transparent 1px)',
backgroundImage: `radial-gradient(${product.themeColor} 1px, transparent 1px)`,
backgroundSize: '24px 24px',
}}
/>
@@ -313,8 +375,6 @@ export default function ProductPage() {
</ScrollReveal>
</div>
</section>
</main>
)
}
}