Landing page on desktop

src/assets/commercial-image.svg

@@ -0,0 +1,4 @@
+<svg width="200" height="284" viewBox="0 0 200 284" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M198.714 99.3977C197.811 94.7613 194.442 91.5 190.586 91.5H155.574C155.658 86.1504 155.612 81.3164 155.52 77.3117C155.366 69.8566 150.468 64 144.425 64H55.6439C49.6001 64 44.7026 69.8566 44.5289 77.3117C44.1468 81.3164 44.39 86.1504 44.4942 91.5H9.46816C5.61266 91.5 2.27019 94.7613 1.35841 99.3977C1.07637 100.859 -5.45714 135.844 12.8756 169.66C25.8801 193.645 47.8182 210.493 78.0023 220.105C84.4976 222.17 88.9123 229.584 88.9123 237.882C88.9193 248.121 82.1461 256.5 73.8446 256.5H72.2468C63.0388 256.5 55.5779 265.734 55.5779 277.125C55.5779 280.922 58.0659 284 60.8227 284H138.315C141.384 284 143.56 280.922 143.56 277.125C143.56 265.734 136.099 256.5 126.891 256.5H125.278C116.99 256.5 110.217 248.121 110.217 237.873C110.217 229.576 114.632 222.159 121.127 220.097C151.332 210.498 173.263 193.65 186.254 169.652C205.522 135.844 198.992 100.859 198.714 99.3977ZM26.8874 158.445C17.1826 140.742 16.3282 122.309 16.804 112.125H44.7269C46.5883 137.743 51.7953 168.457 64.7581 193.379C47.7245 185 35.0465 173.312 26.8874 158.445ZM173.185 158.445C165.043 173.312 152.365 184.979 135.324 193.345C148.28 168.457 153.49 137.734 155.331 112.125H183.254C183.431 122.309 182.875 140.785 173.185 158.445Z" fill="#343434"/>
+<path d="M108 12H92L86.075 3.11C85.1875 1.78 86.1375 0 87.7375 0H112.263C113.862 0 114.812 1.78 113.925 3.11L108 12ZM92 16H108C108.475 16.3125 109.013 16.6625 109.513 17.05C116.713 21.5875 132 31.3625 132 52C132 58.625 126.625 64 120 64H80C73.3725 64 68 58.625 68 52C68 31.3625 83.2875 21.5875 90.375 17.05C90.9875 16.6625 91.525 16.3125 92 16ZM102.513 28C102.513 26.6125 101.388 25.4875 99.8875 25.4875C98.6125 25.4875 97.4875 26.6125 97.4875 28V28.75C96.7875 28.9 96.0125 29.1125 95.5 29.3875C93.6375 30.2375 92.0125 31.8125 91.6125 34.1C91.3875 35.375 91.5125 36.6125 92.0375 37.725C92.5625 38.825 93.375 39.6 94.2 40.1625C95.65 41.15 97.5625 41.725 99.025 42.1625L99.3 42.2375C101.05 42.775 102.225 43.1625 102.963 43.7C103.275 43.925 103.388 44.1 103.425 44.2125C103.475 44.3125 103.55 44.5375 103.463 45.0375C103.388 45.475 103.15 45.85 102.463 46.1375C101.7 46.4625 100.462 46.625 98.8625 46.375C98.1125 46.25 96.775 45.8 95.5875 45.4C95.3125 45.3 95.0375 45.2125 94.7875 45.125C93.475 44.6875 92.0625 45.4 91.625 46.7125C91.1875 48.025 91.9 49.4375 93.2125 49.7625C93.3625 49.925 93.55 49.9875 93.7625 50.0625C94.6375 50.4 96.3 50.925 97.4875 51.2V52C97.4875 53.3875 98.6125 54.5125 99.8875 54.5125C101.388 54.5125 102.513 53.3875 102.513 52V51.3125C103.175 51.1875 103.825 50.8875 104.425 50.7375C106.4 49.9 107.975 48.275 108.388 45.9C108.612 44.6 108.513 43.35 108.013 42.2125C107.525 41.0875 106.738 40.2625 105.9 39.6625C104.388 38.55 102.362 37.95 100.85 37.4875L100.638 37.4625C98.975 36.925 97.775 36.55 97.0125 36.025C96.6875 35.8 96.5875 35.65 96.5625 35.5875C96.5375 35.5375 96.4625 35.3875 96.5375 34.9625C96.5875 34.7125 96.775 34.3 97.5625 33.95C98.2625 33.5875 99.6125 33.3875 101.138 33.5125C101.688 33.7125 103.375 34.0375 103.862 34.1625C105.188 34.525 106.562 33.725 106.912 32.3875C107.275 31.0625 106.475 29.6875 105.138 29.3375C104.588 29.1875 103.338 28.9375 102.513 28.7875V28Z" fill="#1B998B"/>
+</svg>

