mirror of
https://github.com/D4M13N-D3V/comissions-app-ui.git
synced 2025-03-13 15:55:08 +00:00
69 lines
3.1 KiB
TypeScript
69 lines
3.1 KiB
TypeScript
import * as React from 'react';
|
|
import Typography from '@mui/material/Typography';
|
|
import Box from '@mui/material/Box';
|
|
import Container from '@mui/material/Container';
|
|
import Button from '@mui/material/Button';
|
|
import { useMediaQuery } from '@mui/material';
|
|
import { useTheme } from '@mui/system';
|
|
import { OpenInNew } from '@mui/icons-material';
|
|
|
|
const whiteLogos = [
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e891fa22f89efd7477a_TerraLight.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a09d1f6337b1dfed14ab_colorado-white.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
|
|
];
|
|
|
|
const darkLogos = [
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e911fa22f2203d7514c_TerraDark.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a0990f3717787fd49245_colorado-black.svg',
|
|
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5ca4e548b0deb1041c33_Ankara-black.svg',
|
|
];
|
|
|
|
const logoStyle = {
|
|
width: '64px',
|
|
opacity: 0.3,
|
|
};
|
|
|
|
export default function BetaAccess() {
|
|
const theme = useTheme();
|
|
const isSmallScreen = useMediaQuery('(max-width:600px)');
|
|
const columns = isSmallScreen ? 1 : 3;
|
|
const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
|
|
|
|
return (
|
|
<Container
|
|
id="beta-access"
|
|
sx={{
|
|
pt: { xs: 4, sm: 12 },
|
|
pb: { xs: 8, sm: 16 },
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: { xs: 3, sm: 6 },
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: { sm: '100%', md: '60%' },
|
|
textAlign: { sm: 'left', md: 'center' },
|
|
}}
|
|
>
|
|
<Typography component="h2" variant="h4" color="text.primary">
|
|
Founders Club
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary" sx={{marginTop:"3%"}}>
|
|
Join the discord to get access to the beta and help shape the future of Request.Box. Founders club members will receive perks and early access to features. They will also vote in special community polls that influence the platforms development.
|
|
</Typography>
|
|
<Button color="primary" variant="contained" href="https://discord.gg/8v6j6j6C" target="_blank" rel="noopener" startIcon={<OpenInNew/>} sx={{marginTop:"3%"}}>OPEN DISCORD</Button>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
}
|