more illustrations!

package.json

@@ -61,6 +61,7 @@
     "react-responsive-carousel": "^3.2.23",
     "react-reveal": "^1.2.2",
     "react-scrolllock": "^5.0.1",
+    "react-slick": "^0.29.0",
     "react-snowfall": "^1.2.1",
     "react-ticker": "^1.3.2",
     "react-tooltip": "^4.5.1",

pages/slack.js

@@ -24,7 +24,7 @@ import { thousands } from '../lib/members'
 import { useRef, useState } from 'react'
 import { gsap } from 'gsap'
 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
-import 'react-responsive-carousel/lib/styles/carousel.min.css'
+import Slider from "react-slick";
 
 const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
@@ -293,7 +293,7 @@ const SlackPage = () => {
           Where the makers hang out...
         </Text>
       </Container>
-        <Flex
+        <Grid
           sx={{
             backgroundColor: '#f9fafc',
             justifyItems: 'center',
@@ -301,13 +301,13 @@ const SlackPage = () => {
           }}
           className="container"
         >
-          <Carousel>
-            <Container>
+          <Container>
             <Project
               title="Brainwave device for thought-based computer interaction."
               description="BCI&apos;s team organizes in #nest Velit voluptate deserunt
                   consequat. Velit voluptate deserunt consequat.Velit voluptate
                   deserunt consequat."
+              img="bci"
               color={['#ec3750', '#F58695']}
             />
               <Project
@@ -315,6 +315,7 @@ const SlackPage = () => {
                   description="Obl.ong’s team organizes in #oblong Velit voluptate deserunt
                     consequat. Velit voluptate deserunt consequat.Velit voluptate
                     deserunt consequat."
+                  img="oblong"
                   color={['#ff8c37', '#F2A510']}
               />
               <Project
@@ -322,6 +323,7 @@ const SlackPage = () => {
                   description="Burrow&apos;s team organizes in #burrow Velit voluptate deserunt
                     consequat. Velit voluptate deserunt consequat.Velit voluptate
                     deserunt consequat."
+                  img="nest"
                   color={['#f1c40f', '#FAE078']}
               />
               <Project
@@ -329,7 +331,7 @@ const SlackPage = () => {
                   description="Nest&apos;s team organizes in #nest Velit voluptate deserunt
                     consequat. Velit voluptate deserunt consequat.Velit voluptate
                     deserunt consequat."
-                    img="nest"
+                  img="nest"
                   color={['#33d6a6', '#51F5C5']}
               />
               <Project
@@ -337,12 +339,11 @@ const SlackPage = () => {
                   description="Nest&apos;s team organizes in #nest Velit voluptate deserunt
                     consequat. Velit voluptate deserunt consequat.Velit voluptate
                     deserunt consequat."
-                    img="purplebubble"
+                  img="purplebubble"
                   color={['#5bc0de', '#88e5f8']}
               />
-              </Container>
-            </Carousel>
-        </Flex>
+          </Container>
+        </Grid>
       <Container sx={{ py: [4, 5] }}>
         <Flex sx={{ gap: '2rem' }}>
           <Quote
@@ -418,9 +419,9 @@ function Project({ title, description, sx, color, img }) {
     <Box
       sx={{
         display: 'grid',
+        gridTemplateRows: '1fr auto',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: 'white',
         rounded: 'lg',
         borderRadius: 12,
         my: '2rem',
@@ -428,15 +429,15 @@ function Project({ title, description, sx, color, img }) {
         color: 'white',
         textAlign: 'left',
         width: 'full',
+        overflow: 'clip',
         sx
       }}
-      className='embla__slide'
     >
-      <Box sx={{ paddingX: '32px', paddingTop: '10rem', paddingBottom: '2rem' }}>
-        <Text as="h1" variant="title" sx={{ width: 'copyUltra', }}>
+      <Box sx={{ paddingX: '32px', marginTop: '12.5rem', marginBottom: '', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+        <Text as="h1" variant="title" sx={{ width: 'copyUltra', textAlign: 'center' }}>
           {title}
         </Text>
-        <Text as="p" variant="subtitle" sx={{ width: 'copyPlus', opacity: '75%' }}>
+        <Text as="p" variant="subtitle" sx={{ width: 'copyPlus', opacity: '75%', textAlign: 'center' }}>
           {description}
         </Text>
       </Box>
@@ -457,11 +458,21 @@ function Quote({ text, person, age, location }) {
   )
 }
 
-function Carousel({ children }) {
+function CarouselComponent({ children }) {
+  var settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    centerMode: true,
+    focusOnSelect: true
+  }
+
   return (
-    <Flex sx={{ overscrollBehaviorX: 'auto' }}>
+    <Slider {...settings}>
       {children}
-    </Flex>
+    </Slider>
   )
 }
 

yarn.lock

@@ -3707,6 +3707,11 @@ enhanced-resolve@^5.10.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@@ -5383,6 +5388,13 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
+  dependencies:
+    string-convert "^0.2.0"
+
 json5@^1.0.1, json5@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
@@ -6638,6 +6650,17 @@ react-scrolllock@^5.0.1:
   dependencies:
     exenv "^1.2.2"
 
+react-slick@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb"
+  integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react-smooth@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.1.tgz"
@@ -6990,6 +7013,11 @@ request@2.88.0:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -7338,6 +7366,11 @@ stream-parser@^0.3.1:
   dependencies:
     debug "2"
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
+
 string-hash@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"