diff --git a/README.md b/README.md index 95dd7fe1..36681c5b 100644 --- a/README.md +++ b/README.md @@ -20,4 +20,4 @@ # -Sito realizzato per l'evento Naturalmente Tecnologici 11-13 Agosto 2023 a Grassano, Matera +Sito realizzato per l'evento Naturalmente Tecnologici a Grassano (Matera) diff --git a/gatsby-config.ts b/gatsby-config.ts index 22b1d3dc..b8a8271b 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -3,8 +3,11 @@ import type { GatsbyConfig } from 'gatsby'; const siteUrl = `https://nt.syskrack.org`; const config: GatsbyConfig = { + flags: { + DEV_SSR: true, + }, siteMetadata: { - title: `Naturalmente Tecnologici 2023 - NT`, + title: `Naturalmente Tecnologici - NT`, siteUrl: siteUrl, description: `L'evento si propone di essere occasione di ritrovo della community di Syskrack nonché strumento di disseminazione culturale sul territorio.`, keywords: 'naturalmente, tecnologici, evento, futuro', diff --git a/gatsby-node.ts b/gatsby-node.ts index fc9264a8..02c0d169 100644 --- a/gatsby-node.ts +++ b/gatsby-node.ts @@ -18,7 +18,7 @@ import { GatsbyNode } from 'gatsby'; // }); // }; -export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] = ({ actions }) => { +export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] = ({ stage, loaders, actions }) => { const { createTypes } = actions; createTypes(` type SitePage implements Node { @@ -35,4 +35,16 @@ export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] routed: Boolean } `); + // if (stage === 'build-html' || stage === 'develop-html') { + // actions.setWebpackConfig({ + // module: { + // rules: [ + // { + // test: /react-p5/, + // use: (loaders as any).null(), + // }, + // ], + // }, + // }); + // } }; diff --git a/gatsby-ssr.js b/gatsby-ssr.js new file mode 100644 index 00000000..fad3e039 --- /dev/null +++ b/gatsby-ssr.js @@ -0,0 +1,14 @@ +import React from 'react'; + +export const onRenderBody = ({ setHeadComponents }) => { + setHeadComponents([ + , + ]); +}; diff --git a/locales/en/common.json b/locales/en/common.json index f9e91925..4563e611 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -1,9 +1,9 @@ { - "Date": "August 11>13 2023", + "Date": "9-10-11 August 2024", "ThanksTitle": "HEARTFELT THANKS!", "ThanksSubTitle": "SEE YOU IN AUGUST 2024", "NavContactUs": "Contact us", - "NavCta": "TALKS", + "NavCta": "TALKS 2023", "CookiesText": "This site uses technical cookies for its own functioning and the provision of related services; your consent is not required for these cookies. Analytical cookies (both proprietary and third-party) may also be installed to better understand your usage of this site, as well as profiling cookies (both proprietary and third-party) to send you advertising in line with your preferences; to accept the use of these cookies, click on 'Accept All', while clicking the 'X' button will prevent their installation. If you prefer to make specific choices regarding analytical cookies", "CookiesTextCta": "customize your preferences", "CookiesFunc": "Functional", diff --git a/locales/en/index.json b/locales/en/index.json index 0a168220..1ef054cd 100644 --- a/locales/en/index.json +++ b/locales/en/index.json @@ -2,21 +2,29 @@ "SEOTitle": "Home", "SEODescription": "A 3 days event in a wild, breathtaking location, between the Matera hills, that will feature camping, workshops, conferences, and gatherings of people from all over the world.", "WhenWhere": "When and where", - "Title": "RE-CLAIM THE FUTURE", - "Subtitle": "3 DAYS OF MUSIC, ART, TECHNOLOGICAL AND SOCIAL INNOVATION", + "NewEdition": "NEW EDITION COMING", + "NewEditionSub": "STAY TUNED", + "Title": "INNOVAZIONE", + "Subtitle": "NON È PROGRESSO", "WhatIsName1": "Naturalmente Tecnologici", "WhatIsName2": "The music festival", "WhatIsName3": "The innovation festival", "WhatIsName4": "Why participate?", - "WhatIsText1": "The original event format, spread across 3 days, nestled in a stunning wild location, in the middle of Matera hills: camping, workshops, conferences, experiences, music festivals, gatherings of people from everywhere, and much more.

The keyword is contamination.
Participants, local residents, and communities will exchange ideas, visions, and experiences. The goal is to explore new horizons of ethical and sustainable technological development from a social and environmental perspective.", + "WhatIsText1": "3 days of music, art, technology innovation and social innovation", "WhatIsText2": "National and International artists will take the stage at Naturalmente Tecnologici.

You'll be able to listen to a variety of sounds: from hip-hop to reggae, from techno to goa.", "WhatIsText3": "Conferences, workshops, self-awareness experiences, and activities for mindfulness, as well as encounters between people, technology, and nature.
This year's theme is (Re)-claiming the future. Complex discussions on the acceleration of our times.", "WhatIsText4": "Naturalmente Tecnologici is a one-of-a-kind event.
Camping, workshops, conferences, excursions under the Lucanian sky and its stars.
Days filled with energy, sharing, and change.

A three-day event to playfully build the foundations of tomorrow's world: a more inclusive, sustainable, and naturally technological world.
The festival serves as a catalyst for people and ideas; you'll return home full of new energy and inspiration, ready to build the world of tomorrow.", + "Value1": "Music", + "Value2": "Activities", + "Value3": "Nature", + "ValueText1": "Get ready to dance and sing! Our festival will be a riot of notes and melodies, with artists from all over the world ready to make the air vibrate with their music.", + "ValueText2": "Technological and social innovation will be at the heart of the festival’s activities. Through workshops, demonstrations, and discussions, participants will have the opportunity to explore new ideas, discover the latest technological trends, and reflect on how these can be sustainably integrated into our society.", + "ValueText3": "And what about our beautiful Lucanian landscape? The festival takes place in the heart of nature, offering participants the opportunity to connect with it. Respect for nature and the promotion of sustainability will be key themes during the event.", "HeardOn": "YOU'VE SEEN US ON", "WhereLocation": "Don't know how to reach the location?
Read our guide in the Info page", "HowToReach": "How to reach us", - "LocationText1": "The festival will take place at Bosco Le Coste, between Grassano and Grottole, amidst the clayey hills of Basilicata.
Located within the territory of the San Giuliano natural oasis, not far from Matera, it offers a breathtaking view where the eye wanders in every direction, enjoying the spectacle of the surrounding plateaus.
Located a few kilometers from the village, it is the largest green lung, a natural extension of the aforementioned oasis. The Forest is also of significant environmental importance, a vast wooded area where Mediterranean vegetation and very rare floral and faunal species abound.", - "LocationText2": "Here you will find a well-equipped green area where you can completely immerse yourself in nature and be soothed by the sounds it contains.
The area is divided into two levels: the upper part is a furnished area with picnic shelters equipped with lighting, children's playgrounds, and a restaurant. Descending into the woods, you enter a 5 km loop trail that winds through the forest. Here, you can enjoy horseback riding or mountain biking, trekking, or simply breathe in the scents of nature along the educational trail.", + "LocationText1": "The festival will take place amidst the clayey hills of Basilicata, located within the territory of the San Giuliano natural oasis, not far from Matera.

