keplergl · macrigiuseppe · Sep 20, 2019 · Sep 10, 2019 · Sep 12, 2019
diff --git a/website/src/components/common/styles.js 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) => (
+  <BackgroundImage {...props} ref={ref} src={cdnUrl('hero/kepler.gl-background.png')}/>
+));
+
+export const LogoImage = React.forwardRef((props, ref) => (
+  <Logo {...props} src={cdnUrl('icons/kepler.gl-logo.png')} />
+));
+
diff --git 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 (
       <Container>
-        <BackgroundImage src={cdnUrl('hero/kepler.gl-background.png')} />
+        <HeroImage />
         <Content>
-          <Logo src={cdnUrl('icons/kepler.gl-logo.png')} />
+          <LogoImage />
           <StyledCaption>
             <div className="kg-home__caption__subtitle">
               Make an impact with your location data

diff --git 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 {
           <Banner
             show={this.state.showBanner}
             height={BannerHeight}
-            bgColor="#82368c"
+            bgColor={BACKGROUND_COLOR}
             onClose={this._hideBanner}
           >
             <Announcement onDisable={this._disableBanner}/>

diff --git a/website/src/components/policy.js b/website/src/components/policy.js
@@ -0,0 +1,102 @@
+// 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';
+
+const GITHUB_PROJECT = 'https://github.com/keplergl/kepler.gl';
+const GITHUB_PROJECT_ISSUES = `${GITHUB_PROJECT}/issues`;
+const MAILING_LIST_URL = 'https://groups.google.com/d/forum/kepler-gl';
+const CONTRIBUTING_URL = 'https://github.com/keplergl/kepler.gl/blob/master/contributing/CONTRIBUTING.md';
+
+const StyledContainer = styled(Container)`
+  background-color: black;
+  height: 100vh;
+
+  max-width: unset;
+
+  .description {
+    max-width: 800px
+  }
+
+  .description-content {
+    font-weight: 500;
+  }
+
+  h3 {
+    margin-bottom: 24px;
+  }
+
+  a {
+    text-decoration: underline;
+    color: white;
+  }
+
+  a:visited {
+    color: white;
+  }
+
+  img.hero-image {
+    height: 100vh;
+  }
+
+
+`;
+
+export default class Home extends PureComponent {
+  render() {
+    return (
+      <ThemeProvider theme={theme}>
+        <div>
+
+          <Header />
+          <StyledContainer>
+            <HeroImage className="hero-image" />
+            <Content>
+              <LogoImage />
+              <StyledCaption>
+                <div className="kg-home__caption__subtitle">
+                  Support Policy
+                </div>
+                <div className="description">
+                  <h3>
+                    <a href="https://kepler.gl">Kepler.gl</a> is an open source project. Its source code is available at <a
+                    href={GITHUB_PROJECT}>Kepler.gl Github project</a>.
+                  </h3>
+                  <span className="description-content">
+                    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 <a href={GITHUB_PROJECT_ISSUES}>Kepler.gl Github issues</a>.
+                    Questions can be asked on the project's mailing lists, which you can subscribe at <a href={MAILING_LIST_URL}>Kepler.gl Mailing list</a>
+                    Please review the applicable <a href={CONTRIBUTING_URL}>contributing guidelines</a> 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.
+                  </span>
+                </div>
+              </StyledCaption>
+            </Content>
+          </StyledContainer>
+        </div>
+      </ThemeProvider>
+    );
+  }
+}
diff --git 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
@@ -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 () => (
   <Router history={history}>
     <Route path="/" component={App} onEnter={onEnter}>
       <IndexRoute component={Home} onEnter={onEnter} />
+      <Route path="/policy" component={Policy} onEnter={onEnter} />
       {appRoute}
     </Route>
   </Router>