Implement activity page

src/component/ActivityCard.tsx

@@ -0,0 +1,28 @@
+import { Image } from "antd"
+export const ActivityCard = (props: {
+    imgSrc: string,
+    title: string,
+    description: any,
+    subTitle: string
+}) => {
+    return (
+        <div className="d-flex flex-col">
+            <div className="p-5 w-100 rounded activity-card-layout md:activity-card-layout" style={{backgroundColor: "#424242"}}>
+                <div className="d-flex flex-column justify-content-center" style={{width: "100%"}}>
+                    <Image width={"100%"} src={props.imgSrc}></Image>
+                </div>
+                <div className="w-100 activity-card-description-layout" style={{width: "60%"}}>
+                    <div>
+                        <h5>{props.title}</h5>
+                        <div className="d-flex flex-row gap-1 text-white">
+                            {props.subTitle == undefined ? null : props.subTitle}
+                        </div>
+                    </div>
+                    <div className="text-white">
+                        {props.description}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

src/index.css

@@ -204,6 +204,31 @@ a {
   color: #4CAF50;
 }
 
+.activity-card-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.activity-card-description-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+@media (min-width: 992px) {
+  .activity-card-layout {
+    display: flex;
+    flex-direction: row;
+    gap: 3rem;
+  }
+  .activity-card-description-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+}
+
 @keyframes scroll {
   0% {
     transform: translateY(0px);

src/page/Activities.tsx

@@ -1,33 +1,37 @@
-export function Activities(){
-    const ActivitiesItem = (props: {
-        time: string
-        descriptionItem: JSX.Element
-    }) => {
-        return (
-            <tr>
-                <td className="border border-1">
-                    {props.time}
-                </td>
-                <td className="border border-1">
-                    {props.descriptionItem}
-                </td>
-            </tr>
-        )
-    }
+import { ActivityCard } from "../component/ActivityCard"
+import ActivityImage from "../assets/activity/activity-image.png"
+import ActivityImage2 from "../assets/activity/activity-image-2.png"
 
+export function Activities(){
+    const ActivityItems = [
+        {
+            imgSrc: ActivityImage,
+            title: "2024 AIS3 新型態暑期課程",
+            subTitle: "2024/01/01 - Taipei City",
+            description: "以落實產業資安實務為導向設計課程內容，並引導學員依興趣組成跨校跨級學習小組，製作與展示專題成果。錄取考核分為『Pre-exam資安實務測驗』錄取 110 人及『甄選』錄取 40 人，共錄取 150 人。"
+        },
+        {
+            imgSrc: ActivityImage2,
+            title: "2024 資安技能金盾初賽",
+            subTitle: "2024/01/01 - Taipei City",
+            description: "為加強學生資安實務技能，透過競賽機制，以實務與時事題型，提升學生解決資安問題能力與實戰經驗，分為初賽與決賽，參賽對象包含國中、高中及大專校院在學學生，每組最多3人，活動富教育意義且對升學有助益。"
+        },
+    ]
     return (
         <div className="activities">
             <h4 className="text-center fw-bold">歷史活動</h4>
-            <table className="w-100 table-bordered">
-                <ActivitiesItem
-                    time="2025.*.*"
-                    descriptionItem={
-                        <div>
-                            <p>敬請期待</p>
-                        </div>
-                    }
-                ></ActivitiesItem>
-            </table>
+            <div className="d-flex flex-column gap-3">
+                {ActivityItems.map((activity) => {
+                    return (
+                        <ActivityCard
+                            imgSrc={activity.imgSrc}
+                            title={activity.title}
+                            subTitle={activity.subTitle}
+                            description={activity.description}
+                        />
+                    )
+                })}
+            </div>
         </div>
     )
 }