Files
novalon-website/src/app/(marketing)/template.tsx
T
张翔 37296b5717 feat(website): 三轮视觉改造与页面过渡动画
改造概要(30项):
- 第一轮:Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构
- 第二轮:字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复
- 第三轮:卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema
- P3-2:template.tsx+Framer Motion页面过渡/loading.tsx加载状态
- 清理:删除未用组件/hooks,修复重复移动导航,清理冗余CSS
2026-05-10 08:20:27 +08:00

51 lines
901 B
TypeScript

'use client';
import { motion, type Variants } from 'framer-motion';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
const pageVariants: Variants = {
initial: {
opacity: 0,
y: 8,
},
enter: {
opacity: 1,
y: 0,
transition: {
duration: 0.35,
ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
},
},
exit: {
opacity: 0,
y: -4,
transition: {
duration: 0.2,
ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
},
},
};
export default function MarketingTemplate({
children,
}: {
children: React.ReactNode;
}) {
const shouldReduceMotion = useReducedMotion();
if (shouldReduceMotion) {
return <>{children}</>;
}
return (
<motion.div
initial="initial"
animate="enter"
exit="exit"
variants={pageVariants}
>
{children}
</motion.div>
);
}