It offers a breathtaking view where the eye wanders in every direction, enjoying the spectacle of the surrounding plateaus.", + "LocationText2": "Located a few kilometers from the village, it is the largest green lung, a natural extension of the aforementioned oasis.

The forest is also of significant environmental importance, a vast wooded area where Mediterranean vegetation and very rare floral and faunal species abound.", "LocationCta": "Discover the location", "WhatHeading": "What we will do", "InfoTitle1": "CONCERTS", diff --git a/locales/it/common.json b/locales/it/common.json index acc2e522..3edb2432 100644 --- a/locales/it/common.json +++ b/locales/it/common.json @@ -1,9 +1,9 @@ { - "Date": "11>13 Agosto 2023", + "Date": "9-10-11 Agosto 2024", "ThanksTitle": "GRAZIE DI CUORE!", "ThanksSubTitle": "CI VEDIAMO AD AGOSTO 2024", "NavContactUs": "Contattaci", - "NavCta": "TALKS", + "NavCta": "TALKS 2023", "CookiesText": "Questo sito utilizza cookie tecnici per il proprio funzionamento e per l'erogazione dei relativi servizi; per tali cookie non è richiesto il tuo consenso. Potrebbero, inoltre, essere installati cookie analitici (propri e di terza parte) per comprendere meglio il tuo utilizzo di questo sito e cookie di profilazione (propri e di terze parti) per inviarti pubblicità in linea con le tue preferenze; per accettare l'utilizzo di questi cookie clicca su “Accetta tutti”, mentre cliccando sul tasto “X” precludi la loro installazione; se, invece, vuoi operare una scelta analitica su specifici cookie", "CookiesTextCta": "personalizza le tue preferenze", "CookiesFunc": "Funzionale", diff --git a/locales/it/index.json b/locales/it/index.json index 0255337d..03a69cf2 100644 --- a/locales/it/index.json +++ b/locales/it/index.json @@ -2,21 +2,29 @@ "SEOTitle": "Home", "SEODescription": "Un evento di 3 giorni in una location mozzafiato, selvaggia, tra le colline materane tra camping, laboratori, conferenze e incontro tra persone di ogni dove.", "WhenWhere": "Quando e dove", - "Title": "RI-PRENDIAMOCI IL FUTURO", - "Subtitle": "3 GIORNI DI MUSICA, ARTE, INNOVAZIONE TECNOLOGICA E SOCIALE", + "NewEdition": "NUOVA EDIZIONE IN ARRIVO", + "NewEditionSub": "RIMANI SINTONIZZATO", + "Title": "INNOVAZIONE", + "Subtitle": "NON È PROGRESSO", "WhatIsName1": "Naturalmente Tecnologici", "WhatIsName2": "Il festival musicale", "WhatIsName3": "Il festival dell'innovazione", "WhatIsName4": "Perché partecipare?", - "WhatIsText1": "Il format originale di evento, spalmato in 3 giorni, immersi in una location mozzafiato, selvaggia, tra le colline materane: camping, laboratori, conferenze, esperienze, festival musicali, incontro tra persone di ogni dove e molto altro.

La parola chiave è contaminazione.
I partecipanti, gli abitanti del luogo e le community si scambieranno idee, visioni ed esperienze. L'obiettivo è indagare nuovi orizzonti dello sviluppo tecnologico etici e sostenibili dal punto di vista sociale ed ambientale.", + "WhatIsText1": "3 giorni di musica, arte, innovazione tecnologica e sociale", "WhatIsText2": "Artisti nazionali e internazionali saliranno sullo stage di Naturalmente Tecnologici.

Potrai ascoltare tante sonorità diverse: dal hip-hop al reggae, dalla techno alla goa.", "WhatIsText3": "Conferenze, laboratori, esperienze di autocoscienza e attività per la consapevolezza oltre che incontro tra persone, tecnologia e natura.
Il tema di quest'anno è (Ri)-prendiamoci il futuro. Ragionamenti complessi sull'accelerazione dei nostri tempi.", "WhatIsText4": "Naturalmente Tecnologici è un evento unico nel suo genere.
Campeggio, laboratori, conferenze, escursioni sotto il cielo lucano e le sue stelle.
Giorni pieni di energie, condivisione e cambiamento.

Una tre giorni per costruire, divertendosi, le fondamenta del mondo di domani: un mondo più inclusivo, sostenibile e naturalmente tecnologico.
Il festival è un catalizzatore di persone e idee, tornerai a casa pieno di nuove energie e stimoli, pronti e pronte a costruire il mondo del domani.", + "Value1": "Musica", + "Value2": "Attività", + "Value3": "Natura", + "ValueText1": "Preparati a ballare e cantare! Il nostro festival sarà un tripudio di note e melodie, con artisti provenienti da tutto il mondo pronti a far vibrare l’aria con la loro musica.", + "ValueText2": "L'innovazione tecnologica e sociale sarà al centro delle attività del festival. Attraverso workshop, dimostrazioni e discussioni, i partecipanti avranno l'opportunità di esplorare nuove idee, scoprire le ultime tendenze tecnologiche e riflettere su come queste possono essere integrate in modo sostenibile nella nostra società.", + "ValueText3": "E che dire del nostro splendido paesaggio lucano? Il festival si svolge nel cuore della natura, offrendo ai partecipanti l'opportunità di connettersi ad essa. Il rispetto per la natura e la promozione della sostenibilità saranno temi chiave durante l'evento.", "HeardOn": "CI HAI VISTO SU", "WhereLocation": "Non sai come raggiungere la location?
Leggi la nostra guida nella pagina Info", "HowToReach": "Come raggiungerci", - "LocationText1": "Il festival avrà luogo presso Bosco Le Coste, tra Grassano e Grottole, tra le argillose colline lucane.
Rientra nel territorio dell'oasi naturale di San Giuliano, non lontano da Matera. Si gode di una vista mozzafiato, in cui l'occhio spazia in ogni direzione, godendo lo spettacolo degli altopiani circostanti.
Situato a pochi chilometri dall'abitato, è il più grosso polmone verde, appendice naturale dell'oasi predetta. Di notevole importanza ambientale sono anche la Foresta, un vasto territorio boschivo dove abbonda anche la presenza di macchia mediterranea e di specie floristiche e faunistiche molto rare.", - "LocationText2": "Qui troverete un'area verde attrezzata dove ci si può immergere totalmente nella natura e farsi coccolare dai suoni che essa contiene.
L'area si sviluppa in due piani, la parte superiore è un'area attrezzata con capanni per pic-nic forniti di illuminazione, giostrine per bambini, ristorante. Scendendo nel bosco invece si entra nel circuito ad anello che si sviluppa nel bosco per 5 Km, qui è possibile fare passeggiate a cavallo o mountain bike, trekking o respirare i profumi della natura nel sentiero didattico.", + "LocationText1": "Il festival avrà luogo tra le argillose colline lucane.
Rientra nel territorio dell'oasi naturale di San Giuliano, non lontano da Matera.

