novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(website): 三轮视觉改造与页面过渡动画

Browse Source 
改造概要（30项）：
- 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构
- 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复
- 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema
- P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态
- 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
This commit is contained in:
张翔
2026-05-10 08:20:27 +08:00
parent 747405dc96
commit 37296b5717
133 changed files with 2583 additions and 13487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/solutions/[id]/client.tsx
+34 -31
View File
@@ -1,6 +1,7 @@
'use client';
import { motion } from 'framer-motion';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button';
import { PageNav } from '@/components/layout/page-nav';
@@ -14,25 +15,27 @@ interface SolutionDetailClientProps {
}
export function SolutionDetailClient({ solution, relatedProducts }: SolutionDetailClientProps) {
const shouldReduceMotion = useReducedMotion();
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-[var(--color-bg-primary)]">
<div className="pt-32 pb-16">
<div className="container-wide">
<PageNav items={[{ label: '解决方案', href: '/solutions' }, { label: solution.title }]} />
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
{...fadeUp}
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="max-w-4xl mt-8"
>
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">
{solution.industry}
</p>
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4 tracking-tight">
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-4 tracking-tight">
{solution.title}
</h1>
<p className="text-xl text-[#595959] mb-2">{solution.subtitle}</p>
<p className="text-lg text-[#595959] leading-relaxed">
<p className="text-xl text-[var(--color-text-muted)] mb-2">{solution.subtitle}</p>
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
{solution.description}
</p>
</motion.div>
@@ -42,44 +45,44 @@ export function SolutionDetailClient({ solution, relatedProducts }: SolutionDeta
<div className="container-wide pb-20">
<div className="max-w-4xl space-y-16">
<motion.section
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
{...fadeUp}
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
>
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
<AlertTriangle className="w-6 h-6 text-[#C41E3A]" />
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 flex items-center gap-3">
<AlertTriangle className="w-6 h-6 text-[var(--color-brand-primary)]" />
行业痛点
</h2>
<div className="space-y-3">
{solution.challenges.map((challenge, index) => (
<div
key={index}
className="flex items-start gap-3 p-4 rounded-lg border-l-4 border-[#C41E3A] bg-[#FAFAFA]"
className="flex items-start gap-3 p-4 rounded-lg border-l-4 border-[var(--color-brand-primary)] bg-[var(--color-bg-section)]"
>
<span className="text-[#1C1C1C] text-sm">{challenge}</span>
<span className="text-[var(--color-text-primary)] text-sm">{challenge}</span>
</div>
))}
</div>
</motion.section>
<motion.section
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
{...fadeUp}
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }}
>
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
<CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 flex items-center gap-3">
<CheckCircle2 className="w-6 h-6 text-[var(--color-brand-primary)]" />
解决方案
</h2>
<div className="space-y-4">
{solution.solutions.map((sol, index) => (
<div key={index} className="flex items-start gap-4">
<div className="w-8 h-8 bg-[#C41E3A] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
<div className="w-8 h-8 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
{index + 1}
</div>
<p className="text-[#1C1C1C] pt-1 leading-relaxed">{sol}</p>
<p className="text-[var(--color-text-primary)] pt-1 leading-relaxed">{sol}</p>
</div>
))}
</div>
@@ -87,13 +90,13 @@ export function SolutionDetailClient({ solution, relatedProducts }: SolutionDeta
{relatedProducts.length > 0 && (
<motion.section
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
{...fadeUp}
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
<Package className="w-6 h-6 text-[#C41E3A]" />
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 flex items-center gap-3">
<Package className="w-6 h-6 text-[var(--color-brand-primary)]" />
相关产品
</h2>
<div className="grid md:grid-cols-2 gap-4">
@@ -101,26 +104,26 @@ export function SolutionDetailClient({ solution, relatedProducts }: SolutionDeta
<StaticLink
key={product.id}
href={`/products/${product.id}`}
className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300"
className="group block p-6 rounded-xl border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] hover:border-[var(--color-brand-primary)]/40 hover:shadow-lg transition-all duration-300"
>
<div className="flex items-center gap-2 mb-2">
<h3 className="text-lg font-semibold text-[#1C1C1C] group-hover:text-[#C41E3A] transition-colors">
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] group-hover:text-[var(--color-brand-primary)] transition-colors">
{product.title}
</h3>
{product.status && (
<span
className="text-xs font-medium px-3 py-1 rounded-full border shrink-0"
style={{
backgroundColor: product.status === '研发中' ? 'rgba(196, 30, 58, 0.08)' : product.status === '内测中' ? 'rgba(217, 119, 6, 0.08)' : 'rgba(22, 163, 74, 0.08)',
color: product.status === '研发中' ? '#C41E3A' : product.status === '内测中' ? '#D97706' : '#16A34A',
borderColor: product.status === '研发中' ? 'rgba(196, 30, 58, 0.15)' : product.status === '内测中' ? 'rgba(217, 119, 6, 0.15)' : 'rgba(22, 163, 74, 0.15)',
backgroundColor: product.status === '研发中' ? 'rgba(var(--color-brand-primary-rgb), 0.08)' : product.status === '内测中' ? 'rgba(var(--color-warning-rgb), 0.08)' : 'rgba(var(--color-success-rgb), 0.08)',
color: product.status === '研发中' ? 'var(--color-brand-primary)' : product.status === '内测中' ? 'var(--color-warning)' : 'var(--color-success)',
borderColor: product.status === '研发中' ? 'rgba(var(--color-brand-primary-rgb), 0.15)' : product.status === '内测中' ? 'rgba(var(--color-warning-rgb), 0.15)' : 'rgba(var(--color-success-rgb), 0.15)',
}}
>
{product.status}
</span>
)}
</div>
<p className="text-sm text-[#595959] leading-relaxed">
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed">
{product.description}
</p>
</StaticLink>
@@ -129,11 +132,11 @@ export function SolutionDetailClient({ solution, relatedProducts }: SolutionDeta
</motion.section>
)}
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
<div className="flex justify-center gap-4 pt-8 border-t border-[var(--color-border-primary)]">
<Button variant="outline" size="lg" asChild>
<StaticLink href="/contact">联系我们</StaticLink>
</Button>
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white" asChild>
<StaticLink href="/contact">
立即咨询
<ArrowRight className="ml-2 w-4 h-4" />