14 changed files with 1393 additions and 239 deletions
@ -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; |
||||||
@ -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; |
||||||
@ -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; |
||||||
@ -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; |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import Head from 'next/head'; |
||||||
|
import styles from '../styles/Home.module.css'; |
||||||
|
import Map from '../components/map'; |
||||||
|
import Services from '../components/services'; |
||||||
|
import { Container, Row, Col, Button, Card, Image } from 'react-bootstrap'; |
||||||
|
import SocialIcons from '../components/socialicons'; |
||||||
|
const logo = "logo.svg" |
||||||
|
|
||||||
|
export default function Home() { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Head> |
||||||
|
<title>LOOP44 | nel centro di Matera uno spazio per coworking, collaborazione, cultura</title> |
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossOrigin="anonymous" /> |
||||||
|
<style> |
||||||
|
{` |
||||||
|
body { |
||||||
|
background-size: cover; |
||||||
|
background-image: url("background-image.png"); |
||||||
|
background-color:black; |
||||||
|
height: 100vh; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
backdrop-filter: blur(10px); |
||||||
|
} |
||||||
|
svg { |
||||||
|
height: 48px; |
||||||
|
margin: 0 2em; |
||||||
|
fill: darkorange; |
||||||
|
} |
||||||
|
|
||||||
|
`}
|
||||||
|
</style> |
||||||
|
</Head> |
||||||
|
<Container fluid style={{ height: "100vh" }}> |
||||||
|
<Row className="justify-content-center align-items-center"> |
||||||
|
<Col xs={6}> |
||||||
|
<Image src={logo} alt="LOOP44 Logo" fluid /> |
||||||
|
<h1 style={{ color: "#fff", textAlign: "center" }}>L O O P 4 4</h1> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<hr/> <Row> |
||||||
|
<SocialIcons></SocialIcons> |
||||||
|
</Row> |
||||||
|
<hr/> |
||||||
|
<Services></Services> |
||||||
|
<hr/> |
||||||
|
<Map></Map> |
||||||
|
</Container> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -1,115 +1,70 @@ |
|||||||
import Head from 'next/head'; |
import Head from 'next/head'; |
||||||
import styles from '../styles/Home.module.css'; |
import styles from '../styles/Home.module.css'; |
||||||
|
import Services from '../components/services'; |
||||||
|
import { Container, Row, Col, Button, Card, Image } from 'react-bootstrap'; |
||||||
|
import SocialIcons from '../components/socialicons'; |
||||||
|
const logo = "logo.svg" |
||||||
|
|
||||||
|
|
||||||
export default function Home() { |
export default function Home() { |
||||||
return ( |
return ( |
||||||
<div className={styles.container}> |
<> |
||||||
<Head> |
<Head> |
||||||
<title>Create Next App</title> |
<title>LOOP44 | nel centro di Matera uno spazio per coworking, collaborazione, cultura</title> |
||||||
<link rel="icon" href="/favicon.ico" /> |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossOrigin="anonymous" /> |
||||||
</Head> |
<link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&display=swap" rel="stylesheet" /> |
||||||
|
|
||||||
<main> |
|
||||||
<h1 className={styles.title}> |
|
||||||
Welcome to <a href="https://nextjs.org">Next.js!</a> |
|
||||||
</h1> |
|
||||||
|
|
||||||
<p className={styles.description}> |
|
||||||
Get started by editing <code>pages/index.js</code> |
|
||||||
</p> |
|
||||||
|
|
||||||
<div className={styles.grid}> |
|
||||||
<a href="https://nextjs.org/docs" className={styles.card}> |
|
||||||
<h3>Documentation →</h3> |
|
||||||
<p>Find in-depth information about Next.js features and API.</p> |
|
||||||
</a> |
|
||||||
|
|
||||||
<a href="https://nextjs.org/learn" className={styles.card}> |
|
||||||
<h3>Learn →</h3> |
|
||||||
<p>Learn about Next.js in an interactive course with quizzes!</p> |
|
||||||
</a> |
|
||||||
|
|
||||||
<a |
|
||||||
href="https://github.com/vercel/next.js/tree/master/examples" |
|
||||||
className={styles.card} |
|
||||||
> |
|
||||||
<h3>Examples →</h3> |
|
||||||
<p>Discover and deploy boilerplate example Next.js projects.</p> |
|
||||||
</a> |
|
||||||
|
|
||||||
<a |
|
||||||
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" |
|
||||||
className={styles.card} |
|
||||||
> |
|
||||||
<h3>Deploy →</h3> |
|
||||||
<p> |
|
||||||
Instantly deploy your Next.js site to a public URL with Vercel. |
|
||||||
</p> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
</main> |
|
||||||
|
|
||||||
<footer> |
|
||||||
<a |
|
||||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" |
|
||||||
target="_blank" |
|
||||||
rel="noopener noreferrer" |
|
||||||
> |
|
||||||
Powered by{' '} |
|
||||||
<img src="/vercel.svg" alt="Vercel" className={styles.logo} /> |
|
||||||
</a> |
|
||||||
</footer> |
|
||||||
|
|
||||||
<style jsx>{` |
<style> |
||||||
main { |
{` |
||||||
padding: 5rem 0; |
body { |
||||||
flex: 1; |
background-size: cover; |
||||||
display: flex; |
background-image: url("background-image.png"); |
||||||
flex-direction: column; |
background-color:black; |
||||||
justify-content: center; |
height: 100vh; |
||||||
align-items: center; |
display: flex; |
||||||
} |
align-items: center; |
||||||
footer { |
justify-content: center; |
||||||
width: 100%; |
backdrop-filter: blur(5px); |
||||||
height: 100px; |
font-family: 'Barlow Semi Condensed', sans-serif; |
||||||
border-top: 1px solid #eaeaea; |
background-repeat: no-repeat; |
||||||
display: flex; |
background-attachment: fixed; |
||||||
justify-content: center; |
background-position: center; |
||||||
align-items: center; |
} |
||||||
} |
svg { |
||||||
footer img { |
height: 48px; |
||||||
margin-left: 0.5rem; |
margin: 0 2em; |
||||||
} |
fill: darkorange; |
||||||
footer a { |
} |
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-decoration: none; |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
code { |
|
||||||
background: #fafafa; |
|
||||||
border-radius: 5px; |
|
||||||
padding: 0.75rem; |
|
||||||
font-size: 1.1rem; |
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, |
|
||||||
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; |
|
||||||
} |
|
||||||
`}</style>
|
|
||||||
|
|
||||||
<style jsx global>{` |
`}
|
||||||
html, |
</style> |
||||||
body { |
</Head> |
||||||
padding: 0; |
<Container fluid style={{ height: "100vh" }}> |
||||||
margin: 0; |
<Row className="justify-content-center align-items-center"> |
||||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, |
<Col xs={6}> |
||||||
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, |
<Image src={logo} alt="LOOP44 Logo" style={{padding: "20px" }} fluid /> |
||||||
sans-serif; |
<Container style={{ padding: "20px" }}> |
||||||
} |
<h1 style={{ textAlign: "center", fontSize: 55, color: "white"}}>L O O P 4 4</h1> |
||||||
* { |
</Container> |
||||||
box-sizing: border-box; |
</Col> |
||||||
} |
</Row> <Row> |
||||||
`}</style>
|
<SocialIcons></SocialIcons> |
||||||
</div> |
</Row> |
||||||
|
<br/> |
||||||
|
<Services></Services> |
||||||
|
<Container style={{padding:25}}> |
||||||
|
<iframe |
||||||
|
width="100%" |
||||||
|
height="350" |
||||||
|
style={{border:"0", marginTop:20}} |
||||||
|
loading="lazy" |
||||||
|
allowfullscreen |
||||||
|
referrerpolicy="no-referrer-when-downgrade" |
||||||
|
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyApd2QKzSsWnlD7q99lNngynLN2zYreGN8
|
||||||
|
&q=Vico xx settembre 44,matera"> |
||||||
|
</iframe> |
||||||
|
</Container> |
||||||
|
</Container> |
||||||
|
</> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|||||||
|
After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -1,91 +0,0 @@ |
|||||||
.container { |
|
||||||
min-height: 100vh; |
|
||||||
padding: 0 0.5rem; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.title a { |
|
||||||
color: #0070f3; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
.title a:hover, |
|
||||||
.title a:focus, |
|
||||||
.title a:active { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
margin: 0 0 1rem; |
|
||||||
line-height: 1.15; |
|
||||||
font-size: 3.6rem; |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.title, |
|
||||||
.description { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.description { |
|
||||||
line-height: 1.5; |
|
||||||
font-size: 1.5rem; |
|
||||||
} |
|
||||||
|
|
||||||
.grid { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
flex-wrap: wrap; |
|
||||||
|
|
||||||
max-width: 800px; |
|
||||||
margin-top: 3rem; |
|
||||||
} |
|
||||||
|
|
||||||
.card { |
|
||||||
margin: 1rem; |
|
||||||
flex-basis: 45%; |
|
||||||
padding: 1.5rem; |
|
||||||
text-align: left; |
|
||||||
color: inherit; |
|
||||||
text-decoration: none; |
|
||||||
border: 1px solid #eaeaea; |
|
||||||
border-radius: 10px; |
|
||||||
transition: color 0.15s ease, border-color 0.15s ease; |
|
||||||
} |
|
||||||
|
|
||||||
.card:hover, |
|
||||||
.card:focus, |
|
||||||
.card:active { |
|
||||||
color: #0070f3; |
|
||||||
border-color: #0070f3; |
|
||||||
} |
|
||||||
|
|
||||||
.card h3 { |
|
||||||
margin: 0 0 1rem 0; |
|
||||||
font-size: 1.5rem; |
|
||||||
} |
|
||||||
|
|
||||||
.card p { |
|
||||||
margin: 0; |
|
||||||
font-size: 1.25rem; |
|
||||||
line-height: 1.5; |
|
||||||
} |
|
||||||
|
|
||||||
.logo { |
|
||||||
height: 1em; |
|
||||||
} |
|
||||||
|
|
||||||
@media (max-width: 600px) { |
|
||||||
.grid { |
|
||||||
width: 100%; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
html, |
|
||||||
body { |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, |
|
||||||
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
color: inherit; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
* { |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
img { |
|
||||||
max-width: 100%; |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
|
|
||||||
h1, |
|
||||||
h2, |
|
||||||
p, |
|
||||||
ul { |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
ul { |
|
||||||
padding: 0; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
button { |
|
||||||
padding: 0.5rem 1rem; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
Loading…
Reference in new issue