website / Improve navigation and home hero section

alpsify · Nov 11, 2024 · 348dfe1 · 348dfe1
1 parent 5ead3b5
commit 348dfe1
Show file tree

Hide file tree

Showing 17 changed files with 128 additions and 54 deletions.
diff --git a/.moon/hooks/pre-commit.sh b/.moon/hooks/pre-commit.sh
@@ -6,4 +6,5 @@ set -eo pipefail
 
 moon :format-fix --affected
 moon :lint-fix --affected
+git add -u
 
diff --git a/.moon/workspace.yml b/.moon/workspace.yml
@@ -30,5 +30,6 @@ vcs:
     pre-commit:
       - 'moon :format-fix --affected'
       - 'moon :lint-fix --affected'
+      - 'git add -u'
   manager: git
   syncHooks: true
diff --git a/eslint.config.js b/eslint.config.js
@@ -79,6 +79,7 @@ export default [
       'yml/sort-sequence-values': ['error', { order: { type: 'asc' }, pathPattern: '^dependsOn$' }],
       'yml/no-empty-sequence-entry': ['error'],
       'tailwindcss/no-custom-classname': 'off',
+      'tailwindcss/classnames-order': 'off',
     },
   },
 ];
diff --git a/libs/ui-components/hero/LychenHero.vue b/libs/ui-components/hero/LychenHero.vue
@@ -8,7 +8,7 @@
       v-if="overlay"
       :class="cn('absolute top-0 left-0 size-full', overlayClass)"
     ></div>
-    <div :class="cn('container py-8 min-h-dvh md:min-h-[80dvh] z-10', props.class)">
+    <div :class="cn('container py-8 z-10', props.class)">
       <slot></slot>
     </div>
   </header>

diff --git a/libs/ui-components/logo/LychenLogo.vue b/libs/ui-components/logo/LychenLogo.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="flex flex-row items-stretch justify-start gap-2">
-    <div class="h-full">
+    <!--<div class="h-full">
       <img
         src="/logos/lychen/logo-lychen.webp"
         class="h-full w-auto"
       />
-    </div>
+    </div>-->
 
     <div class="flex flex-col items-start justify-center gap-0 antialiased">
-      <p class="font-lexend text-xl font-bold leading-5">Lychen</p>
-      <small class="text-surface-container-on/60 text-sm">by Alpsify</small>
+      <p class="font-lexend text-xl font-bold leading-5 tracking-wide antialiased">lychen</p>
+      <!--<small class="text-surface-container-on/60 text-sm">by Alpsify</small>-->
     </div>
   </div>
 </template>
diff --git a/libs/ui-components/navigation-menu/LychenNavigationMenuViewport.vue b/libs/ui-components/navigation-menu/LychenNavigationMenuViewport.vue
@@ -20,12 +20,12 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <div class="z-60 absolute left-0 top-full flex justify-center">
+  <div class="z-60 absolute left-50 top-full flex justify-center">
     <NavigationMenuViewport
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-3 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-lg shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+          'origin-top-center relative mt-3 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-3xl shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
           props.class,
           'bg-surface-container text-surface-container-on',
         )

diff --git a/libs/ui-components/navigation-menu/index.ts b/libs/ui-components/navigation-menu/index.ts
@@ -8,5 +8,5 @@ export { default as LychenNavigationMenuList } from './LychenNavigationMenuList.
 export { default as LychenNavigationMenuTrigger } from './LychenNavigationMenuTrigger.vue';
 
 export const navigationMenuTriggerStyle = cva(
-  'bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[active]:bg-accent/50 data-[state=open]:bg-accent/50 group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50',
+  'bg-background hover:bg-tertiary-container hover:text-tertiary-foreground focus:bg-tertiary focus:text-tertiary-foreground data-[active]:bg-tertiary/50 data-[state=open]:bg-tertiary/50 group inline-flex h-10 w-max items-center justify-center rounded-full px-4 py-2 text-sm font-bold transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50',
 );
