docs(jp): add translation for japanese i18n homepage

docs/jp/index.md

@@ -0,0 +1,134 @@
+---
+layout: home
+
+title: 俊樹のノート
+titleTemplate: コンテンツ作成やメモ管理のための永遠のデジタル知識ベース
+
+hero:
+    name: 俊樹のノート
+    text: 研究して作成
+    tagline: 👨‍💻 コンテンツ作成やメモ管理のための永遠のデジタル知識ベース
+    image:
+        src: /logos/logo.svg
+        alt: Home logo
+    actions:
+        - theme: brand
+          text: 👉 始め
+          link: /getting-started
+        - theme: alt
+          text: '🗒️ GitHub で見る'
+          link: https://github.com/andatoshiki/toshiki-notebook
+
+features:
+    - icon: 🕒
+      title: Tempus Fugit
+      details: Tempus Fugit とは、ラテン語で「時が飛ぶ」という意味のフレーズで、誰もが同じ１日24時間しかないことを強調しています. しかし、この時間だけでは全 てを学ぶには十分ではありません. だからこそ、知識を記録し復習することが重要なのです.
+    - icon: ☕
+      title: Carpe Diem
+      details: Carpe Diem、今日を生き抜き、その瞬間を堪能しましょう。1980年代風のCDプレイヤーでブルーズを聴きながらコーヒーを飲むのも良いでしょう。ライトを消し、カーテンを閉め、小さなランプでスペースを照らしましょう。時間はあなたのものです。今日を味わい、学びながら生産性を発揮してください.
+    - icon: 💡
+      title: Epiphania
+      details: エピファニーは、ラテン語の epiphania に由来する言葉で、突然の輝かしい気づきや洞察力を示す瞬間です. このような明晰な洞察力を持った瞬間は貴重であり、私たちがこれらの貴重なアイデアを忘れないようにするためにも大切に扱うべきです.
+---
+
+<!-- <script setup>
+import { VPTeamMembers } from 'vitepress/theme'
+
+const khanacademySVG = {
+  svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Khan Academy</title><path d="M21.724 4.973L13.418.328a3.214 3.214 0 0 0-2.828 0L2.276 4.973A3.05 3.05 0 0 0 .862 7.371v9.256a3.05 3.05 0 0 0 1.414 2.4l8.306 4.645a3.214 3.214 0 0 0 2.828 0l8.314-4.645a3.05 3.05 0 0 0 1.414-2.4V7.373a3.05 3.05 0 0 0-1.414-2.4zM12 4.921a2.571 2.571 0 1 1 .001 5.143A2.571 2.571 0 0 1 12 4.92zm3.094 13.627a9.119 9.119 0 0 1-3.103.549 8.972 8.972 0 0 1-3.076-.55 8.493 8.493 0 0 1-5.486-7.987v-.857c4.646.017 8.074 3.823 8.074 8.51v.198h.926v-.197c0-4.688 3.445-8.51 8.056-8.51.026.29.043.582.086.856a8.502 8.502 0 0 1-5.477 7.988z"/></svg>'
+}
+
+const members = [
+  {
+    avatar: "/logos/khancademy.svg",
+    name: "Khan Academy",
+    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
+    links: [
+      { icon: "github", link: "https://github.com/Khan" },
+      { icon: khanacademySVG, link: "https://khanacademy.org" }
+    ],
+  },
+    {
+    avatar: "/logos/khancademy.svg",
+    name: "Khan Academy",
+    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
+    links: [
+      { icon: "github", link: "https://github.com/Khan" },
+      { icon: khanacademySVG, link: "https://khanacademy.org" }
+    ],
+  },
+    {
+    avatar: "/logos/khancademy.svg",
+    name: "Khan Academy",
+    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
+    links: [
+      { icon: "github", link: "https://github.com/Khan" },
+      { icon: khanacademySVG, link: "https://khanacademy.org" }
+    ],
+  },
+    {
+    avatar: "/logos/khancademy.svg",
+    name: "Khan Academy",
+    title: "Khan Academy is a non-profit educational organization that provides free online learning resources.",
+    links: [
+      { icon: "github", link: "https://github.com/Khan" },
+      { icon: khanacademySVG, link: "https://khanacademy.org" }
+    ],
+  },
+  {
+    avatar: "https://avatars.githubusercontent.com/u/5837277?v=4",
+    name: "Knut Sveidqvist",
+    title: "Creator",
+    links: [{ icon: "github", link: "https://github.com/knsv" }],
+  },
+];
+</script>
+
+<div class="vp-doc" >
+  <h2 id="meet-the-team"> 👀 My Learning Platforms </h2>
+  <VPTeamMembers size="small" :members="members" />
+</div>
+
+<style>
+  .image-container .image-src {
+    margin: 1rem auto;
+    /* max-width: 100%;
+    width: 100%; */
+}
+
+  .dark .image-src{
+    filter: invert(1) hue-rotate(217deg)  contrast(0.72);
+  }
+
+  .vp-doc {
+    align-items: center;
+    flex-direction: column;
+    display: flex;
+    margin: 1.5rem;
+  }
+
+  .vp-doc h2 {
+    margin: 48px 0 16px;
+    border-top: 1px solid var(--vp-c-divider-light);
+    padding-top: 24px;
+    letter-spacing: -.02em;
+    line-height: 32px;
+    font-size: 24px;
+}
+</style> -->
+<style>
+.m-home-layout .image-src:hover {
+transform: translate(-50%, -50%) rotate(666turn);
+transition: transform 59s 1s cubic-bezier(0.3, 0, 0.8, 1);
+}
+
+.m-home-layout .details small {
+opacity: 0.8;
+}
+
+.m-home-layout .item:last-child .details {
+display: flex;
+justify-content: flex-end;
+align-items: end;
+} 
+</style>