Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit ba0c456

Browse files
nisarhassan12nisarhassan12
committed
add Gitpod vs Codespaces landing page.
Fixes gitpod-io/website#766
1 parent 57dcbeb commit ba0c456

16 files changed

+1148
-158
lines changed

‎src/components/FeatureCard.tsx

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import { sizes } from '../styles/variables'
55
import Pattern from '../resources/pattern-2.jpg'
66
import IconTick from '../resources/icon-tick-2.svg'
77

8-
const Styled = styled.div<{ direction?: string; flexDirectionColumnForImgContainer?: boolean }>`
8+
const Styled = styled.div<{
9+
direction?: string
10+
flexDirectionColumnForImgContainer?: boolean
11+
opposite?: boolean
12+
hasFigFootnote?: boolean
13+
}>`
914
display: flex;
1015
justify-content: space-between;
1116
position: relative;
@@ -38,7 +43,7 @@ const Styled = styled.div<{ direction?: string; flexDirectionColumnForImgContain
3843
3944
&:nth-of-type(2n) {
4045
@media (min-width: 1141px) {
41-
flex-direction: row-reverse;
46+
flex-direction: ${({ opposite }) => (opposite ? 'reverse' : 'row-reverse')};
4247
}
4348
4449
@media (min-width: 1141px) {
@@ -55,6 +60,12 @@ const Styled = styled.div<{ direction?: string; flexDirectionColumnForImgContain
5560
}
5661
}
5762
63+
&:nth-of-type(2n + 1) {
64+
@media (min-width: 1141px) {
65+
flex-direction: ${({ opposite }) => (opposite ? 'row-reverse' : 'reverse')};
66+
}
67+
}
68+
5869
.text {
5970
display: flex;
6071
flex-direction: column;
@@ -135,14 +146,18 @@ const Styled = styled.div<{ direction?: string; flexDirectionColumnForImgContain
135146
@media (max-width: 1140px) {
136147
min-height: 240px;
137148
padding: 5rem;
138-
margin-bottom: 2.5rem;
149+
margin-bottom: ${({ hasFigFootnote }) => (hasFigFootnote ? '7rem' : '2.5rem')};
139150
140151
&::before {
141152
left: 0;
142153
right: 0;
143154
}
144155
}
145156
157+
@media(max-width: 800px) {
158+
margin-bottom: ${({ hasFigFootnote }) => (hasFigFootnote ? '10rem' : '2.5rem')};
159+
}
160+
146161
@media (max-width: 560px) {
147162
padding: 3rem;
148163
}
@@ -212,15 +227,37 @@ const Styled = styled.div<{ direction?: string; flexDirectionColumnForImgContain
212227
}
213228
}
214229
230+
p + .text-list {
231+
margin-top: 2rem;
232+
}
233+
215234
.text-list {
216235
margin-top: 0;
217236
font-size: inherit;
218237
238+
@media (max-width: ${sizes.breakpoints.sm}) {
239+
text-align: left;
240+
}
241+
219242
li + li {
220243
margin-top: 2rem;
221244
}
222245
}
223246
247+
.footnote {
248+
position: absolute;
249+
margin-top: 4rem;
250+
bottom: -5.5rem;
251+
252+
@media (max-width: 454px) {
253+
bottom: -5rem;
254+
}
255+
256+
@media(max-width: 420px) {
257+
bottom: -6.5rem;
258+
}
259+
}
260+
224261
img {
225262
border-radius: 3px;
226263
}
@@ -238,13 +275,37 @@ export interface FeatureCardProps {
238275
Buttons?: any
239276
icon?: string | JSX.Element
240277
iconTitle?: string | JSX.Element
278+
opposite?: boolean
279+
Figure?: () => JSX.Element
280+
figFootnote?: string | JSX.Element
281+
footnote?: string | JSX.Element
241282
}
242283

243-
const FeatureCard = ({ src, alt, Graphic, title, text, direction, id, featuresList, Buttons }: FeatureCardProps) => {
284+
const FeatureCard = ({
285+
src,
286+
alt,
287+
Graphic,
288+
title,
289+
text,
290+
direction,
291+
id,
292+
featuresList,
293+
Buttons,
294+
Figure,
295+
opposite,
296+
figFootnote,
297+
footnote
298+
}: FeatureCardProps) => {
244299
const [renderedGraphic, setRenderedGraphic] = useState<string>('')
245-
300+
const hasFigFootnote = typeof figFootnote == 'string' || typeof figFootnote == 'object'
246301
return (
247-
<Styled className="row" direction={direction} flexDirectionColumnForImgContainer={featuresList && featuresList.length ? true : false}>
302+
<Styled
303+
className="row"
304+
direction={direction}
305+
flexDirectionColumnForImgContainer={featuresList && featuresList.length ? true : false}
306+
opposite={opposite}
307+
hasFigFootnote={hasFigFootnote}
308+
>
248309
<div className="img-container in-view">
249310
{Graphic ? <Graphic renderedGraphic={renderedGraphic} /> : null}
250311
{src ? <img src={src} alt={alt} style={featuresList && featuresList.length ? { transform: 'scale(.9)' } : {}} /> : null}
@@ -255,11 +316,14 @@ const FeatureCard = ({ src, alt, Graphic, title, text, direction, id, featuresLi
255316
))}
256317
</ul>
257318
) : null}
319+
{Figure ? <Figure /> : null}
320+
{figFootnote ? <p className="footnote">{figFootnote}</p> : null}
258321
</div>
259322
<div className="text">
260323
<h2>{title}</h2>
261324
{text ? text : null}
262325
{Buttons ? <Buttons setRenderedGraphic={setRenderedGraphic} /> : null}
326+
{footnote ? <p className="footnote">{footnote}</p> : null}
263327
</div>
264328
{id && <div id={id}></div>}
265329
</Styled>

‎src/components/FeatureCards.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,28 @@ import { FeatureCardProps } from './FeatureCard'
55
import FeatureCard from './FeatureCard'
66

77
const Styled = styled.section`
8-
display: flex;
9-
flex-direction: column;
10-
padding-bottom: 5rem;
11-
position: relative;
8+
display: flex;
9+
flex-direction: column;
10+
padding-bottom: 5rem;
11+
position: relative;
1212
`
1313

14-
const FeatureCards = ({ features }: { features: FeatureCardProps[] }) => {
15-
return (
16-
<Styled>
17-
<div className="container">
18-
{
19-
features.map((feature: FeatureCardProps, i) => (
20-
<FeatureCard
21-
key={`${feature.alt}+${i}`}
22-
{...feature}
23-
direction={i % 2 == 0 ? 'right' : ''}
24-
/>
25-
))
26-
}
27-
</div>
28-
</Styled>
29-
)
14+
const FeatureCards = ({ features, opposite }: { features: FeatureCardProps[]; opposite?: boolean }) => {
15+
return (
16+
<Styled>
17+
<div className="container">
18+
{features.map((feature: FeatureCardProps, i) => {
19+
let direction
20+
if (opposite) {
21+
direction = !(i % 2 == 0) ? 'right' : ''
22+
} else {
23+
direction = i % 2 == 0 ? 'right' : ''
24+
}
25+
return <FeatureCard key={`${feature.alt}+${i}`} {...feature} direction={direction} opposite={opposite} />
26+
})}
27+
</div>
28+
</Styled>
29+
)
3030
}
3131

3232
export default FeatureCards

‎src/components/PopOver.tsx

Lines changed: 49 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const StyledDescripion = styled.span`
77
position: relative;
88
99
button {
10+
position: relative;
1011
display: inline-block;
1112
height: 1.4rem;
1213
width: 1.4rem;
@@ -25,14 +26,26 @@ const StyledDescripion = styled.span`
2526
@media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
2627
transform: translateX(1rem);
2728
}
29+
30+
&::after {
31+
content: "";
32+
position: absolute;
33+
top: 0;
34+
left: -25%;
35+
display: block;
36+
height: 3.5rem;
37+
width: 3.5rem;
38+
}
2839
}
2940
3041
.description__text {
31-
padding: .2rem .5rem;
42+
padding: .5rem .5rem .5rem 1.5rem;
3243
font-size: 1.2rem;
44+
font-weight: 400;
3345
color: ${colors.textDark};
3446
background: ${colors.offWhite2};
3547
z-index: 1000 !important;
48+
border-radius: 3px;
3649
3750
@media(max-width: 1080px) {
3851
position: absolute;
@@ -64,42 +77,41 @@ const StyledDescripion = styled.span`
6477
}
6578
`
6679

67-
class Description extends React.Component<{description: string, textPosition?: string}, {}> {
68-
69-
state={
70-
isRendered: false
71-
}
72-
73-
handleClick = () => {
74-
this.setState({isRendered: !this.state.isRendered})
75-
}
76-
77-
handleMouseEnter = () => {
78-
this.setState({isRendered: true})
79-
}
80-
81-
handleMouseLeave = () => {
82-
this.setState({isRendered: false})
83-
}
84-
85-
render() {
86-
const { isRendered } = this.state
87-
const { description } = this.props
88-
const positionBottom = this.props.textPosition === 'bottom'
89-
90-
return (
91-
<StyledDescripion
92-
className="description"
93-
onMouseEnter={this.handleMouseEnter}
94-
onMouseLeave={this.handleMouseLeave}
95-
onFocus={this.handleMouseEnter}
96-
onBlur={this.handleMouseLeave}
97-
>
98-
<button onClick={this.handleClick}>?</button>
99-
{ isRendered ? <div className={`${positionBottom ? 'bottom' : ''} description__text`}>{ description }</div> : null }
100-
</StyledDescripion>
101-
)
102-
}
80+
class Description extends React.Component<{ description: string | JSX.Element; textPosition?: string }, {}> {
81+
state = {
82+
isRendered: false
83+
}
84+
85+
handleClick = () => {
86+
this.setState({ isRendered: !this.state.isRendered })
87+
}
88+
89+
handleMouseEnter = () => {
90+
this.setState({ isRendered: true })
91+
}
92+
93+
handleMouseLeave = () => {
94+
this.setState({ isRendered: false })
95+
}
96+
97+
render() {
98+
const { isRendered } = this.state
99+
const { description } = this.props
100+
const positionBottom = this.props.textPosition === 'bottom'
101+
102+
return (
103+
<StyledDescripion
104+
className="description"
105+
onMouseEnter={this.handleMouseEnter}
106+
onMouseLeave={this.handleMouseLeave}
107+
onFocus={this.handleMouseEnter}
108+
onBlur={this.handleMouseLeave}
109+
>
110+
<button onClick={this.handleClick}>?</button>
111+
{isRendered ? <div className={`${positionBottom ? 'bottom' : ''} description__text`}>{description}</div> : null}
112+
</StyledDescripion>
113+
)
114+
}
103115
}
104116

105117
export default Description

0 commit comments

Comments
 (0)