add carousel

components/Carousel.tsx

@@ -17,27 +17,27 @@ const Carousel = (props: CarouselProps) => {
 
   return (
     <div className="flex justify-between">
-      <div className="hidden md:block my-auto w-16 h-16 rounded-full bg-blue text-white">
+      <div className="hidden md:block my-auto w-16 h-16 rounded-full text-blue">
         <ChevronLeftIcon className="h-16 w-12 cursor-pointer mx-auto" onClick={() => updateIndex(-1)} />
       </div>
       <div className="md:w-4/5">
         {children[slideIndex]}
         <div className="flex justify-center space-x-2 mt-2">
-          <div className="md:hidden my-auto w-8 h-8 rounded-full bg-blue text-white">
+          <div className="md:hidden my-auto w-8 h-8 rounded-full text-blue">
             <ChevronLeftIcon className="h-8 w-6 cursor-pointer mx-auto" onClick={() => updateIndex(-1)} />
           </div>
           {children.map((_, i) => {
-            const outlineCircle = 'w-5 h-5 border-2 border-blue rounded-full cursor-pointer self-center';
+            const outlineCircle = 'w-4 h-4 mt-3 border-2 border-blue rounded-full cursor-pointer self-center';
             const circle = i === slideIndex ? `${outlineCircle} bg-blue` : outlineCircle;
             // eslint-disable-next-line react/no-array-index-key
             return <div key={i} className={circle} onClick={() => setSlideIndex(i)} aria-hidden="true">&nbsp;</div>;
           })}
-          <div className="md:hidden my-auto w-8 h-8 rounded-full bg-blue text-white">
+          <div className="md:hidden my-auto w-8 h-8 rounded-full text-blue">
             <ChevronRightIcon className="h-8 w-6 cursor-pointer mx-auto" onClick={() => updateIndex(1)} />
           </div>
         </div>
       </div>
-      <div className="hidden md:block my-auto w-16 h-16 rounded-full bg-blue text-white">
+      <div className="hidden md:block my-auto w-16 h-16 rounded-full text-blue">
         <ChevronRightIcon className="h-16 w-12 cursor-pointer mx-auto" onClick={() => updateIndex(1)} />
       </div>
     </div>

pages/about.tsx

@@ -7,6 +7,7 @@ import { InfoCardItem, MemberCardItem } from '../utils/types';
 import ImageCard from '../components/ImageCard';
 import MemberCard from '../components/MemberCard';
 import InfoCard from '../components/InfoCard';
+import Carousel from '../components/Carousel';
 
 interface AboutProps {
   page: {
@@ -37,7 +38,11 @@ const About = (props: AboutProps) => {
           <p>{page.description}</p>
         </section>
 
-        <ImageCard img="/photos/showcase-2019.png" alt="Club Showcase 2019" />
+        <Carousel>
+          <ImageCard img="/photos/showcase-2019.png" alt="Club Showcase 2019" />
+          <ImageCard img="/photos/beach-cleanup.jpg" alt="Beach Cleanup 2022" />
+          <ImageCard img="/photos/outlook.jpg" alt="Outlook from the P" />
+        </Carousel>
 
         <section className="flow-root space-y-6 md:space-y-10">
           <h2>Our events</h2>