From fdafc9eef6627025f10a58fd1f0105cd74363ecb Mon Sep 17 00:00:00 2001 From: Giuseppe Macri Date: Tue, 10 Sep 2019 23:47:04 +0200 Subject: [PATCH] Created support policy page Signed-off-by: Giuseppe Macri --- website/src/components/common/styles.js | 106 ++++++++++++++++++++++++ website/src/components/hero.js | 98 +--------------------- website/src/components/home.js | 3 +- website/src/components/policy.js | 97 ++++++++++++++++++++++ website/src/content.js | 4 + website/src/routes.js | 3 + 6 files changed, 216 insertions(+), 95 deletions(-) create mode 100644 website/src/components/common/styles.js create mode 100644 website/src/components/policy.js diff --git a/website/src/components/common/styles.js b/website/src/components/common/styles.js new file mode 100644 index 00000000000..0e668171fdb --- /dev/null +++ b/website/src/components/common/styles.js @@ -0,0 +1,106 @@ +import React from 'react'; + +import styled from 'styled-components'; +import {media} from '../../styles'; +import {cdnUrl} from '../../utils'; + +export const StyledCaption = styled.div` + max-width: unset; + text-align: center; + margin-bottom: 32px; + margin-top: 6rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + ${media.palm` + width: auto; + padding-top: 0; + margin-right: 0; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 0px; + `} .kg-home__caption__subtitle { + font-size: 36px; + font-weight: 600; + margin-bottom: 20px; + line-height: 1.3; + + ${media.palm` + font-size: 20px; + `}; + } + + .kg-home__caption__description { + font-size: 14px; + color: ${props => props.theme.labelColor}; + line-height: 24px; + margin-bottom: 32px; + max-width: 400px; + + span.t-bold { + color: ${props => props.theme.textColor}; + font-weight: 500; + } + + ${media.palm` + margin-bottom: 32px; + text-align: center; + font-size: 12px; + `}; + } +`; + +export const BackgroundImage = styled.img` + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 70%; + object-fit: cover; + background: #0f1d29; +`; + +export const Container = styled.div` + padding: ${props => props.theme.margins.huge}; + color: white; + position: relative; + + ${media.palm` + padding-top: ${props => props.theme.margins.large}; + `} +`; + +export const Content = styled.div` + position: relative; + display: flex; + flex-direction: column; + align-items: center; + + ${media.palm` + margin-top: 3rem; + `}; +`; + +export const Logo = styled.img` + position: absolute; + left: 0; + top: 0; + width: 120px; + ${media.palm` + position: inherit; + margin-top: ${props => props.theme.margins.normal}; + margin-bottom: ${props => props.theme.margins.small}; + `}; +`; + +export const HeroImage = React.forwardRef((props, ref) => ( + +)); + +export const LogoImage = React.forwardRef((props, ref) => ( + +)); + diff --git a/website/src/components/hero.js b/website/src/components/hero.js index ec7daa5adb5..2eba9043d9d 100644 --- a/website/src/components/hero.js +++ b/website/src/components/hero.js @@ -29,6 +29,8 @@ import SlideShow from './common/slideshow'; import {LinkButton} from './common/styled-components'; import {DEMO_LINK} from '../constants'; +import {Container, Content, HeroImage, LogoImage, StyledCaption} from './common/styles'; + const SlideShowAnimation = keyframes` 0% { opacity: 0; @@ -48,98 +50,6 @@ const FadeIn = styled.div` animation-fill-mode: both; `; -const Container = styled.div` - padding: ${props => props.theme.margins.huge}; - color: white; - position: relative; - - ${media.palm` - padding-top: ${props => props.theme.margins.large}; - `} -`; - -const Content = styled.div` - position: relative; - display: flex; - flex-direction: column; - align-items: center; - - ${media.palm` - margin-top: 3rem; - `}; -`; - -const BackgroundImage = styled.img` - position: absolute; - left: 0px; - top: 0px; - width: 100%; - height: 70%; - object-fit: cover; - background: #0f1d29; -`; - -const StyledCaption = styled.div` - max-width: 450px; - text-align: center; - margin-bottom: 32px; - margin-top: 6rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - ${media.palm` - width: auto; - padding-top: 0; - margin-right: 0; - display: flex; - flex-direction: column; - align-items: center; - margin-top: 0px; - `} .kg-home__caption__subtitle { - font-size: 36px; - font-weight: 600; - margin-bottom: 20px; - line-height: 1.3; - - ${media.palm` - font-size: 20px; - `}; - } - - .kg-home__caption__description { - font-size: 14px; - color: ${props => props.theme.labelColor}; - line-height: 24px; - margin-bottom: 32px; - max-width: 400px; - - span.t-bold { - color: ${props => props.theme.textColor}; - font-weight: 500; - } - - ${media.palm` - margin-bottom: 32px; - text-align: center; - font-size: 12px; - `}; - } -`; - -const Logo = styled.img` - position: absolute; - left: 0; - top: 0; - width: 120px; - ${media.palm` - position: inherit; - margin-top: ${props => props.theme.margins.normal}; - margin-bottom: ${props => props.theme.margins.small}; - `}; -`; - const ButtonContainer = styled.div` display: flex; justify-content: center; @@ -185,9 +95,9 @@ export default class Hero extends PureComponent { const isPalm = this.state.width <= breakPoints.palm; return ( - + - +
Make an impact with your location data diff --git a/website/src/components/home.js b/website/src/components/home.js index 5d62632910f..a803fde9f8b 100644 --- a/website/src/components/home.js +++ b/website/src/components/home.js @@ -38,6 +38,7 @@ import Announcement from '../../../examples/demo-app/src/components/announcement const BannerKey = 'kgHideBanner-iiba'; const BannerHeight = 30; +const BACKGROUND_COLOR = '#82368c'; const SECTION_CONTENT = { showcase: Showcase, @@ -79,7 +80,7 @@ export default class Home extends PureComponent { diff --git a/website/src/components/policy.js b/website/src/components/policy.js new file mode 100644 index 00000000000..f7559ac04a4 --- /dev/null +++ b/website/src/components/policy.js @@ -0,0 +1,97 @@ +// Copyright (c) 2019 Uber Technologies, Inc. +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in +// all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +// THE SOFTWARE. + +import React, {PureComponent} from 'react'; +import styled, {ThemeProvider} from 'styled-components'; +import {Container, Content, HeroImage, LogoImage, StyledCaption} from './common/styles'; +import {theme} from '../styles'; +import Header from './header'; +import {cdnUrl} from '../utils'; + +const GITHUB_PROJECT = 'https://github.com/keplergl/kepler.gl'; +const GITHUB_PROJECT_ISSUES = `${GITHUB_PROJECT}/issues`; + +const StyledContainer = styled(Container)` + background-color: black; + height: 100vh; + + max-width: unset; + + .kg-home__caption__description { + max-width: unset; + } + + h3 { + margin-bottom: 24px; + } + + a { + text-decoration: underline; + } + + a:visited { + color: white; + } + + img.hero-image { + height: 100vh; + } + + +`; + +export default class Home extends PureComponent { + render() { + return ( + +
+ +
+ + + + + +
+ Support Policy +
+
+

