simplified base structure:

startpage shows up to 161 events sorted by date,
"explore" and "view everything" renamed to "filter"

js/src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <template>
   <b-navbar
     id="navbar"
-    type="is-bleuvert"
+    type="is-secondary"
     wrapper-class="container"
     :active.sync="mobileNavbarActive"
   >
@@ -16,7 +16,7 @@
     </template>
     <template slot="start">
       <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
-        $t("Explore")
+        $t("Filter")
       }}</b-navbar-item>
       <b-navbar-item
         v-if="currentActor.id && currentUser.isLoggedIn"
@@ -344,7 +344,7 @@ nav {
     }
 
     &.is-active {
-      background: #1d1d1d;
+      background: $secondary;
     }
 
     span.icon.is-medium {

js/src/views/Home.vue

@@ -31,7 +31,7 @@
               v-if="config.registrationsOpen"
               >{{ $t("Create an account") }}</b-button
             >
-            <!-- We don't invite to find other instances yet -->
+            <!-- We don't invite to find other instances yet chnage for commit-->
             <!-- <b-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</b-button> -->
             <b-button
               type="is-text"
@@ -51,18 +51,26 @@
     >
       <section class="events-recent">
         <h2 class="title">
-          {{ $t("Last published events") }}
+          {{ $t("Upcoming events") }}
         </h2>
         <p>
           <i18n tag="span" path="On {instance} and other federated instances">
             <b slot="instance">{{ config.name }}</b>
           </i18n>
         </p>
-        <div v-if="this.events.total > 0">
+        <div v-if="events.elements.length > 0">
-          <multi-card :events="events.elements.slice(0, 6)" />
+          <multi-card class="my-4" :events="events.elements" />
+          <div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
+            <b-pagination
+              :total="events.total"
+              v-model="featuredEventPage"
+              :per-page="EVENT_PAGE_LIMIT"
+            >
+            </b-pagination>
+          </div>
           <span class="view-all">
             <router-link :to="{ name: RouteName.SEARCH }"
-              >{{ $t("View everything") }} >></router-link
+              >{{ $t("Filter") }} >></router-link
             >
           </span>
         </div>
@@ -71,6 +79,104 @@
         }}</b-message>
       </section>
     </div>
+    <div id="picture" v-if="config && (!currentUser.id || !currentActor.id)">
+      <div class="picture-container">
+        <picture>
+          <source
+            media="(max-width: 799px)"
+            srcset="/img/pics/homepage-480w.webp"
+            type="image/webp"
+          />
+          <source
+            media="(max-width: 799px)"
+            srcset="/img/pics/homepage-480w.jpg"
+            type="image/jpeg"
+          />
+
+          <source
+            media="(max-width: 1024px)"
+            srcset="/img/pics/homepage-1024w.webp"
+            type="image/webp"
+          />
+          <source
+            media="(max-width: 1024px)"
+            srcset="/img/pics/homepage-1024w.jpg"
+            type="image/jpeg"
+          />
+
+          <source
+            media="(max-width: 1920px)"
+            srcset="/img/pics/homepage-1920w.webp"
+            type="image/webp"
+          />
+          <source
+            media="(max-width: 1920px)"
+            srcset="/img/pics/homepage-1920w.jpg"
+            type="image/jpeg"
+          />
+
+          <source
+            media="(min-width: 1921px)"
+            srcset="/img/pics/homepage.webp"
+            type="image/webp"
+          />
+          <source
+            media="(min-width: 1921px)"
+            srcset="/img/pics/homepage.jpg"
+            type="image/jpeg"
+          />
+
+          <img
+            src="/img/pics/homepage-1024w.jpg"
+            width="3840"
+            height="2719"
+            alt=""
+            loading="lazy"
+          />
+        </picture>
+      </div>
+      <div class="container section">
+        <div class="columns">
+          <div class="column">
+            <h3 class="title">{{ $t("A practical tool") }}</h3>
+            <p
+              v-html="
+                $t(
+                  'Mobilizon is a tool that helps you <b>find, create and organise events</b>.'
+                )
+              "
+            />
+          </div>
+          <div class="column">
+            <h3 class="title">{{ $t("An ethical alternative") }}</h3>
+            <p
+              v-html="
+                $t(
+                  'Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.'
+                )
+              "
+            />
+          </div>
+          <div class="column">
+            <h3 class="title">{{ $t("A federated software") }}</h3>
+            <p
+              v-html="
+                $t(
+                  'Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.'
+                )
+              "
+            />
+          </div>
+        </div>
+        <div class="buttons">
+          <a
+            class="button is-primary is-large"
+            href="https://joinmobilizon.org"
+            >{{ $t("Learn more about Mobilizon") }}</a
+          >
+        </div>
+      </div>
+    </div>
     <div class="container section" v-if="config && loggedUserSettings">
       <section v-if="currentActor.id && (welcomeBack || newRegisteredUser)">
         <b-message type="is-info" v-if="welcomeBack">{{
@@ -191,7 +297,7 @@
       />
       <section class="events-recent">
         <h2 class="title">
-          {{ $t("Last published events") }}
+          {{ $t("Upcoming events") }}
         </h2>
         <p>
           <i18n tag="span" path="On {instance} and other federated instances">
@@ -200,10 +306,10 @@
         </p>
 
         <div v-if="events.total > 0">
-          <multi-card :events="events.elements.slice(0, 8)" />
+          <multi-card :events="events.elements" />
           <span class="view-all">
             <router-link :to="{ name: RouteName.SEARCH }"
-              >{{ $t("View everything") }} >></router-link
+              >{{ $t("Filter") }} >></router-link
             >
           </span>
         </div>
@@ -247,13 +353,16 @@ import { IConfig } from "../types/config.model";
 import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
 import Subtitle from "../components/Utils/Subtitle.vue";
 
+const EVENT_PAGE_LIMIT = 99;
+
 @Component({
   apollo: {
     events: {
       query: FETCH_EVENTS,
       variables: {
-        orderBy: EventSortField.INSERTED_AT,
+        orderBy: EventSortField.BEGINS_ON,
-        direction: SortDirection.DESC,
+        direction: SortDirection.ASC,
+        limit: EVENT_PAGE_LIMIT,
       },
     },
     currentActor: {
@@ -565,6 +674,7 @@ section.hero {
     left: 0;
     width: 100%;
     height: 100%;
+    opacity: 0.3;
     z-index: -1;
     background: url("../../public/img/pics/homepage_background-1024w.png");
     background-size: cover;

js/src/views/Search.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="section container">
-    <h1 class="title">{{ $t("Explore") }}</h1>
+    <!-- <h1 class="title">{{ $t("Explore") }}</h1> -->
     <section v-if="tag">
       <i18n path="Events tagged with {tag}">
         <b-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag }) }}</b-tag>
@@ -125,7 +125,7 @@
       v-if="!canSearchEvents && !canSearchGroups"
     >
       <b-loading :active.sync="$apollo.loading"></b-loading>
-      <h2 class="title">{{ $t("Featured events") }}</h2>
+      <!-- <h2 class="title">{{ $t("Featured events") }}</h2> -->
       <div v-if="events.elements.length > 0">
         <multi-card class="my-4" :events="events.elements" />
         <div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
@@ -255,9 +255,9 @@ interface ISearchTimeOption {
   end?: Date | null;
 }
 
-const EVENT_PAGE_LIMIT = 12;
+const EVENT_PAGE_LIMIT = 99;
 
-const GROUP_PAGE_LIMIT = 12;
+const GROUP_PAGE_LIMIT = 99;
 
 const DEFAULT_RADIUS = 25; // value to set if radius is null but location set