FTSRG30

package.json

@@ -41,6 +41,7 @@
     "academicons": "https://github.com/jpswalsh/academicons#v1.9.3",
     "babel-jest": "29.5.0",
     "bootstrap": "5.2.3",
+    "canvas-confetti": "^1.9.3",
     "classnames": "2.3.2",
     "dotenv": "16.0.3",
     "fs-extra": "11.1.1",
@@ -93,6 +94,7 @@
     "@types/react-dom": "18.2.1",
     "@types/react-helmet": "6.1.6",
     "@types/react-slick": "0.23.10",
+    "@types/canvas-confetti": "^1.6.4",
     "@typescript-eslint/eslint-plugin": "5.59.2",
     "@typescript-eslint/parser": "5.59.2",
     "babel-preset-gatsby": "3.9.0",

src/components/ftsrg30page-components/BannerSection.tsx

@@ -0,0 +1,126 @@
+import { StaticImage } from 'gatsby-plugin-image'
+import { useI18next } from 'gatsby-plugin-react-i18next'
+import React, { useEffect, useRef } from 'react'
+import { Col, Container, Row } from 'react-bootstrap'
+import { useDeviceSelectors } from 'react-device-detect'
+import useIsClient from '~hooks/useIsClient'
+import confetti from 'canvas-confetti'
+
+const BannerSection: React.FC = () => {
+  const { t, language } = useI18next()
+  const { isClient, key } = useIsClient()
+  const confettiCanvas = useRef() as React.MutableRefObject<HTMLCanvasElement>
+
+  const isMobile = isClient ? (useDeviceSelectors(window.navigator.userAgent)[0].isMobile as boolean) : false
+
+  function confettiFrame(myConfetti: confetti.CreateTypes) {
+    window.requestAnimationFrame(() => {
+      // launch a few confetti from the left edge
+      myConfetti({
+        particleCount: 40,
+        angle: 30,
+        spread: 55,
+        decay: 0.94,
+        origin: { x: 0, y: 0.7 }
+      })
+      // and launch a few from the right edge
+      myConfetti({
+        particleCount: 40,
+        angle: 150,
+        spread: 55,
+        decay: 0.94,
+        origin: { x: 1, y: 0.7 }
+      })
+    })
+  }
+
+  useEffect(() => {
+    const myConfetti = confetti.create(confettiCanvas.current, {
+      resize: true
+    })
+    const confettiIdx = setInterval(() => confettiFrame(myConfetti), 2500)
+    return () => {
+      clearInterval(confettiIdx)
+    }
+  })
+
+  return (
+    <div id="banner" key={key}>
+      <div className="overlay" />
+      {isClient && !isMobile && (
+        <video
+          playsInline
+          autoPlay
+          muted
+          loop
+          preload="none"
+          style={{ display: 'none' }}
+          onCanPlayThrough={(e) => {
+            e.currentTarget.style.display = ''
+          }}
+        >
+          <source src="/images/drone-banner.mp4" type="video/mp4" />
+        </video>
+      )}
+      <canvas
+        width={1000}
+        height={600}
+        ref={confettiCanvas}
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          minWidth: '100%',
+          minHeight: '100%',
+          width: 'auto',
+          height: 'auto',
+          zIndex: 2,
+          transform: 'translateX(-50%) translateY(-50%)'
+        }}
+      />
+      <div className="intro intro-section background-4">
+        <StaticImage src="../../../static/images/drone-banner-poster.jpg" alt="..." layout="fullWidth" className="bannerImage" />
+        <Container>
+          <Row className="align-items-center">
+            <Col lg="12" className="mx-auto text-center">
+              <StaticImage
+                src="../../../static/images/ftsrg-large-white.png"
+                placeholder="none"
+                width={400}
+                alt={t('commons.ftsrgFullName')}
+                className="intro-img mx-auto"
+              />
+              <h1>
+                {language === 'hu' && (
+                  <>
+                    <span style={{ fontSize: '5rem' }}>30 éves</span>
+                    <br />
+                    <span>a Kritikus Rendszerek Kutatócsoport</span>
+                  </>
+                )}
+                {language === 'en' && (
+                  <>
+                    <span style={{ fontSize: '5rem' }}>30 years</span>
+                    <br />
+                    <span>of the Critical Systems Research Group</span>
+                  </>
+                )}
+              </h1>
+              <hr className="mx-5" />
+              <h2 className="font-italic">
+                {language === 'hu' && <span>Ünnepelj és emlékezz velünk július 4-én</span>}
+                {language === 'en' && (
+                  <span>
+                    Celebrate and reminisce with us on July 4<sup>th</sup>
+                  </span>
+                )}
+              </h2>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </div>
+  )
+}
+
+export default BannerSection

src/components/ftsrg30page-components/EducationSection.tsx

