import React from 'react';
import thumb5 from '../assets/images/about-thumb-5.png';
import cardImg from '../assets/images/home/card-home-01.png'
import bg from '../assets/images/background-bg.jpg'
import Image from 'next/image';

function AfterHero() {
    return (
        <>
            <section className="appie-about-8-area pt-50 pb-70" style={{ backgroundImage: `url(${bg.src})`, backgroundSize: 'cover' }}>
                <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">
                                        <Image
                                            src={cardImg}
                                            width={'100%'}
                                            height={'100%'}
                                            alt="" 
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-5">
                            <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">
                                        <Image
                                            src={thumb5}
                                            width={'100%'}
                                            height={'100%'}
                                            alt="" 
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}

export default AfterHero;