export const setionTitleVariants = {
  hidden: { opacity: 0, y: -30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.7,
      ease: 'easeInOut',
    },
  },
};

type HeroSectionProps = {
  ltr?: boolean;
  opacityDuration?: number;
  delay?: number;
};

export const heroVariants = ({
  ltr = false,
  opacityDuration,
  delay,
}: HeroSectionProps) => {
  return {
    hidden: { opacity: 0, x: ltr ? 100 : -100 },
    show: {
      opacity: 1,
      x: 0,
      transition: {
        x: { type: 'spring', stiffness: 60, delay: delay ? delay : 0.04 },
        opacity: { duration: opacityDuration ? opacityDuration : 1 },
        ease: 'easeIn',
        duration: 1,
      },
    },
  };
};

export const gridVariants = {
  hidden: { opacity: 0, y: -30 },
  show: {
    opacity: 1,
    y: 0,
    transition: {
      type: 'tween',
      ease: [0.25, 0.25, 0.25, 0.75],
      duration: 1,
    },
  },
};