diff --git a/libs/ui-components/paragraph/index.ts b/libs/ui-components/paragraph/index.ts
@@ -11,6 +11,7 @@ export const paragraphVariants = cva('text-balance', {
     variant: {
       default: 'text-base leading-4',
       'website-default': 'text-base font-semibold leading-6 tracking-tight',
+      'website-highlight': 'text-lg font-semibold leading-6 tracking-tight',
     },
   },
   defaultVariants: {

diff --git a/libs/ui-components/text-highlight/LychenTextHighlight.vue b/libs/ui-components/text-highlight/LychenTextHighlight.vue
@@ -0,0 +1,55 @@
+<template>
+  <span :class="cn('inline-block px-1 pb-2', props.class)"><slot /></span>
+</template>
+
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+interface Props {
+  delay?: number;
+  duration?: number;
+  class?: HTMLAttributes['class'];
+  textEndColor?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  delay: 0,
+  duration: 2000,
+  endColor: 'inherit',
+  class: undefined,
+  textEndColor: undefined,
+});
+
+const delayMs = computed(() => `${props.delay}ms`);
+const durationMs = computed(() => `${props.duration}ms`);
+</script>
+
+<style scoped>
+@keyframes background-expand {
+  0% {
+    background-size: 0% 100%;
+  }
+  100% {
+    background-size: 100% 100%;
+  }
+}
+
+@keyframes text-color-change {
+  0% {
+    color: inherit;
+  }
+  100% {
+    color: v-bind(textEndColor);
+  }
+}
+
+span {
+  background-size: 0% 100%;
+  background-repeat: no-repeat;
+  background-position: left center;
+  animation:
+    background-expand v-bind(durationMs) ease-in-out v-bind(delayMs) forwards,
+    text-color-change v-bind(durationMs) ease-in-out v-bind(delayMs) forwards;
+}
+</style>
diff --git a/libs/ui-css/components/scroll.css b/libs/ui-css/components/scroll.css
@@ -3,11 +3,12 @@
 }
 
 *::-webkit-scrollbar-track {
-  background: rgb(var(--color-surface)); /* color of the tracking area */
+  background: rgb(var(--color-surface-container)); /* color of the tracking area */
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: rgb(var(--color-primary) / 0.4); /* color of the scroll thumb */
+  background-color: rgb(var(--color-on-surface-container) / 0.4); /* color of the scroll thumb */
   border-radius: 20px; /* roundness of the scroll thumb */
-  border: 4px solid rgb(var(--color-surface));
+  border: 4px solid rgb(var(--color-surface-container));
+  cursor: move;
 }
diff --git a/libs/ui-layouts/website/LayoutWebsiteNavigation.vue b/libs/ui-layouts/website/LayoutWebsiteNavigation.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="z-50 flex h-[70px] w-full">
     <div
-      class="bg-surface-container/50 text-surface-container-on container flex flex-row items-stretch gap-4 rounded-lg px-4 py-2 shadow-sm backdrop-blur-md"
+      class="bg-surface-container/50 text-surface-container-on container flex flex-row items-stretch gap-4 rounded-full px-6 py-2 shadow-lg backdrop-blur-md"
     >
       <slot></slot>
 

diff --git a/projects/website/src/layouts/main/LayoutMainFooter.vue b/projects/website/src/layouts/main/LayoutMainFooter.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-4">
     <div class="flex flex-col items-stretch justify-between gap-4 lg:flex-row">
       <div class="flex basis-1/3 flex-col gap-2">
-        <LychenLogo class="h-16" />
+        <LychenLogo />
         <p class="text-sm opacity-80">
           {{ t(`${TRANSLATION_KEY}.footer.seo_paragraph`) }}
         </p>

