LandingPage refactor
This commit is contained in:
parent
70562c1f74
commit
2751eda1e8
@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
import { FlexColumn } from '../utils/containers';
|
||||
import Motivation from '../components/content_sections/Motivation';
|
||||
import Csi from '../components/content_sections/Csi';
|
||||
import Commercial from '../components/content_sections/Commercial';
|
||||
import Hero from '../components/content_sections/Hero';
|
||||
import Partnerships from '../components/content_sections/Partnerships';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const LandingPageStyle = styled(FlexColumn)`
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 90px 0 32px;
|
||||
|
||||
.main-container {
|
||||
max-width: 452px;
|
||||
gap: 48px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@media (min-width: ${({ theme }) => theme.overMobile}) {
|
||||
padding: 172px 0 124px;
|
||||
|
||||
.main-container {
|
||||
max-width: none;
|
||||
gap: 124px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const LandingPage = (props) => {
|
||||
return (
|
||||
<LandingPageStyle as="main">
|
||||
<FlexColumn className="main-container">
|
||||
<Hero popUpMessageHandler={props.popUpMessageHandler} />
|
||||
<Motivation />
|
||||
<Csi />
|
||||
<Commercial />
|
||||
<Partnerships />
|
||||
</FlexColumn>
|
||||
</LandingPageStyle>
|
||||
);
|
||||
};
|
||||
|
||||
export default LandingPage;
|
24
src/pages/LandingPage/LandingPage.js
Normal file
24
src/pages/LandingPage/LandingPage.js
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { FlexColumn } from '../../utils/containers';
|
||||
import Motivation from '../../components/content_sections/Motivation';
|
||||
import Csi from '../../components/content_sections/Csi';
|
||||
import Commercial from '../../components/content_sections/Commercial';
|
||||
import Hero from '../../components/content_sections/Hero';
|
||||
import Partnerships from '../../components/content_sections/Partnerships';
|
||||
import LandingPageStyle from './LandingPageStyle';
|
||||
|
||||
const LandingPage = (props) => {
|
||||
return (
|
||||
<LandingPageStyle as="main">
|
||||
<FlexColumn className="LandingPageStyle__main-container">
|
||||
<Hero popUpMessageHandler={props.popUpMessageHandler} />
|
||||
<Motivation />
|
||||
<Csi />
|
||||
<Commercial />
|
||||
<Partnerships />
|
||||
</FlexColumn>
|
||||
</LandingPageStyle>
|
||||
);
|
||||
};
|
||||
|
||||
export default LandingPage;
|
26
src/pages/LandingPage/LandingPageStyle.js
Normal file
26
src/pages/LandingPage/LandingPageStyle.js
Normal file
@ -0,0 +1,26 @@
|
||||
import styled from 'styled-components';
|
||||
import { FlexColumn } from '../../utils/containers';
|
||||
|
||||
const LandingPageStyle = styled(FlexColumn)`
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 90px 0 32px;
|
||||
|
||||
.LandingPageStyle__main-container {
|
||||
max-width: 452px;
|
||||
gap: 48px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@media (min-width: ${({ theme }) => theme.overMobile}) {
|
||||
padding: 172px 0 124px;
|
||||
|
||||
.LandingPageStyle__main-container {
|
||||
max-width: none;
|
||||
gap: 124px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default LandingPageStyle;
|
1
src/pages/LandingPage/index.js
Normal file
1
src/pages/LandingPage/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './LandingPage';
|
Loading…
Reference in New Issue
Block a user