From 50f42c091151b0959974efa4170708bb19293755 Mon Sep 17 00:00:00 2001
From: LazuliKao <LazuliKao233@outlook.com>
Date: Fri, 12 Apr 2024 22:24:52 +0800
Subject: [PATCH] add page join-us

---
 src/components/Navigation.astro |  15 +-
 src/pages/join-us.astro         | 255 ++++++++++++++++++++++++++++++++
 2 files changed, 267 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/join-us.astro

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 0cbcc04..12db6a3 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,5 +1,5 @@
 ---
-import { SITE_TITLE } from "../consts"
+import { SITE_TITLE } from "../consts";
 ---
 
 <nav class="nav">
@@ -7,7 +7,11 @@ import { SITE_TITLE } from "../consts"
     <div class="nav-content-wrapper">
       <div class="nav-content">
         <a href="/" class="nav-title flex items-center gap-3">
-          <img src="https://oss.nbtca.space/CA-logo.svg" alt="" style="width: 28px; aspect-ratio: 1;" />
+          <img
+            src="https://oss.nbtca.space/CA-logo.svg"
+            alt=""
+            style="width: 28px; aspect-ratio: 1;"
+          />
           <span class="hidden md:block">
             {SITE_TITLE}
           </span>
@@ -17,11 +21,16 @@ import { SITE_TITLE } from "../consts"
             <a href="/archive" class="nav-item-content">目录</a>
           </div>
           <div class="nav-item-wrapper">
-            <a href="https://repair.nbtca.space" class="nav-item-content">维修</a>
+            <a href="https://repair.nbtca.space" class="nav-item-content">
+              维修
+            </a>
           </div>
           <div class="nav-item-wrapper">
             <a href="/about" class="nav-item-content">关于</a>
           </div>
