first

components/header.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Container, Row, Col, Image } from "react-bootstrap";
+const logo = "https://upload.wikimedia.org/wikipedia/commons/2/24/LEGO_logo.svg"
+const Header = () => {
+  return (
+    <Container fluid style={{ height: "100vh" }}>
+      <Row className="justify-content-center align-items-center">
+        <Col xs={6}>
+            <Container style={{backgroundColor: "black", padding: "20px" }}>
+          <Image src={logo} alt="Loop44 Logo" fluid />
+          <h1 style={{ color: "#fff", textAlign: "center"}}>L O O P 4 4</h1>
+          </Container>
+        </Col>
+        
+      </Row>
+    </Container>
+  );
+};
+
+export default Header;

components/map.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+
+const Map = () => {
+  return (
+    <Container>
+      <Row>
+        <Col xs={12}>
+          <div id="map" style={{ height: '400px', width: '100%' }} />
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+Map.getInitialProps = async () => {
+  const API_KEY = 'AIzaSyApd2QKzSsWnlD7q99lNngynLN2zYreGN8';
+
+  const location = {
+    lat: 40.663887,
+    lng: 16.604882,
+  };
+
+  const script = document.createElement('script');
+  script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=initMap`;
+  script.async = true;
+  script.defer = true;
+  document.body.appendChild(script);
+
+  // Initialize and center the map on the location
+  window.initMap = () => {
+    const map = new window.google.maps.Map(document.getElementById('map'), {
+      zoom: 15,
+      center: location,
+    });
+
+    // Add a marker to the map
+    new window.google.maps.Marker({
+      position: location,
+      map,
+    });
+  };
+
+  return {};
+};
+
+export default Map;

components/services.js

@@ -0,0 +1,41 @@
+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;

components/socialicons.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faFacebook,
+  faInstagram,
+  faLinkedin
+} from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
+
+const SocialIcons = () => (
+  <Container>
+    <Row className="justify-content-center"z>
+      <Col xs={12} md={12} lg={12} className="text-center">
+        <Container  style={{backgroundColor: "black", padding: "20px", marginTop:"20px" }}>
+        <a href="#" style={{ marginRight: "20px" }}>
+          <FontAwesomeIcon icon={faFacebook} size="2x" style={{ color: "white" }} />
+        </a>
+
+        <a href="#" style={{ marginRight: "20px" }}>
+          <FontAwesomeIcon icon={faInstagram} size="2x" style={{ color: "white" }} />
+        </a>
+        <a href="mailto:email@example.com">
+          <FontAwesomeIcon icon={faEnvelope} size="2x" style={{ color: "white" }} />
+        </a>
+        </Container>
+      </Col>
+    </Row>
+  </Container>
+);
+
+export default SocialIcons;