import React from 'react'
import frame from '../assets/images/use-case-side-main.png'; //about-frame.png'
import screen from '../assets/images/use-case-side-extra.png'; //about-screen.png'
import Image from 'next/image';

const AboutApp = ({ video, dark }) => {
  return (
    <>
      <section className="row_am about_app_section _">
        <div className="container">
          <div className="row modern_ui_section">
            <div className="col-lg-6">
              <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
                <div className="frame_img">
                  <Image width='100%' height='auto' className="w-100 moving_position_animatin" src={frame} alt="image" />
                </div>
                <div className="screen_img">
                  <Image width='100%' height='auto' className="w-100 moving_animation" src={screen} alt="image" />
                </div>
              </div>
            </div>
            <div className="col-lg-6">
              <div className="about_text">
                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                  <h2>Motivate & Organize <br /> <span>Rewards</span></h2>
                  <p>
                    With a planned reward, the parent can introduce the family to earning and start financial education early.
                  </p>
                </div>


                <ul className="design_block">
                  <li data-aos="fade-up" data-aos-duration="1500">
                    <h4>Goals Completed</h4>
                    <p>Motivate with rewards for goals completed, passing the exam, finishing chores, and learning new skills. </p>
                  </li>
                  <li data-aos="fade-up" data-aos-duration="1500">
                    <h4>Connect Family</h4>
                    <p>It takes a village to raise a kid and share good news and encouragement from the more prominent family. Connect family to the achievements to boost encouragement. </p>
                  </li>
                  <li data-aos="fade-up" data-aos-duration="1500">
                    <h4>Find any Task </h4>
                    <p>Make more, connect to the marketplace, and earn from appropriate tasks.</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}

export default AboutApp