mirror of
https://github.com/System-End/site.git
synced 2026-04-19 16:28:21 +00:00
swap from buttons to cards (#1680)
* switch to cards instead of buttons on main page * add key prop
This commit is contained in:
Manitej Boorgu
GitHub
parent
37a6fc4b0e
commit
d306e2eb1e
3 changed files with 239 additions and 8 deletions
138
components/index/ctas.js
Normal file
138
components/index/ctas.js
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import { Box, Link, Text, Image, Card, Button } from 'theme-ui'
|
||||
import Icon from '../icon'
|
||||
import CarouselCards from './carousel-cards'
|
||||
import { keyframes } from '@emotion/react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Ticker from 'react-ticker'
|
||||
import PageVisibility from 'react-page-visibility'
|
||||
import { Fade } from 'react-reveal'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function CTAS({ cards }) {
|
||||
const [pageIsVisible, setPageIsVisible] = useState(true)
|
||||
|
||||
const handleVisibilityChange = isVisible => {
|
||||
setPageIsVisible(isVisible)
|
||||
}
|
||||
|
||||
return (
|
||||
<PageVisibility onChange={handleVisibilityChange}>
|
||||
{pageIsVisible && (
|
||||
<Box
|
||||
as="div"
|
||||
sx={{
|
||||
//1 row flexbox of cards
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
|
||||
gap: [3, 4, 4],
|
||||
|
||||
justifyContent: ['center', 'center', 'flex-start'],
|
||||
|
||||
mt: 1,
|
||||
py: [3, 3, 3]
|
||||
}}>
|
||||
{cards.slice(cards.length - 3).reverse().map((card, idx) => {
|
||||
const {
|
||||
background,
|
||||
backgroundImage,
|
||||
backgroundSize,
|
||||
|
||||
description,
|
||||
descriptionColor,
|
||||
|
||||
title,
|
||||
logo,
|
||||
|
||||
buttonText,
|
||||
buttonColor,
|
||||
link
|
||||
} = card;
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={idx}
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
width: ['100%', '100%', 'auto'],
|
||||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.125)',
|
||||
transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.0625)' },
|
||||
'.icon': {
|
||||
transition: 'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
|
||||
},
|
||||
':hover,:focus': {
|
||||
'.icon': {
|
||||
transform: 'translateX(28px) translateY(-28px)',
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
// variant="interactive"
|
||||
sx={{
|
||||
background,
|
||||
backgroundImage,
|
||||
backgroundSize,
|
||||
position: 'relative',
|
||||
color: 'white',
|
||||
width: ['100%', '100%', '300px'],
|
||||
minWidth: ['100%', '100%', 'initial'],
|
||||
padding: ['12px !important', '16px !important', '20px !important'],
|
||||
paddingTop: [
|
||||
'14px !important',
|
||||
'20px !important',
|
||||
'24px !important'
|
||||
],
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
'&:hover': { cursor: 'pointer' },
|
||||
'&:hover svg': { opacity: 0.5 }
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={logo}
|
||||
alt={title}
|
||||
sx={{
|
||||
zIndex: 2,
|
||||
height: ['42px', '50px', '58px'],
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
color: descriptionColor,
|
||||
fontSize: [1, '16px', '20px'],
|
||||
my: 2
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Text>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: buttonColor,
|
||||
color: 'white',
|
||||
mt: 'auto'
|
||||
}}
|
||||
as="a"
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{buttonText}
|
||||
</Button>
|
||||
</Card>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
|
||||
</Box>
|
||||
)}
|
||||
</PageVisibility>
|
||||
)
|
||||
}
|
||||
44
lib/cta.json
Normal file
44
lib/cta.json
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
[
|
||||
{
|
||||
"title": "Blueprint",
|
||||
"logo": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/c06427309a3db7299065c0a41f1e8cc70531f0a9_blueprint.png",
|
||||
|
||||
"background": "#0e305b",
|
||||
|
||||
"description": "Design a Hardware project and get up to $400 to make it real!",
|
||||
"descriptionColor": "white",
|
||||
|
||||
"buttonText": "JOIN",
|
||||
"buttonColor": "rgb(50, 70, 110)",
|
||||
|
||||
"link": "https://hack.club/boba"
|
||||
},
|
||||
{
|
||||
"title": "Moonshot",
|
||||
"logo": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/bb539d76681c26f45247d69cdab86d9d863a1a95_image_105.png",
|
||||
|
||||
"background": "#4d5c85",
|
||||
|
||||
"description": "4-day hackathon in Orlando, Florida w/ a FREE visit to NASA and Universal Studios!",
|
||||
"descriptionColor": "white",
|
||||
|
||||
"buttonText": "JOIN",
|
||||
"buttonColor": "rgb(50, 70, 110)",
|
||||
|
||||
"link": "https://hack.club/boba"
|
||||
},
|
||||
{
|
||||
"title": "Midnight",
|
||||
"logo": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/b2f4135894a031a645b0079c66c8a54069c472ed_image.png",
|
||||
|
||||
"background": "#453B61",
|
||||
|
||||
"description": "Spend 70 hours building projects, earn a trip to Vienna for a murder mystery hackathon.",
|
||||
"descriptionColor": "white",
|
||||
|
||||
"buttonText": "RSVP",
|
||||
"buttonColor": "#F24B4B",
|
||||
|
||||
"link": "https://midnight.hackclub.com"
|
||||
}
|
||||
]
|
||||
|
|
@ -47,6 +47,7 @@ import Milkyway from '../components/index/cards/milkyway'
|
|||
import Aces from '../components/index/cards/aces'
|
||||
import Highway from '../components/index/cards/highway'
|
||||
import Shipwrecked from '../components/index/cards/shipwrecked'
|
||||
import CTAS from '../components/index/ctas'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
function Page({
|
||||
|
|
@ -64,7 +65,8 @@ function Page({
|
|||
events,
|
||||
carouselCards,
|
||||
blueprintData,
|
||||
context
|
||||
context,
|
||||
ctaCards
|
||||
}) {
|
||||
let [gameImage, setGameImage] = useState('')
|
||||
let [gameImage1, setGameImage1] = useState('')
|
||||
|
|
@ -315,12 +317,12 @@ function Page({
|
|||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
flexWrap: 'nowrap',
|
||||
flexDirection: 'row',
|
||||
rowGap: 3
|
||||
}}
|
||||
>
|
||||
{ctaVariant === 'blueprint' ? (
|
||||
{/* {ctaVariant === 'blueprint' ? (
|
||||
<Button
|
||||
variant="ctaLg"
|
||||
as="a"
|
||||
|
|
@ -390,8 +392,7 @@ function Page({
|
|||
}
|
||||
`}</style>
|
||||
</>
|
||||
)}
|
||||
|
||||
)} */}
|
||||
<Button
|
||||
variant="ctaLg"
|
||||
as="a"
|
||||
|
|
@ -402,7 +403,53 @@ function Page({
|
|||
>
|
||||
Join Slack
|
||||
</Button>
|
||||
<Text
|
||||
variant="eyebrow"
|
||||
as="h4"
|
||||
sx={{
|
||||
fontSize: ['16px', 2, 3],
|
||||
maxWidth: 'layout',
|
||||
marginTop: 'auto',
|
||||
marginBottom: 'auto',
|
||||
alignSelf: 'center',
|
||||
color: 'white',
|
||||
textShadow: 'rgba(0, 0, 0, 1) 0 0 10px, rgba(0, 0, 0, 1) 0 0 10px, rgba(0, 0, 0, 0.5) 0 0 10px'
|
||||
}}
|
||||
>
|
||||
Or, check out our programs:
|
||||
</Text>
|
||||
</Box>
|
||||
<CTAS cards={ctaCards} />
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgb(255, 255, 255, 0.3)',
|
||||
color: 'white',
|
||||
|
||||
borderRadius: '100px',
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
px: '3',
|
||||
py: 2,
|
||||
width: 'fit-content',
|
||||
textTransform: 'none',
|
||||
fontWeight: '400',
|
||||
fontSize: [1, '16px', '18px'],
|
||||
backdropFilter: 'blur(2px)',
|
||||
fontWeight: 'normal',
|
||||
zIndex: 999,
|
||||
}}
|
||||
as="a"
|
||||
href="#spotlight"
|
||||
>
|
||||
<Icon
|
||||
glyph={'rep'}
|
||||
sx={{ color: 'inherit', marginRight: 2 }}
|
||||
size={24}
|
||||
mr={2}
|
||||
/>
|
||||
Check out more programs
|
||||
</Button>
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
|
|
@ -1334,6 +1381,7 @@ const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
|||
|
||||
export async function getStaticProps() {
|
||||
const carouselCards = require('../lib/carousel.json')
|
||||
const ctaCards = require('../lib/cta.json')
|
||||
|
||||
// HCB: get total raised
|
||||
let bankData = []
|
||||
|
|
@ -1360,9 +1408,9 @@ export async function getStaticProps() {
|
|||
// preventing the site from deploying
|
||||
|
||||
const { fetchGitHub } = require('./api/github')
|
||||
let gitHubData = await fetchGitHub()
|
||||
// let gitHubData = await fetchGitHub()
|
||||
|
||||
// let gitHubData = null
|
||||
let gitHubData = null
|
||||
|
||||
// GitHub: get latest GitHub stars
|
||||
const { fetchStars } = require('./api/stars')
|
||||
|
|
@ -1421,7 +1469,8 @@ export async function getStaticProps() {
|
|||
stars,
|
||||
events,
|
||||
carouselCards,
|
||||
blueprintData
|
||||
blueprintData,
|
||||
ctaCards
|
||||
},
|
||||
revalidate: 60
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue