mirror of
https://github.com/System-End/site.git
synced 2026-04-19 05:50:31 +00:00
review
This commit is contained in:
Belle
parent
ffe795201d
commit
ee1e8d7e85
8 changed files with 72919 additions and 153 deletions
36
components/arcade/review/map.js
Normal file
36
components/arcade/review/map.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import React, { useEffect, useRef } from 'react';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet.markercluster';
|
||||
|
||||
const LeafletMap = ({ points }) => {
|
||||
const mapRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
const map = L.map(mapRef.current).setView([21.505, -10.09], 2);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
}).addTo(map);
|
||||
|
||||
const markers = L.markerClusterGroup();
|
||||
|
||||
points.forEach((point) => {
|
||||
const marker = L.marker([point.lat, point.lng]).bindPopup(point.name);
|
||||
markers.addLayer(marker);
|
||||
});
|
||||
|
||||
map.addLayer(markers);
|
||||
|
||||
return () => {
|
||||
map.remove();
|
||||
};
|
||||
}, [points]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div ref={mapRef} style={{ height: '50vh', minHeight: '300px', width: '100%', borderRadius: '10px' }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LeafletMap;
|
||||
|
|
@ -58,7 +58,8 @@ export default function Preview({
|
|||
variant="subtitle"
|
||||
className="slackey"
|
||||
sx={{
|
||||
transition: 'opacity 0.3s ease-in-out'
|
||||
transition: 'opacity 0.3s ease-in-out',
|
||||
display: 'block'
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
|
|
@ -70,6 +71,7 @@ export default function Preview({
|
|||
{inView && (
|
||||
<div
|
||||
sx={{
|
||||
display: ['none', 'none', 'block'],
|
||||
position: 'absolute',
|
||||
top: `${position[3] ? position[0] : position[0] + 60}vh`,
|
||||
left: `${position[1]}vh`,
|
||||
|
|
@ -80,7 +82,10 @@ export default function Preview({
|
|||
}}
|
||||
>
|
||||
<Zoom>
|
||||
<img src={sticker1} sx={{ width: '100%', filter: 'drop-shadow(2px 2px #24ffffff)' }} />
|
||||
<img
|
||||
src={sticker1}
|
||||
sx={{ width: '100%', filter: 'drop-shadow(2px 2px #24ffffff)' }}
|
||||
/>
|
||||
</Zoom>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -89,16 +94,23 @@ export default function Preview({
|
|||
<div
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: `${position[3] ? position[0] : position[0] + 60}vh`,
|
||||
right: `${position[1]}vh`,
|
||||
width: '81px',
|
||||
bottom: [
|
||||
'-120px',
|
||||
'-120px',
|
||||
`${position[3] ? position[0] : position[0] + 60}vh`
|
||||
],
|
||||
right: ['23px', '23px', `${position[1]}vh`],
|
||||
width: ['50px', '81px'],
|
||||
transform: `rotate(-${position[2]}deg)`,
|
||||
zIndex: 5,
|
||||
transitionDuration: '0.52s'
|
||||
}}
|
||||
>
|
||||
<Zoom>
|
||||
<img src={sticker2} sx={{ width: '100%', filter: 'drop-shadow(2px 2px #24ffffff)'}} />
|
||||
<img
|
||||
src={sticker2}
|
||||
sx={{ width: '100%', filter: 'drop-shadow(2px 2px #24ffffff)' }}
|
||||
/>
|
||||
</Zoom>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -2,17 +2,52 @@ import { Box, Flex, Text } from 'theme-ui'
|
|||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const Project = ({img, name, projectName, country}) => {
|
||||
return(
|
||||
<Box sx={{backgroundColor: '#FFF7E5', borderRadius: '5px', display: 'flex', px: 2, py: 2, my: 2, mr: 3, color: '#35290F', width: '280px', height: 'auto'}}>
|
||||
<Box sx={{backgroundImage: `url('${img}')`, width: '50px', height: '50px', backgroundSize: 'cover', mr: 2}}></Box>
|
||||
<Box>
|
||||
<Text sx={{fontWeight: 'bold'}} as="p">{projectName}</Text>
|
||||
<Text as="p" sx={{fontSize: 1}}>{name.split(" ")[0]}{(country != '' && country != undefined) ? `, ${country}` : ''}</Text>
|
||||
{/* <Text>{name.split(" ")[0].length + (country != undefined ? country.length : 0)}</Text> */}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
const Project = ({ img, name, projectName, playLink, country }) => {
|
||||
return (
|
||||
<Box
|
||||
as="a"
|
||||
href={playLink}
|
||||
sx={{
|
||||
backgroundColor: '#FFF7E5',
|
||||
borderRadius: '5px',
|
||||
display: 'flex',
|
||||
px: 2,
|
||||
py: 2,
|
||||
my: 2,
|
||||
mr: 3,
|
||||
color: '#35290F',
|
||||
width: '280px',
|
||||
height: '100%',
|
||||
transitionDuration: '0.3s',
|
||||
textDecoration: 'none',
|
||||
border: '#FFF7E5 dashed 1px',
|
||||
'&:hover': {
|
||||
border: '#09AFB4 dashed 1px',
|
||||
transform: 'scale(1.05)',
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundImage: `url('${img}')`,
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
backgroundSize: 'cover',
|
||||
mr: 2
|
||||
}}
|
||||
></Box>
|
||||
<Box>
|
||||
<Text sx={{ fontWeight: 'bold' }} as="p">
|
||||
{projectName}
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: 1 }}>
|
||||
{name.split(' ')[0]}
|
||||
{country != '' && country != undefined ? `, ${country}` : ''}
|
||||
</Text>
|
||||
{/* <Text>{name.split(" ")[0].length + (country != undefined ? country.length : 0)}</Text> */}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default Project
|
||||
export default Project
|
||||
|
|
|
|||
|
|
@ -57,6 +57,8 @@
|
|||
"jszip": "^3.10.1",
|
||||
"jszip-utils": "^0.1.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet-canvas-marker": "^0.2.0",
|
||||
"leaflet.markercluster": "^1.5.3",
|
||||
"lodash": "^4.17.21",
|
||||
"million": "^2.6.4",
|
||||
"next": "^12.3.1",
|
||||
|
|
@ -76,6 +78,7 @@
|
|||
"react-intersection-observer": "^9.13.1",
|
||||
"react-konami-code": "^2.3.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-leaflet-markercluster": "^3.0.0-rc1",
|
||||
"react-lite-youtube-embed": "^2.4.0",
|
||||
"react-markdown": "^8",
|
||||
"react-marquee-slider": "^1.1.5",
|
||||
|
|
|
|||
|
|
@ -9,10 +9,11 @@ const airtable = new AirtablePlus({
|
|||
async function getProjects() {
|
||||
try {
|
||||
const projects = await airtable.read({
|
||||
filterByFormula: `{ScreenshotLink} != ''`,
|
||||
filterByFormula: `AND({ScreenshotLink} != '', {Play Link} != '')`,
|
||||
fields: [
|
||||
'Name',
|
||||
'ScreenshotLink',
|
||||
'Play Link',
|
||||
'Name (from User)',
|
||||
'Zach - Country (from User)'
|
||||
],
|
||||
|
|
@ -33,6 +34,7 @@ export default async function handler(req, res) {
|
|||
id: p.id,
|
||||
title: p.fields['Name'] || '',
|
||||
imageLink: p.fields['ScreenshotLink'] || '',
|
||||
playLink: p.fields['Play Link'] || '',
|
||||
user: p.fields['Name (from User)'] || '',
|
||||
country: p.fields['Zach - Country (from User)'] || ''
|
||||
}))
|
||||
|
|
|
|||
|
|
@ -21,6 +21,14 @@ import Supporters from '../../components/arcade/review/supporters'
|
|||
import Draggable from 'react-draggable'
|
||||
import AFooter from '../../components/arcade/review/aFooter'
|
||||
import Arcader from '../../components/arcade/review/arcader'
|
||||
import dynamic from 'next/dynamic'
|
||||
const DynamicLeafletMap = dynamic(
|
||||
() => import('../../components/arcade/review/map'),
|
||||
{
|
||||
ssr: false // Disable server-side rendering for this component
|
||||
}
|
||||
)
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const styled = `
|
||||
|
|
@ -271,10 +279,10 @@ const projectVariants = {
|
|||
}
|
||||
|
||||
const Review = () => {
|
||||
const [map, setMap] = useState(null)
|
||||
const [showHighlight, setShowHighlight] = useState(false)
|
||||
const [rotation, setRotation] = useState([])
|
||||
const [projects, setProjects] = useState(testData)
|
||||
const [projects, setProjects] = useState([])
|
||||
const [loading, setLoading] = useState(true) // Loading state
|
||||
|
||||
useEffect(() => {
|
||||
async function getProjects() {
|
||||
|
|
@ -282,6 +290,7 @@ const Review = () => {
|
|||
let data = await response.json()
|
||||
|
||||
setProjects([...projects, ...data.results])
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
getProjects()
|
||||
|
|
@ -294,15 +303,15 @@ const Review = () => {
|
|||
|
||||
const containerRef = useRef(null)
|
||||
|
||||
const [animationStates, setAnimationStates] = useState(
|
||||
new Array(projects.length).fill('animate')
|
||||
)
|
||||
// const [animationStates, setAnimationStates] = useState(
|
||||
// new Array(projects.length).fill('animate')
|
||||
// )
|
||||
|
||||
const handleAnimationComplete = useCallback(index => {
|
||||
setAnimationStates(prevStates =>
|
||||
prevStates.map((state, i) => (i === index ? 'moveUp' : state))
|
||||
)
|
||||
}, [])
|
||||
// const handleAnimationComplete = useCallback(index => {
|
||||
// setAnimationStates(prevStates =>
|
||||
// prevStates.map((state, i) => (i === index ? 'moveUp' : state))
|
||||
// )
|
||||
// }, [])
|
||||
|
||||
useEffect(() => {
|
||||
let rot = []
|
||||
|
|
@ -361,13 +370,15 @@ const Review = () => {
|
|||
return () => window.removeEventListener('mousemove', handler)
|
||||
}, [])
|
||||
|
||||
//LEAFLET
|
||||
const [points, setPoints] = useState([])
|
||||
|
||||
// Fetch JSON data
|
||||
useEffect(() => {
|
||||
import('react-leaflet').then(
|
||||
({ MapContainer, TileLayer, Marker, Popup, useMap }) => {
|
||||
setMap({ MapContainer, TileLayer, Marker, Popup })
|
||||
}
|
||||
)
|
||||
fetch('/arcade/review/locations.json') // Update the path to your JSON file
|
||||
.then(response => response.json())
|
||||
.then(data => setPoints(data))
|
||||
.then(console.log(points))
|
||||
.catch(error => console.error('Error fetching the JSON file:', error))
|
||||
}, [])
|
||||
|
||||
// create fixed bg when you reach a particular scroll
|
||||
|
|
@ -394,12 +405,24 @@ const Review = () => {
|
|||
}, [highlightInView, socialContainerInView, rundownRefInView])
|
||||
|
||||
//MAP
|
||||
if (!map) {
|
||||
return <div>Loading...</div>
|
||||
if (loading) {
|
||||
return (
|
||||
<div
|
||||
sx={{
|
||||
backgroundColor: '#FAEFD6',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
color: '#FF5C00'
|
||||
}}
|
||||
>
|
||||
Loading...
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const { MapContainer, TileLayer, Marker, Popup } = map
|
||||
|
||||
return (
|
||||
<>
|
||||
<body
|
||||
|
|
@ -417,17 +440,23 @@ const Review = () => {
|
|||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet/dist/leaflet.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
|
||||
/>
|
||||
<div
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: ['1fr', '1fr', '2fr 1fr'],
|
||||
// display: 'grid',
|
||||
// gridTemplateColumns: ['1fr', '1fr', '3fr 1fr'],
|
||||
width: '100vw',
|
||||
scrollSnapAlign: 'start'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
sx={{ px: [3, 4, 5, 5], py: 4, pr: [3, 4, 3, 5], width: '100%' }}
|
||||
>
|
||||
<div sx={{ px: [3, 4, 5, 5], pt: 4, pb: 0, width: '100%' }}>
|
||||
<Fade>
|
||||
<Text
|
||||
as="h3"
|
||||
|
|
@ -456,39 +485,31 @@ const Review = () => {
|
|||
variant="subtitle"
|
||||
sx={{
|
||||
color: '#09AFB4',
|
||||
mb: 3,
|
||||
width: ['90vw', '90vw', '100%']
|
||||
my: 2,
|
||||
width: ['90vw', '90vw', '100%'],
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
One Summer. 9,159 students. The ultimate hackathon.
|
||||
</Text>
|
||||
</Balancer>
|
||||
</Fade>
|
||||
<Fade delay={300}>
|
||||
<MapContainer
|
||||
center={[51.505, -0.09]}
|
||||
zoom={2}
|
||||
scrollWheelZoom={false}
|
||||
<Fade delay={400}>
|
||||
<DynamicLeafletMap points={points} />
|
||||
<Text
|
||||
as="p"
|
||||
variant="caption"
|
||||
sx={{
|
||||
height: ['300px', '350px', '400px', '400px'],
|
||||
width: ['350px', '450px', '100%', '100%'],
|
||||
// width: '100%',
|
||||
borderRadius: '10px'
|
||||
// margin: ['auto', 'auto', 'initial', 'initial']
|
||||
color: '#09AFB4',
|
||||
mb: 0,
|
||||
width: ['90vw', '90vw', '100%']
|
||||
}}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Marker position={[51.505, -0.09]}>
|
||||
<Popup>
|
||||
A pretty CSS3 popup. <br /> Easily customizable.
|
||||
</Popup>
|
||||
</Marker>
|
||||
</MapContainer>
|
||||
Every teenager we shipped to during Arcade. Click on the
|
||||
clusters to see more specific locations.
|
||||
</Text>
|
||||
</Fade>
|
||||
<Fade delay={400}>
|
||||
{/* <Fade delay={400}>
|
||||
<Button
|
||||
as="a"
|
||||
sx={{
|
||||
|
|
@ -505,40 +526,19 @@ const Review = () => {
|
|||
>
|
||||
See all projects
|
||||
</Button>
|
||||
</Fade>
|
||||
</Fade> */}
|
||||
</div>
|
||||
<div id="projects">
|
||||
<Marquee
|
||||
pauseOnHover={true}
|
||||
// autoFill={false}
|
||||
direction="up"
|
||||
loop="1"
|
||||
sx={{
|
||||
height: '100%',
|
||||
display: ['none', 'none', 'flex'],
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
{projects.map((p, index) => (
|
||||
<Project
|
||||
key={index}
|
||||
name={p.user[0]}
|
||||
projectName={p.title}
|
||||
country={p.country[0]}
|
||||
img={p.imageLink}
|
||||
/>
|
||||
))}
|
||||
</Marquee>
|
||||
<Marquee
|
||||
pauseOnHover={true}
|
||||
autoFill={true}
|
||||
direction="right"
|
||||
sx={{
|
||||
height: '100%',
|
||||
display: ['flex', 'flex', 'none'],
|
||||
display: 'flex',
|
||||
// display: ['flex', 'flex', 'none'],
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
{projects.map((p, index) => (
|
||||
|
|
@ -546,6 +546,7 @@ const Review = () => {
|
|||
key={index}
|
||||
name={p.user[0]}
|
||||
projectName={p.title}
|
||||
playLink={p.playLink}
|
||||
country={p.country[0]}
|
||||
img={p.imageLink}
|
||||
/>
|
||||
|
|
@ -606,8 +607,8 @@ const Review = () => {
|
|||
width: '90vw',
|
||||
margin: 'auto',
|
||||
height: ['600px', '600px', '750px'],
|
||||
pt: '92px',
|
||||
pb: ['0px', '100px', '200px']
|
||||
pt: ['52px', '32px', '22px'],
|
||||
pb: ['0px', '100px', '100px']
|
||||
}}
|
||||
ref={recapRef}
|
||||
>
|
||||
|
|
@ -620,14 +621,22 @@ const Review = () => {
|
|||
>
|
||||
<div>
|
||||
<img
|
||||
sx={{ width: '90%', margin: 'auto' }}
|
||||
sx={{
|
||||
width: ['90%', '70%', '90%'],
|
||||
margin: 'auto',
|
||||
display: 'block'
|
||||
}}
|
||||
src="/arcade/review/rundown.png"
|
||||
/>
|
||||
<div
|
||||
sx={{
|
||||
transform: 'rotate(-3.7deg)',
|
||||
ml: '5vw',
|
||||
mr: '5vw'
|
||||
mt: '-20px',
|
||||
// ml: '5vw',
|
||||
// mr: '5vw',
|
||||
width: ['90%', '70%', '90%'],
|
||||
display: 'block',
|
||||
margin: 'auto'
|
||||
}}
|
||||
>
|
||||
<Arcader
|
||||
|
|
@ -648,54 +657,54 @@ const Review = () => {
|
|||
flexWrap: 'wrap',
|
||||
width: ['90vw', '70vw', '300px'],
|
||||
margin: 'auto',
|
||||
height: ['300px', '300px', '600px']
|
||||
height: ['220px', '200px', '600px']
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Text
|
||||
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
|
||||
sx={{ fontSize: [4, '38px', '46px'], mb: 0 }}
|
||||
className="slackey"
|
||||
as="h1"
|
||||
>
|
||||
9,159
|
||||
</Text>
|
||||
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="h3">
|
||||
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="p">
|
||||
high schoolers
|
||||
</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text
|
||||
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
|
||||
sx={{ fontSize: [4, '38px', '46px'], mb: 0 }}
|
||||
className="slackey"
|
||||
as="h1"
|
||||
>
|
||||
126,241
|
||||
</Text>
|
||||
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="h3">
|
||||
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="p">
|
||||
hours building
|
||||
</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text
|
||||
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
|
||||
sx={{ fontSize: [4, '38px', '46px'], mb: 0 }}
|
||||
className="slackey"
|
||||
as="h1"
|
||||
>
|
||||
2,000
|
||||
</Text>
|
||||
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="h3">
|
||||
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="p">
|
||||
projects
|
||||
</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text
|
||||
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
|
||||
sx={{ fontSize: [4, '38px', '46px'], mb: 0 }}
|
||||
className="slackey"
|
||||
as="h1"
|
||||
>
|
||||
$400,000
|
||||
</Text>
|
||||
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="h3">
|
||||
<Text sx={{ fontSize: [3, 3, 4], mt: 0 }} as="p">
|
||||
in prizes
|
||||
</Text>
|
||||
</div>
|
||||
|
|
@ -708,14 +717,14 @@ const Review = () => {
|
|||
flexWrap: 'wrap',
|
||||
width: ['90vw', '70vw', '300px'],
|
||||
margin: 'auto',
|
||||
height: ['200px', '300px', '600px']
|
||||
height: ['200px', '300px', '480px']
|
||||
}}
|
||||
>
|
||||
<div sx={{ height: ['100px', '100px', '150px'] }}>
|
||||
<div sx={{ height: ['100px', '100px', '120px'] }}>
|
||||
<TypeAnimation
|
||||
sequence={['9,159']}
|
||||
speed={50}
|
||||
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
|
||||
sx={{ fontSize: [4, '38px', '48px'], mb: 0 }}
|
||||
className="slackey"
|
||||
cursor={false}
|
||||
/>
|
||||
|
|
@ -727,11 +736,11 @@ const Review = () => {
|
|||
cursor={false}
|
||||
/>
|
||||
</div>
|
||||
<div sx={{ height: ['100px', '100px', '150px'] }}>
|
||||
<div sx={{ height: ['100px', '100px', '120px'] }}>
|
||||
<TypeAnimation
|
||||
sequence={['', 1000, '126,241']}
|
||||
speed={50}
|
||||
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
|
||||
sx={{ fontSize: [4, '38px', '48px'], mb: 0 }}
|
||||
className="slackey"
|
||||
cursor={false}
|
||||
/>
|
||||
|
|
@ -743,11 +752,11 @@ const Review = () => {
|
|||
cursor={false}
|
||||
/>
|
||||
</div>
|
||||
<div sx={{ height: ['100px', '100px', '150px'] }}>
|
||||
<div sx={{ height: ['100px', '100px', '120px'] }}>
|
||||
<TypeAnimation
|
||||
sequence={['', 2000, '23,046']}
|
||||
speed={50}
|
||||
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
|
||||
sx={{ fontSize: [4, '38px', '48px'], mb: 0 }}
|
||||
className="slackey"
|
||||
cursor={false}
|
||||
/>
|
||||
|
|
@ -760,11 +769,11 @@ const Review = () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div sx={{ height: ['100px', '100px', '150px'] }}>
|
||||
<div sx={{ height: ['100px', '100px', '120px'] }}>
|
||||
<TypeAnimation
|
||||
sequence={['', 3000, '$400,000']}
|
||||
speed={50}
|
||||
sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
|
||||
sx={{ fontSize: [4, '38px', '48px'], mb: 0 }}
|
||||
className="slackey"
|
||||
cursor={false}
|
||||
/>
|
||||
|
|
@ -805,7 +814,7 @@ const Review = () => {
|
|||
sx={{
|
||||
display: 'block',
|
||||
position: showHighlight ? 'fixed' : 'absolute',
|
||||
top: ['5vh', '5vh', '27vh'],
|
||||
top: ['5vh', '5vh', '15vw'],
|
||||
maxWidth: ['90vw', '90vw', '30vw'],
|
||||
ml: '10vw'
|
||||
}}
|
||||
|
|
@ -928,41 +937,41 @@ const Review = () => {
|
|||
height: '70vh'
|
||||
}}
|
||||
>
|
||||
{/* <Draggable> */}
|
||||
<Dragged
|
||||
img="https://cloud-flbk0h0jg-hack-club-bot.vercel.app/0screenshot_2024-08-16_211342__1_.png"
|
||||
title="AMA w/ Ryan North"
|
||||
sx={{ position: 'absolute', top: '1vw', left: '20vw' }}
|
||||
/>
|
||||
{/* </Draggable> */}
|
||||
{/* <Draggable> */}
|
||||
<Dragged
|
||||
img="https://cloud-bejfiwprw-hack-club-bot.vercel.app/0screenshot_2024-08-27_at_2.41.20_pm.png"
|
||||
title="PCB Workshop by Adam"
|
||||
sx={{ position: 'absolute', top: '2vw', right: '15vw' }}
|
||||
/>
|
||||
{/* </Draggable> */}
|
||||
{/* <Draggable> */}
|
||||
<Dragged
|
||||
img="https://cloud-7oxalj768-hack-club-bot.vercel.app/0img_0560.png"
|
||||
title="Anime Sticker Workshop"
|
||||
sx={{ position: 'absolute', top: '17vw', left: '10vw' }}
|
||||
/>
|
||||
{/* </Draggable> */}
|
||||
{/* <Draggable> */}
|
||||
<Dragged
|
||||
img="/arcade/review/showcase.png"
|
||||
title="Ship Showcase"
|
||||
sx={{ position: 'absolute', top: '20vw', right: '10vw' }}
|
||||
/>
|
||||
{/* </Draggable> */}
|
||||
{/* <Draggable> */}
|
||||
<Dragged
|
||||
img="/arcade/review/frameworkAMA.png"
|
||||
title="AMA w/ FRAMEWORK CEO"
|
||||
sx={{ position: 'absolute', top: '10vw', right: '35vw' }}
|
||||
/>
|
||||
{/* </Draggable> */}
|
||||
<Draggable>
|
||||
<Dragged
|
||||
img="https://cloud-flbk0h0jg-hack-club-bot.vercel.app/0screenshot_2024-08-16_211342__1_.png"
|
||||
title="AMA w/ Ryan North"
|
||||
sx={{ position: 'absolute', top: '1vw', left: '20vw' }}
|
||||
/>
|
||||
</Draggable>
|
||||
<Draggable>
|
||||
<Dragged
|
||||
img="https://cloud-bejfiwprw-hack-club-bot.vercel.app/0screenshot_2024-08-27_at_2.41.20_pm.png"
|
||||
title="PCB Workshop by Adam"
|
||||
sx={{ position: 'absolute', top: '2vw', right: '15vw' }}
|
||||
/>
|
||||
</Draggable>
|
||||
<Draggable>
|
||||
<Dragged
|
||||
img="https://cloud-7oxalj768-hack-club-bot.vercel.app/0img_0560.png"
|
||||
title="Anime Sticker Workshop"
|
||||
sx={{ position: 'absolute', top: '17vw', left: '10vw' }}
|
||||
/>
|
||||
</Draggable>
|
||||
<Draggable>
|
||||
<Dragged
|
||||
img="/arcade/review/showcase.png"
|
||||
title="Ship Showcase"
|
||||
sx={{ position: 'absolute', top: '20vw', right: '10vw' }}
|
||||
/>
|
||||
</Draggable>
|
||||
<Draggable>
|
||||
<Dragged
|
||||
img="/arcade/review/frameworkAMA.png"
|
||||
title="AMA w/ FRAMEWORK CEO"
|
||||
sx={{ position: 'absolute', top: '10vw', right: '35vw' }}
|
||||
/>
|
||||
</Draggable>
|
||||
</div>
|
||||
<div
|
||||
sx={{
|
||||
|
|
@ -1012,7 +1021,7 @@ const Review = () => {
|
|||
// position: 'absolute',
|
||||
top: 0,
|
||||
width: '101vw',
|
||||
mt: '-47px',
|
||||
mt: '0px',
|
||||
zIndex: 5
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
72623
public/arcade/review/locations.json
Normal file
72623
public/arcade/review/locations.json
Normal file
File diff suppressed because it is too large
Load diff
48
yarn.lock
48
yarn.lock
|
|
@ -1780,6 +1780,11 @@
|
|||
classnames "^2.3.2"
|
||||
rc-util "^5.24.4"
|
||||
|
||||
"@react-leaflet/core@^1.0.2", "@react-leaflet/core@^1.1.1":
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.1.1.tgz#827fd05bb542cf874116176d8ef48d5b12163f81"
|
||||
integrity sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==
|
||||
|
||||
"@react-leaflet/core@^2.1.0":
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
|
||||
|
|
@ -5626,7 +5631,19 @@ language-tags@^1.0.9:
|
|||
dependencies:
|
||||
language-subtag-registry "^0.3.20"
|
||||
|
||||
leaflet@^1.9.4:
|
||||
leaflet-canvas-marker@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/leaflet-canvas-marker/-/leaflet-canvas-marker-0.2.0.tgz#997fc81615c0e118e04ce891bee390aac3066fa1"
|
||||
integrity sha512-BKVcBT+sndtN3SId+fe1+kNJHmpLOxCnQX7GNCQ6COmTWiEmmiZ0S1FmH87I0DIR1TqFBzVYVEFCWWHmpeYWyw==
|
||||
dependencies:
|
||||
rbush "^2.0.2"
|
||||
|
||||
leaflet.markercluster@^1.4.1, leaflet.markercluster@^1.5.3:
|
||||
version "1.5.3"
|
||||
resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
|
||||
integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
|
||||
|
||||
leaflet@^1.6.0, leaflet@^1.9.4:
|
||||
version "1.9.4"
|
||||
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
|
||||
integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
|
||||
|
|
@ -7432,6 +7449,11 @@ quick-lru@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
|
||||
integrity sha512-tRS7sTgyxMXtLum8L65daJnHUhfDUgboRdcWW2bR9vBfrj2+O5HSMbQOJfJJjIVSPFqbBCF37FpwWXGitDc5tA==
|
||||
|
||||
quickselect@^1.0.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-1.1.1.tgz#852e412ce418f237ad5b660d70cffac647ae94c2"
|
||||
integrity sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ==
|
||||
|
||||
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
|
||||
|
|
@ -7457,6 +7479,13 @@ raw-body@2.4.1:
|
|||
iconv-lite "0.4.24"
|
||||
unpipe "1.0.0"
|
||||
|
||||
rbush@^2.0.2:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/rbush/-/rbush-2.0.2.tgz#bb6005c2731b7ba1d5a9a035772927d16a614605"
|
||||
integrity sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==
|
||||
dependencies:
|
||||
quickselect "^1.0.1"
|
||||
|
||||
rc-dialog@^9.5.2:
|
||||
version "9.6.0"
|
||||
resolved "https://registry.yarnpkg.com/rc-dialog/-/rc-dialog-9.6.0.tgz#dc7a255c6ad1cb56021c3a61c7de86ee88c7c371"
|
||||
|
|
@ -7564,6 +7593,23 @@ react-konami-code@^2.3.0:
|
|||
dependencies:
|
||||
prop-types "^15.8.1"
|
||||
|
||||
react-leaflet-markercluster@^3.0.0-rc1:
|
||||
version "3.0.0-rc1"
|
||||
resolved "https://registry.yarnpkg.com/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0-rc1.tgz#4e45392d599fb410eac413aeee6cb52f51d0fc5c"
|
||||
integrity sha512-wr8ERtx73sY0uVoQAM1v1vsA5Vsbdgyqc88h+Eo2kYRwNdkVTEOoUTnAh3CgGuOyP0Y9QLd2dKGupGkufpwryQ==
|
||||
dependencies:
|
||||
"@react-leaflet/core" "^1.0.2"
|
||||
leaflet "^1.6.0"
|
||||
leaflet.markercluster "^1.4.1"
|
||||
react-leaflet "^3.0.0"
|
||||
|
||||
react-leaflet@^3.0.0:
|
||||
version "3.2.5"
|
||||
resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-3.2.5.tgz#bec0bfab9dd8c2b030ea630f7a0687a60322ca7d"
|
||||
integrity sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==
|
||||
dependencies:
|
||||
"@react-leaflet/core" "^1.1.1"
|
||||
|
||||
react-leaflet@^4.2.1:
|
||||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.2.1.tgz#c300e9eccaf15cb40757552e181200aa10b94780"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue