Website Redesign: Courses page changes (#807)

### Summary <!-- Required -->

This PR implements changes to the Courses Page from the leads sync

- [x] implemented Infinite carousel that starts and ends on each side of
the screen
- [x] decreased spacing between the sections
- [x] decreased the gap between the points in the timeline section 
- [ ] Standardize Fonts (planning to do a PR for the whole website)

### Notion/Figma Link <!-- Optional -->

**[Link to the
Notion](https://www.notion.so/Idol-Lead-Sync-781de97ad403492b94b420349f829ea5?pvs=4)**

### Notes <!-- Optional -->
- The fonts still need to be standardized but I'm going to create a
separate PR for this for the whole site once we merge the other pages

Author: JasonMun7

new-dti-website/components/course/TestimonialCard.tsx

@@ -26,7 +26,7 @@ export default function TestimonialCard({
   profileImage = '/icons/profile_image.svg'
 }: TestimonialCardProps) {
   return (
-    <div className="bg-white max-w-md w-[800px] p-10 rounded-xl drop-shadow-sm flex-shrink-0 flex-col flex">
+    <div className="bg-white max-w-md w-[800px] h-[400px] p-10 rounded-xl drop-shadow-sm flex-shrink-0 flex-col flex">
       <div className="text-3xl text-gray-800 mb-4 tracking-wider font-black">❛❛</div>
       <p className="text-gray-700 mb-6">{description}</p>
       <div className="flex flex-row justify-start gap-4 items-center mt-auto">

new-dti-website/components/course/TestimonialSlider.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React from 'react';
 import TestimonialCard, { TestimonialCardProps } from './TestimonialCard';
 
 interface TestimonialSliderProps {
@@ -10,61 +10,35 @@ export default function TestimonialSlider({
   testimonials,
   className = ''
 }: TestimonialSliderProps) {
-  const sliderRef = useRef<HTMLDivElement | null>(null);
-  const [isScrolling, setIsScrolling] = useState(false);
-  const [scrollAtEnd, setScrollAtEnd] = useState(false);
-
-  useEffect(() => {
-    const slider = sliderRef.current;
-
-    // Return early if there are no testimonials or if we've reached the end
-    if (!slider || testimonials.length === 0 || scrollAtEnd || isScrolling) {
-      return undefined; // Return `undefined` explicitly to satisfy consistent-return rule
-    }
-
-    const scrollInterval = setInterval(() => {
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth;
-
-      if (slider.scrollLeft < maxScrollLeft) {
-        slider.scrollLeft += 1; // Adjust the scroll speed as needed
-      } else {
-        setScrollAtEnd(true); // Stop scrolling when the end is reached
-        // slider.scrollLeft = 0 if we want to start from the begnning :)
-      }
-    }, 40); // Adjust the interval as needed for smoother/faster scrolling
-
-    // Return the cleanup function
-    return () => {
-      clearInterval(scrollInterval);
-    };
-  }, [testimonials, isScrolling, scrollAtEnd]);
-
-  const handleMouseEnter = () => {
-    setIsScrolling(true);
-  };
-
-  const handleMouseLeave = () => {
-    setIsScrolling(false);
-  };
-
   return (
-    <div
-      className={`overflow-x-auto pt-14 ${className}`}
-      ref={sliderRef}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div className="flex gap-x-12 flex-nowrap">
+    <div className={`w-full inline-flex flex-nowrap ${className}`}>
+      <ul className="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">
+        {testimonials.map((testimonial, index) => (
+          <li key={index}>
+            <TestimonialCard
+              profileImage={testimonial.profileImage}
+              description={testimonial.description}
+              name={testimonial.name}
+              semesterTaken={testimonial.semesterTaken}
+            />
+          </li>
+        ))}
+      </ul>
+      <ul
+        className="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll"
+        aria-hidden="true"
+      >
         {testimonials.map((testimonial, index) => (
-          <TestimonialCard
-            key={index}
-            profileImage={testimonial.profileImage}
-            description={testimonial.description}
-            name={testimonial.name}
-            semesterTaken={testimonial.semesterTaken}
-          />
+          <li key={index}>
+            <TestimonialCard
+              profileImage={testimonial.profileImage}
+              description={testimonial.description}
+              name={testimonial.name}
+              semesterTaken={testimonial.semesterTaken}
+            />
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   );
 }

new-dti-website/src/app/course/page.tsx

@@ -97,7 +97,7 @@ export default function Courses() {
         {/* WRAPPER */}
         <div
           id="Wrapper"
-          className="flex flex-col pb-10 gap-y-28 md:gap-y-36 lg:gap-y-44 bg-[#EDEDED] text-black "
+          className="flex flex-col pb-10 gap-y-24 md:gap-y-32 lg:gap-y-40 bg-[#EDEDED] text-black "
         >
           <SectionWrapper id={'Products Page Logo Section'}>
             <div className="flex flex-col pt-20 lg:flex-row lg:items-center lg:justify-around">
@@ -163,9 +163,9 @@ export default function Courses() {
           </SectionWrapper>
 
           {/* TIMELINE SECTION */}
-          <section id="Timeline">
+          <SectionWrapper id={`Timeline`}>
             <Timeline events={timeline_events} currentDate={new Date()} />
-          </section>
+          </SectionWrapper>
 
           {/* COURSE STAFF SECTION */}
           <SectionWrapper id={'Course Staff'}>
@@ -184,12 +184,12 @@ export default function Courses() {
           </SectionWrapper>
 
           {/* PAST STUDENT EXPERIENCES SECTION */}
-          <SectionWrapper id={'Past Student Experiences'}>
-            <div className="font-bold text-4xl md:text-[40px] w-[1200px]">
-              Past Student Experiences
-            </div>
-            <TestimonialSlider testimonials={testimonials} className="w-screen" />
-          </SectionWrapper>
+          <section id={'Past Student Experiences'}>
+            <SectionWrapper id={'Past Student Experiences Wrapper'}>
+              <div className="font-bold text-4xl md:text-[40px]">Past Student Experiences</div>
+            </SectionWrapper>
+            <TestimonialSlider testimonials={testimonials} className="pt-14" />
+          </section>
 
           {/* PAST STUDENT PROJECTS SECTION */}
           <SectionWrapper id={'Past Student Projects'}>

new-dti-website/tailwind.config.ts

@@ -91,11 +91,16 @@ module.exports = {
         'accordion-up': {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: 0 }
+        },
+        'infinite-scroll': {
+          from: { transform: 'translateX(0)' },
+          to: { transform: 'translateX(-100%)' }
         }
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out'
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'infinite-scroll': 'infinite-scroll 100s linear infinite'
       }
     }
   },