From f017a533bb3b697e8f10c66789a64d83b906eedb Mon Sep 17 00:00:00 2001
From: xcexec <hattori.hansa@protonmail.com>
Date: Fri, 18 Oct 2024 15:17:02 +0200
Subject: [PATCH] added fomo background w/ text-alignment; changed darkmode
 navbar to black

---
 src/App.vue                                   |  2 +-
 src/assets/logo.svg                           |  2 +-
 src/components/Home/Introduction.vue          | 61 +++++++++++++++++++
 .../Home/UnloggedIntroduction.story.vue       |  6 +-
 src/components/Home/UnloggedIntroduction.vue  | 34 -----------
 src/components/NavBar.vue                     |  2 +-
 src/views/HomeView.vue                        | 16 ++---
 7 files changed, 75 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Home/Introduction.vue
 delete mode 100644 src/components/Home/UnloggedIntroduction.vue

diff --git a/src/App.vue b/src/App.vue
index 33604c491..bb24539da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,7 @@
     </div>
     <ErrorComponent v-if="error" :error="error" />
 
-    <main id="main" class="px-2 py-4" v-else>
+    <main id="main" v-else>
       <router-view></router-view>
     </main>
     <mobilizon-footer />
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index 321481769..ae601197b 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1,5 +1,5 @@
 <svg 
-  class="fill-current text-white dark:text-black"
+  class="fill-current text-white"
   :class="{ 'bg-gray-900': invert }"
   xmlns="http://www.w3.org/2000/svg" 
   viewBox="0 0 248.16 46.78"
