Add text below two columns

src/components/InstancesList.vue

@@ -187,7 +187,7 @@
   }
 
   .mascot-loading-block {
-    width: 100%;
+    flex-grow: 1;
 
     .mascot-loading {
       display: none;

src/scss/main.scss

@@ -229,6 +229,15 @@ p > a {
   }
 }
 
+.bottom-two-columns {
+  margin: 50px auto 0;
+  width: 600px;
+
+  & + .bottom-two-columns {
+    margin-top: 10px;
+  }
+}
+
 .bottom-link-wrapper {
   display: flex;
   justify-content: flex-end;

src/views/Home.vue

@@ -63,7 +63,7 @@
         <div>
           <div class="citation">
             <div class="text" v-translate>
-              PeerTube aspire to be a <strong>decentralized and free/libre alternative</strong> to video broadcasting services.
+              PeerTube aspires to be a <strong>decentralized and free/libre alternative</strong> to video broadcasting services.
             </div>
           </div>
 
@@ -82,7 +82,6 @@
         <div class="two-columns">
           <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/>
 
-          <div>
             <div class="citation">
               <div class="left-bar"></div>
 
@@ -91,14 +90,13 @@
                 Rather, it is <strong>a network of inter-connected small videos hosters</strong>.
               </div>
             </div>
+        </div>
 
-            <p v-translate>
+        <p v-translate class="bottom-two-columns">
           Anyone with a modicum of technical skills can host a PeerTube server, aka an instance.
           Each instance hosts its users and their videos.
           In this way, <strong>every instance is created, moderated and maintained independently by various administrators.</strong>
         </p>
-          </div>
-        </div>
 
         <div class="bottom-link-wrapper">
           <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link">
@@ -119,17 +117,17 @@
 
               <div class="text" v-translate>This is just how a <strong>federation</strong> works!</div>
             </div>
+          </div>
 
-            <p v-translate>
+          <img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>
+        </div>
+
+        <p v-translate class="bottom-two-columns">
           And there's more! PeerTube uses Activity Pub, a federating protocol that <strong>allows you to interact with other software</strong>,
           provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected:
           <strong>you can follow a PeerTube user from Mastodon</strong> (the latest videos from the PeerTube account you follow will appear in your feed),
           <strong>and even comment on a PeerTube-hosted video directly from your Mastodon's account.</strong>
         </p>
-          </div>
-
-          <img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>
-        </div>
 
 <!--        TODO: find interesting resource regarding federation-->
 <!--        <div class="bottom-link-wrapper">-->
@@ -162,22 +160,22 @@
                 Peertube is not subject to any corporate monopoly, does not rely on ads and <strong>does not track you.</strong>
               </div>
             </div>
+          </div>
+        </div>
 
-            <p v-translate>
+        <p class="bottom-two-columns" v-translate>
           Most importantly, <strong>you are a person to PeerTube, not a product in need of profiling so as to be stuck in video
           loops.</strong>
           For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end.
         </p>
 
-            <p v-translate>
+        <p class="bottom-two-columns" v-translate>
           All of this is made possible by Peertube's free/libre license (GNU-AGPL).
           Its code is a digital "common", that belongs to everybody, instead of a secret formula that belongs to Google
           (in the case of Youtube) or to Vivendi/Bolloré (Dailymotion).
           This free/libre license <strong>guarantees our fundamental freedoms as users and allows many contributors to offer evolutions
           and new features.</strong>
         </p>
-          </div>
-        </div>
 
 <!--        TODO: find interesting resource regarding free softwares -->
 <!--        <div class="bottom-link-wrapper">-->
@@ -210,8 +208,10 @@
               YouTube has clearly gone astray: its hoster, Google-Alphabet, can enforce its ContentID system (the infamous "Robocopyright")
               or its videos recommendation system, all of which appear to be as obscure as unfair.
             </div>
+          </div>
+        </div>
 
-            <div class="citation">
+        <div class="citation bottom-two-columns">
           <div class="left-bar"></div>
 
           <div class="text" v-translate>
@@ -220,13 +220,11 @@
           </div>
         </div>
 
-            <div v-translate>
+        <div class="bottom-two-columns" v-translate>
           With PeerTube, you get to choose your hosting provider according to their terms of use, such as their disk space limit per user,
           their moderation policy, who they chose to federate with... You are not speaking with a huge tech company, so you can
           talk it out in case of any issue, need, desire...
         </div>
-          </div>
-        </div>
 
         <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="jpt-button discover-instances">
           <translate>Browse/discover PeerTube instances</translate>
@@ -242,7 +240,6 @@
         <div class="two-columns">
           <img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/>
 
-          <div>
           <div class="citation">
             <div class="left-bar"></div>
 
@@ -251,22 +248,21 @@
               <strong>lowering the load of their hosts.</strong>
             </div>
           </div>
+        </div>
 
-            <p v-translate>
+        <p class="bottom-two-columns" v-translate>
           In this way, when you watch a video, your computer contributes to its broadcast.
           If a lot of people are watching the same video at the same time, their browser automatically send smalls pieces of the
           video to the other viewers.
           <strong>The server resources are not over-exploited</strong>: the stream is split, the network optimized.
         </p>
 
-            <p v-translate>
+        <p class="bottom-two-columns" v-translate>
           It might not look like it, but thanks to peer-to-peer broadcasting, popular video makers and their videos are no longer
           forced to be hosted by big companies, whose infrastructure can stand thousands of views at the same time... or to pay for a
           robust but extremely expensive independent video host.
         </p>
       </div>
-        </div>
-      </div>
 
       <div id="your-move">
         <div class="subtitle">