refactor: Improvements

* refactor: Update modal * refactor: Update settings page * feat: Add reset credentials * feat: Add .nvmrc and lodash * chore: Remove console.log * chore: nmvrc -> .nvmrc * chore: nmvrc -> .nvmrc
2017-12-13 15:57:01 +01:00
parent af9c453c52
commit b5d69d71e7
46 changed files with 731 additions and 63 deletions
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+8.9.3
--- a/app.js
+++ b/app.js
@@ -45,6 +45,7 @@ app.use(settings)

 // Make data available for our views to consume
 app.use(catchErrors(async function (request, response, next) {
+  response.locals.baseUrl = `${request.protocol}://${request.headers.host}`
  // Get enabled locales from Contentful
  response.locals.locales = [{code: 'en-US', name: 'U.S. English'}]
  response.locals.currentLocale = response.locals.locales[0]
@@ -90,7 +91,6 @@ app.use(catchErrors(async function (request, response, next) {
  if (!response.locals.currentLocale) {
    response.locals.currentLocale = defaultLocale
  }
-
  next()
 }))

--- a/helpers.js
+++ b/helpers.js
@@ -19,6 +19,16 @@ module.exports.formatMetaTitle = (title, localeCode = 'en-US') => {
  return `${title.charAt(0).toUpperCase()}${title.slice(1)} — ${translate('defaultTitle', localeCode)}`
 }

+module.exports.isCustomCredentials = (settings) => {
+  const spaceId = process.env.CONTENTFUL_SPACE_ID
+  const deliveryToken = process.env.CONTENTFUL_DELIVERY_TOKEN
+  const previewToken = process.env.CONTENTFUL_PREVIEW_TOKEN
+
+  return settings.spaceId !== spaceId ||
+    settings.deliveryToken !== deliveryToken ||
+    settings.previewToken !== previewToken
+}
+
 /**
 * Evil users might try to add base64 url data to execute js code
 * so we should purge any potentially harmful data to mitigate risk
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -21,14 +21,29 @@
  "footerDisclaimer": "Powered by Contentful. Diese Website und deren Materialien existieren nur für Demonstrationszwecken. Sie können diese benutzen, um den Inhalt ihres Contentful Kontos anzusehen.",
  "imprintLabel": "Impressum",
  "contactUsLabel": "Kontakt",
-  "modalTitle": "Ein Beispiel für Entwickler, die Contentful benutzen.",
-  "modalIntro": "Dies ist \"The Example App\" in node.js. Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
+  "modalTitle": "Ein Beispiel für Entwickler, die Contentful benutzen",
+  "modalTitleDotnet": "Ein Beispiel für .NET Entwickler, die Contentful benutzen",
+  "modalTitleRuby": "Ein Beispiel für Ruby Entwickler, die Contentful benutzen",
+  "modalTitlePhp": "Ein Beispiel für PHP Entwickler, die Contentful benutzen",
+  "modalTitlePython": "Ein Beispiel für Python Entwickler, die Contentful benutzen",
+  "modalTitleSwift": "Ein Beispiel für Swift Entwickler, die Contentful benutzen",
+  "modalTitleAndroid": "Ein Beispiel für Android Entwickler, die Contentful benutzen",
+  "modalTitleJava": "Ein Beispiel für Java Entwickler, die Contentful benutzen",
+  "modalIntro": "Dies ist \"The Node.js Example App\". Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
+  "modalIntroDotnet": "Dies ist \"The .NET Example App\". Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
+  "modalIntroRuby": "Dies ist \"The Ruby Example App\". Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
+  "modalIntroPhp": "Dies ist \"The PHP Example App\". Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
+  "modalIntroPython": "Dies ist \"The Python Example App\". Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
+  "modalIntroSwift": "Dies ist \"The Swift Example App\". Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
+  "modalIntroAndroid": "Dies ist \"The Android Example App\". Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
+  "modalIntroJava": "Dies ist \"The Java Example App\". Während Sie Ihre eigenen Anwendungen mit Contentful bauen, können Sie dieses Beispiel als Referenz verwenden. Den Quellcode finden Sie auf",
  "modalSpaceIntro": "Den Inhalt dieser Anwendung können Sie selbst bearbeiten. Dafür müssen Sie den \"The Example App\" space in Ihren Contentful Account importieren. Anleitung hierzu gibt es",
+  "modalPlatforms": "Diese App ist auch in den folgenden Plattformen und Sprachen verfügbar:",
  "modalSpaceLinkLabel": "hier",
  "modalCTALabel": "Gut, verstanden.",
-  "editorialFeaturesHint": "Bearbeiten Sie diesen Eintrag in unserer Web App. Sie müssen sich eingelogged haben und Zugang zum Space haben, um diese Funktion nutzen zu können.",
+  "editorialFeaturesHint": "Bearbeiten Sie diesen Eintrag in der Contentful Web App. Sie müssen sich eingelogged haben und Zugang zum Space haben, um diese Funktion nutzen zu können.",
  "draftLabel": "Entwurf",
-  "pendingChangesLabel": "Änderungen vorbehalten",
+  "pendingChangesLabel": "Änderungen verfügbar",
  "lessonModuleErrorTitle": "⚠️ Ungültiges Lektionsmodul",
  "lessonModuleErrorBody": "Konnte den Typ nicht erkennen: ",
  "nextLessonLabel": "Nächste Lektion ansehen",
@@ -64,12 +79,14 @@
  "changesSavedLabel": "Änderungen erfolgreich gespeichert!",
  "errorOcurredTitleLabel": "Fehler aufgetreten",
  "errorOcurredMessageLabel": "Einige Fehler sind aufgetreten. Bitte schauen Sie sich die Fehlermeldungen neben den Feldern an.",
-  "connectedToSpaceLabel": "Verbunden mit Space ",
+  "connectedToSpaceLabel": "Verbundener Space ",
  "spaceIdLabel": "Space ID",
  "spaceIdHelpText": "Die Space Id ist eine eindeutige Identifizierung für Ihren Space.",
  "accessTokenLabel": "Access Token",
-  "contentDeliveryApiHelpText": "Schauen Sie sich veröffentlichten Inhalt mit dieser API an.",
-  "contentPreviewApiHelpText": "Schauen Sie sich unveröffentlichten Inhalt mit dieser API an. (z.B. Inhalt im Zustand “Entwurf”).",
+  "cdaAccessTokenLabel": "Content Delivery API Access Token",
+  "cpaAccessTokenLabel": "Content Preview API Access Token",
+  "contentDeliveryApiHelpText": "Schauen Sie sich veröffentlichten Inhalt mit diesem Token an.",
+  "contentPreviewApiHelpText": "Schauen Sie sich veröffentlichten Inhalt mit diesem Token an. (z.B. Inhalt im Zustand “Entwurf”).",
  "enableEditorialFeaturesLabel": "Editoriale Funktionen aktivieren.",
  "enableEditorialFeaturesHelpText": "Aktivieren, um Bearbeitung und weitere kontextabhängige Helfer zu aktivieren. Damit dies funktioniert, müssen sie Zugang zu dem Space haben.",
  "saveSettingsButtonLabel": "Einstellungen Speichern",
@@ -80,6 +97,22 @@
  "beginnerLabel": "Anfänger",
  "intermediateLabel": "Fortgeschrittener",
  "advancedLabel": "Experte",
-  "editInTheWebAppLabel": "In der web app bearbeiten",
-  "error404Route": "Ein nicht unterstützter HTTP Route"
+  "editInTheWebAppLabel": "In der Contentful Web App bearbeiten",
+  "error404Route": "Eine nicht unterstützte HTTP Route",
+  "currentLocaleLabel": "Deutsch (Deutschland)",
+  "hostedLabel": "Gehostet",
+  "comingSoonLabel": "Bald verfügbar",
+  "credentialSourceLabel": "Ursprung der Zugangsdaten:",
+  "readMoreLabel": "Weiterlesen",
+  "credentialsLocationLabel": "Ihre Zugangsdaten werden derzeit aus",
+  "overwriteCredentialsLabel": "Sie können überschrieben werden, indem Sie das Formular unten oder einen Querystring Parameter verwenden.",
+  "copyLinkLabel": "Einen Link zum Verteilen kopieren",
+  "resetCredentialsLabel": "Zugangsdaten zurücksetzen",
+  "resetAboveLabel": "Sie können auf voreingestellten Zugangsdaten zurücksetzen.",
+  "closeLabel": "Schließen",
+  "overrideConfigLabel": "Diese Konfiguration kann durch das folgende Formular oder durch Verwendung von Querystring Parameter überschrieben werden.",
+  "loadedFromLocalFileLabel": "Geladen von der lokalen Datei",
+  "usingServerCredentialsLabel": "Die Beispielanwendung verwendet derzeit serverseitig gespeicherte Anmeldeinformationen zum Herstellen einer Verbindung mit einem Contentful-Space.",
+  "usingSessionCredentialsLabel": "Die Beispielanwendung verwendet derzeit Anmeldeinformationen von der Anwendungssitzung, um eine Verbindung zu einem Contentful-Space herzustellen.",
+  "applicationCredentialsLabel": "Anmeldeinformationen für die Anwendungssitzung"
 }
--- a/i18n/locales/en-US.json
+++ b/i18n/locales/en-US.json
@@ -21,12 +21,27 @@
  "footerDisclaimer": "Powered by Contentful. This website and the materials found on it are for demo purposes. You can use this to preview the content created on your Contentful account.",
  "imprintLabel": "Imprint",
  "contactUsLabel": "Contact us",
-  "modalTitle": "A reference for developers using Contentful",
-  "modalIntro": "This is \"The Example App\" in node.js. While building your own apps with Contentful, you can reference this app's code, found on",
+  "modalTitle": "A reference for Node.js developers using Contentful",
+  "modalTitleDotnet": "A reference for .NET developers using Contentful",
+  "modalTitleRuby": "A reference for Ruby developers using Contentful",
+  "modalTitlePhp": "A reference for PHP developers using Contentful",
+  "modalTitlePython": "A reference for Python developers using Contentful",
+  "modalTitleSwift": "A reference for Swift developers using Contentful",
+  "modalTitleAndroid": "A reference for Android developers using Contentful",
+  "modalTitleJava": "A reference for Java developers using Contentful",
+  "modalIntro": "This is \"The Node.js Example App\". While building your own apps with Contentful, you can reference this app's code, found on",
+  "modalIntroDotnet": "This is \"The .NET Example App\". While building your own apps with Contentful, you can reference this app's code, found on",
+  "modalIntroRuby": "This is \"The Ruby Example App\". While building your own apps with Contentful, you can reference this app's code, found on",
+  "modalIntroPhp": "This is \"The PHP Example App\". While building your own apps with Contentful, you can reference this app's code, found on",
+  "modalIntroPython": "This is \"The Python Example App\". While building your own apps with Contentful, you can reference this app's code, found on",
+  "modalIntroSwift": "This is \"The Swift Example App\". While building your own apps with Contentful, you can reference this app's code, found on",
+  "modalIntroAndroid": "This is \"The Android Example App\". While building your own apps with Contentful, you can reference this app's code, found on",
+  "modalIntroJava": "This is \"The Java Example App\". While building your own apps with Contentful, you can reference this app's code, found on",
  "modalSpaceIntro": "You can also edit the content in the app by cloning the Contentful space to your own Contentful account by following the instructions",
+  "modalPlatforms": "This app is also available in the following platforms and languages:",
  "modalSpaceLinkLabel": "here",
  "modalCTALabel": "Ok, got it.",
-  "editorialFeaturesHint": "Edit this entry in our web app. You have to be logged in and have access to the connected space to use this feature.",
+  "editorialFeaturesHint": "Edit this entry in the Contentful web app. You have to be logged in and have access to the connected space to use this feature.",
  "draftLabel": "draft",
  "pendingChangesLabel": "pending changes",
  "lessonModuleErrorTitle": "⚠️ Invalid lesson module",
@@ -64,12 +79,14 @@
  "changesSavedLabel": "Changes saved successfully!",
  "errorOcurredTitleLabel": "Error occurred",
  "errorOcurredMessageLabel": "Some errors occurred. Please check the error messages next to the fields.",
-  "connectedToSpaceLabel": "Connected to space",
+  "connectedToSpaceLabel": "Connected space",
  "spaceIdLabel": "Space ID",
  "spaceIdHelpText": "The Space ID is a unique identifier for your space.",
  "accessTokenLabel": "access token",
-  "contentDeliveryApiHelpText": "View published content using this API.",
-  "contentPreviewApiHelpText": "Preview unpublished content using this API (i.e. content with “Draft” status).",
+  "cdaAccessTokenLabel": "Content Delivery API access token",
+  "cpaAccessTokenLabel": "Content Preview API access token",
+  "contentDeliveryApiHelpText": "View published content using this token.",
+  "contentPreviewApiHelpText": "Preview unpublished content using this token (i.e. content with “Draft” status).",
  "enableEditorialFeaturesLabel": "Enable editorial features",
  "enableEditorialFeaturesHelpText": "Enable to display an edit link and other contextual helpers for authors. You need to have access to the connected space to make this work.",
  "saveSettingsButtonLabel": "Save settings",
@@ -80,6 +97,22 @@
  "beginnerLabel": "Beginner",
  "intermediateLabel": "Intermediate",
  "advancedLabel": "Advanced",
-  "editInTheWebAppLabel": "Edit in the web app",
-  "error404Route": "a non supported route"
+  "editInTheWebAppLabel": "Edit in the Contentful Web App",
+  "error404Route": "Verify that you are trying to reach a supported route",
+  "currentLocaleLabel": "English (United States)",
+  "hostedLabel": "Hosted",
+  "comingSoonLabel": "Coming soon",
+  "credentialSourceLabel": "Credentials source",
+  "readMoreLabel": "Read more",
+  "credentialsLocationLabel": "Your credentials are currently loaded from",
+  "overwriteCredentialsLabel": "They can be overwritten by changing them below or using query string parameters.",
+  "copyLinkLabel": "Copy session deeplink to clipboard",
+  "resetCredentialsLabel": "Reset credentials to default",
+  "resetAboveLabel": "You can reset to the default credentials above.",
+  "closeLabel": "Close",
+  "overrideConfigLabel": "This configuration can be overriden through the form below or by using query string parameters.",
+  "loadedFromLocalFileLabel": "Loaded from local file",
+  "usingServerCredentialsLabel": "The example app is currently using server side stored credentials to connect to a Contentful space.",
+  "usingSessionCredentialsLabel": "The example app is currently using application session stored credentials to connect to a Contentful space.",
+  "applicationCredentialsLabel": "Application session credentials"
 }
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
    "heroku-postbuild": "./bin/vendor/deploy.sh"
  },
  "engines": {
-    "node": ">=8.4.0"
+    "node": ">=8.9.3"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
@@ -30,7 +30,7 @@
    "execa": "^0.8.0",
    "express": "~4.14.0",
    "helmet": "^3.9.0",
-    "loadash": "^1.0.0",
+    "lodash": "^4.17.4",
    "marked": "^0.3.6",
    "morgan": "~1.7.0",
    "pug": "~2.0.0-beta6"
--- a/public/fonts/roboto-bold-webfont.woff
+++ b/public/fonts/roboto-bold-webfont.woff
--- a/public/fonts/roboto-bold-webfont.woff2
+++ b/public/fonts/roboto-bold-webfont.woff2
--- a/public/fonts/roboto-bolditalic-webfont.woff
+++ b/public/fonts/roboto-bolditalic-webfont.woff
--- a/public/fonts/roboto-bolditalic-webfont.woff2
+++ b/public/fonts/roboto-bolditalic-webfont.woff2
--- a/public/fonts/roboto-italic-webfont.woff
+++ b/public/fonts/roboto-italic-webfont.woff
--- a/public/fonts/roboto-italic-webfont.woff2
+++ b/public/fonts/roboto-italic-webfont.woff2
--- a/public/fonts/roboto-medium-webfont.woff
+++ b/public/fonts/roboto-medium-webfont.woff
--- a/public/fonts/roboto-medium-webfont.woff2
+++ b/public/fonts/roboto-medium-webfont.woff2
--- a/public/fonts/roboto-mediumitalic-webfont.woff
+++ b/public/fonts/roboto-mediumitalic-webfont.woff
--- a/public/fonts/roboto-mediumitalic-webfont.woff2
+++ b/public/fonts/roboto-mediumitalic-webfont.woff2
--- a/public/fonts/roboto-regular-webfont.woff
+++ b/public/fonts/roboto-regular-webfont.woff
--- a/public/fonts/roboto-regular-webfont.woff2
+++ b/public/fonts/roboto-regular-webfont.woff2
--- a/public/icons/icons.svg
+++ b/public/icons/icons.svg
--- a/public/images/android-icon.svg
+++ b/public/images/android-icon.svg
@@ -0,0 +1,6 @@
+<svg width="256" height="301" viewBox="0 0 256 301" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <path d="M78.389.858a8.824 8.824 0 0 0-4.19 1.089c-4.218 2.338-5.765 7.757-3.428 11.972l9.523 17.196C57.35 45.31 42.147 69.558 42.147 97.233v5.142c-4.407-5.07-10.884-8.271-18.121-8.271C10.766 94.104 0 104.87 0 118.129v74.009c0 13.258 10.767 24.025 24.026 24.025 7.237 0 13.714-3.202 18.12-8.272v10.367c0 13.977 11.437 25.413 25.414 25.413h6.448v32.923c0 13.26 10.767 24.026 24.026 24.026s24.025-10.767 24.025-24.026v-32.923h11.156v32.923c0 13.26 10.767 24.026 24.026 24.026s24.025-10.767 24.025-24.026v-32.923h6.449c13.976 0 25.413-11.436 25.413-25.413v-10.367c4.406 5.07 10.884 8.272 18.121 8.272 13.259 0 24.025-10.767 24.025-24.025v-74.009c0-13.259-10.766-24.025-24.025-24.025-7.237 0-13.715 3.201-18.121 8.271v-4.272-.245c.002-.26 0-.468 0-.625 0-27.67-15.238-51.894-38.174-66.09l9.55-17.224c2.336-4.215.79-9.634-3.428-11.972a8.824 8.824 0 0 0-4.19-1.089c-3.115-.03-6.172 1.612-7.782 4.517l-9.986 18.04c-9.764-3.603-20.388-5.578-31.48-5.578-11.082 0-21.726 1.954-31.482 5.55L86.171 5.375C84.56 2.47 81.504.83 78.389.858z" fill="#FFF"/>
+  <path d="M24.026 100.362c-9.894 0-17.767 7.873-17.767 17.767v74.009c0 9.894 7.873 17.767 17.767 17.767 9.894 0 17.768-7.873 17.768-17.767v-74.009c0-9.894-7.874-17.767-17.768-17.767zm207.224 0c-9.895 0-17.768 7.873-17.768 17.767v74.009c0 9.894 7.873 17.767 17.768 17.767 9.894 0 17.767-7.873 17.767-17.767v-74.009c0-9.894-7.873-17.767-17.767-17.767zM98.034 184.818c-9.894 0-17.768 7.873-17.768 17.768v74.008c0 9.894 7.874 17.767 17.768 17.767 9.894 0 17.767-7.873 17.767-17.767v-74.008c0-9.895-7.873-17.768-17.767-17.768zm59.207 0c-9.895 0-17.768 7.873-17.768 17.768v74.008c0 9.894 7.873 17.767 17.768 17.767 9.894 0 17.767-7.873 17.767-17.767v-74.008c0-9.895-7.873-17.768-17.767-17.768z" fill="#A4C639"/>
+  <path d="M78.443 7.117a2.47 2.47 0 0 0-1.197.326c-1.267.702-1.683 2.158-.98 3.428l12.517 22.611c-24.08 12.53-40.346 36.341-40.378 63.669H206.87c-.033-27.328-16.298-51.14-40.378-63.669l12.516-22.61c.704-1.27.287-2.727-.98-3.429a2.467 2.467 0 0 0-1.197-.326c-.9-.01-1.751.44-2.231 1.306l-12.68 22.855c-10.372-4.6-22.006-7.183-34.283-7.183-12.277 0-23.91 2.582-34.283 7.183L80.674 8.423a2.486 2.486 0 0 0-2.23-1.306zm-30.038 96.292v114.85a19.113 19.113 0 0 0 19.155 19.154h120.155a19.113 19.113 0 0 0 19.155-19.155V103.41H48.405z" fill="#A4C639"/>
+  <path d="M91.068 54.923c-3.617 0-6.612 2.994-6.612 6.611 0 3.618 2.995 6.612 6.612 6.612 3.618 0 6.612-2.994 6.612-6.612 0-3.617-2.994-6.611-6.612-6.611zm73.138 0c-3.618 0-6.612 2.994-6.612 6.611 0 3.618 2.994 6.612 6.612 6.612 3.617 0 6.612-2.994 6.612-6.612 0-3.617-2.995-6.611-6.612-6.611z" fill="#FFF"/>
+</svg>
--- a/public/images/apple.svg
+++ b/public/images/apple.svg
@@ -0,0 +1,3 @@
+<svg width="256" height="315" viewBox="0 0 256 315" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <path d="M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615-.35 1.116-6.599 22.563-21.757 44.716-13.104 19.153-26.705 38.235-48.13 38.63-21.05.388-27.82-12.483-51.888-12.483-24.061 0-31.582 12.088-51.51 12.871-20.68.783-36.428-20.71-49.64-39.793-27-39.033-47.633-110.3-19.928-158.406 13.763-23.89 38.36-39.017 65.056-39.405 20.307-.387 39.475 13.662 51.889 13.662 12.406 0 35.699-16.895 60.186-14.414 10.25.427 39.026 4.14 57.503 31.186-1.49.923-34.335 20.044-33.978 59.822M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199-15.826.636-34.962 10.546-46.314 23.828-10.173 11.763-19.082 30.589-16.678 48.633 17.64 1.365 35.66-8.964 46.64-22.262"/>
+</svg>
--- a/public/images/dotnet.svg
+++ b/public/images/dotnet.svg
@@ -0,0 +1,144 @@
+<svg width="256" height="244" viewBox="0 0 256 244" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <defs>
+    <linearGradient x1="49.997%" y1="-19.516%" x2="49.997%" y2="129.625%" id="a">
+      <stop stop-color="#0994DC" offset="0%"/>
+      <stop stop-color="#66CEF5" offset="35.001%"/>
+      <stop stop-color="#66CEF5" offset="35.001%"/>
+      <stop stop-color="#127BCA" offset="84.616%"/>
+      <stop stop-color="#127BCA" offset="84.616%"/>
+      <stop stop-color="#127BCA" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="50.001%" y1="-19.516%" x2="50.001%" y2="129.624%" id="b">
+      <stop stop-color="#0E76BC" offset="0%"/>
+      <stop stop-color="#36AEE8" offset="36%"/>
+      <stop stop-color="#36AEE8" offset="36%"/>
+      <stop stop-color="#00ADEF" offset="84.616%"/>
+      <stop stop-color="#00ADEF" offset="84.616%"/>
+      <stop stop-color="#00ADEF" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="49.999%" y1="110.922%" x2="49.999%" y2="-6.214%" id="c">
+      <stop stop-color="#1C63B7" offset="0%"/>
+      <stop stop-color="#33BDF2" offset="50%"/>
+      <stop stop-color="#33BDF2" stop-opacity=".42" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="50.001%" y1="-19.515%" x2="50.001%" y2="129.627%" id="d">
+      <stop stop-color="#166AB8" offset="0%"/>
+      <stop stop-color="#36AEE8" offset="39.999%"/>
+      <stop stop-color="#36AEE8" offset="39.999%"/>
+      <stop stop-color="#0798DD" offset="84.616%"/>
+      <stop stop-color="#0798DD" offset="84.616%"/>
+      <stop stop-color="#0798DD" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="49.999%" y1="-19.521%" x2="49.999%" y2="129.627%" id="e">
+      <stop stop-color="#124379" offset="0%"/>
+      <stop stop-color="#1487CB" offset="39%"/>
+      <stop stop-color="#1487CB" offset="39%"/>
+      <stop stop-color="#165197" offset="78.023%"/>
+      <stop stop-color="#165197" offset="78.023%"/>
+      <stop stop-color="#165197" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="0%" y1="50.001%" y2="50.001%" id="f">
+      <stop stop-color="#33BDF2" stop-opacity=".698" offset="0%"/>
+      <stop stop-color="#1DACD8" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="50.01%" y1="94.686%" x2="50.01%" y2="-3.025%" id="g">
+      <stop stop-color="#136AB4" offset="0%"/>
+      <stop stop-color="#59CAF5" stop-opacity=".549" offset="60%"/>
+      <stop stop-color="#59CAF5" stop-opacity=".235" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="-.001%" y1="50%" x2="99.999%" y2="50%" id="h">
+      <stop stop-color="#05A1E6" stop-opacity=".247" offset="0%"/>
+      <stop stop-color="#05A1E6" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="49.998%" y1="124.314%" x2="49.998%" y2="-9.421%" id="i">
+      <stop stop-color="#318ED5" offset="0%"/>
+      <stop stop-color="#38A7E4" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="49.999%" y1="91.2%" x2="49.999%" y2="-76.785%" id="j">
+      <stop stop-color="#05A1E6" offset="0%"/>
+      <stop stop-color="#05A1E6" stop-opacity=".549" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="50%" y1="100.01%" x2="50%" y2=".01%" id="k">
+      <stop stop-color="#1959A6" offset="0%"/>
+      <stop stop-color="#05A1E6" offset="50%"/>
+      <stop stop-color="#05A1E6" offset="50%"/>
+      <stop stop-color="#7EC5EA" offset="91.759%"/>
+      <stop stop-color="#7EC5EA" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="59.804%" y1="94.568%" x2="38.471%" y2="5.755%" id="l">
+      <stop stop-color="#165096" offset="0%"/>
+      <stop stop-color="#0D82CA" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="49.995%" y1="76.998%" x2="49.995%" y2="-3.299%" id="m">
+      <stop stop-color="#05A1E6" offset="0%"/>
+      <stop stop-color="#0495D6" offset="87.363%"/>
+      <stop stop-color="#0495D6" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="65.263%" y1="-4.161%" x2="34.263%" y2="105.844%" id="n">
+      <stop stop-color="#38A7E4" stop-opacity=".329" offset="0%"/>
+      <stop stop-color="#0E88D3" offset="96.153%"/>
+      <stop stop-color="#0E88D3" offset="96.153%"/>
+      <stop stop-color="#0E88D3" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="50.017%" y1="-.296%" x2="50.017%" y2="101.882%" id="o">
+      <stop stop-color="#168CD4" offset="0%"/>
+      <stop stop-color="#1C87CC" offset="50%"/>
+      <stop stop-color="#154B8D" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="16.674%" y1="205.565%" x2="87.813%" y2="-19.836%" id="p">
+      <stop stop-color="#97D6EE" offset="0%"/>
+      <stop stop-color="#55C1EA" offset="70.329%"/>
+      <stop stop-color="#55C1EA" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="6.89%" y1="6.3%" x2="75.783%" y2="116.771%" id="q">
+      <stop stop-color="#7ACCEC" offset="0%"/>
+      <stop stop-color="#3FB7ED" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="49.997%" y1="6.363%" x2="49.997%" y2="127.961%" id="r">
+      <stop stop-color="#1DA7E7" offset="0%"/>
+      <stop stop-color="#37ABE7" stop-opacity="0" offset="100%"/>
+    </linearGradient>
+  </defs>
+  <path d="M214.27 128.006c0-.43-.119-.737-.36-.937-.269-.216-.733-.331-1.379-.331h-.928v2.552h1.12c1.035 0 1.546-.43 1.546-1.284zm1.447 5.32h-1.276l-.814-1.795c-.413-.9-.855-1.35-1.337-1.35h-.687v3.145h-1.052v-7.484h2.107c.936 0 1.64.203 2.122.626.41.364.614.83.614 1.41 0 .516-.167.95-.503 1.31-.327.363-.798.609-1.399.736v.032c.417.098.834.556 1.24 1.382l.985 1.992v-.004zm2.33-3.668c0-1.473-.502-2.716-1.504-3.702-1.006-.985-2.233-1.48-3.68-1.48-1.494 0-2.737.495-3.722 1.489-.986.998-1.477 2.233-1.477 3.693 0 1.493.512 2.74 1.526 3.734 1.002.993 2.229 1.484 3.672 1.484 1.436 0 2.662-.495 3.673-1.501 1.01-.99 1.513-2.233 1.513-3.717zm.708-.033c0 1.653-.568 3.04-1.709 4.155-1.141 1.125-2.54 1.685-4.212 1.685-1.685 0-3.084-.552-4.196-1.636-1.113-1.1-1.665-2.482-1.665-4.159 0-1.64.565-3.018 1.693-4.15 1.129-1.13 2.536-1.693 4.217-1.693 1.648 0 3.03.54 4.15 1.615 1.15 1.104 1.722 2.494 1.722 4.183zM58.8 150.495h-3.628v-20.76c0-1.64.108-3.635.3-5.99h-.08c-.34 1.377-.651 2.375-.925 2.993l-10.543 23.757h-1.767L31.593 126.91c-.297-.659-.609-1.718-.924-3.166h-.078c.11 1.24.173 3.248.173 6.032v20.719h-3.497V119.58h4.785l9.484 21.556c.716 1.624 1.178 2.86 1.403 3.702h.15c.618-1.69 1.108-2.957 1.48-3.792l9.689-21.466h4.54v30.914h.001zM69.957 150.494h-3.525v-22.076h3.525v22.076zm.61-29.99c0 .65-.23 1.194-.683 1.64-.446.446-.998.67-1.644.67-.63 0-1.178-.215-1.628-.645-.45-.434-.67-.986-.67-1.665 0-.638.222-1.182.67-1.623a2.24 2.24 0 0 1 1.628-.655c.646 0 1.198.213 1.644.655.454.441.683.985.683 1.623zM91.988 149.472c-1.693 1.039-3.714 1.554-6.049 1.554-3.165 0-5.713-1.05-7.66-3.149-1.89-2.036-2.842-4.666-2.842-7.889 0-3.615 1.035-6.543 3.12-8.768 2.074-2.229 4.863-3.341 8.372-3.341 1.918 0 3.62.376 5.108 1.12v3.628c-1.648-1.157-3.39-1.73-5.26-1.73-2.249 0-4.077.785-5.496 2.352-1.476 1.603-2.225 3.746-2.225 6.42 0 2.569.683 4.601 2.041 6.102 1.362 1.493 3.174 2.241 5.46 2.241 1.93 0 3.738-.634 5.43-1.897v3.357zM108.85 132c-.622-.479-1.518-.712-2.7-.712-1.435 0-2.642.642-3.619 1.938-1.108 1.448-1.66 3.452-1.66 6.012v11.255h-3.534v-22.076h3.534v4.552h.085c.52-1.612 1.321-2.851 2.392-3.73 1.002-.802 2.135-1.207 3.382-1.207.941 0 1.64.102 2.119.301V132zM128.543 139.496c0-2.826-.638-4.985-1.914-6.466-1.239-1.423-2.97-2.135-5.198-2.135-2.196 0-3.959.72-5.276 2.16-1.394 1.537-2.09 3.709-2.09 6.527 0 2.642.663 4.715 2 6.195 1.33 1.489 3.12 2.233 5.366 2.233 2.323 0 4.102-.756 5.32-2.261 1.195-1.472 1.792-3.554 1.792-6.253m3.623-.125c0 3.518-.993 6.344-2.973 8.462-1.987 2.127-4.662 3.19-8.024 3.19-3.312 0-5.95-1.063-7.884-3.19-1.894-2.049-2.847-4.756-2.847-8.122 0-3.84 1.076-6.801 3.235-8.903 1.996-1.95 4.666-2.932 8.012-2.932 3.292 0 5.864 1.026 7.717 3.059 1.836 2.044 2.764 4.858 2.764 8.436M149.69 144.588c0 1.807-.675 3.304-2.029 4.498-1.476 1.292-3.504 1.939-6.056 1.939-2.09 0-3.922-.438-5.476-1.33v-3.799c1.73 1.407 3.64 2.115 5.738 2.115 2.797 0 4.2-1.03 4.2-3.084 0-.863-.308-1.579-.929-2.13-.621-.565-1.828-1.24-3.623-2.03-1.849-.809-3.166-1.639-3.942-2.502-.933-1.023-1.403-2.351-1.403-3.987 0-1.833.732-3.358 2.18-4.573 1.451-1.218 3.316-1.828 5.606-1.828 1.755 0 3.325.344 4.72 1.035v3.558c-1.456-1.051-3.12-1.575-5.01-1.575-1.17 0-2.11.292-2.81.86-.707.58-1.063 1.32-1.063 2.224 0 .978.298 1.738.888 2.282.523.503 1.635 1.117 3.312 1.832 1.885.79 3.247 1.608 4.077 2.446 1.076 1.06 1.62 2.409 1.62 4.049M171.285 139.496c0-2.826-.638-4.985-1.918-6.466-1.235-1.423-2.97-2.135-5.194-2.135-2.196 0-3.959.72-5.284 2.16-1.39 1.537-2.082 3.709-2.082 6.527 0 2.642.663 4.715 1.988 6.195 1.345 1.489 3.137 2.233 5.378 2.233 2.327 0 4.102-.756 5.32-2.261 1.194-1.472 1.792-3.554 1.792-6.253m3.631-.125c0 3.518-1.002 6.344-2.985 8.462-1.98 2.127-4.654 3.19-8.016 3.19-3.317 0-5.955-1.063-7.889-3.19-1.893-2.049-2.846-4.756-2.846-8.122 0-3.84 1.083-6.801 3.23-8.903 1.996-1.95 4.671-2.932 8.02-2.932 3.293 0 5.86 1.026 7.71 3.059 1.84 2.044 2.776 4.858 2.776 8.436M190.486 120.917c-.695-.385-1.467-.581-2.347-.581-2.474 0-3.701 1.558-3.701 4.679v3.402h5.173v2.994h-5.173v19.082H180.9V131.41h-3.754v-2.994h3.754v-3.578c0-2.43.745-4.336 2.258-5.71 1.296-1.194 2.883-1.787 4.768-1.787 1.093 0 1.943.131 2.56.385v3.19zM204.433 150.271c-.834.479-1.947.716-3.321.716-3.852 0-5.778-2.172-5.778-6.515v-13.058h-3.787v-2.998h3.787v-5.386c1.128-.356 2.302-.744 3.541-1.145v6.531h5.558v2.998h-5.558v12.457c0 1.48.242 2.54.748 3.153.512.634 1.346.945 2.524.945.879 0 1.64-.236 2.286-.712v3.014z"/>
+  <g>
+    <path d="M13.414 236.653c0 1.73-.617 3.226-1.864 4.49-1.244 1.26-2.753 1.894-4.524 1.894-1.73 0-3.202-.634-4.408-1.894-1.207-1.264-1.808-2.76-1.808-4.49 0-1.78.601-3.28 1.808-4.523 1.206-1.248 2.678-1.865 4.408-1.865 1.771 0 3.28.626 4.524 1.89 1.247 1.263 1.864 2.764 1.864 4.498M92.531 241.737H81.007l-41.833-64.604a29.646 29.646 0 0 1-2.536-5.088h-.344c.298 1.73.45 5.443.45 11.132v58.56h-9.5v-81.053h12.33l40.582 63.586c1.616 2.523 2.72 4.33 3.28 5.419h.226c-.377-2.332-.573-6.307-.573-11.918v-57.087h9.443v81.053zM153.436 241.737h-42.958v-81.053h41.093v8.589h-31.6v26.962h29.282v8.593H119.97v28.316h33.465v8.593zM218.595 169.274h-23.347v72.464h-9.497v-72.464H162.36v-8.593h56.236v8.593z"/>
+  </g>
+  <g>
+    <path d="M88.5 20.689c9.164 28.026 12.636 78.022 39.436 78.022 2.04 0 4.102-.2 6.171-.594-24.362-5.68-27.25-55.132-42.115-80.741a123.34 123.34 0 0 0-3.493 3.313" fill="url(#a)" transform="translate(.81)"/>
+    <path d="M91.992 17.376c14.866 25.609 17.753 75.061 42.115 80.741 1.914-.351 3.832-.883 5.754-1.554C117.994 85.85 111.95 37.828 95.067 14.71a105.202 105.202 0 0 0-3.075 2.667" fill="url(#b)" transform="translate(.81)"/>
+    <path d="M114.221 2.145c-2.036 0-4.102.2-6.175.594-5.423 1.022-10.931 3.357-16.485 6.89 1.517 1.497 2.96 3.21 4.318 5.08 5.648-4.687 11.26-8.15 16.85-10.232a37.568 37.568 0 0 1 6.285-1.747 19.364 19.364 0 0 0-4.793-.585" fill="#14559A"/>
+    <path d="M156.931 86.687a98.185 98.185 0 0 0 6.724-5.893c-9.312-27.896-12.645-78.607-39.633-78.607-1.93 0-3.877.18-5.82.54 24.583 6.114 27.732 59.598 38.73 83.96" fill="url(#c)" transform="translate(.81)"/>
+    <path d="M119.013 2.728a19.382 19.382 0 0 0-4.793-.584l10.613.039c-1.93 0-3.877.18-5.82.544" fill="#3092C4"/>
+    <path d="M157.27 92.613c-1.055-1.006-2.057-2.11-3.043-3.288-4.54 3.214-9.062 5.652-13.556 7.238a20.881 20.881 0 0 0 5.054 1.722 21.42 21.42 0 0 0 4.307.426c5.042 0 9.03-.597 12.424-2.225-1.869-1.01-3.583-2.32-5.186-3.873" fill="#1969BC"/>
+    <path d="M111.917 4.481c22.018 11.516 23.932 63.668 41.501 84.844a74.585 74.585 0 0 0 3.51-2.638c-10.998-24.362-14.143-77.85-38.721-83.96a38.06 38.06 0 0 0-6.29 1.754" fill="url(#d)" transform="translate(.81)"/>
+    <path d="M95.067 14.71c16.882 23.118 22.927 71.139 44.794 81.853 4.495-1.586 9.018-4.024 13.557-7.238-17.569-21.176-19.483-73.328-41.501-84.844-5.59 2.078-11.202 5.541-16.85 10.228" fill="url(#e)" transform="translate(.81)"/>
+    <path d="M77.698 20.014c-2.646 5.983-5.349 13.847-8.617 24.112C75.58 34.97 82.058 27.08 88.5 20.69c-.887-2.728-1.84-5.243-2.867-7.485a96.763 96.763 0 0 0-7.934 6.81" fill="url(#f)" transform="translate(.81)"/>
+    <path d="M88.789 11.479a90.096 90.096 0 0 0-2.344 1.726c1.027 2.241 1.976 4.756 2.863 7.484a135.88 135.88 0 0 1 3.492-3.313c-1.247-2.143-2.572-4.122-4.011-5.897" fill="#2B74B1"/>
+    <path d="M91.56 9.63a76.239 76.239 0 0 0-2.772 1.848c1.44 1.775 2.765 3.754 4.016 5.901a93.62 93.62 0 0 1 3.076-2.67c-1.358-1.869-2.802-3.583-4.32-5.08" fill="#125A9E"/>
+    <path d="M240.937.011c-12.453 48.025-38.463 86.598-60.27 96.323h-.04c-.397.18-.79.344-1.178.503-.054.033-.103.037-.144.056-.114.046-.22.082-.335.128-.054.032-.102.043-.151.062-.184.066-.364.121-.544.193-.078.033-.151.053-.225.079a2.734 2.734 0 0 1-.27.088c-.082.032-.168.056-.262.092-.078.032-.16.046-.233.078-.16.046-.306.085-.466.14-.066 0-.127.036-.196.054-.099.032-.21.055-.316.085-.073.032-.134.043-.212.059-.11.032-.233.062-.344.088l-.417.092a8.879 8.879 0 0 0 3.12.548c20.678 0 41.526-37.056 76.023-98.679h-13.545l.005.011z" fill="url(#g)" transform="translate(.81)"/>
+    <path d="M64.591 4.094c.013 0 .03-.032.037-.032.017 0 .042 0 .05-.032h.026c.114-.04.22-.085.335-.128.03 0 .045 0 .066-.032.029 0 .057-.033.086-.037.122-.039.245-.085.36-.127h.019c.274-.082.528-.184.793-.279.038 0 .074-.032.119-.032.11-.036.225-.075.34-.101.053-.033.106-.033.155-.05.118-.035.233-.075.343-.101.05 0 .094-.033.131-.036.38-.105.757-.203 1.137-.294.053 0 .098-.033.155-.036.11-.032.213-.05.332-.066.049-.032.106-.032.163-.049.11-.032.217-.036.336-.062h.077c.23-.047.463-.085.692-.128h.139c.11-.032.208-.036.319-.056.06 0 .122-.032.18-.032.102 0 .204-.033.306-.046.054 0 .106 0 .168-.033.241-.032.49-.045.744-.065a22.972 22.972 0 0 0-2.2-.115c-23.286 0-55.37 43.207-69.822 99.161h2.785c4.625-8.248 8.78-16.051 12.58-23.376 10.121-39.633 30.737-66.661 49.05-73.822" fill="url(#h)" transform="translate(.81)"/>
+    <path d="M78.509 20.014a96.72 96.72 0 0 1 7.934-6.81 37.464 37.464 0 0 0-1.89-3.652c-2.13 2.585-4.077 5.996-6.044 10.462" fill="#0D82CA"/>
+    <path d="M80.422 4.422c1.521 1.276 2.883 3.03 4.13 5.133.393-.483.79-.929 1.203-1.346-1.73-1.615-3.6-2.94-5.628-3.938.082.045.164.082.249.118 0 0 .032.032.046.032" fill="#0D82CA"/>
+    <path d="M15.54 77.915C36.774 36.998 46.834 11.102 64.591 4.092c-18.309 7.166-38.929 34.194-49.05 73.823" fill="url(#i)" transform="translate(.81)"/>
+    <path d="M85.753 8.208c-.413.421-.805.863-1.202 1.346a37.992 37.992 0 0 1 1.894 3.651 90.096 90.096 0 0 1 2.343-1.725 31.882 31.882 0 0 0-3.035-3.272" fill="#127BCA"/>
+    <path d="M25.18 101.107c-.131.033-.262.033-.385.046h-.073c-.111 0-.226.033-.328.033h-.053c-.266.032-.528.032-.781.052h-.082c21.491-.601 31.314-11.361 36.19-26.967 3.705-11.831 6.747-21.798 9.414-30.161-9.002 12.67-18.044 27.773-27.135 44.692-4.384 8.154-11.05 11.56-16.768 12.29" fill="url(#j)" transform="translate(.81)"/>
+    <path d="M25.18 101.099c5.717-.728 12.383-4.13 16.767-12.29 9.091-16.914 18.138-32.021 27.13-44.691 3.272-10.27 5.972-18.13 8.622-24.113-17.925 17.062-35.92 45.432-52.52 81.086" fill="url(#k)" transform="translate(.81)"/>
+    <path d="M16.35 77.916c-3.8 7.324-7.955 15.127-12.58 23.376h8.101A198.004 198.004 0 0 1 16.35 77.92" fill="#05A1E6"/>
+    <path d="M71.454 2.326c-.066 0-.115.032-.172.032-.098.033-.2.033-.303.043-.06 0-.118 0-.18.033-.11.032-.212.035-.319.056-.049 0-.098 0-.139.032-.233.039-.462.082-.69.121h-.078c-.119.033-.226.05-.336.066-.057.032-.114.032-.168.045-.11.033-.22.046-.327.066-.057.032-.102.032-.155.035-.38.092-.757.19-1.137.295-.04 0-.082.032-.131.039-.114.032-.225.065-.344.101-.049.033-.106.033-.155.046a9.466 9.466 0 0 0-.34.101c-.044 0-.081.032-.122.032-.262.098-.52.197-.79.278-.114.036-.237.082-.36.125-.049.032-.093.04-.15.062-.115.036-.23.082-.336.124-.04.033-.082.036-.11.053-17.757 7.01-27.818 32.905-49.051 73.822a197.146 197.146 0 0 0-4.478 23.373h1.137c3.202 0 4.106-.033 7.79-.033H23.581c.253-.032.515-.032.78-.053h.05c.11 0 .22-.032.327-.032h.078c.118 0 .253-.032.384-.046 16.6-35.654 34.594-64.024 52.52-81.086 1.97-4.465 3.913-7.876 6.04-10.457-1.244-2.102-2.606-3.86-4.127-5.136 0 0-.041 0-.044-.033-.087-.035-.168-.078-.254-.12-.086-.047-.16-.083-.25-.128a2.707 2.707 0 0 1-.245-.118c-.106-.033-.192-.079-.286-.121-.078-.033-.147-.066-.225-.098a9.571 9.571 0 0 1-.47-.197c-.07-.032-.135-.05-.2-.075a6.68 6.68 0 0 1-.353-.14c-.057-.033-.122-.04-.188-.063-.167-.056-.331-.115-.486-.167h-.041c-.188-.062-.372-.108-.564-.16-.045-.033-.082-.033-.127-.04-.168-.045-.315-.09-.474-.133-.04 0-.078-.033-.11-.033a16.794 16.794 0 0 0-1.183-.258c-.04 0-.081-.033-.122-.033a6.982 6.982 0 0 0-.511-.082c-.042-.032-.066-.032-.102-.032a13.62 13.62 0 0 0-.606-.079h-.106c-.164-.032-.315-.035-.466-.052-.258.032-.503.046-.745.069" fill="url(#l)" transform="translate(.81)"/>
+    <path d="M192.294 26.598c-4.085 13.087-7.394 23.883-10.273 32.766 11.21-15.426 22.252-34.832 32.767-57.226-12.265 3.852-18.809 12.67-22.494 24.46" fill="url(#m)" transform="translate(.81)"/>
+    <path d="M182.377 95.516c-.572.292-1.145.569-1.71.818 21.807-9.725 47.817-48.298 60.27-96.323h-2.524c-28.61 51.108-37.812 85.322-56.036 95.505" fill="url(#n)" transform="translate(.81)"/>
+    <path d="M168.948 91.223c4.744-5.791 8.609-15.635 13.885-31.859-6.086 8.36-12.212 15.545-18.343 21.406 0 .032 0 .032-.032.052 1.338 4.008 2.806 7.545 4.478 10.4" fill="#079AE1"/>
+    <path d="M168.948 91.223c-1.615 1.97-3.325 3.472-5.226 4.584-.418.242-.839.47-1.268.68a18.375 18.375 0 0 0 6.653 2.097c.36.036.716.069 1.088.095h.066c.167 0 .344 0 .524.032H172.559c.065 0 .133 0 .199-.032.127 0 .262 0 .392-.033h.194c.134 0 .281-.032.425-.046h.033c.042 0 .088-.032.13-.032.15-.033.308-.046.455-.069h.134c.166-.032.339-.053.51-.085h.083c.343-.066.678-.13 1.018-.216-2.814-1.03-5.17-3.46-7.198-6.92" fill="#1969BC"/>
+    <path d="M128.746 98.711c2.041 0 4.102-.2 6.172-.597 1.914-.347 3.832-.88 5.754-1.55a20.92 20.92 0 0 0 5.05 1.722 21.46 21.46 0 0 0 4.311.425h-21.287z" fill="#1E5CB3"/>
+    <path d="M150.033 98.711c5.039 0 9.03-.597 12.42-2.225a18.38 18.38 0 0 0 6.654 2.099c.36.035.716.068 1.088.094h.066c.167 0 .344 0 .524.033h.611-21.377.014z" fill="#1E5CB3"/>
+    <path d="M171.408 98.711h1.166c.07 0 .134 0 .2-.032.127 0 .262 0 .397-.033h.193c.134 0 .281-.032.421-.045h.036c.043 0 .085-.032.128-.032.15-.033.307-.046.454-.07.049 0 .088 0 .14-.032.167-.032.34-.049.512-.081h.082c.343-.066.678-.131 1.018-.216a8.883 8.883 0 0 0 3.12.548l-7.86.032-.007-.039z" fill="#1D60B5"/>
+    <path d="M164.471 80.823v-.033a98.108 98.108 0 0 1-6.723 5.893 77.224 77.224 0 0 1-3.513 2.638c.985 1.178 1.988 2.282 3.043 3.289 1.603 1.553 3.316 2.862 5.185 3.872.426-.21.851-.438 1.264-.679 1.906-1.112 3.615-2.613 5.23-4.584-1.672-2.855-3.14-6.392-4.478-10.4" fill="#175FAB"/>
+    <path d="M230.422.011h-12.701c-.686.033-1.353.056-2.011.098-.311.667-.63 1.334-.937 2.005-10.514 22.394-21.556 41.8-32.766 57.226-5.272 16.223-9.14 26.067-13.884 31.858 2.028 3.46 4.388 5.893 7.193 6.924.082-.033.148-.033.221-.05h.046c.049 0 .102-.032.155-.032.114-.033.237-.053.352-.088.073-.033.134-.036.208-.06.107-.032.217-.055.315-.081.066-.033.131-.043.196-.056.164-.053.311-.092.467-.141.073-.032.151-.06.233-.079.09-.032.18-.055.262-.094.094-.033.188-.05.27-.085.073-.033.15-.053.22-.082.184-.066.364-.121.548-.193.05 0 .099-.046.152-.056.11-.046.225-.082.335-.131.04-.033.09-.036.143-.053.385-.16.781-.324 1.178-.503h.041a33.419 33.419 0 0 0 1.706-.818c18.227-10.183 27.43-44.397 56.04-95.505h-7.991l.01-.004z" fill="url(#o)" transform="translate(.81)"/>
+    <path d="M73.01 2.257c.045 0 .085 0 .13.032.11 0 .22 0 .331.036h.11c.201.032.402.05.606.079.037 0 .07 0 .102.032.168.032.34.06.511.085.038 0 .086.033.127.033.393.078.794.16 1.178.261.037 0 .074.033.106.033.164.039.311.088.475.134.05 0 .086.032.13.04.193.049.373.098.561.16.008 0 .02 0 .041.032.16.049.323.111.491.167.066.032.127.046.188.062.115.05.242.098.352.144.066 0 .13.046.2.07.151.068.31.13.466.195.082.033.151.07.23.099.09.046.183.088.281.12.082.04.172.082.25.118.086.047.167.082.25.128 2.028.998 3.897 2.327 5.627 3.939a18.272 18.272 0 0 1 1.995-1.812C83.965 3.76 79.68 2.23 74.735 2.23c-.572 0-1.145.033-1.726.076" fill="#7DCBEC"/>
+    <path d="M85.753 8.208a31.884 31.884 0 0 1 3.035 3.272A70.897 70.897 0 0 1 91.56 9.63a29.254 29.254 0 0 0-3.816-3.235 17.858 17.858 0 0 0-1.992 1.812" fill="#5EC5ED"/>
+    <path d="M72.198 6.285c.58.049 1.153.07 1.726.07 4.944 0 9.23-1.53 13.013-4.21 3.992 3.15 8.817 4.25 15.52 4.25h-32.46c.75 0 1.481-.045 2.201-.11" fill="url(#p)" transform="matrix(1 0 0 -1 .81 8.541)"/>
+    <path d="M102.457 9.63c-6.703 0-11.528-1.1-15.52-4.25a29.485 29.485 0 0 0 3.812-3.234c5.557 3.533 11.062 5.873 16.49 6.895a33.46 33.46 0 0 0 6.17.589h-10.952z" fill="url(#q)" transform="matrix(1 0 0 -1 .81 11.776)"/>
+    <path d="M182.021 59.372c2.883-8.89 6.184-19.683 10.277-32.774 3.69-11.795 10.22-20.612 22.485-24.46.324-.659.63-1.338.945-2.004-19.994 1.198-29.339 11.369-34.042 26.431-8.224 26.296-13.206 43.342-18.003 54.204 6.127-5.856 12.253-13.046 18.338-21.397" fill="url(#r)" transform="translate(.81)"/>
+    <path d="M212.165 91.706h-2.266v7.043h-.924v-7.043H206.7v-.838h5.464v.838zM221.442 98.747h-.92v-5.292c0-.417.032-.928.075-1.53-.095.36-.173.61-.245.77l-2.683 6.052h-.45l-2.69-6.007c-.08-.167-.158-.438-.243-.814h-.032c.032.317.043.83.043 1.542v5.28h-.884v-7.881h1.22l2.416 5.5c.183.413.298.732.356.945h.036c.16-.434.29-.757.38-.97l2.466-5.475h1.161v7.88h-.006z"/>
+  </g>
+</svg>
--- a/public/images/java.svg
+++ b/public/images/java.svg
@@ -0,0 +1,7 @@
+<svg width="256" height="346" viewBox="0 0 256 346" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <path d="M82.554 267.473s-13.198 7.675 9.393 10.272c27.369 3.122 41.356 2.675 71.517-3.034 0 0 7.93 4.972 19.003 9.279-67.611 28.977-153.019-1.679-99.913-16.517M74.292 229.659s-14.803 10.958 7.805 13.296c29.236 3.016 52.324 3.263 92.276-4.43 0 0 5.526 5.602 14.215 8.666-81.747 23.904-172.798 1.885-114.296-17.532" fill="#5382A1"/>
+  <path d="M143.942 165.515c16.66 19.18-4.377 36.44-4.377 36.44s42.301-21.837 22.874-49.183c-18.144-25.5-32.059-38.172 43.268-81.858 0 0-118.238 29.53-61.765 94.6" fill="#E76F00"/>
+  <path d="M233.364 295.442s9.767 8.047-10.757 14.273c-39.026 11.823-162.432 15.393-196.714.471-12.323-5.36 10.787-12.8 18.056-14.362 7.581-1.644 11.914-1.337 11.914-1.337-13.705-9.655-88.583 18.957-38.034 27.15 137.853 22.356 251.292-10.066 215.535-26.195M88.9 190.48s-62.771 14.91-22.228 20.323c17.118 2.292 51.243 1.774 83.03-.89 25.978-2.19 52.063-6.85 52.063-6.85s-9.16 3.923-15.787 8.448c-63.744 16.765-186.886 8.966-151.435-8.183 29.981-14.492 54.358-12.848 54.358-12.848M201.506 253.422c64.8-33.672 34.839-66.03 13.927-61.67-5.126 1.066-7.411 1.99-7.411 1.99s1.903-2.98 5.537-4.27c41.37-14.545 73.187 42.897-13.355 65.647 0 .001 1.003-.895 1.302-1.697" fill="#5382A1"/>
+  <path d="M162.439.371s35.887 35.9-34.037 91.101c-56.071 44.282-12.786 69.53-.023 98.377-32.73-29.53-56.75-55.526-40.635-79.72C111.395 74.612 176.918 57.393 162.439.37" fill="#E76F00"/>
+  <path d="M95.268 344.665c62.199 3.982 157.712-2.209 159.974-31.64 0 0-4.348 11.158-51.404 20.018-53.088 9.99-118.564 8.824-157.399 2.421.001 0 7.95 6.58 48.83 9.201" fill="#5382A1"/>
+</svg>
--- a/public/images/javascript.svg
+++ b/public/images/javascript.svg
@@ -0,0 +1,4 @@
+<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <path d="M0 0h256v256H0V0z" fill="#F7DF1E"/>
+  <path d="M67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371 7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259-19.245 0-30.416-9.967-36.087-21.996M152.381 211.354l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607 9.969 0 16.325-4.984 16.325-11.858 0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257 0-18.044 13.747-31.792 35.228-31.792 15.294 0 26.292 5.328 34.196 19.247L210.29 147.43c-4.125-7.389-8.591-10.31-15.465-10.31-7.046 0-11.514 4.468-11.514 10.31 0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804 0 21.654-17.012 33.51-39.867 33.51-22.339 0-36.774-10.654-43.819-24.574"/>
+</svg>
--- a/public/images/logo-node.svg
+++ b/public/images/logo-node.svg
--- a/public/images/logo-the-example-app-android.svg
+++ b/public/images/logo-the-example-app-android.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The Android</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/logo-the-example-app-csharp.svg
+++ b/public/images/logo-the-example-app-csharp.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The C#</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/logo-the-example-app-dotnet.svg
+++ b/public/images/logo-the-example-app-dotnet.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The .NET</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/logo-the-example-app-ios.svg
+++ b/public/images/logo-the-example-app-ios.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The iOS</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/logo-the-example-app-java.svg
+++ b/public/images/logo-the-example-app-java.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The Java</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/logo-the-example-app-nodejs.svg
+++ b/public/images/logo-the-example-app-nodejs.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The node.js</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/logo-the-example-app-php.svg
+++ b/public/images/logo-the-example-app-php.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The PHP</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/logo-the-example-app-python.svg
+++ b/public/images/logo-the-example-app-python.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The Python</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/logo-the-example-app-ruby.svg
+++ b/public/images/logo-the-example-app-ruby.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The Ruby</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/logo-the-example-app-swift.svg
+++ b/public/images/logo-the-example-app-swift.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="168" height="43" viewBox="0 0 168 43">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(0 2)">
+      <path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
+      <circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
+      <path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
+    </g>
+    <g font-size="20">
+      <text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
+        <tspan x="0" y="20">example app</tspan>
+      </text>
+      <text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
+        <tspan x="0" y="43">The Swift</tspan>
+      </text>
+    </g>
+  </g>
+</svg>
--- a/public/images/nodejs-icon.svg
+++ b/public/images/nodejs-icon.svg
@@ -0,0 +1,3 @@
+<svg width="256" height="289" viewBox="0 0 256 289" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <path d="M128 288.464c-3.975 0-7.685-1.06-11.13-2.915l-35.247-20.936c-5.3-2.915-2.65-3.975-1.06-4.505 7.155-2.385 8.48-2.915 15.9-7.156.796-.53 1.856-.265 2.65.265l27.032 16.166c1.06.53 2.385.53 3.18 0l105.74-61.217c1.06-.53 1.59-1.59 1.59-2.915V83.08c0-1.325-.53-2.385-1.59-2.915l-105.74-60.953c-1.06-.53-2.385-.53-3.18 0L20.405 80.166c-1.06.53-1.59 1.855-1.59 2.915v122.17c0 1.06.53 2.385 1.59 2.915l28.887 16.695c15.636 7.95 25.44-1.325 25.44-10.6V93.68c0-1.59 1.326-3.18 3.181-3.18h13.516c1.59 0 3.18 1.325 3.18 3.18v120.58c0 20.936-11.396 33.126-31.272 33.126-6.095 0-10.865 0-24.38-6.625l-27.827-15.9C4.24 220.885 0 213.465 0 205.515V83.346C0 75.396 4.24 67.976 11.13 64L116.87 2.783c6.625-3.71 15.635-3.71 22.26 0L244.87 64C251.76 67.975 256 75.395 256 83.346v122.17c0 7.95-4.24 15.37-11.13 19.345L139.13 286.08c-3.445 1.59-7.42 2.385-11.13 2.385zm32.596-84.009c-46.377 0-55.917-21.2-55.917-39.221 0-1.59 1.325-3.18 3.18-3.18h13.78c1.59 0 2.916 1.06 2.916 2.65 2.12 14.045 8.215 20.936 36.306 20.936 22.261 0 31.802-5.035 31.802-16.96 0-6.891-2.65-11.926-37.367-15.372-28.886-2.915-46.907-9.275-46.907-32.33 0-21.467 18.02-34.187 48.232-34.187 33.921 0 50.617 11.66 52.737 37.101 0 .795-.265 1.59-.795 2.385-.53.53-1.325 1.06-2.12 1.06h-13.78c-1.326 0-2.65-1.06-2.916-2.385-3.18-14.575-11.395-19.345-33.126-19.345-24.38 0-27.296 8.48-27.296 14.84 0 7.686 3.445 10.07 36.306 14.31 32.597 4.24 47.967 10.336 47.967 33.127-.265 23.321-19.345 36.571-53.002 36.571z" fill="#539E43"/>
+</svg>
--- a/public/images/php.svg
+++ b/public/images/php.svg
@@ -0,0 +1,17 @@
+<svg width="256" height="135" viewBox="0 0 256 135" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <defs>
+    <radialGradient id="a" cx=".837" cy="-125.811" r="363.057" gradientTransform="matrix(.463 0 0 .463 76.464 81.918)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset=".5" stop-color="#4c6b97"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </radialGradient>
+  </defs>
+  <ellipse fill="url(#a)" cx="128" cy="67.3" rx="128" ry="67.3"/>
+  <ellipse fill="#6181B6" cx="128" cy="67.3" rx="123" ry="62.3"/>
+  <g fill="#FFF">
+    <path d="M152.9 87.5l6.1-31.4c1.4-7.1.2-12.4-3.4-15.7-3.5-3.2-9.5-4.8-18.3-4.8h-10.6l3-15.6c.1-.6 0-1.2-.4-1.7s-.9-.7-1.5-.7h-14.6c-1 0-1.8.7-2 1.6l-6.5 33.3c-.6-3.8-2-7-4.4-9.6-4.3-4.9-11-7.4-20.1-7.4H52.1c-1 0-1.8.7-2 1.6L37 104.7c-.1.6 0 1.2.4 1.7s.9.7 1.5.7h14.7c1 0 1.8-.7 2-1.6l3.2-16.3h10.9c5.7 0 10.6-.6 14.3-1.8 3.9-1.3 7.4-3.4 10.5-6.3 2.5-2.3 4.6-4.9 6.2-7.7l-2.6 13.5c-.1.6 0 1.2.4 1.7s.9.7 1.5.7h14.6c1 0 1.8-.7 2-1.6l7.2-37h10c4.3 0 5.5.8 5.9 1.2.3.3.9 1.5.2 5.2L134.1 87c-.1.6 0 1.2.4 1.7s.9.7 1.5.7h15c.9-.3 1.7-1 1.9-1.9zm-67.6-26c-.9 4.7-2.6 8.1-5.1 10-2.5 1.9-6.6 2.9-12 2.9h-6.5l4.7-24.2h8.4c6.2 0 8.7 1.3 9.7 2.4 1.3 1.6 1.6 4.7.8 8.9zM215.3 42.9c-4.3-4.9-11-7.4-20.1-7.4h-28.3c-1 0-1.8.7-2 1.6l-13.1 67.5c-.1.6 0 1.2.4 1.7s.9.7 1.5.7h14.7c1 0 1.8-.7 2-1.6l3.2-16.3h10.9c5.7 0 10.6-.6 14.3-1.8 3.9-1.3 7.4-3.4 10.5-6.3 2.6-2.4 4.8-5.1 6.4-8 1.6-2.9 2.8-6.1 3.5-9.6 1.7-8.7.4-15.5-3.9-20.5zM200 61.5c-.9 4.7-2.6 8.1-5.1 10-2.5 1.9-6.6 2.9-12 2.9h-6.5l4.7-24.2h8.4c6.2 0 8.7 1.3 9.7 2.4 1.4 1.6 1.7 4.7.8 8.9z"/>
+  </g>
+  <g fill="#000004">
+    <path d="M74.8 48.2c5.6 0 9.3 1 11.2 3.1 1.9 2.1 2.3 5.6 1.3 10.6-1 5.2-3 9-5.9 11.2-2.9 2.2-7.3 3.3-13.2 3.3h-8.9l5.5-28.2h10zM39 105h14.7l3.5-17.9h12.6c5.6 0 10.1-.6 13.7-1.8 3.6-1.2 6.8-3.1 9.8-5.9 2.5-2.3 4.5-4.8 6-7.5s2.6-5.7 3.2-9c1.6-8 .4-14.2-3.5-18.7s-10.1-6.7-18.6-6.7H52.1L39 105zM113.3 19.6h14.6l-3.5 17.9h13c8.2 0 13.8 1.4 16.9 4.3 3.1 2.9 4 7.5 2.8 13.9L151 87.1h-14.8l5.8-29.9c.7-3.4.4-5.7-.7-6.9-1.1-1.2-3.6-1.9-7.3-1.9h-11.7l-7.5 38.7h-14.6l13.1-67.5zM189.5 48.2c5.6 0 9.3 1 11.2 3.1 1.9 2.1 2.3 5.6 1.3 10.6-1 5.2-3 9-5.9 11.2-2.9 2.2-7.3 3.3-13.2 3.3H174l5.5-28.2h10zM153.7 105h14.7l3.5-17.9h12.6c5.6 0 10.1-.6 13.7-1.8 3.6-1.2 6.8-3.1 9.8-5.9 2.5-2.3 4.5-4.8 6-7.5s2.6-5.7 3.2-9c1.6-8 .4-14.2-3.5-18.7s-10.1-6.7-18.6-6.7h-28.3L153.7 105z"/>
+  </g>
+</svg>
--- a/public/images/python.svg
+++ b/public/images/python.svg
@@ -0,0 +1,14 @@
+<svg width="256" height="255" viewBox="0 0 256 255" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <defs>
+    <linearGradient x1="12.959%" y1="12.039%" x2="79.639%" y2="78.201%" id="a">
+      <stop stop-color="#387EB8" offset="0%"/>
+      <stop stop-color="#366994" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="19.128%" y1="20.579%" x2="90.742%" y2="88.429%" id="b">
+      <stop stop-color="#FFE052" offset="0%"/>
+      <stop stop-color="#FFC331" offset="100%"/>
+    </linearGradient>
+  </defs>
+  <path d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072zM92.802 19.66a11.12 11.12 0 0 1 11.13 11.13 11.12 11.12 0 0 1-11.13 11.13 11.12 11.12 0 0 1-11.13-11.13 11.12 11.12 0 0 1 11.13-11.13z" fill="url(#a)"/>
+  <path d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897zm34.114-19.586a11.12 11.12 0 0 1-11.13-11.13 11.12 11.12 0 0 1 11.13-11.131 11.12 11.12 0 0 1 11.13 11.13 11.12 11.12 0 0 1-11.13 11.13z" fill="url(#b)"/>
+</svg>
--- a/public/images/ruby.svg
+++ b/public/images/ruby.svg
@@ -0,0 +1,136 @@
+<svg width="256" height="255" viewBox="0 0 256 255" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <defs>
+    <linearGradient x1="84.75%" y1="111.399%" x2="58.254%" y2="64.584%" id="a">
+      <stop stop-color="#FB7655" offset="0%"/>
+      <stop stop-color="#FB7655" offset="0%"/>
+      <stop stop-color="#E42B1E" offset="41%"/>
+      <stop stop-color="#900" offset="99%"/>
+      <stop stop-color="#900" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="116.651%" y1="60.89%" x2="1.746%" y2="19.288%" id="b">
+      <stop stop-color="#871101" offset="0%"/>
+      <stop stop-color="#871101" offset="0%"/>
+      <stop stop-color="#911209" offset="99%"/>
+      <stop stop-color="#911209" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="75.774%" y1="219.327%" x2="38.978%" y2="7.829%" id="c">
+      <stop stop-color="#871101" offset="0%"/>
+      <stop stop-color="#871101" offset="0%"/>
+      <stop stop-color="#911209" offset="99%"/>
+      <stop stop-color="#911209" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="50.012%" y1="7.234%" x2="66.483%" y2="79.135%" id="d">
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#E57252" offset="23%"/>
+      <stop stop-color="#DE3B20" offset="46%"/>
+      <stop stop-color="#A60003" offset="99%"/>
+      <stop stop-color="#A60003" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="46.174%" y1="16.348%" x2="49.932%" y2="83.047%" id="e">
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#E4714E" offset="23%"/>
+      <stop stop-color="#BE1A0D" offset="56%"/>
+      <stop stop-color="#A80D00" offset="99%"/>
+      <stop stop-color="#A80D00" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="36.965%" y1="15.594%" x2="49.528%" y2="92.478%" id="f">
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#E46342" offset="18%"/>
+      <stop stop-color="#C82410" offset="40%"/>
+      <stop stop-color="#A80D00" offset="99%"/>
+      <stop stop-color="#A80D00" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="13.609%" y1="58.346%" x2="85.764%" y2="-46.717%" id="g">
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#C81F11" offset="54%"/>
+      <stop stop-color="#BF0905" offset="99%"/>
+      <stop stop-color="#BF0905" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="27.624%" y1="21.135%" x2="50.745%" y2="79.056%" id="h">
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#FFF" offset="0%"/>
+      <stop stop-color="#DE4024" offset="31%"/>
+      <stop stop-color="#BF190B" offset="99%"/>
+      <stop stop-color="#BF190B" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="-20.667%" y1="122.282%" x2="104.242%" y2="-6.342%" id="i">
+      <stop stop-color="#BD0012" offset="0%"/>
+      <stop stop-color="#BD0012" offset="0%"/>
+      <stop stop-color="#FFF" offset="7%"/>
+      <stop stop-color="#FFF" offset="17%"/>
+      <stop stop-color="#C82F1C" offset="27%"/>
+      <stop stop-color="#820C01" offset="33%"/>
+      <stop stop-color="#A31601" offset="46%"/>
+      <stop stop-color="#B31301" offset="72%"/>
+      <stop stop-color="#E82609" offset="99%"/>
+      <stop stop-color="#E82609" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="58.792%" y1="65.205%" x2="11.964%" y2="50.128%" id="j">
+      <stop stop-color="#8C0C01" offset="0%"/>
+      <stop stop-color="#8C0C01" offset="0%"/>
+      <stop stop-color="#990C00" offset="54%"/>
+      <stop stop-color="#A80D0E" offset="99%"/>
+      <stop stop-color="#A80D0E" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="79.319%" y1="62.754%" x2="23.088%" y2="17.888%" id="k">
+      <stop stop-color="#7E110B" offset="0%"/>
+      <stop stop-color="#7E110B" offset="0%"/>
+      <stop stop-color="#9E0C00" offset="99%"/>
+      <stop stop-color="#9E0C00" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="92.88%" y1="74.122%" x2="59.841%" y2="39.704%" id="l">
+      <stop stop-color="#79130D" offset="0%"/>
+      <stop stop-color="#79130D" offset="0%"/>
+      <stop stop-color="#9E120B" offset="99%"/>
+      <stop stop-color="#9E120B" offset="100%"/>
+    </linearGradient>
+    <radialGradient cx="32.001%" cy="40.21%" fx="32.001%" fy="40.21%" r="69.573%" id="m">
+      <stop stop-color="#A80D00" offset="0%"/>
+      <stop stop-color="#A80D00" offset="0%"/>
+      <stop stop-color="#7E0E08" offset="99%"/>
+      <stop stop-color="#7E0E08" offset="100%"/>
+    </radialGradient>
+    <radialGradient cx="13.549%" cy="40.86%" fx="13.549%" fy="40.86%" r="88.386%" id="n">
+      <stop stop-color="#A30C00" offset="0%"/>
+      <stop stop-color="#A30C00" offset="0%"/>
+      <stop stop-color="#800E08" offset="99%"/>
+      <stop stop-color="#800E08" offset="100%"/>
+    </radialGradient>
+    <linearGradient x1="56.57%" y1="101.717%" x2="3.105%" y2="11.993%" id="o">
+      <stop stop-color="#8B2114" offset="0%"/>
+      <stop stop-color="#8B2114" offset="0%"/>
+      <stop stop-color="#9E100A" offset="43%"/>
+      <stop stop-color="#B3100C" offset="99%"/>
+      <stop stop-color="#B3100C" offset="100%"/>
+    </linearGradient>
+    <linearGradient x1="30.87%" y1="35.599%" x2="92.471%" y2="100.694%" id="p">
+      <stop stop-color="#B31000" offset="0%"/>
+      <stop stop-color="#B31000" offset="0%"/>
+      <stop stop-color="#910F08" offset="44%"/>
+      <stop stop-color="#791C12" offset="99%"/>
+      <stop stop-color="#791C12" offset="100%"/>
+    </linearGradient>
+  </defs>
+  <path d="M197.467 167.764l-145.52 86.41 188.422-12.787L254.88 51.393l-57.414 116.37z" fill="url(#a)"/>
+  <path d="M240.677 241.257L224.482 129.48l-44.113 58.25 60.308 53.528z" fill="url(#b)"/>
+  <path d="M240.896 241.257l-118.646-9.313-69.674 21.986 188.32-12.673z" fill="url(#c)"/>
+  <path d="M52.744 253.955l29.64-97.1L17.16 170.8l35.583 83.154z" fill="url(#d)"/>
+  <path d="M180.358 188.05L153.085 81.226l-78.047 73.16 105.32 33.666z" fill="url(#e)"/>
+  <path d="M248.693 82.73l-73.777-60.256-20.544 66.418 94.321-6.162z" fill="url(#f)"/>
+  <path d="M214.191.99L170.8 24.97 143.424.669l70.767.322z" fill="url(#g)"/>
+  <path d="M0 203.372l18.177-33.151-14.704-39.494L0 203.372z" fill="url(#h)"/>
+  <path d="M2.496 129.48l14.794 41.963 64.283-14.422 73.39-68.207 20.712-65.787L143.063 0 87.618 20.75c-17.469 16.248-51.366 48.396-52.588 49-1.21.618-22.384 40.639-32.534 59.73z" fill="#FFF"/>
+  <path d="M54.442 54.094c37.86-37.538 86.667-59.716 105.397-40.818 18.72 18.898-1.132 64.823-38.992 102.349-37.86 37.525-86.062 60.925-104.78 42.027-18.73-18.885.515-66.032 38.375-103.558z" fill="url(#i)"/>
+  <path d="M52.744 253.916l29.408-97.409 97.665 31.376c-35.312 33.113-74.587 61.106-127.073 66.033z" fill="url(#j)"/>
+  <path d="M155.092 88.622l25.073 99.313c29.498-31.016 55.972-64.36 68.938-105.603l-94.01 6.29z" fill="url(#k)"/>
+  <path d="M248.847 82.833c10.035-30.282 12.35-73.725-34.966-81.791l-38.825 21.445 73.791 60.346z" fill="url(#l)"/>
+  <path d="M0 202.935c1.39 49.979 37.448 50.724 52.808 51.162l-35.48-82.86L0 202.935z" fill="#9E1209"/>
+  <path d="M155.232 88.777c22.667 13.932 68.35 41.912 69.276 42.426 1.44.81 19.695-30.784 23.838-48.64l-93.114 6.214z" fill="url(#m)"/>
+  <path d="M82.113 156.507l39.313 75.848c23.246-12.607 41.45-27.967 58.121-44.42l-97.434-31.428z" fill="url(#n)"/>
+  <path d="M17.174 171.34l-5.57 66.328c10.51 14.357 24.97 15.605 40.136 14.486-10.973-27.311-32.894-81.92-34.566-80.814z" fill="url(#o)"/>
+  <path d="M174.826 22.654l78.1 10.96c-4.169-17.662-16.969-29.06-38.787-32.623l-39.313 21.663z" fill="url(#p)"/>
+</svg>
--- a/public/images/swift.svg
+++ b/public/images/swift.svg
@@ -0,0 +1,13 @@
+<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-1845.501" y1="1255.639" x2="-1797.134" y2="981.338" gradientTransform="rotate(180 -846.605 623.252)">
+    <stop offset="0" stop-color="#faae42"/>
+    <stop offset="1" stop-color="#ef3e31"/>
+  </linearGradient>
+  <path fill="url(#a)" d="M56.9 0h141.8c6.9 0 13.6 1.1 20.1 3.4 9.4 3.4 17.9 9.4 24.3 17.2 6.5 7.8 10.8 17.4 12.3 27.4.6 3.7.7 7.4.7 11.1V197.4c0 4.4-.2 8.9-1.1 13.2-2 9.9-6.7 19.2-13.5 26.7-6.7 7.5-15.5 13.1-25 16.1-5.8 1.8-11.8 2.6-17.9 2.6-2.7 0-142.1 0-144.2-.1-10.2-.5-20.3-3.8-28.8-9.5-8.3-5.6-15.1-13.4-19.5-22.4-3.8-7.7-5.7-16.3-5.7-24.9V56.9C.2 48.4 2 40 5.7 32.4c4.3-9 11-16.9 19.3-22.5C33.5 4.1 43.5.7 53.7.2c1-.2 2.1-.2 3.2-.2z"/>
+  <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="130.612" y1="4.136" x2="95.213" y2="204.893">
+    <stop offset="0" stop-color="#e39f3a"/>
+    <stop offset="1" stop-color="#d33929"/>
+  </linearGradient>
+  <path fill="url(#b)" d="M216 209.4c-.9-1.4-1.9-2.8-3-4.1-2.5-3-5.4-5.6-8.6-7.8-4-2.7-8.7-4.4-13.5-4.6-3.4-.2-6.8.4-10 1.6-3.2 1.1-6.3 2.7-9.3 4.3-3.5 1.8-7 3.6-10.7 5.1-4.4 1.8-9 3.2-13.7 4.2-5.9 1.1-11.9 1.5-17.8 1.4-10.7-.2-21.4-1.8-31.6-4.8-9-2.7-17.6-6.4-25.7-11.1-7.1-4.1-13.7-8.8-19.9-14.1-5.1-4.4-9.8-9.1-14.2-14.1-3-3.5-5.9-7.2-8.6-11-1.1-1.5-2.1-3.1-3-4.7L0 121.2V56.7C0 25.4 25.3 0 56.6 0h50.5l37.4 38c84.4 57.4 57.1 120.7 57.1 120.7s24 27 14.4 50.7z"/>
+  <path fill="#FFF" d="M144.7 38c84.4 57.4 57.1 120.7 57.1 120.7s24 27.1 14.3 50.8c0 0-9.9-16.6-26.5-16.6-16 0-25.4 16.6-57.6 16.6-71.7 0-105.6-59.9-105.6-59.9C91 192.1 135.1 162 135.1 162c-29.1-16.9-91-97.7-91-97.7 53.9 45.9 77.2 58 77.2 58-13.9-11.5-52.9-67.7-52.9-67.7 31.2 31.6 93.2 75.7 93.2 75.7C179.2 81.5 144.7 38 144.7 38z"/>
+</svg>
--- a/public/scripts/index.js
+++ b/public/scripts/index.js
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
--- a/routes/landingPage.js
+++ b/routes/landingPage.js
@@ -31,6 +31,5 @@ module.exports.getLandingPage = async (request, response, next) => {
  if (shouldAttachEntryState(response)) {
    landingPage = await attachEntryState(landingPage)
  }
-  console.log(landingPage.fields.contentModules[0].fields.course.fields.image)
  response.render('landingPage', { title: pathname, landingPage })
 }
--- a/routes/settings.js
+++ b/routes/settings.js
@@ -59,7 +59,14 @@ module.exports.getSettings = async (request, response, next) => {
 module.exports.postSettings = async (request, response, next) => {
  const currentLocale = response.locals.currentLocale
  let errorList = []
-  const { spaceId, deliveryToken, previewToken, editorialFeatures, qs } = request.body
+  let { spaceId, deliveryToken, previewToken, editorialFeatures } = request.body
+
+  if (request.query.reset) {
+    spaceId = process.env.CONTENTFUL_SPACE_ID
+    deliveryToken = process.env.CONTENTFUL_DELIVERY_TOKEN
+    previewToken = process.env.CONTENTFUL_PREVIEW_TOKEN
+  }
+
  const settings = {
    spaceId,
    deliveryToken,
@@ -169,7 +176,6 @@ module.exports.postSettings = async (request, response, next) => {
    settings,
    errors,
    hasErrors: errorList.length > 0,
-    success: errorList.length === 0,
-    queryString: qs
+    success: errorList.length === 0
  })
 }
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -77,7 +77,7 @@ html
            .header__lower.layout-centered
              .header__logo
                a.header__logo-link(href=`/${queryString}`)
-                  img(src='/images/logo-node.svg' alt=translate('logoAlt', currentLocale.code))
+                  img(src='/images/logo-the-example-app-nodejs.svg' alt=translate('logoAlt', currentLocale.code))
              nav.header__navigation.main-navigation
                ul
                  li
@@ -126,24 +126,69 @@ html
                  a(href='https://github.com/contentful' target='_blank' rel='noopener')
                    svg
                      use(xlink:href='/icons/icons.svg#github')
-    section.modal#about-this-modal
+section.modal#about-this-modal
  .modal__overlay.close
  .modal__wrapper
-        h1.modal__title #{translate('modalTitle', currentLocale.code)}
+    h1.modal__title= translate("modalTitleDotnet", currentLocale.code)
    .modal__content
-          p #{translate('modalIntro', currentLocale.code)}&nbsp;
-            a(href='https://github.com/contentful/the-example-app.nodejs' target='_blank' rel='noopener') GitHub
+      p
+        | #{translate("modalIntro", currentLocale.code)}&nbsp;
+        a(href="https://github.com/contentful/the-example-app.nodejs" target="_blank" rel="noopener") Github
        | .
      p
-            | #{translate('modalSpaceIntro', currentLocale.code)}&nbsp;
-            a(href='https://github.com/contentful/content-models/blob/master/the-example-app/README.md ' target='_blank' rel='noopener')=translate('modalSpaceLinkLabel', currentLocale.code)
+        | #{translate("modalSpaceIntro", currentLocale.code)}&nbsp;
+        a(href="https://github.com/contentful/content-models/blob/master/the-example-app/README.md " target="_blank" rel="noopener") #{translate("modalSpaceLinkLabel", currentLocale.code)}
        | .
+      p= translate("modalPlatforms", currentLocale.code)
+      ul
+        li
+          img(src='/images/nodejs-icon.svg')
+          br
+          a(href="https://the-example-app-nodejs.herokuapp.com/" rel="noopener" target="_blank")= translate("hostedLabel", currentLocale.code)
+          br
+          a(href="https://github.com/contentful/the-example-app.nodejs" rel="noopener" target="_blank") GitHub
+        li
+          img(src='/images/dotnet.svg')
+          br
+          a(href="https://the-example-app-csharp.herokuapp.com/" rel="noopener" target="_blank")= translate("hostedLabel", currentLocale.code)
+          br
+          a(href="https://github.com/contentful/the-example-app.csharp" rel="noopener" target="_blank") GitHub
+        li
+          img(src='/images/ruby.svg')
+          br
+          a(href="https://the-example-app-rb.herokuapp.com/" rel="noopener" target="_blank")= translate("hostedLabel", currentLocale.code)
+          br
+          a(href="https://github.com/contentful/the-example-app.rb" rel="noopener" target="_blank") GitHub
+        li
+          img(src='/images/php.svg')
+          br
+          a(href="https://the-example-app-php.herokuapp.com/" rel="noopener" target="_blank")= translate("hostedLabel", currentLocale.code)
+          br
+          a(href="https://github.com/contentful/the-example-app.php" rel="noopener" target="_blank") GitHub
+        li
+          img(src='/images/python.svg')
+          br
+          a(href="https://the-example-app-py.herokuapp.com/" rel="noopener" target="_blank")= translate("hostedLabel", currentLocale.code)
+          br
+          a(href="https://github.com/contentful/the-example-app.py" rel="noopener" target="_blank") GitHub
+        li
+          img.inactive(src='/images/swift.svg')
+          br
+          = translate("comingSoonLabel", currentLocale.code)
+        li
+          img.inactive(src='/images/java.svg')
+          br
+          = translate("comingSoonLabel", currentLocale.code)
+        li
+          img.inactive(src='/images/android-icon.svg')
+          br
+          = translate("comingSoonLabel", currentLocale.code)
    .modal__cta-wrapper
-          a(href='#').modal__cta.close #{translate('modalCTALabel', currentLocale.code)}
+      a.modal__cta.close(href="#")= translate("modalCTALabel", currentLocale.code)
    .modal__close-wrapper
-          a(href='#').modal__close-button.close
+      a.modal__close-button.close(href="#")
        svg
-              use(xlink:href='/icons/icons.svg#cross')
+          use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/icons.svg#cross")

    script(src='/scripts/index.js')

--- a/views/settings.pug
+++ b/views/settings.pug
@@ -35,11 +35,41 @@ block content
        svg.status-block__icon.status-block__icon--info
          use(xlink:href='/icons/icons.svg#info')
        .status-block__content
-          .status-block__message #{translate('connectedToSpaceLabel', currentLocale.code)} “#{space.name}”
+          .status-block__message 
+            if !helpers.isCustomCredentials(settings)
+              p 
+                em #{translate('usingServerCredentialsLabel', currentLocale.code)}
+              p 
+                strong #{translate('connectedToSpaceLabel', currentLocale.code)}:
+                br
+                span #{space.name} (#{settings.spaceId})
+              p 
+                strong #{translate('credentialSourceLabel', currentLocale.code)}:
+                br
+                span #{translate('loadedFromLocalFileLabel', currentLocale.code)} 
+                 a(href="https://github.com/contentful/the-example-app.nodejs/blob/master/variables.env" target="_blank" rel="noopener") variable.env
+              p
+                em #{translate('overrideConfigLabel', currentLocale.code)}
+            else
+              p 
+                em #{translate('usingSessionCredentialsLabel', currentLocale.code)}
+              p
+                strong #{translate('connectedToSpaceLabel', currentLocale.code)}:
+                br
+                span #{space.name} (#{settings.spaceId})

-    form(action=`/settings` method="POST" class="form")
+              form(action='/settings?reset=true' method='POST')
+                p 
+                  strong #{translate('applicationCredentialsLabel', currentLocale.code)}:
+                  br
+                  button(type="submit") #{translate('resetCredentialsLabel', currentLocale.code)}
+                  br
+                  a(href=`${baseUrl}/?space_id=${settings.spaceId}&preview_token=${settings.previewToken}&delivery_token=${settings.deliveryToken}&api=${currentApi.id}${settings.editorialFeatures ? '&enable_editorial_features' : ''}` class="status-block__sharelink") #{translate('copyLinkLabel', currentLocale.code)}
+              p
+                em #{translate('overrideConfigLabel', currentLocale.code)}
+
+    form(action=`/settings${queryString}` method="POST" class="form")
      .form-item
-        input(type="hidden" name="qs" value=queryString)
        label(for="input-space-id") #{translate('spaceIdLabel', currentLocale.code)}
        input(type="text" name="spaceId" id="input-space-id" value=settings.spaceId)
        if 'spaceId' in errors