diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx index 9c247c0..a253984 100644 --- a/src/app/pricing/page.tsx +++ b/src/app/pricing/page.tsx @@ -3,6 +3,7 @@ import { Check, ArrowRight, Zap, Crown, Rocket } from "lucide-react"; import { useState } from "react"; import { motion } from "framer-motion"; +import { staggerContainer, fadeInUp } from "@/lib/animations"; const plans = [ { @@ -95,42 +96,6 @@ const services = [ }, ]; -const pageVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { - when: "beforeChildren", - staggerChildren: 0.08, - }, - }, -}; - -const sectionVariants = { - hidden: { opacity: 0, y: 24 }, - visible: { - opacity: 1, - y: 0, - transition: { - duration: 0.6, - ease: [0.22, 1, 0.36, 1], // premium ease - }, - }, -}; - -const cardVariants = { - hidden: { opacity: 0, y: 20, scale: 0.98 }, - visible: { - opacity: 1, - y: 0, - scale: 1, - transition: { - duration: 0.45, - ease: "easeOut", - }, - }, -}; - export default function Pricing() { const [hoveredPlan, setHoveredPlan] = useState(null); diff --git a/src/lib/animations.ts b/src/lib/animations.ts new file mode 100644 index 0000000..31c77e4 --- /dev/null +++ b/src/lib/animations.ts @@ -0,0 +1,22 @@ +import { Variant } from "framer-motion"; + +type AnimationVariants = Record; + +export const fadeInUp: AnimationVariants = { + hidden: { opacity: 0, y: 30 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.6, ease: "easeOut" }, + }, +}; + +export const staggerContainer: AnimationVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.15, + }, + }, +};