Add translations for frontpage

app/views/static/front.haml

@@ -1,126 +1,87 @@
-- provide(:title, APP_CONFIG['site_name'])
+- provide(:title, APP_CONFIG["site_name"])
 .jumbotron
   .jumbotron__content
     .container
-      = render 'layouts/messages'
+      = render "layouts/messages"
-      %h1= APP_CONFIG['site_name']
+      %h1= APP_CONFIG["site_name"]
-      %p= t 'views.front.subtitle'
+      %p= t(".subtitle")
       %p
         %a.btn.btn-outline-light.btn-lg{ href: url_for(new_user_registration_path) }
-          Register now
+          = t(".register")
       %small
-        Already a member?
+        = t(".already_member")
-        = link_to 'Sign in', new_user_session_path
+        = link_to t("voc.login"), new_user_session_path
 .container
   .row.my-5.my-sm-10
     .col-sm-6.order-12.order-sm-1.text-center.text-sm-right
-      %h2.mb-4 Receive and ask questions
+      %h2.mb-4= t(".questions.header")
-      %p 
+      = t(".questions.body_html", app_name: APP_CONFIG["site_name"])
-        After registering on
-        = APP_CONFIG['site_name']
-        share your unique link to your profile and receive questions in your inbox to answer
-        them right away. 
-      %p 
-        You can of course also use your account to ask anyone else on the site
-        questions, and once you accumulated followers you can send out questions to all of them
-        at once.
     .col-sm-6.order-1.order-sm-12
-      .text-center.text-primary.d-flex.h-100.justify-content-center{ style: 'font-size: 10em'}
+      .text-center.text-primary.d-flex.h-100.justify-content-center{ style: "font-size: 10em"}
         %i.fa.fa-envelope.align-self-center.mb-5.mb-sm-0
 
   .row.my-5.my-sm-10
     .col-sm-6
-      .text-center.text-primary.d-flex.h-100.justify-content-center{ style: 'font-size: 10em'}
+      .text-center.text-primary.d-flex.h-100.justify-content-center{ style: "font-size: 10em"}
         %i.fa.fa-comments.align-self-center.mb-5.mb-sm-0
     .col-sm-6.text-center.text-sm-left
-      %h2.mb-4 Keep the discussion going
+      %h2.mb-4= t(".discussions.header")
-      %p
+      = t(".discussions.body_html", app_name: APP_CONFIG["site_name"])
-        Someone answered your question and maybe not everything is cleared up? Use comments!
-        On
-        = APP_CONFIG['site_name']
-        you can leave comments on answers to keep the discussion going.
-      %p
-        Don't need to say anything, but still like the answer? Leave a smile (our form of likes) on an answer!
 
   .row.my-5.my-sm-10
     .col-sm-6.order-12.order-sm-1.text-center.text-sm-right
-      %h2.mb-4 Share your answers
+      %h2.mb-4= t(".share.header")
-      %p
+      = t(".share.body_html", app_name: APP_CONFIG["site_name"])
-        Want your followers on another platform to see your
-        = APP_CONFIG['site_name']
-        answers? You can configure automatic sharing to your favorite platforms easily.
-      %p.text-muted
-        Not sure if it's a favorite, but at the moment only
-        %b Twitter
-        is supported.
     .col-sm-6.order-1.order-sm-12
-      .text-center.text-primary.d-flex.h-100.justify-content-center{ style: 'font-size: 10em'}
+      .text-center.text-primary.d-flex.h-100.justify-content-center{ style: "font-size: 10em"}
         %i.fa.fa-share.align-self-center.mb-5.mb-sm-0
 
   .row.my-5.my-sm-10
     .col-sm-6
-      .text-center.text-primary.d-flex.h-100.justify-content-center{ style: 'font-size: 10em'}
+      .text-center.text-primary.d-flex.h-100.justify-content-center{ style: "font-size: 10em"}
         %i.fa.fa-paint-brush.align-self-center.mb-5.mb-sm-0
     .col-sm-6.text-center.text-sm-left
-      %h2.mb-4 Customize your experience
+      %h2.mb-4= t(".customize.header")
-      %p
+      = t(".customize.body_html", app_name: APP_CONFIG["site_name"])
-        Make your
-        = APP_CONFIG['site_name']
-        profile your own with the ability to set a custom profile picture and header image.
-      %p
-        Going a step further, you can customize all colors of
-        = APP_CONFIG['site_name']
-        to your own liking. Don't like purple? Make it blue, red or green!
-      %p
-        For a quick demonstration, you can try this out here with a few presets:
       .card
         .card-body
           .row.mx-n2
             .col.px-2
-              %button.btn.btn-block.btn-success.js-theme-button{ data: { theme: 'theme-success' } } Green
+              %button.btn.btn-block.btn-success.js-theme-button{ data: { theme: "theme-success" } }= t(".customize.themes.green")
             .col.px-2
