[HCB] Add Mobile Install Counter to HCB Landing Page (#1734)

Add Mobile Install Counter to HCB Landing Page
This commit is contained in:
Mohamad Mortada 2025-12-03 21:34:25 -08:00 committed by GitHub
parent 986190148c
commit c2dc6b527e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -171,6 +171,14 @@ function MobileAppAlert() {
export default function Page() { export default function Page() {
const [hasReferral, setHasReferral] = useState(false) const [hasReferral, setHasReferral] = useState(false)
const [mobileInstalls, setMobileInstalls] = useState(0)
useEffect(() => {
fetch('https://hcb.hackclub.com/stats')
.then(res => res.json())
.then(data => {
setMobileInstalls(data.mobile_installs)
})
}, [])
useEffect(() => { useEffect(() => {
const params = new URLSearchParams(window.location.search) const params = new URLSearchParams(window.location.search)
@ -415,7 +423,10 @@ export default function Page() {
<Icon glyph="view-forward" /> <Icon glyph="view-forward" />
</Button> </Button>
</Box> </Box>
<Card sx={{ backgroundImage: 'linear-gradient(to right, #fcc8bf, #ffce33)', px: [5, 5], py: '0 !important', height: 'fit-content', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}> <Card sx={{ backgroundImage: 'linear-gradient(to right, #fcc8bf, #ffce33)', px: [5, 5], py: '0 !important', height: 'fit-content', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', position: 'relative' }}>
<Text as="span" sx={{ position: 'absolute', bottom: 12, left: 12, bg: 'white', color: 'slate', fontSize: 14, fontWeight: 'bold', px: 3, py: 2, borderRadius: 30, boxShadow: 'small' }}>
{mobileInstalls.toLocaleString()} installs
</Text>
<Box as="img" src="mobile-mockup.png" sx={{ display: 'block', width: '100%', height: 'auto' }} /> <Box as="img" src="mobile-mockup.png" sx={{ display: 'block', width: '100%', height: 'auto' }} />
</Card> </Card>
</Grid> </Grid>