資格情報を記載

src/app/achievements/list-styles.module.scss

@@ -1,7 +1,7 @@
 @use 'src/app/variables';
 
 @media (max-width: variables.$tablet-width) {
-    .container{
+    .container {
         margin: 0px 24px;
     }
 
@@ -12,12 +12,12 @@
 }
 
 @media (min-width: variables.$tablet-width) {
-    .container{
+    .container {
         margin: auto;
         max-width: variables.$pages-max-width;
     }
 
-    .title{
+    .title {
         font-size: 2rem;
         font-weight: bold;
         margin-left: 55px;
@@ -29,12 +29,55 @@
     background-color: variables.$background-color;
 }
 
-.heroBox{
+.heroBox {
     padding-top: 72px;
 }
 
-.container{
+.container {
     background-color: #F1F1F1;
-    padding: 88px 0 103px;
+    padding: 40px 16px 103px;
+}
+
+.content {
+    width: 100%;
+    margin: 0 auto;
+}
+
+.content table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 1px;
+}
+
+.content table thead {
+    background-color: #04781e;
+    color: #ffffff;
+}
+
+.content table thead th {
+    font-weight: medium;
+    font-size: 1.125rem;
+    padding: 10px;
+}
+
+.content table tbody th {
+    font-size: 1.25rem;
+}
+
+.content table tbody td {
+    font-size: 1.125rem;
+    padding: 4px;
+    text-align: center;
+}
+
+.content table tbody tr:nth-child(even) {
+    background-color: #d9d9d9;
+}
+
+.content table tbody tr:nth-child(odd) {
+    background-color: #ececec;
 }
 
+.content img {
+    width: 100%;
+}

src/app/achievements/page.tsx

@@ -23,6 +23,35 @@ export default async function Achievements() {
         />
       </div>
       <div className={style.container}>
+        <h2 className={style.title}>保有資格</h2>
+        <div className={style.content}>
+          <p>
+            当サークルの部員が現在保有している資格について記載します。(2024年9月時点)
+          </p>
+
+          <table>
+            <thead>
+              <tr>
+                <th>資格名</th>
+                <th>保有人数</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>情報処理安全確保支援士（登録セキスペ）</td>
+                <td>1名</td>
+              </tr>
+              <tr>
+                <td>応用情報技術者</td>
+                <td>7名</td>
+              </tr>
+              <tr>
+                <td>基本情報技術者</td>
+                <td>3名</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
         <h2 className={style.title}>参加した大会</h2>
         <AchievementList />
       </div>

src/components/AchievementCard/AchievementCard.module.scss

@@ -3,7 +3,7 @@
 @media (min-width: variables.$tablet-width) {
     .link{
         display: flex;
-        margin: 32px;
+        margin: 32px 0;
     }
 
     .imageBox{