Aarni Halinen
56 lines
986 B
TypeScript
56 lines
986 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import colors from "@theme/colors";
|
|
import breakpoints from "@theme/breakpoints";
|
|
|
|
const Container = styled.div`
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
padding: 0;
|
|
min-height: 75vh;
|
|
|
|
section {
|
|
padding: 2rem 6rem;
|
|
|
|
@media screen and (max-width: ${breakpoints.mobile}) {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
aside {
|
|
max-width: 50%;
|
|
padding: 3rem 6rem;
|
|
align-items: center;
|
|
|
|
@media screen and (max-width: ${breakpoints.mobile}) {
|
|
max-width: unset;
|
|
padding: 2rem 1rem;
|
|
}
|
|
}
|
|
|
|
& > div {
|
|
flex: 8;
|
|
}
|
|
|
|
@media screen and (max-width: ${breakpoints.mobile}) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
color: ${colors.white};
|
|
background-color: ${colors.darkBlue};
|
|
|
|
a:hover {
|
|
color: ${colors.white};
|
|
}
|
|
`;
|
|
|
|
const Hero: React.FC = ({ children }) => (
|
|
<Container>
|
|
{children}
|
|
</Container>
|
|
);
|
|
|
|
export default Hero;
|