kitten.sh
1import React from 'react';
2import styled from 'styled-components';
3import PropTypes from 'prop-types';
4
5import Hero from '../screens/home/hero';
6import logoFormidableWhite from '../assets/logo_formidable_white.svg';
7import LeftTriangles from '../assets/left-triangles.svg';
8import RightTriangles from '../assets/right-triangles.svg';
9
10const Container = styled.header`
11 background: rgb(109, 117, 153);
12 background: linear-gradient(
13 225deg,
14 rgba(109, 117, 153, 1) 0%,
15 rgba(41, 45, 55, 1) 100%
16 );
17 background-size: 100% 100%;
18 color: white;
19 height: 100%;
20 padding: 0 0 4rem;
21 width: 100%;
22 display: flex;
23 justify-content: center;
24 position: relative;
25 overflow: hidden;
26`;
27
28const HeaderContainer = styled.a`
29 display: flex;
30 position: absolute;
31 left: 0.25rem;
32 top: 0.25rem;
33 width: 12rem;
34 flex-direction: column;
35 color: #ffffff;
36 text-decoration: none;
37 z-index: 2;
38`;
39
40const HeaderText = styled.p`
41 text-transform: uppercase;
42 font-size: 1.5rem;
43 margin-left: 14px;
44 line-height: 1.9rem;
45 margin-bottom: 0;
46`;
47
48const HeaderLogo = styled.img`
49 width: 70px;
50 z-index: 1;
51`;
52
53const LeftTrianglesImg = styled.img`
54 position: absolute;
55 display: block;
56 left: 0;
57 top: 0;
58 height: 80%;
59 max-width: none;
60`;
61
62const RightTrianglesImg = styled.img`
63 position: absolute;
64 right: 0;
65 bottom: 0;
66 display: none;
67 height: 45%;
68 @media (min-width: 768px) {
69 display: block;
70 }
71`;
72
73export const Header = ({ content }) => (
74 <Container>
75 <LeftTrianglesImg src={LeftTriangles} />
76 <RightTrianglesImg src={RightTriangles} />
77
78 <HeaderContainer href="https://formidable.com" title="Formidable">
79 <HeaderText>Another oss project by </HeaderText>
80 <HeaderLogo src={logoFormidableWhite} alt="Formidable Logo" />
81 </HeaderContainer>
82 <Hero content={content.hero} />
83 </Container>
84);
85
86Header.propTypes = {
87 content: PropTypes.shape({
88 hero: PropTypes.shape({ copyText: PropTypes.string }),
89 }).isRequired,
90};