Merge pull request #44 from MikeCheek/dev

Other performance improvements
MikeCheek · May 29, 2024 · ac65a40 · ac65a40
2 parents db1315b + 4f89da8
commit ac65a40
Show file tree

Hide file tree

Showing 13 changed files with 28 additions and 147 deletions.
diff --git a/src/assets/video/baldini_10s_low.mp4 b/src/assets/video/baldini_10s_low.mp4
diff --git a/src/assets/video/millenium_10s_low.mp4 b/src/assets/video/millenium_10s_low.mp4
diff --git a/src/assets/video/moddilugitrix_10s_low.mp4 b/src/assets/video/moddilugitrix_10s_low.mp4
diff --git a/src/assets/video/shorty_10s_low.mp4 b/src/assets/video/shorty_10s_low.mp4
diff --git a/src/assets/video/transplay_10s_low.mp4 b/src/assets/video/transplay_10s_low.mp4
diff --git a/src/components/atoms/BigPictureSection/index.module.scss b/src/components/atoms/BigPictureSection/index.module.scss
@@ -14,7 +14,7 @@
   text-align: center;
 
   // mix-blend-mode: soft-light;
-  h4 {
+  h3 {
     font-size: 5rem;
     text-transform: uppercase;
     margin-bottom: 5px;
@@ -33,8 +33,7 @@
     width: 40%;
     text-align: right;
     right: 4%;
-    h4 {
-      opacity: 0.2;
+    h3 {
       font-size: 10rem;
     }
 

diff --git a/src/components/atoms/BigPictureSection/index.tsx b/src/components/atoms/BigPictureSection/index.tsx
@@ -6,32 +6,6 @@ import { GatsbyImage } from 'gatsby-plugin-image';
 import Carousel from '../Carousel';
 
 const Index = ({ title, text, reverse = false, images, videos }: BigPictureSectionProps) => {
-  // let base = 0;
-  // const [offset, setOffset] = useState<number>(0);
-
-  // const [ref, inView, entry] = useInView({
-  //   threshold: 0.2,
-  //   fallbackInView: true,
-  //   triggerOnce: false,
-  // });
-
-  // const parallax = () => {
-  //   const rect = entry!.target.getBoundingClientRect();
-  //   const a = rect.top + rect.bottom;
-  //   setOffset((a / window.innerHeight) * 100);
-  // };
-
-  // useEffect(() => {
-  //   if (inView) {
-  //     base = window.scrollY;
-  //     window.addEventListener('scroll', () => parallax());
-  //   } else window.removeEventListener('scroll', () => {});
-
-  //   return window.removeEventListener('scroll', () => {});
-  // }, [inView]);
-
-  // const transform = `translateX(${reverse ? '-' : '+'}${Math.round(offset / 2)}%)`;
-
   const slides = [
     videos?.map((v, key) => (
       <video key={key} className={styles.video} height={500} muted autoPlay controls={false} loop playsInline>
@@ -56,7 +30,7 @@ const Index = ({ title, text, reverse = false, images, videos }: BigPictureSecti
   return (
     <div className={styles.wrap}>
       <ShowOnView className={reverse ? styles.wrapTextReverse : styles.wrapText}>
-        <h4 dangerouslySetInnerHTML={{ __html: title }}></h4>
+        <h3 dangerouslySetInnerHTML={{ __html: title }}></h3>
         <p dangerouslySetInnerHTML={{ __html: text ?? '' }}></p>
       </ShowOnView>
 

diff --git a/src/components/atoms/LanguagePicker/index.tsx b/src/components/atoms/LanguagePicker/index.tsx
@@ -11,7 +11,7 @@ const Index = () => {
   return (
     <div className={styles.languagePicker} onMouseLeave={() => setDropdown(false)}>
       <p onClick={() => setDropdown((v) => !v)}>
-        <Flag className={styles.flag} code={enToUk(language)} />
+        <Flag className={styles.flag} code={enToUk(language)} alt={language + ' flag'} />
         {language.toUpperCase()}
         {/* <Down width={10} height={10} /> */}
       </p>
@@ -23,7 +23,7 @@ const Index = () => {
               to={originalPath}
               language={lng}
             >
-              <Flag className={styles.flag} code={enToUk(lng)} /> {lng.toUpperCase()}
+              <Flag className={styles.flag} code={enToUk(lng)} alt={lng + ' flag'} /> {lng.toUpperCase()}
             </Link>
             {key % 2 === 0 ? <div className={styles.separator}></div> : null}
           </div>

diff --git a/src/components/atoms/VideoMasked/index.tsx b/src/components/atoms/VideoMasked/index.tsx
@@ -4,20 +4,24 @@ import * as styles from './index.module.scss';
 import BoscoCoste from '../../../assets/video/bosco_coste_forward.mp4';
 import ShowOnView from '../ShowOnView';
 
-const VideoMasked = ({}: VideoMaskedProps) => {
+const VideoMasked = ({ showOnView = false }: VideoMaskedProps) => {
   const [loadVideo, setLoadVideo] = useState<boolean>(false);
 
   useEffect(() => {
     setLoadVideo(true);
   }, []);
 
-  return (
-    <ShowOnView className={styles.videoWrap}>
-      <video height={500} muted autoPlay controls={false} loop playsInline>
-        {loadVideo ? <source src={BoscoCoste} type="video/mp4" /> : <></>}
-        Your browser doesn't support video tag
-      </video>
-    </ShowOnView>
+  const children = (
+    <video height={500} muted autoPlay controls={false} loop playsInline>
+      {loadVideo ? <source src={BoscoCoste} type="video/mp4" /> : <></>}
+      Your browser doesn't support video tag
+    </video>
+  );
+
+  return showOnView ? (
+    <ShowOnView className={styles.videoWrap}>{children}</ShowOnView>
+  ) : (
+    <div className={styles.videoWrap}>{children}</div>
   );
 };
 

diff --git a/src/components/atoms/VideoMasked/index.types.ts b/src/components/atoms/VideoMasked/index.types.ts
@@ -1,3 +1,3 @@
 export default interface VideoMaskedProps {
-
-}
+  showOnView?: boolean;
+}
diff --git a/src/components/molecules/NaturalmenteTecnologici/index.tsx b/src/components/molecules/NaturalmenteTecnologici/index.tsx
@@ -2,98 +2,26 @@ import React from 'react';
 
 import * as styles from './index.module.scss';
 import Heading from '../../atoms/Heading';
-import Bug from '../../../assets/bug.svg';
-import Insects from '../../../assets/insects.svg';
-import Section from '../Section';
-import SingleSection from '../../atoms/SingleSection';
 import HeardOn from '../../atoms/HeardOn';
 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';
 import { images as ntImages } from '../../../utilities/ntPhotos';
-import Banner from '../../atoms/Banner';
-import Shorty from '../../../assets/video/shorty_10s.mp4';
-import Moddilugitrix from '../../../assets/video/moddilugitrix_10s.mp4';
-import Baldini from '../../../assets/video/baldini_10s.mp4';
-import Millenium from '../../../assets/video/millenium_10s.mp4';
-import Transplay from '../../../assets/video/transplay_10s.mp4';
+import Shorty from '../../../assets/video/shorty_10s_low.mp4';
+import Moddilugitrix from '../../../assets/video/moddilugitrix_10s_low.mp4';
+import Baldini from '../../../assets/video/baldini_10s_low.mp4';
+import Millenium from '../../../assets/video/millenium_10s_low.mp4';
+import Transplay from '../../../assets/video/transplay_10s_low.mp4';
 import VideoMasked from '../../atoms/VideoMasked';
 
 const Index = () => {
   const { t } = useTranslation();
   const { music, activities, nature } = ntImages();
 
-  const whatIs = [
-    {
-      name: t('WhatIsName1'),
-      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,
-    // },
-  ];
-
-  const info = [
-    {
-      title: t('InfoTitle1'),
-      text: t('InfoText1'),
-      svgStyle: { transform: 'rotate(94.72deg)' },
-      // cta: 'ASSICURATI IL PASS',
-      // ctaLink: '#biglietti',
-    },
-    {
-      title: t('InfoTitle2'),
-      text: t('InfoText2'),
-      // cta: 'RISERVA IL TUO POSTO',
-      // ctaLink: '#biglietti',
-    },
-    {
-      title: t('InfoTitle3'),
-      text: t('InfoText3'),
-      // cta: 'PRENDINE PARTE',
-      // ctaLink: '#biglietti',
-      // svgStyle: { transform: 'rotateY(180deg)' },
-    },
-    {
-      title: t('InfoTitle4'),
-      text: t('InfoText4'),
-      svgStyle: { transform: 'rotate(94.72deg)' },
-      cta: t('InfoCta4'),
-      ctaLink: '/contattaci',
-      ctaInternal: true,
-    },
-    {
-      title: t('InfoTitle5'),
-      text: t('InfoText5'),
-      cta: t('InfoCta5'),
-      ctaLink: 'https://www.twitch.tv/syskracktv',
-      ctaInternal: false,
-      ctaIcon: Twitch,
-    },
-  ];
-
   return (
     <div className={styles.wrap}>
       <div className={styles.singleSectionsWrap}>
-        <Heading text={t('EventTitle')} smaller={false} simple showOnView />
+        <Heading text={t('EventTitle')} smaller={false} simple showOnView={false} />
         <div className={styles.singleSections}>
           <VideoMasked />
           <p dangerouslySetInnerHTML={{ __html: t('EventDescription') }}></p>
@@ -106,35 +34,10 @@ const Index = () => {
         />
         <BigPictureSection images={activities} title={t('Value2')} text={t('ValueText2')} reverse />
         <BigPictureSection images={nature} videos={[Transplay]} title={t('Value3')} text={t('ValueText3')} />
-        {/* {whatIs.map((item, key) => (
-          <div className={styles.singleSections} style={item.big ? {} : { maxWidth: '500px' }} key={key}>
-            <Heading text={item.name} smaller={key != 0} />
-            <SingleSection>
-              <p dangerouslySetInnerHTML={{ __html: item.text }}></p>
-            </SingleSection>
-          </div>
-        ))} */}
       </div>
       <HeardOn />
 
       <WhenAndWhere />
-      {/* <Heading text={t('WhatHeading')} />
-      {info.map((item, key) => {
-        return (
-          <Section
-            title={item.title}
-            text={item.text}
-            reversed={key % 2 == 1}
-            key={key}
-            Svg={key % 2 == 0 ? Bug : Insects}
-            svgStyle={item.svgStyle}
-            buttonHref={item.ctaLink}
-            buttonTitle={item.cta}
-            buttonInternal={item.ctaInternal}
-            ButtonIcon={item.ctaIcon}
-          />
-        );
-      })} */}
     </div>
   );
 };

diff --git a/src/components/molecules/WhenAndWhere/index.tsx b/src/components/molecules/WhenAndWhere/index.tsx
@@ -31,11 +31,11 @@ const Index = () => {
         </span>
         <LocationMap />
       </ShowOnView>
-      <div className={styles.services}>
+      <ShowOnView className={styles.services}>
         {services.map((s, key) => (
           <Badge key={key} name={s} on />
         ))}
-      </div>
+      </ShowOnView>
       {/* <ShowOnView>
         <h4 dangerouslySetInnerHTML={{ __html: t('WhereLocation') }}></h4>
         <Button text={t('HowToReach')} title={t('HowToReach')} href="/info/#come-raggiungerci" internal />

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -15,6 +15,7 @@
   font-style: normal;
   font-weight: normal;
   src: local('Alba'), url('/fonts/alba/ALBA____.woff2') format('woff2');
+  font-display: 'swap';
 }
 
 html {