import React from 'react';
import Image from 'next/image';
import thumb from '../assets/images/home-app-page.png';

function TrafficHomeTwo() {
    return (
        <section className="appie-traffic-area pt-140 pb-180">
            <div className="container">
                <div className="row">
                    <div className="col-lg-7">
                        <div className="appie-traffic-title">
                            <h3 className="title">Family Connect</h3>
                            <p>
                            All you need for a family to get moving with rewards and more. Plan activities and booster family interactions. 
                            </p>
                        </div>
                        <div className="row">
                            <div className="col-lg-6 col-md-6">
                                <div className="appie-traffic-service mb-30">
                                    <div className="icon">
                                        <i className="fal fa-check" />
                                    </div>
                                    <h5 className="title">Organize Chores</h5>
                                    <p>Simple one-time tasks to repeated tasks or promise of performance or set goals.</p>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-6">
                                <div className="appie-traffic-service item-2 mb-30">
                                    <div className="icon">
                                        <i className="fal fa-check" />
                                    </div>
                                    <h5 className="title">Sibling Activities</h5>
                                    <p>Wrenchboard allows family members to create product connections with educational content with reward tools.
                                    </p>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-6">
                                <div className="appie-traffic-service item-3">
                                    <div className="icon">
                                        <i className="fal fa-check" />
                                    </div>
                                    <h5 className="title">Personalized Wallet</h5>
                                    <p>Individual wallet with parental control and guidance. Money education to increase values.</p>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-6">
                                <div className="appie-traffic-service item-4">
                                    <div className="icon">
                                        <i className="fal fa-check" />
                                    </div>
                                    <h5 className="title">Games & More </h5>
                                    <p>More opportunities to learn with games or the artificial intelligence library and shared material.</p>
                                </div>
                            </div>
                            <div className="col-lg-12">
                                <div className="traffic-btn mt-50">
                                    <a className="main-btn" href="#">
                                        Learn more about what you can do with WrenchBoard <i className="fal fa-arrow-right" />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="traffic-thumb ">
                {/* <img
                    className="wow animated fadeInRight"
                    data-wow-duration="2000ms"
                    data-wow-delay="200ms"
                    src={thumb}
                    alt=""
                /> */}
                <Image
                    src={thumb}
                    width={'100%'}
                    height={'100%'}
                    alt="Image"
                    className="wow animated fadeInRight"
                    data-wow-duration="2000ms"
                    data-wow-delay="200ms"
                  />
            </div>
        </section>
    );
}

export default TrafficHomeTwo;