Various UI stuff (mainly implement mookup)

Fix lint Disable modern mode Fixes UI fixes Fixes Ignore .po~ files Fixes Fix homepage Fixes Fixes Mix format Fix tests Fix tests (yeah…) Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2019-04-03 17:29:03 +02:00 · 2019-04-03 17:29:03 +02:00 · da2a0593ca
parent 2dcd65ea78
commit da2a0593ca
66 changed files with 14247 additions and 15872 deletions
--- a/.gitignore
+++ b/.gitignore
@ -31,3 +31,5 @@ cover/
 uploads/*
 !uploads/.gitkeep
 .idea
+*.mo
+*.po~
--- a/config/config.exs
+++ b/config/config.exs
@ -11,6 +11,7 @@ config :mobilizon,

 config :mobilizon, :instance,
  name: System.get_env("MOBILIZON_INSTANCE_NAME") || "Localhost",
+  description: System.get_env("MOBILIZON_INSTANCE_DESCRIPTION") || "This is a Mobilizon instance",
  version: "1.0.0-dev",
  registrations_open: System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_OPEN") || false

--- a/js/fragmentTypes.json
+++ b/js/fragmentTypes.json
@ -0,0 +1,21 @@
+{"__schema":
+  {"types":[
+    {
+      "possibleTypes":[
+        {"name":"Person"},
+        {"name":"Group"}
+        ],
+        "name":"Actor",
+        "kind":"INTERFACE"
+    },
+    {
+      "possibleTypes":[
+        {"name":"Event"},
+        {"name":"Person"},
+        {"name":"Group"}
+      ],
+      "name":"SearchResult",
+      "kind":"UNION"}
+  ]
+  }
+}
--- a/js/get_union_json.ts
+++ b/js/get_union_json.ts
@ -1,7 +1,7 @@
 const fetch = require('node-fetch');
 const fs = require('fs');

-fetch(`http://localhost:4000/graphiql`, {
+fetch(`http://localhost:4001`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
--- a/js/package-lock.json
+++ b/js/package-lock.json
--- a/js/package.json
+++ b/js/package.json
@ -3,7 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "build": "vue-cli-service build --modern",
+    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "analyze-bundle": "npm run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json",
    "dev": "vue-cli-service serve",
@ -23,19 +23,21 @@
    "graphql": "^14.2.1",
    "graphql-tag": "^2.10.1",
    "leaflet": "^1.4.0",
+    "line-clamp": "0.0.9",
    "lodash": "^4.17.11",
    "material-design-icons": "^3.0.1",
    "ngeohash": "^0.6.3",
-    "npm-check-updates": "^3.1.3",
+    "npm-check-updates": "^3.1.7",
    "register-service-worker": "^1.6.2",
+    "typeface-signika": "0.0.72",
    "vue": "^2.6.10",
    "vue-apollo": "^3.0.0-beta.28",
    "vue-class-component": "^7.0.2",
-    "vue-gettext": "^2.1.2",
+    "vue-gettext": "^2.1.3",
    "vue-property-decorator": "^8.1.0",
-    "vue-router": "^3.0.2",
+    "vue-router": "^3.0.3",
    "vue-simple-markdown": "^1.0.9",
-    "vue2-leaflet": "^2.0.2",
+    "vue2-leaflet": "^2.0.3",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
@ -53,13 +55,16 @@
    "@vue/test-utils": "^1.0.0-beta.29",
    "chai": "^4.2.0",
    "dotenv-webpack": "^1.7.0",
+    "eslint": "^5.16.0",
    "node-sass": "^4.11.0",
-    "patch-package": "^6.1.0",
+    "patch-package": "^6.1.1",
    "sass-loader": "^7.1.0",
+    "tslint": "^5.15.0",
    "tslint-config-airbnb": "^5.11.1",
-    "typescript": "^3.4.1",
+    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10",
-    "webpack-bundle-analyzer": "^3.1.0"
+    "webpack": "^4.29.6",
+    "webpack-bundle-analyzer": "^3.3.0"
  },
  "browserslist": [
    "> 1%",
--- a/js/public/index.html
+++ b/js/public/index.html
@ -6,7 +6,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <link rel="stylesheet" href="//cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
+  <link rel="stylesheet" href="//cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css">
  <title>mobilizon</title>
  <!--server-generated-meta-->
 </head>
@ -19,4 +19,4 @@
  <!-- built files will be auto injected -->
 </body>

-</html>
+</html>
--- a/js/src/App.vue
+++ b/js/src/App.vue
@ -1,18 +1,10 @@
 <template>
  <div id="mobilizon">
-    <NavBar></NavBar>
-    <main class="container">
-      <router-view></router-view>
+    <NavBar />
+    <main>
+      <router-view />
    </main>
-    <footer class="footer">
-      <div class="content has-text-centered">
-        <span
-          v-translate="{
-            date: new Date().getFullYear(),
-            }"
-        >© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks</span>
-      </div>
-    </footer>
+    <mobilizon-footer />
  </div>
 </template>

@ -22,6 +14,8 @@ import { Component, Vue } from 'vue-property-decorator';
 import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_EMAIL, AUTH_USER_ID } from '@/constants';
 import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
 import { ICurrentUser } from '@/types/current-user.model';
+import Footer from '@/components/Footer.vue';
+import Logo from '@/components/Logo.vue';

@Component({
  apollo: {
@ -30,63 +24,24 @@ import { ICurrentUser } from '@/types/current-user.model';
    },
  },
  components: {
+    Logo,
    NavBar,
+    'mobilizon-footer': Footer,
  },
 })
 export default class App extends Vue {
-  drawer = false;
-  fab = false;
-  items = [
-    {
-      icon: 'poll',
-      text: 'Events',
-      route: 'EventList',
-      role: null,
-    },
-    {
-      icon: 'group',
-      text: 'Groups',
-      route: 'GroupList',
-      role: null,
-    },
-    { icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
-    { icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
-    { icon: 'help', text: 'Help', role: null },
-    { icon: 'phonelink', text: 'App downloads', role: null },
-  ];
-  error = {
-    timeout: 3000,
-    show: false,
-    text: '',
-  };
  currentUser!: ICurrentUser;

  actor = localStorage.getItem(AUTH_USER_ACTOR);

-  mounted () {
-    this.initializeCurrentUser();
-  }
-
-  get displayed_name () {
-    // FIXME: load actor
-    return 'no implemented';
-    // return this.actor.display_name === null ? this.actor.username : this.actor.display_name
-  }
-
-  showMenuItem(elem) {
-    // FIXME: load actor
-    return false;
-    // return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
+  async mounted () {
+    await this.initializeCurrentUser();
  }

  getUser (): ICurrentUser|false {
    return this.currentUser.id ? this.currentUser : false;
  }

-  toggleDrawer() {
-    this.drawer = !this.drawer;
-  }
-
  private initializeCurrentUser() {
    const userId = localStorage.getItem(AUTH_USER_ID);
    const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
@ -106,7 +61,32 @@ export default class App extends Vue {
 }
 </script>

-<style>
+<style lang="scss">
+  @import "variables";
+
+  // Import Bulma and Buefy styles
+  @import "~bulma/sass/utilities/_all";
+  @import "~bulma/sass/base/_all.sass";
+  @import "~bulma/sass/elements/button.sass";
+  @import "~bulma/sass/elements/container.sass";
+  @import "~bulma/sass/components/card.sass";
+  @import "~bulma/sass/components/pagination.sass";
+  @import "~bulma/sass/elements/form.sass";
+  @import "~bulma/sass/layout/hero.sass";
+  @import "~bulma/sass/elements/title.sass";
+  @import "~bulma/sass/elements/image.sass";
+  @import "~bulma/sass/elements/box.sass";
+  @import "~bulma/sass/components/navbar.sass";
+  @import "~bulma/sass/components/modal.sass";
+  @import "~bulma/sass/grid/_all.sass";
+  @import "~bulma/sass/layout/section.sass";
+  @import "~bulma/sass/layout/footer.sass";
+  @import "~buefy/src/scss/utils/_all";
+  @import "~buefy/src/scss/components/datepicker";
+  @import "~buefy/src/scss/components/modal";
+  @import "~buefy/src/scss/components/form";
+  @import "~buefy/src/scss/components/dropdown";
+
 .router-enter-active,
 .router-leave-active {
  transition-property: opacity;
@ -121,4 +101,8 @@ export default class App extends Vue {
 .router-leave-active {
  opacity: 0;
 }
+
+  body {
+    background: #f6f7f8;
+  }
 </style>
--- a/js/src/assets/Circle-icons-calendar.svg
+++ b/js/src/assets/Circle-icons-calendar.svg
@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 64 64"
+   style="enable-background:new 0 0 64 64;"
+   xml:space="preserve"
+   id="svg4965"
+   sodipodi:docname="Circle-icons-calendar.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"><metadata
+   id="metadata4971"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs4969" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1018"
+   id="namedview4967"
+   showgrid="false"
+   inkscape:zoom="10.429825"
+   inkscape:cx="30.416304"
+   inkscape:cy="28.788016"
+   inkscape:window-x="0"
+   inkscape:window-y="34"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="g4961" />
+<style
+   type="text/css"
+   id="style4919">
+	.st0{fill:#77B3D4;}
+	.st1{opacity:0.2;}
+	.st2{fill:#231F20;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:#C75C5C;}
+	.st5{fill:#4F5D73;}
+	.st6{fill:#E0E0D1;}
+</style>
+<g
+   id="Layer_1">
+	<g
+   id="g4923">
+		<circle
+   class="st0"
+   cx="32"
+   cy="32"
+   r="32"
+   id="circle4921" />
+	</g>
+	<g
+   id="g4961">
+		<g
+   class="st1"
+   id="g4927">
+			<path
+   class="st2"
+   d="M12,25v25c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V25H12z"
+   id="path4925" />
+		</g>
+		<g
+   id="g4931">
+			<path
+   class="st3"
+   d="M12,23v25c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V23H12z"
+   id="path4929" />
+		</g>
+		<g
+   class="st1"
+   id="g4935">
+			<path
+   class="st2"
+   d="M48,14H16c-2.2,0-4,1.8-4,4v7h40v-7C52,15.8,50.2,14,48,14z"
+   id="path4933" />
+		</g>
+		<g
+   id="g4939">
+			<path
+   class="st4"
+   d="M48,12H16c-2.2,0-4,1.8-4,4v7h40v-7C52,13.8,50.2,12,48,12z"
+   id="path4937" />
+		</g>
+		
+		<g
+   class="st1"
+   id="g4947">
+			<path
+   class="st2"
+   d="M20,21c-1.1,0-2-0.9-2-2v-7c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v7C22,20.1,21.1,21,20,21L20,21z"
+   id="path4945" />
+		</g>
+		<g
+   class="st1"
+   id="g4951">
+			<path
+   class="st2"
+   d="M45,21c-1.1,0-2-0.9-2-2v-7c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v7C47,20.1,46.1,21,45,21L45,21z"
+   id="path4949" />
+		</g>
+		<g
+   id="g4955">
+			<path
+   class="st6"
+   d="M20,19c-1.1,0-2-0.9-2-2v-7c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v7C22,18.1,21.1,19,20,19L20,19z"
+   id="path4953" />
+		</g>
+		<g
+   id="g4959">
+			<path
+   class="st6"
+   d="M45,19c-1.1,0-2-0.9-2-2v-7c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v7C47,18.1,46.1,19,45,19L45,19z"
+   id="path4957" />
+		</g>
+	</g>
+</g>
+<g
+   id="Layer_2">
+</g>
+</svg>
--- a/js/src/assets/footer.png
+++ b/js/src/assets/footer.png
--- a/js/src/assets/texting.svg
+++ b/js/src/assets/texting.svg
@ -0,0 +1,748 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="abd2d575-db47-4a01-ab9c-7ced98725eec"
+   data-name="Layer 1"
+   width="1162"
+   height="716.89"
+   viewBox="0 0 1162 716.89"
+   version="1.1"
+   sodipodi:docname="texting.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata4844">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4842" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     id="namedview4840"
+     showgrid="false"
+     inkscape:zoom="2.2625507"
+     inkscape:cx="839.50648"
+     inkscape:cy="437.82829"
+     inkscape:window-x="0"
+     inkscape:window-y="34"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="abd2d575-db47-4a01-ab9c-7ced98725eec" />
+  <title
+     id="title4701">texting</title>
+  <path
+     d="M19,808.44H1142S1240.45,681,1124.57,550c-43-48.58-46.27-108.65-33.39-165C1126,232.68,986.65,97.88,835.46,137.44c-2.88.76-5.79,1.53-8.72,2.33-227.89,62.15-414.47-.31-486.28-31.23a206.52,206.52,0,0,0-90.8-16.78c-80.59,3.6-202.72,34.64-89.28,205.62C320.31,538.42,19,808.44,19,808.44Z"
+     transform="translate(-19 -91.56)"
+     fill="#6c63ff"
+     opacity="0.1"
+     id="path4703" />
+  <ellipse
+     cx="270.5"
+     cy="666.44"
+     rx="22.5"
+     ry="29.45"
+     fill="#3f3d56"
+     id="ellipse4705" />
+  <ellipse
+     cx="270.5"
+     cy="630.44"
+     rx="22.5"
+     ry="29.45"
+     fill="#3f3d56"
+     id="ellipse4707" />
+  <ellipse
+     cx="270.5"
+     cy="594.44"
+     rx="22.5"
+     ry="29.45"
+     fill="#3f3d56"
+     id="ellipse4709" />
+  <ellipse
+     cx="270.5"
+     cy="558.44"
+     rx="22.5"
+     ry="29.45"
+     fill="#3f3d56"
+     id="ellipse4711" />
+  <ellipse
+     cx="270.5"
+     cy="522.44"
+     rx="22.5"
+     ry="29.45"
+     fill="#3f3d56"
+     id="ellipse4713" />
+  <ellipse
+     cx="270.5"
+     cy="486.44"
+     rx="22.5"
+     ry="29.45"
+     fill="#3f3d56"
+     id="ellipse4715" />
+  <ellipse
+     cx="270.5"
+     cy="450.44"
+     rx="22.5"
+     ry="29.45"
+     fill="#3f3d56"
+     id="ellipse4717" />
+  <ellipse
+     cx="457.5"
+     cy="675.44"
+     rx="12.5"
+     ry="16.36"
+     fill="#3f3d56"
+     id="ellipse4719" />
+  <ellipse
+     cx="457.5"
+     cy="655.44"
+     rx="12.5"
+     ry="16.36"
+     fill="#3f3d56"
+     id="ellipse4721" />
+  <ellipse
+     cx="457.5"
+     cy="635.44"
+     rx="12.5"
+     ry="16.36"
+     fill="#3f3d56"
+     id="ellipse4723" />
+  <ellipse
+     cx="457.5"
+     cy="615.44"
+     rx="12.5"
+     ry="16.36"
+     fill="#3f3d56"
+     id="ellipse4725" />
+  <ellipse
+     cx="457.5"
+     cy="595.44"
+     rx="12.5"
+     ry="16.36"
+     fill="#3f3d56"
+     id="ellipse4727" />
+  <ellipse
+     cx="457.5"
+     cy="575.44"
+     rx="12.5"
+     ry="16.36"
+     fill="#3f3d56"
+     id="ellipse4729" />
+  <ellipse
+     cx="457.5"
+     cy="555.44"
+     rx="12.5"
+     ry="16.36"
+     fill="#3f3d56"
+     id="ellipse4731" />
+  <path
+     d="M373.73,295.64a109.12,109.12,0,0,0,8.38-12.33L323,273.6l63.94.47A108,108,0,0,0,389,188.68l-85.79,44.5L382.31,175a107.78,107.78,0,1,0-178,120.62A107.91,107.91,0,0,0,192,315.3l76.74,39.87L186.93,327.7a107.81,107.81,0,0,0,17.38,101.21,107.77,107.77,0,1,0,169.42,0,107.81,107.81,0,0,0,0-133.27Z"
+     transform="translate(-19 -91.56)"
+     fill="#6c63ff"
+     id="path4733" />
+  <path
+     d="M181.24,362.28a107.29,107.29,0,0,0,23.07,66.63,107.77,107.77,0,1,0,169.42,0C388.17,410.57,181.24,350.18,181.24,362.28Z"
+     transform="translate(-19 -91.56)"
+     opacity="0.1"
+     id="path4735" />
+  <path
+     d="M420.28,465.61a70.68,70.68,0,0,1-5.58-8.22l39.41-6.48-42.63.32a72,72,0,0,1-1.37-56.93L467.3,424,414.56,385.2a71.85,71.85,0,1,1,118.67,80.41,71.62,71.62,0,0,1,8.19,13.1l-51.16,26.58L544.81,487a71.85,71.85,0,0,1-11.58,67.48,71.85,71.85,0,1,1-113,0,71.89,71.89,0,0,1,0-88.85Z"
+     transform="translate(-19 -91.56)"
+     fill="#6c63ff"
+     id="path4737" />
+  <path
+     d="M548.61,510a71.57,71.57,0,0,1-15.38,44.43,71.85,71.85,0,1,1-113,0C410.65,542.23,548.61,502,548.61,510Z"
+     transform="translate(-19 -91.56)"
+     opacity="0.1"
+     id="path4739" />
+  <path
+     d="M19,808.44s120.52-117,162.24-77.64,217.87,49.83,234.1,47.51,111.25-6.95,164.56-1.16,542.35-16.22,562.05,31.29Z"
+     transform="translate(-19 -91.56)"
+     fill="#3f3d56"
+     id="path4741" />
+  <path
+     d="M800.08,236h-54.2a9.23,9.23,0,0,0,2-5.8,9.33,9.33,0,0,0-.68-3.47h25a9.27,9.27,0,0,0,0-18.54H622.77a9.3,9.3,0,0,0-9.27,9.27,9.1,9.1,0,0,0,.69,3.47h-25a9.28,9.28,0,0,0,0,18.55h54.2a9.2,9.2,0,0,0-2,5.79,9.3,9.3,0,0,0,9.27,9.27H800.08a9.27,9.27,0,0,0,0-18.54Z"
+     transform="translate(-19 -91.56)"
+     fill="#6c63ff"
+     opacity="0.1"
+     id="path4743" />
+  <path
+     d="M1044.6,369.23H990.4a9.23,9.23,0,0,0,2.05-5.8,9.13,9.13,0,0,0-.68-3.47h25a9.27,9.27,0,0,0,0-18.54H867.3a9.3,9.3,0,0,0-9.27,9.27,9.09,9.09,0,0,0,.68,3.47h-25a9.28,9.28,0,0,0,0,18.55h54.2a9.2,9.2,0,0,0-2,5.79,9.3,9.3,0,0,0,9.27,9.27H1044.6a9.27,9.27,0,1,0,0-18.54Z"
+     transform="translate(-19 -91.56)"
+     fill="#6c63ff"
+     opacity="0.1"
+     id="path4745" />
+  <path
+     d="M555.92,312.84H524.17a5.39,5.39,0,0,0,1.2-3.39,5.53,5.53,0,0,0-.4-2h14.66a5.43,5.43,0,0,0,0-10.86H452a5.45,5.45,0,0,0-5.43,5.43,5.34,5.34,0,0,0,.41,2H432.36a5.43,5.43,0,1,0,0,10.86h31.75a5.39,5.39,0,0,0-1.2,3.39,5.45,5.45,0,0,0,5.43,5.44h87.58a5.44,5.44,0,0,0,0-10.87Z"
+     transform="translate(-19 -91.56)"
+     fill="#6c63ff"
+     opacity="0.1"
+     id="path4747" />
+  <path
+     d="M708.47,755.55a23.78,23.78,0,0,1-1.74,6A43,43,0,0,0,717.34,764a1,1,0,0,0,.68-.1c.27-.21.23-.63.19-1a13.29,13.29,0,0,1,1.1-5.76q3-8.35,5.92-16.72c-3.46-1.57-10.62-.62-13.54,2C709,744.84,709.12,752.17,708.47,755.55Z"
+     transform="translate(-19 -91.56)"
+     fill="#a1616a"
+     id="path4749" />
+  <path
+     d="M758.09,764.88a1.92,1.92,0,0,0-.18.74c0,.89,1.18,1.2,2.07,1.28a56.67,56.67,0,0,1,12.62,2.63c.5-1.48-.2-3.07-.22-4.62,0-2.16,1.27-4.08,2.06-6.09,1.41-3.55,1.3-7.49,1.17-11.31-3.42.23-11.58-1.35-13.49,2.19-1.06,2-1,5-1.48,7.2A55.7,55.7,0,0,1,758.09,764.88Z"
+     transform="translate(-19 -91.56)"
+     fill="#a1616a"
+     id="path4751" />
+  <path
+     d="M737.75,611.19l-9,.53a2.58,2.58,0,0,0-1.64.48,2.46,2.46,0,0,0-.61,1.57c-1.2,9,.91,18.19-.21,27.19-.45,3.54-1.39,7-2.12,10.48-1.23,5.81-1.9,11.72-2.57,17.62a40.19,40.19,0,0,0-.34,8.83c.26,2.48,1,4.9,1.09,7.39a25.7,25.7,0,0,1-1.52,8.64,94,94,0,0,1-5.6,13.87c-1.93,3.87-4.14,7.64-5.31,11.8-1.86,6.62-1,13.83-3.21,20.34-.55,1.6-1.29,3.25-1,4.91.39,2.15,2.48,3.68,4.63,4.09a16.44,16.44,0,0,0,6.49-.49c3.51-.75,7.24-1.62,9.71-4.22a17.78,17.78,0,0,0,3.24-5.82c1.63-4,3.25-8.06,4.74-12.14a46.12,46.12,0,0,1,2.3-5.65c.82-1.56,1.84-3,2.71-4.56a46.34,46.34,0,0,0,3.48-8.4c6.42-19.7,8.38-41,18.08-59.3.46-.87.52-2,1-2.82a29.14,29.14,0,0,1,1.34,9.21,193.59,193.59,0,0,1-.51,21.27c-.4,5.16-1,10.31-1.12,15.49,0,2.36,0,4.73.05,7.1l0,1.93c.08,3.37.16,6.74.49,10.09,1.41,13.84-2.95,27.3-1.38,41.12a2.39,2.39,0,0,0,.46,1.36c.67.72,1.86.33,2.77-.06a29.76,29.76,0,0,1,9.46-2.36,6.38,6.38,0,0,0,2.87-.64c1.44-.86,1.85-2.73,2.11-4.39q3.27-20.19,6.53-40.38a96.54,96.54,0,0,0,1.24-9.73c.25-4.24-.06-8.5.35-12.72.57-6,3-11.7,4.82-17.4.94-3,1.89-5.95,2.75-8.95s1.65-6.11,2.35-9.19c1.2-5.36,2.14-10.89,1.31-16.32s-3.69-10.79-8.51-13.41c-3.53-1.93-7.67-2.22-11.66-2.66-11.39-1.25-22.74-4-34.15-3C741.68,612.07,739.79,611.07,737.75,611.19Z"
+     transform="translate(-19 -91.56)"
+     fill="#3f3d56"
+     id="path4753" />
+  <path
+     d="M712.51,794.74a12.83,12.83,0,0,0,1.42-3l3.69-10a86.92,86.92,0,0,0,3-9.13,42.77,42.77,0,0,0,1.22-11.32,42.15,42.15,0,0,1-11.11-1.56,17.17,17.17,0,0,0-4.22-.89,7.34,7.34,0,0,0-7.12,7.77,11.19,11.19,0,0,1,.16,1.82,5.69,5.69,0,0,1-.52,1.75l-3.94,9.6a21.07,21.07,0,0,0-2,7.4C692.81,796.16,706.84,802.91,712.51,794.74Z"
+     transform="translate(-19 -91.56)"
+     fill="#3f3d56"
+     id="path4755" />
+  <path
+     d="M750.51,793.87a17.17,17.17,0,0,0,0,4.53c.78,4.23,4.87,7.44,9.16,7.74a13.13,13.13,0,0,0,11.11-5.47,11.8,11.8,0,0,0,1.85-3.55,18.43,18.43,0,0,0,.62-3.77l1.59-16.83c.23-2.36,1.19-5.77,0-8-1-1.89-3.43-2.51-5.3-3.22a20.85,20.85,0,0,0-9.82-1.47c-5.83.49-5.77,6.44-6.65,11.19Q751.35,784.4,750.51,793.87Z"
+     transform="translate(-19 -91.56)"
+     fill="#3f3d56"
+     id="path4757" />
+  <path
+     d="M752.24,452.06c-2.69,3.77-6.61,6.54-9.25,10.35a19.45,19.45,0,0,0-3.41,11.85c.09,2.16.54,4.37,0,6.46A11.49,11.49,0,0,1,737,485a35.94,35.94,0,0,1-16.43,10.92c-.77.24-1.73.76-1.54,1.54a1.59,1.59,0,0,0,.71.81l13,9.31c7.63,5.47,15.3,11,23.74,15.09a84.34,84.34,0,0,0,48.5,7.63,25.29,25.29,0,0,1-3.85-11c-.5-4.7.34-9.44.25-14.17a36.62,36.62,0,0,0-3-14c-1.12-2.57-2.54-5-3.4-7.67a39.68,39.68,0,0,1-1.44-10l-.67-11.19a22.58,22.58,0,0,0-.93-6.13,15.19,15.19,0,0,0-2.38-4.22c-4.76-6.22-12-8.88-19.58-9.53-3.31-.28-7.36-.55-10.41.89C755.92,445.07,754.44,449,752.24,452.06Z"
+     transform="translate(-19 -91.56)"
+     fill="#3f3d56"
+     id="path4759" />
+  <path
+     d="M751,492.42a7.43,7.43,0,0,1-4.69,4.36,22.12,22.12,0,0,1-6.54,1L735,498a2.08,2.08,0,0,0-1.47.44,1.72,1.72,0,0,0-.42,1.07c-.3,2.54,1.18,4.91,2.66,7,4.74,6.64,10.42,12.95,17.83,16.34a29.41,29.41,0,0,0,33.9-6.84,3,3,0,0,0,.94-1.67A2.81,2.81,0,0,0,787,512c-1.58-1.17-3.44-1.93-5-3.09a15,15,0,0,1-5.43-8.21,24.7,24.7,0,0,1-.45-9.95c-5.93-1.69-12.39-.35-18.33-2-1.39-.38-4-1.84-5.46-1S751.46,491,751,492.42Z"
+     transform="translate(-19 -91.56)"
+     fill="#a1616a"
+     id="path4761" />
+  <path
+     d="M751,492.42a7.43,7.43,0,0,1-4.69,4.36,22.12,22.12,0,0,1-6.54,1L735,498a2.08,2.08,0,0,0-1.47.44,1.72,1.72,0,0,0-.42,1.07c-.3,2.54,1.18,4.91,2.66,7,4.74,6.64,10.42,12.95,17.83,16.34a29.41,29.41,0,0,0,33.9-6.84,3,3,0,0,0,.94-1.67A2.81,2.81,0,0,0,787,512c-1.58-1.17-3.44-1.93-5-3.09a15,15,0,0,1-5.43-8.21,24.7,24.7,0,0,1-.45-9.95c-5.93-1.69-12.39-.35-18.33-2-1.39-.38-4-1.84-5.46-1S751.46,491,751,492.42Z"
+     transform="translate(-19 -91.56)"
+     opacity="0.1"
+     id="path4763" />
+  <circle
+     cx="747.07"
+     cy="390.79"
+     r="19.97"
+     fill="#a1616a"
+     id="circle4765" />
+  <path
+     d="M780.6,502.7a65.52,65.52,0,0,1-11.46,3.72,22.06,22.06,0,0,1-11.9-.65,41.43,41.43,0,0,1-7.37-4.2c-4.14-2.65-8.66-5-13.56-5.48-2.29-.24-4.79,0-6.6,1.42a9,9,0,0,0-2.91,6c-.66,4.76.47,9.56,1.48,14.26,3.83,17.85,6,36.52,1.71,54.28-2.25,9.43.18,19.24.51,28.93a34.62,34.62,0,0,0,1.31,9.85c1.05,3.15,3.17,6.1,6.23,7.39,2.85,1.2,6.08.83,9.16.58,3.67-.29,7.5-.34,10.83,1.2,2.36,1.1,4.57,3,7.15,2.77,1.32-.12,2.52-.8,3.83-1,2.63-.44,5.15,1,7.54,2.18a46.66,46.66,0,0,0,19,4.81c3.37-7.93,1.63-16.85,2-25.46.15-3.22.63-6.42.82-9.64a107.82,107.82,0,0,0-.15-11.65L797,555.81c-.35-7.13,3.29-14.11,3-21.23a64.26,64.26,0,0,0-1.37-9.86c-.22-1.1-.45-2.19-.76-3.26-2.2-7.51-8.53-13-14.58-17.93A2.93,2.93,0,0,0,780.6,502.7Z"
+     transform="translate(-19 -91.56)"
+     fill="#6c63ff"
+     id="path4767" />
+  <path
+     d="M747.22,619.63c.08,7-2.44,13.77-4.91,20.34-.76,2-1.69,4.22-3.63,5.15s-4.11.33-6-.41a40.37,40.37,0,0,1-5.13-2.37c-1.74-1-3.7-2.07-5.57-1.43-2.29.78-3,3.63-3.31,6a63.45,63.45,0,0,1-9.35-.57,1.76,1.76,0,0,1-.82-.26,1.73,1.73,0,0,1-.52-1.12c-.32-1.67-.65-3.33-1-5-.1-.52-.48-1.21-1-1,.42-6.48-.93-12.93-1.42-19.4a51.45,51.45,0,0,1,.1-9.85,95.42,95.42,0,0,1,1.88-9.73c1.54-6.86,4.5-13.83,4.67-20.79a23.49,23.49,0,0,0-.27-4.18q-2.12-13.09-4.22-26.2c-.36-2.18-.71-4.38-1.22-6.53-.38-1.6-.74-3.15-1.15-4.69-.25-.94-.52-1.87-.83-2.81q4-11,8-22a40.43,40.43,0,0,1,2.2-5.27,20.62,20.62,0,0,1,8.95-8.73,8.07,8.07,0,0,0,3-2c.39-.51.63-1.13,1-1.66,1.41-2,4.3-2.16,6.71-1.72,2.21.39,4.5,1.23,5.84,3A11.77,11.77,0,0,1,740.5,499q2.4,5.82,4.82,11.63c1.37.66,2,2.45,2,4,0,2.88-.41,5.75-.29,8.63,0,.21,0,.41.06.62.36,2.59,2.19,4.77,2.81,7.37,2.38,9.95-1.09,20.19-3.13,30.25-.08.4-.16.79-.23,1.19a90.88,90.88,0,0,0-1.6,17.73,50.68,50.68,0,0,0,.52,7.38c.33,2.15.86,4.27,1.1,6.44a59.58,59.58,0,0,1,0,9.06C746.28,608.71,747.16,614.16,747.22,619.63Z"
+     transform="translate(-19 -91.56)"
+     fill="#454b69"
+     id="path4769" />
+  <path
+     d="M755.46,533.92a8.61,8.61,0,0,1,1.14,4,2.66,2.66,0,0,1-.6,1.66,2.5,2.5,0,0,1-2.29.63,6.29,6.29,0,0,1-2.23-1,5.17,5.17,0,0,1-2.13-2.14,5.57,5.57,0,0,1-.32-1.34l-.53-3.38a4.31,4.31,0,0,1,0-2c.45-1.39,2.47-3.85,4-2.65S754.71,532.32,755.46,533.92Z"
+     transform="translate(-19 -91.56)"
+     fill="#454b69"
+     id="path4771" />
+  <path
+     d="M814,539.48c-.59-1.54-2.35-2.19-3.79-3-3-1.67-5.08-4.59-6.66-7.63s-2.76-6.28-4.47-9.24a3.6,3.6,0,0,0-1.14-1.36,1.38,1.38,0,0,0-1.66.1,1.8,1.8,0,0,0-.37.95c-.36,2.21.27,4.44.61,6.65a25.92,25.92,0,0,1-6.34,21c-2.07,2.29-4.64,4.3-5.75,7.18a16.91,16.91,0,0,0-.6,7l.69,12.76a120.6,120.6,0,0,1-4.35,38.49c-2,7.2-5.38,14.47-4,21.81.52,2.81,1.74,5.6,1.24,8.42a2.87,2.87,0,0,0,0,1.64,2.39,2.39,0,0,0,1,.93l6.65,4.34,6-17.77a32.86,32.86,0,0,0,1.33-4.65,35.54,35.54,0,0,0,.39-5.46,230.54,230.54,0,0,1,6.17-47.44,36.41,36.41,0,0,1,2-6.56c1.73-3.89,4.64-7.11,7.51-10.27.07-1.47-.12-2.94,0-4.42a28.29,28.29,0,0,1,1.09-7.62C810.33,542.9,811.67,540.56,814,539.48Z"
+     transform="translate(-19 -91.56)"
+     fill="#454b69"
+     id="path4773" />
+  <path
+     d="M803.91,556.08a90.29,90.29,0,0,0,.19,12.63l1,16.74a24.07,24.07,0,0,0,1,6.61c.8,2.28,2.28,4.28,3.05,6.58.26.78.44,1.6.7,2.39.33,1,.78,1.87,1.2,2.8,2.7,6.11,3.44,12.89,3.63,19.56s-.15,13.36.53,20a12.07,12.07,0,0,1-5.31.26,7.43,7.43,0,0,0-2-.27,6.31,6.31,0,0,0-1.68.48,17.31,17.31,0,0,1-14.53-1.3,29,29,0,0,1-3.71-2.72,11.37,11.37,0,0,1-2.54-2.69,10,10,0,0,1-1.15-4.86c-.23-6.79,2-13.39,3.51-20a185.9,185.9,0,0,0,3-19.39c1.11-9.53.81-19.33,3-28.68a7.9,7.9,0,0,1,1.6-3.71,8,8,0,0,1,2.58-1.66C799.93,557.9,801.92,557,803.91,556.08Z"
+     transform="translate(-19 -91.56)"
+     fill="#454b69"
+     id="path4775" />
+  <path
+     d="M814,539.48c-.59-1.54-2.35-2.19-3.79-3-3-1.67-5.08-4.59-6.66-7.63s-2.76-6.28-4.47-9.24a3.6,3.6,0,0,0-1.14-1.36,1.38,1.38,0,0,0-1.66.1,1.8,1.8,0,0,0-.37.95c-.36,2.21.27,4.44.61,6.65a25.92,25.92,0,0,1-6.34,21c-2.07,2.29-4.64,4.3-5.75,7.18a16.91,16.91,0,0,0-.6,7l.69,12.76a120.6,120.6,0,0,1-4.35,38.49c-2,7.2-5.38,14.47-4,21.81.52,2.81,1.74,5.6,1.24,8.42a2.87,2.87,0,0,0,0,1.64,2.39,2.39,0,0,0,1,.93l6.65,4.34,6-17.77a32.86,32.86,0,0,0,1.33-4.65,35.54,35.54,0,0,0,.39-5.46,230.54,230.54,0,0,1,6.17-47.44,36.41,36.41,0,0,1,2-6.56c1.73-3.89,4.64-7.11,7.51-10.27.07-1.47-.12-2.94,0-4.42a28.29,28.29,0,0,1,1.09-7.62C810.33,542.9,811.67,540.56,814,539.48Z"
+     transform="translate(-19 -91.56)"
+     opacity="0.1"
+     id="path4777" />
+  <path
+     d="M806.59,644.53a3.57,3.57,0,0,1-1.3,1.88c-.67.38-1.76.06-1.82-.71-1.12-.15-2,1.17-3.08,1.26s-2.08-1-3.14-.76c-.68.18-1.32.9-1.94.58-.26-.13-.42-.41-.69-.51-.43-.14-.84.26-1.28.36-.93.21-1.61-.93-1.64-1.88s.25-2-.19-2.82a.6.6,0,0,0-.29-.32c-.3-.14-.63.14-.83.41-.74,1-.95,2.39-1.7,3.43s-2.54,1.53-3.22.45a2.55,2.55,0,0,1-.14-1.81c.45-2.56,1.45-5.31,3.75-6.51,2-1,4.4-.62,6.6-.16q4.59,1,9.17,2.07c.81.19,2.75.29,3.1,1.23S806.91,643.73,806.59,644.53Z"
+     transform="translate(-19 -91.56)"
+     fill="#a1616a"
+     id="path4779" />
+  <path
+     d="M770.57,468.25c1,5.39,4.08,10.14,6.55,15.05s4.44,10.49,3.1,15.81a55,55,0,0,1-2,5.39,50.92,50.92,0,0,0-2.06,9.58c-.66,4.42-1.32,8.91-.79,13.35s2.42,8.9,6,11.6l-.28-2a22.23,22.23,0,0,1,4.23,2.91,26.86,26.86,0,0,0,3-8.15l6.79,5.27c3,2.3,6.36,4.72,10.08,4.26l-3-6.91c-.83-1.92-1.66-3.83-2.64-5.68a17.87,17.87,0,0,1-1.62-3.46,15.61,15.61,0,0,1-.44-3.2,223.13,223.13,0,0,0-9.82-52,43.35,43.35,0,0,0-4.73-11A13.78,13.78,0,0,0,779,455c-2.49-1.59-5.55-1.93-8.49-2.23a26.19,26.19,0,0,0-6.19-.14,19,19,0,0,0-6,2.06,32,32,0,0,0-13.84,13.73,27.2,27.2,0,0,0-3.13,13.89c.39,5.1,5.25,2.78,8.53,1.51C758,480.65,765.8,475.73,770.57,468.25Z"
+     transform="translate(-19 -91.56)"
+     fill="#3f3d56"
+     id="path4781" />
+  <path
+     d="M755.46,533.92a8.61,8.61,0,0,1,1.14,4,2.66,2.66,0,0,1-.6,1.66,2.5,2.5,0,0,1-2.29.63,6.29,6.29,0,0,1-2.23-1,5.17,5.17,0,0,1-2.13-2.14,5.57,5.57,0,0,1-.32-1.34l-.53-3.38a4.31,4.31,0,0,1,0-2c.45-1.39,2.47-3.85,4-2.65S754.71,532.32,755.46,533.92Z"
+     transform="translate(-19 -91.56)"
+     opacity="0.1"
+     id="path4783" />
+  <polygon
+     points="742.71 407.39 738.96 435.48 755.44 434.48 760.8 407.39 742.71 407.39"
+     fill="#454b69"
+     id="polygon4785" />
+  <circle
+     cx="750.82"
+     cy="415.75"
+     r="1.25"
+     fill="#fff"
+     id="circle4787" />
+  <g
+     opacity="0.1"
+     id="g4793">
+    <path
+       d="M780.65,495.73c.17-.49.32-1,.45-1.48,1.33-5.33-.64-10.91-3.11-15.82s-5.51-9.65-6.54-15.05c-4.77,7.48-12.55,12.4-20.68,15.56-3.28,1.27-8.15,3.58-8.54-1.51a20.47,20.47,0,0,1,0-3.41,23.69,23.69,0,0,0-.9,8.15c.39,5.1,5.25,2.78,8.53,1.51,8.14-3.15,15.91-8.07,20.68-15.55,1,5.39,4.08,10.14,6.55,15C779.09,487.09,780.74,491.43,780.65,495.73Z"
+       transform="translate(-19 -91.56)"
+       id="path4789" />
+    <path
+       d="M796,532.2q-3.4-2.62-6.79-5.27a26.78,26.78,0,0,1-3,8.16,22,22,0,0,0-4.23-2.92l.28,2c-3.56-2.7-5.45-7.16-6-11.6s.12-8.93.78-13.35c.07-.48.15-1,.22-1.44-.47,2-.78,4.11-1.09,6.18-.66,4.43-1.32,8.91-.79,13.35s2.42,8.9,6,11.6l-.28-2a22.75,22.75,0,0,1,4.23,2.92,27,27,0,0,0,3-8.15q3.4,2.63,6.79,5.27c3,2.29,6.36,4.72,10.08,4.26l-2.16-5C800.49,535.58,798.13,533.86,796,532.2Z"
+       transform="translate(-19 -91.56)"
+       id="path4791" />
+  </g>
+  <path
+     d="M752.67,513.9a23.59,23.59,0,0,1,5.59-5.34,1.68,1.68,0,0,1,1.15-.32c.32.07.59.31.92.37a1.83,1.83,0,0,0,1.08-.26l4.62-2.22a4.9,4.9,0,0,1,2.21-.64,1.62,1.62,0,0,1,1.61,1.39c0,.86-.85,1.44-1.61,1.87a43.21,43.21,0,0,0-6.48,4.52c-1,.89-2.14,2.36-1.36,3.5a3,3,0,0,0,2.54.85,20.39,20.39,0,0,0,5-.38c1.32-.33,2.56-.92,3.89-1.23a19.13,19.13,0,0,1,3.71-.37,3,3,0,0,1,2.09.45c.55.47.5,1.6-.21,1.74,1,1.33.12,3.29-1.19,4.29s-3,1.41-4.37,2.26c1.6-.57,3.49-1.12,4.91-.18a1,1,0,0,1,.45.56c.09.47-.41.83-.85,1-6.56,3.06-14.33,2-21.2,4.27a22.55,22.55,0,0,0-7.88,4.55c1.07-1-5.52-8-4.95-10,.46-1.64,3.77-3.73,5-5Q750.1,516.89,752.67,513.9Z"
+     transform="translate(-19 -91.56)"
+     fill="#a1616a"
+     id="path4795" />
+  <path
+     d="M752.42,545.69a5.34,5.34,0,0,0,.35,2.68c.54,2.26-.25,4.63-1.34,6.69a29,29,0,0,1-4.68,6.39,61.7,61.7,0,0,1-7.06,6.26,152,152,0,0,1-15.4,10.62,12.82,12.82,0,0,1-4.45,1.95,13.33,13.33,0,0,1-3.73-.06,21.53,21.53,0,0,1-4.89-1,23.49,23.49,0,0,0-.27-4.18q-2.12-13.09-4.22-26.2c-.36-2.18-.71-4.38-1.22-6.53-.38-1.6-.74-3.15-1.15-4.69,0,0,0-.08,0-.11,1-2.52,3.93-4.12,4.22-6.8,4.23-.4,8.2-.87,12.44-1.26a28,28,0,0,1-.81,11.84,1.55,1.55,0,0,0,1.55-.95c.31-.57.41-1.23.67-1.83,1-2.28,3.93-2.82,6-4.14,3.64-2.26,5.21-7.16,9.13-8.86a1.43,1.43,0,0,1,.92-.16c.86.23,1,1.74,1.93,1.68a1.32,1.32,0,0,0,.74-.42c1.6-1.45,3.6-2.65,5.19-4.09.22.43.43.86.64,1.29q3.34,6.76,6.67,13.53c.87,1.76,1.84,3.63,3.57,4.56C756.55,543.9,753.05,543.66,752.42,545.69Z"
+     transform="translate(-19 -91.56)"
+     opacity="0.1"
+     id="path4797" />
+  <path
+     d="M707.37,528.6c-.28,2.69-3.23,4.29-4.22,6.81a12.2,12.2,0,0,0-.49,4.14c-.1,4-1,7.82-1.5,11.73s-.6,8,.84,11.68c.86,2.18,2.24,4.16,2.83,6.43.4,1.52.43,3.16,1.14,4.56,1.55,3,5.5,3.78,8.89,4.15a13.33,13.33,0,0,0,3.73.06,13,13,0,0,0,4.46-1.95,152.94,152.94,0,0,0,15.39-10.62c4.57-3.57,9-7.53,11.74-12.65,1.09-2.06,1.88-4.43,1.35-6.69a5.13,5.13,0,0,1-.35-2.68c.63-2,4.12-1.79,4.88-3.78-1.73-.92-2.7-2.79-3.56-4.55l-7.31-14.83c-1.6,1.45-3.6,2.65-5.19,4.1a1.38,1.38,0,0,1-.75.42c-.89.06-1.07-1.45-1.93-1.68a1.46,1.46,0,0,0-.91.15c-3.93,1.71-5.5,6.61-9.14,8.87-2.12,1.32-5,1.86-6,4.14-.26.59-.36,1.26-.67,1.83a1.55,1.55,0,0,1-1.55,1,27.88,27.88,0,0,0,.81-11.84C715.58,527.74,711.61,528.21,707.37,528.6Z"
+     transform="translate(-19 -91.56)"
+     fill="#454b69"
+     id="path4799" />
+  <path
+     d="M806.24,643.86c.27-.1.54-.21.81-.29a3.32,3.32,0,0,0,.9-3.6c-.35-.94-2.29-1-3.1-1.23q-4.58-1.1-9.17-2.06c-2.2-.47-4.61-.88-6.6.15-.74.39-1.35,1.69-1.85,2.35l.77.66c.83.69,1.68,1.37,2.56,2a.63.63,0,0,1,.66-.21.6.6,0,0,1,.29.32,2,2,0,0,1,.21.63A17.26,17.26,0,0,0,806.24,643.86Z"
+     transform="translate(-19 -91.56)"
+     fill="#454b69"
+     id="path4801" />
+  <path
+     d="M1157,459.81v85.44c0,2.54-4.76,4.61-10.65,4.61H920.81c-5.89,0-10.66-2.07-10.66-4.61V459.81c0-2.55,4.77-5.14,10.66-5.14h225.55C1152.25,454.67,1157,457.26,1157,459.81Z"
+     transform="translate(-19 -91.56)"
+     fill="#3f3d56"
+     id="path4803" />
+  <rect
+     x="999.49"
+     y="393.65"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     id="rect4805" />
+  <rect
+     x="999.49"
+     y="403.75"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     opacity="0.5"
+     id="rect4807" />
+  <rect
+     x="999.49"
+     y="413.86"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     opacity="0.5"
+     id="rect4809" />
+  <rect
+     x="999.49"
+     y="423.97"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     opacity="0.5"
+     id="rect4811" />
+  <path
+     d="M1157,220.13v85.45c0,2.54-4.76,4.61-10.65,4.61H920.81c-5.89,0-10.66-2.07-10.66-4.61V220.13c0-2.54,4.77-5.14,10.66-5.14h225.55C1152.25,215,1157,217.59,1157,220.13Z"
+     transform="translate(-19 -91.56)"
+     fill="#3f3d56"
+     id="path4815" />
+  <rect
+     x="999.49"
+     y="153.97"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     id="rect4817" />
+  <rect
+     x="999.49"
+     y="164.08"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     opacity="0.5"
+     id="rect4819" />
+  <rect
+     x="999.49"
+     y="174.19"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     opacity="0.5"
+     id="rect4821" />
+  <rect
+     x="999.49"
+     y="184.29"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     opacity="0.5"
+     id="rect4823" />
+  <path
+     d="M1045,339.47v85.45c0,2.54-4.77,4.6-10.66,4.6H808.76c-5.88,0-10.65-2.06-10.65-4.6V339.47c0-2.55,4.77-5.14,10.65-5.14h225.55C1040.2,334.33,1045,336.92,1045,339.47Z"
+     transform="translate(-19 -91.56)"
+     fill="#3f3d56"
+     id="path4827" />
+  <rect
+     x="887.44"
+     y="273.31"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     id="rect4829" />
+  <rect
+     x="887.44"
+     y="283.42"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     opacity="0.5"
+     id="rect4833" />
+  <rect
+     x="887.44"
+     y="293.52"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     opacity="0.5"
+     id="rect4835" />
+  <rect
+     x="887.44"
+     y="303.63"
+     width="117.48"
+     height="4.15"
+     fill="#6c63ff"
+     opacity="0.5"
+     id="rect4837" />
+  <style
+     id="style4919"
+     type="text/css">
+	.st0{fill:#77B3D4;}
+	.st1{opacity:0.2;}
+	.st2{fill:#231F20;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:#C75C5C;}
+	.st5{fill:#4F5D73;}
+	.st6{fill:#E0E0D1;}
+</style>
+  <g
+     id="g5924"
+     transform="translate(911.18328,138.60391)">
+    <g
+       id="Layer_1">
+	
+	<g
+   id="g4961">
+		<g
+   id="g4927"
+   class="st1"
+   style="opacity:0.2">
+			<path
+   id="path4925"
+   d="m 12,25 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 25 Z"
+   class="st2"
+   inkscape:connector-curvature="0"
+   style="fill:#231f20" />
+
+		</g>
+
+		<g
+   id="g4931">
+			<path
+   id="path4929"
+   d="m 12,23 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 23 Z"
+   class="st3"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+
+		</g>
+
+		<g
+   id="g4935"
+   class="st1"
+   style="opacity:0.2">
+			<path
+   id="path4933"
+   d="M 48,14 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
+   class="st2"
+   inkscape:connector-curvature="0"
+   style="fill:#231f20" />
+
+		</g>
+
+		<g
+   id="g4939">
+			<path
+   id="path4937"
+   d="M 48,12 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
+   class="st4"
+   inkscape:connector-curvature="0"
+   style="fill:#c75c5c" />
+
+		</g>
+
+		
+		<g
+   id="g4947"
+   class="st1"
+   style="opacity:0.2">
+			<path
+   id="path4945"
+   d="m 20,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+   class="st2"
+   inkscape:connector-curvature="0"
+   style="fill:#231f20" />
+
+		</g>
+
+		<g
+   id="g4951"
+   class="st1"
+   style="opacity:0.2">
+			<path
+   id="path4949"
+   d="m 45,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+   class="st2"
+   inkscape:connector-curvature="0"
+   style="fill:#231f20" />
+
+		</g>
+
+		<g
+   id="g4955">
+			<path
+   id="path4953"
+   d="m 20,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+   class="st6"
+   inkscape:connector-curvature="0"
+   style="fill:#e0e0d1" />
+
+		</g>
+
+		<g
+   id="g4959">
+			<path
+   id="path4957"
+   d="m 45,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+   class="st6"
+   inkscape:connector-curvature="0"
+   style="fill:#e0e0d1" />
+
+		</g>
+
+	</g>
+
+</g>
+    <g
+       id="Layer_2">
+</g>
+  </g>
+  <g
+     id="g5924-4"
+     transform="translate(794.71,254.6)">
+    <g
+       id="Layer_1-5">
+      <g
+         id="g4961-4">
+        <g
+           id="g4927-7"
+           class="st1"
+           style="opacity:0.2">
+          <path
+             id="path4925-4"
+             d="m 12,25 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 25 Z"
+             class="st2"
+             inkscape:connector-curvature="0"
+             style="fill:#231f20" />
+        </g>
+        <g
+           id="g4931-4">
+          <path
+             id="path4929-3"
+             d="m 12,23 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 23 Z"
+             class="st3"
+             inkscape:connector-curvature="0"
+             style="fill:#ffffff" />
+        </g>
+        <g
+           id="g4935-0"
+           class="st1"
+           style="opacity:0.2">
+          <path
+             id="path4933-7"
+             d="M 48,14 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
+             class="st2"
+             inkscape:connector-curvature="0"
+             style="fill:#231f20" />
+        </g>
+        <g
+           id="g4939-8">
+          <path
+             id="path4937-6"
+             d="M 48,12 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
+             class="st4"
+             inkscape:connector-curvature="0"
+             style="fill:#c75c5c" />
+        </g>
+        <g
+           id="g4947-8"
+           class="st1"
+           style="opacity:0.2">
+          <path
+             id="path4945-8"
+             d="m 20,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+             class="st2"
+             inkscape:connector-curvature="0"
+             style="fill:#231f20" />
+        </g>
+        <g
+           id="g4951-4"
+           class="st1"
+           style="opacity:0.2">
+          <path
+             id="path4949-3"
+             d="m 45,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+             class="st2"
+             inkscape:connector-curvature="0"
+             style="fill:#231f20" />
+        </g>
+        <g
+           id="g4955-1">
+          <path
+             id="path4953-4"
+             d="m 20,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+             class="st6"
+             inkscape:connector-curvature="0"
+             style="fill:#e0e0d1" />
+        </g>
+        <g
+           id="g4959-9">
+          <path
+             id="path4957-2"
+             d="m 45,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+             class="st6"
+             inkscape:connector-curvature="0"
+             style="fill:#e0e0d1" />
+        </g>
+      </g>
+    </g>
+    <g
+       id="Layer_2-0" />
+  </g>
+  <g
+     id="g5924-6"
+     transform="translate(913.83516,374.62072)">
+    <g
+       id="Layer_1-8">
+      <g
+         id="g4961-6">
+        <g
+           id="g4927-6"
+           class="st1"
+           style="opacity:0.2">
+          <path
+             id="path4925-49"
+             d="m 12,25 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 25 Z"
+             class="st2"
+             inkscape:connector-curvature="0"
+             style="fill:#231f20" />
+        </g>
+        <g
+           id="g4931-5">
+          <path
+             id="path4929-0"
+             d="m 12,23 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 23 Z"
+             class="st3"
+             inkscape:connector-curvature="0"
+             style="fill:#ffffff" />
+        </g>
+        <g
+           id="g4935-4"
+           class="st1"
+           style="opacity:0.2">
+          <path
+             id="path4933-8"
+             d="M 48,14 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
+             class="st2"
+             inkscape:connector-curvature="0"
+             style="fill:#231f20" />
+        </g>
+        <g
+           id="g4939-7">
+          <path
+             id="path4937-1"
+             d="M 48,12 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
+             class="st4"
+             inkscape:connector-curvature="0"
+             style="fill:#c75c5c" />
+        </g>
+        <g
+           id="g4947-7"
+           class="st1"
+           style="opacity:0.2">
+          <path
+             id="path4945-2"
+             d="m 20,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+             class="st2"
+             inkscape:connector-curvature="0"
+             style="fill:#231f20" />
+        </g>
+        <g
+           id="g4951-7"
+           class="st1"
+           style="opacity:0.2">
+          <path
+             id="path4949-2"
+             d="m 45,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+             class="st2"
+             inkscape:connector-curvature="0"
+             style="fill:#231f20" />
+        </g>
+        <g
+           id="g4955-2">
+          <path
+             id="path4953-6"
+             d="m 20,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+             class="st6"
+             inkscape:connector-curvature="0"
+             style="fill:#e0e0d1" />
+        </g>
+        <g
+           id="g4959-1">
+          <path
+             id="path4957-0"
+             d="m 45,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
+             class="st6"
+             inkscape:connector-curvature="0"
+             style="fill:#e0e0d1" />
+        </g>
+      </g>
+    </g>
+    <g
+       id="Layer_2-6" />
+  </g>
+</svg>
--- a/js/src/assets/undraw_events.svg
+++ b/js/src/assets/undraw_events.svg
--- a/js/src/components/Event/DateCalendarIcon.vue
+++ b/js/src/components/Event/DateCalendarIcon.vue
@ -1,18 +1,18 @@
 <template>
-    <span class="container">
+    <time class="container" :datetime="dateObj.getUTCSeconds()">
        <span class="month">{{ month }}</span>
        <span class="day">{{ day }}</span>
-    </span>
+    </time>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
-export default class DateComponent extends Vue {
+export default class DateCalendarIcon extends Vue {
  @Prop({ required: true }) date!: string;

  get dateObj() {
-      return new Date(this.$props.date);
+    return new Date(this.$props.date);
  }

  get month() {
@ -26,22 +26,27 @@ export default class DateComponent extends Vue {
 </script>

 <style lang="scss" scoped>
-  .container {
-    display: inline-flex;
-    padding: 2px 0;
-    width: 40px;
-    background: #fff;
+  time.container {
+    background: #f6f7f8;
+    border: 1px solid rgba(46,62,72,.12);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /*height: 50px;*/
+    width: 48px;
+    padding: 8px;
+    text-align: center;

    span {
-      flex: 0;
-      flex-direction: column;
-      text-align: center;
+      display: block;

      &.month {
        color: #fa3e3e;
        padding: 2px 0;
        font-size: 12px;
        line-height: 12px;
+        text-transform: uppercase;
      }

      &.day {
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@ -1,61 +1,124 @@
 <template>
-  <div class="card">
+  <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
    <div class="card-image" v-if="!event.image">
      <figure class="image is-16by9">
        <img src="https://picsum.photos/g/400/225/?random">
      </figure>
    </div>
-    <div class="card-content">
-      <div class="content">
-        <router-link :to="{ name: 'Event', params:{ uuid: event.uuid } }">
-          <h2 class="title">{{ event.title }}</h2>
-        </router-link>
-        <DateComponent v-if="!options.hideDate" :date="event.beginsOn" />
-      </div>
-      <div v-if="!options.hideDetails">
-        <div v-if="event.participants.length > 0 &&
-        options.loggedPerson &&
-        event.participants[0].actor.id === options.loggedPerson.id">
-          <b-tag type="is-info"><translate>Organizer</translate></b-tag>
-        </div>
-        <div v-else-if="event.participants.length === 1">
-          <translate
-                  :translate-params="{name: event.participants[0].actor.preferredUsername}"
-          >%{name} organizes this event</translate>
-        </div>
-        <div v-else>
-          <span v-for="participant in event.participants" :key="participant.actor.uuid">
-            {{ participant.actor.preferredUsername }}
-            <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,
-            <!-- <translate
-              :translate-params="{name: participant.actor.preferredUsername}"
-            >&nbsp;%{name} is in,</translate>-->
-          </span>
-        </div>
+    <div class="content">
+      <div class="title-wrapper">
+        <div class="date-component">
+          <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />
+        </div>
+        <h2 class="title" ref="title">{{ event.title }}</h2>
      </div>
+      <span>
+        <span v-if="event.physicalAddress && event.physicalAddress.locality">{{ event.physicalAddress.locality }} - </span>
+        <span v-if="actorDisplayName && actorDisplayName !== '@'">{{ actorDisplayName }}</span>
+      </span>
    </div>
-  </div>
+<!--    <div v-if="!mergedOptions.hideDetails" class="details">-->
+<!--      <div v-if="event.participants.length > 0 &&-->
+<!--      mergedOptions.loggedPerson &&-->
+<!--      event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
+<!--        <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
+<!--      </div>-->
+<!--      <div v-else-if="event.participants.length === 1">-->
+<!--        <translate-->
+<!--                :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
+<!--        >%{name} organizes this event</translate>-->
+<!--      </div>-->
+<!--      <div v-else>-->
+<!--        <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
+<!--          {{ participant.actor.preferredUsername }}-->
+<!--          <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
+<!--          &lt;!&ndash; <translate-->
+<!--            :translate-params="{name: participant.actor.preferredUsername}"-->
+<!--          >&nbsp;%{name} is in,</translate>&ndash;&gt;-->
+<!--        </span>-->
+<!--      </div>-->
+    </router-link>
 </template>

 <script lang="ts">
 import { IEvent, ParticipantRole } from '@/types/event.model';
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import DateComponent from '@/components/Event/Date.vue';
+import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
+import { IActor, IPerson, Person } from '@/types/actor.model';
+const lineClamp = require('line-clamp');
+
+export interface IEventCardOptions {
+  hideDate: boolean;
+  loggedPerson: IPerson | boolean;
+  hideDetails: boolean;
+  organizerActor: IActor | null;
+}

@Component({
  components: {
-    DateComponent,
+    DateCalendarIcon,
    EventCard,
  },
+  mounted() {
+    lineClamp(this.$refs.title, 3);
+  },
 })
 export default class EventCard extends Vue {
  @Prop({ required: true }) event!: IEvent;
-  @Prop({ default() { return { hideDate: false, loggedPerson: false, hideDetails: false }; } }) options!: object;
+  @Prop({ required: false }) options!: IEventCardOptions;

-  data() {
-    return {
-      ParticipantRole,
-    };
+  ParticipantRole = ParticipantRole;
+
+  defaultOptions: IEventCardOptions = {
+    hideDate: false,
+    loggedPerson: false,
+    hideDetails: false,
+    organizerActor: null,
+  };
+
+  get mergedOptions(): IEventCardOptions {
+    return { ...this.defaultOptions, ...this.options };
  }
+
+  get actorDisplayName() {
+    const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
+    return actor.displayName();
+  }
+
 }
 </script>
+
+<style lang="scss">
+  @import "../../variables";
+
+  a.card {
+    border: none;
+    background: $secondary;
+
+    div.card-image {
+      background: $secondary;
+    }
+
+    div.content {
+      padding: 5px;
+      background: $secondary;
+
+      div.title-wrapper {
+        display: flex;
+
+        div.date-component {
+          flex: 0;
+          margin-right: 16px;
+        }
+
+        .title {
+          font-weight: 400;
+          line-height: 1em;
+          font-size: 1.6em;
+          padding-bottom: 5px;
+        }
+      }
+    }
+  }
+
+</style>
--- a/js/src/components/Event/EventFullDate.vue
+++ b/js/src/components/Event/EventFullDate.vue
@ -0,0 +1,36 @@
+<template>
+    <translate
+            v-if="!endsOn"
+           :translate-params="{date: formatDate(beginsOn), time: formatTime(beginsOn)}"
+    >The %{ date } at %{ time }</translate>
+    <translate
+            v-else-if="isSameDay()"
+            :translate-params="{date: formatDate(beginsOn), startTime: formatTime(beginsOn), endTime: formatTime(endsOn)}"
+    >The %{ date } from %{ startTime } to %{ endTime }</translate>
+    <translate
+            v-else-if="endsOn"
+            :translate-params="{startDate: formatDate(beginsOn), startTime: formatTime(beginsOn), endDate: formatDate(endsOn), endTime: formatTime(endsOn)}"
+    >From the %{ startDate } at %{ startTime } to the %{ endDate } at %{ endTime }</translate>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class EventFullDate extends Vue {
+  @Prop({ required: true }) beginsOn!: string;
+  @Prop({ required: false }) endsOn!: string;
+
+  formatDate(value) {
+    return value ? new Date(value).toLocaleString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) : null;
+  }
+
+  formatTime(value) {
+    return value ? new Date(value).toLocaleTimeString(undefined, { hour: 'numeric', minute: 'numeric' }) : null;
+  }
+
+  isSameDay() {
+    const sameDay = ((new Date(this.beginsOn)).toDateString()) === ((new Date(this.endsOn)).toDateString());
+    return this.endsOn && sameDay;
+  }
+}
+</script>
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@ -0,0 +1,60 @@
+<template>
+    <footer class="footer">
+        <mobilizon-logo :invert="true" class="logo" />
+        <img src="../assets/footer.png" :alt="$gettext('World map')" />
+        <ul>
+            <li><router-link :to="{ name: 'About'}"><translate>About</translate></router-link></li>
+            <li><router-link :to="{ name: 'Licence'}"><translate>License</translate></router-link></li>
+            <li><router-link :to="{ name: 'Legal'}"><translate>Legal</translate></router-link></li>
+        </ul>
+        <div class="content has-text-centered">
+            <span
+                    v-translate="{
+            date: new Date().getFullYear(),
+            }"
+            >© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks</span>
+        </div>
+    </footer>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import Logo from './Logo.vue';
+
+@Component({
+  components: {
+    'mobilizon-logo': Logo,
+  },
+})
+export default class Footer extends Vue {
+}
+</script>
+<style lang="scss" scoped>
+    @import "../variables.scss";
+
+    footer.footer {
+        color: $secondary;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .logo {
+            flex: 1;
+        }
+
+        div.content {
+            flex: 1;
+        }
+
+        ul li {
+            display: inline-flex;
+            margin: auto 5px;
+
+            a {
+                color: #eee;
+                font-size: 1.5rem;
+                text-decoration: underline;
+                text-decoration-color: $secondary;
+            }
+        }
+    }
+</style>
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@ -7,11 +7,11 @@
    </div>
    <div class="card-content">
      <div class="content">
-        <router-link :to="{ name: 'Group', params:{ uuid: group.uuid } }">
-          <h2 class="title">{{ group.name ? group.name : group.preferredUsername }}</h2>
+        <router-link :to="{ name: RouteName.GROUP, params:{ preferredUsername: group.preferredUsername } }">
+          <h2 class="title">{{ group.displayName() }}</h2>
        </router-link>
      </div>
-      <div v-if="!hideDetails">
+      <div>
        <p>{{ group.summary }}</p>
      </div>
    </div>
@ -20,11 +20,13 @@

 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IGroup } from '../../types/actor.model';
+import { Group } from '@/types/actor.model';
+import { RouteName } from '@/router';

@Component
 export default class GroupCard extends Vue {
-  @Prop({ required: true }) group!: IGroup;
-  @Prop({ default: false }) hideDetails!: boolean;
+  @Prop({ required: true }) group!: Group;
+
+  RouteName = RouteName;
 }
 </script>
--- a/js/src/components/Logo.vue
+++ b/js/src/components/Logo.vue
@ -0,0 +1,32 @@
+<template>
+    <span class="logo" v-bind:class="{ invert }">M<span class="accent">o</span>b<span class="accent">ı</span>l<span class="accent">ı</span>z<span class="accent">o</span>n</span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class Logo extends Vue {
+  @Prop({ type: Boolean, required: false, default: false }) invert!: boolean;
+}