crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polished website

Browse Source
This commit is contained in:
David Sun
2019-05-20 12:25:40 -07:00
parent 1e7efe026a
commit a1895d4157
16 changed files with 441 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/website/ts/components/hero.tsx
View File

@@ -16,14 +16,16 @@ interface Props {
actions?: React.ReactNode;
background?: React.ReactNode;
announcement?: AnnouncementProps;
sectionPadding?: string;
}
interface SectionProps {
isAnnouncement?: boolean;
padding?: string;
}
const Section = styled.section<SectionProps>`
padding: ${props => (props.isAnnouncement ? '50px 0 120px 0' : '120px 0')};
padding: ${props => props.padding || (props.isAnnouncement ? '50px 0 120px 0' : '120px 0')};
position: relative;
@media (max-width: 768px) {
padding: 60px 0;
@@ -129,14 +131,14 @@ const ButtonWrap = styled.div`
const BackgroundWrap = styled.div`
position: absolute;
bottom:0;
left:0;
right:0;
top:0;
`
bottom: 0;
left: 0;
right: 0;
top: 0;
`;
export const Hero: React.StatelessComponent<Props> = (props: Props) => (
<Section isAnnouncement={!!props.announcement}>
<Section padding={props.sectionPadding} isAnnouncement={!!props.announcement}>
{!!props.background && <BackgroundWrap>{props.background}</BackgroundWrap>}
<Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth} isCenteredMobile={props.isCenteredMobile}>
{props.figure && <Content width="400px">{props.figure}</Content>}