From 3c3f0109054377551575ec169d3a855d7d93dcef Mon Sep 17 00:00:00 2001
From: Alexander Trost <galexrt@googlemail.com>
Date: Sun, 2 Jun 2024 17:42:31 +0200
Subject: [PATCH] fix: tweak landing page

Signed-off-by: Alexander Trost <galexrt@googlemail.com>
---
 .vscode/settings.json           |   6 +-
 components/ImagePlaceholder.vue |  23 ++++
 nuxt.config.ts                  |   4 +-
 pages/index.vue                 | 225 ++++++++++++++++++++------------
 4 files changed, 173 insertions(+), 85 deletions(-)
 create mode 100644 components/ImagePlaceholder.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 96945792c..e8b3cdfd2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,9 @@
 {
     "i18n-ally.localesPaths": [
         "lang"
-    ]
+    ],
+    "[vue]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+    }
 }
\ No newline at end of file
diff --git a/components/ImagePlaceholder.vue b/components/ImagePlaceholder.vue
new file mode 100644
index 000000000..f5cf7a42e
--- /dev/null
+++ b/components/ImagePlaceholder.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+withDefaults(
+    defineProps<{
+        src?: string;
+    }>(),
+    {
+        src: "/images/screenshots/overview.png",
+    }
+);
+</script>
+
+<template>
+    <div
+        class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4"
+    >
+        <div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden">
+            <img
+                class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10"
+                :src="src"
+            />
+        </div>
+    </div>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7b1e5c722..3c7d4f63f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,7 +19,7 @@ export default defineNuxtConfig({
     hooks: {
         // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
         'components:extend': (components) => {
-            const globals = components.filter((c) => ['UButton', 'UIcon'].includes(c.pascalName));
+            const globals = components.filter((c) => ['UButton', 'UIcon', 'ImagePlaceholder'].includes(c.pascalName));
 
             globals.forEach((c) => (c.global = true));
         },
@@ -99,4 +99,4 @@ export default defineNuxtConfig({
         storage: 'localStorage',
         debug: false,
     },
-});
\ No newline at end of file
+});
diff --git a/pages/index.vue b/pages/index.vue
index 47f843fc8..937d2ae16 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,132 +1,193 @@
 <script lang="ts" setup>
-import '~/assets/css/herofull-pattern.css';
+import "~/assets/css/herofull-pattern.css";
 
-const { data: page } = await useAsyncData('index', () => queryContent('/').findOne());
+const { data: page } = await useAsyncData("index", () =>
+    queryContent("/").findOne()
+);
 
 useHead({
-    title: 'common.home',
+    title: "common.home",
 });
 definePageMeta({
-    title: 'common.home',
-    layout: 'landing',
+    title: "common.home",
+    layout: "landing",
     requiresAuth: false,
     showCookieOptions: true,
 });
 
 const { t } = useI18n();
 
-const appVersion = __APP_VERSION__.split('-')[0];
+const appVersion = __APP_VERSION__.split("-")[0];
 
