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>
                            Looking for ways to keep your family active and engaged? We offer a variety of fun activities, challenges, and rewards to inspire and motivate your loved ones. 
                            </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>Whether is one-time or reoccuring task, make chores fun and exciting again for kids.</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">Challenge Zone</h5>
                                    <p>Discover exciting challenges, rewards, and friendly competition to keep your kids and whole family engaged.
                                    </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">Play and Learn</h5>
                                    <p>Discover a world of learning opportunities, from games to cutting-edge AI tools and our vast resource library.</p>
                                </div>
                            </div>
                            <div className="col-lg-12">
                                <div className="traffic-btn mt-50">
                                    <a className="main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
                                        Join us today and start creating lasting memories together <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;