kitten.sh
1import React from 'react';
2import { Wrapper } from './wrapper';
3import styled from 'styled-components';
4
5import logoFormidableWhite from '../assets/logo_formidable_white.svg';
6
7const Container = styled.footer`
8 background: #1f1f1f;
9 color: white;
10 display: flex;
11 flex-direction: column;
12 height: auto;
13 padding: 9rem 0;
14 align-items: center;
15`;
16
17const FooterDescription = styled.p`
18 flex: 2;
19 font-size: 1.4rem;
20 line-height: 1.6;
21 margin: 2rem 0 0;
22 max-width: 56rem;
23 text-align: left;
24 @media (min-width: 768px) {
25 font-size: 1.5rem;
26 margin: 0;
27 min-width: auto;
28 }
29 & a {
30 color: white;
31 transition: opacity 0.4s;
32 }
33 & a:hover {
34 opacity: 0.7;
35 }
36 & a:visited {
37 color: white;
38 }
39`;
40
41const FooterLeft = styled.div`
42 display: flex;
43 flex: 1;
44 padding: 0 4rem 0 0;
45 text-align: left;
46`;
47
48const FooterLogo = styled.img`
49 width: 100px;
50`;
51
52const FooterLinks = styled.ul`
53 font-size: 1.4rem;
54 list-style: none;
55 padding: 0px 8px;
56 text-transform: uppercase;
57
58 & li {
59 margin: 0.2rem 0;
60 }
61
62 & a {
63 color: white;
64 letter-spacing: 0.05em;
65 transition: opacity 0.4s;
66 }
67
68 & a:hover {
69 opacity: 0.7;
70 }
71
72 & a:visited {
73 color: white;
74 }
75`;
76
77export const Footer = () => (
78 <Container>
79 <Wrapper noPadding>
80 <FooterLeft>
81 <a href="https://formidable.com" title="Formidable">
82 <FooterLogo src={logoFormidableWhite} alt="Formidable Logo" />
83 </a>
84 <FooterLinks>
85 <li>
86 <a href="https://formidable.com/contact/" title="Contact">
87 Contact
88 </a>
89 </li>
90 <li>
91 <a href="https://formidable.com/careers/" title="Careers">
92 Careers
93 </a>
94 </li>
95 </FooterLinks>
96 </FooterLeft>
97 <FooterDescription>
98 Formidable is a global design and engineering consultancy and open
99 source software organization, specializing in React.js, React Native,
100 GraphQL, Node.js, and the extended JavaScript ecosystem. We have
101 locations in Seattle, London, Toronto, Denver, and Phoenix with remote
102 consultants worldwide. For more information please visit{' '}
103 <a
104 href="https://formidable.com/"
105 target="_blank"
106 rel="noopener noreferrer"
107 >
108 formidable.com.
109 </a>
110 </FooterDescription>
111 </Wrapper>
112 </Container>
113);