Marqeeee wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

components/hackathons/moving-cards.js

@@ -0,0 +1,66 @@
+import Ticker from 'react-ticker'
+import { Avatar, Box, Card, Message, Text } from 'theme-ui'
+import Image from 'next/image'
+
+export default function MovingCards() {
+  const messageData = [
+    {
+      message: 'What sorts of prizes do you give out at a hackathon?',
+      username: 'ella'
+    },
+    {
+      message: 'how to organize a hackathon???????.',
+      username: 'ella'
+    },
+    {
+      message: 'how to get money for your hackathon??!??!?!??!!11!!!!!',
+      username: 'scrappy'
+    }
+  ]
+  return (
+    <>
+      <Ticker>
+        {() => (
+          <Box as="div" sx={{ display: 'flex' }}>
+            {messageData.map(({ id, message, username }) => (
+              <MessageCard key={id} message={message} username={username} />
+            ))}
+          </Box>
+        )}
+      </Ticker>
+    </>
+  )
+}
+
+function MessageCard({ message, username }) {
+  return (
+    <Card
+      sx={{
+        fontSize: 3,
+        mx: 2,
+        my: 4
+      }}
+    >
+      <Box as="span" sx={{ display: 'flex' }}>
+        {/* <Image
+          src={`https://scrapbook.hackclub.com/${username}.png`}
+          width={32}
+          height={32}
+          alt={`${username} profile picture`}
+        /> */}
+        <Avatar
+          src={`https://scrapbook.hackclub.com/${username}.png`}
+          alt={`${username} profile picture`}
+          sx={{
+            mr: 2,
+            width: 32,
+            height: 32
+          }}
+        />
+
+        <Text>@{username}</Text>
+      </Box>
+      {message}
+    </Card>
+  )
+}

next.config.js

@@ -10,6 +10,7 @@ const nextConfig = {
       'dl.airtable.com',
       'emoji.slack-edge.com',
       'cdn.glitch.com',
+      'scrapbook.hackclub.com',
       'cloud-k18c7grqc-hack-club-bot.vercel.app',
       'cloud-kcloydjv0-hack-club-bot.vercel.app',
       'cloud-dtijd5g0u-hack-club-bot.vercel.app'

package.json

@@ -36,6 +36,7 @@
     "react-masonry-css": "^1.0.16",
     "react-reveal": "^1.2.2",
     "react-scrolllock": "^5.0.1",
+    "react-ticker": "^1.3.2",
     "react-tsparticles": "^2.1.3",
     "react-use-websocket": "3.0.0",
     "resnow": "^1.0.0",

pages/hackathons.js

@@ -8,6 +8,7 @@ import Footer from '../components/footer'
 import Landing from '../components/hackathons/landing'
 import Rundown from '../components/hackathons/rundown'
 import Content from '../components/hackathons/content.mdx'
+import MovingCards from '../components/hackathons/moving-cards'
 import Cta from '../components/hackathons/cta'
 
 export default function Bank() {
@@ -66,7 +67,7 @@ export default function Bank() {
               From the Slack...
             </Text>
             <Heading as="h2" variant="title">
-              Mhmm yeah gadzooks{' '}
+              A hackathon organizer's{' '}
               <Text
                 as="span"
                 sx={{
@@ -74,14 +75,14 @@ export default function Bank() {
                   px: 2,
                   mx: [-2, 0],
                   whiteSpace: 'nowrap',
-                  color: '#5d114c',
-                  bg: 'rgb(255, 212, 64)'
+                  color: 'white',
+                  bg: '#6f31b7'
                 }}
               >
-                magic
+                best friend
               </Text>
-              .
             </Heading>
+            <MovingCards />
             <Grid
               columns={[null, null, 2]}
               gap={[3, 4]}

yarn.lock

@@ -3364,6 +3364,11 @@ react-scrolllock@^5.0.1:
   dependencies:
     exenv "^1.2.2"
 
+react-ticker@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.3.2.tgz#5b8e486a7a7c5c4dd4076bdbabb3efaa31932ef7"
+  integrity sha512-9sLgc9gFx/EMNxn2QcwUJAOf3jdEROKRyXZGbWrEbfJG/MTkHwR+WRrVtypv3iFXPpcrKmPD91+vatHq0BgR0Q==
+
 react-tsparticles@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/react-tsparticles/-/react-tsparticles-2.1.3.tgz#45e570d869c3b26760525d8dcc52ea5cc8095f0c"