+ Kepler.gl is an open source project. Its source code is available at Kepler.gl Github project. +

+ + As an open source project, questions and bug reports can be filed with the project community, + and you can participate in the development of the project's source code. Bug reports and + issues can be submitted at Kepler.gl Github issues. + [Questions can be asked on the project's mailing lists, which you can subscribe to at [URL] // NEED TO BE DEFINED] + Please review the applicable contributing guidelines and procedures in connection with your submissions. + Please note that the Kepler.gl project and Urban Computing Foundation do not otherwise provide support for users of Kepler.gl software. + +
+ + + +
+ + ); + } +} diff --git a/website/src/content.js b/website/src/content.js index 4058399819d..6610617e7b2 100644 --- a/website/src/content.js +++ b/website/src/content.js @@ -81,6 +81,10 @@ export const HEADER_NAVS = [ { text: 'Github', link: 'https://github.com/keplergl/kepler.gl' + }, + { + text: 'Support Policy', + link: '/policy' } ]; diff --git a/website/src/routes.js b/website/src/routes.js index 8ddf29e9373..983feb100c5 100644 --- a/website/src/routes.js +++ b/website/src/routes.js @@ -26,6 +26,8 @@ import store from './reducers'; import Home from './components/home'; import App from './components/app'; import Demo from '../../examples/demo-app/src/app'; +import Policy from './components/policy'; + import {buildAppRoutes} from '../../examples/demo-app/src/utils/routes'; const appRoute = buildAppRoutes(Demo); @@ -69,6 +71,7 @@ export default () => ( + {appRoute}