@@ -0,0 +1,31 @@
+import { useI18next } from 'gatsby-plugin-react-i18next'
+import React from 'react'
+import { Container } from 'react-bootstrap'
+import EducationCounters from '~components/indexpage-components/EducationCounters'
+import { SpecializationsCarousel } from '~components/carousels'
+import { SpecializationProps } from '~utils/props'
+
+type Props = {
+  specializations: Array<SpecializationProps>
+}
+
+const EducationSection: React.FC<Props> = ({ specializations }) => {
+  const { t } = useI18next()
+
+  return (
+    <div id="education" className="site-section">
+      <Container>
+        <div className="mb-5 text-center">
+          <h2 className="section-title-underline">
+            <span>{t('home.education.title')}</span>
+          </h2>
+        </div>
+        <EducationCounters />
+
+        <SpecializationsCarousel nodes={specializations} />
+      </Container>
+    </div>
+  )
+}
+
+export default EducationSection

src/components/ftsrg30page-components/EventsSection.tsx

@@ -0,0 +1,26 @@
+import { useI18next } from 'gatsby-plugin-react-i18next'
+import React from 'react'
+import { Container } from 'react-bootstrap'
+import { EventsCarousel } from '~components/carousels'
+import { EventProps } from '~utils/props'
+
+type Props = {
+  events: Array<EventProps>
+}
+
+const EventsSection: React.FC<Props> = ({ events }) => {
+  const { t } = useI18next()
+
+  return (
+    <div id="events" className="site-section">
+      <Container>
+        <h2 className="section-title-underline mb-5">
+          <span>{t('research.events.title')}</span>
+        </h2>
+        <EventsCarousel nodes={events} />
+      </Container>
+    </div>
+  )
+}
+
+export default EventsSection

src/components/ftsrg30page-components/InvitationSection.tsx

@@ -0,0 +1,64 @@
+import { useI18next } from 'gatsby-plugin-react-i18next'
+import React from 'react'
+import { Col, Row } from 'react-bootstrap'
+import { CgPerformance } from 'react-icons/cg'
+import { FaBug } from 'react-icons/fa'
+import { VscRocket } from 'react-icons/vsc'
+import Hero from '~components/Hero'
+import { ImageDataLike, StaticImage } from 'gatsby-plugin-image'
+
+const compentencesData = [
+  {
+    icon: <VscRocket size="3.75rem" />,
+    title: 'home.competences.c1.title',
+    desc: 'home.competences.c1.desc'
+  },
+  {
+    icon: <FaBug size="3.65rem" />,
+    title: 'home.competences.c2.title',
+    desc: 'home.competences.c2.desc'
+  },
+  {
+    icon: <CgPerformance size="4rem" />,
+    title: 'home.competences.c3.title',
+    desc: 'home.competences.c3.desc'
+  }
+]
+
+type Props = {
+}
+
+const InvitationSection: React.FC<Props> = ({}) => {
+  const { t, language } = useI18next()
+
+  return (
+    <Hero id="invitation">
+      <Row>
+        <Col lg={6} className="order-1 order-lg-2 mb-4 mb-lg-0">
+          <StaticImage
+            src="../../../static/images/members2024.jpg"
+            className="img-fluid"
+            layout="fullWidth"
+            alt={language === 'hu' ? 'A kutatócsoport' : 'The Research Group'}
+          />
+        </Col>
+        <Col lg={5} className="me-auto align-self-center order-2 order-lg-1">
+          <h2 className="section-title-underline style-2 mb-5">
+            {language === 'hu' && <span>Meghívó</span>}
+            {language === 'en' && <span>Invitation</span>}
+          </h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec eleifend lectus. Fusce sit amet justo eu elit semper
+            efficitur vitae ac tellus. Integer elit enim, porttitor et pellentesque rutrum, suscipit sit amet tortor. Praesent eu lectus
+            aliquet, ultrices ante a, blandit ipsum. In sagittis accumsan sem. Proin hendrerit porta eros, id sollicitudin diam laoreet
+            vitae. Nunc dictum nisl dui, non efficitur arcu sodales eget. Aenean volutpat, elit id ultricies luctus, dolor dolor congue
+            ipsum, vitae porttitor ligula felis non lectus. Nullam iaculis luctus libero in eleifend. Cras vitae lectus tortor. Phasellus
+            est mauris, egestas eu lacinia quis, sodales a enim.
+          </p>
+        </Col>
+      </Row>
+    </Hero>
+  )
+}
+
+export default InvitationSection

src/components/ftsrg30page-components/ProgramSection.tsx

@@ -0,0 +1,27 @@
+import { useI18next } from 'gatsby-plugin-react-i18next'
+import React from 'react'
+import { Container } from 'react-bootstrap'
+
+type Props = NonNullable<unknown>
+
+const ProgramSection: React.FC<Props> = () => {
+  const { t, language } = useI18next()
+
+  return (
+    <div id="program" className="site-section">
+      <Container>
+        <div className="mb-5 text-center">
+          <h2 className="section-title-underline">
+            {language === 'hu' && <span>Program és regisztráció</span>}
+            {language === 'en' && <span>Program and Registration</span>}
+          </h2>
+        </div>
+        <a className="btn btn-primary rounded-0 px-4" href="https://google.com">
+          Regisztráció
+        </a>
+      </Container>
+    </div>
+  )
+}
+
+export default ProgramSection