wip

NoelDeMartin · Oct 15, 2024 · c7bdb0f · c7bdb0f
1 parent 58ffa6e
commit c7bdb0f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/assets/img/landing/landscape/clouds.png b/src/assets/img/landing/landscape/clouds.png
diff --git a/src/pages/index.ts b/src/pages/index.ts
@@ -5,7 +5,8 @@ import { listName } from '@/utils/display';
 import type TasksList from '@/models/TasksList';
 import type WorkspaceModel from '@/models/Workspace';
 
-import LandingBeta from './landing/LandingBeta.vue';
+import Landing from './landing/Landing.vue';
+// import LandingBeta from './landing/LandingBeta.vue';
 import Workspace from './workspace/Workspace.vue';
 
 export const bindings = defineRouteBindings({
@@ -23,7 +24,7 @@ export const routes = defineRoutes([
     {
         name: 'home',
         path: '/',
-        component: LandingBeta,
+        component: Landing,
         beforeEnter: () => Workspaces.open(),
     },
     {

diff --git a/src/pages/landing/LandingHeader.vue b/src/pages/landing/LandingHeader.vue
@@ -6,6 +6,16 @@
             'animation-duration': `${FORM_ANIMATION_DURATION}ms`,
         }"
     />
+
+    <div
+        class="fixed left-0 top-0 z-30 h-32 w-screen overflow-hidden"
+        :style="{
+            transform: `translateY(${showingForm ? '-100%' : '0%'})`,
+            'animation-duration': `${FORM_ANIMATION_DURATION}ms`,
+        }"
+    >
+        <div class="animate-clouds h-full w-[200vw] opacity-50" />
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -16,3 +26,20 @@ import type { LandingContext } from './landing';
 
 const { showingForm } = injectOrFail<LandingContext>('landing');
 </script>
+
+<style scoped>
+@keyframes clouds {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+
+.animate-clouds {
+    animation: clouds 60s infinite linear;
+    background: url('@/assets/img/landing/landscape/clouds.png');
+    background-size: contain;
+}
+</style>