first-contributions-ja · kagomen · Mar 19, 2024 · Mar 17, 2024 · Mar 18, 2024
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/peoples.svg b/public/peoples.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,12 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"); */
-
-
 body {
   font-family: var(--font-inter), var(--font-notojp);
+  @apply text-zinc-900;
 }
 
 /* https://zenn.dev/var/articles/3cd463f2388a35 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -25,7 +25,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ja">
-      <body className={`${inter.variable} ${notojp.variable}`}>{children}</body>
+      <body className={`${inter.variable} ${notojp.variable}`}>
+        <header>ヘッダー</header>
+        {children}
+        <footer>&copy; first-contributions-ja</footer>
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,17 +1,40 @@
+import Image from "next/image";
+import { basePath } from "../../next.config";
+const BASE_PATH = basePath ? basePath : "";
+
 export default function Home() {
   return (
     <>
-      {/* <div className="font-noto-sans-jp">ようこそ</div>
-      <div className="font-inter">ようこそ</div> */}
-      <div>
-        Englishようこそ
-      </div>
-      <span>
-        English
-      </span>
-      <span>
-        ようこそ
-      </span>
+      <section className="flex justify-center max-w-7xl w-11/12 mx-auto gap-16 border-box h-screen items-center">
+        <div className="flex-1">
+          <p
+            className="bg-zinc-100 inline-block px-4 py-2">
+            <span className="text-2xl font-bold text-red-600">
+              1234
+            </span>人が参加中
+          </p>
+          <p
+            className="text-3xl font-bold mt-4">
+            誰でも簡単に<br />コントリビューション体験
+          </p>
+          <h2
+            className="bg-red-600 text-white text-5xl inline-block px-4 py-2 font-bold mt-4">first-contributions-ja</h2>
+          <p
+            className="mt-4">
+            完全日本語のコントリビューション体験リポジトリです。フォーク、クローン、コミット、プルリクを行うことでOSSプロジェクト貢献方法を学べます。
+          </p>
+        </div>
+        <div className="flex-[1.1]">
+          <Image
+            src={`${BASE_PATH}/peoples.svg`}
+            width={640}
+            height={324}
+            alt="peoples"
+            className="w-full"
+          />
+        </div>
+      </section>
+      <section>ABOUT</section>
     </>
   );
 }