s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new Landing Page Hero and some refactor

Browse Source
This commit is contained in:
Mateusz Tylka 2023-05-31 11:00:26 +02:00
parent c29df33a03
commit 8647164413
16 changed files with 193 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/LandingPage/LandingPage.js
View File

@ -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';

14
src/pages/LandingPage/components/Commercial.js → src/pages/LandingPage/components/Commercial/Commercial.js
View File

@ -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>

1
src/pages/LandingPage/components/Commercial/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './Commercial';

58
src/pages/LandingPage/components/Csi.js → src/pages/LandingPage/components/Csi/Csi.js
View File

@ -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>
);
};

1
src/pages/LandingPage/components/Csi/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './Csi';

45
src/pages/LandingPage/components/Footer.js
View File

@ -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;

7
src/pages/LandingPage/components/Hero/Hero.js
View File

@ -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}>

101
src/pages/LandingPage/components/Motivation.js
View File

@ -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;

34
src/pages/LandingPage/components/Motivation/Motivation.js Normal file
View File

@ -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;

48
src/pages/LandingPage/components/Motivation/MotivationStyle.js Normal file
View File

@ -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;

30
src/pages/LandingPage/components/Motivation/functions/cubeIconRender.js Normal file
View File

@ -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;

1
src/pages/LandingPage/components/Motivation/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './Motivation';

7
src/pages/LandingPage/components/Motivation/utils.js Normal file
View File

@ -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 };

23
src/pages/LandingPage/components/Partnerships.js → src/pages/LandingPage/components/Partnerships/Partnerships.js
View File

@ -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 (

21
src/pages/LandingPage/components/Partnerships/PartnershipsStyle.js Normal file
View File

@ -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;

1
src/pages/LandingPage/components/Partnerships/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './Partnerships';