feat: continue work on lp

HugoRCD · Apr 1, 2024 · ce75c94 · ce75c94
1 parent 8936a96
commit ce75c94
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 20 deletions.
diff --git a/apps/app/components/landing/Features.vue b/apps/app/components/landing/Features.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const features = [
+  {
+    title: 'Manage your projects secrets',
+    description: 'End Slack messages like "Can you send me .env file?", keep your secrets in one place and share them with your team.',
+    icon: 'i-lucide-lock',
+  },
+  {
+    title: 'Collaborate with your team',
+    description: 'Create, invite and manage your team members to work together on your projects in seconds.',
+    icon: 'i-lucide-users',
+  },
+  {
+    title: 'Powerful CLI',
+    description: 'Manage your projects secrets, files and more withour leaving your terminal.',
+    icon: 'i-lucide-terminal',
+  },
+  {
+    title: 'Shared env variables',
+    description: 'Create shared env variables that can be used across all your projects.',
+    icon: 'i-lucide-share',
+    soon: true,
+  },
+  {
+    title: 'Sync with your favorite tools',
+    description: 'Integrate with your favorite tools like GitHub, Vercel, etc...',
+    icon: 'i-custom-github',
+    soon: true,
+  },
+  {
+    title: 'Talk to project',
+    description: 'Talk to your project with built in trained AI on your project data.',
+    icon: 'i-lucide-message-square',
+    soon: true,
+  }
+]
+</script>
+
+<template>
+  <div class="mx-auto mt-8 max-w-5xl lg:mt-16">
+    <div class="mb-10 flex flex-col items-center justify-center gap-2">
+      <h3 class="from-primary-300 to-primary-400 bg-gradient-to-tr bg-clip-text text-3xl font-bold text-transparent sm:text-4xl">
+        <LandingScrambleText label="Features" />
+      </h3>
+      <p class="max-w-lg text-pretty text-center text-gray-500">
+        No more tedious tasks, Shelve has everything you need to manage your projects.
+      </p>
+    </div>
+    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-y-16">
+      <div
+        v-for="(feature, index) in features"
+        :key="index"
+        class="flex flex-col gap-1"
+        :style="{ '--stagger': index + 1 }"
+        data-animate
+      >
+        <div class="flex items-center">
+          <div class="flex items-center justify-center rounded border border-white/5 bg-white/5 p-1">
+            <span :class="feature.icon" class="size-5 text-gray-300" />
+          </div>
+
+          <div class="ml-4 font-semibold text-gray-300">
+            {{ feature.title }} <span v-if="feature.soon" class="ml-1 text-xs text-gray-400">(soon)</span>
+          </div>
+        </div>
+
+        <div class="ml-11 pl-0.5 text-sm text-gray-500">
+          {{ feature.description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/app/components/landing/ScrambleText.vue b/apps/app/components/landing/ScrambleText.vue
@@ -30,7 +30,7 @@ startScrambling()
 </script>
 
 <template>
-  <span>
+  <span @mouseover="startScrambling">
     {{ displayText }}
   </span>
 </template>

diff --git a/apps/app/components/layout/Navbar.vue b/apps/app/components/layout/Navbar.vue
@@ -5,7 +5,7 @@ const user = useCurrentUser()
 
 <template>
   <div>
-    <nav class="flex items-center justify-between p-4 sm:p-5">
+    <nav class="fixed inset-x-0 top-0 z-50 flex items-center justify-between bg-neutral-900/50 p-4 backdrop-blur-lg sm:px-5 sm:py-2">
       <NuxtLink to="/" class="font-newsreader text-2xl font-light italic">
         Shelve
       </NuxtLink>

diff --git a/apps/app/layouts/default.vue b/apps/app/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative flex h-screen flex-col">
     <LayoutNavbar />
-    <div class="flex-1">
+    <div class="mt-14 flex-1">
       <slot />
     </div>
     <LayoutFooter />

diff --git a/apps/app/nuxt.config.ts b/apps/app/nuxt.config.ts
@@ -14,6 +14,10 @@ export default defineNuxtConfig({
     },
   },
 
+  experimental: {
+    componentIslands: true,
+  },
+
   routeRules: {
     '/': { isr: true, prerender: true },
     '/login': { isr: true, prerender: true },
@@ -79,7 +83,7 @@ export default defineNuxtConfig({
         custom: {
           icons: {
             'linear': {
-              body: ` 
+              body: `
                 <svg stroke="currentColor" viewBox="0 0 95 95" xmlns="http://www.w3.org/2000/svg">
                   <path d="M1.16414 58.4466C0.952764 57.5456 2.02625 56.978 2.6807 57.6325L37.3675 92.3193C38.0219 92.9737 37.4544 94.0472 36.5533 93.8358C19.0489 89.7296 5.2704 75.951 1.16414 58.4466ZM0.00179678 44.5446C-0.0149648 44.8138 0.0862253 45.0765 0.27689 45.2672L49.7328 94.723C49.9235 94.9137 50.1862 95.0152 50.4554 94.9982C52.7061 94.8579 54.9145 94.5612 57.0696 94.1186C57.7959 93.9694 58.0482 93.0771 57.5239 92.5529L2.44715 37.4761C1.92289 36.9518 1.03054 37.2041 0.881387 37.9304C0.438768 40.0855 0.141983 42.2939 0.00179678 44.5446ZM4.00038 28.2201C3.84222 28.5752 3.92278 28.9902 4.19765 29.2651L65.7349 90.8023C66.0098 91.0772 66.4248 91.1578 66.7799 90.9996C68.4767 90.2438 70.1211 89.3915 71.7061 88.4498C72.2306 88.1382 72.3115 87.4174 71.8801 86.9862L8.01388 23.1199C7.58249 22.6885 6.8618 22.7694 6.55017 23.2939C5.60842 24.8789 4.75617 26.5233 4.00038 28.2201ZM12.0258 17.1703C11.6742 16.8187 11.6524 16.2548 11.9837 15.8839C20.6905 6.13634 33.3558 0 47.4543 0C73.7131 0 95 21.2869 95 47.5457C95 61.6441 88.8637 74.3094 79.1161 83.0163C78.7453 83.3475 78.1813 83.3258 77.8296 82.9742L12.0258 17.1703Z" />
                 </svg>

diff --git a/apps/app/pages/index.vue b/apps/app/pages/index.vue
@@ -1,4 +1,12 @@
 <script setup lang="ts">
+const copy = ref(false)
+function copy_to_clipboard(text: string) {
+  copyToClipboard(text, 'Copied to clipboard')
+  copy.value = true
+  setTimeout(() => {
+    copy.value = false
+  }, 1000)
+}
 </script>
 
 <template>
@@ -7,22 +15,61 @@
       <LandingHero class="h-64" />
     </div>
     <div class="flex flex-col gap-4 p-5">
-      <h3 class="text-2xl font-bold">
-        <LandingScrambleText label="Welcome to Shelve" />
-      </h3>
-      <div class="text-lg text-gray-500">
-        <p>
-          Shelve is a project management tool that helps you organize your projects in a simple and efficient way.
-        </p>
-        <p>
-          It is designed to be easy to use and to help you keep track of your projects, tasks, and deadlines.
-        </p>
-        <p>
-          With Shelve, you can create projects, add tasks to them, set deadlines, and assign tasks to team members.
-        </p>
-        <p>
-          You can also track the progress of your projects, see who is working on what, and get notifications when tasks are completed.
-        </p>
+      <div>
+        <div class="mb-10 flex flex-col items-center justify-center gap-2">
+          <h3 class="from-primary-300 to-primary-400 bg-gradient-to-tr bg-clip-text text-3xl font-bold text-transparent sm:text-4xl">
+            <LandingScrambleText label="Welcome to Shelve" />
+          </h3>
+          <p class="max-w-lg text-center text-gray-500">
+            Shelve is the best place to manage your projects, alone or with your team. Store your project secrets, data, files and more in one place.
+            Use our CLI to manage your projects without leaving your terminal.
+          </p>
+        </div>
+      </div>
+
+      <div class="relative">
+        <div class="absolute bottom-16 z-20 flex w-full items-center justify-center [mask-image:linear-gradient(to_bottom,white,transparent)]">
+          <div
+            class="flex items-center justify-center gap-4 rounded-md bg-white/5 px-4 py-2 backdrop-blur-lg"
+            @click="copy_to_clipboard('npm install -g @shelve/cli')"
+          >
+            <div class="flex cursor-pointer items-center justify-center gap-2 text-sm text-gray-300">
+              <span>
+                npm install -g @shelve/cli
+              </span>
+              <span
+                v-if="!copy"
+                class="i-lucide-copy"
+              />
+              <span
+                v-else
+                class="i-lucide-check text-primary-400 text-lg"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="relative -top-12 py-20">
+          <div class="absolute inset-0 flex items-center justify-center [mask-image:linear-gradient(to_bottom,white,transparent)]">
+            <div class="bg-white/2.5 absolute size-96 rounded-full shadow-xl" />
+
+            <div class="bg-white/2.5 absolute size-[19rem] rounded-full border border-white/5 shadow-xl" />
+
+            <div class="bg-white/2.5 absolute size-56 rounded-full border border-white/10 shadow-xl" />
+
+            <div class="bg-white/2.5 absolute size-36 rounded-full border border-dashed border-white/15 shadow-xl" />
+          </div>
+
+          <div class="relative flex items-center justify-center">
+            <div class="flex size-16 items-center justify-center rounded-full border border-white/25 bg-white/5 p-3 shadow-xl">
+              <span class="i-lucide-lock size-8 text-gray-300" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <LandingFeatures />
       </div>
     </div>
   </div>