About page

imports/startup/server/sitemaps.js

@@ -16,7 +16,7 @@ sitemaps.add('/sitemap.xml', () => {
   out.push({ page: '/terms', lastmod: today });
   out.push({ page: '/license', lastmod: today });
   out.push({ page: '/privacy', lastmod: today });
-
+  out.push({ page: '/about', lastmod: today });
 
   // When user has public page
   /*  const users = Meteor.users.find().fetch();

imports/ui/components/Footer/Footer.js

@@ -23,10 +23,16 @@ const Footer = (props) => {
         <p className="pull-left"><span className="reverse">&copy;</span><span className="d-none d-md-inline"> Copyleft</span> {copyrightYear()} <a href="https://comunes.org/"><span className="d-none d-md-inline">{t('OrgName')}</span><span className="d-inline d-md-none">{t('OrgName')}</span></a></p>
 
         <ul className="pull-right">
+          <li>
+            <Link id={testId('about')} to="/about">
+              <span className="d-none d-lg-inline">{t('Sobre nosotr@s')}</span>
+              <span className="d-lg-none">{t('Nosotr@s')}</span>
+            </Link>
+          </li>
           <li>
             <Link id={testId('tos')} to="/terms">
               <span className="d-none d-lg-inline">{t('Términos de Servicio')}</span>
-              <span className="d-lg-none">{t('Términos')}</span>
+              <span className="d-lg-none" />
             </Link>
           </li>
           <li>

imports/ui/components/Footer/Footer.scss

@@ -63,7 +63,10 @@ body {
 }
 
 @include breakpoint(tablet) {
-  .Footer ul li:first-child, .Footer ul li:nth-child(2) {
+  .Footer ul li:first-child,
+  .Footer ul li:nth-child(2),
+  .Footer ul li:nth-child(3),
+  .Footer ul li:nth-child(4){
     margin-right: 15px;
   }
 }
@@ -85,7 +88,8 @@ body {
   }
 
   .Footer ul li:first-child,
-  .Footer ul li:nth-child(2) {
+  .Footer ul li:nth-child(2),
+  .Footer ul li:nth-child(3) {
     margin-right: 7px;
   }
 }

imports/ui/components/PageHeader/PageHeader.scss

@@ -3,7 +3,7 @@
 
 .PageHeader {
   border-bottom: 1px solid $gray-lighter;
-  padding: 0px 0 20px;
+  padding: 10px 0 20px;
   margin-bottom: 20px;
 
   h1 {

imports/ui/layouts/App/App.js

@@ -42,6 +42,7 @@ import FiresMap from '../../pages/FiresMap/FiresMap';
 import Fires from '../../pages/Fires/Fires';
 import Sandbox from '../../pages/Sandbox/Sandbox';
 import Terms from '../../pages/Terms/Terms';
+import About from '../../pages/About/About';
 import Privacy from '../../pages/Privacy/Privacy';
 import License from '../../pages/License/License';
 import Credits from '../../pages/Credits/Credits';
@@ -133,6 +134,7 @@ const App = props => (
                 <Route name="privacy" path="/privacy" component={Privacy} />
                 <Route name="license" path="/license" component={License} />
                 <Route name="credits" path="/credits" component={Credits} />
+                <Route name="about" path="/about" component={About} />
 
                 <Route component={NotFound} />
               </Switch>

imports/ui/pages/About/About.js

@@ -0,0 +1,19 @@
+/* eslint-disable import/no-absolute-path */
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable react/jsx-indent */
+
+import React from 'react';
+import { translate } from 'react-i18next';
+import Page from '../Page/Page';
+
+const About = props => (
+  <div className="About">
+    <Page
+        title={props.t('Sobre \'{{appName}}\'', { appName: props.t('AppName') })}
+        subtitle={props.t('¿Vecindarios vigilando y combatiendo fuegos? ¿de qué va todo esto?')}
+        page="about"
+    />
+  </div>
+);
+
+export default translate([], { wait: true })(About);

imports/ui/stylesheets/custom.scss

@@ -2,7 +2,7 @@
 @import './colors';
 
 a, a:hover  {
-  color: $todos-palette2;
+  color: $todos-palette1a;
 }
 
 .bg-dark {
@@ -50,3 +50,21 @@ div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper >
 div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > p > a {
 //   color: $todos-palette2;
 }
+
+.bg-image-about-full {
+  background: no-repeat center center scroll;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  -o-background-size: cover;
+  background-image: url('/photos/about-1.jpg');
+  height: 600px;
+  margin: 0px -350px 20px -350px;
+}
+
+@include breakpoint(mobile) {
+ .bg-image-about-full {
+   background-image: url('/photos/about-1-peq.jpg');
+   /* height: 400px; other photo */
+  }
+}