import React from 'react';
import { Card, Container, Row, Col } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChalkboardTeacher, faTheaterMasks, faLaptop } from '@fortawesome/free-solid-svg-icons';

const Services = () => (
  <Container className="text-center">
    <Row className="justify-content-around p-3">
      <Card style={{ width: '18rem', marginRight: "20px" }}>
        <Card.Body>
          <Card.Title className="text-black">
            <FontAwesomeIcon icon={faLaptop} className="text-center" size="lg"/><br/>Coworking
          </Card.Title>
        </Card.Body>
      </Card>
      <Card style={{ width: '18rem', marginRight: "20px" }}>
        <Card.Body>
          <Card.Title className="text-black">
            <FontAwesomeIcon icon={faTheaterMasks} className="text-center" size="lg"/><br/>Eventi Culturali
          </Card.Title>
        </Card.Body>
      </Card>
      <Card style={{ width: '18rem' }}>
        <Card.Body>
          <Card.Title className="text-black">
            <FontAwesomeIcon icon={faChalkboardTeacher} className="text-center" size="lg"/><br/>Corsi
          </Card.Title>
        </Card.Body>
      </Card>
    </Row>
    <Row>
    <Col xs={12} md={12} lg={12} className="text-center">
        <Container  style={{backgroundColor: "black", padding: "20px", marginTop:"20px", color: "white" }}>
<h5><i><b>Loop44</b>, è un luogo di collaborazione, aggregazione, lavoro e crescita. <br/><br/>In pieno centro a <b>Matera</b> questo spazio versatile offre un ambiente di coworking dinamico, una cornice ideale per eventi culturali e un luogo di incontro per i curiosi della tecnologia.<br/><br/> Unisci la tua passione con la community e scopri infinite opportunità di crescita e ispirazione.</i> </h5>
        </Container>
      </Col>
    </Row>
  </Container>
);

export default Services;