Partipe btn and link

imports/ui/pages/Index/Index-custom.scss

@@ -126,6 +126,7 @@
 
 .slide-1-icon:before {
   content: "";
+  cursor: pointer;
 }
 
 .slide-2-icon {

imports/ui/pages/Index/Index.js

@@ -68,6 +68,13 @@ class Index extends Component {
     window.open('https://t.me/TodosContraElFuego_bot', '_blank');
   }
 
+  gotoParticipe() {
+    const element = document.querySelector('#participe');
+    if (element) {
+      element.scrollIntoView();
+    }
+  }
+
   render() {
     return (
       <div className="IndexDisabled full-width">
@@ -79,10 +86,10 @@ class Index extends Component {
               <div
                   id="carouselExampleIndicators"
                   className="carousel slide"
-                  data-interval={false}
+
                   ref={(ref) => { this.slides = ref; }}
               >
-                {/* for dev: data-interval=false */}
+                {/* for dev ^^^: data-interval=false */}
                 <ol className="carousel-indicators">
                   <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active" />
                   <li data-target="#carouselExampleIndicators" data-slide-to="1" />
@@ -92,7 +99,13 @@ class Index extends Component {
                 <div className="carousel-inner" role="listbox">
 
                   <div className="carousel-item carousel-item-1 active">
-                    <div className="slide-1-icon" />
+                    <div
+                        tabIndex={0}
+                        role="button"
+                        className="slide-1-icon"
+                        onKeyDown={() => { this.gotoParticipe(); }}
+                        onClick={() => { this.gotoParticipe(); }}
+                    />
                     <div className="carousel-caption">
                       <h3><Trans>Elige un lugar</Trans></h3>
                       <p />
@@ -164,6 +177,7 @@ class Index extends Component {
             </div>
           </section>
 
+          <a id="participe" name="participe" />
           <section className="sect4">
             <div className="container">
               <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>

imports/ui/pages/Subscriptions/SubscriptionsMap.js

@@ -4,7 +4,7 @@
 /* eslint-disable react/jsx-indent */
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup, Row, Col } from 'react-bootstrap';
+import { Button, ButtonGroup, Row, Col } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Trans, translate } from 'react-i18next';
@@ -74,6 +74,13 @@ class SubscriptionsMap extends React.Component {
     this.setState({ init: false, viewport });
   }
 
+  gotoParticipe() {
+    const element = document.querySelector('#participe');
+    if (element) {
+      element.scrollIntoView();
+    }
+  }
+
   render() {
     console.log(`Rendering Subs users ready ${this.props.subsready} subs: ${this.props.userSubs.length} viewport: ${JSON.stringify(this.state.viewport)}`);
     return (
@@ -111,6 +118,12 @@ class SubscriptionsMap extends React.Component {
            <Control position="topright" >
              <ButtonGroup>
                <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
+               <Button
+                   bsStyle="success"
+                   onClick={() => { this.gotoParticipe(); }}
+               >
+                 {this.props.t('Participa')}
+               </Button>
              </ButtonGroup>
            </Control>
          </Map>