Skip to content

Commit 6e09f92

Browse files
Alexandre-GeorgesAlexandre-Georges
authored
188 About page regression fix (#215)
* SP logos * Regression fix * Linter fix * Code review refactoring
1 parent 1f54098 commit 6e09f92

File tree

7 files changed

+93
-20
lines changed

7 files changed

+93
-20
lines changed

‎components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export { default as HighlightedText } from './highlighted-text'
99
export { default as Input } from './input'
1010
export { default as Logo } from './logo'
1111
export { default as Page } from './page'
12+
export { default as RowContainer } from './row-container'
1213
export { default as SectionSeparator } from './section-separator'
1314
export { default as SiteHeader } from './site-header'
1415
export { default as SiteLinks } from './site-links'

‎components/row-container/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { arrayOf, element, string } from 'prop-types'
2+
import styled from 'styled-components'
3+
4+
const RowContainer = styled.div`
5+
width: 100%;
6+
display: flex;
7+
flex-direction: row;
8+
justify-content: space-around;
9+
flex-wrap: wrap;
10+
`
11+
12+
RowContainer.propTypes = {
13+
className: string,
14+
children: arrayOf(element),
15+
}
16+
17+
export default RowContainer

‎pages/about.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { CompanyLogo, Heading, Text, Footer, Page } from 'components'
22
import {
33
DiversityAndInclusionSection,
4+
EpBuiltStartupsSection,
45
ExecutiveTeamSection,
5-
LogoSection,
66
OpensourceSection,
77
} from 'sections'
88
import styles from 'styles/about.module.css'
@@ -28,10 +28,7 @@ const About = () => (
2828
</div>
2929
<DiversityAndInclusionSection />
3030
<ExecutiveTeamSection />
31-
<LogoSection
32-
title="Our Software Engineers"
33-
description="We’ve built successful startups, we’ve built large scale systems, we know what it takes to balance speed and quality. We’re creative, we’re entrepreneurial, we apply lean startup and agile best practices to projects we’re passionate about."
34-
>
31+
<EpBuiltStartupsSection>
3532
<CompanyLogo
3633
url="https://www.hootsuite.com/"
3734
alt="Hootsuite logo"
@@ -80,7 +77,7 @@ const About = () => (
8077
name="opendns.png"
8178
size={SMALL_LOGO}
8279
/>
83-
</LogoSection>
80+
</EpBuiltStartupsSection>
8481
<OpensourceSection />
8582
</section>
8683
<Footer />

‎pages/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import ExploreSvg from 'public/explore.svg'
1515
import {
1616
WhatsRight,
1717
HowItWorks,
18-
LogoSection,
18+
SpSection,
1919
TimelineSection,
2020
WhyCommitSection,
2121
} from 'sections'
@@ -129,7 +129,7 @@ const Home = () => (
129129
<Testimonials className={styles.testimonialsCarousel} />
130130
</div>
131131
</section>
132-
<LogoSection>
132+
<SpSection>
133133
<Logo
134134
url="https://www.procurify.com/"
135135
alt="Procurify logo"
@@ -147,7 +147,7 @@ const Home = () => (
147147
alt="Plastiq logo"
148148
name="plastiq.png"
149149
/>
150-
</LogoSection>
150+
</SpSection>
151151
<Footer />
152152
</Page>
153153
)

‎sections/ep-built-startups-section/index.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react'
2+
3+
import { arrayOf, element } from 'prop-types'
4+
import styled from 'styled-components'
5+
6+
import { Heading, RowContainer } from 'components'
7+
import { FlexSectionContent } from 'components/layout'
8+
9+
const { h2 } = Heading.VARIANT
10+
11+
const StyledSection = styled.section`
12+
padding: 7.5rem 1.25rem 6.5rem;
13+
background: #e8edf4;
14+
`
15+
16+
const StyledFlexSectionContent = styled(FlexSectionContent)`
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
`
21+
22+
const StyledHeading = styled(Heading)`
23+
max-width: 50rem;
24+
font-weight: 800;
25+
text-transform: none;
26+
line-height: 3.5rem;
27+
text-align: center;
28+
text-transform: uppercase;
29+
`
30+
31+
const StyledText = styled.div`
32+
margin-top: 1.5rem;
33+
max-width: 40rem;
34+
text-align: center;
35+
font-family: 'Lato';
36+
line-height: 1.625rem;
37+
`
38+
39+
const LogoContainer = styled(RowContainer)`
40+
margin-top: 3rem;
41+
`
42+
43+
const EpBuiltStartupsSection = ({ children }) => (
44+
<StyledSection>
45+
<StyledFlexSectionContent>
46+
<StyledHeading variant={h2}>Our Software Engineers</StyledHeading>
47+
<StyledText>
48+
We’ve built successful startups, we’ve built large scale systems, we
49+
know what it takes to balance speed and quality. We’re creative, we’re
50+
entrepreneurial, we apply lean startup and agile best practices to
51+
projects we’re passionate about.
52+
</StyledText>
53+
<LogoContainer>{children}</LogoContainer>
54+
</StyledFlexSectionContent>
55+
</StyledSection>
56+
)
57+
58+
EpBuiltStartupsSection.propTypes = {
59+
children: arrayOf(element),
60+
}
61+
62+
export default EpBuiltStartupsSection

‎sections/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
export { default as DiversityAndInclusionSection } from './diversity-and-inclusion-section'
2+
export { default as EpBuiltStartupsSection } from './ep-built-startups-section'
23
export { default as ExecutiveTeamSection } from './executive-team-section'
34
export { default as HowItWorks } from './how-it-works-section'
4-
export { default as LogoSection } from './logo-section'
55
export { default as OpensourceSection } from './opensource-section'
66
export { default as WhatsRight } from './do-whats-right-section'
7+
export { default as SpSection } from './sp-section'
78
export { default as TimelineSection } from './timeline-section'
89
export { default as WhyCommitSection } from './why-commit-section'

sections/logo-section/index.js renamed to sections/sp-section/index.js

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
import { arrayOf, element } from 'prop-types'
44
import styled from 'styled-components'
55

6-
import { Heading } from 'components'
6+
import { Heading, RowContainer } from 'components'
77
import { FlexSectionContent } from 'components/layout'
88

99
const { h2 } = Heading.VARIANT
@@ -27,12 +27,7 @@ const StyledHeading = styled(Heading)`
2727
text-align: center;
2828
`
2929

30-
const LogoContainer = styled.div`
31-
width: 100%;
32-
display: flex;
33-
flex-direction: row;
34-
justify-content: space-around;
35-
flex-wrap: wrap;
30+
const LogoContainer = styled(RowContainer)`
3631
margin-top: 5.75rem;
3732
`
3833

@@ -43,7 +38,7 @@ const Explanation = styled.p`
4338
line-height: 1.25rem;
4439
`
4540

46-
const LogoSection = ({ children }) => (
41+
const SpSection = ({ children }) => (
4742
<StyledSection>
4843
<StyledFlexSectionContent>
4944
<StyledHeading variant={h2}>
@@ -59,8 +54,8 @@ const LogoSection = ({ children }) => (
5954
</StyledSection>
6055
)
6156

62-
LogoSection.propTypes = {
57+
SpSection.propTypes = {
6358
children: arrayOf(element),
6459
}
6560

66-
export default LogoSection
61+
export default SpSection

0 commit comments

Comments
 (0)