diff --git a/src/components/Home/Introduction.vue b/src/components/Home/Introduction.vue
new file mode 100644
index 000000000..38aa81f0a
--- /dev/null
+++ b/src/components/Home/Introduction.vue
@@ -0,0 +1,61 @@
+<template>
+  <!-- Main section that contains both the background and text -->
+  <section class="relative bg-section-graphic">
+    <!-- Background overlay for better text readability -->
+    <div class="absolute inset-0 bg-black opacity-10 z-0"></div>
+
+    <!-- Text content aligned with the grid and over the background -->
+    <div class="container mx-auto px-2 my-3">
+      <p class="heading dark:text-black mb-2">{{ config.slogan }}</p>
+      <p class="subheading dark:text-black mb-2">{{ config.description }}</p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { IConfig } from "@/types/config.model";
+
+defineProps<{
+  config: Pick<IConfig, "name" | "description" | "slogan" | "registrationsOpen">;
+}>();
+</script>
+
+<style scoped>
+/* Background section with the graphic */
+.bg-section-graphic {
+  background-image: url('/img/pics/homepage_background.png'); /* Background image */
+  background-size: cover; /* Ensure it covers the section */
+  background-position: center; /* Center the background image */
+  background-repeat: no-repeat; /* Prevent tiling */
+  position: relative;
+  padding: 40px 0; /* Adjust padding to give vertical space */
+  width: 100%;
+  min-height: 150px; /* Minimum height for visual consistency */
+}
+
+/* Remove flexbox alignment, let the container align with the grid */
+.container {
+  display: block; /* Ensure block-level alignment */
+}
+
+/* Heading and Subheading Styles */
+.heading {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.subheading {
+  font-size: 1.25rem;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+  .heading {
+    font-size: 1.5rem;
+  }
+
+  .subheading {
+    font-size: 1rem;
+  }
+}
+</style>
diff --git a/src/components/Home/UnloggedIntroduction.story.vue b/src/components/Home/UnloggedIntroduction.story.vue
index 4958f4e22..5dc3f2273 100644
--- a/src/components/Home/UnloggedIntroduction.story.vue
+++ b/src/components/Home/UnloggedIntroduction.story.vue
@@ -1,16 +1,16 @@
 <template>
   <Story>
     <Variant :title="'Open'">
-      <UnloggedIntroduction :config="config" />
+      <Introduction :config="config" />
     </Variant>
     <Variant :title="'Closed'">
-      <UnloggedIntroduction :config="configClosed" />
+      <Introduction :config="configClosed" />
     </Variant>
   </Story>
 </template>
 <script lang="ts" setup>
 import { reactive } from "vue";
-import UnloggedIntroduction from "./UnloggedIntroduction.vue";
+import Introduction from "./Introduction.vue";
 
 const config = reactive({
   name: "My instance name",
diff --git a/src/components/Home/UnloggedIntroduction.vue b/src/components/Home/UnloggedIntroduction.vue
deleted file mode 100644
index c22f37e6d..000000000
--- a/src/components/Home/UnloggedIntroduction.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <section class="container mx-auto px-2 my-3">
-    <p class="dark:text-white mb-2">{{ config.slogan }}</p>
-    <!-- We don't invite to find other instances yet -->
-    <!-- <p v-if="!config.registrationsOpen">
-              {{ t("This instance isn't opened to registrations, but you can register on other instances.") }}
-          </p>-->
-    <div class="flex flex-wrap gap-2 items-center">
-      <o-button
-        variant="primary"
-        tag="router-link"
-        :to="{ name: RouteName.REGISTER }"
-        v-if="config.registrationsOpen"
-        >{{ t("Create an account") }}</o-button
-      >
-      <!-- We don't invite to find other instances yet -->
-      <!-- <o-button v-else variant="link" tag="a" href="https://joinmastodon.org">{{ t('Find an instance') }}</o-button> -->
-    </div>
-  </section>
-</template>
-<script lang="ts" setup>
-import { IConfig } from "@/types/config.model";
-import RouteName from "@/router/name";
-import { useI18n } from "vue-i18n";
-
-defineProps<{
-  config: Pick<
-    IConfig,
-    "name" | "description" | "slogan" | "registrationsOpen"
-  >;
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-</script>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 9a95b3515..e16ae958b 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="bg-black border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-gray-50"
+    class="bg-black border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-black"
     id="navbar"
   >
     <div
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 918a95ff7..945a38590 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- Unlogged introduction -->
-  <unlogged-introduction :config="config" v-if="config && !isLoggedIn" />
+  <introduction :config="config" />
   <!-- Search fields -->
   <!-- Categories preview
   <categories-preview /> -->
   <!-- Welcome back -->
-  <section
+  <!-- <section
     class="container mx-auto"
     v-if="currentActor?.id && (welcomeBack || newRegisteredUser)"
   >
@@ -19,9 +19,9 @@
         username: displayName(currentActor),
       })
     }}</o-notification>
-  </section>
+  </section> -->
   <!-- Your upcoming events -->
-  <section v-if="canShowMyUpcomingEvents" class="container mx-auto">
+  <!-- <section v-if="canShowMyUpcomingEvents" class="container mx-auto">
     <h2 class="dark:text-white font-bold">
       {{ t("Your upcoming events") }}
     </h2>
@@ -79,9 +79,9 @@
         >{{ t("View everything") }} >></router-link
       >
     </span>
-  </section>
+  </section> -->
   <!-- Events from your followed groups -->
-  <section
+  <!-- <section
     class="relative pt-10 px-2 container mx-auto px-2"
     v-if="canShowFollowedGroupEvents"
   >
@@ -109,7 +109,7 @@
         >{{ t("View everything") }} >></router-link
       >
     </span>
-  </section>
+  </section> -->
   <!-- Recent events
   <CloseEvents
     @doGeoLoc="performGeoLocation()"
@@ -192,7 +192,7 @@ import {
 } from "@/graphql/location";
 import { LocationType } from "@/types/user-location.model";
 import CategoriesPreview from "@/components/Home/CategoriesPreview.vue";
-import UnloggedIntroduction from "@/components/Home/UnloggedIntroduction.vue";
+import Introduction from "@/components/Home/Introduction.vue";
 import SearchFields from "@/components/Home/SearchFields.vue";
 import { useHead } from "@unhead/vue";
 import { geoHashToCoords } from "@/utils/location";