Changed text and icons of index page

resources/lang/de/index.php

@@ -28,13 +28,13 @@ return [
     'focus-creator.focusname' => 'Suchname: ',
 
     'about.1.1' => "Garantierte Privatsphäre",
-    'about.1.2' => 'Mit uns behalten Sie die volle Kontrolle über Ihre Daten.',
-    'about.2.1' => 'Gemeinnütziger Verein',
-    'about.2.2' => 'Wir als SUMA-EV sind unabhängig, weil wir keine kommerziellen Interessen verfolgen!',
-    'about.3.1' => 'Unterstützen & Spenden',
-    'about.3.2' => 'Mit Ihrer Spende unterstützen Sie die Arbeit des SUMA-EV und den Betrieb von MetaGer.',
-    'about.4.1' => 'Machen Sie mit!',
-    'about.4.2' => 'Stärken Sie uns, indem Sie Mitglied im Trägerverein werden.',
+    'about.1.2' => 'Mit uns behalten Sie die volle Kontrolle über Ihre Daten. Wir speichern nicht.',
+    'about.2.1' => 'Vielfältig & Frei',
+    'about.2.2' => 'MetaGer schützt gegen Zensur, indem es Ergebnisse vieler Suchmaschinen kombiniert. Unser Quellcode ist frei lizensiert und offen.',
+    'about.3.1' => '100% Ökostrom',
+    'about.3.2' => 'Alle unsere Dienste sind mit Strom aus regenerativen Energiequellen betrieben. Nachhaltig und sauber.',
+    'about.4.1' => 'Gemeinnütziger Verein',
+    'about.4.2' => 'Unterstützen Sie MetaGer, indem Sie spenden oder Mitglied im gemeinnützigen Trägerverein werden.',
 
     'lang.tooltip' => 'Ergebnissprache wählen',
     'key.placeholder' => 'Mitglieder-Key eingeben',

resources/less/metager/pages/start-page.less

@@ -45,47 +45,58 @@
 
 .startpage #main-content {
     justify-content: center;
-        #about-us {
-            font-size: 1.4em;
-            color: #777;
-            text-align: center;
-            margin-top: 60px;
-            width: 100%;
-            top: 100vh;
-            position: absolute;
-            @media(min-width: 520px){
-                top: inherit;
-                bottom: 100px;
-                position: inherit;
-            }
-            > div {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: center;
-                margin: 24px 0;
-                > a {
-                    &:nth-child(1){
-                        @media(min-width: 520px){
-                            margin-right: 24px;
-                        }
-                    }
-                    @media(max-width: 520px){
-                        &:nth-child(2){
-                            margin-top: 24px;
-                        }
-                    }
-                    display: flex;
-                    flex-direction: column;
-                    cursor: pointer;
-                    color: inherit;
-                    width: 240px;
-                    > div.teaser {
-                        font-size: .7em;
+    #about-us {
+        font-size: 1.4em;
+        color: #777;
+        text-align: center;
+        margin-top: 60px;
+        width: 100%;
+        top: 100vh;
+        position: absolute;
+        @media(min-width: 520px){
+            top: inherit;
+            bottom: 100px;
+            position: inherit;
+        }
+        > div {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin: 24px 0;
+            > a {
+                &:nth-child(1){
+                    @media(min-width: 520px){
+                        margin-right: 24px;
                     }
-                    &:hover > div.teaser {
-                        visibility: inherit;
+                }
+                @media(max-width: 520px){
+                    &:nth-child(2){
+                        margin-top: 24px;
                     }
                 }
+                display: flex;
+                flex-direction: column;
+                cursor: pointer;
+                color: inherit;
+                width: 240px;
+                > div.teaser {
+                    font-size: .7em;
+                    text-align: justify;
+                    hyphens: auto;
+                }
+                &:hover > div.teaser {
+                    visibility: inherit;
+                }
             }
         }
+        #gradient {
+            background-image: linear-gradient( red, yellow);
+            color:transparent;
+            -webkit-background-clip: text;
+            background-clip: text;
+        }
+        #green-leaf {
+            color: green;
+        }
+    }
 }
\ No newline at end of file

resources/views/index.blade.php

@@ -13,7 +13,7 @@
 		<div id="about-us">
 			<div class="m-row">
 				<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "about") }}">
-					<i class="fas fa-user-secret"></i>
+					<i class="fas fa-lock"></i>
 					<span>@lang('index.about.1.1')</span>
 					<div class="teaser">@lang('index.about.1.2')</div>
 				</a>
@@ -22,19 +22,19 @@
 				@else
 				<a href="https://suma-ev.de/en/index.html" target="_blank">
 				@endif
-					<i class="fas fa-heart"></i>
+					<i class="fas fa-heart" id="gradient"></i>
 					<span>@lang('index.about.2.1')</span>
 					<div class="teaser">@lang('index.about.2.2')</div>
 				</a>
 			</div>
 			<div class="m-row">
 				<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "spende") }}">
-					<i class="fas fa-money-bill-wave"></i>
+					<i class="fas fa-leaf" id="green-leaf"></i>
 					<span>@lang('index.about.3.1')</span>
 					<div class="teaser">@lang('index.about.3.2')</div>
 				</a>
 				<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "beitritt") }}">
-					<i class="fas fa-user-friends"></i>
+					<i class="fas fa-hands-helping"></i>
 					<span>@lang('index.about.4.1')</span>
 					<div class="teaser">@lang('index.about.4.2')</div>
 				</a>