From ec051fb67efab46eb3f3aba465f90dd067cc12b7 Mon Sep 17 00:00:00 2001
From: HugoRCD <hugo.richard@epitech.eu>
Date: Mon, 2 Dec 2024 12:41:39 +0100
Subject: [PATCH] enhance hero

---
 apps/base/app.config.ts                       |  1 +
 apps/base/assets/css/base.css                 | 21 +++++++++++++++++++
 apps/base/components/CrossedDiv.vue           | 14 +++++++++++--
 apps/base/components/Logo.vue                 |  2 +-
 apps/lp/app/components/landing/Hero.vue       |  9 +++++---
 apps/lp/app/components/layout/Navbar.vue      |  1 +
 apps/shelve/app/assets/icons/nucleo/users.svg | 13 ++++++++++++
 apps/shelve/app/assets/texture.svg            | 12 +++++++++++
 apps/shelve/app/components/Callout.vue        | 19 +++++++++++++++++
 apps/shelve/app/components/team/Manager.vue   |  2 +-
 10 files changed, 87 insertions(+), 7 deletions(-)
 create mode 100644 apps/shelve/app/assets/icons/nucleo/users.svg
 create mode 100644 apps/shelve/app/assets/texture.svg
 create mode 100644 apps/shelve/app/components/Callout.vue

