import React from 'react';
import { Button } from 'reactstrap';
import Fade from 'react-reveal/Fade';

export const JumbotronComponent = (props) => {
    console.log(props);
    return (
        <div className="container">
            <div className="p-5 mb-4 ">
                <Fade left>
                    <div className="row">
                        <div className="col-lg-6">
                            <p className="lead text-lg-start">{props.data.jumbotron_texts.left_text}</p>
                            <p className="lead text-lg-start">
                                <Button color="primary">Learn More</Button>
                            </p>
                        </div>
                    </div>
                </Fade>
                <Fade right>
                    <div className="row">
                        <div className="col-lg-6"></div>
                        <div className="col-lg-6">
                            <p className="lead text-lg-start">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt fugit aut nesciunt architecto omnis. Soluta possimus in magni eaque, quo modi temporibus, odit blanditiis eligendi, ipsum numquam cum necessitatibus.</p>
                            <p className="lead text-lg-start">
                                <Button color="primary">Learn More</Button>
                            </p>
                        </div>
                    </div>
                </Fade>
            </div>
        </div>
    );
};