-const links = [{ label: t('common.docs'), icon: 'i-mdi-book-open-variant-outline', size: 'lg', to: '/getting-started' }];
+const links = [
+    {
+        label: t("common.docs"),
+        icon: "i-mdi-book-open-variant-outline",
+        size: "lg",
+        to: "/getting-started",
+    },
+];
 
 const features = {
-    title: t('docs.features.title'),
+    title: t("docs.features.title"),
+    description: undefined,
     links: [
         {
-            label: t('docs.features.links.explore.label'),
-            trailingIcon: 'i-mdi-arrow-right',
-            color: 'gray',
-            to: '/getting-started',
-            size: 'lg',
+            label: t("docs.features.links.explore.label"),
+            trailingIcon: "i-mdi-arrow-right",
+            color: "gray",
+            to: "/getting-started",
+            size: "lg",
         },
     ],
     items: [
         {
-            title: t('docs.features.items.citizens.title'),
-            description: t('docs.features.items.citizens.description'),
-            icon: 'i-mdi-account-multiple-outline',
-            to: '/user-guides/citizens',
+            title: t("docs.features.items.citizens.title"),
+            description: t("docs.features.items.citizens.description"),
+            icon: "i-mdi-account-multiple-outline",
+            to: "/user-guides/citizens",
         },
         {
-            title: t('docs.features.items.vehicles.title'),
-            description: t('docs.features.items.vehicles.description'),
-            icon: 'i-mdi-car-outline',
-            to: '/user-guides/vehicles',
+            title: t("docs.features.items.vehicles.title"),
+            description: t("docs.features.items.vehicles.description"),
+            icon: "i-mdi-car-outline",
+            to: "/user-guides/vehicles",
         },
         {
-            title: t('docs.features.items.documents.title'),
-            description: t('docs.features.items.documents.description'),
-            icon: 'i-mdi-file-document-box-multiple-outline',
-            to: '/user-guides/documents',
+            title: t("docs.features.items.documents.title"),
+            description: t("docs.features.items.documents.description"),
+            icon: "i-mdi-file-document-box-multiple-outline",
+            to: "/user-guides/documents",
         },
         {
-            title: t('docs.features.items.jobs.title'),
-            description: t('docs.features.items.jobs.description'),
-            icon: 'i-mdi-briefcase-outline',
-            to: '/user-guides/jobs',
+            title: t("docs.features.items.jobs.title"),
+            description: t("docs.features.items.jobs.description"),
+            icon: "i-mdi-briefcase-outline",
+            to: "/user-guides/jobs",
         },
         {
-            title: t('docs.features.items.calendar.title'),
-            description: t('docs.features.items.calendar.description'),
-            icon: 'i-mdi-calendar-outline',
-            to: '/user-guides/calendar',
+            title: t("docs.features.items.calendar.title"),
+            description: t("docs.features.items.calendar.description"),
+            icon: "i-mdi-calendar-outline",
+            to: "/user-guides/calendar",
         },
         {
-            title: t('docs.features.items.livemap.title'),
-            description: t('docs.features.items.livemap.description'),
-            icon: 'i-mdi-map-outline',
-            to: '/user-guides/livemap',
+            title: t("docs.features.items.livemap.title"),
+            description: t("docs.features.items.livemap.description"),
+            icon: "i-mdi-map-outline",
+            to: "/user-guides/livemap",
         },
         {
-            title: t('docs.features.items.centrum.title'),
-            description: t('docs.features.items.centrum.description'),
-            icon: 'i-mdi-car-emergency',
-            to: '/user-guides/centrum',
+            title: t("docs.features.items.centrum.title"),
+            description: t("docs.features.items.centrum.description"),
+            icon: "i-mdi-car-emergency",
+            to: "/user-guides/centrum",
         },
         {
-            title: t('docs.features.items.i18n.title'),
-            description: t('docs.features.items.i18n.description'),
-            icon: 'i-mdi-language',
-            to: '/user-guides/i18n',
+            title: t("docs.features.items.i18n.title"),
+            description: t("docs.features.items.i18n.description"),
+            icon: "i-mdi-language",
+            to: "/user-guides/i18n",
         },
         {
-            title: t('docs.features.items.nuxt3_ui.title'),
-            description: t('docs.features.items.nuxt3_ui.description'),
-            icon: 'i-simple-icons-nuxtdotjs',
-            to: 'https://nuxt.com',
+            title: t("docs.features.items.nuxt3_ui.title"),
+            description: t("docs.features.items.nuxt3_ui.description"),
+            icon: "i-simple-icons-nuxtdotjs",
+            to: "https://nuxt.com",
         },
         {
-            title: t('docs.features.items.open_source.title'),
-            description: t('docs.features.items.open_source.description'),
-            icon: 'i-simple-icons-git',
-            to: 'https://github.com/fivenet-app/fivenet',
+            title: t("docs.features.items.open_source.title"),
+            description: t("docs.features.items.open_source.description"),
+            icon: "i-simple-icons-git",
+            to: "https://github.com/fivenet-app/fivenet",
         },
     ],
 };