-              %button.btn.btn-block.btn-warning.js-theme-button{ data: { theme: 'theme-warning' } } Orange
+              %button.btn.btn-block.btn-warning.js-theme-button{ data: { theme: "theme-warning" } }= t(".customize.themes.orange")
             .col.px-2
-              %button.btn.btn-block.btn-danger.js-theme-button{ data: { theme: 'theme-danger' } } Red
+              %button.btn.btn-block.btn-danger.js-theme-button{ data: { theme: "theme-danger" } }= t(".customize.themes.red")
             .col.px-2
-              %button.btn.btn-block.btn-default.js-theme-button{ data: { theme: 'reset' } } Reset
+              %button.btn.btn-block.btn-default.js-theme-button{ data: { theme: "reset" } }= t(".customize.themes.reset")
 
 .container.text-center
-  %h2.mb-4 But wait, there's more!
+  %h2.mb-4= t(".more_features")
   .row.my-5
     .col-sm-4
       %h3.mb-3
         %i.fa.fa-fw.fa-globe.text-primary
-        Open Source
+        = t(".open_source.header")
-      %p
+      %p= t(".open_source.body", app_name: APP_CONFIG["site_name"])
-        You heard it right!
-        = APP_CONFIG['site_name']
-        and all of it's core components are open source!
-        Everyone can help and improve the service!
     .col-sm-4
       %h3.mb-3
         %i.fa.fa-fw.fa-eye-slash.text-primary
-        No Ads
+        = t(".no_ads.header")
-      %p
+      %p= t(".no_ads.body")
-        We don't like them ourselves, really. They make websites slow and are
-        (for the most part) annoying. So there's none!
     .col-sm-4
       %h3.mb-3
         %i.fa.fa-fw.fa-user-secret.text-primary
-        Your Data is yours
+        = t(".your_data.header")
-      %p
+      %p= t(".your_data.body", app_name: APP_CONFIG["site_name"])
-        Today the most precious things on the internet is your data.
-        = APP_CONFIG['site_name']
-        doesn't sell any data that is collected. It remains encrypted on our servers!
 
   .card
     .card-body
-      %h2 What are you waiting for?
+      %h2= t(".prompt.header")
-      %p
+      %p= t(".prompt.body")
-        Registering takes less than 5 minutes!
       %p
         %a.btn.btn-primary.btn-lg{ href: url_for(new_user_registration_path) }
-          Register now
+          = t(".register")
+
+= render "shared/links"
 
-= render 'shared/links'
 

config/locales/views.en.yml

@@ -174,6 +174,64 @@ en:
         body: "Raised content basically describes all the different boxes and panels you can see across the site."
         accent:
           example: "Some text on top of a accented area on a raised element!"
+  static:
+    front:
+      subtitle: "Ask questions, give answers and learn more about your friends."
+      register: "Register now"
+      already_member: "Already a member?"
+      more_features: "But wait, there's more!"
+      questions:
+        header: "Receive and ask questions"
+        body_html: |
+          <p>After registering on %{app_name} share your unique link to your profile and 
+          receive questions in your inbox to answer
+          them right away.</p>
+
+          <p>You can of course also use your account to ask anyone else on the site
+          questions, and once you accumulated followers you can send out questions to all of them
+          at once.</p>
+      discussions:
+        header: "Keep the discussion going"
+        body_html: |
+          <p>Someone answered your question and maybe not everything is cleared up? Use comments!
+          On %{app_name} you can leave comments on answers to keep the discussion going.</p>
+
+          <p>Don't need to say anything, but still like the answer? Leave a smile (our form of likes) on an answer!</p>
+      share:
+        header: "Share your answers"
+        body_html: |
+          <p>Want your followers on another platform to see your %{app_name} answers?
+          You can configure automatic sharing to your favorite platforms easily.</p>
+
+          <p class="text-muted">Not sure if it's a favorite, but at the moment only
+          <b>Twitter</b> is supported.</p>
+      customize:
+        header: "Customize your experience"
+        body_html: |
+          <p>Make your %{app_name} profile your own with the ability to set a custom 
+          profile picture and header image.</p>
+
+          <p>Going a step further, you can customize all colors of
+          %{app_name} to your own liking. Don't like purple? Make it blue, red or green!</p>
+
+          <p>For a quick demonstration, you can try this out here with a few presets:</p>
+        themes:
+          green: "Green"
+          orange: "Orange"
+          red: "Red"
+          reset: "Reset"
+      open_source:
+        header: "Open Source"
+        body: "You heard it right! %{app_name} and all of it's core components are open source! Everyone can help and improve the service!"
+      no_ads:
+        header: "No Ads"
+        body: "We don't like them ourselves, really. They make websites slow and are (for the most part) annoying. So there's none!"
+      your_data:
+        header: "Your data is yours"
+        body: "Today the most precious things on the internet is your data. %{app_name} doesn't sell any data that is collected. It remains encrypted on our servers!"
+      prompt:
+        header: "What are you waiting for?"
+        body: "Registering takes less than 5 minutes!"
   tabs:
     settings:
       account: "Account"