true-runes · nikukyugamer · Jul 1, 2023 · Jul 1, 2023 · Jul 1, 2023 · Jul 1, 2023
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "election-bulletin-2023",
   "version": "0.1.0",
   "devDependencies": {
+    "@next/font": "^13.4.7",
     "@types/node": "20.3.3",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,8 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
 
-/* :root {
+:root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
@@ -17,11 +18,12 @@
 }
 
 body {
+  font-family: 'Noto Serif JP', serif;
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(
       to bottom,
       transparent,
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
-} */
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,6 @@
 import './globals.css'
-import { Inter } from 'next/font/google'
 import Script from 'next/script'
 
-const inter = Inter({ subsets: ['latin'] })
-
 const siteName = '幻水総選挙2023 投票対象リスト'
 const description =
   '幻水総選挙2023における投票対象のリストを紹介しているサイトです。'
@@ -60,7 +57,7 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className={inter.className}>{children}</body>
+      <body>{children}</body>
     </html>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,93 +1,52 @@
-import cities from '@/app/resource/cities.json'
-
-async function mySrvComponent() {
-  return cities
-}
-// export const generateStaticParams = async () => {
-//   const response = await fetch('https://jsonplaceholder.typicode.com/users')
-//   const users: any = await response.json()
-
-//   return users.map((user: any) => ({
-//     id: user.id.toString(),
-//   }))
-//   // const filePath = './resource/cities.json'
-
-//   // return cities
-// }
+import Link from 'next/link'
 
 const Home = async () => {
-  const holidays: any = await mySrvComponent()
-
   return (
-    <div className="relative overflow-hidden">
+    <div className="relative overflow-hidden pt-20">
       <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-24">
         <div className="text-center">
-          <h1 className="text-4xl sm:text-6xl font-bold text-black dark:text-black py-2">
-            幻水総選挙2023 街部門
-          </h1>
-          <h1 className="text-4xl sm:text-6xl font-bold text-black dark:text-black py-2">
-            対象名所一覧
+          <h1 className="text-5xl sm:text-6xl font-bold text-white dark:text-white py-3">
+            幻水総選挙2023
           </h1>
-        </div>
-        <div className="my-6">
-          <hr />
-        </div>
-
-        <h2 className="pl-1 pb-1">五十音</h2>
-        <select className="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
-          <option selected>全て</option>
-          <option>ア行</option>
-          <option>カ行</option>
-          <option>サ行</option>
-          <option>その他</option>
-        </select>
-
-        <div className="my-6" />
-
-        <h2 className="pl-1 pb-1">作品名</h2>
-        <select className="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
-          <option selected>全て</option>
-          <option>I</option>
-          <option>II</option>
-          <option>III</option>
-          <option>IV</option>
-          <option>V</option>
-        </select>
-      </div>
-
-      <div className="text-center">
-        <h1 className="text-4xl sm:text-6xl font-bold text-black dark:text-black py-2">
-          キャラ
-        </h1>
-
-        {/* holidaysを箇条書き */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          {holidays.map((city: any, index: number) => (
-            <div className="hoge" key={index}>
-              <p className="fuga">
-                {city.city}（{city.title}）
-              </p>
-            </div>
-          ))}
+          <h3 className="text-4xl sm:text-4xl font-bold text-white dark:text-white py-3">
+            投票対象リスト
+          </h3>
+          <div className="my-6">
+            <hr />
+          </div>
+          <p className="text-3xl py-4">
+            {/* リンクに下線を引きたい。下線と文字の縦の間隔は少し空けたい  */}
+            <Link
+              href="/cities"
+              passHref
+              style={{
+                textDecoration: 'underline',
+                textUnderlineOffset: '0.2em',
+              }}
+            >
+              本拠地施設キャラ部門
+            </Link>
+          </p>
+          <p className="text-3xl py-4">
+            <Link
+              href="/cities"
+              passHref
+              style={{
+                textDecoration: 'underline',
+                textUnderlineOffset: '0.2em',
+              }}
+            >
+              街部門
+            </Link>
+          </p>
+          <div className="my-6">
+            <hr />
+          </div>
+          <div className="py-2">2023 （株）幻水総選挙</div>
         </div>
       </div>
     </div>
   )
 }
 
 export default Home
-
-{
-  /* // return (
-//   <div>
-//     {/* cities を回す indexをユニークにつける */
-}
-//     {holidays.map((city: any, index: number) => (
-//       <div classNameName="hoge" key={index}>
-//         <p classNameName="fuga">
-//           {city.title}::{city.country}::{city.city}
-//         </p>
-//       </div>
-//     ))}
-//   </div>
-// ) */}
diff --git a/yarn.lock b/yarn.lock
@@ -119,6 +119,11 @@
   dependencies:
     glob "7.1.7"
 
+"@next/font@^13.4.7":
+  version "13.4.7"
+  resolved "https://registry.yarnpkg.com/@next/font/-/font-13.4.7.tgz#32f9e2c4a856e23370d2be4b46eddaccce11b88d"
+  integrity sha512-l28ifb3pjKznQeXmiCD5VXkmqdpMrcUQMr4ZChAgTKrjckl/aGyRLOIlL/ABhTHmzMujdt/TTWUsdABArNK5gA==
+
 "@next/[email protected]":
   version "13.4.7"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.7.tgz#5e36c26dda5b0bc0ea15d8555d0abd71a1ef4b5d"