+
+const cta = {
+    title: t("docs.features.links.explore.label"),
+};
 </script>
 
 <template>
-    <div class="hero flex flex-col">
-        <div class="w-full flex-1 bg-black/50">
-            <ULandingHero :title="$t('pages.index.welcome')" :description="$t('pages.index.subtext')" :links="links">
-                <template #headline>
-                    <UButton
-                        color="gray"
-                        :to="`https://github.com/fivenet-app/fivenet/releases/tag/${appVersion}`"
-                        :external="true"
-                        :label="$t('pages.index.whats_new_in', { version: appVersion })"
-                        trailing-icon="i-mdi-arrow-right"
-                        size="xs"
-                        class="rounded-full"
+    <div>
+        <ULandingHero
+            :title="$t('pages.index.welcome')"
+            :description="$t('pages.index.subtext')"
+            :links="links"
+        >
+            <div
+                class="absolute inset-0 z-[-1] [mask-image:radial-gradient(100%_100%_at_top,white,transparent)] hero"
+            />
+
+            <template #headline>
+                <UButton
+                    color="gray"
+                    :to="`https://github.com/fivenet-app/fivenet/releases/tag/${appVersion}`"
+                    :external="true"
+                    :label="
+                        $t('pages.index.whats_new_in', {
+                            version: appVersion,
+                        })
+                    "
+                    trailing-icon="i-mdi-arrow-right"
+                    size="xs"
+                    class="rounded-full"
+                />
+            </template>
+        </ULandingHero>
+
+        <ULandingSection class="!pt-0">
+            <ImagePlaceholder />
+        </ULandingSection>
+
+        <ULandingSection
+            :title="features.title"
+            :description="features.description ?? undefined"
+            class="!pt-0"
+        >
+            <UPageGrid>
+                <ULandingCard
+                    v-for="(item, index) of features.items"
+                    :key="index"
+                    v-bind="item"
+                />
+            </UPageGrid>
+        </ULandingSection>
+
+        <ULandingSection :title="$t('pages.index.logos')" class="!pt-0">
+            <ULandingLogos align="center">
+                <ULink
+                    v-for="icon in page.logos.icons"
+                    :key="icon"
+                    variant="link"
+                >
+                    <img
+                        :src="`/images/communities/${icon.image}`"
+                        :alt="icon.alt"
+                        class="h-12 w-12 flex-shrink-0 text-gray-900 lg:h-20 lg:w-20 dark:text-white"
                     />
-                </template>
+                </ULink>
+            </ULandingLogos>
+        </ULandingSection>
 
-                <ULandingLogos :title="$t('pages.index.logos')" align="center">
-                    <ULink v-for="icon in page.logos.icons" :key="icon" variant="link">
-                        <img
-                            :src="`/images/communities/${icon.image}`"
-                            :alt="icon.alt"
-                            class="h-12 w-12 flex-shrink-0 text-gray-900 lg:h-20 lg:w-20 dark:text-white"
-                        />
-                    </ULink>
-                </ULandingLogos>
-            </ULandingHero>
+        <ULandingSection
+            v-for="(section, index) in page.sections"
+            :key="index"
+            :title="section.title"
+            :description="section.description"
+            :align="section.align"
+            :features="section.features"
+        >
+            <ImagePlaceholder />
+        </ULandingSection>
 
-            <ULandingSection :title="features.title" :links="features.links">
-                <UPageGrid>
-                    <ULandingCard v-for="(item, index) of features.items" :key="index" v-bind="item" />
-                </UPageGrid>
-            </ULandingSection>
-        </div>
+        <ULandingSection>
+            <ULandingCTA
+                :title="cta.title"
+                :links="features.links"
+                class="bg-gray-100/50 dark:bg-gray-800/50"
+            />
+        </ULandingSection>
     </div>
 </template>