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 React from 'react';
import { FlexColumn } from '../../utils/containers'; import { FlexColumn } from '../../utils/containers';
import Motivation from './components/Motivation'; import Motivation from './components/Motivation/Motivation';
import Csi from './components/Csi'; import Csi from './components/Csi/Csi';
import Commercial from './components/Commercial'; import Commercial from './components/Commercial/Commercial';
import Hero from './components/Hero/Hero'; import Hero from './components/Hero/Hero';
import Partnerships from './components/Partnerships'; import Partnerships from './components/Partnerships/Partnerships';
import LandingPageStyle from './LandingPageStyle'; import LandingPageStyle from './LandingPageStyle';
// import MadeByCsi from './components/MadeByCsi/MadeByCsi'; // 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, FlexColumn,
FlexRow, FlexRow,
ImageBackground, ImageBackground,
} from '../../../utils/containers'; } from '../../../../utils/containers';
import { Body, H2, Medium } from '../../../utils/fonts'; import { Body, H2, Medium } from '../../../../utils/fonts';
import CircleNumber from '../../../components/generic/CircleNumber'; import CircleNumber from '../../../../components/generic/CircleNumber';
import Media from 'react-media'; import Media from 'react-media';
import theme from '../../../utils/theme'; import theme from '../../../../utils/theme';
import commercialImage from '../../../assets/commercial-image.svg'; import commercialImage from '../../../../assets/commercial-image.svg';
const Commercial = () => { const Commercial = () => {
const listItemsContent = [ const listItemsContent = [
@ -96,8 +96,8 @@ const Commercial = () => {
</FlexColumn> </FlexColumn>
<ImageBackground <ImageBackground
image={commercialImage} image={commercialImage}
width="200px" width="180px"
height="284px" height="274px"
size="contain" size="contain"
/> />
</FlexRow> </FlexRow>

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

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

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

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { FlexColumn, FlexRow, Svg } from '../../../utils/containers'; import { FlexColumn, FlexRow, Svg } from '../../../../utils/containers';
import { Body, H2, Medium } from '../../../utils/fonts'; import { Body, H2, Medium } from '../../../../utils/fonts';
import Media from 'react-media'; import Media from 'react-media';
import theme from '../../../utils/theme'; import theme from '../../../../utils/theme';
import csiLogo from '../../../assets/csi_full_logo.svg'; import csiLogo from '../../../../assets/csi_logo.svg';
const Csi = () => { const Csi = () => {
const mobileRender = () => { const mobileRender = () => {
@ -37,11 +37,11 @@ const Csi = () => {
const desktopRender = () => { const desktopRender = () => {
return ( return (
<FlexRow gap="46px"> <FlexColumn as="section" alignmentX="flex-start" maxWidth="640px">
<FlexColumn as="section" alignmentX="flex-start" maxWidth="490px"> <FlexRow margin="0 0 48px 0">
<H2 as="h2" margin="0 0 48px 0"> <H2 as="h2">Center for Artificial Intelligence (C4AI)</H2>
Center for Artificial Intelligence (C4AI) <Svg src={csiLogo} size="contain" width="230px" height="80px" />
</H2> </FlexRow>
<Body as="p" margin="0 0 24px 0"> <Body as="p" margin="0 0 24px 0">
<Medium as="span" display="inline"> <Medium as="span" display="inline">
Gonito.net Gonito.net
@ -53,17 +53,15 @@ const Csi = () => {
at Adam Mickiewicz University (UAM) which conducts research on the at Adam Mickiewicz University (UAM) which conducts research on the
development of artificial intelligence, carries out scientific and development of artificial intelligence, carries out scientific and
research and development projects, integrates the research of research and development projects, integrates the research of
scientists from various departments of Adam Mickiewicz University scientists from various departments of Adam Mickiewicz University and
and outside it - from leading scientific centers in Poland and outside it - from leading scientific centers in Poland and abroad as
abroad as well as those employed in business entities. well as those employed in business entities.
</Body> </Body>
<Medium as="p"> <Medium as="p">
C4AI also cooperates with business entities in creating new C4AI also cooperates with business entities in creating new solutions
solutions to be implemented in enterprises. to be implemented in enterprises.
</Medium> </Medium>
</FlexColumn> </FlexColumn>
<Svg src={csiLogo} width="400px" height="242px" />
</FlexRow>
); );
}; };

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 Hero = (props) => {
const mobileRender = () => { const mobileRender = () => {
return ( 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"> <H1 as="h1">
Welcome to Welcome to
<Container display="inline" color={theme.colors.green}> <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 React from 'react';
import { FlexColumn, Grid } from '../../../utils/containers'; import { FlexColumn, Grid } from '../../../../utils/containers';
import { H2 } from '../../../utils/fonts'; import { H2 } from '../../../../utils/fonts';
import Placeholder from '../../../components/generic/Placeholder'; import Placeholder from '../../../../components/generic/Placeholder';
import styled from 'styled-components'; import PartnershipsStyle from './PartnershipsStyle';
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;
}
}
`;
const Partnerships = () => { const Partnerships = () => {
return ( 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';