import React from 'react';
import thumb4 from '../../assets/images/about-thumb-4.png';
import thumb5 from '../../assets/images/about-thumb-5.png';
import cardImg from '../../assets/images/home/card-home-01.png'

function AfterHero() {
    return (
        <>
            <section className="appie-about-8-area pt-100 pb-100">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="appie-section-title mb-30">
                                <h3 className="appie-title">
                                    {/* We bring everything <br />
                                    that's required to build apps */}
                                    Set Chores, Set Goals
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-7 mb-3 mb-lg-0">
                            <div className='appie-about-container'>
                                <div className="appie-about-8-box">
                                    <h3 className="title">
                                        Reward Accomplishments
                                    </h3>
                                    <p>
                                        Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards off pick your nose and blow
                                    </p>
                                </div>
                                <div className='row'>
                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                            Learn More <i className="fal fa-arrow-right" />
                                        </a>
                                    </div>
                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
                                        <img className='w-100 h-100' src={cardImg} alt="Child Card" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-5">
                            {/* <div className="appie-about-8-box">
                                <h3 className="title">
                                    Assign Faster with <br />
                                    wrenchAgent
                                </h3>
                                <p>
                                    Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
                                </p>
                                <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                    Learn More <i className="fal fa-arrow-right" />
                                </a>
                                <div className="thumb mr-30">
                                    <img src={thumb5} alt="" />
                                </div>
                            </div> */}
                            <div className='appie-about-container'>
                                <div className="appie-about-8-box">
                                    <h3 className="title">
                                        Assign Faster with <br />
                                        wrenchAgent
                                    </h3>
                                    <p>
                                        Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
                                    </p>
                                </div>
                                <div className='row'>
                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
                                            Learn More <i className="fal fa-arrow-right" />
                                        </a>
                                    </div>
                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
                                        <img className='w-100 h-100' src={thumb5} alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}

export default AfterHero;