diff --git a/apps/base/app.config.ts b/apps/base/app.config.ts
index 0a6c7126..7221e9cc 100644
--- a/apps/base/app.config.ts
+++ b/apps/base/app.config.ts
@@ -1,6 +1,7 @@
 export default defineAppConfig({
   ui: {
     colors: {
+      primary: 'blue',
       neutral: 'neutral',
     },
     button: {
diff --git a/apps/base/assets/css/base.css b/apps/base/assets/css/base.css
index f21cfa12..b1319c10 100644
--- a/apps/base/assets/css/base.css
+++ b/apps/base/assets/css/base.css
@@ -30,3 +30,24 @@ html, body, #__nuxt, #__layout {
 .main-gradient {
   @apply font-geist-mono bg-gradient-to-r from-neutral-50 to-neutral-600 to-50% bg-clip-text text-transparent;
 }
+
+.bg-stripes {
+  @apply w-full [background-size:4px_4px] opacity-75;
+  @apply dark:[background-image:linear-gradient(-45deg,var(--color-neutral-700)_12.50%,transparent_12.50%,transparent_50%,var(--color-neutral-700)_50%,var(--color-neutral-700)_62.50%,transparent_62.50%,transparent_100%)];
+  @apply not-dark:[background-image:linear-gradient(-45deg,var(--color-neutral-200)_12.50%,transparent_12.50%,transparent_50%,var(--color-neutral-200)_50%,var(--color-neutral-200)_62.50%,transparent_62.50%,transparent_100%)];
+}
+
+.bg-dotted {
+  background-image:
+    radial-gradient(transparent, Canvas),
+    radial-gradient(
+      color-mix(in oklch, Canvastext 33%, Canvas) 0.8px,
+      transparent 1.3px
+    );
+  background-size:
+    200px 200px,
+    40px 40px;
+  background-repeat:
+    round,
+    space;
+}
diff --git a/apps/base/components/CrossedDiv.vue b/apps/base/components/CrossedDiv.vue
index 2fed409d..60468f99 100644
--- a/apps/base/components/CrossedDiv.vue
+++ b/apps/base/components/CrossedDiv.vue
@@ -23,7 +23,6 @@ defineProps<{
 <style scoped>
 .bottom:before {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   content: "";
   width: 1px;
   height: 9px;
@@ -33,7 +32,6 @@ defineProps<{
 
 .bottom:after {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   content: "";
   width: 9px;
   height: 1px;
@@ -41,6 +39,18 @@ defineProps<{
   left: -4px;
 }
 
+.dark {
+  .bottom:before, .bottom:after {
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+}
+
+.light {
+  .bottom:before, .bottom:after {
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  }
+}
+
 .encryption {
   --x: 80%;
   --y: 0%;
diff --git a/apps/base/components/Logo.vue b/apps/base/components/Logo.vue
index 3b094d00..95cbdf0e 100644
--- a/apps/base/components/Logo.vue
+++ b/apps/base/components/Logo.vue
@@ -7,7 +7,7 @@ const { size = 'size-5', text = true } = defineProps<{
 
 <template>
   <div class="flex items-center gap-2">
-    <UIcon name="custom:shelve" :size />
+    <UIcon name="custom:shelve" :class="size" />
     <NuxtLink v-if="text" to="/" aria-label="Shelve" class="font-semibold">
       Shelve
     </NuxtLink>
diff --git a/apps/lp/app/components/landing/Hero.vue b/apps/lp/app/components/landing/Hero.vue
index f01b7e10..33ff8cf7 100644
--- a/apps/lp/app/components/landing/Hero.vue
+++ b/apps/lp/app/components/landing/Hero.vue
@@ -10,8 +10,11 @@ defineShortcuts({
 </script>
 
 <template>
-  <div class="z-20 h-96 w-full sm:p-0 p-5 relative overflow-hidden">
-    <div class="mx-auto mt-32 w-full max-w-2xl">
+  <div class="z-20 h-[400px] w-full bg-dotted sm:p-0 p-5 relative flex items-center justify-center overflow-hidden">
+    <div flex="flex flex-col items-center justify-center gap-4">
+      <div class="flex items-center justify-center">
+        <Logo :text="false" size="size-10" />
+      </div>
       <div class="mx-auto max-w-md text-pretty text-center text-3xl sm:text-4xl">
         The all-in-one developer <span class="font-newsreader font-light italic">workspace</span>
       </div>
@@ -32,6 +35,6 @@ defineShortcuts({
       </div>
     </div>
 
-    <div class="size-60 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 absolute bottom-0 left-0 right-0 mx-auto -mb-40 blur-[200px] -z-1" />
+    <div class="size-60 rounded-full bg-gradient-to-br from-neutral-500 to-neutral-600 absolute bottom-0 left-0 right-0 mx-auto -mb-40 blur-[200px] -z-1" />
   </div>
 </template>
diff --git a/apps/lp/app/components/layout/Navbar.vue b/apps/lp/app/components/layout/Navbar.vue
index 60fd5752..799ea4a4 100644
--- a/apps/lp/app/components/layout/Navbar.vue
+++ b/apps/lp/app/components/layout/Navbar.vue
@@ -41,6 +41,7 @@ items.push(githubItem)
         <Logo size="size-8" />
         <div class="flex items-center">
           <UNavigationMenu
+            color="neutral"
             :items
             class="hidden sm:flex"
             :ui="{ link: 'py-1 px-3' }"
diff --git a/apps/shelve/app/assets/icons/nucleo/users.svg b/apps/shelve/app/assets/icons/nucleo/users.svg
new file mode 100644
index 00000000..6effeaf0
--- /dev/null
+++ b/apps/shelve/app/assets/icons/nucleo/users.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <title>users-filled</title>
+    <g fill="currentColor">
+        <circle cx="6.5" cy="8" r="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                stroke-width="2" fill="currentColor"></circle>
+        <circle cx="13.5" cy="5" r="2" fill="currentColor" stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" stroke-width="2"></circle>
+        <path d="m18.16,12.226c-.744-1.96-2.573-3.226-4.66-3.226-1.509,0-2.876.669-3.803,1.776,1.498.77,2.699,2.071,3.332,3.74.058.153.092.309.127.465.115.005.229.02.344.02,1.297,0,2.594-.299,3.881-.898.711-.331,1.053-1.155.778-1.876Z"
+              fill="currentColor" stroke-width="0"></path>
+        <path d="m11.16,15.226c-.744-1.96-2.573-3.226-4.66-3.226s-3.916,1.266-4.66,3.226c-.275.722.067,1.546.778,1.877,1.288.599,2.584.898,3.881.898s2.594-.299,3.881-.898c.711-.331,1.053-1.155.778-1.876Z"
+              stroke-width="0" fill="currentColor"></path>
+    </g>
+</svg>
diff --git a/apps/shelve/app/assets/texture.svg b/apps/shelve/app/assets/texture.svg
new file mode 100644
index 00000000..02a9df91
--- /dev/null
+++ b/apps/shelve/app/assets/texture.svg
@@ -0,0 +1,12 @@
+<svg id="texture" class="brightness-125 contrast-125 filter">
+  <filter id="noise">
+    <feTurbulence
+      type="fractalNoise"
+      baseFrequency=".8"
+      numOctaves="4"
+      stitchTiles="stitch"
+    ></feTurbulence>
+    <feColorMatrix type="saturate" values="0"></feColorMatrix>
+  </filter>
+  <rect width="100%" height="100%" filter="url(#noise)"></rect>
+</svg>
diff --git a/apps/shelve/app/components/Callout.vue b/apps/shelve/app/components/Callout.vue
new file mode 100644
index 00000000..f3a67181
--- /dev/null
+++ b/apps/shelve/app/components/Callout.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+type CalloutProps = {
+  class?: string
+}
+
+const props = defineProps<CalloutProps>()
+</script>
+
+<template>
+  <div class="bg-stripes" :class="props.class ? props.class : 'p-4 sm:p-7'">
+    <CrossedDiv class="p-4 bg-[var(--ui-bg)]">
+      <slot />
+    </CrossedDiv>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/shelve/app/components/team/Manager.vue b/apps/shelve/app/components/team/Manager.vue
index e781f330..289c6e99 100644
--- a/apps/shelve/app/components/team/Manager.vue
+++ b/apps/shelve/app/components/team/Manager.vue
@@ -49,7 +49,7 @@ const groups = computed(() => [
           {{ currentTeam.name }}
         </span>
       </span>
-      <span><UIcon name="lucide:grip" class="size-4" /></span>
+      <span><UIcon name="lucide:chevrons-up-down" class="size-4" /></span>
     </button>
     <template #content>
       <UCommandPalette