opt2

components/index/cards/bank.js

@@ -86,7 +86,7 @@ export default function Bank({ data }) {
                   '&:before': {
                     content: '""',
                     backgroundImage:
-                      'url("https://cloud-bubbgk6up-hack-club-bot.vercel.app/0gallery_hw__cc6xqmf7tbyq_medium_2x__1_.png")',
+                      'url(/home/bank-computer.webp)',
                     backgroundSize: '100%',
                     backgroundRepeat: 'no-repeat',
                     width: '100%',
@@ -99,7 +99,7 @@ export default function Bank({ data }) {
                 <Box
                   sx={{
                     backgroundImage:
-                      'url("https://cloud-my3o4j7oe-hack-club-bot.vercel.app/0laptop-dark__2__1.png")',
+                      'url(/home/bank-screen.webp)',
                     zIndex: 2,
                     position: 'absolute',
                     margin: 'auto',
@@ -144,7 +144,7 @@ export default function Bank({ data }) {
             '&:before': {
               content: '""',
               backgroundImage:
-                'url("https://cloud-bubbgk6up-hack-club-bot.vercel.app/0gallery_hw__cc6xqmf7tbyq_medium_2x__1_.png")',
+                'url(/home/bank-computer.webp)',
               backgroundSize: '100%',
               backgroundRepeat: 'no-repeat',
               width: '100%',
@@ -157,7 +157,7 @@ export default function Bank({ data }) {
           <Box
             sx={{
               backgroundImage:
-                'url("https://cloud-my3o4j7oe-hack-club-bot.vercel.app/0laptop-dark__2__1.png")',
+                'url(/home/bank-screen.webp)',
               zIndex: 2,
               position: 'absolute',
               margin: 'auto',

components/index/cards/clubs.js

@@ -46,7 +46,7 @@ export default function Clubs() {
       }}
     >
       <Image
-        src="https://cloud-flzg18ipb-hack-club-bot.vercel.app/0screenshot_2022-12-05_at_9.44.11_pm.png"
+        src="/home/clubs-bg.webp"
         sx={{
           objectFit: 'cover',
           position: 'absolute',

components/index/cards/epoch.js

@@ -135,7 +135,7 @@ export default function Epoch() {
       }}
     >
       <Image
-        src="https://cloud-15qevu1zp-hack-club-bot.vercel.app/0assemble_2.png"
+        src="/home/epoch-bg.webp"
         sx={{
           objectFit: 'cover',
           position: 'absolute',

components/index/cards/hackathons.js

@@ -49,7 +49,7 @@ export default function Hackathons({ data, stars }) {
       // background="https://hackclub.com/bank/bg.webp"
     >
       <Image
-        src="https://cloud-3zkwhtiid-hack-club-bot.vercel.app/0bg-min.png"
+        src="/home/hackathons-bg.webp"
         sx={{
           objectFit: 'cover',
           position: 'absolute',

components/index/cards/sinerider.js

@@ -35,7 +35,7 @@ export default function Sinerider({ stars }) {
       highlight="#271932"
     >
       <Image
-        src="https://cloud-4seh308a9-hack-club-bot.vercel.app/00initial-bg__1_-min.png"
+        src="/home/sinerider-bg.webp"
         sx={{
           objectFit: 'cover',
           position: 'absolute',
@@ -46,7 +46,7 @@ export default function Sinerider({ stars }) {
           zIndex: 0
         }}
       />
-      <img
+      <Image
         src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
         sx={{ width: ['200px', '250px', '300px'], mt: '-20px', position: 'relative', zIndex: 2 }}
       />

components/index/cards/sprig-console.js

@@ -73,7 +73,7 @@ export default function SprigConsole({ stars, consoleCount }) {
         <Grid columns={[1, '1.2fr 1fr']} sx={{zIndex: 2, position: 'relative'}}>
           <Box>
             <Image
-              src="https://cloud-7dokxtxhu-hack-club-bot.vercel.app/0sprig-light-top.png"
+              src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
               sx={{
                 width: '120%',
                 ml: '-10%',

components/index/cards/winter.js

@@ -106,7 +106,7 @@ export default function Winter() {
       position={[null, 'bottom', 'bottom']}
     >
       <Image
-        src="https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png"
+        src="/home/winter-bg.webp"
         sx={{
           objectFit: 'cover',
           position: 'absolute',

components/index/cards/workshops.js

@@ -13,12 +13,19 @@ import {
   Text
 } from 'theme-ui'
 import { useState } from 'react'
-import Fade from 'react-reveal/Fade'
 import Buttons from './button'
 
 /** @jsxImportSource theme-ui */
 
-const WorkshopCard = ({ slug, name, description, img, height, section, ...props }) => (
+const WorkshopCard = ({
+  slug,
+  name,
+  description,
+  img,
+  height,
+  section,
+  ...props
+}) => (
   <Link
     href={`https://workshops.hackclub.com/${slug}`}
     passHref
@@ -37,6 +44,7 @@ const WorkshopCard = ({ slug, name, description, img, height, section, ...props
         lineHeight: 0,
         display: 'flex',
         flexDirection: 'column',
+        height: '80%',
         '& span': {
           lineHeight: 1.25
         },
@@ -52,15 +60,14 @@ const WorkshopCard = ({ slug, name, description, img, height, section, ...props
       <Box
         sx={{
           width: '100%',
-          height: height || '120px',
-          // mt: 'auto',
-          // backgroundImage: `url('${img}')`,
-          // backgroundSize: 'cover',
-          // backgroundPosition: 'center center',
-          // backgroundRepeat: 'no-repeat'
+          height: '100%'
         }}
       >
-        <Image alt={`${name} demo`} src={img} sx={{width: '100%', height: 'auto'}} />
+        <Image
+          alt={`${name} demo`}
+          src={img}
+          sx={{ height: '100%', width: 'auto' }}
+        />
       </Box>
     </Card>
   </Link>
@@ -79,56 +86,50 @@ export default function Workshops({ data, stars }) {
       stars={stars}
       highlight="blue"
     >
-      <Text variant="title" sx={{fontSize: ['36px', 4, 5]}}>Workshops</Text>
-        <Grid columns={[1, 2, 2]}>
-          <Flex sx={{ flexDirection: 'column'}}>
+      <Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
+        Workshops
+      </Text>
+      <Grid columns={[1, 2, 2]}>
+        <Flex sx={{ flexDirection: 'column' }}>
           <Text as="p" variant="subtitle">
-          100+ community-contributed, self-guided coding tutorials and ideas. Learn to code by building, one project at a time.
-        </Text>
-            <Buttons id="14" link="https://workshops.hackclub.com" icon="code" primary="white" sx={{color: 'blue', mt: [3, 3, 4]}}>
-              Browse a workshop
-            </Buttons>
-            <Buttons
-              // content="click to learn more about how to submit a workshop"
-              id="13"
-              link="https://workshops.hackclub.com/submit-a-workshop/"
-              icon="event-add"
-            >
-              Build a workshop
-            </Buttons>
-          </Flex>
-          <Grid sx={{ gap: 3 }} columns={[1, 1, 2]}>
-            <WorkshopCard
-              key="splatter_paint"
-              slug="splatter_paint"
-              name="Splatter Paint"
-              description="Crazy colorful splatter paint in your browser with Paper.js"
-              img="https://cloud-3aosybiuc-hack-club-bot.vercel.app/1final-demo.png"
-            />
-            <WorkshopCard
-              key="particle_physics"
-              slug="particle_physics"
-              name="Particle Physics"
-              description="Create a particle physics simulation and with p5.js"
-              img="https://cloud-k50jkthdw.vercel.app/0particle-physics-summary.png"
-              height="100px"
-              sx={{display: ['flex', 'none', 'flex']}}
-            />
-          </Grid>
-        </Grid>
-
-      {/* <Fade spy={workshop} bottom>
-          <Text
-            // onClick={New}
-            sx={{
-              '&:hover': { cursor: 'pointer' },
-              float: 'right',
-              mt: '-20px'
-            }}
-          >
-            Click for random workshop: {workshop} 👀
+            100+ community-contributed, self-guided coding tutorials and ideas.
+            Learn to code by building, one project at a time.
           </Text>
-        </Fade> */}
+          <Buttons
+            id="14"
+            link="https://workshops.hackclub.com"
+            icon="code"
+            primary="white"
+            sx={{ color: 'blue', mt: [3, 3, 4] }}
+          >
+            Browse a workshop
+          </Buttons>
+          <Buttons
+            // content="click to learn more about how to submit a workshop"
+            id="13"
+            link="https://workshops.hackclub.com/submit-a-workshop/"
+            icon="event-add"
+          >
+            Build a workshop
+          </Buttons>
+        </Flex>
+        <Grid sx={{ gap: 3 }} columns={[1, 1, 2]}>
+          <WorkshopCard
+            key="splatter_paint"
+            slug="splatter_paint"
+            name="Splatter Paint"
+            description="Crazy colorful splatter paint in your browser with Paper.js"
+            img="/home/workshops/splatter_paint.png"
+          />
+          <WorkshopCard
+            key="particle_physics"
+            slug="particle_physics"
+            name="Particle Physics"
+            description="Create a particle physics simulation and with p5.js"
+            img="/home/workshops/particle_physics.png"
+          />
+        </Grid>
+      </Grid>
     </CardModel>
   )
 }

pages/index.js

@@ -32,11 +32,8 @@ import Workshops from '../components/index/cards/workshops'
 import Bank from '../components/index/cards/bank'
 import Epoch from '../components/index/cards/epoch'
 import Hackathons from '../components/index/cards/hackathons'
-import Flip from 'react-reveal/Flip'
-import Fade from 'react-reveal/Fade'
 import AssembleImgFile from '../public/home/assemble.jpg'
 import { get } from 'lodash'
-import useSWR from 'swr'
 import Konami from 'react-konami-code'
 import Secret from '../components/secret'
 import MailingList from '../components/index/cards/mailing-list'
@@ -121,7 +118,7 @@ function Page({
     <>
       <Meta
         as={Head}
-        title="Hack Club — Home for high school coders"
+        title="Hack Club | Home for high school coders"
         description="Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world."
         image="https://cloud-epiki4yvg.vercel.app/2020-09-09_drbp62kayjuyyy0ek89mf9fwcp5t4kuz.jpeg"
       />
@@ -178,15 +175,12 @@ function Page({
               maxWidth: [null, 'layout'],
               position: 'relative',
               mx: 'auto',
-              py: 4
+              py: 5
             }}
           >
-            <Fade>
               <Text variant="eyebrow" sx={{ color: 'sunken' }}>
                 Welcome to Hack Club
               </Text>
-            </Fade>
-            <Fade bottom delay={200}>
               <Heading>
                 <Text
                   as="h1"
@@ -221,7 +215,7 @@ function Page({
                         backgroundColor: 'red',
                         position: 'absolute',
                         borderRadius: 10,
-                        transform: 'rotate(-3deg)',
+                        transform: 'rotate(-3deg) translateY(-5px)',
                         color: 'white',
                         whiteSpace: 'nowrap',
                         textDecoration: 'none',
@@ -241,7 +235,6 @@ function Page({
                   Join our community
                 </Button>
               </Heading>
-            </Fade>
             <Box
               sx={{
                 display: 'flex',