Website Redesign: Courses page improvement (#750)

### Summary <!-- Required -->
This PR address the following changes for the Courses Page

- [x] Cursor Pointer on FAQ 
- [x] Hero Section fix (Addressed in Andrew's Merged PR)
- [x] Fixed font weights and omitted leading space
- [x] Omit card shadow (Addressed with Chris's PR #742 ) 
- [x] Align date and time in timeline
- [x] Align Icons with Text
- [x] Added Optional Profile image for the "Past Experiences" Section
- [x] Applied secondary Button variant to Learn More
- [x] Decreased Spacing In between each element of the page

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

[Cursor](https://www.notion.so/New-Website-COURSE-FAQ-section-cursor-pointer-14a0ad723ce180adaeacedf3bab48752?pvs=4)
[Font
Weights/spaces](https://www.notion.so/New-Website-COURSE-Past-Student-Experiences-and-Past-Student-Projects-headers-font-weight-14a0ad723ce180f5a655c9611770efaa?pvs=4)
[Font Weights/spaces for Trending
section](https://www.notion.so/New-Website-COURSE-Trends-in-Web-Dev-section-fixes-14a0ad723ce180a589c0c097a1a784c6?pvs=4)
[Card
Shadow](https://www.notion.so/New-Website-COURSE-Course-staff-section-fixes-14a0ad723ce180f9a3bbe0505bd7d67c?pvs=4)
[Timeline
fixes](https://www.notion.so/New-Website-COURSE-Timeline-section-fixes-14a0ad723ce180fc8c47cd75d8d4383b?pvs=4)
[Icon and text
alignment](https://www.notion.so/New-Website-COURSE-3-features-in-row-section-fixes-14a0ad723ce180208a89ffdad2e4752e?pvs=4)
[Section
Spacing](https://www.notion.so/New-Website-COURSE-Spacing-between-sections-14d0ad723ce180fbb2c9d01b3eb5f27f?pvs=4)

### Test Plan <!-- Required -->
Trending Section Before: 
<img width="1068" alt="Screenshot 2024-11-26 at 12 06 36 PM"
src="https://github.com/user-attachments/assets/db17bdee-9f66-41f9-b847-bf05c16d75f6">
Trending Section After font weight and spacing changes:
<img width="1589" alt="Screenshot 2024-11-28 at 9 18 37 PM"
src="https://github.com/user-attachments/assets/a60a83ec-668f-414a-879a-d2b0a5882cd5">

Past Student Projects Before (Same change with all font-black to font
weight of 700):
<img width="593" alt="Screenshot 2024-11-26 at 12 10 32 PM"
src="https://github.com/user-attachments/assets/50e3bedd-0d3f-4e79-b920-064d22105823">
Past Student Projects After: 
<img width="742" alt="Screenshot 2024-11-28 at 9 12 10 PM"
src="https://github.com/user-attachments/assets/78f8e51c-eaa7-4134-9d83-b5a5fa77faf4">

Timeline Before: 
<img width="1311" alt="Screenshot 2024-11-26 at 12 09 20 PM"
src="https://github.com/user-attachments/assets/29889765-a070-4988-b5cd-d5bbabded97c">
Timeline After: 
<img width="1609" alt="Screenshot 2024-11-28 at 9 15 40 PM"
src="https://github.com/user-attachments/assets/ccbb3a3b-d7a3-4a72-b6d5-415596b7c8a2">

Icon Section Before: 
<img width="1078" alt="Screenshot 2024-11-26 at 12 06 14 PM"
src="https://github.com/user-attachments/assets/562b7733-073f-4721-899d-b7131ee69e6d">
Icon Section After with moving Icons to the left to be aligned: 
<img width="1609" alt="Screenshot 2024-11-28 at 9 17 08 PM"
src="https://github.com/user-attachments/assets/c62138fb-9d76-4845-a53c-6cf017457415">

Section Spacing before:
<img width="1080" alt="Screenshot 2024-11-28 at 7 50 30 PM"
src="https://github.com/user-attachments/assets/22e48a37-e7f5-4f35-be0d-34d18a373e3a">\
Section Spacing After: 
<img width="1800" alt="Screenshot 2024-11-28 at 9 19 43 PM"
src="https://github.com/user-attachments/assets/5493151a-fe67-4ec5-a408-659229b2a6ac">

Testimonial Before: 
<img width="1146" alt="Screenshot 2024-11-28 at 9 26 42 PM"
src="https://github.com/user-attachments/assets/54384c26-fa25-4d42-8f30-243b48a4910c">
Testimonial After: 
<img width="1800" alt="Screenshot 2024-11-28 at 9 26 02 PM"
src="https://github.com/user-attachments/assets/c5d09212-c9e9-4210-a5a7-9540915b916e">


### Notes <!-- Optional -->

- Added the Secondary Button Variant to the global css 
- For the timeline section, I made it so that it added the @ if there
was a given time else omitted
- Added the profile image by default unless specified

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

@@ -37,10 +37,10 @@ export default function DDProjects({ title, description, imageSrc }: DDProjectsP
       onClick={toggleCard}
     >
       <div className="flex justify-between items-center">
-        <h3 className={`md:text-3xl text-xl font-bold ${isOpen ? 'text-white' : 'text-black'}`}>
+        <h3 className={`md:text-2xl text-lg font-semibold ${isOpen ? 'text-white' : 'text-black'}`}>
           {title}
         </h3>
-        <p className={`md:text-4xl text-2xl font-thin ${isOpen ? 'text-white' : 'text-gray-700'}`}>
+        <p className={`md:text-3xl text-xl font-thin ${isOpen ? 'text-white' : 'text-gray-700'}`}>
           {isOpen ? '−' : '+'}
         </p>
       </div>
@@ -52,7 +52,7 @@ export default function DDProjects({ title, description, imageSrc }: DDProjectsP
         }`}
       >
         <div className="mt-4">
-          <p className="text-white">{description}</p>
+          <p className="text-white text-lg">{description}</p>
           <img src={imageSrc} alt={title} className="mt-4 w-full h-48 object-cover rounded-lg" />
         </div>
       </div>

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

@@ -32,11 +32,11 @@ export default function Experiences({ icon, title, description }: IconProps) {
             height={150}
             alt={icon}
             unoptimized
-            className="w-24 md:w-[30%]"
+            className="w-24 md:w-[30%] -translate-x-2.5"
           />
-          <div className="text-4xl font-extrabold">{title}</div>
+          <div className="text-4xl font-bold">{title}</div>
         </div>
-        <div className="mt-8 text-lg md:text-md lg:text-2xl">{description}</div>
+        <div className="mt-8 md:text-lg">{description}</div>
       </div>
     </>
   );

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

@@ -1,9 +1,11 @@
 import React from 'react';
+import Image from 'next/image';
 
 export interface TestimonialCardProps {
   description: string;
   name: string;
   semesterTaken: string;
+  profileImage?: string;
 }
 
 /**
@@ -21,13 +23,15 @@ export interface TestimonialCardProps {
 export default function TestimonialCard({
   description,
   name,
-  semesterTaken
+  semesterTaken,
+  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">
       <div className="text-3xl text-gray-800 mb-4 tracking-wider font-black">❛❛</div>
-      <p className="text-lg text-gray-700 mb-6">{description}</p>
-      <div className="text-gray-900 font-bold pt-8">{name}</div>
+      <p className="md:text-lg text-gray-700 mb-6">{description}</p>
+      <Image src={profileImage} alt={`${name}'s profile picture`} width={50} height={50} />
+      <div className="text-gray-900 font-bold pt-2">{name}</div>
       <div className="text-gray-500">{semesterTaken}</div>
     </div>
   );

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

@@ -174,10 +174,15 @@ export default function Timeline({ events, currentDate }: TimelineProps) {
               />
               {/* Title and Date */}
               <div className="sm:text-center sm:mb-4">
-                <p className="font-extrabold lg:text-3xl text-xl">{event.title}</p>
+                <p className="font-bold lg:text-3xl text-xl">{event.title}</p>
                 <div className="flex flex-row gap-x-2 sm:flex-col">
-                  <p className="text-md lg:text-lg">{event.date}</p>
-                  <p className="text-md lg:text-lg">{event.time}</p>
+                  {event.time ? (
+                    <p className="text-md lg:text-lg">
+                      {event.date} @ {event.time}
+                    </p>
+                  ) : (
+                    <p className="text-md lg:text-lg">{event.date} </p>
+                  )}
                 </div>
               </div>
               {/* Red Dot for Completed / Grey Dot for Tablet/Laptop */}

new-dti-website/components/course/data/key_experiences.json

@@ -3,17 +3,17 @@
     {
       "icon": "/icons/courses/pencil.png",
       "title": "Best Practices",
-      "description": "We emphasize best engineering practices for every element of the course taught, from API design to frontend modularization"
+      "description": "We emphasize best engineering practices for every element of the course taught, from API design to frontend modularization."
     },
     {
       "icon": "/icons/courses/rocket.png",
       "title": "Deploy",
-      "description": "Learn how to deploy your web applications ot the cloud using service provider such as Heroku or the Google Cloud Platform"
+      "description": "Learn how to deploy your web applications ot the cloud using service provider such as Heroku or the Google Cloud Platform."
     },
     {
       "icon": "/icons/courses/presentation.png",
       "title": "Final Project",
-      "description": "The class ends with a final project capstone project consolidating all class topics, which can be used on your resume or portfolio"
+      "description": "The class ends with a final project capstone project consolidating all class topics, which can be used on your resume or portfolio."
     }
   ]
 }