"use client" import { motion } from "framer-motion"; import { useTranslations } from "next-intl"; import React from "react"; const ease = [0, 0.48, 0.22, 0.98]; const parentVariant = { hidden: { borderColor: "#D3D3D7", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.05)", backgroundColor: "hsl(0, 0%, 97%)", }, visible: (delay = 0) => ({ borderColor: ["#D3D3D7", "hsla(208, 100%, 65%, 1)", "hsla(184, 100%, 50%, 1)"], backgroundColor: "#fff", boxShadow: [ "0px 4px 10px rgba(0, 0, 0, 0.05)", "0px 8px 20px rgba(0, 192, 255, 0.2)", ], transition: { duration: 0.5, ease: ease, repeatDelay: 1, repeatType: "reverse" as const, repeat: 1, delay, }, }), }; const textVariants = { hidden: { opacity: 0 }, visible: (delay = 0) => ({ opacity: 1, transition: { ease: "easeOut", repeatType: "reverse" as const, repeatDelay: 1, delay, repeat: 1, }, }), }; const childVariants = { hidden: { y: 0, scale: 1 }, visible: (delay = 0) => ({ y: [0, -2], scale: 1.05, transition: { duration: 0.7, ease: "easeOut", repeatType: "reverse" as const, repeatDelay: 1, delay, repeat: 1, } }), }; const pathVariants = { hidden: { pathLength: 0, color: "#D3D3D7", }, visible: (delay = 0) => ({ pathLength: [0, 1], color: ["#D3D3D7", "hsla(184, 100%, 50%, 1)","hsla(208, 100%, 65%, 1)", ], transition: { duration: 1, ease: "easeInOut", repeatType: "reverse" as const, delay, repeatDelay: 1, repeat: 1, } }), }; interface ISolutionsBox { title: string; targetAnimation: number[]; custom: 0 | 1; // delay of animation used when the box is a receiver of the animation fixed to className: string; currentAnimation: number; } const LandingSolutionsMainBox = ({ targetAnimation, title, custom, className, currentAnimation, }: ISolutionsBox) => { const t = useTranslations(); const shouldAnimate = targetAnimation.includes(currentAnimation); const animationKey = shouldAnimate ? `animate-${currentAnimation}` : "hidden"; return ( {t(title)} ); }; export default LandingSolutionsMainBox;