Merge pull request #7 from sitcon-tw/mobile

Merge new style to main
sitcon-tw · Jun 6, 2024 · f16bb55 · f16bb55
2 parents 3ef024c + 2c5fbf1
commit f16bb55
Show file tree

Hide file tree

Showing 48 changed files with 4,896 additions and 646 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+package-manager-strict=false
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "deepscan.ignoreConfirmWarning": true
+}
diff --git a/components/About.tsx b/components/About.tsx
@@ -18,11 +18,14 @@ function AboutContent({ children }: { children: React.ReactNode }) {
 }
 export default function About() {
   return (
-    <div className="container">
+    <div className="container bg-green-900">
       <AboutSection>
         <AboutTitle>關於 SITCON</AboutTitle>
         <AboutContent>
-          SITCON 學生計算機年會是由學生自發舉辦，投身學生資訊教育與推廣開源精神的社群， 也是一個由學生主辦、學生擔任講者、以學生為主軸的資訊研討會，給學生們一個發表交流技術的舞台。 除了技術研討之外，還有許多從學生角度出發的經驗分享、專題研究成果或探討學生相關議題等等議程。我們也曾舉辦黑客松、工作坊，和各地學校社團舉辦聯合講座等等。
+          SITCON
+          學生計算機年會是由學生自發舉辦，投身學生資訊教育與推廣開源精神的社群，
+          也是一個由學生主辦、學生擔任講者、以學生為主軸的資訊研討會，給學生們一個發表交流技術的舞台。
+          除了技術研討之外，還有許多從學生角度出發的經驗分享、專題研究成果或探討學生相關議題等等議程。我們也曾舉辦黑客松、工作坊，和各地學校社團舉辦聯合講座等等。
           <div className="h-3" />
           <Link href={"/teams"} className="link">
             {" "}
@@ -37,8 +40,10 @@ export default function About() {
           Code of Conduct
         </AboutTitle>
         <AboutContent>
-          SITCON 歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加 SITCON，我們要求所有參與者閱讀社群的的行為準則（Code of Conduct），共同創造一個友善的環境。
-          {" "}
+          SITCON
+          歡迎不同身分、來自不同背景的與會者，也非常鼓勵女性、性少數與多元背景的參與者。為了讓大家都能愉快的參加
+          SITCON，我們要求所有參與者閱讀社群的的行為準則（Code of
+          Conduct），共同創造一個友善的環境。{" "}
           <Link href="/coc" className="link">
             行為準則（Code of Conduct）
           </Link>

diff --git a/components/ApplicationInfo.tsx b/components/ApplicationInfo.tsx
@@ -1,158 +1,138 @@
-import SectionTitle from "./SectionTitle";
-import { motion } from "framer-motion";
-import Button from "./Button";
-function PriceCard({ type, price }: { type: string; price: number }) {
-  return (
-    <div className="bg-[#013249] py-4 px-6 rounded-xl flex-1">
-      <div className="flex items-center justify-between pb-1 mb-1 text-xl border-b border-white border-opacity-20">
-        <div>{type}</div>
-        <div className="hidden sm:block">
-          {Array.from({ length: type === "團體報名" ? 3 : 1 }).map((_, i) => (
-            <i key={i} className={"bx bx-user"}></i>
-          ))}
-        </div>
-      </div>
-      <div className="md:text-xl">
-        <span className="mr-2 text-2xl font-bold md:text-3xl">
-          {price.toLocaleString()}
-        </span>
-        <span>元/人</span>
-      </div>
-    </div>
-  );
-}
-function ApplicationCard({
-  children,
-  icon,
-  dense = false,
-}: {
-  children: React.ReactNode;
-  icon?: string;
-  dense?: boolean;
-}) {
-  return (
-    <div
-      className={`bg-[#013249] rounded-xl ${dense ? "py-2 px-6" : "py-4 px-6 lg:py-6"} relative overflow-hidden mb-4`}
-    >
-      <div className="relative z-10">{children}</div>
-      {icon && (
-        <i
-          className={`absolute text-[96px] h-[96px] w-[96px] bottom-0 top-0 right-4 m-auto text-[#015C85] opacity-50 bx ${icon}`}
-        ></i>
-      )}
-    </div>
-  );
-}
-function ApplicationTitle({ children }: { children: React.ReactNode }) {
-  return <h2 className="mb-2 text-2xl font-bold">{children}</h2>;
-}
-function ApplicationContent({ children }: { children: React.ReactNode }) {
-  return <h3 className="text-2xl lg:text-3xl">{children}</h3>;
-}
+import StartRegister from "./nav/StartRegister";
+
 export default function ApplicationInfo() {
   return (
-    <div className="container">
-      <SectionTitle id="application-info">報名資訊</SectionTitle>
-      <ApplicationCard icon="bx-calendar">
-        <ApplicationTitle>日期</ApplicationTitle>
-        <ApplicationContent>07/17 ~ 07/21</ApplicationContent>
-      </ApplicationCard>
-      <ApplicationCard icon="bx-map-alt">
-        <ApplicationTitle>地點</ApplicationTitle>
-        <ApplicationContent>陽明交通大學 光復校區</ApplicationContent>
-      </ApplicationCard>
-      <ApplicationCard icon="bx-time">
-        <ApplicationTitle>報名時間</ApplicationTitle>
-        <ApplicationContent>延長至 5/31(五) 23:59</ApplicationContent>
-      </ApplicationCard>
-      <div className="flex w-full gap-4">
-        <PriceCard type="早鳥票" price={7900} />
-        <PriceCard type="個人報名" price={8800} />
-      </div>
-      <div className="flex w-full gap-4 my-4">
-        <PriceCard type="團體報名" price={7800} />
-        <PriceCard type="前一晚入住營隊" price={700} />
-      </div>
-      <div className="flex items-center justify-center my-8">
-        <motion.a
-          transition={{
-            type: "spring",
-            stiffness: 400,
-            damping: 40,
-          }}
-          className="bg-[#013249] bg-opacity-100 backdrop-blur-xl text-[#eee] rounded-full py-5 px-12 shadow-2xl text-4xl font-bold cursor-pointer hover:bg-opacity-60"
-          target="_blank"
-          href="https://sitcon.kktix.cc/events/sitcon-camp2024"
-        >
-          前往報名
-        </motion.a>
-      </div>
-      <ApplicationCard dense>
-        <div className="flex flex-col-reverse items-center justify-between gap-2 my-2 md:my-0 md:flex-row md:items-center md:gap-4">
-          <div className="text-sm md:text-base">
-            將 SITCON Camp 重要日程加入行事曆
+    <>
+      <div className="bg-[linear-gradient(180deg,#E2E6EF,#BACEFC)] -mt-5 rounded-t-[2rem] px-[2rem] pb-[7rem]">
+        <div className="flex py-8">
+          <div className="flex items-center gap-2 mx-auto text-3xl font-bold text-center">
+            <span><img src="/2024/images/sitcon.svg" height="2rem" width="auto" alt="sitcon1" /></span>
+            <h1 className="text-2xl text-center text-[#1E3D6C]">報名資訊</h1>
+            <span><img src="/2024/images/sitcon.svg" height="2rem" width="auto" alt="sitcon2" /></span>
+          </div>
+        </div>
+        <div className="flex text-[#1E3D6C] border border-[#1E3D6C] rounded-full py-1 pr-2 pl-4 mb-[4rem] max-w-[20rem] mx-auto">
+          <p className="flex-1 my-auto">將 CAMP 重要日程加入行事曆</p>
+          <a href="/2024/events.ics">
+            <img src="/2024/images/event-add.svg" alt="event-add" className="flex-none my-auto" />
+          </a>
+        </div>
+        <div className="bg-transparent pt-[2.5rem] h-[18rem] w-[20rem] mb-[0.1rem] mx-auto relative">
+          <div className="bg-white rounded-tl-[5rem] rounded-[1rem] w-full h-[13rem] flex shadow-md shadow-gray-500">
+            <div className="flex flex-col gap-4 pt-[2rem] m-auto">
+              <h1 className="text-lg text-[#626262] font-bold mx-auto">
+                活動日期
+              </h1>
+              <p className="text-[#1E3D6C] text-3xl font-bold mx-auto text-center">
+                07/17 - 07/21
+              </p>
+            </div>
+          </div>
+          <div className="absolute top-0 flex w-full">
+            <div className="mx-auto bg-[linear-gradient(135deg,#69BEFA,#7865C8)] rotate-45 w-[5rem] h-[5rem] rounded-lg flex shadow-md shadow-gray-500">
+              <img src="/2024/images/calender.svg" alt="calender" className="mx-auto my-auto -rotate-45 w-11 h-11" />
+            </div>
+          </div>
+        </div>
+        <div className="bg-transparent pt-[2.5rem] h-[18rem] w-[20rem] mb-[0.1rem] mx-auto relative">
+          <div className="bg-white rounded-tl-[5rem] rounded-[1rem] w-full h-[13rem] flex shadow-md shadow-gray-500">
+            <div className="flex flex-col gap-4 pt-[2rem] m-auto">
+              <h1 className="text-lg text-[#626262] font-bold mx-auto">
+                報名時間
+              </h1>
+              <p className="text-[#1E3D6C] text-3xl font-bold mx-auto text-center">
+                即日起 - 05/31
+              </p>
+            </div>
+          </div>
+          <div className="absolute top-0 flex w-full">
+            <div className="mx-auto bg-[linear-gradient(135deg,#69BEFA,#7865C8)] rotate-45 w-[5rem] h-[5rem] rounded-lg flex shadow-md shadow-gray-500">
+              <img src="/2024/images/clock.svg" alt="clock" className="mx-auto my-auto -rotate-45 w-11 h-11" />
+            </div>
+          </div>
+        </div>
+        <div className="bg-transparent pt-[2.5rem] h-[18rem] w-[20rem] mb-[2rem] mx-auto relative">
+          <div className="bg-white rounded-tl-[5rem] rounded-[1rem] w-full h-[13rem] flex shadow-md shadow-gray-500">
+            <div className="flex flex-col gap-4 pt-[2rem] m-auto">
+              <h1 className="text-lg text-[#626262] font-bold mx-auto">
+                活動地點
+              </h1>
+              <p className="text-[#1E3D6C] text-3xl font-bold mx-auto text-center">
+                陽明交通大學
+                <br />
+                光復校區
+              </p>
+            </div>
+          </div>
+          <div className="absolute top-0 flex w-full">
+            <div className="mx-auto bg-[linear-gradient(135deg,#69BEFA,#7865C8)] rotate-45 w-[5rem] h-[5rem] rounded-lg flex shadow-md shadow-gray-500">
+              <img src="/2024/images/location.svg" alt="location" className="mx-auto my-auto -rotate-45 w-11 h-11" />
+            </div>
+          </div>
+        </div>
+        <div className="flex">
+          <div className="flex mx-auto">
+            <a
+              className="bg-gradient-to-b from-[#78C2FF] to-[#9C7DFF] rounded-full p-1 opacity-60 cursor-not-allowed"
+              // href="https://sitcon.kktix.cc/events/sitcon-camp2024"
+              target="_blank"
+            >
+              <p className="bg-white text-xl font-medium text-[#1E3D6C] px-6 py-1 rounded-full h-full">報名截止</p>
+            </a>
           </div>
-          <Button
-            href="/2024/events.ics"
-            className="bg-blue-300 bg-opacity-10 hover:bg-blue-300 hover:bg-opacity-20 rounded-xl"
-          >
-            <i className="bx bx-calendar-plus"></i>
-            加入行事曆
-          </Button>
         </div>
-      </ApplicationCard>
-      <div className="mt-4 p-4 lg:p-6 bg-[#013249] rounded-xl lg:flex gap-4 lg:gap-6 items-center">
-        <div className="text-2xl font-bold min-w-max">注意事項</div>
-        <div className="mt-4 lg:mt-0 lg:border-l lg:border-white lg:pl-6">
-          <ol className="leading-7 list-decimal list-inside">
-            <li>
-              若在 5/12（日）23:59 前報名即享有早鳥價，享有早鳥價者仍可享有團報優惠。
-            </li>
-            <li>
-              三人同時報名，視為團體報名，享有團體報名價格，但並不保證同時錄取，每團以三人為限，詳見
-              {" "}
-              <a
-                href="https://drive.google.com/file/d/1UWNkiYLvLZKY6VM1_XnRy5gbtV74DLcY/view?usp=sharing"
-                target="_blank"
-                className="link"
-              >
-                報名簡章
-              </a>
-              。
-            </li>
-            <li>
-              本次夏令營預計招收學員 60 名，我們會針對報名資料做簡易審查，非先報先贏。
-            </li>
-            <li>
-              正取學員名單最晚將於 6/8（六）前公佈，屆時請關注 SITCON 相關社群媒體及 Email 信箱。
-            </li>
-            <li>
-              正取學員需完成報名費繳交，始完成報名程序；另設有補助名額，請詳閱
-              {" "}
-              <a
-                href="https://drive.google.com/file/d/17VY3TcxK4a9FY7T23qX6fmGA7C8UsLDP/view?usp=sharing"
-                target="_blank"
-                className="link"
-              >
-                報名費用補助辦法
-              </a>
-              。
-            </li>
-            <li>
-              關於退費事宜，請見
-              {" "}
-              <a
-                href="https://drive.google.com/file/d/1f7nnTB7IskhPWIXk4FV9iiDKLKjpi78F/view?usp=sharing"
-                target="_blank"
-                className="link"
-              >
-                退費說明文件
-              </a>
-              。
-            </li>
-          </ol>
+      </div >
+      <div className="bg-[#172A48] -mt-10 -mb-14 rounded-[2rem] px-[2rem] pt-[2rem] pb-[2rem] flex flex-col">
+        <h1 className="mx-auto text-3xl font-bold">注意事項</h1>
+        <hr className="bg-[#ffffff] w-full h-[0.1rem] mt-4 mb-8" />
+        <div className="flex flex-col gap-3">
+          <p>
+            1. 若在 5/12（日）23:59 前報名即享有早鳥價，享有早鳥價者仍可享有團報優惠。
+          </p>
+          <p>
+            2. 三人同時報名，視為團體報名，享有團體報名價格，但並不保證同時錄取，每團以三人為限，詳見
+            {" "}
+            <a
+              href="https://drive.google.com/file/d/1UWNkiYLvLZKY6VM1_XnRy5gbtV74DLcY/view?usp=sharing"
+              target="_blank"
+              className="link"
+            >
+              報名簡章
+            </a>
+            。
+          </p>
+          <p>
+            3. 本次夏令營預計招收學員 60 名，我們會針對報名資料做簡易審查，非先報先贏。
+          </p>
+          <p>
+            4. 正取學員名單最晚將於 6/8（六）前公佈，屆時請關注 SITCON 相關社群媒體及 Email 信箱。
+          </p>
+          <p>
+            5. 正取學員需完成報名費繳交，始完成報名程序；另設有補助名額，請詳閱
+            {" "}
+            <a
+              href="https://drive.google.com/file/d/17VY3TcxK4a9FY7T23qX6fmGA7C8UsLDP/view?usp=sharing"
+              target="_blank"
+              className="link"
+            >
+              報名費用補助辦法
+            </a>
+            。
+          </p>
+          <p>
+            6. 關於退費事宜，請見
+            {" "}
+            <a
+              href="https://drive.google.com/file/d/1f7nnTB7IskhPWIXk4FV9iiDKLKjpi78F/view?usp=sharing"
+              target="_blank"
+              className="link"
+            >
+              退費說明文件
+            </a>
+            。
+          </p>
         </div>
       </div>
-    </div>
+    </>
   );
 }