UI updates and official hackathons

components/grouping.js

@@ -3,7 +3,6 @@ import Header from '../components/header'
 import EventCard from '../components/event-card'
 import { useState } from 'react'
 import FilterButton from './filter-button'
-import Announcement from './announcement'
 
 export default ({
   title,
@@ -99,30 +98,6 @@ export default ({
             </FilterButton>
           </Box>
         ) : null}
-        <Announcement
-          copyLogo="https://cdn.hackclub.com/019dab4d-10e8-7269-ae5c-3c650522af2f/horizons.svg"
-          logoImageMaxWidth="400px"
-          href="https://horizons.hackclub.com/?ref=hackathons"
-          caption="7 countries, 7 hackathons, the adventure of a lifetime."
-          cta="click to see more"
-          virtual={false}
-          color="primary"
-          backgroundImage="https://cdn.hackclub.com/019e370c-04ad-7943-b6b6-5ec4c3409ce8/horizons-bg-with-ferrets-and-lines.png"
-          copyColor="#ededed"
-          captionColor="black"
-          sx={{
-            backgroundSize: 'auto 100%',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-            backgroundColor: '#f3e6cd',
-            minHeight: ['200px', '260px', '320px'],
-            alignItems: 'flex-start',
-            pt: [3, 4],
-            pb: [5, 6],
-            maxWidth: 'wide',
-            width: '75%'
-          }}
-        />
         <Grid
           columns={[1, 2, 3]}
           gap={[3, 4]}

components/signup.js

@@ -64,8 +64,8 @@ export default ({ initialLocation, stats = {} }) => {
     }
   }
   return (
-    <Card sx={{ maxWidth: 'narrowPlus', mx: 'auto', mt: [3, 4] }}>
-      <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
+    <Card sx={{ maxWidth: '700px', mx: 'auto', mt: [3, 4] }}>
+      <Heading as="h2" variant="subheadline" sx={{ mb: 0, fontFamily: 'phantomSans' }}>
         Want to hear when in-person events are added in your area?
       </Heading>
       <Text sx={{ color: 'muted' }}>
@@ -82,7 +82,8 @@ export default ({ initialLocation, stats = {} }) => {
           gridTemplateColumns: [null, '1fr 1fr auto'],
           textAlign: 'left',
           alignItems: 'end',
-          input: { bg: 'sunken' }
+          input: { bg: 'sunken' },
+          label: { fontFamily: 'phantomSans' }
         }}
       >
         <div>

lib/theme.js

@@ -2,6 +2,12 @@ import { merge } from 'lodash'
 import base from '@hackclub/theme'
 
 const theme = merge(base, {
+  fonts: {
+    heading:
+      '"Zarathustra", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    body: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    phantomSans: '"Phantom Sans", system-ui, -apple-system, "Segoe UI", sans-serif',
+  },
   cards: {
     event: {
       display: 'flex',
@@ -42,8 +48,7 @@ const theme = merge(base, {
         transform: 'scale(1.0625)',
         boxShadow: 'elevated'
       }
-    },
-
+    }
   }
 })
 

next.config.js

@@ -7,11 +7,6 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true
   },