Si gode di una vista mozzafiato, in cui l'occhio spazia in ogni direzione, godendo lo spettacolo degli altopiani circostanti.", + "LocationText2": "Situato a pochi chilometri dall'abitato, è il più grosso polmone verde, appendice naturale dell'oasi predetta.

La foresta è di notevole importanza ambientale, un vasto territorio boschivo dove abbonda anche la presenza di macchia mediterranea e di specie floristiche e faunistiche molto rare.", "LocationCta": "Scopri la location", "WhatHeading": "Cosa faremo", "InfoTitle1": "CONCERTI", diff --git a/package.json b/package.json index d8bfaed3..609855e4 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,9 @@ "dependencies": { "@fontsource/cairo": "^4.5.13", "@fontsource/poppins": "^4.5.10", + "@loadable/component": "^5.16.3", + "@types/loadable__component": "^5.13.8", + "@types/p5": "^1.7.6", "canvas-confetti": "^1.6.1", "gatsby": "^5.8.0", "gatsby-plugin-canonical-urls": "^5.9.0", @@ -36,11 +39,13 @@ "gatsby-transformer-sharp": "^5.8.0", "i18next": "^23.7.7", "js-cookie": "^3.0.5", + "p5": "^1.9.0", "react": "^18.2.0", "react-circular-progressbar": "^2.1.0", "react-dom": "^18.2.0", "react-i18next": "^13.5.0", "react-intersection-observer": "^9.4.3", + "react-p5": "^1.4.1", "react-slick": "^0.29.0", "react-world-flags": "^1.6.0", "sass": "^1.60.0", diff --git a/src/assets/basilicata.svg b/src/assets/basilicata.svg new file mode 100644 index 00000000..4a6f4b36 --- /dev/null +++ b/src/assets/basilicata.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/basilicataPin.svg b/src/assets/basilicataPin.svg new file mode 100644 index 00000000..de986701 --- /dev/null +++ b/src/assets/basilicataPin.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/colli.svg b/src/assets/colli.svg index c3c72725..f99234a5 100644 --- a/src/assets/colli.svg +++ b/src/assets/colli.svg @@ -1,3 +1,18 @@ - - + + + + diff --git a/src/assets/location-outline.svg b/src/assets/location-outline.svg new file mode 100644 index 00000000..7d050cec --- /dev/null +++ b/src/assets/location-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/location.svg b/src/assets/location.svg index 7d050cec..e67f9df0 100644 --- a/src/assets/location.svg +++ b/src/assets/location.svg @@ -1,3 +1,2 @@ - - - + + \ No newline at end of file diff --git a/src/assets/sectionDecoration.svg b/src/assets/sectionDecoration.svg new file mode 100644 index 00000000..83423308 --- /dev/null +++ b/src/assets/sectionDecoration.svg @@ -0,0 +1,29 @@ + + + + + + + + diff --git a/src/assets/windShovel.svg b/src/assets/windShovel.svg new file mode 100644 index 00000000..f2762cec --- /dev/null +++ b/src/assets/windShovel.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + diff --git a/src/components/atoms/BigPictureSection/index.module.scss b/src/components/atoms/BigPictureSection/index.module.scss new file mode 100644 index 00000000..45c778a7 --- /dev/null +++ b/src/components/atoms/BigPictureSection/index.module.scss @@ -0,0 +1,75 @@ +.wrap { + position: relative; +} +.wrapText { + position: absolute; + margin: 50px 0; + bottom: 0; + z-index: 2; + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: center; + + // mix-blend-mode: soft-light; + h4 { + font-size: 5rem; + text-transform: uppercase; + margin-bottom: 5px; + opacity: 0.4; + font-family: 'Alba'; + width: 100%; + } + p { + margin: 0 20px; + opacity: 0.8; + } + + @media screen and (min-width: '768px') { + width: 40%; + text-align: right; + right: 4%; + h4 { + opacity: 0.2; + font-size: 10rem; + } + + p { + margin: 0 40px; + max-width: 450px; + } + } +} + +.wrapTextReverse { + @extend .wrapText; + align-items: flex-start; + right: auto; + @media screen and (min-width: '768px') { + left: 4%; + text-align: left; + } +} + +.bigImage { + width: 100vw; + height: 80vh; + span { + position: absolute; + top: 0; + right: 0; + z-index: 1; + height: 100%; + width: 100vw; + background: linear-gradient(to right, var(--nt-transparent-orange) -10%, var(--nt-green) 90%); + } +} + +.bigImageReverse { + @extend .bigImage; + span { + right: auto; + left: 0; + transform: scaleX(-1); + } +} diff --git a/src/components/atoms/BigPictureSection/index.tsx b/src/components/atoms/BigPictureSection/index.tsx new file mode 100644 index 00000000..441c58ba --- /dev/null +++ b/src/components/atoms/BigPictureSection/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { BigPictureSectionProps } from './index.types'; +import * as styles from './index.module.scss'; +import ShowOnView from '../ShowOnView'; + +const Index = ({ children, title, text, reverse = false }: BigPictureSectionProps) => { + return ( +
+ +

+

