index.js

import { keyframes, styled } from 'goober';
import { Box } from '../../components/box/box';
import { Logo } from '../../components/logo/logo';
import { Text } from '../../components/text/text';

const bg = keyframes({
    from: {
        backgroundSize: '100%'
    },
    '50%': {
        backgroundSize: '200%'
    },
    to: {
        backgroundSize: '100%'
    }
});

const SuperTitle = styled(Text)(({ theme }) => ({
    backgroundImage: `linear-gradient(to left, ${theme.colors['accent-300']}, ${theme.colors['accent-100']})`,
    backgroundSize: '100%',
    padding: theme.sizes[100],
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontWeight: 'bolder',
    animation: `${bg} 10s linear infinite`
}));

export default function TheGreatShaveOff() {
    return (
        <Box centered fill full size={400}>
            <SuperTitle size={600} bold>
                The Great Shave Off
            </SuperTitle>
            <Box marginAuto max full size={400}>
                <Text size={400} bold>
                    Hello there!
                </Text>
                <Box size={200} />
                <Text>
                    <Logo /> is all about keeping it small and offer the same functionalities. So
                    with that, we're launching a new challenge open to <b>everyone</b> who wants to
                    try it!
                </Text>
                <Box size={200} />
                <Text>
                    In exchange of your byte shavings we are offering <b>1USD</b> dollar for each{' '}
                    <b>1B</b> removed from goober's output, minified and gzipped.
                </Text>
                <Box size={400} />
                <Text size={400}>How it's all gonna happen</Text>
                <Box size={200} />
                <Text>
                    Step 1: Clone the repo from 👉{' '}
                    <Text
                        as="a"
                        href="https://github.com/cristianbote/goober"
                        color="accent-100"
                        bold
                    >
                        https://github.com/cristianbote/goober
                    </Text>
                </Text>
                <Box size={300} />
                <Text>Step 2: Do your magic of shaving off bytes!</Text>
                <Box size={300} />
                <Text>Step 3: Open a PR to the above repo with the changes.</Text>
                <Text faded>
                    On each PR there's an action that builds out the changes and computes the amout
                    of shavings.
                </Text>
                <Box size={300} />
                <Text>
                    Step 4: Submit an expense into <Logo />
                    's open collective 👉{' '}
                    <Text as="a" href="https://opencollective.com/goober" color="accent-100" bold>
                        https://opencollective.com/goober
                    </Text>
                </Text>
                <Text faded>
                    The amount should be calculated as per the amount of bytes reported by the
                    action.
                </Text>
                <Text as="pre" faded>
                    -1 B = 1 USD\n-10 B = 10 USD\n-100 B = 100 USD
                </Text>
                <Box size={400} />
                <Text size={400}>That's about it!</Text>
                <Text>
                    If you have more questions don't hesitate to reach out by opening an issue.
                </Text>
                <Box size={400} />
                <Text>
                    This challenge would not be possible without the financial support from our
                    backers. And with this we would like to thank them for their support! 🙏
                </Text>
                <Box size={200} />
                <Text>
                    If you'd like to support <Logo /> as well go to our{' '}
                    <Text as="a" href="https://opencollective.com/goober" color="accent-100" bold>
                        https://opencollective.com/goober
                    </Text>{' '}
                    and become one!
                </Text>
            </Box>
        </Box>
    );
}