🎨 Update docs and figures (1271)

Author: KATO-Hiro

README.md

@@ -36,7 +36,7 @@
 <div align="center">
   <video
     width="720"
-    src="https://github.com/user-attachments/assets/88b19b21-fda3-4337-8266-9243b89e7096"
+    src="https://github.com/user-attachments/assets/5d714055-e2fa-47e7-aa50-6e34a977fa58"
     autoplay
     muted
     controls
@@ -49,13 +49,13 @@
 
 - **回答状況を自分で記録できる**: 「AC (正解)」「解説AC」「挑戦中」「未挑戦」から選べます。
 - **一歩先の問題に挑戦**: 17段階で難易度付けされており、自分の実力に合った問題が探せます。
-- **(開発中) 問題集で得意を伸ばす・苦手を克服**: 例題・類題を通して、各トピックの基礎から応用的な方法まで身につけられます。
+- **問題集で得意を伸ばす・苦手を克服**: 例題・類題を通して、各トピックの基礎から応用的な方法まで身につけられます。
 
 ## 主な機能
 
 - 問題の回答状況の記録
 - 問題一覧: 難易度(ヒューリスティックな判断を含む)を見て、問題を探す
-- (開発中) 問題集: 特定のトピックに関する例題・類題を集中して解く
+- 問題集(アルファ版): 特定のトピックに関する例題・類題を集中して解く
 
 ## 予備知識
 
@@ -71,7 +71,7 @@
 
 1. (初回のみ) ユーザ名とパスワードを入力して、アカウントを作成します。
 2. ログインします。お試し用のアカウント (ユーザ名: guest、パスワード: Hell0Guest) を利用することもできます。
-3. 問題一覧で、グレードおよび問題を選び、回答欄の「更新」をクリックもしくはタップします。
+3. 問題集や問題一覧で、グレードおよび問題を選び、回答欄の「更新」をクリックもしくはタップします。
 4. 該当する回答状況 (デフォルトは「未挑戦」)を選択し、「回答を更新」ボタンを押します。
 
 ## 本サービスのスポンサー(敬称略・順不同)
@@ -102,7 +102,7 @@
 
 ## ご要望、ご報告、お気付きの点など
 
