Experiment with row component on philosophy page

components/hackathons/moving-cards.js

@@ -50,6 +50,16 @@ export default function MovingCards() {
           </Box>
         )}
       </Ticker>
+
+      <Ticker direction="toRight">
+        {() => (
+          <Box as="div" sx={{ display: 'flex' }}>
+            {messageData.map(({ id, message, username }) => (
+              <MessageCard key={id} message={message} username={username} />
+            ))}
+          </Box>
+        )}
+      </Ticker>
     </>
   )
 }

components/hackathons/philosophy.js

@@ -0,0 +1,59 @@
+import { Heading, Container, Box } from 'theme-ui'
+
+export default function Philosophy() {
+  return (
+    <>
+      <Container
+        sx={{
+          px: 3,
+          py: [4, 5],
+          color: 'black',
+          display: 'grid',
+          textAlign: 'left',
+          h2: {
+            lineHeight: 1,
+            marginBottom: '18px'
+          },
+          gridTemplateColumns: ['1fr', null, '2fr 3fr']
+        }}
+      >
+        <Heading as="h2" sx={{ fontSize: [36, 48] }} color="rgb(115, 45, 228);">
+          Wack hack wack!
+        </Heading>
+        <Box sx={{ fontSize: [3, 3] }}>
+          <strong>The goal of Hack Club is to help you become a hacker.</strong>{' '}
+          We want a space at every school where people are making interesting
+          things with code, every week. Schools don’t provide that, so we’re
+          creating it in every school to make building things accessible to
+          everyone.
+        </Box>
+      </Container>
+
+      <Container
+        sx={{
+          px: 3,
+          py: [4, 5],
+          color: 'black',
+          display: 'grid',
+          textAlign: 'left',
+          h2: {
+            lineHeight: 1,
+            marginBottom: '18px'
+          },
+          gridTemplateColumns: ['1fr', null, '2fr 3fr']
+        }}
+      >
+        <Heading as="h2" sx={{ fontSize: [36, 48] }} color="rgb(22, 209, 219);">
+          Wack hack wack!
+        </Heading>
+        <Box sx={{ fontSize: [3, 3] }}>
+          <strong>The goal of Hack Club is to help you become a hacker.</strong>{' '}
+          We want a space at every school where people are making interesting
+          things with code, every week. Schools don’t provide that, so we’re
+          creating it in every school to make building things accessible to
+          everyone.
+        </Box>
+      </Container>
+    </>
+  )
+}

components/hackathons/rundown.js

@@ -87,8 +87,8 @@ export default function Rundown() {
           <Stage
             icon="event-check"
             color="white"
-            name="Attendees"
-            desc="You'll have the opportunity to be listed on the front page of hackathons.hackclub.com, something about email list, and maybe the site haivng good seo?."
+            name="Marketing"
+            desc="Listed on the front page of hackathons.hackclub.com & email blasted to subscriber list of xx."
           />
         </Card>
       </Grid>

pages/hackathons.js

@@ -10,6 +10,7 @@ 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'
+import Philosophy from '../components/hackathons/philosophy'
 
 export default function Bank() {
   return (
@@ -54,6 +55,8 @@ export default function Bank() {
             </Text>
           </Container>
 
+          <Philosophy />
+
           {/* what hack club (community) is providing to hackathon organizers */}
           <Container as="section">
             <Rundown />