Initial work on hackathons page

* Stage component(for the icons in the gradient cards) * Make Scroll-hint component shared between hackathons and bank * Add hackathons to nav * layout for landing and rundown on hacakthons page
2026-04-19 15:18:18 +00:00 · 2022-07-22 12:14:34 -04:00 · 2022-07-22 12:14:34 -04:00 · c2a8beb4bd
commit c2a8beb4bd
parent 3f9654cf03
9 changed files with 294 additions and 48 deletions
--- a/components/bank/landing.js
+++ b/components/bank/landing.js
@ -1,6 +1,6 @@
 import { Box, Button, Heading, Link, Text, Container, Badge } from 'theme-ui'
 import Fade from 'react-reveal/Fade'
-import ScrollHint from './scroll-hint'
+import ScrollHint from '../scroll-hint'
 import Image from 'next/image'
 import hero from '../../public/bank/bg.webp'

--- a/components/hackathons/landing.js
+++ b/components/hackathons/landing.js
@ -0,0 +1,128 @@
+import { Box, Button, Heading, Link, Text, Container, Badge } from 'theme-ui'
+import Fade from 'react-reveal/Fade'
+import ScrollHint from '../scroll-hint'
+import Image from 'next/image'
+import hero from '../../public/bank/bg.webp'
+
+export default function Landing() {
+  return (
+    <>
+      <Vignette />
+      <Slide>
+        <Box as="main" key="main">
+          <Box
+            sx={{
+              zIndex: '5',
+              position: 'relative',
+              marginTop: '-400px'
+            }}
+          >
+            <Container
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                textAlign: 'center',
+                color: 'white',
+                maxWidth: [null, null, 'copyPlus', 'copyUltra'],
+                p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
+              }}
+              variant="ultratitle"
+            >
+              <Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+                This semester, we're helping to kickstart
+              </Text>
+              <Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
+                A renaissance of IRL{' '}
+                <Highlight>high school hackathons.</Highlight>
+              </Heading>
+              <Text as="p" variant="subtitle">
+                lakjsdf;lajsdf;lkjasd;lfja;sldkjfalskdjf;l
+              </Text>
+            </Container>
+            <br />
+            <ScrollHint />
+          </Box>
+
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              bottom: 0,
+              right: 0,
+              zIndex: -1
+            }}
+          >
+            <Image src={hero} alt="" layout="fill" objectFit="cover" />
+          </Box>
+        </Box>
+      </Slide>
+    </>
+  )
+}
+
+function Slide({ children }) {
+  return (
+    <Box
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'end',
+        width: '100vw',
+        backgroundSize: 'cover',
+        backgroundColor: '#000000',
+        boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '100%',
+        minHeight: '80vh',
+        position: 'relative'
+      }}
+    >
+      <Image
+        src="https://cloud-dtijd5g0u-hack-club-bot.vercel.app/020191026_151117__1_.jpg"
+        layout="fill"
+        objectFit="cover"
+        alt="woof"
+        // placeholder="blur"
+        priority
+      />
+      {children}
+    </Box>
+  )
+}
+
+function Vignette() {
+  return (
+    <Box
+      style={{
+        backgroundImage:
+          'linear-gradient(to bottom,rgba(0, 0, 0, .6),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%)',
+        height: '80vh',
+        left: '0',
+        right: '0',
+        position: 'absolute',
+        zIndex: '1'
+      }}
+    ></Box>
+  )
+}
+
+function Highlight(props) {
+  return (
+    <Badge
+      as="mark"
+      sx={{
+        bg: '#FF62DC',
+        color: 'inherit',
+        fontSize: 'inherit',
+        display: 'inline-block',
+        borderRadius: 'default',
+        px: [2, 3],
+        py: 1,
+        ...props.sx
+      }}
+      {...props}
+    />
+  )
+}
--- a/components/hackathons/rundown.js
+++ b/components/hackathons/rundown.js
@ -0,0 +1,67 @@
+import { Card, Heading, Grid, Text } from 'theme-ui'
+import Stage from '../stage'
+
+export default function Rundown() {
+  return (
+    <Grid
+      pt={[3, 4]}
+      pb={[4, 5]}
+      gap={[4, 3, 4]}
+      columns={[1, null, 3]}
+      sx={{
+        textAlign: 'left',
+        '> a, > div': {
+          borderRadius: 'extra',
+          boxShadow: 'elevated',
+          px: [3, null, 4],
+          py: [4, null, 5]
+        },
+        span: {
+          boxShadow:
+            '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+        },
+        svg: { fill: 'currentColor' }
+      }}
+    >
+      <Card
+        sx={{
+          background: 'linear-gradient(-32deg, #6f31b7 14%, #fb558e 82%)',
+          color: 'white',
+          svg: { color: '#fb558e' }
+        }}
+      >
+        <Stage icon="sam" color="white" name="Slack community?" desc="yeah" />
+      </Card>
+      <Card
+        sx={{
+          background:
+            'linear-gradient(to bottom, rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)',
+          color: 'white',
+          svg: { color: 'rgb(236, 55, 80)' }
+        }}
+      >
+        <Stage
+          icon="bank-account"
+          color="white"
+          name="$0k in grants"
+          desc="Waived fees & grants for IRL hacakthons"
+        />
+      </Card>
+      <Card
+        sx={{
+          background:
+            'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
+          color: 'white',
+          svg: { color: 'rgb(51, 142, 218)' }
+        }}
+      >
+        <Stage
+          icon="event-check"
+          color="white"
+          name="Attendees"
+          desc="Somethingabout spreading the word about your IRL hackathon."
+        />
+      </Card>
+    </Grid>
+  )
+}
--- a/components/nav.js
+++ b/components/nav.js
@ -144,6 +144,9 @@ const Navigation = props => (
    <NextLink href="/bank" passHref>
      <Link>Bank</Link>
    </NextLink>
+    <NextLink href="/hackathons" passHref>
+      <Link>Hackathons</Link>
+    </NextLink>
    <NextLink href="/donate" passHref>
      <Link>Donate</Link>
    </NextLink>
--- a/components/bank/scroll-hint.js
+++ b/components/bank/scroll-hint.js
--- a/components/stage.js
+++ b/components/stage.js
@ -0,0 +1,41 @@
+import { Box, Heading, Text } from 'theme-ui'
+import Icon from '../components/icon'
+
+const Stage = ({ icon, color, name, desc, children, ...props }) => (
+  <Box {...props}>
+    {children || (
+      <Box
+        as="span"
+        sx={{
+          width: 'fit-content',
+          bg: color,
+          borderRadius: 18,
+          lineHeight: 0,
+          p: 2,
+          mb: 1,
+          display: 'inline-block',
+          transform: ['scale(0.75)', 'none'],
+          transformOrigin: 'bottom left',
+          boxShadow:
+            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
+        }}
+      >
+        <Icon glyph={icon} size={48} />
+      </Box>
+    )}
+    <Box>
+      <Heading as="h3" variant="headline" mb={2}>
+        {name}
+      </Heading>
+      <Text
+        as="p"
+        variant="subtitle"
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+      >
+        {desc}
+      </Text>
+    </Box>
+  </Box>
+)
+
+export default Stage
--- a/next.config.js
+++ b/next.config.js
@ -12,6 +12,7 @@ const nextConfig = {
      'cdn.glitch.com',
      'cloud-k18c7grqc-hack-club-bot.vercel.app',
      'cloud-kcloydjv0-hack-club-bot.vercel.app',
+      'cloud-dtijd5g0u-hack-club-bot.vercel.app'
    ]
  },
  webpack: (config, { isServer }) => {
@ -50,7 +51,11 @@ const nextConfig = {
      { source: '/hack_camp/', destination: '/camp/', permanent: true },
      { source: '/branding/', destination: '/brand/', permanent: true },
      { source: '/ama/', destination: '/amas/', permanent: false },
-      { source: '/open-source/', destination: '/opensource/', permanent: false },
+      {
+        source: '/open-source/',
+        destination: '/opensource/',
+        permanent: false
+      },
      { source: '/coc/', destination: '/conduct/', permanent: true },
      {
        source: '/code_of_conduct/',
--- a/pages/hackathons.js
+++ b/pages/hackathons.js
@ -0,0 +1,34 @@
+import { Box, Container, Heading, Grid } from 'theme-ui'
+import Meta from '@hackclub/meta'
+import Head from 'next/head'
+import ForceTheme from '../components/force-theme'
+import Nav from '../components/nav'
+import Footer from '../components/footer'
+import Stage from '../components/stage'
+
+import Landing from '../components/hackathons/landing'
+import Rundown from '../components/hackathons/rundown'
+
+export default function Bank() {
+  return (
+    <>
+      <Box as="main" key="main">
+        <Nav />
+        <ForceTheme theme="light" />
+        <Meta
+          as={Head}
+          title="Hackathons"
+          description="The Hack Club community provides the resources and tools to help you run amazing hackathons."
+          image="/hackathons/og-image.png"
+        />
+        <Box as="main">
+          <Landing />
+          <Container as="section">
+            <Rundown />
+          </Container>
+        </Box>
+      </Box>
+      <Footer key="footer" />
+    </>
+  )
+}
--- a/pages/index.js
+++ b/pages/index.js
@ -26,6 +26,7 @@ import FooterImgFile from '../public/home/footer.png'
 import GoldenTrainImgFile from '../public/home/golden-train.png'
 import Slack from '../components/slack'
 import Announcement from '../components/announcement'
+import Stage from '../components/stage'
 // import { timeSince } from '../lib/dates'

 let Highlight = styled(Text)`
@ -92,43 +93,6 @@ const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
  </Box>
 )

-const Stage = ({ icon, color, name, desc, children, ...props }) => (
-  <Box {...props}>
-    {children || (
-      <Box
-        as="span"
-        sx={{
-          width: 'fit-content',
-          bg: color,
-          borderRadius: 18,
-          lineHeight: 0,
-          p: 2,
-          mb: 1,
-          display: 'inline-block',
-          transform: ['scale(0.75)', 'none'],
-          transformOrigin: 'bottom left',
-          boxShadow:
-            'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
-        }}
-      >
-        <Icon glyph={icon} size={48} />
-      </Box>
-    )}
-    <Box>
-      <Heading as="h3" variant="headline" mb={2}>
-        {name}
-      </Heading>
-      <Text
-        as="p"
-        variant="subtitle"
-        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
-      >
-        {desc}
-      </Text>
-    </Box>
-  </Box>
-)
-
 const Page = () => (
  <>
    <Meta
@ -166,11 +130,11 @@ const Page = () => (
      />

      <Announcement
-          copy="Let's Assemble in San Francisco"
-          caption="Join us for the first IRL hackathon since 2020 in SF."
-          href="https://assemble.hackclub.com/"
-          iconLeft="explore"
-          color="primary"
+        copy="Let's Assemble in San Francisco"
+        caption="Join us for the first IRL hackathon since 2020 in SF."
+        href="https://assemble.hackclub.com/"
+        iconLeft="explore"
+        color="primary"
      />

      <SlideDown duration={768}>
@ -242,7 +206,11 @@ const Page = () => (
            as="a"
            variant="ctaLg"
            href="/slack"
-            sx={{ backgroundImage: t => t.util.gx('green', 'blue'), ml: [0, 3], mt: [3, 0] }}
+            sx={{
+              backgroundImage: t => t.util.gx('green', 'blue'),
+              ml: [0, 3],
+              mt: [3, 0]
+            }}
          >
            Join the Slack
          </Button>
@ -484,9 +452,9 @@ const Page = () => (
            name="Chat with 100s of club leaders"
            desc={
              <>
-                In our <Link href="/slack">Slack community</Link>, you’ll
-                be invited to a space for Hack&nbsp;Club leaders to ask
-                questions & chat, share projects, & attend weekly live events.
+                In our <Link href="/slack">Slack community</Link>, you’ll be
+                invited to a space for Hack&nbsp;Club leaders to ask questions &
+                chat, share projects, & attend weekly live events.
              </>
            }
          />