feat: 统一全站设计风格、导航组件与文案逻辑自洽性修复
- 新增 InkGlowCard 墨韵流光卡片组件，统一全站卡片交互风格 - 新增 PageNav 面包屑组件，统一全站页面导航 - 统一色彩体系、排版层级、间距节奏和动画风格 - 修复 CTA 区品牌名称错误（诺瓦隆→睿新致遠） - 修复 ERP 产品卖点与年费制定价矛盾 - 导航下拉补充 SDS 和 OA 产品 - 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员 - 移除不可靠的 100%客户满意度和 30+行业专家指标 - 修复新闻时间线不合理问题，调整里程碑节奏 - 统一响应承诺为工作日快速响应 - 服务第4项重命名为行业方案实施，厘清概念 - 服务详情页效果数据改为定性描述 - 删除 cases 模块，精简代码库
This commit is contained in:
张翔
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { ArrowRight, Lock, TrendingUp, Shield } from 'lucide-react';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface ChallengeCardProps {
|
||||
title: string;
|
||||
@@ -12,53 +12,80 @@ interface ChallengeCardProps {
|
||||
index: number;
|
||||
}
|
||||
|
||||
const scenarioStyles = {
|
||||
interface ScenarioConfig {
|
||||
icon: LucideIcon;
|
||||
accentColor: string;
|
||||
accentColorRgb: string;
|
||||
glowStart: string;
|
||||
glowEnd: string;
|
||||
}
|
||||
|
||||
const scenarioConfig: Record<string, ScenarioConfig> = {
|
||||
isolation: {
|
||||
bg: 'bg-[var(--color-challenge-isolation)]',
|
||||
hoverBg: 'hover:bg-[var(--color-challenge-isolation-hover)]',
|
||||
accent: 'border-l-[#C41E3A]',
|
||||
icon: '🔒',
|
||||
icon: Lock,
|
||||
accentColor: '#C41E3A',
|
||||
accentColorRgb: '196, 30, 58',
|
||||
glowStart: '#C41E3A',
|
||||
glowEnd: '#7C3AED',
|
||||
},
|
||||
growth: {
|
||||
bg: 'bg-[var(--color-challenge-growth)]',
|
||||
hoverBg: 'hover:bg-[var(--color-challenge-growth-hover)]',
|
||||
accent: 'border-l-[#D97706]',
|
||||
icon: '📈',
|
||||
icon: TrendingUp,
|
||||
accentColor: '#D97706',
|
||||
accentColorRgb: '217, 119, 6',
|
||||
glowStart: '#D97706',
|
||||
glowEnd: '#16A34A',
|
||||
},
|
||||
compliance: {
|
||||
bg: 'bg-[var(--color-challenge-compliance)]',
|
||||
hoverBg: 'hover:bg-[var(--color-challenge-compliance-hover)]',
|
||||
accent: 'border-l-[#16A34A]',
|
||||
icon: '🛡️',
|
||||
icon: Shield,
|
||||
accentColor: '#16A34A',
|
||||
accentColorRgb: '22, 163, 74',
|
||||
glowStart: '#16A34A',
|
||||
glowEnd: '#0891B2',
|
||||
},
|
||||
};
|
||||
|
||||
export function ChallengeCard({ title, description, scenario, href, index }: ChallengeCardProps) {
|
||||
const style = scenarioStyles[scenario];
|
||||
const config = scenarioConfig[scenario]!;
|
||||
const IconComponent = config.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
<InkGlowCard
|
||||
index={index}
|
||||
href={href}
|
||||
accentColorRgb={config.accentColorRgb}
|
||||
glowStart={config.glowStart}
|
||||
glowEnd={config.glowEnd}
|
||||
>
|
||||
<StaticLink
|
||||
href={href}
|
||||
className={`group block p-6 rounded-xl border-l-4 ${style.accent} ${style.bg} ${style.hoverBg} transition-all duration-300 hover:shadow-md h-full`}
|
||||
>
|
||||
<div className="text-2xl mb-3">{style.icon}</div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
<div className="p-6 md:p-8">
|
||||
<div className="flex items-start justify-between mb-5">
|
||||
<div
|
||||
className="w-11 h-11 rounded-xl flex items-center justify-center"
|
||||
style={{ backgroundColor: `rgba(${config.accentColorRgb}, 0.06)` }}
|
||||
>
|
||||
<IconComponent
|
||||
className="w-5 h-5"
|
||||
style={{ color: config.accentColor }}
|
||||
strokeWidth={1.8}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs font-mono tracking-widest text-[#A3A3A3]">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 leading-tight tracking-tight text-[#1C1C1C]">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#595959] leading-relaxed mb-4">
|
||||
|
||||
<p className="text-sm text-[#595959] leading-relaxed mb-6 min-h-[3.5rem]">
|
||||
{description}
|
||||
</p>
|
||||
<span className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A] group-hover:gap-2 transition-all">
|
||||
了解方案
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-[#C41E3A]">
|
||||
<span>了解方案</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</span>
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useCallback, type ReactNode } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface InkGlowCardProps {
|
||||
children: ReactNode;
|
||||
index?: number;
|
||||
accentColorRgb?: string;
|
||||
glowStart?: string;
|
||||
glowEnd?: string;
|
||||
className?: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const DEFAULT_ACCENT = '196, 30, 58';
|
||||
const DEFAULT_GLOW_START = '#C41E3A';
|
||||
const DEFAULT_GLOW_END = '#D97706';
|
||||
|
||||
export function InkGlowCard({
|
||||
children,
|
||||
index = 0,
|
||||
accentColorRgb = DEFAULT_ACCENT,
|
||||
glowStart = DEFAULT_GLOW_START,
|
||||
glowEnd = DEFAULT_GLOW_END,
|
||||
className = '',
|
||||
href,
|
||||
onClick,
|
||||
}: InkGlowCardProps) {
|
||||
const cardRef = useRef<HTMLDivElement>(null);
|
||||
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const handleMouseMove = useCallback((e: React.MouseEvent) => {
|
||||
if (!cardRef.current) return;
|
||||
const rect = cardRef.current.getBoundingClientRect();
|
||||
setMousePos({
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none transition-opacity duration-500"
|
||||
style={{
|
||||
opacity: isHovered ? 1 : 0,
|
||||
background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(${accentColorRgb}, 0.04), transparent 40%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="relative z-10">{children}</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={cardRef}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
delay: index * 0.08,
|
||||
ease: [0.16, 1, 0.3, 1],
|
||||
}}
|
||||
className={`relative ink-glow-border rounded-2xl ${className}`}
|
||||
style={{
|
||||
'--glow-start': glowStart,
|
||||
'--glow-end': glowEnd,
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
{href ? (
|
||||
<a
|
||||
href={href}
|
||||
className="relative block rounded-2xl bg-white overflow-hidden transition-all duration-500"
|
||||
style={{
|
||||
boxShadow: isHovered
|
||||
? `0 16px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(${accentColorRgb}, 0.08)`
|
||||
: '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
|
||||
transform: isHovered ? 'translateY(-4px)' : 'translateY(0)',
|
||||
}}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
) : (
|
||||
<div
|
||||
className="relative rounded-2xl bg-white overflow-hidden transition-all duration-500"
|
||||
style={{
|
||||
boxShadow: isHovered
|
||||
? `0 16px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(${accentColorRgb}, 0.08)`
|
||||
: '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
|
||||
transform: isHovered ? 'translateY(-4px)' : 'translateY(0)',
|
||||
}}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={onClick}
|
||||
role={onClick ? 'button' : undefined}
|
||||
tabIndex={onClick ? 0 : undefined}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
import Image from 'next/image';
|
||||
import { Calendar, Clock, ArrowRight } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
|
||||
export interface InsightCardProps {
|
||||
title: string;
|
||||
@@ -26,12 +27,12 @@ export function InsightCard({
|
||||
featured = false,
|
||||
}: InsightCardProps) {
|
||||
return (
|
||||
<article
|
||||
className={`
|
||||
group relative overflow-hidden rounded-lg border border-[#E5E5E5]/50
|
||||
bg-white transition-all duration-300 hover:shadow-lg
|
||||
${featured ? 'md:col-span-2' : ''}
|
||||
`}
|
||||
<InkGlowCard
|
||||
href={href}
|
||||
accentColorRgb="196, 30, 58"
|
||||
glowStart="#C41E3A"
|
||||
glowEnd="#D97706"
|
||||
className={featured ? 'md:col-span-2' : ''}
|
||||
>
|
||||
{imageUrl && (
|
||||
<div className="relative h-48 overflow-hidden">
|
||||
@@ -39,28 +40,28 @@ export function InsightCard({
|
||||
src={imageUrl}
|
||||
alt={title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
|
||||
<div className="p-6 md:p-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{category}
|
||||
</Badge>
|
||||
<div className="flex items-center gap-1 text-xs text-[#737373]">
|
||||
<div className="flex items-center gap-1 text-xs text-[#A3A3A3]">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>{readTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-[#171717] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-[#737373] mb-4 line-clamp-2">
|
||||
<p className="text-sm text-[#595959] mb-5 line-clamp-2">
|
||||
{excerpt}
|
||||
</p>
|
||||
|
||||
@@ -70,15 +71,12 @@ export function InsightCard({
|
||||
<span>{publishedAt}</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={href}
|
||||
className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A] hover:gap-2 transition-all"
|
||||
>
|
||||
<span className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A]">
|
||||
阅读更多
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</InkGlowCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,9 +4,6 @@ import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { InkBackground } from '@/components/ui/ink-decoration';
|
||||
import { DataParticleFlow } from '@/components/effects/data-particle-flow';
|
||||
import { SubtleDots } from '@/components/effects/subtle-dots';
|
||||
|
||||
interface PageHeaderProps {
|
||||
badge?: string;
|
||||
@@ -20,50 +17,40 @@ export function PageHeader({ badge, title, description, className = '' }: PageHe
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||||
<InkBackground />
|
||||
<DataParticleFlow
|
||||
particleCount={40}
|
||||
color="#C41E3A"
|
||||
intensity="subtle"
|
||||
shape="square"
|
||||
effect="pulse"
|
||||
/>
|
||||
<SubtleDots color="#C41E3A" count={6} />
|
||||
|
||||
<div className="relative overflow-hidden bg-[#FAFAFA]">
|
||||
<div className="container-wide relative z-10 pt-32 pb-20" ref={ref}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className={`max-w-4xl mx-auto text-center ${className}`}
|
||||
>
|
||||
{badge && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
transition={{ duration: 0.5, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mb-6"
|
||||
>
|
||||
<Badge variant="outline">{badge}</Badge>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-4xl sm:text-5xl font-bold text-[#1C1C1C] mb-6"
|
||||
transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4"
|
||||
>
|
||||
{title}
|
||||
</motion.h1>
|
||||
|
||||
|
||||
{description && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="text-lg text-[#5C5C5C] max-w-2xl mx-auto leading-relaxed"
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-base text-[#595959] max-w-2xl mx-auto leading-relaxed"
|
||||
>
|
||||
{description}
|
||||
</motion.p>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { ArrowUpRight } from 'lucide-react';
|
||||
import { ArrowUpRight, Database, Users, BarChart3, FileText, Truck, Building2 } from 'lucide-react';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface ProductCardProps {
|
||||
title: string;
|
||||
@@ -11,31 +11,69 @@ interface ProductCardProps {
|
||||
index: number;
|
||||
}
|
||||
|
||||
interface ProductStyleConfig {
|
||||
icon: LucideIcon;
|
||||
accentColor: string;
|
||||
accentColorRgb: string;
|
||||
glowStart: string;
|
||||
glowEnd: string;
|
||||
}
|
||||
|
||||
const productConfig: ProductStyleConfig[] = [
|
||||
{ icon: Database, accentColor: '#C41E3A', accentColorRgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||
{ icon: Users, accentColor: '#D97706', accentColorRgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
|
||||
{ icon: FileText, accentColor: '#2563EB', accentColorRgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||
{ icon: BarChart3, accentColor: '#16A34A', accentColorRgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
|
||||
{ icon: Truck, accentColor: '#7C3AED', accentColorRgb: '124, 58, 237', glowStart: '#7C3AED', glowEnd: '#C41E3A' },
|
||||
{ icon: Building2, accentColor: '#0891B2', accentColorRgb: '8, 145, 178', glowStart: '#0891B2', glowEnd: '#2563EB' },
|
||||
];
|
||||
|
||||
const defaultConfig: ProductStyleConfig = {
|
||||
icon: Database, accentColor: '#C41E3A', accentColorRgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706',
|
||||
};
|
||||
|
||||
export function ProductCard({ title, description, href, index }: ProductCardProps) {
|
||||
const config = productConfig[index] ?? defaultConfig;
|
||||
const IconComponent = config.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
<InkGlowCard
|
||||
index={index}
|
||||
href={href}
|
||||
accentColorRgb={config.accentColorRgb}
|
||||
glowStart={config.glowStart}
|
||||
glowEnd={config.glowEnd}
|
||||
>
|
||||
<StaticLink
|
||||
href={href}
|
||||
className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300 h-full"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[#FEF2F4] text-[#C41E3A] text-sm font-bold">
|
||||
<div className="p-6 md:p-8">
|
||||
<div className="flex items-start justify-between mb-5">
|
||||
<div
|
||||
className="w-11 h-11 rounded-xl flex items-center justify-center"
|
||||
style={{ backgroundColor: `rgba(${config.accentColorRgb}, 0.06)` }}
|
||||
>
|
||||
<IconComponent
|
||||
className="w-5 h-5"
|
||||
style={{ color: config.accentColor }}
|
||||
strokeWidth={1.8}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs font-mono tracking-widest text-[#A3A3A3]">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<ArrowUpRight className="w-5 h-5 text-[#595959] group-hover:text-[#C41E3A] transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
|
||||
<h3 className="text-lg font-semibold mb-2 leading-snug tracking-tight text-[#1C1C1C]">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#595959] leading-relaxed">
|
||||
|
||||
<p className="text-sm text-[#595959] leading-relaxed line-clamp-3 mb-5">
|
||||
{description}
|
||||
</p>
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
|
||||
<div className="flex items-center gap-1.5 text-sm font-medium text-[#A3A3A3] group-hover:text-[#C41E3A] transition-colors">
|
||||
<span>了解详情</span>
|
||||
<ArrowUpRight className="w-4 h-4" strokeWidth={2} />
|
||||
</div>
|
||||
</div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { Quote } from 'lucide-react';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
|
||||
interface TestimonialBlockProps {
|
||||
quote: string;
|
||||
@@ -13,26 +13,27 @@ interface TestimonialBlockProps {
|
||||
|
||||
export function TestimonialBlock({ quote, author, title, company, index }: TestimonialBlockProps) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="p-6 rounded-xl bg-white border border-[#E5E5E5] hover:shadow-md transition-shadow duration-300"
|
||||
<InkGlowCard
|
||||
index={index}
|
||||
accentColorRgb="196, 30, 58"
|
||||
glowStart="#C41E3A"
|
||||
glowEnd="#D97706"
|
||||
>
|
||||
<Quote className="w-8 h-8 text-[#C41E3A]/20 mb-4" />
|
||||
<blockquote className="text-[#3D3D3D] leading-relaxed mb-6">
|
||||
“{quote}”
|
||||
</blockquote>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-[#FEF2F4] flex items-center justify-center text-[#C41E3A] font-semibold text-sm">
|
||||
{author.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-[#1C1C1C]">{author}</div>
|
||||
<div className="text-xs text-[#595959]">{title}，{company}</div>
|
||||
<div className="p-6 md:p-8">
|
||||
<Quote className="w-7 h-7 text-[#C41E3A]/15 mb-5" />
|
||||
<blockquote className="text-[#1C1C1C] leading-relaxed mb-6 text-base">
|
||||
“{quote}”
|
||||
</blockquote>
|
||||
<div className="flex items-center gap-3 pt-4 border-t border-[#F0F0F0]">
|
||||
<div className="w-9 h-9 rounded-full bg-[#FAFAFA] flex items-center justify-center text-[#C41E3A] font-semibold text-sm">
|
||||
{author.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-[#1C1C1C]">{author}</div>
|
||||
<div className="text-xs text-[#A3A3A3]">{title}，{company}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user