Add introduction information to the website

.gitignore

@@ -70,3 +70,6 @@ pnpm-lock.yaml
 .yarn-integrity
 # semantic dist
 src/semantic/dist
+
+# IDEA
+.idea/

src/components/IntroInformation.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Button, Card } from 'semantic-ui-react';
+import { graphql, StaticQuery } from 'gatsby';
+import { getLanguage, getTranslation, metadata } from '../data/i18n';
+
+class IntroInformation extends React.Component {
+  render() {
+    const language =
+      typeof window !== 'undefined'
+        ? getLanguage(window)
+        : metadata.defaultLocale;
+    let intro_information = this.props.data.allContentfulIntroInformation.nodes.filter(
+      d => d.node_locale === language
+    )[0]; //get only the first element
+
+    let color = this.props.data.contentfulBoard.color;
+    console.log(color);
+
+    return (
+      <>
+        <div>
+          <h2>{intro_information.title}</h2>
+          <Card fluid>
+            <div>{intro_information.description.description}</div>
+            <Button
+              href={intro_information.introWebsiteUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="button"
+              style={{ backgroundColor: color, color: 'white' }}
+            >
+              {intro_information.linkToWebsiteButtonText}
+            </Button>
+          </Card>
+        </div>
+      </>
+    );
+  }
+}
+
+const introInformationQuery = graphql`
+  query introInformationQuery {
+    allContentfulIntroInformation {
+      nodes {
+        node_locale
+        title
+        linkToWebsiteButtonText
+        description {
+          description
+        }
+        introWebsiteUrl
+      }
+    }
+    contentfulBoard(current: { eq: true }) {
+      color
+    }
+  }
+`;
+
+export default props => (
+  <StaticQuery
+    query={introInformationQuery}
+    render={data => <IntroInformation data={data} {...props} />}
+  />
+);

src/components/layout/GridDryQueries.jsx

@@ -23,6 +23,9 @@ const IndexWrapper = styled.div`
   .mainPartner {
     grid-area: mainPartner;
   }
+  .introInformation {
+    grid-area: introInformation;
+  }
 
   .banner {
     display: grid;
@@ -38,6 +41,7 @@ const IndexWrapper = styled.div`
       grid-template-areas:
         'logo'
         'banner'
+        'introInformation'
         'news'
         'news'
         'drinks'
@@ -64,6 +68,7 @@ const IndexWrapper = styled.div`
       grid-template-columns: 1fr 1fr;
       grid-template-areas:
         'banner banner'
+        'introInformation introInformation'
         'news news'
         'drinks mainPartner'
         'jobs activity';
@@ -80,6 +85,7 @@ const IndexWrapper = styled.div`
       grid-template-columns: 3fr 1fr;
       grid-template-areas:
         'banner banner'
+        'news introInformation'
         'news drinks'
         'news mainPartner'
         'news jobs'

src/static-pages/index.jsx

@@ -11,6 +11,7 @@ import MainPartnerBanner from '$/components/mainpartner/Banner';
 import IndexWrapper from '$/components/layout/GridDryQueries';
 import FeaturedJobWidget from '$/components/jobs/FeaturedJobWidget';
 import ActivityWidget from '$/components/activities/ActivityWidget';
+import IntroInformation from '$/components/IntroInformation';
 
 import logo from '$/images/sticky-logo-text.svg';
 
@@ -34,6 +35,9 @@ const Index = ({ data }) => {
           <div className="news">
             <News itemsPerPage="5" />
           </div>
+          <div className="introInformation">
+            <IntroInformation />
+          </div>
           <div className="drinks">
             <Drinks />
           </div>