import React from "react";
import { Carousel } from "react-bootstrap";
export default class HomeCarousel extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Carousel className="jumbotron" variant="light">
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src='/images/carousel/volleyball_normalized.jpg'
                        alt="Connect Slide"
                    />
                    <Carousel.Caption>
                        <div className="captionStyle">
                            <h1>Connect</h1>
                            <h2>Connect with other athletes in your area!</h2>
                        </div>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src='/images/carousel/schedule_normalized.jpg'
                        alt="Schedule Slide"
                    />
                    <Carousel.Caption>
                        <div className="captionStyle">
                            <h1>Schedule</h1>
                            <h2>Schedule sport meets with other athletes!</h2>
                        </div>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        src='/images/carousel/rentals_normalized.jpg'
                        alt="Rent Slide"
                        className="d-block w-100"
                    />
                    <Carousel.Caption>
                        <div className="captionStyle">
                            <h1>Rent</h1>
                            <h2>Rent sports equipment from other athletes!</h2>
                        </div>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        );
    }
}