+          <div class="nav-item-wrapper">
+            <a href="/join-us" class="nav-item-content">加入我们</a>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/join-us.astro b/src/pages/join-us.astro
new file mode 100644
index 0000000..8862757
--- /dev/null
+++ b/src/pages/join-us.astro
@@ -0,0 +1,255 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+---
+
+<BaseLayout primaryTitle="加入我们">
+  <div class="container">
+    <h2 class="life-at-apple__eyebrow">在 NBTCA 生活</h2>
+    <p class="t-hero-headline-oversized">
+      <span
+        class="t-hero-headline-oversized-span"
+        aria-label="加入我们，共同创造我们的社区。"
+      >
+        <span class="gradient-warm">加入我们，</span>
+        <span class="gradient-warm">共同创造我们的社区。</span>
+      </span>
+    </p>
+    <div class="body-container">
+      <p class="life-at-apple__body-text">
+        探索我们的资源和文化：这里有丰富的资源和注重包容、成长和独创性的协作文化，助你缔造精彩人生。
+      </p>
+    </div>
+  </div>
+</BaseLayout>
+
+<style>
+  @media screen and (min-width: 768px) {
+    /*PC*/
+    .container {
+      width: 682px;
+      margin: 0 auto;
+    }
+    .gradient-warm {
+      -webkit-text-size-adjust: 100%;
+      --r-globalmessage-segment-height: 0px;
+      --r-globalnav-segmentbar-height: 0px;
+      --r-globalnav-height: 48px;
+      --rem: 16;
+      --r-globalnav-background-opened: #fafafc;
+      --r-globalnav-background-opened-dark: #161617;
+      --sk-focus-color: #0071e3;
+      --sk-focus-color-alt: rgb(0, 0, 0);
+      --sk-focus-offset: 1px;
+      --sk-focus-offset-container: 3px;
+      color: #333333;
+      font-synthesis: none;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      direction: ltr;
+      --body-container-width: 645px;
+      text-align: center;
+      font-size: 75px;
+      line-height: 1.06667;
+      font-weight: 600;
+      letter-spacing: 0;
+      font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
+        "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
+      quotes: "“" "”";
+      font-style: normal;
+      -webkit-text-fill-color: transparent;
+      -webkit-box-decoration-break: clone;
+      background: url(https://www.apple.com/careers/images/fy21/apple_jobs_gradient-final_Apple_Jobs_Gradients_Warm/desktop@2x.png);
+      background-size: 200% 100%;
+      -webkit-background-clip: text;
+    }
+  }
+  @media screen and (max-width: 768px) {
+    /*Mobile*/
+    .gradient-warm {
+      -webkit-text-size-adjust: 100%;
+      --r-globalmessage-segment-height: 0px;
+      --r-globalnav-segmentbar-height: 0px;
+      --r-globalnav-height: 48px;
+      --r-globalnav-background-opened: #fafafc;
+      --r-globalnav-background-opened-dark: #161617;
+      --sk-focus-color: #0071e3;
+      --sk-focus-color-alt: rgb(0, 0, 0);
+      --sk-focus-offset: 1px;
+      --sk-focus-offset-container: 3px;
+      color: #333333;
+      font-synthesis: none;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      direction: ltr;
+      --body-container-width: 645px;
+      text-align: center;
+      font-size: 38px;
+      line-height: 1.10538;
+      font-weight: 600;
+      letter-spacing: 0;
+      font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
+        "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
+      quotes: "“" "”";
+      font-style: normal;
+      -webkit-text-fill-color: transparent;
+      -webkit-box-decoration-break: clone;
+      background: url(/careers/images/fy21/apple_jobs_gradient-final_Apple_Jobs_Gradients_Warm/desktop@2x.png);
+      background-size: 200% 100%;
+      -webkit-background-clip: text;
+    }
+  }
+  .body-container {
+    -webkit-text-size-adjust: 100%;
+    --r-globalnav-height: 44px;
+    --r-globalmessage-segment-height: 0px;
+    --r-globalnav-segmentbar-height: 0px;
+    --r-globalnav-background-opened: #fafafc;
+    --r-globalnav-background-opened-dark: #161617;
+    --sk-focus-color: #0071e3;
+    --sk-focus-color-alt: rgb(0, 0, 0);
+    --sk-focus-offset: 1px;
+    --sk-focus-offset-container: 3px;
+    color: #333333;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    direction: ltr;
+    font-weight: 400;
+    font-size: 17px;
+    line-height: 1.82353;
+    --body-container-width: 645px;
+    text-align: center;
+    letter-spacing: 0;
+    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
+      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
+    quotes: "“" "”";
+    font-style: normal;
+    margin-bottom: 60px;
+    width: 100%;
+  }
+  .life-at-apple__body-text {
+    -webkit-text-size-adjust: 100%;
+    --r-globalnav-height: 44px;
+    --r-globalmessage-segment-height: 0px;
+    --r-globalnav-segmentbar-height: 0px;
+    --r-globalnav-background-opened: #fafafc;
+    --r-globalnav-background-opened-dark: #161617;
+    --sk-focus-color: #0071e3;
+    --sk-focus-color-alt: rgb(0, 0, 0);
+    --sk-focus-offset: 1px;
+    --sk-focus-offset-container: 3px;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    direction: ltr;
+    --body-container-width: 645px;
+    text-align: center;
+    padding: 0;
+    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
+      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
+    quotes: "“" "”";
+    font-style: normal;
+    font-size: 30px;
+    line-height: 1.2;
+    font-weight: 400;
+    letter-spacing: 0;
+    color: #000;
+    margin: 20px 0 40px;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .life-at-apple__eyebrow {
+    -webkit-text-size-adjust: 100%;
+    --r-globalmessage-segment-height: 0px;
+    --r-globalnav-segmentbar-height: 0px;
+    --r-globalnav-height: 48px;
+    --rem: 16;
+    --r-globalnav-background-opened: #fafafc;
+    --r-globalnav-background-opened-dark: #161617;
+    --sk-focus-color: #0071e3;
+    --sk-focus-color-alt: rgb(0, 0, 0);
+    --sk-focus-offset: 1px;
+    --sk-focus-offset-container: 3px;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    direction: ltr;
+    --body-container-width: 645px;
+    text-align: center;
+    padding: 0;
+    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
+      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
+    quotes: "“" "”";
+    font-style: normal;
+    font-size: 30px;
+    line-height: 1.2;
+    font-weight: 700;
+    letter-spacing: 0;
+    color: #000;
+    margin: 60px 0 0;
+    margin-bottom: 0;
+  }
+  .t-hero-headline-oversized {
+    -webkit-text-size-adjust: 100%;
+    --r-globalmessage-segment-height: 0px;
+    --r-globalnav-segmentbar-height: 0px;
+    --r-globalnav-height: 48px;
+    --rem: 16;
+    --r-globalnav-background-opened: #fafafc;
+    --r-globalnav-background-opened-dark: #161617;
+    --sk-focus-color: #0071e3;
+    --sk-focus-color-alt: rgb(0, 0, 0);
+    --sk-focus-offset: 1px;
+    --sk-focus-offset-container: 3px;
+    color: #333333;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    direction: ltr;
+    --body-container-width: 645px;
+    text-align: center;
+    padding: 0;
+    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
+      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
+    quotes: "“" "”";
+    font-style: normal;
+    font-size: 75px;
+    line-height: 1.06667;
+    letter-spacing: 0;
+    font-weight: 600;
+    margin: 20px 0 40px;
+  }
+  .t-hero-headline-oversized-span {
+    -webkit-text-size-adjust: 100%;
+    --r-globalmessage-segment-height: 0px;
+    --r-globalnav-segmentbar-height: 0px;
+    --r-globalnav-height: 48px;
+    --rem: 16;
+    --r-globalnav-background-opened: #fafafc;
+    --r-globalnav-background-opened-dark: #161617;
+    --sk-focus-color: #0071e3;
+    --sk-focus-color-alt: rgb(0, 0, 0);
+    --sk-focus-offset: 1px;
+    --sk-focus-offset-container: 3px;
+    color: #333333;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    direction: ltr;
+    --body-container-width: 645px;
+    text-align: center;
+    font-size: 75px;
+    line-height: 1.06667;
+    font-weight: 600;
+    letter-spacing: 0;
+    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
+      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
+    quotes: "“" "”";
+    font-style: normal;
+    -webkit-text-fill-color: transparent;
+    -webkit-box-decoration-break: clone;
+    background: url(https://www.apple.com/careers/images/fy21/apple_jobs_gradient-final_Apple_Jobs_Gradients_Warm/desktop@2x.png);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+  }
+</style>