Gkey improved. New pages. Home improved based in startbootstrap

client/main.html

@@ -6,6 +6,10 @@
   <!-- FIXME integrate this better with meteor
        https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/ -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
+  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
+
   <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous"> -->
   <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> -->

imports/startup/client/Gkeys.js

@@ -1,47 +1,52 @@
-import React from 'react';
 import { Meteor } from 'meteor/meteor';
+import { ReactiveVar } from 'meteor/reactive-var';
 import i18n from 'i18next';
-
+import { Tracker } from 'meteor/tracker';
-const gmapkey = new ReactiveVar();
-
-Meteor.startup(function() {
-  Meteor.call('getMapKey', function (error, key) {
-    if (typeof key !== 'undefined') {
-      // console.log(key);
-      gmapkey.set(key);
-    } else {
-      callback(error, null)
-    }
-  })
-});
 
 class GkeysC {
   constructor() {
-    this.state = { init: false };
+    this.gmapkey = new ReactiveVar(null);
+    const self = this;
+    this.callbacks = [];
+    Meteor.startup(() => {
+      Meteor.call('getMapKey', (error, key) => {
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.onload = () => {
+          self.gmapkey.set(key);
+          console.log('GMaps script just loaded');
+          self.doCallbacks(key);
+        };
+        // https://stackoverflow.com/questions/28130114/google-maps-places-autocomplete-language-output
+        script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places&language=${i18n.language}`;
+        document.body.appendChild(script);
+      });
+    });
+  }
+
+  doCallbacks(key) {
+    for (let i = 0; i < this.callbacks.length; i += 1) {
+      this.callbacks[i](null, key);
+    }
+    this.callbacks = [];
   }
 
   load(callback) {
-    if (this.state.init) {
+    this.callbacks.push(callback);
-      // already loaded
+    Tracker.autorun((computation) => {
-      callback(null, gmapkey.get());
+      const key = this.gmapkey.get();
-    } else {
+      if (key) {
-      this.state.init = true;
+        // already loaded
-      Meteor.autorun(function() {
+        console.log(`GMaps already loaded: ${key}`);
-        var key = gmapkey.get();
+        this.doCallbacks(key);
-        if (typeof key !== 'undefined') {
+        computation.stop();
-          var script = document.createElement('script');
+      } else {
-          script.type = 'text/javascript';
+        console.log('Waiting for the gkey');
-          script.onload = function () {
+      }
-            // console.log(key);
+    });
-            callback(null, key);
-          }.bind(this);
-          // https://stackoverflow.com/questions/28130114/google-maps-places-autocomplete-language-output
-          script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places&language=${i18n.language}`
-          document.body.appendChild(script);
-        }
-      }.bind(this));
-    }
   }
 }
 
-export let Gkeys = new GkeysC();
+const Gkeys = new GkeysC();
+
+export default Gkeys;

imports/startup/client/i18n.js