+ + +
+ + {children} +
+
+ ); +}; + +export default Index; diff --git a/src/components/atoms/BigPictureSection/index.types.ts b/src/components/atoms/BigPictureSection/index.types.ts new file mode 100644 index 00000000..2bfbecb5 --- /dev/null +++ b/src/components/atoms/BigPictureSection/index.types.ts @@ -0,0 +1,6 @@ +export interface BigPictureSectionProps { + children: React.ReactNode; + title: string; + text?: string; + reverse?: boolean; +} diff --git a/src/components/atoms/CardAction/index.tsx b/src/components/atoms/CardAction/index.tsx index f2bc18c3..0699a5d3 100644 --- a/src/components/atoms/CardAction/index.tsx +++ b/src/components/atoms/CardAction/index.tsx @@ -18,8 +18,8 @@ const Index = ({ primary, }: FastActionProps) => { const [ref, inView, _entry] = useInView({ - threshold: 0, - rootMargin: '5% 0px -20% 0px', + threshold: 0.5, + // rootMargin: '5% 0px -20% 0px', fallbackInView: true, triggerOnce: true, }); diff --git a/src/components/atoms/CardImage/index.module.scss b/src/components/atoms/CardImage/index.module.scss index cce642eb..cbda2e08 100644 --- a/src/components/atoms/CardImage/index.module.scss +++ b/src/components/atoms/CardImage/index.module.scss @@ -10,6 +10,13 @@ overflow: hidden; transition: transform 500ms ease-out; will-change: transform; + max-height: 30vh; + @media screen and (min-width: '768px') { + max-height: 50vh; + video { + max-height: 50vh; + } + } } .sectionImage { diff --git a/src/components/atoms/Flocking/Boid.jsx b/src/components/atoms/Flocking/Boid.jsx new file mode 100644 index 00000000..0378c928 --- /dev/null +++ b/src/components/atoms/Flocking/Boid.jsx @@ -0,0 +1,166 @@ +import React from 'react'; + +class Boid extends React.Component { + constructor(props) { + super(props); + const { p5, key, perceptionRadius } = props; + this.key = key; + this.p5 = p5; + this.position = p5.createVector(p5.random(p5.width), p5.random(p5.height)); + this.velocity = p5.createVector(p5.random(-2, 2), p5.random(-2, 2)); + this.velocity.setMag(p5.random(2, 4)); + this.acceleration = p5.createVector(); + this.maxForce = 0.5; + this.maxSpeed = 4; + this.opacity = 0; + this.perceptionRadius = perceptionRadius; + } + + show( + p5, + numNear + //, img + ) { + // let angle = this.velocity.heading(); + let count = p5.frameCount; + let n = 30 + numNear * 70; + this.opacity = count < 255 && count < n ? count : n; + + p5.strokeWeight(6 + numNear / 2); + p5.stroke(233, 138, 21, this.opacity); + p5.point(this.position.x, this.position.y); + + // p5.push(); + // p5.translate(this.position.x, this.position.y); + // p5.imageMode(p5.CENTER); + // p5.rotate(angle); + // p5.image(img, this.position.x, this.position.y); + + // p5.pop(); + } + + update() { + this.position.add(this.velocity); + this.velocity.add(this.acceleration); + this.velocity.limit(this.maxSpeed); + this.acceleration.mult(0); + } + + align(boids) { + let steering = this.p5.createVector(0, 0); + let total = 0; + + for (let other of boids) { + let d = this.p5.dist(this.position.x, this.position.y, other.position.x, other.position.y); + if (other !== this && d < this.perceptionRadius) { + steering.add(other.velocity); + total++; + } + } + + if (total > 0) { + steering.div(total); + steering.setMag(this.maxSpeed); + steering.sub(this.velocity); + steering.limit(this.maxForce); + } + + return steering; + } + + cohesion(boids) { + let steering = this.p5.createVector(0, 0); + let total = 0; + + for (let other of boids) { + let d = this.p5.dist(this.position.x, this.position.y, other.position.x, other.position.y); + if (other !== this && d < this.perceptionRadius) { + steering.add(other.position); + total++; + } + } + + if (total > 0) { + steering.div(total); + steering.sub(this.position); + steering.setMag(this.maxSpeed); + steering.sub(this.velocity); + steering.limit(this.maxForce); + } + + return { steering, total }; + } + + separation(boids) { + let steering = this.p5.createVector(); + let total = 0; + for (let other of boids) { + let d = this.p5.dist(this.position.x, this.position.y, other.position.x, other.position.y); + if (other !== this && d < this.perceptionRadius) { + let diff = this.p5.createVector(0, 0); + diff.add(this.position); + diff.sub(other.position); + diff.div(d); + steering.add(diff); + total++; + } + } + if (total > 0) { + steering.div(total); + steering.setMag(this.maxSpeed); + steering.sub(this.velocity); + // steering.limit(this.maxForce); + } + return steering; + } + + join(boids, numNear) { + let n = numNear * 5; + let count = 0; + for (let element of boids) { + if (element !== this && count < 3) { + let dis = this.p5.dist(this.position.x, this.position.y, element.position.x, element.position.y); + if (dis < this.perceptionRadius) { + this.p5.strokeWeight(1); + this.p5.stroke(255, 255, 255, n > 100 ? 100 : n); + this.p5.line(this.position.x, this.position.y, element.position.x, element.position.y); + count++; + } + } + } + } + + flock(boids, mulAl, mulCoh, mulSep) { + let alignment = this.align(boids); + let separation = this.separation(boids); + let res = this.cohesion(boids); + let cohesion = res.steering; + + alignment.mult(mulAl); + cohesion.mult(mulCoh); + separation.mult(mulSep); + + this.acceleration.add(separation); + this.acceleration.add(alignment); + this.acceleration.add(cohesion); + + let distBoidMouse = this.p5.dist(this.position.x, this.position.y, this.p5.mouseX, this.p5.mouseY); + if (distBoidMouse < 150 && distBoidMouse > 2) { + let pointMouse = this.p5.createVector(this.p5.mouseX - this.position.x, this.p5.mouseY - this.position.y); + if (this.p5.mouseIsPressed) this.acceleration.add(pointMouse); + else this.acceleration.sub(pointMouse); + } + + return res.total; + } + + edges() { + if (this.position.x > this.p5.width) this.position.x = 0; + else if (this.position.x < 0) this.position.x = this.p5.width; + + if (this.position.y > this.p5.height) this.position.y = 0; + else if (this.position.y < 0) this.position.y = this.p5.height; + } +} + +export default Boid; diff --git a/src/components/atoms/Flocking/index.tsx b/src/components/atoms/Flocking/index.tsx new file mode 100644 index 00000000..5b477c39 --- /dev/null +++ b/src/components/atoms/Flocking/index.tsx @@ -0,0 +1,71 @@ +import React, { useEffect, useState } from 'react'; +import p5Types from 'p5'; //Import this for typechecking and intellisense +import Boid from './Boid'; +import loadable from '@loadable/component'; +import { getRandomNum } from '../../../utilities/randInt'; + +const Sketch = loadable(() => import('react-p5')); + +const Index = () => { + const [flock, setFlock] = useState([]); + const [mults, setMults] = useState<{ al: number; coh: number; sep: number }>({ al: 1, coh: 1.7, sep: 0.2 }); + // const [mySvg, setMySvg] = useState(); + + // const preload = (p5: p5Types) => { + // setMySvg(p5.loadImage('./assets/insect.svg')); + // }; + + useEffect(() => { + process.env.NODE_ENV === 'development' && console.log(mults); + }, [mults]); + + useEffect(() => { + setInterval(() => { + setMults({ + al: getRandomNum(1, 2), + coh: getRandomNum(1, 2), + sep: getRandomNum(0, 1), + }); + }, 5000); + }, []); + + const setup = (p5: p5Types, canvasParentRef: HTMLCanvasElement) => { + const width = window.innerWidth; + p5.createCanvas(window.innerWidth, window.innerHeight).parent(canvasParentRef); + + window.addEventListener('resize', () => p5.resizeCanvas(window.innerWidth, window.innerHeight)); + + const isPhone = width <= 768; + const numBoids = isPhone ? 50 : 100; + + p5.angleMode(p5.DEGREES); + for (let i = 0; i < numBoids; i++) { + setFlock((state) => [...state, new Boid({ p5: p5, key: i, perceptionRadius: numBoids / 2 })]); + } + }; + + const draw = (p5: p5Types) => { + p5.background( + 2, + 83, + 0 //, 110 + ); + + for (let boid of flock) { + boid.edges(); + const numNear = boid.flock(flock, mults.al, mults.coh, mults.sep); + boid.join(flock, numNear); + boid.update(); + boid.show( + p5, + numNear + //, mySvg + ); + } + }; + + //@ts-ignore + return ; +}; + +export default Index; diff --git a/src/components/atoms/FlyingInsect/index.tsx b/src/components/atoms/FlyingInsect/index.tsx index 6b742fa4..858404c4 100644 --- a/src/components/atoms/FlyingInsect/index.tsx +++ b/src/components/atoms/FlyingInsect/index.tsx @@ -17,7 +17,7 @@ const Index = ({ top = 0, onClick }: InsectProps) => {
{ + const style = { color: simple ? 'var(--nt-orange)' : textWhite ? 'var(--nt-white)' : 'var(--nt-green)' }; + const Heading = (
-
+ {simple ? <> :
} + {main ? ( -

+

) : smaller ? ( -

+

) : ( -

+

)}
); diff --git a/src/components/atoms/Heading/index.types.ts b/src/components/atoms/Heading/index.types.ts index 48e0211d..53bb36d8 100644 --- a/src/components/atoms/Heading/index.types.ts +++ b/src/components/atoms/Heading/index.types.ts @@ -5,5 +5,6 @@ export interface HeadingProps { main?: boolean; textWhite?: boolean; showOnView?: boolean; + simple?: boolean; id?: string; } diff --git a/src/components/atoms/HeardOn/index.tsx b/src/components/atoms/HeardOn/index.tsx index ca433328..ee29c70e 100644 --- a/src/components/atoms/HeardOn/index.tsx +++ b/src/components/atoms/HeardOn/index.tsx @@ -10,8 +10,8 @@ const Index = () => { const data = images(); const { t } = useTranslation(); const [ref, inView, _entry] = useInView({ - threshold: 0, - rootMargin: '10% 0px -20% 0px', + threshold: 0.5, + // rootMargin: '10% 0px -20% 0px', fallbackInView: true, triggerOnce: true, }); diff --git a/src/components/atoms/LanguagePicker/index.tsx b/src/components/atoms/LanguagePicker/index.tsx index 7348daa2..0af71ac7 100644 --- a/src/components/atoms/LanguagePicker/index.tsx +++ b/src/components/atoms/LanguagePicker/index.tsx @@ -12,7 +12,8 @@ const Index = () => {
setDropdown(false)}>

setDropdown((v) => !v)}> - {language.toUpperCase()} + {language.toUpperCase()} + {/* */}

{languages.map((lng, key) => ( diff --git a/src/components/atoms/LocationMap/index.module.scss b/src/components/atoms/LocationMap/index.module.scss new file mode 100644 index 00000000..23969f45 --- /dev/null +++ b/src/components/atoms/LocationMap/index.module.scss @@ -0,0 +1,39 @@ +.wrap { + position: relative; + &:hover { + transform: translateY(-10px); + } +} + +.locationPin { + position: absolute; + top: 103px; + right: 81.5px; + opacity: 0; + transform: translateY(-200px); + transition: opacity 1s ease, transform 2s ease-out; + width: 25px; + height: 25px; + @media screen and (min-width: '768px') { + width: 40px; + height: 40px; + top: 206px; + right: 162px; + } +} + +.locationPinShow { + @extend .locationPin; + opacity: 1; + transform: none; +} + +.basilicata { + width: 300px; + height: 300px; + + @media screen and (min-width: '768px') { + width: 580px; + height: 580px; + } +} diff --git a/src/components/atoms/LocationMap/index.tsx b/src/components/atoms/LocationMap/index.tsx new file mode 100644 index 00000000..8a8b01da --- /dev/null +++ b/src/components/atoms/LocationMap/index.tsx @@ -0,0 +1,27 @@ +import React, { useState } from 'react'; +import Basilicata from '../../../assets/basilicata.svg'; +//import BasilicataPin from '../../../assets/basilicataPin.svg'; +import Location from '../../../assets/location.svg'; +import ShowOnView from '../ShowOnView'; +import * as styles from './index.module.scss'; +import { coords, mapsLink } from '../../../utilities/howToReach'; + +const Index = () => { + const [show, setShow] = useState(false); + + return ( + + + + + + + ); +}; + +export default Index; diff --git a/src/components/atoms/MakeEditable/index.tsx b/src/components/atoms/MakeEditable/index.tsx new file mode 100644 index 00000000..0d68d094 --- /dev/null +++ b/src/components/atoms/MakeEditable/index.tsx @@ -0,0 +1,33 @@ +import React, { useEffect } from 'react'; + +const Index = () => { + let typed = ''; + let enabled = false; + const secret = 'mbarechedici'; + + const sequenceChecker = (e: KeyboardEvent) => { + typed += e.key; + if (!secret.startsWith(typed)) typed = ''; + if (secret === typed) { + enabled = !enabled; + typed = ''; + const elements = []; + const ps = document.getElementsByTagName('p'); + for (let i = 0; i < ps.length; i++) elements.push(ps[i]); + for (let i = 1; i <= 6; i++) { + const hs = document.getElementsByTagName('h' + i); + console.log(hs); + for (let j = 0; j < hs.length; j++) elements.push(hs[j]); + } + elements.forEach((e) => e.setAttribute('contenteditable', enabled ? 'true' : 'false')); + } + }; + + useEffect(() => { + window.addEventListener('keypress', sequenceChecker); + return window.removeEventListener('keypress', () => {}); + }, []); + return <>; +}; + +export default Index; diff --git a/src/components/atoms/MultipleLinks/index.tsx b/src/components/atoms/MultipleLinks/index.tsx index 42e36832..05ce4417 100644 --- a/src/components/atoms/MultipleLinks/index.tsx +++ b/src/components/atoms/MultipleLinks/index.tsx @@ -16,14 +16,14 @@ const Index = ({ name, active = false, children }: MultipleLinksProps) => { // onMouseEnter={() => setShow(true)} > {name} - + /> */}
{ const { metadata, featuredImage } = useSiteMetadata(); console.log(lang); @@ -218,17 +219,22 @@ const Index = ({ {/* */} - + }} + > + ) : ( + <> + )} {/* */} {children} diff --git a/src/components/atoms/Seo/index.types.ts b/src/components/atoms/Seo/index.types.ts index 98a12b3b..8a0e1e0f 100644 --- a/src/components/atoms/Seo/index.types.ts +++ b/src/components/atoms/Seo/index.types.ts @@ -9,6 +9,7 @@ export type SeoProps = { keywords?: string; noIndex?: boolean; images?: string[]; + tally?: boolean; }; export type Meta = ConcatArray; diff --git a/src/components/atoms/ShowOnView/index.tsx b/src/components/atoms/ShowOnView/index.tsx index 1b8f5b59..db4163bf 100644 --- a/src/components/atoms/ShowOnView/index.tsx +++ b/src/components/atoms/ShowOnView/index.tsx @@ -1,15 +1,20 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; import ShowOnViewProps from './index.types'; import * as styles from './index.module.scss'; -const Index = ({ children, triggerOnce = true, className, style }: ShowOnViewProps) => { +const Index = ({ children, triggerOnce = true, className, style, setInView }: ShowOnViewProps) => { const [ref, inView, _entry] = useInView({ - threshold: 0, - rootMargin: '5% 0px 5% 0px', + threshold: 0.5, + // rootMargin: '5% 0px 5% 0px', fallbackInView: true, triggerOnce: triggerOnce, }); + + useEffect(() => { + if (setInView) setInView(inView); + }, [inView]); + return (
{children} diff --git a/src/components/atoms/ShowOnView/index.types.ts b/src/components/atoms/ShowOnView/index.types.ts index 69cbbd44..c0263041 100644 --- a/src/components/atoms/ShowOnView/index.types.ts +++ b/src/components/atoms/ShowOnView/index.types.ts @@ -3,4 +3,5 @@ export default interface ShowOnViewProps { triggerOnce?: boolean; className?: string; style?: React.CSSProperties; + setInView?: (inView: boolean) => void; } diff --git a/src/components/atoms/SingleSection/index.module.scss b/src/components/atoms/SingleSection/index.module.scss index 46ac068f..c7a25c48 100644 --- a/src/components/atoms/SingleSection/index.module.scss +++ b/src/components/atoms/SingleSection/index.module.scss @@ -1,5 +1,5 @@ .wrapper { - color: var(--nt-orange); + color: var(--nt-white); width: 90%; text-align: center; margin-top: 30px; @@ -9,7 +9,7 @@ } .wrap { - border: 3px solid var(--nt-transparent-orange); + border: 8px solid var(--nt-transparent-orange); border-radius: 10px; padding: 10px; display: flex; @@ -19,15 +19,27 @@ gap: 20px; position: relative; transition: transform 200ms ease; + color: var(--nt-white); - &:hover { - transform: scale(1.02); - .outShadow { - opacity: 0.8; - } - .inShadow { - opacity: 0.8; - } + & svg { + filter: drop-shadow(0 0 0px var(--nt-orange)); + } +} + +.lightUp { + transform: scale(1.02); + .outShadow { + opacity: 0.8; + } + .inShadow { + opacity: 0.8; + } + .decorationUp { + opacity: 1; + } + svg { + filter: drop-shadow(0 0 5px var(--nt-orange)); + fill: var(--nt-orange); } } @@ -44,6 +56,24 @@ .inShadow { @extend .outShadow; - border: 3px solid var(--nt-orange); + border: 8px solid var(--nt-orange); box-shadow: 0 0 15px 0px var(--nt-orange) inset; } + +.decorationUp { + position: absolute; + width: 150px; + left: -155.5px; + transition: fill 500ms cubic-bezier(0.12, -0.96, 0.96, 1.97), filter 500ms cubic-bezier(0.12, -0.96, 0.96, 1.97); + opacity: 0.6; + @media screen and (max-width: '767px') { + display: none; + } +} + +.decorationDown { + @extend .decorationUp; + transform: rotate(180deg); + left: auto; + right: -155.5px; +} diff --git a/src/components/atoms/SingleSection/index.tsx b/src/components/atoms/SingleSection/index.tsx index 33652f9c..00786844 100644 --- a/src/components/atoms/SingleSection/index.tsx +++ b/src/components/atoms/SingleSection/index.tsx @@ -1,20 +1,51 @@ -import React from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import * as styles from './index.module.scss'; import SingleSectionProps from './index.types'; import ShowOnView from '../ShowOnView'; +import SectionDecoration from '../../../assets/sectionDecoration.svg'; +import { getRandomNum } from '../../../utilities/randInt'; +import { useInView } from 'react-intersection-observer'; const Index = ({ children, brighter = false, showOnView = true, fullWidth = false }: SingleSectionProps) => { + const color = brighter ? 'var(--nt-orange)' : 'var(--nt-transparent-orange)'; + const [rands, setRands] = useState([10, 10]); + const divRef = useRef(null); + + const [ref, inView, _entry] = useInView({ + threshold: 0.5, + // rootMargin: '-10% 0px -10% 0px', + fallbackInView: true, + }); + + const getRand = () => { + const h = divRef.current!.getBoundingClientRect().height - 100; + return getRandomNum(10, h); + }; + + useEffect(() => { + setRands([getRand(), getRand()]); + }, []); + const Section = ( -
-
-
- {children} +
+
+ + +
+
+ {children} +
); return showOnView ? ( diff --git a/src/components/atoms/VerticalSectionImage/index.module.scss b/src/components/atoms/VerticalSectionImage/index.module.scss new file mode 100644 index 00000000..60d3007f --- /dev/null +++ b/src/components/atoms/VerticalSectionImage/index.module.scss @@ -0,0 +1,37 @@ +.wrap { + position: relative; + margin: 20px; + width: fit-content; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + p { + font-weight: 700; + font-size: xx-large; + filter: drop-shadow(0px 0px 16px black); + position: absolute; + text-transform: uppercase; + letter-spacing: 0.1rem; + } +} + +.sectionImage { + border-radius: 15px; + position: relative; + width: 80vw; + max-height: 30vh; + display: flex; + align-items: center; + justify-content: center; + + img { + filter: brightness(0.7); + } + + @media screen and (min-width: '768px') { + width: 20vw; + max-height: 50vh; + } +} diff --git a/src/components/atoms/VerticalSectionImage/index.tsx b/src/components/atoms/VerticalSectionImage/index.tsx new file mode 100644 index 00000000..8a3a7ea6 --- /dev/null +++ b/src/components/atoms/VerticalSectionImage/index.tsx @@ -0,0 +1,17 @@ +import React, { useState } from 'react'; +import * as styles from './index.module.scss'; +import { CardImageProps } from './index.types'; +import ShowOnView from '../ShowOnView'; + +const Index = ({ children, text }: CardImageProps) => { + return ( + +
+
{children}
+

{text}

+
+ + ); +}; + +export default Index; diff --git a/src/components/atoms/VerticalSectionImage/index.types.ts b/src/components/atoms/VerticalSectionImage/index.types.ts new file mode 100644 index 00000000..9f8e5d7d --- /dev/null +++ b/src/components/atoms/VerticalSectionImage/index.types.ts @@ -0,0 +1,4 @@ +export interface CardImageProps { + children: React.ReactElement; + text: string; +} diff --git a/src/components/atoms/WindShovel/index.module.scss b/src/components/atoms/WindShovel/index.module.scss new file mode 100644 index 00000000..6e4b3488 --- /dev/null +++ b/src/components/atoms/WindShovel/index.module.scss @@ -0,0 +1,19 @@ +.shovel { + width: 200px; + height: auto; + filter: drop-shadow(-20px 10px 7px rgba(0, 0, 0, 0.25)); + overflow: visible; + & g { + animation-duration: 10s; + } + @media screen and (min-width: '768px') { + width: 340px; + } +} + +.shovelSlower { + @extend .shovel; + & g { + animation-duration: 20s; + } +} diff --git a/src/components/atoms/WindShovel/index.tsx b/src/components/atoms/WindShovel/index.tsx new file mode 100644 index 00000000..a389eef3 --- /dev/null +++ b/src/components/atoms/WindShovel/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { WindShovelProps } from './index.types'; +import WindShovel from '../../../assets/windShovel.svg'; +import * as styles from './index.module.scss'; + +const Index = ({ color, slower = false }: WindShovelProps) => { + return ; +}; + +export default Index; diff --git a/src/components/atoms/WindShovel/index.types.ts b/src/components/atoms/WindShovel/index.types.ts new file mode 100644 index 00000000..3bcacf0a --- /dev/null +++ b/src/components/atoms/WindShovel/index.types.ts @@ -0,0 +1,4 @@ +export interface WindShovelProps { + color: string; + slower?: boolean; +} diff --git a/src/components/molecules/FlyingInsects/index.module.scss b/src/components/molecules/FlyingInsects/index.module.scss index 69f7946a..934549c8 100644 --- a/src/components/molecules/FlyingInsects/index.module.scss +++ b/src/components/molecules/FlyingInsects/index.module.scss @@ -3,6 +3,33 @@ top: 0; left: 0; overflow-x: hidden; + overflow-y: hidden; width: 100vw; height: 100vh; } + +.zen { + position: absolute; + top: 100px; + right: 50px; + background: none; + border: none; + color: var(--nt-white); + cursor: pointer; + opacity: 0.5; + + transition: color 100ms ease, transform 100ms ease; + + &:hover { + color: var(--nt-orange); + } + + // @media (hover: none) and (pointer: coarse) { + // display: none; + // } + + @media (display-mode: fullscreen) { + transform: translateY(-80px); + opacity: 0.2; + } +} diff --git a/src/components/molecules/FlyingInsects/index.tsx b/src/components/molecules/FlyingInsects/index.tsx index 740040e2..052eee7e 100644 --- a/src/components/molecules/FlyingInsects/index.tsx +++ b/src/components/molecules/FlyingInsects/index.tsx @@ -1,24 +1,63 @@ -import React, { useEffect, useState } from 'react'; +import React, { Suspense, lazy, useEffect, useState } from 'react'; import FlyingInsect from '../../atoms/FlyingInsect'; import * as styles from './index.module.scss'; +// import Flocking from '../../atoms/Flocking'; +import detectBrowser from '../../../utilities/detectBrowser'; + +// const isBrowser = typeof window !== 'undefined'; const Index = () => { - const [catched, setCatched] = useState(0); + const Flocking = lazy(() => import('../../atoms/Flocking')); + // const [animate, setAnimate] = useState(false); + // const [catched, setCatched] = useState(0); + // const handleClick = () => setCatched((old) => old + 1); + + // useEffect(() => { + // console.log(catched); + // }, [catched]); + + // function toggleFullScreen() { + // if ((!document.fullscreenElement) || (!document.webkitFullscreenElement)){ + // try{ + // document.documentElement.webkitRequestFullscreen(); + // } + // catch(e){ + // document.documentElement.requestFullscreen(); + // } - const handleClick = () => { - setCatched((old) => old + 1); - }; + // } else { + // if ((document.exitFullscreen) || (document.webkitExitFullscreen)){ + // try{ + // document.webkitExitFullscreen(); + // } + // catch(e){ + // document.exitFullscreen(); + // } + // } + // } + // } - useEffect(() => { - console.log(catched); - }, [catched]); + // const toggleFullscreen = () => { + // if (!document.fullscreenElement) { + // document.documentElement.requestFullscreen(); + // } else { + // document.exitFullscreen(); + // } + // }; return (
- + {/* - + */} + {/* */} + {/* {animate ? : <>} */} + + +
); }; diff --git a/src/components/molecules/LastEdition/index.tsx b/src/components/molecules/LastEdition/index.tsx index 21ff4ea0..05a9fc7f 100644 --- a/src/components/molecules/LastEdition/index.tsx +++ b/src/components/molecules/LastEdition/index.tsx @@ -38,7 +38,7 @@ const Index = () => { const { t } = useTranslation(); // const [ref, inView, _entry] = useInView({ - // threshold: 0, + // threshold: 0.5, // rootMargin: '10% 0px -20% 0px', // fallbackInView: true, // }); diff --git a/src/components/molecules/Loading/index.module.scss b/src/components/molecules/Loading/index.module.scss index 6edec9c7..0402c2c8 100644 --- a/src/components/molecules/Loading/index.module.scss +++ b/src/components/molecules/Loading/index.module.scss @@ -13,18 +13,113 @@ width: 300px; height: 300px; position: relative; - transform-origin: center center; - animation: rotate 2s infinite linear; - svg { + .insectWrap { position: absolute; + animation: rotateInfinite 4s infinite linear; + } + + svg { fill: var(--nt-orange); z-index: 1; + transform-origin: center center; + transform: rotate(0) translateX(-100px); + animation: rotate 4s infinite linear; + } +} + +@keyframes rotateInfinite { + 0% { + transform: translateX(-200px); + } + 2% { + transform: translateX(-200px) translateY(-20px); + } + 10% { + transform: translateX(-120px) translateY(-100px); + } + 12% { + transform: translateX(-100px) translateY(-100px); + } + 14% { + transform: translateX(-80px) translateY(-100px); + } + 25% { + transform: translateX(0) translateY(0); + } + 35% { + transform: translateX(80px) translateY(100px); + } + 37% { + transform: translateX(100px) translateY(100px); + } + 39% { + transform: translateX(120px) translateY(100px); + } + 48% { + transform: translateX(200px) translateY(20px); + } + 50% { + transform: translateX(200px); + } + 52% { + transform: translateX(200px) translateY(-20px); + } + 60% { + transform: translateX(120px) translateY(-100px); + } + 62% { + transform: translateX(100px) translateY(-100px); + } + 64% { + transform: translateX(80px) translateY(-100px); + } + 75% { + transform: translateX(0); + } + 85% { + transform: translateX(-80px) translateY(100px); + } + 87% { + transform: translateX(-100px) translateY(100px); + } + 89% { + transform: translateX(-120px) translateY(100px); + } + 98% { + transform: translateX(-200px) translateY(20px); + } + 100% { + transform: translateX(-200px); } } @keyframes rotate { - to { - transform: rotate(360deg); + 0% { + transform: rotate(0); + } + 12% { + transform: rotate(90deg); + } + 25% { + transform: rotate(140deg); + } + 37% { + transform: rotate(90deg); + } + 50% { + transform: rotate(0); + } + 62% { + transform: rotate(-90deg); + } + 75% { + transform: rotate(-140deg); + } + 87% { + transform: rotate(-90deg); + } + 100% { + transform: rotate(0); } } diff --git a/src/components/molecules/Loading/index.tsx b/src/components/molecules/Loading/index.tsx index 93147cba..2f1ce283 100644 --- a/src/components/molecules/Loading/index.tsx +++ b/src/components/molecules/Loading/index.tsx @@ -9,12 +9,16 @@ const Index = ({ noTitle = false }: LoadingProps) => {
{noTitle ? <> : }
- - +
+
+ +
+
+
+
+ +
+
); diff --git a/src/components/molecules/NaturalmenteTecnologici/index.module.scss b/src/components/molecules/NaturalmenteTecnologici/index.module.scss index d8df8957..271fcb3c 100644 --- a/src/components/molecules/NaturalmenteTecnologici/index.module.scss +++ b/src/components/molecules/NaturalmenteTecnologici/index.module.scss @@ -18,7 +18,7 @@ align-items: baseline; justify-content: center; flex-wrap: wrap; - gap: 40px; + // gap: 40px; margin: 0 20px; } @@ -27,4 +27,21 @@ flex-direction: column; align-items: center; justify-content: center; + text-align: center; + margin-bottom: 50px; + p { + margin-top: 0; + } +} + +.wrapVerticalSections { + display: flex; + width: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + @media screen and (min-width: '768px') { + flex-direction: row; + justify-content: space-evenly; + } } diff --git a/src/components/molecules/NaturalmenteTecnologici/index.tsx b/src/components/molecules/NaturalmenteTecnologici/index.tsx index c528c083..a05f3fc6 100644 --- a/src/components/molecules/NaturalmenteTecnologici/index.tsx +++ b/src/components/molecules/NaturalmenteTecnologici/index.tsx @@ -7,9 +7,14 @@ import Insects from '../../../assets/insects.svg'; import Section from '../Section'; import SingleSection from '../../atoms/SingleSection'; import HeardOn from '../../atoms/HeardOn'; -import WhenAndWhere from '../../atoms/WhenAndWhere'; +import WhenAndWhere from '../WhenAndWhere'; import { useTranslation } from 'react-i18next'; import Twitch from '../../../assets/twitch.svg'; +import VerticalSectionImage from '../../atoms/VerticalSectionImage'; +import { StaticImage } from 'gatsby-plugin-image'; +import CardImage from '../../atoms/CardImage'; +import ShowOnView from '../../atoms/ShowOnView'; +import BigPictureSection from '../../atoms/BigPictureSection'; const Index = () => { const { t } = useTranslation(); @@ -20,21 +25,21 @@ const Index = () => { text: t('WhatIsText1'), big: true, }, - { - name: t('WhatIsName2'), - text: t('WhatIsText2'), - eventbrite: true, - }, - { - name: t('WhatIsName3'), - text: t('WhatIsText3'), - eventbrite: true, - }, - { - name: t('WhatIsName4'), - text: t('WhatIsText4'), - big: true, - }, + // { + // name: t('WhatIsName2'), + // text: t('WhatIsText2'), + // eventbrite: true, + // }, + // { + // name: t('WhatIsName3'), + // text: t('WhatIsText3'), + // eventbrite: true, + // }, + // { + // name: t('WhatIsName4'), + // text: t('WhatIsText4'), + // big: true, + // }, ]; const info = [ @@ -63,13 +68,15 @@ const Index = () => { text: t('InfoText4'), svgStyle: { transform: 'rotate(94.72deg)' }, cta: t('InfoCta4'), - ctaLink: '/contattaci/art-partner', + ctaLink: '/contattaci', + ctaInternal: true, }, { title: t('InfoTitle5'), text: t('InfoText5'), cta: t('InfoCta5'), ctaLink: 'https://www.twitch.tv/syskracktv', + ctaInternal: false, ctaIcon: Twitch, }, ]; @@ -77,18 +84,88 @@ const Index = () => { return (
- {whatIs.map((item, key) => ( + + +

+ + + + + + + + + + + {/*
+ + + + + + + + + + + + + + + +
*/} + {/* {whatIs.map((item, key) => (

- ))} + ))} */}
+ - + {/* {info.map((item, key) => { return (
{ svgStyle={item.svgStyle} buttonHref={item.ctaLink} buttonTitle={item.cta} + buttonInternal={item.ctaInternal} ButtonIcon={item.ctaIcon} /> ); - })} + })} */}
); }; diff --git a/src/components/molecules/Navigation/index.tsx b/src/components/molecules/Navigation/index.tsx index b5465f9c..6ced7d3d 100644 --- a/src/components/molecules/Navigation/index.tsx +++ b/src/components/molecules/Navigation/index.tsx @@ -7,6 +7,7 @@ import { NavigationProps } from './index.types'; import Play from '../../../assets/play.svg'; import { useI18next, useTranslation } from 'gatsby-plugin-react-i18next'; import LanguagePicker from '../../atoms/LanguagePicker'; +import MultipleLinks from '../../atoms/MultipleLinks'; const Index = ({ opened, onClick }: NavigationProps) => { const [pathname, setPathname] = useState(); @@ -56,7 +57,7 @@ const Index = ({ opened, onClick }: NavigationProps) => { const button = (mobile?: boolean) => ( { const [on, setOn] = useState(false); const [ref, inView, _entry] = useInView({ - threshold: 0, - rootMargin: '10% 0px -20% 0px', + threshold: 0.5, + // rootMargin: '10% 0px -20% 0px', fallbackInView: true, triggerOnce: true, }); diff --git a/src/components/molecules/SectionImageCTA/index.tsx b/src/components/molecules/SectionImageCTA/index.tsx index ca526845..49ffd42c 100644 --- a/src/components/molecules/SectionImageCTA/index.tsx +++ b/src/components/molecules/SectionImageCTA/index.tsx @@ -15,7 +15,7 @@ const Index = ({ imageOrVideo, text, title, buttonHref, buttonText, reversed = f <>{imageOrVideo}

-