feat: 完成网站功能开发与优化
- 完善产品页面布局与交互 - 优化服务详情页用户体验 - 增强新闻模块内容展示 - 改进团队页面设计 - 优化全局样式和响应式布局 - 添加分页组件支持 - 提升性能与SEO优化 - 修复已知问题与改进代码质量
This commit is contained in:
张翔
@@ -23,13 +23,13 @@ function BenefitCard({ benefit }: { benefit: string }) {
|
||||
return (
|
||||
<StaggerItem>
|
||||
<InkCard
|
||||
className="p-6 md:p-8 bg-white rounded-2xl border border-[#E5E5E5] hover:border-[#C41E3A]/30 transition-colors"
|
||||
className="p-6 md:p-8 bg-white rounded-2xl border border-[#E5E5E5] hover:border-[var(--color-brand-primary)]/30 transition-colors"
|
||||
hoverScale={1.02}
|
||||
hoverShadow="0 20px 40px rgba(196, 30, 58, 0.08)"
|
||||
>
|
||||
{numberInfo && (
|
||||
<div className="mb-4">
|
||||
<span className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-[#C41E3A] to-[#E85D75] bg-clip-text text-transparent">
|
||||
<span className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-[var(--color-brand-primary)] to-[#E85D75] bg-clip-text text-transparent">
|
||||
<CountUp
|
||||
end={numberInfo.number}
|
||||
suffix={numberInfo.suffix}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { RippleButton } from '@/components/ui/ripple-button';
|
||||
|
||||
export function ProductCTASection() {
|
||||
return (
|
||||
<section className="relative py-24 md:py-32 bg-gradient-to-r from-[#C41E3A] to-[#E85D75] overflow-hidden">
|
||||
<section className="relative py-24 md:py-32 bg-gradient-to-r from-[var(--color-brand-primary)] to-[#E85D75] overflow-hidden">
|
||||
{/* 右上角装饰圆形 */}
|
||||
<FloatingElement amplitude={8} duration={5} delay={0.5} className="absolute -top-20 -right-20 pointer-events-none">
|
||||
<div className="w-[280px] h-[280px] bg-white/10 rounded-full" />
|
||||
@@ -36,7 +36,7 @@ export function ProductCTASection() {
|
||||
href="/contact"
|
||||
variant="secondary"
|
||||
rippleColor="rgba(196, 30, 58, 0.3)"
|
||||
className="bg-white text-[#C41E3A] px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
|
||||
className="bg-white text-[var(--color-brand-primary)] px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
|
||||
>
|
||||
联系我们
|
||||
</RippleButton>
|
||||
|
||||
@@ -33,7 +33,7 @@ function FeatureItem({
|
||||
<div className="order-2 md:order-1">
|
||||
{/* 编号 - InkReveal 模糊揭示 */}
|
||||
<InkReveal delay={0}>
|
||||
<span className="block text-7xl md:text-8xl font-mono text-[#C41E3A]/10 mb-4">
|
||||
<span className="block text-7xl md:text-8xl font-mono text-[var(--color-brand-primary)]/10 mb-4">
|
||||
{number}
|
||||
</span>
|
||||
</InkReveal>
|
||||
@@ -63,8 +63,8 @@ function FeatureItem({
|
||||
hoverShadow="0 25px 50px rgba(196, 30, 58, 0.15)"
|
||||
>
|
||||
<PulseElement scale={1.08} duration={2.5}>
|
||||
<div className="w-24 h-24 rounded-full bg-[#C41E3A]/10 flex items-center justify-center">
|
||||
<div className="w-12 h-12 rounded-full bg-[#C41E3A]/20" />
|
||||
<div className="w-24 h-24 rounded-full bg-[var(--color-brand-primary)]/10 flex items-center justify-center">
|
||||
<div className="w-12 h-12 rounded-full bg-[var(--color-brand-primary)]/20" />
|
||||
</div>
|
||||
</PulseElement>
|
||||
</InkCard>
|
||||
@@ -113,15 +113,16 @@ export function ProductFeaturesSection({ product }: ProductFeaturesSectionProps)
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<RippleButton
|
||||
href="/contact"
|
||||
rippleColor="rgba(196, 30, 58, 0.3)"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white px-6 py-3 rounded-lg font-semibold inline-flex items-center justify-center"
|
||||
variant="outline"
|
||||
rippleColor="rgba(196, 30, 58, 0.2)"
|
||||
className="border-2 border-[var(--color-brand-primary)] text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary)] hover:text-white px-6 py-3 rounded-lg font-semibold inline-flex items-center justify-center"
|
||||
>
|
||||
预约演示
|
||||
</RippleButton>
|
||||
<RippleButton
|
||||
href="/contact"
|
||||
rippleColor="rgba(196, 30, 58, 0.2)"
|
||||
className="border border-[#E5E5E5] text-[#5C5C5C] hover:text-[#C41E3A] hover:border-[#C41E3A]/30 px-6 py-3 rounded-lg font-semibold inline-flex items-center justify-center"
|
||||
className="border border-[#E5E5E5] text-[#5C5C5C] hover:text-[var(--color-brand-primary)] hover:border-[var(--color-brand-primary)]/30 px-6 py-3 rounded-lg font-semibold inline-flex items-center justify-center"
|
||||
>
|
||||
获取方案
|
||||
</RippleButton>
|
||||
|
||||
@@ -51,7 +51,7 @@ export function ProductHeroSection({ product }: ProductHeroSectionProps) {
|
||||
<InkBackground />
|
||||
<DataParticleFlow
|
||||
particleCount={80}
|
||||
color="#C41E3A"
|
||||
color="var(--color-brand-primary)"
|
||||
intensity="subtle"
|
||||
shape="square"
|
||||
effect="pulse"
|
||||
@@ -63,7 +63,7 @@ export function ProductHeroSection({ product }: ProductHeroSectionProps) {
|
||||
{/* 分类标签 - 印章按压效果 */}
|
||||
<SealStamp
|
||||
delay={0.1}
|
||||
className="inline-block px-4 py-2 bg-[#C41E3A]/20 rounded-full text-[#C41E3A] text-sm mb-6"
|
||||
className="inline-block px-4 py-2 bg-[var(--color-brand-primary)]/20 rounded-full text-[var(--color-brand-primary)] text-sm mb-6"
|
||||
>
|
||||
即将上市
|
||||
</SealStamp>
|
||||
|
||||
@@ -22,7 +22,7 @@ export function ProductOverviewSection({ product }: ProductOverviewSectionProps)
|
||||
|
||||
{/* 朱砂红装饰线 - InkReveal 入场 */}
|
||||
<InkReveal delay={0.2}>
|
||||
<div className="w-16 h-1 bg-[#C41E3A] rounded-full mb-8" />
|
||||
<div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-8" />
|
||||
</InkReveal>
|
||||
|
||||
{/* 概述文字 - InkReveal 包裹整段，替代 TextReveal */}
|
||||
|
||||
@@ -35,14 +35,14 @@ function PricingCard({
|
||||
className={`
|
||||
relative p-6 md:p-8 rounded-2xl
|
||||
${isRecommended
|
||||
? 'bg-white border-2 border-[#C41E3A] text-[#1C1C1C]'
|
||||
? 'bg-white border-2 border-[var(--color-brand-primary)] text-[#1C1C1C]'
|
||||
: 'bg-white border border-[#E5E5E5]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isRecommended && (
|
||||
<PulseElement scale={1.08} duration={2} className="absolute -top-3 left-1/2 -translate-x-1/2 z-10">
|
||||
<div className="bg-[#C41E3A] text-white px-4 py-1 rounded-full text-sm font-semibold whitespace-nowrap">
|
||||
<div className="bg-[var(--color-brand-primary)] text-white px-4 py-1 rounded-full text-sm font-semibold whitespace-nowrap">
|
||||
推荐
|
||||
</div>
|
||||
</PulseElement>
|
||||
@@ -57,7 +57,7 @@ function PricingCard({
|
||||
<ul className="space-y-3 mb-8">
|
||||
{features.map((feature, index) => (
|
||||
<li key={index} className="flex items-center gap-2">
|
||||
<Check className="w-5 h-5 text-[#C41E3A]" />
|
||||
<Check className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
<span className="text-[#5C5C5C]">
|
||||
{feature}
|
||||
</span>
|
||||
@@ -71,8 +71,8 @@ function PricingCard({
|
||||
className={`
|
||||
block w-full py-3 rounded-lg font-semibold text-center
|
||||
${isRecommended
|
||||
? 'bg-[#C41E3A] text-white'
|
||||
: 'border border-[#E5E5E5] text-[#5C5C5C] hover:text-[#C41E3A] hover:border-[#C41E3A]/30 bg-white'
|
||||
? 'bg-[var(--color-brand-primary)] text-white'
|
||||
: 'border border-[#E5E5E5] text-[#5C5C5C] hover:text-[var(--color-brand-primary)] hover:border-[var(--color-brand-primary)]/30 bg-white'
|
||||
}
|
||||
`}
|
||||
>
|
||||
|
||||
@@ -26,12 +26,12 @@ function ProcessStep({
|
||||
<StaggerItem className="flex items-start gap-6">
|
||||
<div className="flex-shrink-0">
|
||||
<SealStamp delay={index * 0.15}>
|
||||
<div className="w-12 h-12 rounded-full bg-[#C41E3A] flex items-center justify-center text-white font-bold text-lg">
|
||||
<div className="w-12 h-12 rounded-full bg-[var(--color-brand-primary)] flex items-center justify-center text-white font-bold text-lg">
|
||||
{index + 1}
|
||||
</div>
|
||||
</SealStamp>
|
||||
{index < total - 1 && (
|
||||
<div className="w-0.5 h-16 bg-gradient-to-b from-[#C41E3A]/40 to-[#C41E3A]/10 ml-6 mt-2" />
|
||||
<div className="w-0.5 h-16 bg-gradient-to-b from-[var(--color-brand-primary)]/40 to-[var(--color-brand-primary)]/10 ml-6 mt-2" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -25,11 +25,11 @@ export function ProductSpecsSection({ product }: ProductSpecsSectionProps) {
|
||||
{product.specs.map((spec, index) => (
|
||||
<StaggerItem key={index}>
|
||||
<InkCard
|
||||
className="flex items-center gap-4 p-4 bg-white rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A]/30 transition-colors"
|
||||
className="flex items-center gap-4 p-4 bg-white rounded-lg border border-[#E5E5E5] hover:border-[var(--color-brand-primary)]/30 transition-colors"
|
||||
hoverScale={1.02}
|
||||
hoverShadow="0 12px 24px rgba(196, 30, 58, 0.06)"
|
||||
>
|
||||
<div className="w-1 h-8 bg-[#C41E3A] rounded-full flex-shrink-0" />
|
||||
<div className="w-1 h-8 bg-[var(--color-brand-primary)] rounded-full flex-shrink-0" />
|
||||
<span className="text-[#1C1C1C]">{spec}</span>
|
||||
</InkCard>
|
||||
</StaggerItem>
|
||||
|
||||
Reference in New Issue
Block a user