Implementing Testimonial Section

components/Testimonials.js

@@ -0,0 +1,53 @@
+import React, { useRef, useState } from 'react';
+import Image from 'next/image';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faScrewdriverWrench } from '@fortawesome/free-solid-svg-icons'
+import { faWindows, faApple } from '@fortawesome/free-brands-svg-icons';
+import styles from './Testimonials.module.css';
+
+export default function Testimonials() {
+    const testimonialData = [
+        {
+            text: `<p>My hospital had <b>under-billed $75K</b> worth of procedural RVUs which took me 20 
+            hours of manual chart review over the course of 6 months to recover. OpenAdapt 
+            was able to do this job <b>automatically with just a few clicks</b>. The personalized 
+            service and support were phenomenal. I will definitely be using OpenAdapt to audit 
+            my procedures every month from now on.<p>`,
+            author: `Victor Abrich, MD, FHRS; Electrophysiologist at MercyOne Waterloo Heart Care`
+        },
+        {
+            text:`<p>We're trying to make a task miner which shows task flow. I use <b>OpenAdapter</b> to record your
+            interactions and <b>pm4py</b> to make a task flow. 
+            <br>I query <b>sqlite3</b> to make data for pm4py. </p>
+
+            <p>Now I can make a simply task flow and still there is something to do.</p>
+
+            <p>Anyway I'm very happy to get here thanks to OpenAdapter!</p>
+            Thank you again for making OpenAdapter`,
+            author:`Kibeom Kim`
+        },
+    ]
+    return (
+        <div className="testamonialRow">
+        <h1 className={styles.header}>Testimonials</h1>
+        <div className={styles.card_box}>
+
+            {testimonialData.map((currTestimony) => (
+                <div className={styles.card}>
+                    <Image
+                        className="invert text-center inline"
+                        priority
+                        src="/images/quote-left-solid.svg"
+                        height={40}
+                        width={40}
+                        alt="Photo of quote logo"
+                    />
+                    <hr></hr>
+                    <div className={styles.description} dangerouslySetInnerHTML={{ __html: currTestimony.text }} ></div>
+                    <h2 className={styles.title}>   <hr></hr> — {currTestimony.author}</h2>
+                </div>
+            ))}
+        </div>
+        </div>
+    )
+}

components/Testimonials.module.css

@@ -0,0 +1,95 @@
+.header {
+    font-size: 30px;
+    background-color: rgb(0, 0, 28);
+
+    text-align: center;
+    color: whitesmoke;
+}
+
+.card_box {
+  text-align: center; 
+    background-color: rgb(0, 0, 28);
+
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    white-space: nowrap;
+
+}
+
+  .card {
+    position: relative;
+
+    display: inline-block;
+    text-overflow: ellipsis;
+    vertical-align: top; /* Align cards at the top */
+
+    font-size: medium;
+    width: 350px;
+    height: 400px;
+    margin: 20px;
+    padding: 20px;
+    border-radius: 30px;
+    background: #560DF8;
+    flex-direction: column;
+    align: self-align;
+    align-items: center;
+    justify-content: center;
+  }
+.card hr{
+  padding: 5px;
+  width: 300px;
+}
+
+
+  .card:hover {
+
+    //outline: 2px solid rgba(122, 105, 175, 0.6);
+    background: #A36BF4;
+    transform: scale(1.05);
+    transition: background-color 0.5s, color 0.5s, transform 0.5s;
+  }
+   .title {
+    position: absolute;
+    bottom: 0;
+
+    max-width: 300px;
+    margin: 5px;
+    color: whitesmoke;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    padding-bottom: 20px;
+
+    overflow: hidden;
+    white-space: normal;
+  }
+  .card .button:hover {
+    color: white;
+    border: 2px solid transparent;
+  }
+  .description {
+    text-align: left;
+    margin-bottom: 10px;
+    padding: 0;
+    font-size: 15px;
+
+    max-height: 250px;
+    color: whitesmoke;
+    white-space: initial;
+    overflow: hidden;
+    text-overflow: ellipsis; 
+
+
+  }
+  .heading {
+    font-size: 30px;
+    text-align: center;
+    color: whitesmoke;
+  }
+  .p {
+    padding:20px;
+    font-size: 18px;
+    text-align: center;
+    color: rgb(204, 194, 194);
+  }

pages/index.js

@@ -5,7 +5,7 @@ import FeedbackForm from '@components/FeedbackForm';
 import Footer from "@components/Footer";
 import IndustriesGrid from '@components/IndustriesGrid';
 import MastHead from '@components/MastHead';
-
+import Testimonials from '@components/Testimonials';
 export default function Home() {
   const [feedbackData, setFeedbackData] = useState({
     email: '',
@@ -18,6 +18,7 @@ export default function Home() {
     <div>
       <MastHead />
       <IndustriesGrid feedbackData={feedbackData} setFeedbackData={setFeedbackData} sectionRef={sectionRef} />
+      <Testimonials/> 
       <Developers />
       <div ref={sectionRef}>
         <FeedbackForm feedbackData={feedbackData} setFeedbackData={setFeedbackData} />