add: testimonials and additional college changes

public/data/testimonials/testimonials.json

@@ -0,0 +1,14 @@
+[
+    {
+        "testimonial": "This is a good place to find colleges.",
+        "author": "John Doe"
+    },
+    {
+        "testimonial": "I found the perfect college for me.",
+        "author": "Jane Doe"
+    },
+    {
+        "testimonial": "This place is good.",
+        "author": "Sami Elsayed"
+    }
+]

src/app/college/page.jsx

@@ -1,27 +1,3 @@
-import Image from "next/image";
-import React from 'react';
-import collegediversity from '../../../public/data/collegediversity.json';
-import historicaltuition from '../../../public/data/historicaltuition.json';
-import salarypotential from '../../../public/data/salarypotential.json';
-import tuitioncost from '../../../public/data/tuition.json';
-import { promises as fs } from 'fs';
-
-// export default async function College({any: props}) {
-//     const file = await fs.readFile(process.cwd() + collegediversity, 'utf8');
-//     const data = JSON.parse(file);
-
-//     return (
-//       <div>
-//         <h1>{data[0].name}</h1>
-//         <p>{data[0].state}</p>
-//       </div>
-//     );
-// }
-
-export default function College({props}) {
-
-    const college = collegediversity.find({name: props})
-    console.log(college)
-    return (
-    );
-}
+fetch('../../../public/data/tuitioncost.json')
+    .then(response => response.json)
+    .then (value => console.log(value))

src/app/components/Testimonial.jsx

@@ -0,0 +1,109 @@
+'use client';
+
+import styles from "./Testimonial.module.css";
+import React, { useEffect, useRef, useState } from "react";
+
+const TESTIMONIAL_DELAY = 3000;
+
+const Testimonial = (props) => {
+  const { testimonialData } = props;
+  const refFeedbackParentDiv = useRef(null);
+  const refButtonsParentDiv = useRef(null);
+  const timeoutRef = useRef(null);
+  const [delay, setDelay] = useState(100);
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => setDelay(TESTIMONIAL_DELAY), []);
+
+  useEffect(() => {
+    timeoutRef.current = setTimeout(
+      () =>
+        setIndex((prevIndex) =>
+          prevIndex === props.testimonialData.length - 1 ? 0 : prevIndex + 1
+        ),
+      delay
+    );
+
+    return () => clearTimeout(timeoutRef.current);
+  }, [props.testimonialData.length, index, delay]);
+
+  const dotsHelper = (idx) => {
+    if (refButtonsParentDiv.current === null) return;
+
+    if (index === idx) {
+      const arr2 = [...refFeedbackParentDiv.current.children];
+
+      arr2.forEach((el, i) => {
+        if (document.querySelector(`.feedbackText--${i}`))
+          document
+            .querySelector(`.feedbackText--${i}`)
+            .classList.add(styles["not-visible"]);
+      });
+
+      arr2[index + 1].classList.remove(styles["not-visible"]);
+
+      return styles["myDot--active"];
+    }
+  };
+
+  const dotClickHandler = (arr, indx) => {
+    setIndex(indx);
+    arr.forEach((_, i) => {
+      document
+        .querySelector(`.feedbackText--${i}`)
+        .classList.add(styles["not-visible"]);
+      document
+        .querySelector(`.buttonDot${i}`)
+        .classList.remove(styles["myDot--active"]);
+    });
+    document
+      .querySelector(`.feedbackText--${indx}`)
+      .classList.remove(styles["not-visible"]);
+    document
+      .querySelector(`.buttonDot${indx}`)
+      .classList.add(styles["myDot--active"]);
+  };
+
+  return (
+    <div className={`${styles["section-three-main-div"]} testimonial`}>
+      <div
+        ref={refFeedbackParentDiv}
+        className={styles["section-three-sub-div-one"]}
+      >
+        <div
+          className={`${styles["quotes-img"]} ${styles["quotes-img-right"]}`}
+        />
+        {testimonialData.map((el, i) => {
+          return (
+            <div
+              key={i}
+              className={`feedbackText--${i} ${styles["main-quotes-div"]} ${styles["not-visible"]}`}
+            >
+              <div className={styles.para}>{el.testimonial}</div>
+              <div className={styles.subText}>{el.author}</div>
+            </div>
+          );
+        })}
+        <div
+          className={`${styles["quotes-img"]} ${styles["quotes-img-left"]}`}
+        />
+      </div>
+      <div ref={refButtonsParentDiv}>
+        {testimonialData.map((_, i, arr) => {
+          return (
+            <div
+              name='change testimonial'
+              key={i}
+              className={`buttonDot${i} ${styles.myDot} ${
+                index === i ? dotsHelper(i) : ""
+              }`}
+              onClick={() => dotClickHandler(arr, i)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(Testimonial);

src/app/components/Testimonial.module.css

@@ -0,0 +1,81 @@
+.section-three-main-div {
+    display: grid;
+    grid-template-rows: 1fr 50px;
+    justify-items: center;
+    row-gap: 1rem;
+    background-color: rgb(250, 251, 253);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  .quotes-img-right {
+    justify-self: end;
+    background-image: url(https://raw.githubusercontent.com/novel-code/testimonial-video-4/master/assets/left.png);
+    margin-right: 20px;
+  }
+
+  .quotes-img-left {
+    background-image: url(https://raw.githubusercontent.com/novel-code/testimonial-video-4/master/assets/right.png);
+    margin-left: 20px;
+  }
+
+  .section-three-sub-div-one {
+    display: grid;
+    grid-template-columns: 10% 1fr 10%;
+    justify-content: center;
+    text-align: center;
+    margin-top: 2rem;
+  }
+
+  .main-quotes-div {
+    /* width: 1110px; */
+    transition: 1s;
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .quotes-img {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 25px;
+    height: 23px;
+  }
+
+  /* ------------------ */
+  .para {
+    font-family: "Lato", sans-serif;
+    font-size: 18px;
+  }
+
+  .subText {
+    margin-top: 1rem;
+    font-size: 14px;
+    color: #999999;
+  }
+
+  .myDot {
+    display: inline-block;
+    cursor: pointer;
+    border: none;
+    padding: 5.5px;
+    border-radius: 50%;
+    margin-right: 5px;
+    margin-left: 5px;
+    background: rgb(130, 126, 119);
+  }
+
+  .myDot--active {
+    background: rgb(24, 24, 21);
+  }
+
+  .not-visible {
+    opacity: 0;
+    transition: 1s;
+  }
+
+  @media (max-width: 767px) {
+
+    .section-three-sub-div-one {
+      grid-template-columns: 15% 1fr 15%;
+    }
+  }