import React from 'react'
import { Container,Row,Col,Badge} from 'reactstrap';
import img1 from '../assets/img/1.png';
import img2 from '../assets/img/2.png';
import img3 from '../assets/img/3.png';

const Step = () => {
    return (
        <Container>
            <div data-aos="fade-up">
            <Row className="row-content align-items-center">
                <Col lg="3" xs="12" className="order-lg-last">
                <h3 ><b>STEP 1</b></h3>
                </Col>
                <Col lg="7" xs="12">
                
                    <div>
                        <h2 className="mt-0 pr-3">CALL US/REGISTER THE FORM<Badge className="bg-orange" pill>🎉</Badge></h2>
                        <p >Call us/Complete Registeration when you Need Vision for Future/Guidance for Joining Higher studies and to get Premium Service whenever needed.</p>
                    </div>
                </Col>
                <Col  lg="2" xs="12" className="d-none d-lg-flex order-lg-first" >
                <img className=" align-self-center" src={img1}  width="150" height="150" alt="Uthappizza"></img>
                </Col>
            </Row>
            </div>

            <div data-aos="fade-up">
            <Row className="row-content align-items-center">
                <Col lg="3" xs="12">
                    <h3 ><b>STEP 2</b></h3>
                    
                </Col>
                <Col  lg="7" xs="12">
                    <h2>PAYMENT PROCESS<Badge className="text-white mr-1 bg-orange">Rs.100</Badge><Badge className="text-white bg-orange">Rs.200</Badge><Badge className="text-white mr-1 bg-orange">Rs.500</Badge></h2>
                    <br></br>
                    <ul className="text-orange" style={{display: "block"}}>
                        <li><p className="text-black">Only one time Guidance - Initial <span className="orange">Payment ₹.100</span> for <b>Career Guidance/Asking All abouts about Joining Colleges.</b>No more second time call scheduling!</p></li>
                        <li><p className="text-black">Only one time Guidance for<b> UPSC & TNPSC </b>- Initial <span className="orange">Payment ₹.200</span>.No more second time call scheduling!</p></li>
                        <li><p className="text-black">Complete Guidance till <b>College Selection & Membership </b>for Vision(valid for 2021) - <span className="orange">Payment ₹.500.</span></p></li>
                        <li> <p className="text-black">Method of Payment - Through Gpay/Paytm/Phonepay/Whatsapp pay/Direct Bank Transfer.</p><h5 className="text-black">After Proper Payment, Call will be Scheduled for Each Student</h5></li>
                    </ul>
                    
                </Col>
                <Col  lg="2" xs="12" className="d-none d-lg-flex order-lg-last" >
                <img className=" align-self-center" src={img2}  width="150" height="150" alt="buffet"></img>
                </Col>
            </Row>
            </div>

            <div data-aos="fade-up"  >
            <Row className="row-content align-items-center">
                <Col lg="3" xs="12" className="order-lg-last">
                <h3 ><b>STEP 3</b></h3>
                </Col>
                <Col  lg="7" xs="12">
                
                        <h2 className="mt-0 ">IDEALOGY THROUGH CALL</h2>
                        <p >Complete Idealogy will be Given in 📞Call.</p>
                </Col>
                <Col  lg="2" xs="12" className="d-none d-lg-flex order-lg-first" >
                <img className="align-self-center" src={img3}  width="150" height="150" alt="Uthappizza"></img>
                </Col>
            </Row>
            </div>
        </Container>
    
    )
}

export default Step