refactor: Switch lp and app to layers

CONTRIBUTING.md

@@ -19,6 +19,7 @@ Shelve uses a monorepo structure to manage multiple packages and applications.
 The main packages are:
 - `apps/shelve`: The main Shelve application.
 - `apps/lp`: The landing page for Shelve.
+- `apps/base`: This is the base layer that contains the shared configuration lp and shelve (components, plugins, etc).
 - `packages/cli`: The CLI connected to the Shelve application (push, pull, etc).
 - `packages/crypto`: The encryption and decryption package.
 - `packages/types`: The shared types inside the monorepo.

README.md

@@ -19,23 +19,23 @@
 <summary>Click to expand</summary>
 
 - [📋 Overview](#-overview)
-  - [Vision & Goals](#vision--goals)
-  - [Status & Roadmap](#status--roadmap)
+  - [🎯 Vision & Goals](#vision--goals)
+  - [🗺️ Status & Roadmap](#status--roadmap)
 - [✨ Features](#-features)
-  - [Core Features](#core-features)
-  - [Why Choose Shelve?](#why-choose-shelve)
+  - [🔑 Core Features](#core-features)
+  - [🤔 Why Choose Shelve?](#why-choose-shelve)
 - [🛠️ Tech Stack](#-tech-stack)
 - [🤝 Contributing](#-contributing)
 - [📚 Documentation](#-documentation)
-  - [Full Documentation](#full-documentation)
-  - [Self-Hosting](#self-hosting)
+  - [📖 Full Documentation](#full-documentation)
+  - [🏠 Self-Hosting](#self-hosting)
 - [💬 Community & Support](#-community--support)
-  - [Community Links](#community-links)
-  - [Where to Ask Questions](#where-to-ask-questions)
-  - [How to Report Bugs](#how-to-report-bugs)
-  - [How to Suggest Features](#how-to-suggest-features)
-- [License & Credits](#license--credits)
-  - [Acknowledgements](#acknowledgements)
+  - [🔗 Community Links](#community-links)
+  - [❓ Where to Ask Questions](#where-to-ask-questions)
+  - [🐛 How to Report Bugs](#how-to-report-bugs)
+  - [💡 How to Suggest Features](#how-to-suggest-features)
+- [📄 License & Credits](#license--credits)
+  - [🙏 Acknowledgements](#acknowledgements)
 
 </details>
 

apps/shelve/app/app.config.ts → apps/base/app.config.ts

@@ -6,7 +6,7 @@ export default defineAppConfig({
     },
     button: {
       slots: {
-        // @ts-expect-error Nuxt UI types error
+        // @ts-expect-error base is not defined
         base: 'cursor-pointer'
       }
     },
@@ -24,7 +24,7 @@ export default defineAppConfig({
   title: 'Shelve',
   description: 'Shelve, is a project management tool for developers, etc... to make project creation and management easier.',
   ogImage: 'https://shelve.cloud/og.png',
-  email: 'contact@hrcd.fr',
+  email: 'contact@shelve.cloud',
   phone: '(+33) 6 21 56 22 18',
   socials: [
     { name: 'github', link: 'https://github.com/HugoRCD' },

apps/base/assets/css/animations.css

@@ -0,0 +1,204 @@
+/* Transition effect */
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.slide-to-top-enter-active {
+  animation: slide-to-top-in 0.3s ease-in-out;
+}
+
+.slide-to-top-leave-active {
+  animation: slide-to-top-out 0.3s ease-in-out;
+}
+
+@keyframes slide-to-top-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-to-top-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+}
+
+.slide-to-bottom-enter-active {
+  animation: slide-to-bottom-in 0.3s ease-in-out;
+}
+
+.slide-to-bottom-leave-active {
+  animation: slide-to-bottom-out 0.3s ease-in-out;
+}
+
+@keyframes slide-to-bottom-in {
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-to-bottom-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+}
+
+.slide-enter-active {
+  animation: slide-in 0.3s ease-in-out;
+}
+
+.slide-leave-active {
+  animation: slide-out 0.3s ease-in-out;
+}
+
+@keyframes slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-10%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(-10%);
+  }
+}
+
+/* Main Noise effect */
+
+.noise {
+  animation: noise 1s steps(10) infinite;
+}
+
+@keyframes noise {
+  0%, 20%, 40%, 60%, 80%, 100% {
+    transform: translate(0, 0);
+  }
+  10% {
+    transform: translate(-5%, -10%);
+  }
+  30% {
+    transform: translate(5%, 10%);
+  }
+  50% {
+    transform: translate(-15%, 5%);
+  }
+  70% {
+    transform: translate(10%, -5%);
+  }
+  90% {
+    transform: translate(5%, -10%);
+  }
+}
+
+/* Appear effect */
+
+[data-animate] {
+  --stagger: 0;
+  --delay: 80ms;
+  --start: 0ms;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-animate] {
+    animation: enter 0.6s both;
+    animation-delay: calc(var(--stagger) * var(--delay) + var(--start));
+  }
+}
+
+@keyframes enter {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* Blur effect */
+.blur-enter-active,
+.blur-leave-active {
+  transition: opacity 0.5s ease, filter 0.5s ease;
+}
+
+.blur-enter-from,
+.blur-leave-to {
+  opacity: 0;
+  filter: blur(10px);
+}
+
+.blur-enter-to,
+.blur-leave-from {
+  opacity: 1;
+  filter: blur(0px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slide-enter-active,
+  .slide-leave-active,
+  .slide-to-top-enter-active,
+  .slide-to-top-leave-active,
+  .slide-to-bottom-enter-active,
+  .slide-to-bottom-leave-active {
+    animation: none !important;
+  }
+}
+
+[data-reduce-motion="reduce"] {
+  .slide-enter-active,
+  .slide-leave-active,
+  .slide-to-top-enter-active,
+  .slide-to-top-leave-active,
+  .slide-to-bottom-enter-active,
+  .slide-to-bottom-leave-active {
+    animation: none !important;
+  }
+
+  [data-animate] {
+    animation: none;
+  }
+}

apps/lp/app/assets/style/main.css → apps/base/assets/css/base.css

@@ -1,23 +1,28 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+@import "./animations.css";
 
 ::-webkit-scrollbar {
-    width: 5px;
-    height: 2px;
+  width: 5px;
+  height: 2px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--ui-bg-inverted);
-    border-radius: 5px;
+  background: var(--ui-bg-inverted);
+  border-radius: 5px;
 }
 
 :root {
   --ui-radius: var(--radius-sm);
 }
 
+html, body, #__nuxt, #__layout {
+  width: 100%;
+  height: 100%;
+}
+
 @theme {
   --font-newsreader: 'Newsreader', serif;
-  --font-inter: 'Inter', sans-serif;
   --font-geist: 'Geist', sans-serif;
   --font-geist-mono: 'Geist Mono', sans-serif;
 }

apps/base/components/Blur.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="fixed inset-x-0 top-0 isolate h-24">
+    <div
+      style="-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[1px]"
+    />
+    <div
+      style="-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[2px]"
+    />
+    <div
+      style="-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[3px]"
+    />
+    <div
+      style="-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[6px]"
+    />
+    <div
+      style="-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[12px]"
+    />
+  </div>
+</template>
+
+<style scoped>
+.gradient-mask-b-0 {
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 100%);
+}
+</style>

apps/shelve/app/components/CrossedDiv.vue → apps/base/components/CrossedDiv.vue

@@ -1,12 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  line?: boolean
+}>()
+</script>
+
 <template>
   <div class="relative -mb-px -ml-px">
+    <div v-if="line" class="h-0.5 w-[200rem] bg-neutral-100 dark:bg-neutral-800 absolute -left-[100rem] opacity-40" />
+    <div v-if="line" class="h-[200rem] w-0.5 bg-neutral-100 dark:bg-neutral-800 absolute -top-[100rem] opacity-40 -left-0.5" />
     <span class="bottom absolute -bottom-px -left-px size-px" />
     <span class="bottom absolute -bottom-px -right-px size-px" />
     <span class="bottom absolute -left-px -top-px size-px" />
     <span class="bottom absolute -right-px -top-px size-px" />
     <div class="relative z-10 flex h-full flex-col justify-center">
       <slot />
     </div>
+    <div v-if="line" class="h-0.5 w-[200rem] -z-1 bg-neutral-100 dark:bg-neutral-800 absolute -right-[100rem] opacity-40" />
+    <div v-if="line" class="h-[200rem] w-0.5 -z-1 bg-neutral-100 dark:bg-neutral-800 absolute -bottom-[100rem] opacity-40 -right-0.5" />
   </div>
 </template>
 

apps/base/components/Logo.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { size = 'size-5', text = true } = defineProps<{
+  size?: string
+  text?: boolean
+}>()
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <UIcon name="custom:shelve" :size />
+    <NuxtLink v-if="text" to="/" aria-label="Shelve" class="font-semibold">
+      Shelve
+    </NuxtLink>
+  </div>
+</template>