feat: add motion (#243)

* bump deps

* update deps

* add v-motion-fade-visible-once to page seciton

* add index.css

assets/css/index.css

@@ -0,0 +1 @@
+@import './fonts.css';

components/PageSection.vue

@@ -17,7 +17,8 @@ defineProps<Props>()
 
 <template>
   <section
-    :id="id" class="relative" :class="{ 'text-white': textWhite }"
+    :id="id"
+    v-motion-fade-visible-once class="relative" :class="{ 'text-white': textWhite }"
   >
     <div v-if="darkGradient" class="absolute h-full w-full from-brand-dark to-brand-blue-dark bg-gradient-to-r -z-1" />
     <div v-if="lightGradient" class="absolute h-full w-full from-brand-teal-light to-white bg-gradient-to-b -z-1" />

nuxt.config.ts

@@ -18,13 +18,14 @@ export default defineNuxtConfig({
   },
   css: [
     '@unocss/reset/tailwind.css',
-    '@/assets/css/fonts.css',
+    '@/assets/css/index.css',
   ],
   modules: [
     '@nuxt/content',
     '@vueuse/nuxt',
     '@unocss/nuxt',
     '@nuxtjs/plausible',
+    '@vueuse/motion/nuxt',
   ],
   extends: [
     'nuxt-seo-kit',

package.json

@@ -2,7 +2,7 @@
   "name": "ipfs-website",
   "version": "3.0.0",
   "private": true,
-  "packageManager": "pnpm@8.5.1",
+  "packageManager": "pnpm@8.6.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -14,19 +14,20 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.1.2",
+    "@vueuse/motion": "2.0.0",
     "vue3-carousel": "^0.3.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.1",
-    "@iconify-json/carbon": "^1.1.16",
+    "@antfu/eslint-config": "^0.39.4",
+    "@iconify-json/carbon": "^1.1.17",
     "@nuxt/content": "^2.6.0",
     "@nuxtjs/plausible": "^0.2.1",
-    "@unocss/eslint-config": "^0.52.0",
-    "@unocss/nuxt": "^0.52.0",
-    "@unocss/preset-icons": "^0.52.0",
+    "@unocss/eslint-config": "^0.52.7",
+    "@unocss/nuxt": "^0.52.7",
+    "@unocss/preset-icons": "^0.52.7",
     "@vueuse/nuxt": "^10.1.2",
     "eslint": "^8.41.0",
-    "nuxt": "^3.5.1",
+    "nuxt": "^3.5.2",
     "nuxt-seo-kit": "^1.3.8",
     "typescript": "^5.0.4"
   }