レスポンシブ対応（確認用） (#131)

* 🎨 style:レスポンシブデザインの実装、スタイルの手直し #64 * 🐛 fix: スタイルの修正 * 🐛 fix: (PC)ヒーロエリアのレイアウトのずれを修正 * 🐛 fix: READMEの目次を反映 * 🐛 fix: 不要なアイコンと画像の削除 * 🐛 fix: リスト周辺の不要なCSSの削除・修正 * 🐛 fix: アバウトセクションの修正とフッターの調整 * 🐛 fix: カラーの変更・スタイルの微調整 * 🐛 fix: 最終的なスタイルの微調整、コード内の不要な空白の削除
first-contributions-ja · Mar 29, 2024 · 2fdf550 · 2fdf550
1 parent b0caccb
commit 2fdf550
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 41 deletions.
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -43,7 +43,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ja">
-      <body className={`${inter.variable} ${notojp.variable} `}>
+      <body className={`${inter.variable} ${notojp.variable} text-stone-800`}>
         <Header />
         {children}
         <Footer />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,65 +1,115 @@
 import Image from "next/image";
 import { basePath } from "../../next.config";
-const BASE_PATH = basePath ? basePath : "";
+export const BASE_PATH = basePath ? basePath : "";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import { SITE_NAME } from "../../lib/constants";
+import KeyboardDoubleArrowDownSharpIcon from "@mui/icons-material/KeyboardDoubleArrowDownSharp";
 
 export default function Home() {
   return (
     <>
-      <section className="border-box mx-auto flex h-screen w-11/12 max-w-7xl items-center justify-center gap-16">
-        <div className="flex-1">
-          <p className="inline-block bg-zinc-100 px-4 py-2">
+      <section className="mx-auto mt-20 max-w-2xl px-6 lg:-mb-4 lg:mt-4 lg:flex lg:h-screen lg:max-w-7xl lg:items-center  lg:gap-10">
+        <div className="lg:flex-1">
+          <p className="hidden bg-stone-100 px-4 py-2 lg:inline-block">
             <span className="text-2xl font-bold text-red-600">1234</span>
-            人が参加中
+            人が参加中！
           </p>
-          <p className="mt-4 text-3xl font-bold">
+          <div className="my-8 w-full lg:hidden">
+            <Image
+              src={`${BASE_PATH}/logo.svg`}
+              width={640}
+              height={324}
+              alt="logo"
+              className="mx-auto w-[70%] max-w-[400px]"
+            />
+          </div>
+          <p className="mt-4 text-2xl font-bold lg:text-3xl">
             誰でも簡単に
             <br />
-            コントリビューション体験
+            コントリビューション体験 🚀
           </p>
-          <h2 className="mt-4 inline-block bg-red-600 px-4 py-2 text-5xl font-bold text-white">
+          <h2 className="mt-4 hidden bg-red-600 px-4 py-2 text-5xl font-bold text-white lg:inline-block">
             {SITE_NAME}
           </h2>
-          <p className="mt-4">
-            完全日本語のコントリビューション体験リポジトリです。フォーク、クローン、コミット、プルリクを行うことでOSSプロジェクト貢献方法を学べます。
-          </p>
+          <div className="mt-4 text-sm leading-relaxed lg:text-lg">
+            <p>
+              初心者でも簡単に参加できる日本語のオープンソースプロジェクトです。
+            </p>
+            <p>
+              Git/GitHubの実践的な使い方や、オープンソースでコラボレーションする作法を学べます
+              🌟
+            </p>
+          </div>
         </div>
-        <div className="flex-[1.1]">
+        <div className="hidden lg:inline-block lg:flex-[0.8]">
           <Image
-            src={`${BASE_PATH}/peoples.svg`}
+            src={`${BASE_PATH}/logo.svg`}
             width={640}
             height={324}
-            alt="peoples"
+            alt="logo"
             className="w-full"
           />
         </div>
+        <p className="mx-auto mb-10 mt-5 rounded-sm bg-stone-100 px-4 py-2 text-center lg:hidden">
+          <span className="text-2xl font-bold text-red-600">1234</span>
+          人が参加中！
+        </p>
       </section>
-      <section className="bg-red-600 px-10 py-12">
-        <div className="rounded-xl bg-white p-20">
-          <h2 className="text-center text-4xl font-bold tracking-tighter text-red-600">
-            簡単７ステップでコントリビューション！
+
+      <section className="bg-red-600 p-6 pb-0 pt-8 md:px-10 md:pt-10">
+        <div className="rounded-md bg-white px-5 pb-16 pt-12 md:p-20 md:pt-8">
+          <h2 className="text-center text-xl font-bold tracking-tighter text-red-600 md:pb-4 md:pt-12 md:text-3xl">
+            簡単 8 STEP でコントリビューション！
           </h2>
-          <ol className="mx-auto mb-8 mt-10 max-w-[500px] list-inside list-decimal text-2xl font-bold leading-loose">
-            <li>プロジェクトをフォークする</li>
-            <li>ローカルリポジトリにクローンする</li>
-            <li>ブランチを作成する</li>
-            <li>ソースコードを変更！</li>
-            <li>コミットメッセージを添えてコミットする</li>
-            <li>コミット内容をプッシュする</li>
-            <li>プルリクエストを作成する</li>
-          </ol>
-          <div className="mb-16 text-center text-2xl font-bold leading-relaxed">
-            <p className="mb-8 text-4xl text-red-600">⬇︎</p>
-            <p>マージされると……</p>
-            <p>🎉 あなたの変更がメインプロジェクトに反映されます 🎉</p>
+          <ul className="mx-auto mt-8 w-fit list-inside rounded-md px-2 text-lg font-bold md:text-xl md:leading-7 lg:mb-8 lg:mt-10 lg:flex lg:gap-16 lg:bg-stone-100 lg:px-12 lg:pb-4 lg:pt-8">
+            <div>
+              <li className="pb-4 md:pb-6">
+                <p className="mr-6 text-sm text-red-600 md:text-lg">STEP 1</p>
+                プロジェクトをフォーク
+              </li>
+              <li className="pb-4 md:pb-6">
+                <p className="mr-6 text-sm text-red-600 md:text-lg">STEP 2</p>
+                ローカルマシンへクローン
+              </li>
+              <li className="pb-4 md:pb-6">
+                <p className="mr-6 text-sm text-red-600 md:text-lg">STEP 3</p>
+                作業用ブランチを作成
+              </li>
+              <li className="pb-4 md:pb-6">
+                <p className="mr-6 text-sm text-red-600 md:text-lg">STEP 4</p>
+                変更を加える
+              </li>
+            </div>
+            <div>
+              <li className="pb-4 md:pb-6">
+                <p className="mr-6 text-sm text-red-600 md:text-lg">STEP 5</p>
+                変更をコミット
+              </li>
+              <li className="pb-4 md:pb-6">
+                <p className="mr-6 text-sm text-red-600 md:text-lg">STEP 6</p>
+                変更をプッシュ
+              </li>
+              <li className="pb-4 md:pb-6">
+                <p className="mr-6 text-sm text-red-600 md:text-lg">STEP 7</p>
+                プルリクエストを作成
+              </li>
+              <li className="pb-4 md:pb-6">
+                <p className="mr-6 text-sm text-red-600 md:text-lg">STEP 8</p>
+                レビューとフィードバックに対応
+              </li>
+            </div>
+          </ul>
+          <div className="mb-8 text-center font-bold leading-7 md:text-xl md:leading-8">
+            <KeyboardDoubleArrowDownSharpIcon className="mb-4 text-6xl text-red-600" />
+            <p>プルリクエストが承認されると</p>
+            <p>あなたの変更がメインプロジェクトに反映されます 🎉</p>
           </div>
           <div className="text-center">
             <a
               href="https://github.com/first-contributions-ja/first-contributions-ja.github.io"
-              className="rounded-xl bg-red-600 px-5 py-4 text-lg text-white transition hover:opacity-70"
+              className="rounded-md bg-red-600 px-3 py-3 text-sm text-white transition hover:opacity-70 md:px-5 md:py-4 md:text-lg"
             >
-              <GitHubIcon fontSize="large" className="mr-3 -translate-y-0.5" />
+              <GitHubIcon className="mr-3 -translate-y-0.5 text-3xl md:text-4xl" />
               詳しい手順はこちら
             </a>
           </div>

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -2,7 +2,7 @@ import { SITE_NAME } from "../../lib/constants";
 
 export default function Footer() {
   return (
-    <footer className="bg-red-600 py-2 text-center text-white">
+    <footer className="bg-red-600 py-4 text-center text-white">
       <small>&copy; {SITE_NAME}</small>
     </footer>
   );

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,15 +1,19 @@
 import Link from "next/link";
 import { SITE_NAME } from "../../lib/constants";
-import GitHubIcon from "@mui/icons-material/GitHub";
+import Image from "next/image";
+import { BASE_PATH } from "../app/page";
 
 export default function Header() {
   return (
-    <header className="fixed w-full py-6 backdrop-blur-sm">
+    <header className="fixed left-0 top-0 w-full py-3 backdrop-blur-sm lg:py-4">
       <Link href="/">
-        <h1 className="ml-7 inline text-xl font-bold text-red-600 transition hover:opacity-70">
-          <GitHubIcon
-            fontSize="large"
-            className="mr-4 -translate-y-0.5 text-red-600"
+        <h1 className="ml-3 inline text-lg font-bold text-red-600 transition hover:opacity-70 lg:ml-5">
+          <Image
+            src={`${BASE_PATH}/logo.svg`}
+            width={640}
+            height={324}
+            alt="logo"
+            className="mr-2 inline-block w-[40px] lg:mr-4"
           />
           {SITE_NAME}
         </h1>