Merge pull request #11 from gdsc-ncku/yeyeleaf

add: About Page

src/components/MemberCard.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="max-w-[1200px] flex flex-wrap lg:justify-between justify-center mt-16">
+        <div v-for="(item, index) in memberInfo" :key=index class="w-[362px] h-[177px] border border-content rounded-[40px] bg-white flex p-6 items-center justify-between mb-7">
+            <div class="lg:w-[100px] lg:h-[100px] w-[80px] h-[80px] rounded-full bg-gray-500"></div>
+            <div class="lg:w-[200px] w-[160px]">
+                <p class="text-primary text-xs mb-2">{{ item.department }}・{{ item.class }}</p>
+                <p class="text-content font-bold text-xl mb-2">{{ item.name }}</p>
+                <p class="text-content text-xs mb-2">{{ item.tags }}</p>
+                <p class="text-content text-xs font-bold">♫ {{ item.song }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import memberInfo from "../data/memberInfo.json";
+</script>

src/data/memberInfo.json

@@ -0,0 +1,24 @@
+[
+    {"department": "總籌部", "name": "陳俊安", "class": "資訊 115", "tags": "#Colten #現在是早上六點嗎  #我幫你留了一些 bug 等你去修", "song": "琳誼 Ring - 在某個角落努力的你"},
+    {"department": "總籌部", "name": "張百鴻", "class": "資訊 115", "tags": "#水豚愛好者 #我只有腳踏車 #晚餐吃拉麵好不好", "song": "The Crane - Don't Mind"},
+    {"department": "秘書部", "name": "廖芃蓁", "class": "企管 114", "tags": "#古靈精怪可可愛愛 #減肥困難戶 #深夜聽歌emo的INFP", "song": "Newleans - ETA"},
+    {"department": "秘書部", "name": "黃友誠", "class": "牙醫 117", "tags": "#咖喱飯一定要拌在一起 #重度選擇障礙 #路上觀察學家", "song": "葉璦菱 - 我心已打烊"},
+    {"department": "公關部", "name": "陳毅洋", "class": "政治 114", "tags": "#ENFP轉INFP #天氣之子  #小池不揪", "song": "Newleans - Super Shy"},
+    {"department": "公關部", "name": "廖韻淇", "class": "企管 115", "tags": "#我怕鬼 #防曬大師 #一餐要一個半小時", "song": "Lauv - Steal The Show"},
+    {"department": "學術部", "name": "趙蓁妤", "class": "會計 115", "tags": "#粉紅泡泡  #奶茶控 #熬夜技能加載中", "song": "IU - Hold My Hand"},
+    {"department": "學術部", "name": "楊郁涵", "class": "會計 115", "tags": "#極度龜毛 #藍色小精靈 #一天一拿鐵", "song": "Justin Bieber - Love Yourself"},
+    {"department": "學術部", "name": "詹博堯", "class": "資訊 115", "tags": "#傑博瑞是一隻水母  #感冒要吃冰 #人生是場派對而我是pinata", "song": "SZA - Snooze"},
+    {"department": "策展部", "name": "陳雨婕", "class": "生技 115", "tags": "#看起來永遠想睡覺  #jajas #喜歡吃東西（也喜歡減肥）", "song": "Dua Lipa - Dance The Night"},
+    {"department": "策展部", "name": "張鈞傑", "class": "能源 115", "tags": "#潔癖  #路怒症  #我最瘦", "song": "林宥嘉 - 我不是神，我只是平凡卻直拗愛著你的人"},
+    {"department": "策展部", "name": "游棨巖", "class": "光電 115", "tags": "#暈船症候群 #愛吃鬼巧達 #小遲五分鐘後到", "song": "Justin Bieber - Off My Face"},
+    {"department": "影紀部", "name": "藍宇杰", "class": "工資 115", "tags": "#B壞A事Bang不N見G  #若能放棄絕不努力 #沒有什麼是Photoshop解決不了的事情", "song": "聖結石 - 朋友BANG不見"},
+    {"department": "影紀部", "name": "陳詠涵", "class": "醫技 115", "tags": "#說走就走型 #探店小天才 #內向悶騷but大喇喇", "song": "AJ Mitchell - Hi-Lo"},
+    {"department": "影紀部", "name": "周怡潔", "class": "中文 114", "tags": "#躲貓貓 #好餓吃啥 #太宇宙了！", "song": "163braces - 小船"},
+    {"department": "設計部", "name": "黃庭葳", "class": "工設 115", "tags": "#蟑螂作息＃拖延症末期 #蕃茄醬工作法", "song": "Mysta Rias - DETECT MY LOVE"},
+    {"department": "設計部", "name": "余嘉潓", "class": "工設 114", "tags": "#自然捲 #晚上做設計 #最喜歡喝仙女紅茶了", "song": "deca joins - 快樂"},
+    {"department": "設計部", "name": "文遠睿", "class": "工設 115", "tags": "#不愛吃早餐 #摔車仔 #吃火鍋只吃白飯", "song": "Harry Styles - Fine Line"},
+    {"department": "行銷部", "name": "張晏玟", "class": "企管 115", "tags": "#選擇困難 #冰淇淋怪獸 #減肥只是說說而已", "song": "厭世少年 - 比比"},
+    {"department": "行銷部", "name": "周沛儀", "class": "企管 115", "tags": "#台南油女 #熬夜小能手 #你要不要喝芭樂汁", "song": "The Crane- 還不想睡"},
+    {"department": "行銷部", "name": "方文廷", "class": "不分 114", "tags": "#方教授(?) #好像都沒睡 #irent愛用者", "song": "deca joins - 浴室"}
+]
+

src/views/About.vue

@@ -1,7 +1,46 @@
 <template>
-  <h1 class="text-3xl font-bold">關於單車節</h1>
-  <h1 class="text-3xl font-bold">關於單車節</h1>
-  <h1 class="text-3xl font-bold">關於單車節</h1>
-  <h1 class="text-3xl font-bold">關於單車節</h1>
+  <div class="max-w-[1200px] mx-auto text-xl text-content px-10">
+    <h1 class="text-[40px] font-bold my-5">活動宗旨</h1>
+    <div class="py-8 lg:px-12">
+      <p>成功大學自立校以來，累積深厚學術與人文底蘊，孕育無數學子於專業殿堂及社會各處無私奉獻；
+      歷來以社會參與為經營目標，形塑特殊使命與學生特質。冀透過本次活動，向大眾展示成功大學作為全臺綜合型大學所能提供的學習資源、師資設備、產學合作，
+      以溫馨有感的豐富活動，做為全台高中生迷惘未來時之引路人。</p>
+      <h2 class="text-primary font-bold text-2xl my-2 mt-12">驅散名為迷惘的迷霧</h2>
+      <p>猶記得高三那年，一出學測考場，人生頓失方向。該讀哪間學校、報什麼學系？此起彼落的疑問，成了每個考生心中的困擾，也迴盪在每次與父母、導師的談話間。不管閱覽了多少網路資料，你仍然躊躇不前，甚至更加心焦
+        ——這樣的選擇是對的嗎？去了那裡會不會後悔？<br><br>
+        已然進入所屬科系的我們，知道這樣的輪迴仍然不斷上演。所以我們自問，該如何消弭高中生們內心的不安。曾經籠罩我們的迷惘，就由我們來驅散。
+        這份理念，就是單車節的初心。</p>
+    </div>
+    <h1 class="text-[40px] font-bold my-5">單車節緣起</h1>
+    <div class="py-8 lg:px-12">
+      <p>成功大學乃全台首屈一指的綜合性大學，以「教育創新」、「研究卓越」、「社會責任」為主軸，致力於打造「教學、研究與社會責任」整體卓越的未來大學，
+        在學術研究及產學合作皆扮演著重要角色，多年來，莘莘成大學子或獻身或創立台灣企業，和台灣社會共同奮鬥一起成就。成大亦是歷史悠久的全臺首學，
+        位居交通樞紐，校地遼闊，生活圈完備發達，擁有各具特色之十一大校區，承襲豐富人文底蘊並與時俱進，發展創新。
+        成大單車節，以成大學生上課通勤之交通工具命名，乘載莘莘學子勤奮向學之正面形象，亦與青春活力之意象連結，期許與成功大學一齊踏實向前，邁向未來。
+        成大單車節於今年邁入第十七個年頭，在縮小朝野、南北、城鄉高等教育資源資訊上，扮演了舉足輕重角色，望奠基於歷屆籌備之優良傳統，於前人打拚的豐富基礎上，
+        結合專案創新，提供全臺學子更新穎、多元的教育資訊，並推廣成功大學之校園人文情懷。同時呼應校園之溫馨風氣，為成功大學塑造良好形象，展現學子自發性肩負的社會責任，
+        以人為本，關懷為養分的理念，與成功大學團隊攜手並進，齊航向百年，躍升精彩。</p>
+      <h2 class="text-primary font-bold text-2xl my-2 mt-12">什麼是單車節？</h2>
+      <p>單車節是所謂的大學科系博覽會，是由成大學生來組織活動並主導進行。活動當天主要開放給對成大有興趣的高中生或家長參觀，亦會有各科系來擺攤並介紹。</p>
+      <h2 class="text-primary font-bold text-2xl my-2 mt-12">為什麼以單車為命名？</h2>
+      <p>由於單車對於成大學生來說是生活中必不可少的，剛進成大的共同回憶非屬騎單車上學和買東西莫屬，也成為了一個成大生的象徵，因此我們用單車作為成大的信物，藉此更能與「成大」本身做連結。</p>
+      <h2 class="text-primary font-bold text-2xl my-2 mt-12">舉辦單車節的初衷</h2>
+      <p>我們都曾是迷惘且不知所措的高中生，時常對於未來的不確定性感到不安。尤其在選擇科系的時候，因為不清楚、不瞭解科系。所以最常問的肯定是：「我適合這個科系嗎？」<br>
+        這時候需要的就是一個引路人，替他們解決困惑。為了幫助他們更瞭解這些科系，單車節這個活動因而誕生。希望他們藉由學長姐的親身經歷，站在我們的肩膀上，能將前方的路看得更清楚，
+        也能對自己將要面臨的選擇更加確定，那就是我們舉辦此活動的初衷和宗旨。</p>
+    </div>
+    <h1 class="text-[40px] font-bold my-5">認識籌備團隊</h1>
+    <MemberCard />
+    <h1 class="text-[40px] font-bold my-5">歷年活動</h1>
+    <div class="flex lg:justify-between justify-center flex-wrap mt-12">
+      <div class="w-[340px] h-[192px] bg-slate-500 mb-10"></div>
+      <div class="w-[340px] h-[192px] bg-slate-500 mb-10"></div>
+      <div class="w-[340px] h-[192px] bg-slate-500 mb-10"></div>
+      <div class="w-[340px] h-[192px] bg-slate-500 mb-10"></div>
+    </div>
+  </div>
 </template>
 
+<script setup>
+import MemberCard from '../components/MemberCard.vue';
+</script>