import React from "react";
import Exellence1 from "../../public/svg/exellence1";
import Exellence2 from "../../public/svg/exellence2";
import Exellence3 from "../../public/svg/exellence3";
import Exellence4 from "../../public/svg/exellence4";
import { motion } from "framer-motion";

export default function Services() {
  return (
    <div>
      <div className="" id="services">
        <div className="wrapper">
          <div className="services">
            <motion.div className="services__item"
            initial={{ scale: 0 }}
            animate={{  scale: 1 }}
            transition={{duration:1}}>
              <div className="services__decor"></div>
              <div className="services__icon">
                <Exellence1 />
              </div>
              <div className="services__title">پاداش نقدی</div>
              <div className="services__text">
                از 5 تا 50% با خرید و انجام هر تراکنش در جیب‌جیب
              </div>
            </motion.div>
             <motion.div className="services__item"
            initial={{ scale: 0 }}
            animate={{  scale: 1 }}
            transition={{duration:2}}>
            <div className="services__decor"></div>
              <div className="services__icon">
                <Exellence2 />
              </div>
              <div className="services__title">سوپراپلیکیشن</div>
              <div className="services__text">
                بسیاری از اپلیکیشن‌ها و سایت‌ها و فروشگاه‌های اینستاگرامی تنها در یک اپلیکیشن
              </div>
            </motion.div>
             <motion.div className="services__item"
            initial={{ scale: 0 }}
            animate={{  scale: 1 }}
            transition={{duration:3}}>
            <div className="services__decor"></div>
              <div className="services__icon">
                <Exellence3 />
              </div>
              <div className="services__title">مقایسه</div>
              <div className="services__text"> انتخاب به صرفه با جیب‌جیب</div>
            </motion.div>
             <motion.div className="services__item"
            initial={{ scale: 0 }}
            animate={{  scale: 1 }}
            transition={{duration:4}}>
            <div className="services__decor"></div>
              <div className="services__icon">
                <Exellence4 />
              </div>
              <div className="services__title">تسویه سریع</div>
              <div className="services__text">
                امکان واریز نقدی اعتبار به حساب بانکی شما
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  );
}
