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 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() { |
||||
return ( |
||||
<div className={styles.container}> |
||||
<Head> |
||||
<title>Create Next App</title> |
||||
<link rel="icon" href="/favicon.ico" /> |
||||
</Head> |
||||
|
||||
<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> |
||||
<> |
||||
<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" /> |
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&display=swap" rel="stylesheet" /> |
||||
|
||||
<style jsx>{` |
||||
main { |
||||
padding: 5rem 0; |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
footer { |
||||
width: 100%; |
||||
height: 100px; |
||||
border-top: 1px solid #eaeaea; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
footer img { |
||||
margin-left: 0.5rem; |
||||
} |
||||
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> |
||||
{` |
||||
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(5px); |
||||
font-family: 'Barlow Semi Condensed', sans-serif; |
||||
background-repeat: no-repeat; |
||||
background-attachment: fixed; |
||||
background-position: center; |
||||
} |
||||
svg { |
||||
height: 48px; |
||||
margin: 0 2em; |
||||
fill: darkorange; |
||||
} |
||||
|
||||
<style jsx global>{` |
||||
html, |
||||
body { |
||||
padding: 0; |
||||
margin: 0; |
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, |
||||
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, |
||||
sans-serif; |
||||
} |
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
`}</style>
|
||||
</div> |
||||
`}
|
||||
</style> |
||||
</Head> |
||||
<Container fluid style={{ height: "100vh" }}> |
||||
<Row className="justify-content-center align-items-center"> |
||||
<Col xs={6}> |
||||
<Image src={logo} alt="LOOP44 Logo" style={{padding: "20px" }} fluid /> |
||||
<Container style={{ padding: "20px" }}> |
||||
<h1 style={{ textAlign: "center", fontSize: 55, color: "white"}}>L O O P 4 4</h1> |
||||
</Container> |
||||
</Col> |
||||
</Row> <Row> |
||||
<SocialIcons></SocialIcons> |
||||
</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