Merge pull request #51 from MikeCheek/dev

Dev

gatsby-config.ts

@@ -97,6 +97,7 @@ const config: GatsbyConfig = {
       options: {
         prettier: true, // use prettier to format JS code output (default)
         svgo: true, // use svgo to optimize SVGs (default)
+        exclude: '/src/assets/optimized/',
         svgoConfig: {
           plugins: [
             {

locales/en/index.json

@@ -2,6 +2,7 @@
   "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",
+  "BigBench": "Big Bench",
   "NewEdition": "NEW EDITION COMING",
   "NewEditionSub": "STAY TUNED",
   "Title": "INNOVAZIONE",
@@ -28,6 +29,7 @@
   "HowToReach": "How to reach us",
   "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.<br/><br/> 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.<br/><br/> The forest is also of significant environmental importance, a vast wooded area where Mediterranean vegetation and very rare floral and faunal species abound.",
+  "LocationText3": "At Bosco Coste, you'll find one of the fantastic Big Benches scattered across Italy.<br/>Part of the Big Bench Community Project, these enormous benches offer a unique vantage point to enjoy the landscape and feel closer to nature.<br/><br/>The Big Bench in Grottole is perfect for a break and for rediscovering the wonder of feeling like a kid again. As a symbol of community and sharing, it allows you to relax and enjoy the spectacular views of Basilicata. If you're looking for tranquility or breathtaking scenery, the Big Bench at Bosco Coste is a must-see!",
   "LocationCta": "Discover the location",
   "WhatHeading": "What we will do",
   "InfoTitle1": "CONCERTS",

locales/it/index.json

@@ -2,6 +2,7 @@
   "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",
+  "BigBench": "Panchina Gigante",
   "NewEdition": "NUOVA EDIZIONE IN ARRIVO",
   "NewEditionSub": "RIMANI SINTONIZZATO",
   "Title": "INNOVAZIONE",
@@ -28,6 +29,7 @@
   "HowToReach": "Come raggiungerci",
   "LocationText1": "Il festival avrà luogo tra le argillose colline lucane.<br/>Rientra nel territorio dell'oasi naturale di San Giuliano, non lontano da Matera.<br/><br/> 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.<br/><br/> 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.",
+  "LocationText3": "A Bosco Coste, trovi una delle fantastiche Panchine Giganti sparse per tutta Italia.<br/>Parte del Big Bench Community Project, queste enormi panchine offrono un punto di vista speciale sul paesaggio e ti fanno sentire più vicino alla natura.<br/><br/>La Panchina Gigante di Grottole è perfetta per una pausa e per riscoprire la meraviglia di sentirsi un po’ bambini. Simbolo di comunità e condivisione, ti permette di rilassarti e goderti le viste spettacolari della Basilicata. Se cerchi tranquillità o panorami mozzafiato, la Panchina Gigante a Bosco Coste è da non perdere!",
   "LocationCta": "Scopri la location",
   "WhatHeading": "Cosa faremo",
   "InfoTitle1": "CONCERTI",

src/components/atoms/CardImage/index.module.scss

@@ -21,13 +21,20 @@
 
 .sectionImage {
   @extend .image;
-  max-width: 80vw;
-  max-height: 30vh;
+  max-width: 60vw;
+  max-height: 40vh;
   display: flex;
   align-items: center;
   justify-content: center;
+  > * {
+    height: fit-content !important;
+  }
   video {
-    max-height: 30vh;
+    max-height: 40vh;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 15px;
   }
   @media screen and (min-width: '768px') {
     max-width: 40vw;

src/components/atoms/Seo/index.tsx

@@ -196,7 +196,7 @@ const Index = ({
 
       <Script
         id="saro"
-        defer
+        // defer
         strategy="idle"
         dangerouslySetInnerHTML={{
           __html: `(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){

src/components/atoms/WindShovel/index.module.scss

@@ -4,7 +4,7 @@
   filter: drop-shadow(-20px 10px 7px rgba(0, 0, 0, 0.25));
   overflow: visible;
   & g {
-    animation-duration: 10s;
+    animation-duration: 10s !important;
   }
   @media screen and (min-width: '768px') {
     width: 340px;
@@ -14,6 +14,6 @@
 .shovelSlower {
   @extend .shovel;
   & g {
-    animation-duration: 20s;
+    animation-duration: 20s !important;
   }
 }

src/components/molecules/WhenAndWhere/index.tsx

@@ -5,22 +5,17 @@ import * as styles from './index.module.scss';
 import SectionImageCTA from '../SectionImageCTA';
 import ShowOnView from '../../atoms/ShowOnView';
 import Button from '../../atoms/Button';
-import BoscoCoste from '../../../assets/video/bosco_coste_backward.mp4';
-import BoscoCoste1 from '../../../assets/video/pala_eolica.mp4';
 import { useTranslation } from 'react-i18next';
 import LocationMap from '../../atoms/LocationMap';
 import Badge from '../../atoms/Badge';
 import { services } from '../../../utilities/location';
 import { mapsLink } from '../../../utilities/howToReach';
 import { StaticImage } from 'gatsby-plugin-image';
+import Player from 'react-player/lazy';
+import Bench from '../../../assets/video/webm/big_bench.webm';
 
 const Index = () => {
   const { t } = useTranslation();
-  const [loadVideo, setLoadVideo] = useState<boolean>(false);
-
-  useEffect(() => {
-    setLoadVideo(true);
-  }, []);
 
   return (
     <div className={styles.whenAndWhere}>
@@ -60,7 +55,7 @@ const Index = () => {
           />
         }
       />
-      <SectionImageCTA
+      {/* <SectionImageCTA
         text={t('LocationText2')}
         buttonText={t('LocationCta')}
         buttonHref={mapsLink}
@@ -79,6 +74,14 @@ const Index = () => {
           />
         }
         reversed
+      /> */}
+      <Heading text={t('BigBench')} simple marginTop />
+      <SectionImageCTA
+        text={t('LocationText3')}
+        buttonText={t('LocationCta')}
+        buttonHref={mapsLink}
+        imageOrVideo={<Player width={700} url={Bench} muted autoPlay playing controls={false} loop playsInline />}
+        reversed
       />
     </div>
   );