about us archives

app/(pages)/about-us/_components/Archives/Archive.module.scss

@@ -0,0 +1,39 @@
+@import '@globals/styles/mixins.scss';
+
+$heights: 200px;
+$heights-mobile: 150px;
+
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    > div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+}
+
+.package_container {
+    position: relative;
+}
+
+.package_src {
+    height: $heights;
+    width: auto;
+    z-index: 5;
+    @include phone {
+        height: $heights-mobile;
+    }
+}
+
+.vinyl_src {
+    position: absolute;
+    height: calc(0.94 * $heights);
+    width: auto;
+    left: 50%;
+    @include phone {
+        height: calc(0.94 * $heights-mobile);
+    }
+}

app/(pages)/about-us/_components/Archives/Archive.tsx

@@ -0,0 +1,29 @@
+import { StaticImport } from 'next/dist/shared/lib/get-img-props';
+import styles from './Archive.module.scss';
+import Image from 'next/image';
+import Link from 'next/link';
+
+interface ArchiveProps {
+  packageSrc: StaticImport;
+  vinylSrc: StaticImport;
+  alt: string;
+  link: string;
+}
+
+export default function Archive({
+  packageSrc,
+  vinylSrc,
+  alt,
+  link,
+}: ArchiveProps) {
+  return (
+    <Link href={link} target="_blank" className={styles.container}>
+      <div className={styles.package_container}>
+        <Image src={packageSrc} alt={alt} className={styles.package_src} />
+        {/* <div className={styles.vinyl_container}> */}
+        <Image src={vinylSrc} alt={alt} className={styles.vinyl_src} />
+        {/* </div> */}
+      </div>
+    </Link>
+  );
+}

app/(pages)/about-us/_components/Archives/Archives.module.scss

@@ -0,0 +1,75 @@
+@import '@globals/styles/mixins.scss';
+
+$content-gap: 48px;
+$padding-y: 90px;
+$padding-y-mobile: 45px;
+$padding-x: 130px;
+$padding-x-mobile: 13%;
+
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: $padding-y;
+    padding: $padding-y 0;
+
+    margin-top: 500px;
+
+    @include phone {
+        gap: $padding-y-mobile;
+    }
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 $padding-x;
+
+        @include phone{
+            padding: 0px $padding-x-mobile;
+        }
+
+        .title {
+            color: #123041;
+            font-family: var(--font-metropolis);
+            font-size: 3rem;
+            font-weight: 700;
+            @include phone{
+                font-size: 2.25rem;
+            }
+        }
+
+        .arrows_desktop{
+            @include phone {
+                visibility: hidden;
+                display: none;
+            }
+        }
+    }
+
+    .arrows_mobile{
+        visibility: hidden;
+        display: none;
+        position: relative;
+        top: -75px;
+        @include phone {
+            visibility: visible;
+            display: unset;
+            padding: 0 $padding-x-mobile;
+        }
+    }
+
+    .progress_container {
+        padding: 0 $padding-x;
+        z-index: 2;
+        @include phone{
+            margin: 0 25%;
+            padding: 0px;
+        }
+        @include sm-phone{
+            margin: 0 30%;
+        }
+
+    }
+}

app/(pages)/about-us/_components/Archives/Archives.tsx

