feat: testimonial carousel on homepage

jest.config.js

@@ -16,6 +16,7 @@ const customJestConfig = {
     '^@/components/(.*)$': '<rootDir>/src/components/$1',
     '^@/api/(.*)$': '<rootDir>/src/pages/api/$1',
     '^@/mocks/(.*)$': '<rootDir>/mocks/$1',
+    '^@/utilities/(.*)$': '<rootDir>/src/utilities/$1',
   },
   setupFilesAfterEnv: ['<rootDir>/tests/setup-test-env.js'],
   testPathIgnorePatterns: ['<rootDir>/.cache'],

src/assets/css/custom.css

@@ -100,6 +100,11 @@
   margin: 85px 10px;
 }
 
+.slider-slide > .testimonial-row {
+  margin: 10px;
+  padding: 30px;
+}
+
 @media only screen and (max-width: 767px) {
   .testimonial-row {
     flex-direction: column;

src/components/Testimonal/TestimonialCard.js

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+import Image from 'next/image'
+
+const imageLoader = ({ src, width }) => {
+  return `${src}?w=${width}`
+}
+
+function TestimonialCard({ testimonial }) {
+  return testimonial ? (
+    <>
+      <div className="testimonial-row">
+        <Image
+          src={'/../images/' + testimonial.image}
+          loader={imageLoader}
+          alt={testimonial.name}
+          height={200}
+          width={200}
+          placeholder="blur"
+          blurDataURL={'/../images/' + testimonial.image}
+        />
+        <blockquote className="testimonial-text">
+          <p>
+            &quot;{testimonial.text}&quot;
+            <br /> - {testimonial.signature}
+          </p>
+        </blockquote>
+      </div>
+    </>
+  ) : (
+    <></>
+  )
+}
+
+TestimonialCard.propTypes = PropTypes.shape({
+  id: PropTypes.string,
+  name: PropTypes.string,
+  image: PropTypes.string,
+  text: PropTypes.string,
+  signature: PropTypes.string,
+}).isRequired
+
+export default TestimonialCard

src/components/Testimonal/TestimonialCarousel.js

@@ -0,0 +1,53 @@
+import { getTestimonials } from '@/utilities/testimonials'
+import TestimonialCard from './TestimonialCard'
+import Carousel from 'nuka-carousel'
+import { BsArrowLeft, BsArrowRight } from 'react-icons/bs'
+import { useContext } from 'react'
+import { ThemeContext } from '@/store/ThemeProvider'
+
+const baseSettings = {
+  autoplay: true,
+  autoplayInterval: 10000,
+  pauseOnHover: true,
+  speed: 500,
+  wrapAround: true,
+  heightMode: 'current',
+  height: '100%',
+}
+
+function TestimonialCarousel() {
+  const { colorMode } = useContext(ThemeContext)
+
+  const previousSlide = ({ previousSlide }) => (
+    <button className="close" onClick={previousSlide}>
+      <BsArrowLeft size={30} fill={colorMode === 'dark' ? 'white' : 'black'} />
+    </button>
+  )
+
+  const nextSlide = ({ nextSlide }) => (
+    <button className="close" onClick={nextSlide}>
+      <BsArrowRight size={30} fill={colorMode === 'dark' ? 'white' : 'black'} />
+    </button>
+  )
+
+  return (
+    <>
+      <Carousel
+        {...baseSettings}
+        renderCenterLeftControls={previousSlide}
+        renderCenterRightControls={nextSlide}
+        defaultControlsConfig={{
+          pagingDotsStyle: {
+            fill: colorMode === 'dark' ? 'white' : 'black',
+          },
+        }}
+      >
+        {getTestimonials().map(testimonial => {
+          return <TestimonialCard key={testimonial.id} testimonial={testimonial} />
+        })}
+      </Carousel>
+    </>
+  )
+}
+
+export default TestimonialCarousel

src/components/Testimonal/index.js

@@ -0,0 +1 @@
+export { default } from './TestimonialCard'

src/pages/donate.js

@@ -1,6 +1,8 @@
 import { NextSeo } from 'next-seo'
 import Image from 'next/image'
 import PageHeader from '@/components/PageHeader'
+import { getTestimonialByName } from '@/utilities/testimonials'
+import TestimonialCard from '@/components/Testimonal/TestimonialCard'
 
 function Donate() {
   return (
@@ -107,28 +109,7 @@ function Donate() {
         <div className="container">
           <div className="row">
             <div className="col-md-12">
-              <div className="cause_section_content">
-                <div className="testimonial-row">
-                  <Image
-                    className="img-responsive"
-                    src="/images/john-garcia.png"
-                    blurDataURL="/images/john-garcia.jpeg"
-                    alt="John Garcia"
-                    width={256}
-                    height={256}
-                    placeholder="blur"
-                  />
-                  <blockquote className="testimonial-text">
-                    <p>
-                      &quot;VWC helped me gain the technical knowledge I needed in order to get the
-                      attention of employers. The guidance, support and experience I had going
-                      through the program continues to help me in my role as a full time web
-                      developer.&quot;
-                      <br /> - John Garcia, USAF | Web Developer, Hearst Media
-                    </p>
-                  </blockquote>
-                </div>
-              </div>
+              <TestimonialCard testimonial={getTestimonialByName('John Garcia')} />
             </div>
           </div>
         </div>

src/pages/index.js

@@ -6,6 +6,7 @@ import Header from '@/components/Header'
 import SponsorSlider from '@/components/SponsorSlider'
 import { SubscribeForm } from '@/components/Forms'
 import { setupContentfulClient } from '@/utilities/conentful'
+import TestimonialCarousel from '@/components/Testimonal/TestimonialCarousel'
 
 function IndexPage({ nextCohortStartDate }) {
   return (
@@ -104,6 +105,9 @@ function IndexPage({ nextCohortStartDate }) {
                 </p>
               </blockquote>
             </div>
+            <div className="col-sm-12">
+              <TestimonialCarousel />
+            </div>
           </div>
         </div>
       </section>

src/pages/testimonials.js

@@ -1,12 +1,7 @@
-import Image from 'next/image'
 import { NextSeo } from 'next-seo'
 import PageHeader from '../components/PageHeader'
-
-import schusterProfile from '../images/schuster.jpg'
-import johnProfile from '../images/profile.png'
-import carlaProfile from '../images/carla-kroll.jpg'
-import ozzieProfile from '../images/ozzie.png'
-import jeffProfile from '../images/jeff-martin.jpg'
+import { getTestimonials } from '@/utilities/testimonials'
+import TestimonialCard from '@/components/Testimonal/TestimonialCard'
 
 function Testimonial() {
   return (
@@ -26,111 +21,9 @@ function Testimonial() {
               </p>
             </div>
             <div className="col-md-12">
-              <div className="cause_section_content">
-                <div className="testimonial-row">
-                  <Image
-                    src={schusterProfile}
-                    alt="Schuster Braun"
-                    height={200}
-                    width={200}
-                    placeholder="blur"
-                    blurDataURL={schusterProfile}
-                  />
-                  <blockquote className="testimonial-text">
-                    <p>
-                      &quot;#VetsWhoCode on paper is a web development boot camp. In my opinion it
-                      is the best transition assistance program out there. I am so grateful for the
-                      access to a new life the boot camp gave me.&quot;
-                      <br /> - Schuster Braun, US Navy | Front End Engineer, Amazon Web Services
-                    </p>
-                  </blockquote>
-                </div>
-                <div className="testimonial-row">
-                  <Image
-                    src={johnProfile}
-                    alt="John Garcia"
-                    height={200}
-                    width={200}
-                    placeholder="blur"
-                    blurDataURL={schusterProfile}
-                  />
-                  <blockquote className="testimonial-text">
-                    <p>
-                      &quot;VWC helped me gain the technical knowledge I needed in order to get the
-                      attention of employers. The guidance, support and experience I had going
-                      through the program continues to help me in my role as a full time web
-                      developer.&quot;
-                      <br /> - John Garcia, US Air Force | Front End Engineer, ForUsAll
-                    </p>
-                  </blockquote>
-                </div>
-                <div className="testimonial-row">
-                  <Image
-                    src={carlaProfile}
-                    alt="Carla Kroll"
-                    height={200}
-                    width={200}
-                    placeholder="blur"
-                    blurDataURL={carlaProfile}
-                  />
-                  <blockquote className="testimonial-text">
-                    <p>
-                      &quot;The course was great! I laughed, I learned, I got mad, I got
-                      excited...then mad again. But in the end, I&apos;ve developed skills that have
-                      helped me become a successful frontend developer in Chicago and have found a
-                      group of people in VWC that understand me, and we really work and grow
-                      together better than anything I could have imagined.&quot;
-                      <br /> - Carla Kroll, US Air Force | Frontend Developer, J. Walter Thompson
-                      Worldwide
-                    </p>
-                  </blockquote>
-                </div>
-                <div className="testimonial-row">
-                  <Image
-                    src={ozzieProfile}
-                    alt="Osvaldo Vargas"
-                    height={200}
-                    width={200}
-                    placeholder="blur"
-                    blurDataURL={ozzieProfile}
-                  />
-                  <blockquote className="testimonial-text">
-                    <p>
-                      &quot;During my transition, I have signed up for and utilized services from
-                      over 14 different Non-Profits, Corporate, and State resources. I attended all
-                      three US Army military transition tracks (Business, Education, Career), been a
-                      part of a variety of technology training programs and transition programs. Of
-                      all of these programs, only three have made a significant contribution to my
-                      transition, and of these three organizations, only one has truly changed my
-                      life for the better. Vets Who Code delivered more value to me than 12 of the
-                      non-profits combined.&quot;
-                      <br /> -Osvaldo &quot;Ozzie&quot; Vargas, US Army | Fullstack Developer,
-                      Application Lead, Novetta
-                    </p>
-                  </blockquote>
-                </div>
-                <div className="testimonial-row">
-                  <Image
-                    src={jeffProfile}
-                    alt="Jeff Martin"
-                    height={200}
-                    width={200}
-                    placeholder="blur"
-                    blurDataURL={jeffProfile}
-                  />
-                  <blockquote className="testimonial-text">
-                    <p>
-                      &quot;#VetsWhoCode&apos;s tenacious focus on language and computer science
-                      fundamentals over frameworks was invaluable in my career transition from being
-                      a Radiology Technician in the US Army to building cloud scale infrastructure
-                      at Microsoft. The coaching from the #VetsWhoCode’s talented and passionate
-                      mentor network proved to be a priceless asset even after graduating. Come
-                      ready to learn and you will succeed here.&quot;
-                      <br /> - Jeff Martin, US Army | DevOps Engineer, Microsoft/Github
-                    </p>
-                  </blockquote>
-                </div>
-              </div>
+              {getTestimonials().map(testimonial => {
+                return <TestimonialCard key={testimonial.id} testimonial={testimonial} />
+              })}
             </div>
           </div>
         </div>

src/utilities/testimonials.js

@@ -0,0 +1,70 @@
+const testimonialData = [
+  {
+    id: 'schuster-braun',
+    name: 'Schuster Braun',
+    image: 'schuster.jpg',
+    text: `#VetsWhoCode on paper is a web development boot camp. In my opinion it
+      is the best transition assistance program out there. I am so grateful for the
+      access to a new life the boot camp gave me.`,
+    signature: 'Schuster Braun, US Navy | Front End Engineer, Amazon Web Services',
+  },
+  {
+    id: 'john-garcia',
+    name: 'John Garcia',
+    image: 'john-garcia.png',
+    text: `VWC helped me gain the technical knowledge I needed in order to get the
+      attention of employers. The guidance, support and experience I had going
+      through the program continues to help me in my role as a full time web
+      developer.`,
+    signature: 'John Garcia, US Air Force | Front End Engineer, ForUsAll',
+  },
+  {
+    id: 'carla-kroll',
+    name: 'Carla Kroll',
+    image: 'carla-kroll.jpg',
+    text: `The course was great! I laughed, I learned, I got mad, I got
+      excited...then mad again. But in the end, I've developed skills that have
+      helped me become a successful frontend developer in Chicago and have found a
+      group of people in VWC that understand me, and we really work and grow
+      together better than anything I could have imagined.`,
+    signature: 'Carla Kroll, US Air Force | Frontend Developer, J. Walter Thompson Worldwide',
+  },
+  {
+    id: 'osvaldo-vargas',
+    name: 'Osvaldo Vargas',
+    image: 'ozzie.png',
+    text: `During my transition, I have signed up for and utilized services from
+      over 14 different Non-Profits, Corporate, and State resources. I attended all
+      three US Army military transition tracks (Business, Education, Career), been a
+      part of a variety of technology training programs and transition programs. Of
+      all of these programs, only three have made a significant contribution to my
+      transition, and of these three organizations, only one has truly changed my
+      life for the better. Vets Who Code delivered more value to me than 12 of the
+      non-profits combined.`,
+    signature: "Osvaldo 'Ozzie' Vargas, US Army | Fullstack Developer, Application Lead, Novetta",
+  },
+  {
+    id: 'jeff-martin',
+    name: 'Jeff Martin',
+    image: 'jeff-martin.jpg',
+    text: `#VetsWhoCode's tenacious focus on language and computer science
+      fundamentals over frameworks was invaluable in my career transition from being
+      a Radiology Technician in the US Army to building cloud scale infrastructure
+      at Microsoft. The coaching from the #VetsWhoCode’s talented and passionate
+      mentor network proved to be a priceless asset even after graduating. Come
+      ready to learn and you will succeed here.`,
+    signature: 'Jeff Martin, US Army | DevOps Engineer, Microsoft/Github',
+  },
+]
+
+export function getTestimonials() {
+  return testimonialData
+}
+
+export function getTestimonialById(id) {
+  return testimonialData.find(testimonial => testimonial.id === id)
+}
+
+export function getTestimonialByName(name) {
+  return testimonialData.find(testimonial => testimonial.name === name)
+}