#260 reorganise homepage

components/Header.vue

@@ -141,7 +141,7 @@
                         link: '/' + this.config.pronouns.route,
                         icon: 'tags',
                         text: this.$t('pronouns.header'),
-                        textLong: this.$t('pronouns.headerLong'),
+                        textLong: this.$t('pronouns.headerLong').replace( /(<([^>]+)>)/ig, ''),
                         extra: ['all', '/' + this.config.pronouns.any, this.config.pronouns.avoiding ? '/' + this.config.pronouns.avoiding : null],
                     });
                 }

locale/en/translations.suml

@@ -5,6 +5,9 @@ home:
     link: 'Homepage'
     header: 'Pronouns'
     headerLong: 'List of pronouns'
+    welcome: 'Welcome to pronouns.page!'
+    intro: >
+        We're creating a source of information about nonbinary and gender neutral language.
     why: 'What''s the deal with pronouns?'
     about:
         - >

locale/pl/translations.suml

@@ -1,10 +1,13 @@
 title: 'zaimki.pl'
-description: 'Udostępniamy tutaj linki do przykładów użycia zaimków i innych form płciowych – nie tylko normatywnych „on” i „ona”, lecz także form niebinarnych.'
+description: 'Kompendium wiedzy o języku niebinarnym i neutralnym płciowo.'
 
 home:
     link: 'Strona główna'
     header: 'Zaimki'
     headerLong: 'Lista zaimków'
+    welcome: 'Witamy na stronie zaimki.pl!'
+    intro: >
+        Tworzymy tu wszechstronne kompendium wiedzy o języku niebinarnym i neutralnym płciowo.
     why: 'Skąd potrzeba niebinarnych zaimków?'
     about:
         - >
@@ -69,7 +72,7 @@ home:
 
 pronouns:
     header: 'Zaimki'
-    headerLong: 'Niebinarne zaimki i inne formy'
+    headerLong: 'Niebinarne zaimki<br/> i inne formy'
     examples: 'Przykłady użycia w zdaniu'
     plural: 'Liczba mnoga'
     intro: 'Moje zaimki to'
@@ -1064,11 +1067,6 @@ profile:
         jokingly: 'Żartobliwie'
         meh: 'Spoko'
         no: 'Nie'
-    banner: >
-        Naszej strony możesz też użyć do stworzenia wizytówki, {/@andrea=takiej jak ta},
-        zawierającej Twoje imiona, zaimki, flagi pride'owe, lubiane słowa, itp.
-        Potem możesz do niej podlinkować w swoim bio czy stopce maila.
-        Wystarczy, że założysz konto {/konto=tutaj}.
     bannerButton: 'Stwórz wizytówkę'
     card:
         link: 'Obrazek'

routes/homepage.vue

@@ -1,28 +1,44 @@
 <template>
     <div>
-        <h2>
+        <template v-if="$te('home.welcome')">
-            <Icon v="tags"/>
+            <section>
-            <T>home.why</T>
+                <h2>
-        </h2>
+                    <T>home.welcome</T>
+                </h2>
+
+                <p>
+                    <T>home.intro</T>
+                </p>
+
+                <div class="row">
+                    <div v-for="{icon, header, route} in mainLinks" class="col-12 col-lg my-4 text-center">
+                        <nuxt-link :to="`/${route}`">
+                            <p>
+                                <Icon :v="icon" size="3"/>
+                            </p>
+                            <p class="h4">
+                                <Spelling :text="$t(header)"/>
+                            </p>
+                        </nuxt-link>
+                    </div>
+                </div>
+
+                <CalendarBanner link/>
+            </section>
+
+            <section>
+                <Share/>
+            </section>
+
+            <Separator icon="info-circle"/>
+        </template>
 
         <section>
+            <h2>
+                <T>home.why</T>
+            </h2>
+
             <T>home.about</T>
-
-            <ModeSwitch class="mt-3"/>
-
-            <div v-if="!user && $t('profile.banner', {}, false)" class="alert alert-info">
-                <nuxt-link :to="'/' + config.user.route" class="float-end btn btn-primary m-2 me-0">
-                    <Icon v="id-card"/>
-                    <Spelling :text="$t('profile.bannerButton')"/>
-                </nuxt-link>
-                <LinkedText :text="$t('profile.banner')"/>
-            </div>
-        </section>
-
-        <CalendarBanner link/>
-
-        <section>
-            <Share/>
         </section>
 
         <Separator icon="fist-raised"/>
@@ -40,6 +56,10 @@
                     <Socials/>
                 </div>
             </div>
+        </section>
+
+        <Separator icon="people-carry"/>
+        <section>
             <Support/>
         </section>
     </div>
@@ -54,5 +74,31 @@
                 'user',
             ]),
         },
+        data() {
+            const mainLinks = [];
+            if (this.config.pronouns.enabled) {
+                mainLinks.push({
+                    icon: 'tags',
+                    header: 'pronouns.headerLong',
+                    route: this.config.pronouns.route,
+                })
+            }
+            if (this.config.nouns.enabled) {
+                mainLinks.push({
+                    icon: 'book',
+                    header: 'nouns.headerLong',
+                    route: this.config.nouns.route,
+                })
+            }
+            if (this.config.user.enabled) {
+                mainLinks.push({
+                    icon: 'id-card',
+                    header: 'profile.bannerButton',
+                    route: this.config.user.route,
+                })
+            }
+
+            return { mainLinks };
+        }
     }
 </script>