-- [連絡先](https://twitter.com/acnovisteps)
+- [連絡先](https://x.com/acnovisteps)
 
 - [本プロジェクトへの参加方法](https://github.com/KATO-Hiro/AtCoderNovisteps/blob/main/CONTRIBUTING.md)
 
@@ -121,7 +121,7 @@
   - 貢献内容(予定も含む): アプリの仕様に関する提案・技術選定・設計・実装
 - [@ウルズニャー](https://x.com/uruzunyaa)
   - 役割: 問題の難易度評価
-  - 貢献内容(予定も含む): 問題の難易度評価
+  - 貢献内容(予定も含む): 問題の難易度評価、問題集のレビュー
 - [@nonon](https://x.com/nonon_math)
   - 役割: 問題の難易度評価
   - 貢献内容(予定も含む): 問題の難易度評価、問題集作成

src/routes/+page.svelte

@@ -5,23 +5,22 @@
   // @ts-ignore
   import ArrowRightOutline from 'flowbite-svelte-icons/ArrowRightOutline.svelte';
 
+  import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
+
   import { PRODUCT_CATCH_PHRASE } from '$lib/constants/product-info';
+  import { ATCODER_BASE_URL } from '$lib/constants/urls';
+  import { WORKBOOKS_PAGE, ABOUT_PAGE, PROBLEMS_PAGE } from '$lib/constants/navbar-links';
 
-  const workBookImages = [
-    {
-      alt: 'List of workbooks',
-      src: '../../workbooks.png',
-      title: 'List-of-workbooks',
-    },
+  const problemImages = [
     {
-      alt: 'Sample of workbook with 9Q',
-      src: '../../workbook_9Q_details.png',
-      title: 'Sample-of-workbook-with-9Q',
+      alt: 'List of problems',
+      src: '../../grade_11Q_4Q.png',
+      title: 'List-of-problems',
     },
     {
-      alt: 'Sample of workbook with 9Q final',
-      src: '../../workbook_9Q_details_final.png',
-      title: 'Sample-of-workbook-with-9Q-final',
+      alt: 'Sample of problems with 10Q',
+      src: '../../grade_10Q_details.png',
+      title: 'Sample-of-problems-with-10Q',
     },
   ];
 </script>
@@ -36,21 +35,16 @@
     >
       {PRODUCT_CATCH_PHRASE}
     </Heading>
+
     <P class="mb-6 text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-300">
       【非公式】
-      <a
-        href="https://atcoder.jp/"
-        class="font-medium text-primary-600 hover:underline dark:text-primary-500"
-        target="_blank"
-        rel="noreferrer"
-      >
-        AtCoder
-      </a>
+      <ExternalLinkWrapper url={ATCODER_BASE_URL} description="AtCoder" />
       上の問題について、取組み状況を記録していくサイトです。 各問題が細かく難易度付けされており、必要な知識を段階的に習得できます。
     </P>
+
     <div class="flex flex-wrap justify-center items-center">
-      <Button href="/problems" class="w-full sm:w-5/6 md:w-1/3 m-2">問題一覧へ</Button>
-      <Button color="alternative" href="/about" class="w-full sm:w-5/6 md:w-1/3 m-2">
+      <Button href={WORKBOOKS_PAGE} class="w-full sm:w-5/6 md:w-1/3 m-2">問題集へ</Button>
+      <Button color="alternative" href={ABOUT_PAGE} class="w-full sm:w-5/6 md:w-1/3 m-2">
         使い方を見る
         <ArrowRightOutline class="w-3.5 h-3.5 ml-2" />
       </Button>
@@ -60,19 +54,24 @@
   <div class="mx-auto w-11/12 md:w-5/6">
     <!-- 主要な機能 + スクリーンショット -->
     <!-- FIXME: 重複部分をコンポーネント化 -->
-    <Heading tag="h2" class="mt-20 mb-3" customSize="text-xl font-medium  md:text-2xl lg:text-3xl">
-      問題の回答状況を自分で記録できる
+    <!-- 問題集 -->
+    <Heading
+      tag="h2"
+      class="mt-14 xs:mt-24 mb-3"
+      customSize="text-xl font-medium md:text-2xl lg:text-3xl"
+    >
+      問題集で得意を伸ばす・苦手を克服
     </Heading>
 
     <div class="text-lg text-gray-800 dark:text-gray-300">
-      <p class="mb-2">問題は17段階で難易度付けされており、自分の実力に合ったものを探せます。</p>
-      <p class="mb-16">回答状況は、「AC」「解説AC」「挑戦中」「未挑戦」から選べます。</p>
+      <p class="mb-2">例題・類題を通して、各トピックの基礎から応用的な方法まで身につけられます。</p>
+      <p class="mb-10 xs:mb-16">回答状況は、「AC」「解説AC」「挑戦中」「未挑戦」から選べます。</p>
     </div>
 
-    <div class="flex flex-wrap justify-center items-center mb-20">
+    <div class="flex flex-wrap justify-center items-center mb-8 xs:mb-12">
       <video
         width="720"
-        src="https://github.com/user-attachments/assets/88b19b21-fda3-4337-8266-9243b89e7096"
+        src="https://github.com/user-attachments/assets/5d714055-e2fa-47e7-aa50-6e34a977fa58"
         autoplay
         muted
         controls
@@ -81,30 +80,40 @@
     </div>
 
     <div class="flex flex-wrap justify-center items-center">
-      <Button href="/problems" class="w-full sm:w-5/6 md:w-1/3 m-2">問題一覧へ</Button>
+      <Button href={WORKBOOKS_PAGE} class="w-full sm:w-5/6 md:w-1/3 m-2">問題集へ</Button>
     </div>
 
-    <Heading tag="h2" class="mt-36 mb-3" customSize="text-xl font-medium md:text-2xl lg:text-3xl">
-      (開発中) 問題集で得意を伸ばす・苦手を克服
+    <!-- 問題一覧 -->
+    <Heading
+      tag="h2"
+      class="mt-14 xs:mt-20 mb-3"
+      customSize="text-xl font-medium  md:text-2xl lg:text-3xl"
+    >
+      問題の回答状況を自分で記録できる
     </Heading>
 
     <div class="text-lg text-gray-800 dark:text-gray-300">
-      <p class="mb-2">例題・類題を通して、各トピックの基礎から応用的な方法まで身につけられます。</p>
-      <p class="xs:mb-16">注: 予告なく変更される場合があります。ご了承ください。</p>
+      <p class="mb-10 xs:mb-16">
+        問題は17段階で難易度付けされており、自分の実力に合ったものを探せます。
+      </p>
     </div>
 
     <div class="m-4">
       <Carousel
         duration={3000}
-        images={workBookImages}
+        images={problemImages}
         imgClass="object-contain h-full w-fit"
         let:Controls
-        class="min-h-[540px]"
+        class="min-h-[300px] xs:min-h-[400px] md:min-h-[540px] mb-8 xs:mb-12"
       >
         <Controls class="items-center text-primary-700 pt-4" />
       </Carousel>
     </div>
 
-    <p class="xs:mb-16"></p>
+    <div class="flex flex-wrap justify-center items-center">
+      <Button href={PROBLEMS_PAGE} class="w-full sm:w-5/6 md:w-1/3 m-2">問題一覧へ</Button>
+    </div>
+
+    <p class="mb-10 xs:mb-16"></p>
   </div>
 </div>