import React from 'react';
import {MDBCardImage, MDBIcon, MDBTypography} from "mdb-react-ui-kit";
import {ListItem, SlideFade, UnorderedList} from "@chakra-ui/react";
import IMGAE from "../../../public/resource/Smart/coins-outline.webp";

const StepTwo = () => {
    return (
        <SlideFade in={true} offsetY='20px'>
            <div className={'flex flex-column'}>
                <div className={'mt-4'}>
                    <MDBTypography style={{ lineHeight: 1.7 }} className={'text-right mr-4 text-primary-teal font-weight-bold bk-med'} variant={'h3'}> سرمایه گذاری امن
                        <MDBIcon className={'ml-2'} fas icon="chart-line" />
                    </MDBTypography>
                </div>
                <div dir={'rtl'} className={'text-right mr-4'}>
                    <p className={'bk-light text-sm'}>
                        با سطح معقولی از سرمایه و بدون نیاز
                        به دانش تخصصی در بازار های مالی
                        به آسانی سرمایه گذاری کنید                    </p>
                </div>

                <div className={'mt-4 mb-4'}>
                    <UnorderedList spacing={2} className={'bk-light'} dir={'rtl'}>
                        <ListItem>  بدون ریسک و بازدهی بالا</ListItem>
                        <ListItem>      بیمه تکمیلی برای سهامدار و خانواده </ListItem>
                        <ListItem>   حق استخدام </ListItem>
                        <ListItem>  درمان رایگان و با سود سالانه</ListItem>
                    </UnorderedList>
                </div>
            </div>
        </SlideFade>
    );
};

export default StepTwo;