src/components/elements/CircleNumber.js

@@ -14,6 +14,12 @@ const CircleNumberStyle = styled(Container)`
   font-weight: 500;
   width: 24px;
   height: 24px;
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    width: 36px;
+    height: 36px;
+    font-size: 22px;
+  }
 `
 
 const CircleNumber = (props) => {

src/components/sections/Commercial.js

@@ -1,7 +1,10 @@
 import React from "react";
-import {FlexColumn, FlexRow} from "../../utils/containers";
+import {FlexColumn, FlexRow, ImageBackground} from "../../utils/containers";
 import {Body, H2, Medium} from "../../utils/fonts";
 import CircleNumber from "../elements/CircleNumber";
+import Media from "react-media";
+import theme from "../../utils/theme";
+import commercialImage from '../../assets/commercial-image.svg';
 
 const Commercial = () => {
     const listItemsContent = [
@@ -11,16 +14,18 @@ const Commercial = () => {
         'The company appropriately rewards users who have contributed to the required outcome',
     ];
 
+    const mobileRender = () => {
         return (
             <FlexColumn as='section' alignmentX='flex-start'>
                 <H2 as='h2' margin='0 0 24px 0'>
-                Commercial challanges
+                    Commercial challenges
                 </H2>
                 <FlexColumn gap='20px'>
                     <Body as='p'>
-                    The artificial intelligence center works with companies by accepting machine learning challenges
+                        The artificial intelligence center works with companies by accepting
-                    from them that are available to solve on Gonito. Each commercial challenge is properly scored which
+                        machine learning challenges from them that are available to solve on Gonito.
-                    translates into an award for solving it according to the client's requirements.
+                        Each commercial challenge is properly scored which translates into an award
+                        for solving it according to the client's requirements.
                     </Body>
                     <FlexColumn as='ul' gap='16px' alignmentX='flex-start'>
                         {
@@ -37,12 +42,64 @@ const Commercial = () => {
                         }
                     </FlexColumn>
                     <Body as='p'>
-                    Open challenges can allow you to find the right people to work with. Find a challenge for your team
+                        Open challenges can allow you to find the right people to work with.
-                    and take it on!
+                        Find a challenge for your team and take it on!
                     </Body>
                 </FlexColumn>
             </FlexColumn>
         );
+    };
+
+    const desktopRender = () => {
+        return (
+            <FlexRow gap='46px'>
+                <FlexColumn as='section' alignmentX='flex-start' maxWidth='490px'>
+                    <H2 as='h2' margin='0 0 48px 0'>
+                        Commercial challenges
+                    </H2>
+                    <FlexColumn gap='32px'>
+                        <Body as='p'>
+                            The artificial intelligence center works with companies by accepting
+                            machine learning challenges from them that are available to solve on Gonito.
+                            Each commercial challenge is properly scored which translates into an award
+                            for solving it according to the client's requirements.
+                        </Body>
+                        <FlexColumn as='ul' gap='24px' alignmentX='flex-start'>
+                            {
+                                listItemsContent.map((item, index) => {
+                                    return (
+                                        <FlexRow key={`commercial-item-${index}`} width='100%' gap='16px'>
+                                            <CircleNumber number={index + 1}/>
+                                            <Medium width='80%' as='li'>
+                                                {item}
+                                            </Medium>
+                                        </FlexRow>
+                                    );
+                                })
+                            }
+                        </FlexColumn>
+                        <Body as='p'>
+                            Open challenges can allow you to find the right people to work with.
+                            Find a challenge for your team and take it on!
+                        </Body>
+                    </FlexColumn>
+                </FlexColumn>
+                <ImageBackground image={commercialImage} width='200px' height='284px' size='contain'/>
+            </FlexRow>
+
+        );
+    };
+
+    return (
+        <>
+            <Media query={theme.mobile}>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
+        </>
+    );
 }
 
 export default Commercial;

src/components/sections/Csi.js

@@ -1,8 +1,12 @@
 import React from "react";
-import {FlexColumn} from "../../utils/containers";
+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 uamLogo from '../../assets/uam-logo.svg';
 
 const Csi = () => {
+    const mobileRender = () => {
         return (
             <FlexColumn as='section' alignmentX='flex-start'>
                 <H2 as='h2' margin='0 0 24px 0'>
@@ -17,10 +21,50 @@ const Csi = () => {
                     scientific centers in Poland and abroad as well as those employed in business entities.
                 </Body>
                 <Medium as='p'>
-                CSI also cooperates with business entities in creating new solutions to be implemented in enterprises.
+                    CSI also cooperates with business entities in creating new solutions to be implemented in
+                    enterprises.
                 </Medium>
             </FlexColumn>
         );
+    }
+
+    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
+                    </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;Artificial Intelligence Centre (CSI)&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'>
+                        CSI also cooperates with business entities in creating new solutions to be implemented in
+                        enterprises.
+                    </Medium>
+                </FlexColumn>
+                <Svg src={uamLogo} width='200px' height='242px' size='contain'/>
+            </FlexRow>
+        );
+    }
+
+    return (
+        <>
+            <Media query={theme.mobile}>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
+        </>
+    );
 }
 
 export default Csi;

src/components/sections/Partnerships.js

@@ -2,15 +2,31 @@ import React from "react";
 import {FlexColumn, Grid} from "../../utils/containers";
 import {H2} from "../../utils/fonts";
 import Placeholder from "../elements/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;
+      grid-gap: 64px;
+    }
+  }
+`;
 
 const Partnerships = () => {
     return (
-        <FlexColumn as='section' alignmentX='flex-start' gap='32px'>
+        <PartnershipsStyle as='section'>
             <H2 as='h2'>
                 Our partnerships
             </H2>
             <FlexColumn width='100%'>
-                <Grid gridGap='32px 0'>
+                <Grid className='grid' gridGap='32px 0'>
                     <Placeholder>
                         1
                     </Placeholder>
@@ -25,7 +41,7 @@ const Partnerships = () => {
                     </Placeholder>
                 </Grid>
             </FlexColumn>
-        </FlexColumn>
+        </PartnershipsStyle>
     );
 }
 

src/utils/containers.js

@@ -61,12 +61,12 @@ const TransBack = styled(FlexRow)`
   width: 100%;
   height: 100vh;
   transition: ${({transition}) => transition ? transition : 'opacity'} 0.3s ease-in-out;
-  background-color: ${({theme, backgroundColor}) => backgroundColor ? backgroundColor : 'transparent'};
+  background-color: ${({backgroundColor}) => backgroundColor ? backgroundColor : 'transparent'};
   z-index: 2;
 `;
 
 const ImageBackground = styled(FlexColumn)`
-  background-size: cover;
+  background-size: ${({size}) => size ? size : 'cover'};
   background-position: center;
   background-image: url(${({image}) => image});
   background-repeat: no-repeat;