fix: update useRouter import and adjust UI styling (#1274)

# Overview
- Removed unnecessary `.js` extension from `useRouter` import statement
to align with Next.js best practices.
- Corrected to right-0 so that the right property of className works
correctly.

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

docs/suspensive.org/src/components/HomePage.tsx

@@ -21,7 +21,7 @@ export const HomePage = ({
         <Image src="/img/logo_background_star.png" alt="Suspensive with star" width={400} height={241} />
         <div className="flex flex-col items-center gap-4">
           <div className="relative text-5xl font-bold">
-            <span>{title}</span> <span className="right absolute text-sm">v{version}</span>
+            <span>{title}</span> <span className="absolute right-0 text-sm">v{version}</span>
           </div>
           <p className="text-3xl">{description}</p>
         </div>

docs/suspensive.org/theme.config.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
-import { useRouter } from 'next/router.js'
+import { useRouter } from 'next/router'
 import { type DocsThemeConfig, useConfig } from 'nextra-theme-docs'
 
 const localeBanner = {
@@ -34,7 +34,7 @@ const config: DocsThemeConfig = {
         <Image src="/img/logo_dark.png" width={34} height={34} alt="suspensive logo" />
         <div className="relative">
           <strong>Suspensive</strong>
-          <span className="right absolute text-[8px]">v2</span>
+          <span className="absolute right-0 text-[8px]">v2</span>
         </div>
       </div>
     )