feat(cms): 添加 CMS 内容管理系统与 Admin 管理后台
- 新增 Prisma + SQLite 数据库模型 (Category, Content, Media, User 等) - 新增 Admin 管理后台 (认证、内容管理、媒体管理) - 新增 CMS API 路由 (CRUD, 草稿/发布, 重新验证) - 新增 CMS 内容版本的历史归档页面 - 新增 components/cms 内容渲染组件 - 新增 components/admin 管理后台 UI 组件 - 更新 Contact API 路由
This commit is contained in:
张翔
@@ -0,0 +1,391 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { CheckCircle2, ChevronDown } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useState } from 'react';
|
||||
|
||||
export interface MethodologyLayer {
|
||||
title: string;
|
||||
description: string;
|
||||
items: string[];
|
||||
}
|
||||
|
||||
export interface MethodologyFrameworkProps {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
layers: MethodologyLayer[];
|
||||
accentColor?: string;
|
||||
}
|
||||
|
||||
export function MethodologyFramework({
|
||||
title,
|
||||
subtitle,
|
||||
layers,
|
||||
accentColor = '#C41E3A',
|
||||
}: MethodologyFrameworkProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Methodology</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="text-text-secondary leading-relaxed text-lg">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{layers.map((layer, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="relative group"
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="flex gap-6 lg:gap-10">
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center text-white font-bold text-lg shrink-0"
|
||||
style={{ backgroundColor: accentColor }}
|
||||
>
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</div>
|
||||
{index < layers.length - 1 && (
|
||||
<div className="w-px flex-1 bg-gradient-to-b from-border-primary to-transparent mt-3" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pb-12 lg:pb-16">
|
||||
<h3 className="text-xl lg:text-2xl font-bold text-text-primary mb-3">
|
||||
{layer.title}
|
||||
</h3>
|
||||
<p className="text-text-secondary leading-relaxed mb-5">
|
||||
{layer.description}
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
{layer.items.map((item, i) => (
|
||||
<div key={i} className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 shrink-0 mt-0.5" style={{ color: accentColor }} />
|
||||
<span className="text-text-secondary text-sm leading-relaxed">
|
||||
{item}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export interface TechStackCategory {
|
||||
name: string;
|
||||
items: string[];
|
||||
}
|
||||
|
||||
export interface TechStackShowcaseProps {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
categories: TechStackCategory[];
|
||||
}
|
||||
|
||||
export function TechStackShowcase({ title, subtitle, categories }: TechStackShowcaseProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Tech Stack</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="text-text-secondary leading-relaxed text-lg">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{categories.map((category, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative p-8 border border-border-primary bg-bg-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-1 w-0 group-hover:w-full transition-all duration-700 bg-brand" />
|
||||
<h3 className="text-lg font-bold text-text-primary mb-5">{category.name}</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{category.items.map((item, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-bg-secondary text-text-secondary border border-border-primary hover:border-brand/30 hover:text-brand transition-colors duration-300"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export interface TimelineStep {
|
||||
phase: string;
|
||||
title: string;
|
||||
description: string;
|
||||
duration: string;
|
||||
deliverables: string[];
|
||||
}
|
||||
|
||||
export interface DeliveryTimelineProps {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
steps: TimelineStep[];
|
||||
accentColor?: string;
|
||||
}
|
||||
|
||||
export function DeliveryTimeline({
|
||||
title,
|
||||
subtitle,
|
||||
steps,
|
||||
accentColor = '#C41E3A',
|
||||
}: DeliveryTimelineProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Delivery Process</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="text-text-secondary leading-relaxed text-lg">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute left-8 lg:left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-brand/50 via-border-primary to-brand/50" />
|
||||
|
||||
<div className="space-y-12 lg:space-y-16">
|
||||
{steps.map((step, index) => (
|
||||
<ScrollReveal key={index} delay={index * 0.08}>
|
||||
<div className={cn(
|
||||
'relative flex gap-8 lg:gap-12',
|
||||
index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
|
||||
)}>
|
||||
<div className="hidden lg:block lg:w-1/2" />
|
||||
|
||||
<div className="absolute left-8 lg:left-1/2 -translate-x-1/2 w-4 h-4 rounded-full border-2 z-10"
|
||||
style={{ borderColor: accentColor, backgroundColor: '#ffffff' }}
|
||||
/>
|
||||
|
||||
<div className="lg:w-1/2 pl-16 lg:pl-0">
|
||||
<div className={cn(
|
||||
'p-8 lg:p-10 border border-border-primary bg-bg-secondary hover:border-border-secondary transition-all duration-500',
|
||||
index % 2 === 0 ? 'lg:ml-12' : 'lg:mr-12'
|
||||
)}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span
|
||||
className="text-xs font-bold tracking-[0.2em] uppercase"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
{step.phase}
|
||||
</span>
|
||||
<span className="text-sm text-text-muted">
|
||||
{step.duration}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-text-primary mb-3">{step.title}</h3>
|
||||
<p className="text-text-secondary leading-relaxed mb-5">
|
||||
{step.description}
|
||||
</p>
|
||||
<div className="pt-5 border-t border-border-primary">
|
||||
<div className="text-xs text-text-muted mb-3 font-medium uppercase tracking-wider">
|
||||
交付物
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{step.deliverables.map((deliverable, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="px-2.5 py-1 text-xs bg-bg-primary text-text-secondary border border-border-primary"
|
||||
>
|
||||
{deliverable}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export interface FAQItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export interface FAQSectionProps {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
items: FAQItem[];
|
||||
}
|
||||
|
||||
export function FAQSection({ title, subtitle, items }: FAQSectionProps) {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="grid lg:grid-cols-12 gap-12 lg:gap-20">
|
||||
<ScrollReveal className="lg:col-span-4">
|
||||
<SectionLabel>FAQ</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="text-text-secondary leading-relaxed text-lg">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="lg:col-span-8 space-y-3">
|
||||
<StaggerReveal staggerDelay={0.06} delayChildren={0.05}>
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="border border-border-primary bg-bg-primary hover:border-border-secondary transition-colors duration-300"
|
||||
>
|
||||
<button
|
||||
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
||||
className="w-full flex items-center justify-between gap-6 p-6 lg:p-7 text-left"
|
||||
>
|
||||
<span className="text-text-primary font-semibold text-base lg:text-lg">
|
||||
{item.question}
|
||||
</span>
|
||||
<motion.div
|
||||
animate={{ rotate: openIndex === index ? 180 : 0 }}
|
||||
transition={{ duration: 0.3, ease: EASE_OUT }}
|
||||
className="shrink-0"
|
||||
>
|
||||
<ChevronDown className="w-5 h-5 text-text-muted" />
|
||||
</motion.div>
|
||||
</button>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{
|
||||
height: openIndex === index ? 'auto' : 0,
|
||||
opacity: openIndex === index ? 1 : 0,
|
||||
}}
|
||||
transition={{ duration: 0.4, ease: EASE_OUT }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="px-6 lg:px-7 pb-7 pt-1 text-text-secondary leading-relaxed">
|
||||
{item.answer}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export interface DataMetric {
|
||||
value: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
trend?: string;
|
||||
trendUp?: boolean;
|
||||
}
|
||||
|
||||
export interface DataProofSectionProps {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
metrics: DataMetric[];
|
||||
}
|
||||
|
||||
export function DataProofSection({ title, subtitle, metrics }: DataProofSectionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Proven Results</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="text-text-secondary leading-relaxed text-lg">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{metrics.map((metric, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative p-10 lg:p-12 bg-bg-secondary hover:bg-bg-secondary transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-1 w-0 group-hover:w-full transition-all duration-700 bg-brand" />
|
||||
<div className="relative z-10">
|
||||
<div className="text-5xl lg:text-6xl font-bold tracking-tighter mb-4">
|
||||
<span className="text-text-primary">{metric.value}</span>
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-text-primary mb-2">
|
||||
{metric.label}
|
||||
</div>
|
||||
{metric.description && (
|
||||
<p className="text-sm text-text-muted leading-relaxed">
|
||||
{metric.description}
|
||||
</p>
|
||||
)}
|
||||
{metric.trend && (
|
||||
<div className={cn(
|
||||
'mt-4 inline-flex items-center gap-1.5 text-sm font-medium',
|
||||
metric.trendUp ? 'text-success' : 'text-brand'
|
||||
)}>
|
||||
<span>{metric.trend}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal } from '@/components/ui/scroll-reveal';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { Quote } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface Testimonial {
|
||||
quote: string;
|
||||
author: string;
|
||||
title: string;
|
||||
company: string;
|
||||
industry: string;
|
||||
}
|
||||
|
||||
export interface TestimonialSectionProps {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
testimonials: Testimonial[];
|
||||
accentColor?: string;
|
||||
}
|
||||
|
||||
export function TestimonialSection({
|
||||
title,
|
||||
subtitle,
|
||||
testimonials,
|
||||
accentColor = '#C41E3A',
|
||||
}: TestimonialSectionProps) {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Client Stories</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="text-text-secondary leading-relaxed text-lg">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative">
|
||||
<div className="relative overflow-hidden">
|
||||
<motion.div
|
||||
className="flex"
|
||||
animate={{ x: `-${activeIndex * 100}%` }}
|
||||
transition={{ duration: 0.6, ease: EASE_OUT }}
|
||||
>
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div key={index} className="w-full shrink-0">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="relative p-10 lg:p-16 border border-border-primary bg-bg-primary">
|
||||
<Quote className="absolute top-8 left-8 w-12 h-12 opacity-10 text-brand" />
|
||||
<div className="relative z-10">
|
||||
<p className="text-xl lg:text-2xl text-text-primary leading-relaxed font-light mb-10 lg:mb-14">
|
||||
「{testimonial.quote}」
|
||||
</p>
|
||||
<div className="flex items-center gap-5">
|
||||
<div
|
||||
className="w-14 h-14 rounded-full flex items-center justify-center text-white font-bold text-lg"
|
||||
style={{ backgroundColor: accentColor }}
|
||||
>
|
||||
{testimonial.author.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-text-primary font-semibold text-lg">
|
||||
{testimonial.author}
|
||||
</div>
|
||||
<div className="text-text-secondary text-sm">
|
||||
{testimonial.title} · {testimonial.company}
|
||||
</div>
|
||||
<div className="text-text-muted text-xs mt-0.5">
|
||||
{testimonial.industry}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-3 mt-10">
|
||||
{testimonials.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setActiveIndex(index)}
|
||||
className={cn(
|
||||
'h-2 rounded-full transition-all duration-500',
|
||||
activeIndex === index
|
||||
? 'w-8'
|
||||
: 'w-2 bg-border-primary hover:bg-border-secondary'
|
||||
)}
|
||||
style={activeIndex === index ? { backgroundColor: accentColor } : {}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export interface LogoWallProps {
|
||||
title: string;
|
||||
logos: { name: string; industry?: string }[];
|
||||
}
|
||||
|
||||
export function LogoWall({ title, logos }: LogoWallProps) {
|
||||
return (
|
||||
<section className="relative py-16 sm:py-20 overflow-hidden bg-bg-primary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal>
|
||||
<div className="text-center mb-12">
|
||||
<p className="text-sm text-text-muted tracking-[0.2em] uppercase font-medium">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-px bg-border-primary">
|
||||
{logos.map((logo, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.05, ease: EASE_OUT }}
|
||||
className="flex items-center justify-center p-8 bg-bg-primary hover:bg-bg-secondary transition-colors duration-300"
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="text-text-secondary font-semibold text-base hover:text-text-primary transition-colors duration-300">
|
||||
{logo.name}
|
||||
</div>
|
||||
{logo.industry && (
|
||||
<div className="text-text-muted text-xs mt-1">
|
||||
{logo.industry}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user