diff --git a/projects/website/src/layouts/main/LayoutMainNavigation.vue b/projects/website/src/layouts/main/LayoutMainNavigation.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex w-full flex-row items-stretch justify-between gap-4">
+    <RouterLink
+      :to="{ name: RouteViewHome.name }"
+      class="flex flex-row items-stretch"
+    >
+      <LychenLogo
+    /></RouterLink>
     <div class="flex flex-row items-stretch gap-2">
-      <RouterLink
-        :to="{ name: RouteViewHome.name }"
-        class="flex flex-row items-stretch"
-      >
-        <LychenLogo
-      /></RouterLink>
       <LychenNavigationMenu class="hidden lg:flex">
         <LychenNavigationMenuList>
           <LychenNavigationMenuItem>
@@ -16,7 +16,7 @@
             <LychenNavigationMenuContent>
               <div class="flex flex-col items-stretch gap-2 p-6">
                 <div
-                  class="flex flex-row items-center gap-4 rounded-md bg-surface-container-highest p-4 text-surface-container-highest-on"
+                  class="flex flex-row items-center gap-4 rounded-xl bg-surface-container-highest p-4 text-surface-container-highest-on"
                 >
                   <LychenIcon icon="megaphone" />
                   <div class="flex flex-col gap-0">
@@ -40,27 +40,18 @@
                       <div
                         :href="application.link"
                         target="_blank"
-                        class="flex select-none flex-row items-center gap-2 space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-surface-container-high hover:text-surface-container-high-on focus:bg-surface-container-high focus:text-surface-container-high-on"
+                        class="select-none flex flex-col gap-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-surface-container-high hover:text-surface-container-high-on focus:bg-surface-container-high focus:text-surface-container-high-on"
                       >
-                        <img
-                          :src="`/logos/${application.logo}`"
-                          class="size-8"
-                        />
-                        <div class="flex flex-col gap-1">
+                        <div class="flex flex-row gap-2 justify-between items-center">
                           <p
-                            class="flex flex-row items-center gap-2 text-sm font-bold leading-none"
+                            class="text-md font-black font-lexend leading-none tracking-wide lowercase"
                           >
                             {{ application.title }}
-                            <LychenBadge variant="tertiary"
-                              >{{
-                                t(`${TRANSLATION_KEY}.navigation.app.state.${application.state}`)
-                              }}
-                            </LychenBadge>
-                          </p>
-                          <p class="line-clamp-3 text-xs leading-snug text-surface-container-on/70">
-                            {{ application.description }}
                           </p>
                         </div>
+                        <p class="line-clamp-3 text-xs leading-snug text-surface-container-on/70">
+                          {{ application.description }}
+                        </p>
                       </div>
                     </LychenNavigationMenuLink>
                   </li>
