commitdev · jasondippel · Jan 29, 2021 · Jan 29, 2021 · Jan 29, 2021 · julie-huang
diff --git a/components/index.js b/components/index.js
@@ -4,5 +4,6 @@ export { default as Form } from './form'
 export { default as Heading } from './heading'
 export { default as Input } from './input'
 export { default as SiteHeader } from './site-header'
+export { default as Testimonials } from './testimonials'
 export { default as Text } from './text'
 export { default as TextArea } from './textarea'
diff --git a/components/testimonials/index.js b/components/testimonials/index.js
@@ -0,0 +1,121 @@
+import Glide from '@glidejs/glide'
+import { rem } from 'polished'
+import { useEffect } from 'react'
+import styled from 'styled-components'
+import Slide from './slide'
+import '@glidejs/glide/dist/css/glide.core.min.css'
+import '@glidejs/glide/dist/css/glide.theme.min.css'
+
+const DOT_SIZE = rem('18px')
+const DOT_SIZE_MOBILE = rem('24px')
+
+const Root = styled.div`
+  margin-top: ${rem('64px')};
+  cursor: default;
+`
+
+const Track = styled.div`
+  margin-bottom: ${rem('64px')};
+  position: relative;
+  cursor: grab;
+
+  .glide__slide {
+    height: 100%;
+  }
+`
+
+const ControlDots = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+`
+
+const DotButton = styled.button`
+  height: ${DOT_SIZE};
+  width: ${DOT_SIZE};
+  border-radius: 50%;
+  background: rgba(255, 104, 186, 0.5);
+  margin: 0.5rem;
+  border: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &.glide__bullet--active {
+    background: rgba(255, 104, 186, 1);
+  }
+
+  &:focus {
+    outline: none;
+    transform: scale(1.25);
+  }
+
+  @media only screen and (max-width: 413px) {
+    height: ${DOT_SIZE_MOBILE};
+    width: ${DOT_SIZE_MOBILE};
+  }
+`
+
+const Testimonials = () => {
+  useEffect(() => {
+    new Glide('.glide', {
+      type: 'carousel',
+      perView: 1,
+    }).mount()
+  }, [])
+
+  return (
+    <Root className="glide">
+      <Track className="glide__track" data-glide-el="track">
+        <ul className="glide__slides">
+          <li className="glide__slide">
+            <Slide
+              imgSrc="/testimonial-1.jpg"
+              imgAlt="Clara Tsang"
+              heading="Clara Tsang"
+              subHeading="Commit Engineering Partner"
+              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."
+            />
+          </li>
+          <li className="glide__slide">
+            <Slide
+              imgSrc="/testimonial-2.jpg"
+              imgAlt="Bill Monkman"
+              heading="Bill Monkman"
+              subHeading="Commit Engineering Partner"
+              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."
+            />
+          </li>
+          <li className="glide__slide">
+            <Slide
+              imgSrc="/testimonial-3.jpg"
+              imgAlt="Sim Brar"
+              heading="Sim Brar"
+              subHeading="Commit Engineering Partner"
+              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"
+            />
+          </li>
+        </ul>
+      </Track>
+      <ControlDots data-glide-el="controls[nav]">
+        <DotButton
+          type="button"
+          aria-label="Testimonial 1"
+          data-glide-dir="=0"
+        />
+        <DotButton
+          type="button"
+          aria-label="Testimonial 2"
+          data-glide-dir="=1"
+        />
+        <DotButton
+          type="button"
+          aria-label="Testimonial 3"
+          data-glide-dir="=2"
+        />
+      </ControlDots>
+    </Root>
+  )
+}
+
+export default Testimonials
diff --git a/components/testimonials/slide.js b/components/testimonials/slide.js
@@ -0,0 +1,102 @@
+import { rem } from 'polished'
+import { string } from 'prop-types'
+import styled from 'styled-components'
+import { Heading, Text } from 'components'
+
+const IMG_WIDTH = '280px'
+const IMG_HEIGHT = '200px'
+
+const Root = styled.div`
+  display: flex;
+  margin: 0 17%;
+
+  @media only screen and (max-width: 1023px) {
+    margin: 0 10%;
+  }
+
+  @media only screen and (max-width: 767px) {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  @media only screen and (max-width: 413px) {
+    margin: 0;
+  }
+`
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 24px;
+
+  h3 {
+    font-size: ${rem('24px')};
+    line-height: ${rem('24px')};
+    font-weight: 700;
+    margin-bottom: 0;
+
+    strong {
+      display: block;
+      font-weight: 700;
+      font-size: ${rem('16px')};
+      line-height: ${rem('26px')};
+      color: #657594;
+      margin-top: ${rem('12px')};
+    }
+  }
+
+  p {
+    margin-top: ${rem('12px')};
+    text-align: left;
+  }
+
+  @media only screen and (max-width: 1023px) {
+    p {
+      text-align: left;
+    }
+  }
+
+  @media only screen and (max-width: 767px) {
+    align-items: center;
+
+    h3 {
+      text-align: center;
+      margin-top: ${rem('16px')};
+    }
+
+    p {
+      text-align: center;
+    }
+  }
+`
+
+const Img = styled.img`
+  min-width: ${IMG_WIDTH};
+  max-width: ${IMG_WIDTH};
+  min-height: ${IMG_HEIGHT};
+  max-height: ${IMG_HEIGHT};
+  object-fit: cover;
+`
+
+const Slide = ({ imgSrc, imgAlt, heading, subHeading, text, ...props }) => (
+  <Root {...props}>
+    <Img src={imgSrc} alt={imgAlt} />
+    <Content>
+      <Heading variant={Heading.VARIANT.h3}>
+        {heading}
+        <strong>{subHeading}</strong>
+      </Heading>
+      <Text>{text}</Text>
+    </Content>
+  </Root>
+)
+
+Slide.propTypes = {
+  imgSrc: string,
+  imgAlt: string,
+  heading: string,
+  subHeading: string,
+  text: string,
+}
+
+export default Slide
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@glidejs/glide": "^3.4.1",
     "next": "10.0.5",
     "phosphor-react": "^1.1.2",
     "polished": "^4.0.5",

diff --git a/pages/full.js b/pages/full.js
@@ -1,10 +1,18 @@
 // TODO: this will replace pages/index.js eventually. Keeping separate to avoid merge conflicts for now
 
-import { ArticlePreview, Button, Heading, Text, SiteHeader } from 'components'
+import {
+  ArticlePreview,
+  Button,
+  Testimonials,
+  Heading,
+  Text,
+  SiteHeader,
+} from 'components'
 import BracketSvg from 'public/bracket.svg'
 import ConnectSvg from 'public/connect.svg'
 import ElevateSvg from 'public/elevate.svg'
 import ExploreSvg from 'public/explore.svg'
+import QuotesSvg from 'public/quotation-marks.svg'
 import styles from 'styles/full.module.css'
 
 const Full = () => (
@@ -182,7 +190,18 @@ const Full = () => (
         </div>
       </div>
     </section>
-    {/* TODO: insert carousel here */}
+    <section className={styles.testimonials}>
+      <div className={styles.flexSection}>
+        <Heading
+          variant={Heading.VARIANT.h2}
+          className={styles.testimonialsHeading}
+        >
+          What Our Engineering Partners Have to Say
+        </Heading>
+        <QuotesSvg />
+        <Testimonials className={styles.testimonialsCarousel} />
+      </div>
+    </section>
     <section className={`${styles.partners} ${styles.grey}`}>
       <div className={styles.flexSection}>
         <Heading

diff --git a/public/quotation-marks.svg b/public/quotation-marks.svg
diff --git a/public/quotation_marks.svg b/public/quotation_marks.svg
diff --git a/public/testimonial-1.jpg b/public/testimonial-1.jpg
diff --git a/public/testimonial-2.jpg b/public/testimonial-2.jpg
diff --git a/public/testimonial-3.jpg b/public/testimonial-3.jpg
diff --git a/styles/full.module.css b/styles/full.module.css
@@ -416,6 +416,41 @@ button.heroButton {
   }
 }
 
+/* Testimonials styles */
+.testimonials {
+  padding: 124px 0px 98px;
+}
+.testimonials .flexSection {
+  flex-direction: column;
+  align-items: center;
+}
+.testimonials .testimonialsHeading {
+  color: #000000;
+  font-size: 2.25rem;
+  line-height: 2.75rem;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: Montserrat;
+  letter-spacing: 0.1em;
+
+  margin: 0 0 4rem;
+  max-width: 51rem;
+}
+.testimonials .testimonialsHeading:first-of-type {
+  margin-top: 0;
+}
+.testimonials .testimonialsCarousel {
+  margin-top: 4rem;
+}
+
+@media only screen and (max-width: 413px) {
+  .testimonials .testimonialsHeading {
+    font-size: 1.75rem;
+    line-height: 2.125rem;
+    margin-bottom: 2.625rem;
+  }
+}
+
 /* Partners styles */
 .partners {
   padding: 80px 0px;
@@ -428,6 +463,7 @@ button.heroButton {
   color: #000000;
   font-size: 2.25rem;
   line-height: 2.75rem;
+  letter-spacing: 0.1em;
   text-align: center;
   text-transform: uppercase;
   margin-top: 0;