From 8647164413b62a8a430d8c692305b51f27daae95 Mon Sep 17 00:00:00 2001
From: Mateusz Tylka <mattyl@st.amu.edu.pl>
Date: Wed, 31 May 2023 11:00:26 +0200
Subject: [PATCH] new Landing Page Hero and some refactor

---
 src/pages/LandingPage/LandingPage.js          |   8 +-
 .../components/{ => Commercial}/Commercial.js |  14 +--
 .../components/Commercial/index.js            |   1 +
 .../LandingPage/components/{ => Csi}/Csi.js   |  58 +++++-----
 src/pages/LandingPage/components/Csi/index.js |   1 +
 src/pages/LandingPage/components/Footer.js    |  45 --------
 src/pages/LandingPage/components/Hero/Hero.js |   7 +-
 .../LandingPage/components/Motivation.js      | 101 ------------------
 .../components/Motivation/Motivation.js       |  34 ++++++
 .../components/Motivation/MotivationStyle.js  |  48 +++++++++
 .../Motivation/functions/cubeIconRender.js    |  30 ++++++
 .../components/Motivation/index.js            |   1 +
 .../components/Motivation/utils.js            |   7 ++
 .../{ => Partnerships}/Partnerships.js        |  23 +---
 .../Partnerships/PartnershipsStyle.js         |  21 ++++
 .../components/Partnerships/index.js          |   1 +
 16 files changed, 193 insertions(+), 207 deletions(-)
 rename src/pages/LandingPage/components/{ => Commercial}/Commercial.js (91%)
 create mode 100644 src/pages/LandingPage/components/Commercial/index.js
 rename src/pages/LandingPage/components/{ => Csi}/Csi.js (50%)
 create mode 100644 src/pages/LandingPage/components/Csi/index.js
 delete mode 100644 src/pages/LandingPage/components/Footer.js
 delete mode 100644 src/pages/LandingPage/components/Motivation.js
 create mode 100644 src/pages/LandingPage/components/Motivation/Motivation.js
 create mode 100644 src/pages/LandingPage/components/Motivation/MotivationStyle.js
 create mode 100644 src/pages/LandingPage/components/Motivation/functions/cubeIconRender.js
 create mode 100644 src/pages/LandingPage/components/Motivation/index.js
 create mode 100644 src/pages/LandingPage/components/Motivation/utils.js
 rename src/pages/LandingPage/components/{ => Partnerships}/Partnerships.js (54%)
 create mode 100644 src/pages/LandingPage/components/Partnerships/PartnershipsStyle.js
 create mode 100644 src/pages/LandingPage/components/Partnerships/index.js

diff --git a/src/pages/LandingPage/LandingPage.js b/src/pages/LandingPage/LandingPage.js
index dd745be..da3a89b 100644
--- a/src/pages/LandingPage/LandingPage.js
+++ b/src/pages/LandingPage/LandingPage.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { FlexColumn } from '../../utils/containers';
-import Motivation from './components/Motivation';
-import Csi from './components/Csi';
-import Commercial from './components/Commercial';
+import Motivation from './components/Motivation/Motivation';
+import Csi from './components/Csi/Csi';
+import Commercial from './components/Commercial/Commercial';
 import Hero from './components/Hero/Hero';
-import Partnerships from './components/Partnerships';
+import Partnerships from './components/Partnerships/Partnerships';
 import LandingPageStyle from './LandingPageStyle';
 // import MadeByCsi from './components/MadeByCsi/MadeByCsi';
 
diff --git a/src/pages/LandingPage/components/Commercial.js b/src/pages/LandingPage/components/Commercial/Commercial.js
similarity index 91%
rename from src/pages/LandingPage/components/Commercial.js
rename to src/pages/LandingPage/components/Commercial/Commercial.js
index 8f912cb..44f7fa3 100644
--- a/src/pages/LandingPage/components/Commercial.js
+++ b/src/pages/LandingPage/components/Commercial/Commercial.js
@@ -3,12 +3,12 @@ import {
   FlexColumn,
   FlexRow,
   ImageBackground,
-} from '../../../utils/containers';
-import { Body, H2, Medium } from '../../../utils/fonts';
-import CircleNumber from '../../../components/generic/CircleNumber';
+} from '../../../../utils/containers';
+import { Body, H2, Medium } from '../../../../utils/fonts';
+import CircleNumber from '../../../../components/generic/CircleNumber';
 import Media from 'react-media';