@@ -117,9 +108,6 @@ const LychenIcon = defineAsyncComponent(() => import('@lychen/ui-components/icon
 const LychenNavigationMenu = defineAsyncComponent(
   () => import('@lychen/ui-components/navigation-menu/LychenNavigationMenu.vue'),
 );
-const LychenBadge = defineAsyncComponent(
-  () => import('@lychen/ui-components/badge/LychenBadge.vue'),
-);
 const LychenButton = defineAsyncComponent(
   () => import('@lychen/ui-components/button/LychenButton.vue'),
 );

diff --git a/projects/website/src/views/home/ViewHomeHero.vue b/projects/website/src/views/home/ViewHomeHero.vue
@@ -1,25 +1,34 @@
 <template>
   <LychenHero
-    class="text-surface-on flex flex-col-reverse items-center gap-4 lg:flex-row"
+    class="text-surface dark:text-surface-on flex flex-row items-center justify-center gap-4 min-h-dvh"
     :background-image="heroUrl"
     overlay
-    overlay-class="bg-surface opacity-50"
+    overlay-class="bg-surface-on dark:bg-surface opacity-60"
   >
-    <div class="z-10 flex basis-1/2 flex-col items-start gap-2">
-      <LychenTitle variant="h1">{{ t('hero.title') }}</LychenTitle>
+    <div class="z-10 flex basis-4/5 items-center flex-col gap-4">
+      <LychenTitle
+        variant="h1"
+        class="text-center text-balance"
+        >{{ t('hero.title.prepend')
+        }}<LychenTextHighlight
+          class="rounded-xl gradient-text-background"
+          text-end-color="rgb(var(--color-on-primary))"
+        >
+          {{ t('hero.title.key_word') }} </LychenTextHighlight
+        >{{ t('hero.title.append') }}</LychenTitle
+      >
       <LychenParagraph
-        variant="website-default"
-        class="opacity-80"
+        variant="website-highlight"
+        class="text-center w-4/5"
         >{{ t('hero.description') }}
       </LychenParagraph>
-      <RouterLink to="#definition">
-        <LychenButton class="flex gap-2"
-          >{{ t('hero.discover') }}
-          <LychenIcon icon="chevron-down" />
-        </LychenButton>
+      <RouterLink
+        to="#definition"
+        class="self-center"
+      >
+        <LychenButton class="flex gap-2">{{ t('hero.discover') }} </LychenButton>
       </RouterLink>
     </div>
-    <div class="basis-1/2"></div>
   </LychenHero>
 </template>
 
@@ -28,6 +37,7 @@ import heroUrl from '../assets/hero-1.webp';
 import { defineAsyncComponent } from 'vue';
 
 import { useTranslations } from './i18n';
+import LychenTextHighlight from '@lychen/ui-components/text-highlight/LychenTextHighlight.vue';
 
 const LychenHero = defineAsyncComponent(() => import('@lychen/ui-components/hero/LychenHero.vue'));
 const LychenButton = defineAsyncComponent(
@@ -39,7 +49,17 @@ const LychenTitle = defineAsyncComponent(
 const LychenParagraph = defineAsyncComponent(
   () => import('@lychen/ui-components/paragraph/LychenParagraph.vue'),
 );
-const LychenIcon = defineAsyncComponent(() => import('@lychen/ui-components/icon/LychenIcon.vue'));
 
 const { t } = useTranslations();
 </script>
+
+<style>
+.gradient-text-background {
+  background-image: linear-gradient(
+    45deg,
+    rgb(var(--color-primary)) 0%,
+    rgb(var(--color-secondary)) 50%,
+    rgb(var(--color-tertiary)) 100%
+  );
+}
+</style>
diff --git a/projects/website/src/views/home/i18n/fr-FR.ts b/projects/website/src/views/home/i18n/fr-FR.ts
@@ -3,7 +3,11 @@ export default {
     title: 'Lychen',
   },
   hero: {
-    title: 'Acteur de la symbiose du territoire',
+    title: {
+      prepend: 'Acteur de la ',
+      key_word: 'symbiose',
+      append: ' du territoire',
+    },
     description:
       'La symbiose mutualiste est une interaction durable et réciproquement profitable entre différents organismes.',
     discover: 'Découvrir',

diff --git a/projects/website/src/views/price/ViewPriceHero.vue b/projects/website/src/views/price/ViewPriceHero.vue
@@ -1,5 +1,7 @@
 <template>
-  <LychenHero class="flex flex-col items-center justify-center gap-4 text-center text-surface-on">
+  <LychenHero
+    class="flex flex-col items-center justify-center gap-4 text-center text-surface-on min-h-dvh"
+  >
     <LychenTitle variant="h1">{{ t('title') }}</LychenTitle>
     <LychenParagraph
       class="md:w-4/6"

diff --git a/projects/website/tailwind.config.ts b/projects/website/tailwind.config.ts
@@ -7,7 +7,7 @@ import animate from 'tailwindcss-animate';
 import { contentConfig } from '@lychen/ui-css/tailwind/contentConfig';
 
 export default {
-  darkMode: 'selector',
+  //darkMode: ['selector'],
   safelist: ['dark'],
   prefix: '',