@@ -0,0 +1,116 @@
+import styles from './Archives.module.scss';
+import CarouselContextProvider from '@pages/about-us/_contexts/CarouselContext';
+import CarouselArrows from './CarouselArrows';
+import CarouselWindow from './CarouselWindow';
+import CarouselProgress from './CarouselProgress';
+import Archive from './Archive';
+
+import package2017 from '@public/aboutUs/archives/2017-packaging.png';
+import vinyl2017 from '@public/aboutUs/archives/2017-vinyl.svg';
+import package2018 from '@public/aboutUs/archives/2018-packaging.png';
+import vinyl2018 from '@public/aboutUs/archives/2018-vinyl.svg';
+import package2019 from '@public/aboutUs/archives/2019-packaging.png';
+import vinyl2019 from '@public/aboutUs/archives/2019-vinyl.svg';
+import package2020 from '@public/aboutUs/archives/2020-packaging.png';
+import vinyl2020 from '@public/aboutUs/archives/2020-vinyl.svg';
+import package2021 from '@public/aboutUs/archives/2021-packaging.png';
+import vinyl2021 from '@public/aboutUs/archives/2021-vinyl.svg';
+import package2022 from '@public/aboutUs/archives/2022-packaging.png';
+import vinyl2022 from '@public/aboutUs/archives/2022-vinyl.svg';
+import package2023 from '@public/aboutUs/archives/2023-packaging.png';
+import vinyl2023 from '@public/aboutUs/archives/2023-vinyl.svg';
+import package2024 from '@public/aboutUs/archives/2024-packaging.png';
+import vinyl2024 from '@public/aboutUs/archives/2024-vinyl.svg';
+
+const archives = [
+  {
+    year: 2017,
+    packageSrc: package2017,
+    vinylSrc: vinyl2017,
+    alt: 'Vinyl record representing 2017 HackDavis hackathon',
+    link: 'https://2017.hackdavis.io/',
+  },
+  {
+    year: 2018,
+    packageSrc: package2018,
+    vinylSrc: vinyl2018,
+    alt: 'Vinyl record representing 2018 HackDavis hackathon',
+    link: 'https://2018.hackdavis.io/',
+  },
+  {
+    year: 2019,
+    packageSrc: package2019,
+    vinylSrc: vinyl2019,
+    alt: 'Vinyl record representing 2019 HackDavis hackathon',
+    link: 'https://2019.hackdavis.io/',
+  },
+  {
+    year: 2020,
+    packageSrc: package2020,
+    vinylSrc: vinyl2020,
+    alt: 'Vinyl record representing 2020 HackDavis hackathon',
+    link: 'https://2020.hackdavis.io/',
+  },
+  {
+    year: 2021,
+    packageSrc: package2021,
+    vinylSrc: vinyl2021,
+    alt: 'Vinyl record representing 2021 HackDavis hackathon',
+    link: 'https://2021.hackdavis.io/',
+  },
+  {
+    year: 2022,
+    packageSrc: package2022,
+    vinylSrc: vinyl2022,
+    alt: 'Vinyl record representing 2022 HackDavis hackathon',
+    link: 'https://2022.hackdavis.io/',
+  },
+  {
+    year: 2023,
+    packageSrc: package2023,
+    vinylSrc: vinyl2023,
+    alt: 'Vinyl record representing 2023 HackDavis hackathon',
+    link: 'https://2023.hackdavis.io/',
+  },
+  {
+    year: 2024,
+    packageSrc: package2024,
+    vinylSrc: vinyl2024,
+    alt: 'Vinyl record representing 2024 HackDavis hackathon',
+    link: 'https://2024.hackdavis.io/',
+  },
+];
+
+export default function Archives() {
+  return (
+    <CarouselContextProvider>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <h2 className={styles.title}>From the archive</h2>
+          <div className={styles.arrows_desktop}>
+            <CarouselArrows />
+          </div>
+        </div>
+        <CarouselWindow>
+          {archives
+            .toReversed()
+            .map(({ year, packageSrc, vinylSrc, alt, link }) => (
+              <Archive
+                key={year}
+                packageSrc={packageSrc}
+                vinylSrc={vinylSrc}
+                alt={alt}
+                link={link}
+              />
+            ))}
+        </CarouselWindow>
+        <div className={styles.progress_container}>
+          <CarouselProgress />
+        </div>
+        <div className={styles.arrows_mobile}>
+          <CarouselArrows />
+        </div>
+      </div>
+    </CarouselContextProvider>
+  );
+}

app/(pages)/about-us/_components/Archives/CarouselArrows.module.scss

@@ -0,0 +1,41 @@
+@import '@globals/styles/mixins.scss';
+
+$button-width: 48px;
+$gray-arrow: #929292;
+$gray-button: #DBDBDB;
+$active-arrow: #123041;
+$active-button: #9DE7E5;
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 24px;
+
+    @include phone {
+        justify-content: space-between;
+    }
+
+    > button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: $button-width;
+        aspect-ratio: 1;
+        border-radius: 50%;
+        cursor: pointer;
+        padding: 16px;
+        color: $gray-arrow;
+        background-color: $gray-button;
+        cursor: auto;
+
+        &.active {
+            color: $active-arrow;
+            background-color: $active-button;
+            cursor: pointer;
+        }
+
+        * {
+            height: 100%;
+        }
+    }
+}

app/(pages)/about-us/_components/Archives/CarouselArrows.tsx

@@ -0,0 +1,42 @@
+'use client';
+import styles from './CarouselArrows.module.scss';
+import { useCarouselContext } from '@pages/about-us/_hooks/useCarouselContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faChevronRight,
+  faChevronLeft,
+} from '@fortawesome/free-solid-svg-icons';
+
+export default function CarouselArrows() {
+  const { windowWidth, scroll, windowRef, contentWidth } = useCarouselContext();
+
+  const carouselWindow = windowRef?.current;
+
+  const scrollRight = () => {
+    carouselWindow?.scrollTo({
+      left: scroll + windowWidth / 2,
+      behavior: 'smooth',
+    });
+  };
+
+  const scrollLeft = () => {
+    carouselWindow?.scrollTo({
+      left: scroll - windowWidth / 2,
+      behavior: 'smooth',
+    });
+  };
+
+  const canGoLeft = scroll !== 0;
+  const canGoRight = scroll + windowWidth < contentWidth - 1;
+
+  return (
+    <div className={styles.container}>
+      <button onClick={scrollLeft} className={canGoLeft ? styles.active : ''}>
+        <FontAwesomeIcon icon={faChevronLeft} />
+      </button>
+      <button onClick={scrollRight} className={canGoRight ? styles.active : ''}>
+        <FontAwesomeIcon icon={faChevronRight} />
+      </button>
+    </div>
+  );
+}

app/(pages)/about-us/_components/Archives/CarouselProgress.module.scss

@@ -0,0 +1,17 @@
+$progressBarHeight: 12px;
+.full_bar {
+    position: relative;
+    width: 100%;
+    height: $progressBarHeight;
+    border-radius: calc($progressBarHeight / 2);
+    background: #B3B3B3;
+}
+
+.handle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: #123041;
+    cursor: pointer;
+    border-radius: calc($progressBarHeight / 2);
+}