mirror of
https://github.com/D4M13N-D3V/comissions-app-ui.git
synced 2025-03-13 15:55:08 +00:00
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import * as React from 'react';
|
|
import { alpha } from '@mui/material';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Container from '@mui/material/Container';
|
|
import Link from '@mui/material/Link';
|
|
import Stack from '@mui/material/Stack';
|
|
import TextField from '@mui/material/TextField';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<Box
|
|
id="home"
|
|
sx={(theme) => ({
|
|
width: '100%',
|
|
backgroundImage:
|
|
theme.palette.mode === 'light'
|
|
? 'linear-gradient(180deg, #CEE5FD, #FFF)'
|
|
: 'linear-gradient(#02294F, #090E10)',
|
|
backgroundSize: '100% 20%',
|
|
backgroundRepeat: 'no-repeat',
|
|
})}
|
|
>
|
|
<Container
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
pt: { xs: 14, sm: 20 },
|
|
pb: { xs: 8, sm: 12 },
|
|
}}
|
|
>
|
|
<Stack spacing={2} useFlexGap sx={{ width: { xs: '100%', sm: '70%' } }}>
|
|
<Typography
|
|
component="h2"
|
|
variant="h2"
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', md: 'row' },
|
|
alignSelf: 'center',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
Artists are
|
|
<Typography
|
|
component="span"
|
|
variant="h2"
|
|
sx={{
|
|
color: (theme) =>
|
|
theme.palette.mode === 'light' ? 'primary.main' : 'primary.light',
|
|
}}
|
|
>
|
|
protected.
|
|
</Typography>
|
|
</Typography>
|
|
<Typography variant="body1" textAlign="center" color="text.secondary">
|
|
We take a 13.5% precentage of all transactions that go through the platform. Stripe takes a 2.9% and 30 cents per transaction. We intend to take another 3.5% and add it to a fund. The intention of this fund will be to pay for claims that artists make for charge backs against their accounts and other such issues. The funds may be appropriated for other on platform enhancements that are voted in through community polls . The rest of the transaction fee will go to the platform and will be reinvested into the software and used to compensate the team.
|
|
</Typography>
|
|
<Stack
|
|
direction={{ xs: 'column', sm: 'row' }}
|
|
alignSelf="center"
|
|
spacing={1}
|
|
useFlexGap
|
|
sx={{ pt: 2, width: { xs: '100%', sm: 'auto' } }}
|
|
>
|
|
<Button variant="contained" color="primary">
|
|
Become an artist
|
|
</Button>
|
|
</Stack>
|
|
<Typography variant="caption" textAlign="center" sx={{ opacity: 0.8 }}>
|
|
By clicking "Become an artist" you agree to our
|
|
<Link href="#" color="primary">
|
|
Terms & Conditions
|
|
</Link>
|
|
.
|
|
</Typography>
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|