v3/packages/design-system/organisms/landing/Landing.tsx

import { palette } from '@roleypoly/design-system/atoms/colors';
import { HalfsiesContainer, HalfsiesItem } from '@roleypoly/design-system/atoms/halfsies';
import { Space } from '@roleypoly/design-system/atoms/space';
import { LargeText, LargeTitle } from '@roleypoly/design-system/atoms/typography';
import { DemoDiscord } from '@roleypoly/design-system/molecules/demo-discord';
import { DemoPicker } from '@roleypoly/design-system/molecules/demo-picker';
import * as React from 'react';
import { DemoAlignment, DemoSubtitle, HeroCentering, HeroText } from './Landing.styled';

export const Landing = () => (
    <HeroCentering>
        <HeroText>
            <div>
                <LargeTitle>Discord roles for humans.</LargeTitle>
            </div>
            <div style={{ color: palette.taupe500 }}>
                <LargeText>
                    Ditch the bot commands. It's&nbsp;{new Date().getFullYear()}.
                </LargeText>
            </div>
        </HeroText>
        <Space />
        <HalfsiesContainer>
            <HalfsiesItem style={{ marginTop: '2em' }}>
                <DemoAlignment>
                    <DemoDiscord />
                </DemoAlignment>
                <DemoSubtitle>Why are you okay with antiques?</DemoSubtitle>
            </HalfsiesItem>
            <HalfsiesItem style={{ marginTop: '2em' }}>
                <DemoAlignment>
                    <DemoPicker />
                </DemoAlignment>
                <DemoSubtitle>Just click or tap.</DemoSubtitle>
            </HalfsiesItem>
        </HalfsiesContainer>
    </HeroCentering>
);