Feat/crowdfund donors

app/(pages)/(index-page)/_components/Crowdfund/Crowdfund.module.scss

@@ -0,0 +1,81 @@
+@import '@globals/styles/mixins.scss';
+
+.container {
+  display: flex;
+  padding: 5% 0%;
+  width: 100%;
+  background-color: var(--water-background);
+  overflow-x: clip;
+  position: relative;
+  flex-direction: column;
+
+  @include sm-desktop {
+    padding-top: 5%;
+  }
+
+  @include tablet {
+    padding-top: 10%;
+  }
+
+  @include phone {
+    padding-top: 15%;
+  }
+
+  .heading {
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 1%;
+
+    h1 {
+      color: var(--text-light);
+      font-size: 40px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 125%;
+      letter-spacing: 0.8px;
+      text-align: center;
+      display: flex;
+
+      @include tablet {
+        font-size: 30px;
+      }
+
+      @include sm-tablet {
+        font-size: 25px;
+      }
+
+      @include sm-phone {
+        font-size: 13px;
+      }
+    }
+
+    .heartIcon {
+      padding-left: 10px;
+      width: 40px;
+      height: 40px;
+      font-weight: 800;
+      aspect-ratio: 1/1;
+      color: var(--text-light);
+
+      @include sm-tablet {
+        width: 30px;
+        height: 30px;
+      }
+
+      @include phone {
+        width: 25px;
+        height: 25px;
+      }
+    }
+  }
+}
+
+.sponsors {
+  display: flex;
+  align-items: center;
+  background-color: var(--water-background);
+  z-index: 0;
+}

app/(pages)/(index-page)/_components/Crowdfund/Crowdfund.tsx

@@ -0,0 +1,71 @@
+// import Image from 'next/image';
+import CrowdfundCarousel from './_components/CrowdfundCarousel/CrowdfundCarousel';
+import styles from './Crowdfund.module.scss';
+import { LuHeart } from 'react-icons/lu';
+
+const supportersLine1 = [
+  'Aarav Gambhir',
+  'Aland Liu',
+  'Alice Heng',
+  'Alison Young',
+  'Anthony Thomas',
+  'April Fallon',
+  'Arun Pratap Singh',
+  'Bill Mead',
+  'Caitlyn Wong',
+  'Cambria Yang',
+  'Carlos Alvarez Vereterra',
+  'Chelsea Lai',
+  'Dilip Mandadi',
+  'Elizabeth White',
+  'Eric Lin',
+  'Fiona Phongsa',
+  'Glenda Drew',
+  'Hung-Ta Chen',
+  'Jason Bui',
+  'Jason Xie',
+  'Joël Porquet-Lupine',
+  'Katerina Rahhal',
+  'Lana Wong',
+];
+
+const supportersLine2 = [
+  'Michelle Feng',
+  'Murali Krishna Bachhu',
+  'Peter Webster',
+  'Pragati Satpute',
+  'Raju Dandigam',
+  'Raman Dhir',
+  'Ravi Sandhu',
+  'Ritu Prajapati',
+  'Rushil Patel',
+  'Sam Poder',
+  'Sasikala Sasikumar',
+  'Sauvikesh Lal',
+  'Shashank Kapadia',
+  'Sreeprasad Govindankutty',
+  'Srinivasa Rao Bittla',
+  'Tarini Maram',
+  'Tiffany Chac',
+  'Trisha Baadkar',
+  'Vamsi Chagari',
+  'Vivek Sandhu',
+  'Win Cheng',
+];
+
+export default function Crowdfund() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.heading}>
+        <h1>And a special thanks to our donors</h1>
+        <LuHeart className={styles.heartIcon} />
+      </div>
+      <div className={styles.sponsors}>
+        <CrowdfundCarousel
+          supportersLine1={supportersLine1}
+          supportersLine2={supportersLine2}
+        />
+      </div>
+    </div>
+  );
+}

app/(pages)/(index-page)/_components/Crowdfund/_components/CrowdfundCarousel/CrowdfundCarousel.module.scss

@@ -0,0 +1,18 @@
+@import '@globals/styles/mixins.scss';
+
+.container{
+    display: flex;
+    flex-direction: column;
+
+    .supportText {
+        color: #FFF;
+        text-align: center;
+        font-family: "Metropolis";
+        font-size: 50px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 60px;
+        letter-spacing: 1px;
+        margin-top: 2%;
+    }
+}

app/(pages)/(index-page)/_components/Crowdfund/_components/CrowdfundCarousel/CrowdfundCarousel.tsx

