feat: トップページの整備

src/app/about/page.tsx

@@ -13,85 +13,91 @@ export const metadata: Metadata = {
 export default function About() {
   return (
     <div className={style.container}>
-      <div className={style.heroBox}>
-        <HeroImage title='Maximumの活動について' type='default' blur={true} />
-        <Breadcrumb
-          items={[
-            { title: 'Top', href: '/' },
-            { title: 'Maximumの活動について', href: '/about' },
-          ]}
-        />
+      <div className={style.main}>
+        <div className={style.heroBox}>
+          <HeroImage title='Maximumの活動について' type='default' blur={true} />
+          <Breadcrumb
+            items={[
+              { title: 'Top', href: '/' },
+              { title: 'Maximumの活動について', href: '/about' },
+            ]}
+          />
+        </div>
+        <main className={style.box}>
+          <h2 className={style.title}>
+            埼玉大学プログラミングサークル　
+            <span className={style.highlight}>Maximum</span>とは？
+          </h2>
+          <p className={style.text}>
+            Maximumは、
+            <span className={style.highlight}>
+              国際大学対抗プログラミングコンテスト（ICPC）
+            </span>
+            へ参加し、 良い成績を上げるために成立したプログラミング研究会です。
+            2022年度からは、
+            <span className={style.highlight}>競技プログラミング</span>
+            のみならず、
+            <span className={style.highlight}>Web</span>や
+            <span className={style.highlight}>その他プログラミング</span>
+            の知識を高める活動を行っています。
+          </p>
+          <h2 className={style.title} id='kyopro'>
+            競技プログラミング
+          </h2>
+          <h3 className={style.subtitle}>活動内容</h3>
+          <p className={style.text}>
+            国際大学対抗プログラミングコンテスト(ICPC)に参加し、良い成績を上げるための活動を行っています。
+            具体的には、ICPCなどの各種プログラミングコンテストへの参加、週2回の勉強会などを行っています。
+          </p>
+          <img className={style.image} src='/images/about.png' alt='活動風景' />
+          <h3 className={style.subtitle}>競技プログラミングとは？</h3>
+          <p className={style.text}>
+            皆さんご存じの通り、コンピュータはとても高速に計算してくれます。
+            しかし、その速さには限界があり、世界中の多くの問題は
+            そのままコンピュータで解くと数万年・数億年単位の時間を要すると言われています。
+            そこで、こういった問題の答えを高速かつ正確に出すための工夫を行って、
+            プログラムとして記述するのが競技プログラミングです。
+          </p>
+          <p className={style.text}>
+            工学部情報工学科のパンフレットに記載していただきました！
+            例題も掲載されているので是非ご覧ください。
+            <Link
+              className={style.link}
+              href='http://www.ics.saitama-u.ac.jp/content/uploads/pamphlet/ics_pamphlet.pdf'
+              target='_blank'
+            >
+              情報工学科パンフレット（PDF）
+            </Link>
+          </p>
+          <h2 className={style.title} id='webken'>
+            Web研究会
+          </h2>
+          <h3 className={style.subtitle}>講習</h3>
+          <p className={style.text}>
+            WebサイトやWebサーバーを制作・構築・運用するための基礎を一通り学びます。講習ではHTML,CSS,JavaScriptを触ります。
+            Webに関しては
+            <strong className={style.highlight}>アウトプットこそ正義</strong>
+            なので「勉強する」よりも
+            「作りながらその都度調べる」というフローで効率の良い学習ができるようサポートします!
+          </p>
+          <h3 className={style.subtitle}>サイト制作・アプリ制作</h3>
+          <p className={style.text}>
+            一通り基礎を学び終えたら、実際にX（旧twitter）やNoteのような投稿ができるサービスを
+            自分たちで作ってもらいます。
+          </p>
+          <h3 className={style.subtitle}>パフォーマンスチューニング</h3>
+          <p className={style.text}>
+            Webの醍醐味は「制作」だけではありません。
+            この世には「遅すぎる」や「セキュリティ的に危険」などの様々な問題を抱えたサイトがあります。
+            こんなサイトを高速化したり安全に書き換えたりなどするのも、もちろんWebの範疇です。
+            一見競技性のないWebの分野でも、こういった問題を解決する力を競う大会がいくつか開催されており、
+            そこに出場することを目標にトレーニングもします。
+          </p>
+          <p className={style.text}>
+            詳しく知りたい方は大会参加記を見てみてください。
+          </p>
+        </main>
       </div>
-      <main className={style.box}>
-        <h2 className={style.title}>
-          埼玉大学プログラミングサークル　
-          <span className={style.highlight}>Maximum</span>とは？
-        </h2>
-        <p className={style.text}>
-          Maximumは、
-          <span className={style.highlight}>
-            国際大学対抗プログラミングコンテスト（ICPC）
-          </span>
-          へ参加し、 良い成績を上げるために成立したプログラミング研究会です。
-          2022年度からは、
-          <span className={style.highlight}>競技プログラミング</span>
-          のみならず、
-          <span className={style.highlight}>Web</span>や
-          <span className={style.highlight}>その他プログラミング</span>
-          の知識を高める活動を行っています。
-        </p>
-        <h2 className={style.title}>競技プログラミング</h2>
-        <h3 className={style.subtitle}>活動内容</h3>
-        <p className={style.text}>
-          国際大学対抗プログラミングコンテスト(ICPC)に参加し、良い成績を上げるための活動を行っています。
-          具体的には、ICPCなどの各種プログラミングコンテストへの参加、週2回の勉強会などを行っています。
-        </p>
-        <img className={style.image} src='/images/about.png' alt='活動風景' />
-        <h3 className={style.subtitle}>競技プログラミングとは？</h3>
-        <p className={style.text}>
-          皆さんご存じの通り、コンピュータはとても高速に計算してくれます。
-          しかし、その速さには限界があり、世界中の多くの問題は
-          そのままコンピュータで解くと数万年・数億年単位の時間を要すると言われています。
-          そこで、こういった問題の答えを高速かつ正確に出すための工夫を行って、
-          プログラムとして記述するのが競技プログラミングです。
-        </p>
-        <p className={style.text}>
-          工学部情報工学科のパンフレットに記載していただきました！
-          例題も掲載されているので是非ご覧ください。
-          <Link
-            className={style.link}
-            href='http://www.ics.saitama-u.ac.jp/content/uploads/pamphlet/ics_pamphlet.pdf'
-            target='_blank'
-          >
-            情報工学科パンフレット（PDF）
-          </Link>
-        </p>
-        <h2 className={style.title}>Web研究会</h2>
-        <h3 className={style.subtitle}>講習</h3>
-        <p className={style.text}>
-          WebサイトやWebサーバーを制作・構築・運用するための基礎を一通り学びます。講習ではHTML,CSS,JabaScriptを触ります。
-          Webに関しては
-          <strong className={style.highlight}>アウトプットこそ正義</strong>
-          なので「勉強する」よりも
-          「作りながらその都度調べる」というフローで効率の良い学習ができるようサポートします!
-        </p>
-        <h3 className={style.subtitle}>サイト制作・アプリ制作</h3>
-        <p className={style.text}>
-          一通り基礎を学び終えたら、実際にX（旧twitter）やNoteのような投稿ができるサービスを
-          自分たちで作ってもらいます。
-        </p>
-        <h3 className={style.subtitle}>パフォーマンスチューニング</h3>
-        <p className={style.text}>
-          Webの醍醐味は「制作」だけではありません。
-          この世には「遅すぎる」や「セキュリティ的に危険」などの様々な問題を抱えたサイトがあります。
-          こんなサイトを高速化したり安全に書き換えたりなどするのも、もちろんWebの範疇です。
-          一見競技性のないWebの分野でも、こういった問題を解決する力を競う大会がいくつか開催されており、
-          そこに出場することを目標にトレーニングもします。
-        </p>
-        <p className={style.text}>
-          詳しく知りたい方は大会参加記を見てみてください。
-        </p>
-      </main>
     </div>
   );
 }

src/app/about/styles.module.css

@@ -1,20 +1,19 @@
 .container{
-    background-color: #f1f1f1;
-    margin: 0 auto;
-    padding-top: 72xp;
+    display: flex;
+    flex-direction: column;
 }
-.heroBox{
+.main {
+    background-color: #f1f1f1;
     padding-top: 72px;
 }
 .box{
     background-color: #fff;
     width: 54rem;
     max-width: 100%;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    margin-bottom: 48px;
-    margin-left: auto;
-    margin-right: auto;
+    box-shadow: 2px 2px 4px gray;
+    margin: 40px auto;
     padding: 24px;
+    box-sizing: border-box
 }
 .title{
     font-size: 2rem;

src/app/global.css

@@ -2,3 +2,7 @@ body {
   margin: 0;
   font-family: var(--font-inter), var(--font-notosansjp), sans-serif;
 }
+
+html {
+  scroll-padding-top: 80px;
+}

src/app/news/page.tsx

@@ -1,8 +1,8 @@
 import path from 'path';
 import { Metadata } from 'next';
-import Link from 'next/link';
 import { getMarkdowns } from '../../utils/markdown';
 import style from './page.module.scss';
+import { Breadcrumb } from '@/components/Breadcrumb';
 import { HeroImage } from '@/components/HeroImage';
 import { NewsPageList } from '@/components/news-page-list';
 
@@ -26,16 +26,14 @@ export default async function News() {
     <div className={style.container}>
       <main className={style.main}>
         <div className={style.hero}>
+          <HeroImage type='default' title='新着情報' blur={true} />
+          <Breadcrumb
+            items={[
+              { title: 'Top', href: '/' },
+              { title: '新着情報', href: '/news' },
+            ]}
+          />
           <HeroImage title='新着情報' type='default' blur={true} />
-          <div className={style.breadcrumb}>
-            <Link href='/' className={style.breadcrumbLink}>
-              Top
-            </Link>
-            <p className={style.breadcrumbLink}>&nbsp;&gt;&nbsp;</p>
-            <Link href='/news' className={style.breadcrumbLink}>
-              News
-            </Link>
-          </div>
         </div>
         <div className={style.contents}>
           <h1 className={style.contentTitle}>新着情報</h1>

src/app/page.module.scss

@@ -136,7 +136,6 @@
   .imgBox1 {
     width: 55%;
     height: 464px;
-
     right: 0;
   }
 
@@ -204,6 +203,7 @@
   box-sizing: border-box;
   position: relative;
   z-index: 1;
+  box-shadow: 2px 2px 4px gray;
 }
 
 .activityWeb {
@@ -212,6 +212,7 @@
   box-sizing: border-box;
   position: relative;
   z-index: 1;
+  box-shadow: 2px 2px 4px gray;
 }
 
 .activityLeftButtonContainer {
@@ -245,6 +246,7 @@
   z-index: 0;
   background-color: gray;
   position: absolute;
+  box-shadow: 2px 2px 4px gray;
 }
 
 .bold {
@@ -266,6 +268,12 @@
   margin: 32px;
 }
 
+.topImages {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .main {
   padding-top: 72px;
 }

src/app/page.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import Link from 'next/link';
 import { HeroImage } from '../components/HeroImage';
 import { LinkButton } from '../components/LinkButton';
 import style from './page.module.scss';
@@ -26,7 +25,11 @@ export default function Home() {
              (週1回)の2つの活動を行っています。
           </p>
           <div className={clsx(style.imgBox1, style.imgBoxCommon)}>
-            {/* <img src='/images/hero.png' alt='Hero'/> */}
+            <img
+              src='/images/top1.png'
+              alt='TopImage1'
+              className={style.topImages}
+            />
           </div>
           <div className={style.activityCP}>
             <div className={style.activityTitle}>
@@ -45,19 +48,23 @@ export default function Home() {
             </p>
             <div className={style.activityLeftButtonContainer}>
               <div className={style.navigationForPC}>
-                <LinkButton href='#' variant='gray' size='medium'>
+                <LinkButton href='/about#kyopro' variant='gray' size='medium'>
                   Learn More
                 </LinkButton>
               </div>
               <div className={style.navigationForMobile}>
-                <LinkButton href='#' variant='gray' size='small'>
+                <LinkButton href='/about#kyopro' variant='gray' size='small'>
                   Learn More
                 </LinkButton>
               </div>
             </div>
           </div>
           <div className={clsx(style.imgBox2, style.imgBoxCommon)}>
-            {/* <img src='/images/hero.png' alt='Hero'/> */}
+            <img
+              src='/images/top2.png'
+              alt='topImage2'
+              className={style.topImages}
+            />
           </div>
           <div className={style.activityWeb}>
             <div className={style.activityTitle}>
@@ -73,12 +80,12 @@ export default function Home() {
             </p>
             <div className={style.activityRightButtonContainer}>
               <div className={style.navigationForPC}>
-                <LinkButton href='#' variant='gray' size='medium'>
+                <LinkButton href='/about#webken' variant='gray' size='medium'>
                   Learn More
                 </LinkButton>
               </div>
               <div className={style.navigationForMobile}>
-                <LinkButton href='#' variant='gray' size='small'>
+                <LinkButton href='/about#webken' variant='gray' size='small'>
                   Learn More
                 </LinkButton>
               </div>
@@ -97,12 +104,12 @@ export default function Home() {
             </p>
             <div className={style.activityOtherButtonContainer}>
               <div className={style.navigationForPC}>
-                <LinkButton href='#' variant='green' size='medium'>
+                <LinkButton href='/join' variant='green' size='medium'>
                   入会案内はこちら
                 </LinkButton>
               </div>
               <div className={style.navigationForMobile}>
-                <LinkButton href='#' variant='green' size='small'>
+                <LinkButton href='/join' variant='green' size='small'>
                   入会案内はこちら
                 </LinkButton>
               </div>