chore: Reusable Marquee Component

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+### Changes
+
+-   Reusable `Marquee` Component
+
 ## [v1.0.1] - 12 January 2024
 
 ### What's New?

src/app/(home)/page.tsx

@@ -6,8 +6,8 @@ import Link from 'next/link';
 
 import { Message } from '@components/Message';
 import { AnimatedCounter as Counter } from '@components/AnimatedCount';
-import { BibataMarquee } from '@components/BibataMarquee';
-import { Heroes } from '@components/Heroes';
+import { Marquee } from '@components/Marquee';
+import { HeroesElements } from '@components/HeroesElements';
 import {
   AndroidLogo,
   BannerSVG,
@@ -185,7 +185,13 @@ export default function HomePage() {
       </section>
 
       <section className='mt-8'>
-        <BibataMarquee />
+        <Marquee count={3}>
+          <span className='mx-4 text-5xl sm:text-8xl font-black opacity-50 italic'>
+            <span className='text-blue-200'>BEEEEEE</span>
+            <span className='text-teal-100 ml-8'>BAAA</span>
+            <span className='text-blue-200 ml-8'>TAAAAAA...</span>
+          </span>
+        </Marquee>
       </section>
 
       <div className='container m-auto px-3'>
@@ -244,7 +250,10 @@ export default function HomePage() {
         <p className='section-subheading my-3'>
           The proficient team spearheading the Bibata.
         </p>
-        <Heroes />
+
+        <Marquee count={5}>
+          <HeroesElements />
+        </Marquee>
         <div className='flex justify-center my-3 mt-10'>
           <p className='section-subheading w-5/6 sm:w-2/3'>
             Bibata stands as a fully open-source platform, boasting actively

src/components/HeroesElements/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+
+import { HeroesCard as Card } from './card';
+import { HeroesSponsors as Sponsors } from './sponsors';
+
+type Props = {};
+
+// eslint-disable-next-line no-unused-vars
+export const HeroesElements: React.FC<Props> = (_props) => {
+  return (
+    <div className='inline-flex'>
+      <Card
+        imgUrl='https://avatars.githubusercontent.com/u/24286590?v=4'
+        link='https://github.com/ful1e5'
+        name='Abdulkaiz Khatri'
+        role='Founder'
+        special={true}
+      />
+      <Card
+        imgUrl='https://avatars.githubusercontent.com/u/9919?v=4'
+        link='https://github.com/github'
+        name='GitHub'
+        role='One-time Sponsor'
+        classes='p-5'
+      />
+      <Card
+        imgUrl='https://avatars.githubusercontent.com/u/107184?v=4'
+        link='https://github.com/linuxmint'
+        name='Linux Mint'
+        role='One-time Sponsor'
+        classes='p-10'
+      />
+
+      <Sponsors />
+
+      <Card
+        imgUrl='https://avatars.githubusercontent.com/u/43558271?v=4'
+        link='https://github.com/Silicasandwhich'
+        name='Daniel Brown'
+        role='Contributor'
+      />
+      <Card
+        imgUrl='https://avatars.githubusercontent.com/u/5437803?v=4'
+        link='https://github.com/yochananmarqos'
+        name='Mark Wagie'
+        role='Contributor'
+      />
+      <Card
+        imgUrl='https://avatars.githubusercontent.com/u/22453358?v=4'
+        link='https://github.com/shatur'
+        name='Hennadii Chernyshchyk'
+        role='Contributor'
+      />
+      <Card
+        imgUrl='https://avatars.githubusercontent.com/u/584751?v=4'
+        link='https://github.com/peterwu'
+        name='Peter Wu'
+        role='Contributor'
+      />
+    </div>
+  );
+};

src/components/Marquee.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+
+type Props = {
+  count: number;
+  children: React.ReactNode;
+};
+
+export const Marquee: React.FC<Props> = (props) => {
+  const List: React.FC = () => {
+    const counts = Array.from(new Array(props.count), (_, i) => i + 1);
+    return (
+      <>
+        {counts.map((key) => (
+          <span key={key}>{props.children}</span>
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <div className='relative flex overflow-x-hidden'>
+      <div className='py-12 animate-marquee whitespace-nowrap'>
+        <List />
+      </div>
+
+      <div className='absolute top-0 py-12 animate-marquee2 whitespace-nowrap'>
+        <List />
+      </div>
+    </div>
+  );
+};