@@ -0,0 +1,31 @@
+import Marquee from '../Marquee/Marquee';
+import styles from './CrowdfundCarousel.module.scss';
+
+type CrowdfundCarouselProps = {
+  supportersLine1: string[];
+  supportersLine2: string[];
+};
+
+export default function CrowdfundCarousel({
+  supportersLine1,
+  supportersLine2,
+}: CrowdfundCarouselProps) {
+  return (
+    <div className={styles.container}>
+      <Marquee iterations={2} duration={50}>
+        {supportersLine1.map((name, index) => (
+          <span key={`line1-${index}`} className={styles.supporterName}>
+            {name}
+          </span>
+        ))}
+      </Marquee>
+      <Marquee iterations={2} reverse duration={50}>
+        {supportersLine2.map((name, index) => (
+          <span key={`line2-${index}`} className={styles.supporterName}>
+            {name}
+          </span>
+        ))}
+      </Marquee>
+    </div>
+  );
+}

app/(pages)/(index-page)/_components/Crowdfund/_components/Marquee/Logo.module.scss

@@ -0,0 +1,40 @@
+@import '@globals/styles/mixins.scss';
+
+.container {
+  background: var(--card-background);
+  border-radius: 10px;
+  transition: transform 0.2s ease-in-out;
+
+    &:hover {
+      // cursor: pointer;
+      transform: scale(1.05);
+    }
+
+  > a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 350px;
+    height: 250px;
+    padding: 20px 40px;
+
+    @include phone {
+      width: 245px;
+      height: 140px;
+      padding: 10px 20px;
+    }
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+
+    &.tall {
+      width: auto;
+      height: 100%;
+      max-height: initial;
+      max-width: 100%;
+    }
+  }
+}

app/(pages)/(index-page)/_components/Crowdfund/_components/Marquee/Logo.tsx

@@ -0,0 +1,28 @@
+import Image, { StaticImageData } from 'next/image';
+import React from 'react';
+import styles from './Logo.module.scss';
+
+interface LogoOptions {
+  imgSrc: StaticImageData;
+  url: string;
+  alt: string;
+}
+
+const Logo = ({ imgSrc, url, alt }: LogoOptions) => {
+  const imgClass = imgSrc.width / imgSrc.height < 1.75 ? styles.tall : '';
+
+  if (!imgSrc.blurDataURL) {
+    imgSrc.blurDataURL =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8vx8AAsMBwDLzsnQAAAAASUVORK5CYII=';
+  }
+
+  return (
+    <li className={styles.container}>
+      <a href={url} target="_blank" rel="noreferrer">
+        <Image src={imgSrc} alt={alt} className={imgClass} />
+      </a>
+    </li>
+  );
+};
+
+export default Logo;

app/(pages)/(index-page)/_components/Crowdfund/_components/Marquee/Marquee.module.scss

@@ -0,0 +1,84 @@
+@import '@globals/styles/mixins.scss';
+
+.marquee {
+  --gap: 36px;
+  --scroll-start: 0;
+  --scroll-end: calc(-100%);
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+  padding: 10px 0px 10px 0px;
+  width: 100%;
+  margin: auto;
+  mask-image: linear-gradient(
+    var(--mask-direction, to right),
+    hsl(0 0% 0% / 0),
+    hsl(0 0% 0% / 1) 20%,
+    122537 80%,
+    hsl(0 0% 0% / 0)
+  );
+
+  ul {
+    animation-duration: 150s !important;
+  }
+
+  &:hover .marqueeGroup {
+    animation-play-state: paused;
+  }
+
+  @include phone {
+    --gap: 20px
+  }
+}
+
+
+.marqueeGroup {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-around;
+  list-style: none;
+	margin-left: 0;
+	padding-left: 0;
+  margin-right: var(--gap);
+  animation: scroll 20s linear infinite;
+
+  > * {
+    margin-right: 28px;
+    padding: 12px 24px;
+    border-radius: 108.865px;
+    border: 1px solid rgba(255, 255, 255, 0.70);
+    background: rgba(255, 255, 255, 0.20);
+    backdrop-filter: blur(5px);
+    color: var(--text-light);
+    text-align: center;
+    font-family: Metropolis;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 125%;
+    letter-spacing: 0.32px;
+
+    @include tablet {
+      padding: 5px 15px;
+    }
+  }
+
+  > *:last-child {
+    margin-right: 0;
+  }
+
+  &.reverse {
+    animation-direction: reverse;
+    animation-delay: -3s;
+  }
+}
+
+@keyframes scroll {
+  from {
+    transform: translateX(var(--scroll-start));
+  }
+  to {
+    transform: translateX(var(--scroll-end));
+  }
+}