-  turbopack: {
-    resolveAlias: {
-      '@theme-ui/mdx': './lib/theme-ui-mdx-stub.js'
-    }
-  },
   webpack(config) {
     config.resolve.alias['@theme-ui/mdx'] = path.resolve(__dirname, 'lib/theme-ui-mdx-stub.js')
     return config

pages/_app.js

@@ -2,7 +2,6 @@ import React from 'react'
 import Head from 'next/head'
 
 import Meta from '@hackclub/meta'
-import '@hackclub/theme/fonts/reg-bold.css'
 import 'mapbox-gl/dist/mapbox-gl.css';
 import theme from '../lib/theme'
 import { ThemeProvider } from 'theme-ui'

pages/_document.js

@@ -1,6 +1,23 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { InitializeColorMode } from 'theme-ui'
 
+const fontFaceCss = `
+@font-face {
+  font-family: 'Zarathustra';
+  src: url('/fonts/zarathustra-kerned.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Zarathustra';
+  src: url('/fonts/zarathustra-v01.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+`
+
 export default class extends Document {
   static async getInitialProps(ctx) {
     const initialProps = await Document.getInitialProps(ctx)
@@ -10,7 +27,23 @@ export default class extends Document {
   render() {
     return (
       <Html lang="en">
-        <Head />
+        <Head>
+          <link
+            rel="preload"
+            href="/fonts/zarathustra-kerned.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="/fonts/zarathustra-v01.otf"
+            as="font"
+            type="font/otf"
+            crossOrigin="anonymous"
+          />
+          <style dangerouslySetInnerHTML={{ __html: fontFaceCss }} />
+        </Head>
         <body>
           <InitializeColorMode />
           <Main />

pages/index.js

@@ -1,8 +1,9 @@
 import Grouping from '../components/grouping'
-import { Box, Heading, Text, Link, Container } from 'theme-ui'
+import { Box, Heading, Text, Link, Container, Grid } from 'theme-ui'
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import Signup from '../components/signup'
+import Announcement from '../components/announcement'
 import Years from '../components/years'
 import Regions from '../components/regions'
 import EventCard from '../components/event-card'
@@ -19,7 +20,7 @@ const eventsPreview = events =>
     )
     .join('')
 
-export default ({ stats, emailStats, events, header }) => (
+export default ({ stats, emailStats, events, officialEvents, header }) => (
   <Grouping
     backgroundImage={header}
     includeMeta={false}
@@ -37,9 +38,38 @@ export default ({ stats, emailStats, events, header }) => (
             events
           )}`}
         />
-        <Heading as="h1" variant="title" sx={{ color: 'primary', textShadow: 'elevated' }}>
-          Upcoming High School Hackathons{' '}
-          in {new Date().getFullYear()}
+        <Heading
+          as="h1"
+          variant="title"
+          sx={{
+            color: 'primary',
+            textShadow: 'elevated',
+            fontWeight: 700,
+            letterSpacing: '-0.02em'
+          }}
+        >
+          Hackathons for{' '}
+          <Box
+            as="span"
+            title="For high-schoolers"
+            sx={{
+              display: 'inline-block',
+              background:
+                'repeating-linear-gradient(105deg, #ec3750 0%, #ff8c37 16%, #f1c40f 32%, #33d6a6 48%, #338eda 64%, #a633d6 80%, #ec3750 100%)',
+              backgroundSize: '200% 100%',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              backgroundClip: 'text',
+              animation: 'teens-gradient 6s linear infinite',
+              '@keyframes teens-gradient': {
+                '0%': { backgroundPosition: '0% 50%' },
+                '50%': { backgroundPosition: '100% 50%' },
+                '100%': { backgroundPosition: '0% 50%' }
+              }
+            }}
+          >
+            teens
+          </Box>
         </Heading>
         <Text as="p" variant="subtitle" sx={{ my: 3, color: 'white', textShadow: 'text'  }}>
           A curated list of high school hackathons with
@@ -64,11 +94,45 @@ export default ({ stats, emailStats, events, header }) => (
       </section>
     }
     useFilter
-
   >
-    <Box mb={[3, 3, 4]}>
+    <Box>
       <Signup />
     </Box>
+    <Announcement
+      copyLogo="https://cdn.hackclub.com/019dab4d-10e8-7269-ae5c-3c650522af2f/horizons.svg"
+      logoImageMaxWidth="400px"
+      href="https://horizons.hackclub.com/?ref=hackathons"
+      caption="7 countries, 7 hackathons, the adventure of a lifetime."
+      cta="click to see more"
+      virtual={false}
+      color="primary"
+      backgroundImage="https://cdn.hackclub.com/019e370c-04ad-7943-b6b6-5ec4c3409ce8/horizons-bg-with-ferrets-and-lines.png"
+      copyColor="#ededed"
+      captionColor="black"
+      sx={{
+        backgroundSize: 'auto 100%',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundColor: '#f3e6cd',
+        minHeight: ['200px', '260px', '320px'],
+        alignItems: 'flex-start',
+        pt: [3, 4],
+        pb: [5, 6],
+        maxWidth: 'wide',
+        width: '75%',
+        mt: [3, 4]
+      }}
+    />
+    <Box mb={[3, 3, 4]}>
+      <Heading variant="headline" sx={{ mt: [3, 4], mb: [2, 3], textAlign: 'left' }}>
+        Hack Club Official Hackathons
+      </Heading>
+      <Grid columns={[1, 2, 3]} gap={[3, 4]}>
+        {officialEvents.map(event => (
+          <EventCard key={event.id} id={event.id} {...event} useFilter={false} />
+        ))}
+      </Grid>
+    </Box>
   </Grouping>
 )
 
@@ -106,7 +170,8 @@ export const getStaticProps = async () => {
     countryCode: '',
     virtual: false,
     hybrid: false,
-    mlhAssociated: false
+    mlhAssociated: false,
+    hack_club_event: true
   }
 
   // Sort upcoming events by start date
@@ -120,5 +185,10 @@ export const getStaticProps = async () => {
     'desc'
   )
 
-  return { props: { events: [ ...upcomingEvents, ...previousEvents ], stats, emailStats, header: headerImages[Math.floor(Math.random() * headerImages.length)] }, revalidate: 1 }
+  const officialEvents = orderBy(
+    filter(upcomingEvents, e => e.hack_club_event),
+    'start'
+  )
+
+   return { props: { events: [ ...upcomingEvents, ...previousEvents ], officialEvents, stats, emailStats, header: headerImages[Math.floor(Math.random() * headerImages.length)] }, revalidate: 1 }
 }