144 lines
3.4 KiB
TypeScript
144 lines
3.4 KiB
TypeScript
import * as React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
import { addFadeInAnimation } from 'ts/constants/animations';
|
|
|
|
interface Props {
|
|
title: string;
|
|
maxWidth?: string;
|
|
maxWidthHeading?: string;
|
|
isLargeTitle?: boolean;
|
|
isFullWidth?: boolean;
|
|
isCenteredMobile?: boolean;
|
|
description: string;
|
|
figure?: React.ReactNode;
|
|
actions?: React.ReactNode;
|
|
}
|
|
|
|
const Section = styled.section`
|
|
padding: 120px 0;
|
|
|
|
@media (max-width: 768px) {
|
|
padding: 60px 0;
|
|
}
|
|
`;
|
|
|
|
interface WrapProps {
|
|
isCentered?: boolean;
|
|
isFullWidth?: boolean;
|
|
isCenteredMobile?: boolean;
|
|
}
|
|
const Wrap = styled.div<WrapProps>`
|
|
width: calc(100% - 60px);
|
|
margin: 0 auto;
|
|
|
|
@media (min-width: 768px) {
|
|
max-width: ${props => (!props.isFullWidth ? '895px' : '1136px')};
|
|
flex-direction: row-reverse;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: ${props => props.isCentered && 'center'};
|
|
justify-content: ${props => (props.isCentered ? 'center' : 'space-between')};
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
text-align: ${props => (props.isCenteredMobile ? `center` : 'left')};
|
|
}
|
|
`;
|
|
|
|
interface TitleProps {
|
|
isLarge?: any;
|
|
maxWidth?: string;
|
|
}
|
|
const Title = styled.h1<TitleProps>`
|
|
font-size: ${props => (props.isLarge ? '80px' : '50px')};
|
|
font-weight: 300;
|
|
line-height: 1.1;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 30px;
|
|
max-width: ${props => props.maxWidth};
|
|
${addFadeInAnimation('0.5s')}
|
|
|
|
@media (max-width: 1024px) {
|
|
font-size: 60px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
font-size: 46px;
|
|
}
|
|
`;
|
|
|
|
const Description = styled.p`
|
|
font-size: 22px;
|
|
line-height: 31px;
|
|
font-weight: 300;
|
|
padding: 0;
|
|
margin-bottom: 50px;
|
|
color: ${props => props.theme.introTextColor};
|
|
${addFadeInAnimation('0.5s', '0.15s')} @media (max-width: 1024px) {
|
|
margin-bottom: 30px;
|
|
}
|
|
`;
|
|
|
|
const Content = styled.div<{ width: string }>`
|
|
width: 100%;
|
|
|
|
@media (min-width: 768px) {
|
|
max-width: ${props => props.width};
|
|
}
|
|
`;
|
|
|
|
const ButtonWrap = styled.div`
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
* + * {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
> *:nth-child(1) {
|
|
${addFadeInAnimation('0.6s', '0.3s')};
|
|
}
|
|
> *:nth-child(2) {
|
|
${addFadeInAnimation('0.6s', '0.4s')};
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
* {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
* + * {
|
|
margin-left: 0;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const Hero: React.StatelessComponent<Props> = (props: Props) => (
|
|
<Section>
|
|
<Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth} isCenteredMobile={props.isCenteredMobile}>
|
|
{props.figure && <Content width="400px">{props.figure}</Content>}
|
|
|
|
<Content width={props.maxWidth ? props.maxWidth : props.figure ? '546px' : '678px'}>
|
|
<Title isLarge={props.isLargeTitle} maxWidth={props.maxWidthHeading}>
|
|
{props.title}
|
|
</Title>
|
|
|
|
<Description>{props.description}</Description>
|
|
|
|
{props.actions && <ButtonWrap>{props.actions}</ButtonWrap>}
|
|
</Content>
|
|
</Wrap>
|
|
</Section>
|
|
);
|
|
|
|
Hero.defaultProps = {
|
|
isCenteredMobile: true,
|
|
};
|