Skip to content

Commit 507ef19

Browse files
jasondippeljasondippel
authored
Add testimonials section with carousel (#45)
* Add testimonials section with carousel * Alphabetize exports
1 parent cf0a449 commit 507ef19

File tree

12 files changed

+293
-8
lines changed

12 files changed

+293
-8
lines changed

‎components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ export { default as Form } from './form'
44
export { default as Heading } from './heading'
55
export { default as Input } from './input'
66
export { default as SiteHeader } from './site-header'
7+
export { default as Testimonials } from './testimonials'
78
export { default as Text } from './text'
89
export { default as TextArea } from './textarea'

‎components/testimonials/index.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import Glide from '@glidejs/glide'
2+
import { rem } from 'polished'
3+
import { useEffect } from 'react'
4+
import styled from 'styled-components'
5+
import Slide from './slide'
6+
import '@glidejs/glide/dist/css/glide.core.min.css'
7+
import '@glidejs/glide/dist/css/glide.theme.min.css'
8+
9+
const DOT_SIZE = rem('18px')
10+
const DOT_SIZE_MOBILE = rem('24px')
11+
12+
const Root = styled.div`
13+
margin-top: ${rem('64px')};
14+
cursor: default;
15+
`
16+
17+
const Track = styled.div`
18+
margin-bottom: ${rem('64px')};
19+
position: relative;
20+
cursor: grab;
21+
22+
.glide__slide {
23+
height: 100%;
24+
}
25+
`
26+
27+
const ControlDots = styled.div`
28+
display: flex;
29+
justify-content: center;
30+
width: 100%;
31+
position: relative;
32+
`
33+
34+
const DotButton = styled.button`
35+
height: ${DOT_SIZE};
36+
width: ${DOT_SIZE};
37+
border-radius: 50%;
38+
background: rgba(255, 104, 186, 0.5);
39+
margin: 0.5rem;
40+
border: none;
41+
transition: all 0.3s ease;
42+
cursor: pointer;
43+
44+
&.glide__bullet--active {
45+
background: rgba(255, 104, 186, 1);
46+
}
47+
48+
&:focus {
49+
outline: none;
50+
transform: scale(1.25);
51+
}
52+
53+
@media only screen and (max-width: 413px) {
54+
height: ${DOT_SIZE_MOBILE};
55+
width: ${DOT_SIZE_MOBILE};
56+
}
57+
`
58+
59+
const Testimonials = () => {
60+
useEffect(() => {
61+
new Glide('.glide', {
62+
type: 'carousel',
63+
perView: 1,
64+
}).mount()
65+
}, [])
66+
67+
return (
68+
<Root className="glide">
69+
<Track className="glide__track" data-glide-el="track">
70+
<ul className="glide__slides">
71+
<li className="glide__slide">
72+
<Slide
73+
imgSrc="/testimonial-1.jpg"
74+
imgAlt="Clara Tsang"
75+
heading="Clara Tsang"
76+
subHeading="Commit Engineering Partner"
77+
text="Commit offers me a flexible working situation where | get to work on a wide spread of projects to build my career. It’s an amazing opportunity to learn from such a great community of engineers and choose from projects and technologies that actually interest me and can lead to exciting long term opportunities."
78+
/>
79+
</li>
80+
<li className="glide__slide">
81+
<Slide
82+
imgSrc="/testimonial-2.jpg"
83+
imgAlt="Bill Monkman"
84+
heading="Bill Monkman"
85+
subHeading="Commit Engineering Partner"
86+
text="I joined Commit to work with inspiring engineers and to help my renew my focus on what I'm most interested in working on."
87+
/>
88+
</li>
89+
<li className="glide__slide">
90+
<Slide
91+
imgSrc="/testimonial-3.jpg"
92+
imgAlt="Sim Brar"
93+
heading="Sim Brar"
94+
subHeading="Commit Engineering Partner"
95+
text="Commit is the perfect place to make a career transition. I can try new startups without the time suck of interviews or blotches on my resume. I also avoid the financial risks and admin of going on my own as a freelancer"
96+
/>
97+
</li>
98+
</ul>
99+
</Track>
100+
<ControlDots data-glide-el="controls[nav]">
101+
<DotButton
102+
type="button"
103+
aria-label="Testimonial 1"
104+
data-glide-dir="=0"
105+
/>
106+
<DotButton
107+
type="button"
108+
aria-label="Testimonial 2"
109+
data-glide-dir="=1"
110+
/>
111+
<DotButton
112+
type="button"
113+
aria-label="Testimonial 3"
114+
data-glide-dir="=2"
115+
/>
116+
</ControlDots>
117+
</Root>
118+
)
119+
}
120+
121+
export default Testimonials

‎components/testimonials/slide.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { rem } from 'polished'
2+
import { string } from 'prop-types'
3+
import styled from 'styled-components'
4+
import { Heading, Text } from 'components'
5+
6+
const IMG_WIDTH = '280px'
7+
const IMG_HEIGHT = '200px'
8+
9+
const Root = styled.div`
10+
display: flex;
11+
margin: 0 17%;
12+
13+
@media only screen and (max-width: 1023px) {
14+
margin: 0 10%;
15+
}
16+
17+
@media only screen and (max-width: 767px) {
18+
flex-direction: column;
19+
align-items: center;
20+
}
21+
22+
@media only screen and (max-width: 413px) {
23+
margin: 0;
24+
}
25+
`
26+
27+
const Content = styled.div`
28+
display: flex;
29+
flex-direction: column;
30+
margin-left: 24px;
31+
32+
h3 {
33+
font-size: ${rem('24px')};
34+
line-height: ${rem('24px')};
35+
font-weight: 700;
36+
margin-bottom: 0;
37+
38+
strong {
39+
display: block;
40+
font-weight: 700;
41+
font-size: ${rem('16px')};
42+
line-height: ${rem('26px')};
43+
color: #657594;
44+
margin-top: ${rem('12px')};
45+
}
46+
}
47+
48+
p {
49+
margin-top: ${rem('12px')};
50+
text-align: left;
51+
}
52+
53+
@media only screen and (max-width: 1023px) {
54+
p {
55+
text-align: left;
56+
}
57+
}
58+
59+
@media only screen and (max-width: 767px) {
60+
align-items: center;
61+
62+
h3 {
63+
text-align: center;
64+
margin-top: ${rem('16px')};
65+
}
66+
67+
p {
68+
text-align: center;
69+
}
70+
}
71+
`
72+
73+
const Img = styled.img`
74+
min-width: ${IMG_WIDTH};
75+
max-width: ${IMG_WIDTH};
76+
min-height: ${IMG_HEIGHT};
77+
max-height: ${IMG_HEIGHT};
78+
object-fit: cover;
79+
`
80+
81+
const Slide = ({ imgSrc, imgAlt, heading, subHeading, text, ...props }) => (
82+
<Root {...props}>
83+
<Img src={imgSrc} alt={imgAlt} />
84+
<Content>
85+
<Heading variant={Heading.VARIANT.h3}>
86+
{heading}
87+
<strong>{subHeading}</strong>
88+
</Heading>
89+
<Text>{text}</Text>
90+
</Content>
91+
</Root>
92+
)
93+
94+
Slide.propTypes = {
95+
imgSrc: string,
96+
imgAlt: string,
97+
heading: string,
98+
subHeading: string,
99+
text: string,
100+
}
101+
102+
export default Slide

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"dependencies": {
3+
"@glidejs/glide": "^3.4.1",
34
"next": "10.0.5",
45
"phosphor-react": "^1.1.2",
56
"polished": "^4.0.5",

‎pages/full.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
// TODO: this will replace pages/index.js eventually. Keeping separate to avoid merge conflicts for now
22

3-
import { ArticlePreview, Button, Heading, Text, SiteHeader } from 'components'
3+
import {
4+
ArticlePreview,
5+
Button,
6+
Testimonials,
7+
Heading,
8+
Text,
9+
SiteHeader,
10+
} from 'components'
411
import BracketSvg from 'public/bracket.svg'
512
import ConnectSvg from 'public/connect.svg'
613
import ElevateSvg from 'public/elevate.svg'
714
import ExploreSvg from 'public/explore.svg'
15+
import QuotesSvg from 'public/quotation-marks.svg'
816
import styles from 'styles/full.module.css'
917

1018
const Full = () => (
@@ -182,7 +190,18 @@ const Full = () => (
182190
</div>
183191
</div>
184192
</section>
185-
{/* TODO: insert carousel here */}
193+
<section className={styles.testimonials}>
194+
<div className={styles.flexSection}>
195+
<Heading
196+
variant={Heading.VARIANT.h2}
197+
className={styles.testimonialsHeading}
198+
>
199+
What Our Engineering Partners Have to Say
200+
</Heading>
201+
<QuotesSvg />
202+
<Testimonials className={styles.testimonialsCarousel} />
203+
</div>
204+
</section>
186205
<section className={`${styles.partners} ${styles.grey}`}>
187206
<div className={styles.flexSection}>
188207
<Heading

‎public/quotation-marks.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎public/quotation_marks.svg‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎public/testimonial-1.jpg‎

53.6 KB
Loading

‎public/testimonial-2.jpg‎

47.6 KB
Loading

0 commit comments

Comments
 (0)