|
|
@@ -0,0 +1,147 @@
|
|
|
+import React from 'react';
|
|
|
+import styled from 'styled-components';
|
|
|
+import SVG from 'react-inlinesvg';
|
|
|
+
|
|
|
+const Section = styled.div`
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0;
|
|
|
+ padding: 90px 0 100px;
|
|
|
+ background-color: #282828;
|
|
|
+
|
|
|
+ @media only screen and (max-width: 768px) {
|
|
|
+ margin: 0;
|
|
|
+ padding: 48px 0 16px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const Wrapper = styled.div`
|
|
|
+ width: 1200px;
|
|
|
+ max-width: 100%;
|
|
|
+ flex: 1 1 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ @media only screen and (max-width: 1200px) {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const Title = styled.h3`
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 300;
|
|
|
+ margin: 0 0 60px;
|
|
|
+ color: #f5f5f5;
|
|
|
+
|
|
|
+ @media only screen and (max-width: 768px) {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 56px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media only screen and (max-width: 448px) {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const Button = styled.button`
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 16px;
|
|
|
+ padding: 12px 28px;
|
|
|
+ font-family: 'Nunito', sans-serif;
|
|
|
+ background-color: #eee;
|
|
|
+ border: 1px solid #aaa;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-decoration: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ outline: none;
|
|
|
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
|
+ transition: transform 0.3s ease-out;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ @media only screen and (max-width: 768px) {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ > * {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ :hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const FirefoxButton = styled(Button)`
|
|
|
+ color: #e0890f;
|
|
|
+`;
|
|
|
+
|
|
|
+const ChromeButton = styled(Button)`
|
|
|
+ color: #4285f4;
|
|
|
+`;
|
|
|
+
|
|
|
+const Link = styled.a`
|
|
|
+ text-decoration: none;
|
|
|
+
|
|
|
+ :visited,
|
|
|
+ :hover,
|
|
|
+ :active,
|
|
|
+ :focus {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const Icon = styled(SVG)`
|
|
|
+ svg {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 16px;
|
|
|
+ fill: ${props => props.color || '#333'};
|
|
|
+
|
|
|
+ @media only screen and (max-width: 768px) {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const Extensions = () => (
|
|
|
+ <Section>
|
|
|
+ <Title>Browser extensions.</Title>
|
|
|
+ <Wrapper>
|
|
|
+ <Link
|
|
|
+ href="https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd"
|
|
|
+ target="_blank"
|
|
|
+ rel="noopener noreferrer"
|
|
|
+ >
|
|
|
+ <ChromeButton>
|
|
|
+ <Icon src="/images/googlechrome.svg" color="#4285f4" />
|
|
|
+ <span>Download for Chrome</span>
|
|
|
+ </ChromeButton>
|
|
|
+ </Link>
|
|
|
+ <Link
|
|
|
+ href="https://addons.mozilla.org/en-US/firefox/addon/kutt/"
|
|
|
+ target="_blank"
|
|
|
+ rel="noopener noreferrer"
|
|
|
+ >
|
|
|
+ <FirefoxButton>
|
|
|
+ <Icon src="/images/mozillafirefox.svg" color="#e0890f" />
|
|
|
+ <span>Download for Firefox</span>
|
|
|
+ </FirefoxButton>
|
|
|
+ </Link>
|
|
|
+ </Wrapper>
|
|
|
+ </Section>
|
|
|
+);
|
|
|
+
|
|
|
+export default Extensions;
|
poeti8