@@ -37,7 +37,8 @@ const cacheOptions = {
 i18nOpts.cache = cacheOptions;
 i18nOpts.detection = detectorOptions;
 i18nOpts.react = {
-  wait: true
+  wait: true,
+  defaultTransParent: 'span'
   // https://react.i18next.com/components/i18next-instance.ht
   /* bindI18n: 'languageChanged loaded',
    bindStore: 'added removed',

imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
-import { Nav, NavDropdown } from 'react-bootstrap';
+/* import { Nav, NavDropdown } from 'react-bootstrap'; */
 import { translate, Trans } from 'react-i18next';
 /*
    FIXME:
@@ -13,26 +13,25 @@ import { translate, Trans } from 'react-i18next';
  */
 import NavItem from '../NavItem/NavItem';
 
-import { Meteor } from 'meteor/meteor';
-
 const AuthenticatedNavigation = ({ name, history, props }) => (
-  <ul className="navbar-nav ml-auto ">
+  <ul className="navbar-nav">
     {/* <Nav pullRight> */}
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
-      <NavItem eventKey={3} href="/documents">Documents</NavItem>
+      <NavItem eventKey={5} href="/documents">Documents</NavItem>
     </LinkContainer>
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/profile">
-      <NavItem eventKey={3.1} href="/profile">{name}</NavItem>
+      <NavItem eventKey={5.1} href="/profile">{name}</NavItem>
     </LinkContainer>
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/logout">
-      <NavItem eventKey={3.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
+      <NavItem eventKey={5.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
     </LinkContainer>
-  {/* </Nav> */}
+    {/* </Nav> */}
   </ul>
 );
 
 AuthenticatedNavigation.propTypes = {
   name: PropTypes.string.isRequired,
+
 };
 
 export default translate([], { wait: true })(withRouter(AuthenticatedNavigation));

imports/ui/components/DistanceSlider/DistanceSlider.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Trans, translate } from 'react-i18next';
-import Slider, { Range } from 'rc-slider';
 import Tooltip from 'rc-tooltip';
-// We can just import Slider or Range to reduce bundle size
+import Slider from 'rc-slider';
-// import Slider from 'rc-slider/lib/Slider';
-// import Range from 'rc-slider/lib/Range';
 import 'rc-slider/assets/index.css';
 
 // https://www.npmjs.com/package/rc-slider
@@ -15,13 +12,7 @@ const Handle = Slider.Handle;
 const handle = (props) => {
   const { value, dragging, index, ...restProps } = props;
   return (
-    <Tooltip
+    <Tooltip prefixCls="rc-slider-tooltip" overlay={value} visible={dragging} placement="top" key={index} >
-        prefixCls="rc-slider-tooltip"
-        overlay={value}
-        visible={dragging}
-        placement="top"
-        key={index}
-    >
       <Handle value={value} {...restProps} />
     </Tooltip>
   );
@@ -35,26 +26,27 @@ class DistanceSlider extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: 10,
+      value: 10
     };
+    this.onSliderChange = this.onSliderChange.bind(this);
+    this.onAfterChange = this.onAfterChange.bind(this);
   }
 
-  onSliderChange = (value) => {
+  onSliderChange(value) {
     // console.log(value);
     this.setState({
-      value,
+      value
     });
     this.props.onChange(value);
   }
 
-  onAfterChange = (value) => {
+  onAfterChange(value) {
     // console.log(`After change: ${value}`); //eslint-disable-line
     this.props.onChange(value);
   }
 
   render() {
     return (
-
       <div style={wrapperStyle}>
         <p><Trans parent="span">¿A que distancia a la redonda quieres recibir notificaciones?</Trans></p>
         <Slider min={5}
@@ -89,8 +81,16 @@ class DistanceSlider extends React.Component {
                 step={5}
                 handle={handle} />
       </div>
-    )
+    );
   }
 }
 
+DistanceSlider.defaultProps = {
+  onChange: null
+};
+
+DistanceSlider.propTypes = {
+  onChange: PropTypes.func
+};
+
 export default translate([], { wait: true })(DistanceSlider);

imports/ui/components/Navigation/Navigation.js

@@ -2,9 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
+import { LinkContainer } from 'react-router-bootstrap';
+import { translate } from 'react-i18next';
 import PublicNavigation from '../PublicNavigation/PublicNavigation';
 import AuthenticatedNavigation from '../AuthenticatedNavigation/AuthenticatedNavigation';
-import { translate } from 'react-i18next';
+import NavItem from '../NavItem/NavItem';
 
 import './Navigation.scss';
 
@@ -27,6 +29,17 @@ const Navigation = props => (
     </button>
     {/* <Navbar.Collapse> */}
     <div className="collapse navbar-collapse" id="navbarNavDropdown">
+      <ul className="navbar-nav ml-auto ">
+        <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
+          <NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
+        </LinkContainer>
+        <LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
+          <NavItem eventKey={1.2} href="/subscriptions">Mis alertas</NavItem>
+        </LinkContainer>
+        <LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
+          <NavItem eventKey={2} href="/fires">{props.t('activeFires')}</NavItem>
+        </LinkContainer>
+      </ul>
       {!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
       {/* </Navbar.Collapse> */}
     </div>
@@ -35,13 +48,11 @@ const Navigation = props => (
 );
 
 Navigation.defaultProps = {
-  name: '',
+  name: ''
 };
 
 Navigation.propTypes = {
   authenticated: PropTypes.bool.isRequired
 };
 
-//  export default Navigation;
-
 export default translate([], { wait: true })(Navigation);

imports/ui/components/PublicNavigation/PublicNavigation.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { LinkContainer } from 'react-router-bootstrap';
-import { Nav } from 'react-bootstrap';
+/* import { Nav } from 'react-bootstrap'; */
 import { translate } from 'react-i18next';
 /*
    FIXME:
@@ -11,23 +12,21 @@ import { translate } from 'react-i18next';
  */
 import NavItem from '../NavItem/NavItem';
 
-const PublicNavigation = (props) => (
+const PublicNavigation = props => (
-  <ul className="navbar-nav ml-auto ">
+  <ul className="navbar-nav">
-  {/* <Nav pullRight> */}
+    {/* <Nav pullRight> */}
-    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
-      <NavItem href="/sandbox">Sandbox</NavItem>
-    </LinkContainer>
-    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
-      <NavItem href="/fires">{props.t('activeFires')}</NavItem>
-    </LinkContainer>
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/signup">
-      <NavItem eventKey={1} href="/signup">{props.t('Registrarse')}</NavItem>
+      <NavItem eventKey={3} href="/signup">{props.t('Registrarse')}</NavItem>
     </LinkContainer>
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/login">
-      <NavItem eventKey={2} href="/login">{props.t('Iniciar sesión')}</NavItem>
+      <NavItem eventKey={4} href="/login">{props.t('Iniciar sesión')}</NavItem>
     </LinkContainer>
-  {/* </Nav> */}
+    {/* </Nav> */}
   </ul>
 );
 
+PublicNavigation.propTypes = {
+  t: PropTypes.func.isRequired
+};
+
 export default translate([], { wait: true })(PublicNavigation);

imports/ui/components/SelectionMap/SelectionMap.js

@@ -1,26 +1,23 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Map, TileLayer, Marker, Popup, CircleMarker, Circle} from 'react-leaflet';
+import { Map, TileLayer, Marker, CircleMarker, Circle } from 'react-leaflet';
 import Leaflet from 'leaflet';
-import { withTracker } from 'meteor/react-meteor-data';
+import { translate } from 'react-i18next';
-import { translate, Trans } from 'react-i18next';
 import geolocation from '/imports/startup/client/geolocation';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
 import Control from 'react-leaflet-control';
 import { Button, ButtonToolbar } from 'react-bootstrap';
-import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
-import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
 import './SelectionMap.scss';
 
 const positionIcon = new Leaflet.Icon({
-  iconUrl: "/your-position.png",
+  iconUrl: '/your-position.png',
   /* shadowUrl: require('../public/marker-shadow.png'), */
-  iconSize:     [50, 77], // size of the icon
+  iconSize: [50, 77], // size of the icon
   /* shadowSize:   [50, 64], // size of the shadow */
-  iconAnchor:   [25, 82] // point of the icon which will correspond to marker's location
+  iconAnchor: [25, 82] // point of the icon which will correspond to marker's location
   /* shadowAnchor: [4, 62],  // the same for the shadow
-   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor*/
+   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor */
 });
 
 class SelectionMap extends Component {
@@ -33,25 +30,35 @@ class SelectionMap extends Component {
       draggable: true,
       modified: false
     };
-    // console.log(this.state);
+
+    this.getMap = this.getMap.bind(this);
+    this.toggleDraggable = this.toggleDraggable.bind(this);
+    this.updatePosition = this.updatePosition.bind(this);
+    this.fit = this.fit.bind(this);
+    this.addScale = this.addScale.bind(this);
+    this.doSubs = this.doSubs.bind(this);
   }
 
-  componentDidUpdate = () => {
+  componentDidMount() {
+    this.addScale();
+  }
+
+  componentDidUpdate() {
     this.fit();
   }
 
-  getMap = () => {
+  getMap() {
-    return this.refs.selectionMap.leafletElement;
+    return this.selectionMap.leafletElement;
   }
 
-  toggleDraggable = () => {
+  toggleDraggable() {
     this.setState({ draggable: !this.state.draggable });
   }
 
-  updatePosition = () => {
+  updatePosition() {
-    const { lat, lng } = this.refs.marker.leafletElement.getLatLng();
+    const { lat, lng } = this.marker.leafletElement.getLatLng();
     this.setState({
-      marker: [ lat, lng ],
+      marker: [lat, lng],
       modified: true
     });
     this.fit();
@@ -59,14 +66,10 @@ class SelectionMap extends Component {
 
   fit() {
     // console.log("fit!");
-    this.getMap().fitBounds(this.refs.distanceCircle.leafletElement.getBounds(), [70, 70]);
+    this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]);
   }
 
-  componentDidMount() {
+  addScale() {
-    this.addScale();
-  }
-
-  addScale = () => {
     // https://www.npmjs.com/package/leaflet-graphicscale
     const map = this.getMap();
     var options = {
@@ -76,12 +79,11 @@ class SelectionMap extends Component {
     var graphicScale = L.control.graphicScale([options]).addTo(map);
   }
 
-  doSubs = (event) => {
+  doSubs() { // event param not used
-    console.log(event);
+    this.props.history.push(
-  }
+      '/login',
-
+      { subscription: { center: this.state.center, distance: this.state.distance } }
-  centerOnUserLocation = (event) => {
+    );
-    console.log(event);
   }
 
   render() {
@@ -94,7 +96,8 @@ class SelectionMap extends Component {
     return (
       <div>
       { this.state && this.state.center &&
-        <Map center={this.state.center} zoom={this.state.zoom} ref="selectionMap">
+        <Map center={this.state.center} zoom={this.state.zoom}
+             ref={(map) => { this.selectionMap = map; }}>
         <TileLayer
           attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -105,7 +108,7 @@ class SelectionMap extends Component {
             position={this.state.marker}
             icon={positionIcon}
             title={this.props.t("Arrastrar para seleccionar otro punto")}
-          ref="marker">
+            ref={(ref) => { this.marker = ref; }}>
         </Marker>
         <CircleMarker
             center={this.state.marker} color="red"
@@ -114,12 +117,11 @@ class SelectionMap extends Component {
             fill={true}
             radius={3} />
         <Circle center={this.state.marker}
-                ref="distanceCircle"
+                ref={(ref) => { this.distanceCircle = ref; }}
                 color="#145A32"
                 fillColor="green"
                 fillOpacity={.1}
                 radius={this.state.distance * 1000} />
-
         <Control position="topright" >
           <ButtonToolbar>
             <Button bsStyle="success" onClick={(event) => this.doSubs(event)}>
@@ -134,6 +136,7 @@ class SelectionMap extends Component {
 }
 
 SelectionMap.propTypes = {
+  history: PropTypes.object.isRequired,
   lat: PropTypes.number,
   lng: PropTypes.number,
   distance: PropTypes.number

imports/ui/layouts/App/App.js

@@ -1,13 +1,25 @@
-/* eslint-disable jsx-a11y/no-href*/
+/* eslint-disable jsx-a11y/no-href */
+/* eslint import/no-absolute-path: [2, { esmodule: false, commonjs: false, amd: false }] */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Router, Switch, Route } from 'react-router-dom';
-import { Grid, Alert, Button } from 'react-bootstrap';
+import createHistory from 'history/createBrowserHistory';
+import { Grid } from 'react-bootstrap';
+import { I18nextProvider } from 'react-i18next';
 import { Meteor } from 'meteor/meteor';
-import { createContainer } from 'meteor/react-meteor-data';
+import { withTracker } from 'meteor/react-meteor-data';
 import { Roles } from 'meteor/alanning:roles';
-import { Bert } from 'meteor/themeteorchef:bert';
+
+// https://github.com/gadicc/meteor-blaze-react-component/
+import Blaze from 'meteor/gadicc:blaze-react-component';
+/* import Reconnect from '../../components/Reconnect/Reconnect'; */
+// i18n
+import i18n from '/imports/startup/client/i18n';
+import '/imports/startup/client/ravenLogger';
+import '/imports/startup/client/geolocation';
+import '/imports/startup/client/piwik-start.js';
+import 'simple-line-icons/css/simple-line-icons.css';
 import Navigation from '../../components/Navigation/Navigation';
 import Authenticated from '../../components/Authenticated/Authenticated';
 import Public from '../../components/Public/Public';
@@ -28,87 +40,78 @@ import Footer from '../../components/Footer/Footer';
 import Terms from '../../pages/Terms/Terms';
 import Privacy from '../../pages/Privacy/Privacy';
 import License from '../../pages/License/License';
+import FireSubscription from '../../pages/FireSubscription/FireSubscription';
 import ReSendEmail from '../../components/ReSendEmail/ReSendEmail';
-/* import Reconnect from '../../components/Reconnect/Reconnect';*/
+import FiresMap from '../../pages/FiresMap/FiresMap';
-// i18n
+import Sandbox from '../../pages/Sandbox/Sandbox';
-import { I18nextProvider } from 'react-i18next';
-import i18n from '/imports/startup/client/i18n';
-import '/imports/startup/client/piwik-start.js';
-import ravenLogger from '/imports/startup/client/ravenLogger';
-import geolocation from '/imports/startup/client/geolocation';
-// https://github.com/gadicc/meteor-blaze-react-component/
-import Blaze from 'meteor/gadicc:blaze-react-component';
-import createHistory from 'history/createBrowserHistory';
-import { check } from 'meteor/check';
-import FiresMap from  '../../pages/FiresMap/FiresMap';
-import Sandbox from  '../../pages/Sandbox/Sandbox';
-
-import 'simple-line-icons/css/simple-line-icons.css';
 import './App.scss';
 
-const history = createHistory()
+const history = createHistory();
-history.listen((location, action) => {
+history.listen((location) => { // , action ) => {
   // console.log(location.pathname);
+  // console.log(action); // PUSH, etc
   Meteor.Piwik.trackPage(location.pathname);
 });
 
 const App = props => (
   /* https://react.i18next.com/components/i18nextprovider.html */
   <I18nextProvider i18n={i18n}>
-  <Router history={history}>
+    <Router history={history}>
-    {!props.loading ? <div className="App">
+      { !props.loading ?
-    <Navigation {...props} />
+        <div className="App">
-      <ReSendEmail {...props} />
+          <Navigation {...props} />
-      <Grid> {/* bsClass="previously-container-but-disabled" > */}
+          <ReSendEmail {...props} />
-        <Switch>
+          <Grid> {/* bsClass="previously-container-but-disabled" > */}
-          <Route exact name="index" path="/" component={Index} />
+            <Switch>
-          <Authenticated exact path="/documents" component={Documents} {...props} />
+              <Route exact name="index" path="/" component={Index} />
-          <Authenticated exact path="/documents/new" component={NewDocument} {...props} />
+              <Authenticated exact path="/documents" component={Documents} {...props} />
-          <Authenticated exact path="/documents/:_id" component={ViewDocument} {...props} />
+              <Authenticated exact path="/documents/new" component={NewDocument} {...props} />
-          <Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...props} />
+              <Authenticated exact path="/documents/:_id" component={ViewDocument} {...props} />
-          <Authenticated exact path="/profile" component={Profile} {...props} />
+              <Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...props} />
-          <Route path="/fires" component={FiresMap} {...props} />
+              <Authenticated exact path="/profile" component={Profile} {...props} />
-          <Public path="/signup" component={Signup} {...props} />
+              <Route path="/fires" component={FiresMap} {...props} />
-          <Public path="/login" component={Login} {...props} />
+              <Public path="/signup" component={Signup} {...props} />
-          <Route path="/logout" component={Logout} {...props} />
+              <Public path="/login" component={Login} {...props} />
-          <Route path="/sandbox" component={Sandbox} {...props} />
+              <Route path="/logout" component={Logout} {...props} />
-          <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
+              <Route path="/sandbox" component={Sandbox} {...props} />
-          <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
+              <Public path="/subscriptions" component={FireSubscription} {...props} />
-          <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
+              <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
-          <Route name="terms" path="/terms" component={Terms} />
+              <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
-          <Route name="privacy" path="/privacy" component={Privacy} />
+              <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
-          <Route name="license" path="/license" component={License} />
+              <Route name="terms" path="/terms" component={Terms} />
-          <Route component={NotFound} />
+              <Route name="privacy" path="/privacy" component={Privacy} />
-        </Switch>
+              <Route name="license" path="/license" component={License} />
-      </Grid>
+              <Route component={NotFound} />
-      <Footer />
+            </Switch>
+          </Grid>
+          <Footer />
 
-      {/* <Reconnect /> */}
+          {/* <Reconnect /> */}
-      <Blaze template="cookieConsent" />
+          <Blaze template="cookieConsent" />
-      {/* <Blaze template="cookieConsentImply" /> */}
+          {/* <Blaze template="cookieConsentImply" /> */}
-    </div> : ''}
+        </div> : ''}
-  </Router>
+    </Router>
   </I18nextProvider>
 );
 
 App.defaultProps = {
   userId: '',
-  emailAddress: '',
+  emailAddress: ''
 };
 
 App.propTypes = {
   loading: PropTypes.bool.isRequired,
   userId: PropTypes.string,
   emailAddress: PropTypes.string,
-  emailVerified: PropTypes.bool.isRequired,
+  emailVerified: PropTypes.bool.isRequired
 };
 
 const getUserName = name => ({
   string: name,
-  object: `${name.first} ${name.last}`,
+  object: `${name.first} ${name.last}`
 }[typeof name]);
 
-export default createContainer(() => {
+export default withTracker(() => {
   const loggingIn = Meteor.loggingIn();
   const user = Meteor.user();
   const userId = Meteor.userId();
@@ -124,6 +127,6 @@ export default createContainer(() => {
     roles: !loading && Roles.getRolesForUser(userId),
     userId,
     emailAddress,
-    emailVerified: user && user.emails ? user && user.emails && user.emails[0].verified : true,
+    emailVerified: user && user.emails ? user && user.emails && user.emails[0].verified : true
   };
-}, App);
+})(App);

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -5,8 +5,7 @@ import { Trans, translate } from 'react-i18next';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
 import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
 import update from 'immutability-helper';
-import { withTracker } from 'meteor/react-meteor-data';
+import Gkeys from '/imports/startup/client/Gkeys';
-import { Gkeys  } from '/imports/startup/client/Gkeys';
 import SubsAutocomplete from './SubsAutocomplete';
 import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
 
@@ -16,23 +15,24 @@ class FireSubscription extends React.Component {
     this.state = {
       init: false
     };
+    // console.log(this.props.location.state);
   }
 
   componentDidMount = () => {
-    Gkeys.load(function(err, key) {
+    Gkeys.load(function (err, key) {
-      this.setState({init: true});
+      this.setState({ init: true });
     }.bind(this));
   }
 
-  centerOnUserLocation = (value) => {
+  centerOnUserLocation(value) {
     this.setState(update(this.state, {$merge: {lat: value.center[0], lng: value.center[1]}}));
   }
 
-  onAutocompleteChange = (value) => {
+  onAutocompleteChange(value) {
     this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng}}));
   }
 
-  onSliderChange = (value) => {
+  onSliderChange(value) {
     this.setState(update(this.state, {$merge: {distance: value}}));
   }
 
@@ -42,14 +42,15 @@ class FireSubscription extends React.Component {
 
     if (!this.state.init) {
       return <div/>
-    } else
+    } else {
-    return (
+      return (
-      <div>
+        <div>
-        <Row>
+          <Row>
             <Col xs={12} sm={12} md={6} lg={6} >
               <div>
                 <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
-                <SubsAutocomplete onChange={(value) => this.onAutocompleteChange(value)}/>
+                <SubsAutocomplete
+                    onChange={ (value) => this.onAutocompleteChange(value) }/>
               </div>
             </Col>
             <Col xs={12} sm={12} md={6} lg={6} >
@@ -60,11 +61,21 @@ class FireSubscription extends React.Component {
             </Col>
           </Row>
           <Row className="align-items-center justify-content-center">
-            <SelectionMap lat={this.state.lat} lng={this.state.lng} distance={this.state.distance || 10} />
+            <SelectionMap
+                lat={this.state.lat}
+                lng={this.state.lng}
+                distance={this.state.distance || 10}
+                history={this.props.history}
+            />
           </Row>
-      </div>
+        </div>
-    )
+      );
+    }
   }
 }
 
-export default translate([], { wait: true }) (FireSubscription);
+FireSubscription.propTypes = {
+  history: PropTypes.object.isRequired
+};
+
+export default translate([], { wait: true })(FireSubscription);

imports/ui/pages/FiresMap/FiresMap.js

@@ -39,7 +39,7 @@ const fireIcon = new Leaflet.Icon({
   iconAnchor:   [8, 26] // point of the icon which will correspond to marker's location
   /* shadowAnchor: [4, 62],  // the same for the shadow
    * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor*/
-})
+});
 
 const nFireIcon = new Leaflet.Icon({
   iconUrl: "/n-fire-marker.png",
@@ -49,7 +49,7 @@ const nFireIcon = new Leaflet.Icon({
   iconAnchor:   [8, 26] // point of the icon which will correspond to marker's location
   /* shadowAnchor: [4, 62],  // the same for the shadow
    * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor*/
-})
+});
 
 // http://leafletjs.com/reference-1.2.0.html#icon
 const MyPopupMarker = ({ children, lat, lon, nasa}) => (

imports/ui/pages/Index/Index.js

@@ -1,11 +1,13 @@
 import React, {Component} from 'react';
 import { Button } from 'react-bootstrap';
-import { translate } from 'react-i18next';
+import { translate, Trans } from 'react-i18next';
 import {render} from 'react-dom';
 import { Link } from 'react-router-dom';
 // https://www.npmjs.com/package/react-resize-detector
 import ReactResizeDetector from 'react-resize-detector';
 import FiresMap from  '../FiresMap/FiresMap';
+import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
+import './new-age.js';
 
 import './Index.scss';
 import './Index-custom.scss';
@@ -121,6 +123,125 @@ class Index extends Component {
           </div>
         </section>
 
+        <section className="download bg-primary text-center" id="download">
+          <div className="container">
+            <div className="row">
+              <div className="col-md-8 mx-auto">
+                <h2 className="section-heading">Discover what all the buzz is about!</h2>
+                <p>Our app is available on any mobile device! Download now to get started!</p>
+                <div className="badges">
+                  <a className="badge-link" href="#"><img src="img/google-play-badge.svg" alt=""/></a>
+                  <a className="badge-link" href="#"><img src="img/app-store-badge.svg" alt=""/></a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="features" id="features">
+          <div className="container">
+            <div className="section-heading text-center">
+              <h2>Unlimited Features, Unlimited Fun</h2>
+              <p className="text-muted">Check out what you can do with this app theme!</p>
+              <hr/>
+            </div>
+            <div className="row">
+              <div className="col-lg-4 my-auto">
+                <div className="device-container">
+                  <div className="device-mockup iphone6_plus portrait white">
+                    <div className="device">
+                      <div className="screen">
+                        {/* Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! */}
+                        <img src="img/demo-screen-1.jpg" className="img-fluid" alt=""/>
+                      </div>
+                      <div className="button">
+                        {/* You can hook the "home button" to some JavaScript events or just remove it  */}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="col-lg-8 my-auto">
+                <div className="container-fluid">
+                  <div className="row">
+                    <div className="col-lg-6">
+                      <div className="feature-item">
+                        <i className="fa fa-telegram text-primary"></i>
+                        <h3>Telegram</h3>
+                        <p className="text-muted"><Trans>Usa nuestro bot de Telegram</Trans></p>
+                      </div>
+                    </div>
+                    <div className="col-lg-6">
+                      <div className="feature-item">
+                        <i className="icon-envelope-open text-primary"></i>
+                        <h3><Trans>Correo electronico</Trans></h3>
+                        <p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo</Trans></p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="row">
+                    <div className="col-lg-6">
+                      <div className="feature-item">
+                        <i className="icon-lock-open text-primary"></i>
+                        <h3>Open Source</h3>
+                        <p className="text-muted">Since this theme is MIT licensed, you can use it commercially!</p>
+                      </div>
+                    </div>
+                    <div className="col-lg-6">
+                      <div className="feature-item">
+                        <i className="icon-screen-smartphone text-primary"></i>
+                        <h3>Device Mockups</h3>
+                        <p className="text-muted">Ready to use HTML/CSS device mockups, no Photoshop required!</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="cta">
+          <div className="cta-content">
+            <div className="container">
+              <h2>Stop waiting.<br/>Start building.</h2>
+              <a href="#contact" className="btn btn-outline btn-xl js-scroll-trigger">Let's Get Started!</a>
+            </div>
+          </div>
+          <div className="overlay"></div>
+        </section>
+
+        <section className="contact bg-primary" id="contact">
+          <div className="container">
+            <h2>We
+              <i className="fa fa-heart"></i>
+              new friends!</h2>
+            <ul className="list-inline list-social">
+              <li className="list-inline-item social-twitter">
+                <a href="#">
+                  <i className="fa fa-twitter"></i>
+                </a>
+              </li>
+              {/* <li className="list-inline-item social-facebook">
+              <a href="#">
+              <i className="fa fa-facebook"></i>
+              </a>
+              </li>
+              <li className="list-inline-item social-google-plus">
+              <a href="#">
+              <i className="fa fa-google-plus"></i>
+              </a>
+              </li> */}
+            </ul>
+          </div>
+        </section>
+
+        <section className="py-5">
+          <div className="container">
+            <FireSubscription history={this.props.history} />
+          </div>
+        </section>
+
         <section className="py-5">
           <div className="container">
             <FiresMap />

imports/ui/pages/Index/new-age.js

@@ -0,0 +1,42 @@
+(function($) {
+  "use strict"; // Start of use strict
+
+  // Smooth scrolling using jQuery easing
+  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
+    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+      var target = $(this.hash);
+      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+      if (target.length) {
+        $('html, body').animate({
+          scrollTop: (target.offset().top - 48)
+        }, 1000, "easeInOutExpo");
+        return false;
+      }
+    }
+  });
+
+  // Closes responsive menu when a scroll trigger link is clicked
+  $('.js-scroll-trigger').click(function() {
+    $('.navbar-collapse').collapse('hide');
+  });
+
+  // Activate scrollspy to add active class to navbar items on scroll
+  $('body').scrollspy({
+    target: '#mainNav',
+    offset: 54
+  });
+
+  // Collapse Navbar
+  /* var navbarCollapse = function() {
+   *   if ($("#mainNav").offset().top > 100) {
+   *     $("#mainNav").addClass("navbar-shrink");
+   *   } else {
+   *     $("#mainNav").removeClass("navbar-shrink");
+   *   }
+   * };
+   * // Collapse now if page is not at top
+   * navbarCollapse();
+   * // Collapse the navbar when page is scrolled
+   * $(window).scroll(navbarCollapse); */
+
+})(jQuery); // End of use strict

imports/ui/pages/Login/Login.js

@@ -1,21 +1,22 @@
 import React from 'react';
-import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
-import Col from '../../components/Col/Col';
 import PropTypes from 'prop-types';
+import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
+import { translate } from 'react-i18next';
+import { T9n } from 'meteor-accounts-t9n';
+import Col from '../../components/Col/Col';
 import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButtons';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
 import validate from '../../../modules/validate';
-import { translate } from 'react-i18next';
-import { T9n } from 'meteor-accounts-t9n';
 
 class Login extends React.Component {
   constructor(props) {
     super(props);
     this.t = props.t;
     this.handleSubmit = this.handleSubmit.bind(this);
+    console.log(this.props.location.state);
   }
 
   componentDidMount() {
@@ -25,26 +26,26 @@ class Login extends React.Component {
       rules: {
         emailAddress: {
           required: true,
-          email: true,
+          email: true
         },
         password: {
-          required: true,
+          required: true
-        },
+        }
       },
       messages: {
         emailAddress: {
-          required: this.t("Necesitamos un correo aquí."),
+          required: this.t('Necesitamos un correo aquí.'),
-          email: this.t("¿Es este correo correcto?"),
+          email: this.t('¿Es este correo correcto?')
         },
         password: {
-          required: this.t("Necesitamos una contraseña aquí."),
+          required: this.t('Necesitamos una contraseña aquí.')
-        },
+        }
       },
-      submitHandler() { component.handleSubmit(); },
+      submitHandler() { component.handleSubmit(); }
     });
   }
 
-  handleSubmit() {
+  handleSubmit = () => {
     const { history } = this.props;
 
     Meteor.loginWithPassword(this.emailAddress.value, this.password.value, (error) => {
@@ -52,61 +53,69 @@ class Login extends React.Component {
         Bert.alert(T9n.get(`error.accounts.${error.reason}`), 'danger');
       } else {
         Bert.alert(this.t('Bienvenid@ de nuevo'), 'success');
+        console.log(this.props.location.state);
+        if (this.props.location.state &&
+            this.props.location.state.center &&
+            this.props.location.state.distance) {
+          this.props.history.push('/subscriptions', this.props.location.state);
+        }
       }
     });
   }
 
   render() {
-    return (<div className="Login">
+    return (
-      <Row className="align-items-center justify-content-center">
+      <div className="Login">
-        <Col xs={12} sm={6} md={5} lg={4}>
+        <Row className="align-items-center justify-content-center">
-          <h4 className="page-header">{this.t("Iniciar sesión")}</h4>
+          <Col xs={12} sm={6} md={5} lg={4}>
-          <Row>
+            <h4 className="page-header">{this.t('Iniciar sesión')}</h4>
-            <Col xs={12}>
+            <Row>
-              <OAuthLoginButtons
+              <Col xs={12}>
-                services={['google']}
+                <OAuthLoginButtons
-                emailMessage={{
+                  services={['google']}
-                  offset: 100,
+                  emailMessage={{
-                  text: this.t('o inicia sesión con un correo'),
+                    offset: 100,
-                }}
+                    text: this.t('o inicia sesión con un correo')
-              />
+                  }}
-            </Col>
+                />
-          </Row>
+              </Col>
-          <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
+            </Row>
-            <FormGroup>
+            <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-              <ControlLabel>{this.t("Correo electrónico")}</ControlLabel>
+              <FormGroup>
-              <input
+                <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
-                type="email"
+                <input
-                name="emailAddress"
+                  type="email"
-                ref={emailAddress => (this.emailAddress = emailAddress)}
+                  name="emailAddress"
-                className="form-control"
+                  ref={emailAddress => (this.emailAddress = emailAddress)}
-              />
+                  className="form-control"
-            </FormGroup>
+                />
-            <FormGroup>
+              </FormGroup>
-              <ControlLabel className="clearfix">
+              <FormGroup>
-                <span className="pull-left">{this.t("Contraseña")}</span>
+                <ControlLabel className="clearfix">
-                <Link className="pull-right" to="/recover-password">{this.t("¿Olvidaste tu contraseña?")}</Link>
+                  <span className="pull-left">{this.t('Contraseña')}</span>
-              </ControlLabel>
+                  <Link className="pull-right" to="/recover-password">{this.t('¿Olvidaste tu contraseña?')}</Link>
-              <input
+                </ControlLabel>
-                type="password"
+                <input
-                name="password"
+                  type="password"
-                ref={password => (this.password = password)}
+                  name="password"
-                className="form-control"
+                  ref={password => (this.password = password)}
-              />
+                  className="form-control"
-            </FormGroup>
+                />
-            <Button type="submit" bsStyle="success">{this.t("Iniciar sesión")}</Button>
+              </FormGroup>
-            <AccountPageFooter>
+              <Button type="submit" bsStyle="success">{this.t('Iniciar sesión')}</Button>
-              <p>{this.t("¿No tienes una cuenta?")} <Link to="/signup">{this.t("Regístrate")}</Link>.</p>
+              <AccountPageFooter>
-            </AccountPageFooter>
+                <p>{this.t('¿No tienes una cuenta?')} <Link to="/signup">{this.t('Regístrate')}</Link>.</p>
-          </form>
+              </AccountPageFooter>
-        </Col>
+            </form>
-      </Row>
+          </Col>
-    </div>);
+        </Row>
+      </div>);
   }
 }
 
 Login.propTypes = {
   history: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
 };
 
 export default translate([], { wait: true })(Login);

imports/ui/pages/Sandbox/Sandbox.js

@@ -1,33 +1,28 @@
 import React from 'react';
-import { Trans, translate } from 'react-i18next';
+// import PropTypes from 'prop-types';
-import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
+import { translate } from 'react-i18next';
-import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
-import update from 'immutability-helper';
-import { Gkeys } from '/imports/startup/client/Gkeys';
-import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
 
 class Sandbox extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
+    /* this.state = {
-      init: false
+     *   init: false
-    };
+     * }; */
   }
 
-  componentDidMount = () => {
+  componentDidMount() {
-    this.setState({init: true});
+    // this.setState({init: true});
-    Gkeys.load(function(err, key) {
-      console.log(key);
-    }.bind(this));
   }
 
   render() {
     return (
-      <div>
+      <div></div>
-        <FireSubscription />
-      </div>
     );
   }
 }
 
+Sandbox.propTypes = {
+  // history: PropTypes.object.isRequired
+};
+
 export default translate([], { wait: true }) (Sandbox);

imports/ui/pages/Signup/Signup.js

@@ -10,7 +10,6 @@ import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButt
 import InputHint from '../../components/InputHint/InputHint';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
 import validate from '../../../modules/validate';
-import Icon from '../../components/Icon/Icon';
 import './Signup.scss';
 import { translate } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
@@ -164,7 +163,7 @@ class Signup extends React.Component {
 }
 
 Signup.propTypes = {
-  history: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
 };
 
-export default translate([], { wait: true })(Signup)
+export default translate([], { wait: true })(Signup);

imports/ui/stylesheets/app.scss

@@ -3,3 +3,4 @@
 @import './bootstrap-overrides';
 @import './custom';
 @import './cookies-eu';
+@import './new-age';

imports/ui/stylesheets/new-age.scss

@@ -0,0 +1,311 @@
+/*!
+ * Start Bootstrap - New Age v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/new-age)
+ * Copyright 2013-2017 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-new-age/blob/master/LICENSE)
+ */
+
+/* html,
+   body {
+   width: 100%;
+   height: 100%; } */
+
+body {
+  font-family: 'Muli', 'Helvetica', 'Arial', 'sans-serif';
+}
+
+a {
+  color: #fdcc52;
+  -webkit-transition: all .35s;
+  -moz-transition: all .35s;
+  transition: all .35s; }
+
+a:hover, a:focus {
+  color: #fcbd20; }
+
+hr {
+  max-width: 100px;
+  margin: 25px auto 0;
+  border-width: 1px;
+  border-color: rgba(34, 34, 34, 0.1); }
+
+hr.light {
+  border-color: white; }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
+  font-weight: 200;
+  letter-spacing: 1px; }
+
+p {
+  font-size: 18px;
+  line-height: 1.5;
+  margin-bottom: 20px; }
+
+section {
+  padding: 100px 0; }
+section h2 {
+  font-size: 50px; }
+
+#mainNav {
+  border-color: rgba(34, 34, 34, 0.05);
+  background-color: white;
+  -webkit-transition: all .35s;
+  -moz-transition: all .35s;
+  transition: all .35s;
+  font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
+  font-weight: 200;
+  letter-spacing: 1px; }
+#mainNav .navbar-brand {
+  color: #fdcc52;
+  font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
+  font-weight: 200;
+  letter-spacing: 1px; }
+#mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
+  color: #fcbd20; }
+#mainNav .navbar-toggler {
+  font-size: 12px;
+  padding: 8px 10px;
+  color: #222222; }
+#mainNav .navbar-nav > li > a {
+  font-size: 11px;
+  font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
+  letter-spacing: 2px;
+  text-transform: uppercase; }
+#mainNav .navbar-nav > li > a.active {
+  color: #fdcc52 !important;
+  background-color: transparent; }
+#mainNav .navbar-nav > li > a.active:hover {
+  background-color: transparent; }
+#mainNav .navbar-nav > li > a,
+#mainNav .navbar-nav > li > a:focus {
+  color: #222222; }
+#mainNav .navbar-nav > li > a:hover,
+#mainNav .navbar-nav > li > a:focus:hover {
+  color: #fdcc52; }
+@media (min-width: 992px) {
+  #mainNav {
+    border-color: transparent;
+    background-color: transparent; }
+  #mainNav .navbar-brand {
+    color: fade(white, 70%); }
+  #mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
+    color: white; }
+  #mainNav .navbar-nav > li > a,
+  #mainNav .navbar-nav > li > a:focus {
+    color: rgba(255, 255, 255, 0.7); }
+  #mainNav .navbar-nav > li > a:hover,
+  #mainNav .navbar-nav > li > a:focus:hover {
+    color: white; }
+  #mainNav.navbar-shrink {
+    border-color: rgba(34, 34, 34, 0.1);
+    background-color: white; }
+  #mainNav.navbar-shrink .navbar-brand {
+    color: #222222; }
+  #mainNav.navbar-shrink .navbar-brand:hover, #mainNav.navbar-shrink .navbar-brand:focus {
+    color: #fdcc52; }
+  #mainNav.navbar-shrink .navbar-nav > li > a,
+  #mainNav.navbar-shrink .navbar-nav > li > a:focus {
+    color: #222222; }
+  #mainNav.navbar-shrink .navbar-nav > li > a:hover,
+  #mainNav.navbar-shrink .navbar-nav > li > a:focus:hover {
+    color: #fdcc52; } }
+
+header.masthead {
+  position: relative;
+  width: 100%;
+  padding-top: 150px;
+  padding-bottom: 100px;
+  color: white;
+  background: url("../img/bg-pattern.png"), #7b4397;
+  background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, #7b4397, #dc2430);
+  background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #dc2430); }
+header.masthead .header-content {
+  max-width: 500px;
+  margin-bottom: 100px;
+  text-align: center; }
+header.masthead .header-content h1 {
+  font-size: 30px; }
+header.masthead .device-container {
+  max-width: 325px;
+  margin-right: auto;
+  margin-left: auto; }
+header.masthead .device-container .screen img {
+  border-radius: 3px; }
+@media (min-width: 992px) {
+  header.masthead {
+    height: 100vh;
+    min-height: 775px;
+    padding-top: 0;
+    padding-bottom: 0; }
+  header.masthead .header-content {
+    margin-bottom: 0;
+    text-align: left; }
+  header.masthead .header-content h1 {
+    font-size: 50px; }
+  header.masthead .device-container {
+    max-width: 325px; } }
+
+section.download {
+  position: relative;
+  padding: 150px 0; }
+section.download h2 {
+  font-size: 50px;
+  margin-top: 0; }
+section.download .badges .badge-link {
+  display: block;
+  margin-bottom: 25px; }
+section.download .badges .badge-link:last-child {
+  margin-bottom: 0; }
+section.download .badges .badge-link img {
+  height: 60px; }
+@media (min-width: 768px) {
+  section.download .badges .badge-link {
+    display: inline-block;
+    margin-bottom: 0; } }
+@media (min-width: 768px) {
+  section.download h2 {
+    font-size: 70px; } }
+
+section.features .section-heading {
+  margin-bottom: 100px; }
+section.features .section-heading h2 {
+  margin-top: 0; }
+section.features .section-heading p {
+  margin-bottom: 0; }
+
+section.features .device-container,
+section.features .feature-item {
+  max-width: 325px;
+  margin: 0 auto; }
+
+section.features .device-container {
+  margin-bottom: 100px; }
+@media (min-width: 992px) {
+  section.features .device-container {
+    margin-bottom: 0; } }
+
+section.features .feature-item {
+  padding-top: 50px;
+  padding-bottom: 50px;
+  text-align: center; }
+section.features .feature-item h3 {
+  font-size: 30px; }
+section.features .feature-item i {
+  font-size: 80px;
+  display: block;
+  margin-bottom: 15px;
+  background: -webkit-linear-gradient(to left, #7b4397, #dc2430);
+  background: linear-gradient(to left, #7b4397, #dc2430);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent; }
+
+section.cta {
+  position: relative;
+  padding: 250px 0;
+  background-image: url("../img/bg-cta.jpg");
+  background-position: center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover; }
+section.cta .cta-content {
+  position: relative;
+  z-index: 1; }
+section.cta .cta-content h2 {
+  font-size: 50px;
+  max-width: 450px;
+  margin-top: 0;
+  margin-bottom: 25px;
+  color: white; }
+@media (min-width: 768px) {
+  section.cta .cta-content h2 {
+    font-size: 80px; } }
+section.cta .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); }
+
+section.contact {
+  text-align: center; }
+section.contact h2 {
+  margin-top: 0;
+  margin-bottom: 25px; }
+section.contact h2 i {
+  color: #dd4b39; }
+section.contact ul.list-social {
+  margin-bottom: 0; }
+section.contact ul.list-social li a {
+  font-size: 40px;
+  line-height: 80px;
+  display: block;
+  width: 80px;
+  height: 80px;
+  color: white;
+  border-radius: 100%; }
+section.contact ul.list-social li.social-twitter a {
+  background-color: #1da1f2; }
+section.contact ul.list-social li.social-twitter a:hover {
+  background-color: #0d95e8; }
+section.contact ul.list-social li.social-facebook a {
+  background-color: #3b5998; }
+section.contact ul.list-social li.social-facebook a:hover {
+  background-color: #344e86; }
+section.contact ul.list-social li.social-google-plus a {
+  background-color: #dd4b39; }
+section.contact ul.list-social li.social-google-plus a:hover {
+  background-color: #d73925; }
+
+footer {
+  padding: 25px 0;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.3);
+  background-color: #222222; }
+footer p {
+  font-size: 12px;
+  margin: 0; }
+footer ul {
+  margin-bottom: 0; }
+footer ul li a {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.3); }
+footer ul li a:hover, footer ul li a:focus, footer ul li a:active, footer ul li a.active {
+  text-decoration: none; }
+
+.bg-primary {
+  background: #fdcc52;
+  background: -webkit-linear-gradient(#fdcc52, #fdc539);
+  background: linear-gradient(#fdcc52, #fdc539); }
+
+.text-primary {
+  color: #fdcc52; }
+
+.no-gutter > [class*='col-'] {
+  padding-right: 0;
+  padding-left: 0; }
+
+.btn-outline {
+  color: white;
+  border: 1px solid;
+  border-color: white; }
+.btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active {
+  color: white;
+  border-color: #fdcc52;
+  background-color: #fdcc52; }
+
+.btn {
+  border-radius: 300px;
+  font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
+  letter-spacing: 2px;
+  text-transform: uppercase; }
+
+.btn-xl {
+  font-size: 11px;
+  padding: 15px 45px; }

public/locales/es/common.json

@@ -128,5 +128,4 @@
   "<0>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</0> <0>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</0>",
   "Nuevas notificaciones de {{app}}":
   "Nuevas notificaciones de {{app}}"
-
 }