✨ Better product carsouel

app/app.vue

@@ -48,5 +48,11 @@ body {
   padding: 0;
   margin: 0;
   font-family: Nunito Variable, sans-serif;
+
+  scroll-behavior: smooth;
+}
+
+.n-layout-scroll-container {
+  scroll-behavior: smooth;
 }
 </style>

app/pages/index.vue

@@ -8,18 +8,18 @@
         that interesting.
       </p>
       <n-space justify="center">
-        <n-button type="primary" size="large" round>Explore around</n-button>
+        <n-button type="primary" size="large" round tag="a" href="#products">Explore around</n-button>
         <n-button type="default" size="large" round>About us</n-button>
       </n-space>
     </div>
-    <div id="about" class="pb-36">
+    <div id="products" class="pb-56">
       <client-only>
         <n-grid cols="1 m:2 l:2" responsive="screen" x-gap="32" y-gap="16">
           <n-gi>
             <div class="flex items-center justify-center">
               <n-carousel
                 show-arrow
-                draggable
+                autoplay
                 dot-type="line"
                 class="rounded-xl w-full max-h-[360px] aspect-video flex-shrink-1"
               >
@@ -45,6 +45,14 @@
                     "
                     class="absolute left-0 right-0 top-1/2 bottom-0"
                   />
+                  <div class="absolute left-0 right-0 top-0 px-4 pt-4 flex justify-end gap-2.5">
+                    <n-button v-if="product.repo" circle color="white" size="small" tag="a" :href="product.repo" target="_blank">
+                      <n-icon><code-round /></n-icon>
+                    </n-button>
+                    <n-button v-if="product.url" circle color="white" size="small" tag="a" :href="product.url" target="_blank">
+                      <n-icon><launch-round /></n-icon>
+                    </n-button>
+                  </div>
                   <div
                     class="absolute bottom-0 px-6 py-8 w-full"
                     style="z-index: 2"
@@ -64,8 +72,14 @@
               class="flex justify-center text-right h-full py-8 px-4 flex flex-col"
             >
               <h2 class="text-3xl font-bold mb-3">Our products</h2>
-              <p class="text-lg mb-1">The made various of software, from social network to cloud drive.</p>
-              <p class="text-lg">Take a look of them on the left on your own <code>ヽ(&gt;∀&lt;☆)ノ</code></p>
+              <p class="text-lg mb-1">
+                The made various of software, from social network to cloud
+                drive.
+              </p>
+              <p class="text-lg">
+                Take a look of them on the left on your own
+                <code>ヽ(&gt;∀&lt;☆)ノ</code>
+              </p>
             </div>
           </n-gi>
         </n-grid>
@@ -82,8 +96,10 @@ import {
   NGi,
   NCarousel,
   NCarouselItem,
+  NIcon,
   useThemeVars,
 } from "naive-ui";
+import { LaunchRound, CodeRound } from "@vicons/material";
 import Typed from "typed.js";
 
 const route = useRoute();

bun.lock

@@ -21,6 +21,9 @@
         "vue": "^3.5.18",
         "vue-router": "^4.5.1",
       },
+      "devDependencies": {
+        "@vicons/material": "^0.13.0",
+      },
     },
   },
   "packages": {
@@ -604,6 +607,8 @@
 
     "@vercel/nft": ["@vercel/nft@0.29.4", "", { "dependencies": { "@mapbox/node-pre-gyp": "^2.0.0", "@rollup/pluginutils": "^5.1.3", "acorn": "^8.6.0", "acorn-import-attributes": "^1.9.5", "async-sema": "^3.1.1", "bindings": "^1.4.0", "estree-walker": "2.0.2", "glob": "^10.4.5", "graceful-fs": "^4.2.9", "node-gyp-build": "^4.2.2", "picomatch": "^4.0.2", "resolve-from": "^5.0.0" }, "bin": { "nft": "out/cli.js" } }, "sha512-6lLqMNX3TuycBPABycx7A9F1bHQR7kiQln6abjFbPrf5C/05qHM9M5E4PeTE59c7z8g6vHnx1Ioihb2AQl7BTA=="],
 
+    "@vicons/material": ["@vicons/material@0.13.0", "", {}, "sha512-lKVxFNprM+CaBkUH3gt6VjIeiMsKQl2zARQMwTCZruQl2vRHzyeZiKeCflWS99CEfv2JzX/6y697smxlzyxcVw=="],
+
     "@vitejs/plugin-vue": ["@vitejs/plugin-vue@6.0.1", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-beta.29" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0", "vue": "^3.2.25" } }, "sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw=="],
 
     "@vitejs/plugin-vue-jsx": ["@vitejs/plugin-vue-jsx@5.0.1", "", { "dependencies": { "@babel/core": "^7.27.7", "@babel/plugin-transform-typescript": "^7.27.1", "@rolldown/pluginutils": "^1.0.0-beta.21", "@vue/babel-plugin-jsx": "^1.4.0" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0", "vue": "^3.0.0" } }, "sha512-X7qmQMXbdDh+sfHUttXokPD0cjPkMFoae7SgbkF9vi3idGUKmxLcnU2Ug49FHwiKXebfzQRIm5yK3sfCJzNBbg=="],

package.json

@@ -26,5 +26,8 @@
     "typed.js": "^2.1.0",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@vicons/material": "^0.13.0"
   }
 }