-import theme from '../../../utils/theme';
-import commercialImage from '../../../assets/commercial-image.svg';
+import theme from '../../../../utils/theme';
+import commercialImage from '../../../../assets/commercial-image.svg';
 
 const Commercial = () => {
   const listItemsContent = [
@@ -96,8 +96,8 @@ const Commercial = () => {
         </FlexColumn>
         <ImageBackground
           image={commercialImage}
-          width="200px"
-          height="284px"
+          width="180px"
+          height="274px"
           size="contain"
         />
       </FlexRow>
diff --git a/src/pages/LandingPage/components/Commercial/index.js b/src/pages/LandingPage/components/Commercial/index.js
new file mode 100644
index 0000000..7f77e15
--- /dev/null
+++ b/src/pages/LandingPage/components/Commercial/index.js
@@ -0,0 +1 @@
+export { default } from './Commercial';
diff --git a/src/pages/LandingPage/components/Csi.js b/src/pages/LandingPage/components/Csi/Csi.js
similarity index 50%
rename from src/pages/LandingPage/components/Csi.js
rename to src/pages/LandingPage/components/Csi/Csi.js
index 6caea7b..38e7bcb 100644
--- a/src/pages/LandingPage/components/Csi.js
+++ b/src/pages/LandingPage/components/Csi/Csi.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import { FlexColumn, FlexRow, Svg } from '../../../utils/containers';
-import { Body, H2, Medium } from '../../../utils/fonts';
+import { FlexColumn, FlexRow, Svg } from '../../../../utils/containers';
+import { Body, H2, Medium } from '../../../../utils/fonts';
 import Media from 'react-media';
-import theme from '../../../utils/theme';
-import csiLogo from '../../../assets/csi_full_logo.svg';
+import theme from '../../../../utils/theme';
+import csiLogo from '../../../../assets/csi_logo.svg';
 
 const Csi = () => {
   const mobileRender = () => {
@@ -37,33 +37,31 @@ const Csi = () => {
 
   const desktopRender = () => {
     return (
-      <FlexRow gap="46px">
-        <FlexColumn as="section" alignmentX="flex-start" maxWidth="490px">
-          <H2 as="h2" margin="0 0 48px 0">
-            Center for Artificial Intelligence (C4AI)
-          </H2>
-          <Body as="p" margin="0 0 24px 0">
-            <Medium as="span" display="inline">
-              Gonito.net
-            </Medium>{' '}
-            belongs to the
-            <Medium as="span" display="inline">
-              &nbsp;Center for Artificial Intelligence (C4AI)&nbsp;
-            </Medium>
-            at Adam Mickiewicz University (UAM) which conducts research on the
-            development of artificial intelligence, carries out scientific and
-            research and development projects, integrates the research of
-            scientists from various departments of Adam Mickiewicz University
-            and outside it - from leading scientific centers in Poland and
-            abroad as well as those employed in business entities.
-          </Body>
-          <Medium as="p">
-            C4AI also cooperates with business entities in creating new
-            solutions to be implemented in enterprises.
+      <FlexColumn as="section" alignmentX="flex-start" maxWidth="640px">
+        <FlexRow margin="0 0 48px 0">
+          <H2 as="h2">Center for Artificial Intelligence (C4AI)</H2>
+          <Svg src={csiLogo} size="contain" width="230px" height="80px" />
+        </FlexRow>
+        <Body as="p" margin="0 0 24px 0">
+          <Medium as="span" display="inline">
+            Gonito.net
+          </Medium>{' '}
+          belongs to the
+          <Medium as="span" display="inline">
+            &nbsp;Center for Artificial Intelligence (C4AI)&nbsp;
           </Medium>
-        </FlexColumn>
-        <Svg src={csiLogo} width="400px" height="242px" />
-      </FlexRow>
+          at Adam Mickiewicz University (UAM) which conducts research on the
+          development of artificial intelligence, carries out scientific and
+          research and development projects, integrates the research of
+          scientists from various departments of Adam Mickiewicz University and
+          outside it - from leading scientific centers in Poland and abroad as
+          well as those employed in business entities.
+        </Body>
+        <Medium as="p">
+          C4AI also cooperates with business entities in creating new solutions
+          to be implemented in enterprises.
+        </Medium>
+      </FlexColumn>
     );
   };
 
diff --git a/src/pages/LandingPage/components/Csi/index.js b/src/pages/LandingPage/components/Csi/index.js
new file mode 100644
index 0000000..f97b080
--- /dev/null
+++ b/src/pages/LandingPage/components/Csi/index.js
@@ -0,0 +1 @@
+export { default } from './Csi';
diff --git a/src/pages/LandingPage/components/Footer.js b/src/pages/LandingPage/components/Footer.js
deleted file mode 100644
index 3a213a8..0000000
--- a/src/pages/LandingPage/components/Footer.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import {Container, FlexRow} from '../../utils/containers';
-import styled from 'styled-components';
-import {Medium} from '../../utils/fonts';
-import {CSI_LINK} from '../../utils/globals';
-
-const FooterStyle = styled(FlexRow)`
-  width: 100%;
-  height: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${({theme}) => theme.colors.green};
-  z-index: 1000;
-  position: relative;
-
-  p, a {
-    color: ${({theme}) => theme.colors.white}
-  }
-
-  a {
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  @media (min-width: ${({theme}) => theme.overMobile}) {
-    height: 72px;
-  }
-`;
-
-const Footer = () => {
-    return (
-        <FooterStyle as='footer'>
-            <Medium as='p'>
-                Read more about&nbsp;
-                <Container as='a' display='inline' target='_blank'
-                           href={CSI_LINK}>
-                    CSI
-                </Container>
-            </Medium>
-        </FooterStyle>
-    );
-};
-
-export default Footer;
\ No newline at end of file
diff --git a/src/pages/LandingPage/components/Hero/Hero.js b/src/pages/LandingPage/components/Hero/Hero.js
index 8f28e3b..a1ed07f 100644
--- a/src/pages/LandingPage/components/Hero/Hero.js
+++ b/src/pages/LandingPage/components/Hero/Hero.js
@@ -11,7 +11,12 @@ import HeroStyle from './HeroStyle';
 const Hero = (props) => {
   const mobileRender = () => {
     return (
-      <FlexColumn alignmentX="flex-start" gap="24px" maxWidth="452px">
+      <FlexColumn
+        alignmentX="flex-start"
+        gap="24px"
+        margin="80px 0 48px 0"
+        maxWidth="452px"
+      >
         <H1 as="h1">
           Welcome to
           <Container display="inline" color={theme.colors.green}>
diff --git a/src/pages/LandingPage/components/Motivation.js b/src/pages/LandingPage/components/Motivation.js
deleted file mode 100644
index 2becbe3..0000000
--- a/src/pages/LandingPage/components/Motivation.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from 'react';
-import {
-  FlexColumn,
-  FlexRow,
-  ImageBackground,
-  Svg,
-} from '../../../utils/containers';
-import { Body, H2 } from '../../../utils/fonts';
-import cubeIcon from '../../../assets/cube_ico.svg';
-import theme from '../../../utils/theme';
-import Media from 'react-media';
-import ellipse from '../../../assets/ellipse.svg';
-
-const Motivation = () => {
-  const content = [
-    'Explore interesting solutions to problems using AI',
-    'Train by solving our challenges',
-    'Participate in competitions with commercial challenges',
-  ];
-
-  const mobileRender = () => {
-    return (
-      <FlexColumn as="section" alignmentX="flex-start" gap="24px" width="100%">
-        <H2 as="h2">Motivation</H2>
-
-        <FlexColumn as="ul" gap="16px" alignmentX="flex-start">
-          {content.map((paragraph, index) => {
-            return (
-              <FlexRow
-                key={`motivation-${index}`}
-                as="li"
-                gap="12px"
-                alignmentX="flex-start"
-                alignmentY="flex-start"
-              >
-                <Svg
-                  src={cubeIcon}
-                  width="14px"
-                  height="14px"
-                  margin="4px 0 0 0"
-                  backgroundColor={theme.colors.green}
-                />
-                <Body as="p" width="90%">
-                  {paragraph}
-                </Body>
-              </FlexRow>
-            );
-          })}
-        </FlexColumn>
-      </FlexColumn>
-    );
-  };
-
-  const desktopRender = () => {
-    return (
-      <ImageBackground
-        as="section"
-        image={ellipse}
-        gap="48px"
-        width="612px"
-        height="458px"
-      >
-        <H2 as="h2">Motivation</H2>
-
-        <FlexColumn as="ul" gap="22px" alignmentX="flex-start">
-          {content.map((paragraph, index) => {
-            return (
-              <FlexRow
-                key={`motivation-${index}`}
-                as="li"
-                gap="16px"
-                alignmentY="flex-start"
-              >
-                <Svg
-                  src={cubeIcon}
-                  width="20px"
-                  height="20px"
-                  size="cover"
-                  margin="2px 0 0 0"
-                  backgroundColor={theme.colors.green}
-                />
-                <Body as="p" maxWidth="380px">
-                  {paragraph}
-                </Body>
-              </FlexRow>
-            );
-          })}
-        </FlexColumn>
-      </ImageBackground>
-    );
-  };
-
-  return (
-    <>
-      <Media query={theme.mobile}>{mobileRender()}</Media>
-      <Media query={theme.desktop}>{desktopRender()}</Media>
-    </>
-  );
-};
-
-export default Motivation;
diff --git a/src/pages/LandingPage/components/Motivation/Motivation.js b/src/pages/LandingPage/components/Motivation/Motivation.js
new file mode 100644
index 0000000..4eade75
--- /dev/null
+++ b/src/pages/LandingPage/components/Motivation/Motivation.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { FlexColumn, FlexRow } from '../../../../utils/containers';
+import { Body, H2 } from '../../../../utils/fonts';
+import cubeIconRender from './functions/cubeIconRender';
+import ellipse from '../../../../assets/ellipse.svg';
+import MotivationStyle from './MotivationStyle';
+import { IS_MOBILE } from '../../../../utils/globals';
+import { MOTIVATION__CONTENT } from './utils';
+
+const Motivation = () => {
+  return (
+    <MotivationStyle as="section" image={IS_MOBILE() ? null : ellipse}>
+      <H2 as="h2">Motivation</H2>
+      <FlexColumn as="ul" className="MotivationStyle__list">
+        {MOTIVATION__CONTENT.map((paragraph, index) => {
+          return (
+            <FlexRow
+              key={`motivation-${index}`}
+              as="li"
+              className="MotivationStyle__item"
+            >
+              {cubeIconRender()}
+              <Body as="p" className="MotivationStyle__paragraph">
+                {paragraph}
+              </Body>
+            </FlexRow>
+          );
+        })}
+      </FlexColumn>
+    </MotivationStyle>
+  );
+};
+
+export default Motivation;
diff --git a/src/pages/LandingPage/components/Motivation/MotivationStyle.js b/src/pages/LandingPage/components/Motivation/MotivationStyle.js
new file mode 100644
index 0000000..ca54a34
--- /dev/null
+++ b/src/pages/LandingPage/components/Motivation/MotivationStyle.js
@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+// import { ImageBackground } from '../../../../utils/containers';
+import { ImageBackground } from '../../../../utils/containers';
+
+const MotivationStyle = styled(ImageBackground)`
+  align-items: flex-start;
+  gap: 24px;
+  width: 100%;
+
+  .MotivationStyle__list {
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  .MotivationStyle__item {
+    gap: 12px;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .MotivationStyle__paragraph {
+    width: 90%;
+  }
+
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
+    gap: 48px;
+    width: 612px;
+    height: 458px;
+    align-items: center;
+
+    .MotivationStyle__list {
+      gap: 22px;
+    }
+
+    .MotivationStyle__item {
+      gap: 16px;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    .MotivationStyle__paragraph {
+      width: auto;
+      max-width: 380px;
+    }
+  }
+`;
+
+export default MotivationStyle;
diff --git a/src/pages/LandingPage/components/Motivation/functions/cubeIconRender.js b/src/pages/LandingPage/components/Motivation/functions/cubeIconRender.js
new file mode 100644
index 0000000..272c5fe
--- /dev/null
+++ b/src/pages/LandingPage/components/Motivation/functions/cubeIconRender.js
@@ -0,0 +1,30 @@
+import cubeIcon from '../../../../../assets/cube_ico.svg';
+import theme from '../../../../../utils/theme';
+import { IS_MOBILE } from '../../../../../utils/globals';
+import { Svg } from '../../../../../utils/containers';
+
+const cubeIconRender = () => {
+  if (IS_MOBILE()) {
+    return (
+      <Svg
+        src={cubeIcon}
+        width="14px"
+        height="14px"
+        margin="4px 0 0 0"
+        backgroundColor={theme.colors.green}
+      />
+    );
+  }
+  return (
+    <Svg
+      src={cubeIcon}
+      width="20px"
+      height="20px"
+      size="cover"
+      margin="2px 0 0 0"
+      backgroundColor={theme.colors.green}
+    />
+  );
+};
+
+export default cubeIconRender;
diff --git a/src/pages/LandingPage/components/Motivation/index.js b/src/pages/LandingPage/components/Motivation/index.js
new file mode 100644
index 0000000..28f3675
--- /dev/null
+++ b/src/pages/LandingPage/components/Motivation/index.js
@@ -0,0 +1 @@
+export { default } from './Motivation';
diff --git a/src/pages/LandingPage/components/Motivation/utils.js b/src/pages/LandingPage/components/Motivation/utils.js
new file mode 100644
index 0000000..e1be6a6
--- /dev/null
+++ b/src/pages/LandingPage/components/Motivation/utils.js
@@ -0,0 +1,7 @@
+const MOTIVATION__CONTENT = [
+  'Explore interesting solutions to problems using AI',
+  'Train by solving our challenges',
+  'Participate in competitions with commercial challenges',
+];
+
+export { MOTIVATION__CONTENT };
diff --git a/src/pages/LandingPage/components/Partnerships.js b/src/pages/LandingPage/components/Partnerships/Partnerships.js
similarity index 54%
rename from src/pages/LandingPage/components/Partnerships.js
rename to src/pages/LandingPage/components/Partnerships/Partnerships.js
index e3f7047..ea5a9d8 100644
--- a/src/pages/LandingPage/components/Partnerships.js
+++ b/src/pages/LandingPage/components/Partnerships/Partnerships.js
@@ -1,23 +1,8 @@
 import React from 'react';
-import { FlexColumn, Grid } from '../../../utils/containers';
-import { H2 } from '../../../utils/fonts';
-import Placeholder from '../../../components/generic/Placeholder';
-import styled from 'styled-components';
-
-const PartnershipsStyle = styled(FlexColumn)`
-  justify-content: flex-start;
-  gap: 32px;
-
-  @media (min-width: ${({ theme }) => theme.overMobile}) {
-    gap: 64px;
-
-    .grid {
-      grid-template-rows: 1fr 1fr;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-gap: 64px;
-    }
-  }
-`;
+import { FlexColumn, Grid } from '../../../../utils/containers';
+import { H2 } from '../../../../utils/fonts';
+import Placeholder from '../../../../components/generic/Placeholder';
+import PartnershipsStyle from './PartnershipsStyle';
 
 const Partnerships = () => {
   return (
diff --git a/src/pages/LandingPage/components/Partnerships/PartnershipsStyle.js b/src/pages/LandingPage/components/Partnerships/PartnershipsStyle.js
new file mode 100644
index 0000000..3ae84ac
--- /dev/null
+++ b/src/pages/LandingPage/components/Partnerships/PartnershipsStyle.js
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { FlexColumn } from '../../../../utils/containers';
+
+const PartnershipsStyle = styled(FlexColumn)`
+  justify-content: flex-start;
+  gap: 32px;
+  margin: 0 0 48px 0;
+
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
+    gap: 64px;
+    margin: 0;
+
+    .grid {
+      grid-template-rows: 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-gap: 64px;
+    }
+  }
+`;
+
+export default PartnershipsStyle;
diff --git a/src/pages/LandingPage/components/Partnerships/index.js b/src/pages/LandingPage/components/Partnerships/index.js
new file mode 100644
index 0000000..2dabcc4
--- /dev/null
+++ b/src/pages/LandingPage/components/Partnerships/index.js
@@ -0,0 +1 @@
+export { default } from './Partnerships';