8 workshop page materials + lessons section

app/(homepage)/homepage.module.scss

@@ -0,0 +1,9 @@
+.page {
+    background-color: purple;
+}
+
+.box {
+    width: 100%;
+    height: 300px;
+    background-color: var(--include-purple);
+}

app/(homepage)/page.jsx

@@ -1,7 +1,7 @@
 import styles from "./homepage.module.scss";
 
 import Welcome from "../_components/welcome/welcome";
-import Timeline from "@/_components/workshop-timeline/workshop-timeline";
+import Timeline from "@/_components/cohort-timeline/cohort-timeline";
 import Contact from "../_components/contact/page";
 
 export default function Home() {

app/_components/workshop-timeline/Card.jsx → app/_components/cohort-timeline/Card.jsx

@@ -23,7 +23,7 @@ const bullet = (
 );
 
 // Every Card is connected to a bullet with a line going through it
-export default function Card( {title, text, agenda, link, number} ) {
+export default function Card( {title, text, agenda, number} ) {
 
   const [isHovered, setIsHovered] = useState(false);
 
@@ -69,8 +69,8 @@ export default function Card( {title, text, agenda, link, number} ) {
 
         <div className={styles.link_div}>
             {/* Contains dummy links for now */}
-            <Link href={link} passHref legacyBehavior>
-              <a className={styles.link} target='_blank'>
+            <Link href={`/workshop/${number}`} passHref legacyBehavior>
+              <a className={styles.link}>
                 Workshop {number} <FaArrowRightLong />
               </a>
             </Link>

app/_components/workshop-timeline/workshop-timeline.jsx → app/_components/cohort-timeline/cohort-timeline.jsx

@@ -1,7 +1,7 @@
 "use client" // Necessary for now to use workshops.json data
 
 import Card from './Card'
-import styles from './workshop-timeline.module.scss'
+import styles from './cohort-timeline.module.scss'
 import workshops from "./workshops.json";
 
 export default function Timeline() {
@@ -18,8 +18,8 @@ export default function Timeline() {
           {/* This is where the stack of cards go. The bullet and line is connected to each card */}
           <div className={styles.timeline}>
             <div className={styles.workshops}>
-              {workshops.map(( { title, text, agenda, link} , idx) => 
-                <Card key={idx} title={title} text={text} agenda={agenda} link={link} number={idx + 1} />
+              {workshops.map(( { title, text, agenda} , idx) => 
+                <Card key={idx} title={title} text={text} agenda={agenda} number={idx + 1} />
               )}
             </div>
           </div>

app/_components/link-preview/link-preview.jsx

@@ -0,0 +1,41 @@
+import { getLinkPreview } from "link-preview-js"
+import { useState, useEffect } from "react"
+import styles from './link-preview.module.scss'
+import Image from "next/image"
+
+export default function LinkPreview({ title, description, link, theme }){
+    const [previewImglink, setPreviewImglink] = useState(null)
+    const [loading, setLoading] = useState(true)
+
+    useEffect(() => {
+        async function fetchPreview() {
+            setLoading(true)
+            try {
+                const data = await getLinkPreview(link)
+                setPreviewImglink(data.images[0])
+                setLoading(false)
+            } catch (error) {
+                console.error("Error fetching link preview:", error)
+            }
+        }
+
+        fetchPreview()
+    }, [link])
+
+    return(
+        <div className={`${theme=="light" ? styles.container_light : styles.container_dark}`}>
+            <p className={`${theme=="light" ? styles.title_light : styles.title_dark}`}>{title}</p>
+            {theme=="dark" &&
+                <p className={styles.description}>{description}</p>
+            }
+            {loading ? 
+                <div className={styles.loader} />
+                :
+                <div className={styles.img_wrapper}>
+                    <Image src={previewImglink} alt="slides-preview" fill={true}/>
+                </div>
+            }
+        </div>
+    )
+
+}

app/_components/link-preview/link-preview.module.scss

@@ -0,0 +1,60 @@
+.container_light, .container_dark {
+    height: 100%;
+    width: 100%;
+
+    padding: 32px;
+    text-align: left;
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    border-radius: 16px;
+    background-color: var(--foreground-light);
+
+    box-shadow: 0px 0px 50px 5px rgba(0, 0, 0, 0.05);
+}
+
+.container_dark {
+    background-color: var(--include-purple);
+}
+
+.title_light, .title_dark{
+    font-weight: 700;
+    color: var(--include-purple);
+    font-size: 1.5rem;
+}
+
+.title_dark, .description {
+    color: var(--text-light);
+}
+
+.description {
+    font-size: 1rem;
+}
+
+.img_wrapper {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1.5;
+
+    img {
+        border-radius: 16px;
+    }
+}
+
+.loader {
+    width: 100%;
+    aspect-ratio: 1.5;
+
+    animation: skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+    0% {
+      background-color: var(--background-dark);
+    }
+    100% {
+      background-color: var(--background-light);
+    }
+  }

app/_components/materials-lessons/materials.jsx

@@ -0,0 +1,28 @@
+import LinkPreview from '../link-preview/link-preview'
+import styles from './materials.module.scss'
+import Image from 'next/image'
+
+export default function Materials({ slideLink, recordingLink }) {
+    return (
+        <div className={styles.content}>
+            <div className={styles.filetab}>
+                <Image src="/navbar/filetab.svg" alt="File Tab Background" className={styles.filetabImage} fill={true} />
+            </div>
+            <h1>Materials</h1>
+            <p className={styles.description}>Refer to these workshop materials for this week&apos;s topics. These links will also be a great resource to come back to during the development of the client project!</p>
+            <div className={styles.materials}>
+                <div className={styles.link}>
+                    <LinkPreview title="Workshop Slides" link={slideLink} theme="light" />
+                </div>
+                <div className={styles.link}>
+                    <LinkPreview title="Workshop Recording" link={recordingLink} theme="light" />
+                </div>
+            </div>
+
+            <h1>Lessons</h1>
+            <p className={styles.description}>Here are a some helpful demos for important concepts from this week.</p>
+            {/* TODO: LESSONS SECTION */}
+
+        </div>
+    )
+}

app/_components/materials-lessons/materials.module.scss

@@ -0,0 +1,42 @@
+.content {
+    --skew-angle: -20deg;
+    --tab-width: 1000px;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    padding: 0 var(--edge-spacing);
+    padding-bottom: var(--edge-spacing);
+
+    background-color: var(--background-light);
+
+    color: var(--text-midtone);
+    text-align: center;
+    font-size: larger;
+
+    h1 {
+        margin-top: var(--edge-spacing);
+    }
+}
+
+.filetab {
+    position: absolute;
+    top: -63px;
+    right: 0px;
+    width: 365px;
+    height: 70px;
+}
+
+.materials {
+    display: flex;
+    justify-content: space-between;
+
+    width: 100%;
+}
+
+.link {
+    width: calc(50% - 20px);
+}

app/_components/weekly-timeline/weekly-timeline.module.scss

@@ -1,5 +1,3 @@
-$component-height: calc(8px * 142);
-
 .content {
     --skew-angle: -20deg;
     --tab-width: 1000px;
@@ -16,8 +14,8 @@ $component-height: calc(8px * 142);
     text-align: center;
     font-size: larger;
 
-    padding: var(--edge-spacing);
-    padding-top: calc(var(--edge-spacing) + var(--tab-height));
+    padding: calc(var(--edge-spacing) + var(--tab-height)) var(--edge-spacing);
+
 
     p {
         font-weight: 300;

app/_components/workshop-navigation/workshopNav.jsx

@@ -0,0 +1,24 @@
+import Link from "next/link"
+import styles from './workshopNav.module.scss'
+
+export default function WorkshopNav({ data, num }){
+    return(
+        <nav className={styles.workshopNav}>
+            { data.map((item, idx) => 
+                <div key={idx} className={styles.tabContainer}>
+                    <Link href={`/workshop/${idx+1}`} 
+                        className={[styles.navTab, (idx == 1) ? styles.firstNavTab : styles.laterNavTab, (idx == num)? styles.selectedTab : null].join(' ')}
+                    >
+                        {idx == num && <div className={styles.overlap}></div>}
+                        <p>{idx+1}: {item.title}</p>
+                    </Link>
+                    <div className={styles.dividerContainer}>
+                        {idx != num && idx!=4 && 
+                            <div className={styles.divider}></div>
+                        }
+                    </div>
+                </div>
+            ) }
+        </nav>
+    )
+}

app/_components/workshop-navigation/workshopNav.module.scss

@@ -0,0 +1,61 @@
+.workshopNav {
+    --skew-angle: 20deg;
+    --tab-width: 400px;
+    --max-nav-height: 100px;
+    font-size: 1.5rem;
+    background-color: var(--include-purple);
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    max-height: var(--max-nav-height);
+}
+
+.tabContainer {
+    color: white;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+}
+
+.navTab {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    padding-left: 40px;
+    transform: perspective(20px) skewx(var(--skew-angle));
+    flex-direction: row;
+    width: var(--tab-width);
+}
+
+.navTab > * {
+    transform: skewx(calc(var(--skew-angle) * -1));
+}
+
+.overlap {
+    position: absolute;
+    left: -15px;
+    background-color: white;
+    height: var(--max-nav-height);
+    height: 100px;
+    width: 30px;
+}
+
+.selectedTab {
+    background-color: white;
+    color: black;
+    font-weight: bold;
+}
+
+.dividerContainer {
+    transform: skewx(var(--skew-angle));
+    width: 2px;
+    margin: 8px 0;
+    display: flex;
+    align-items: stretch;
+}
+
+.divider {
+    flex: 1;
+    background-color: white;
+}

app/globals.scss

@@ -16,6 +16,8 @@
   --edge-spacing: 100px;
   --card-spacing: calc(8px * 10);
   --folder-tab-width: 1076px;
+  --folder-tab-height: 100px;
+  --folder-tab-cutout-width: 50px;
   --tab-height: 64px;
 
   --include-gradient: linear-gradient(90deg, #332950, #3C257E, #322D41);
@@ -37,3 +39,10 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+h3 {
+  font-weight: 700;
+  font-size: 3.25rem;
+  line-height: 3.625rem;
+  color: var(--text-midtone);
+}