feat: 專業評估 與 按鈕色系調整

app/components/modal.tsx

@@ -68,13 +68,13 @@ export default function Modal({ onClose, personLink, proLink }: ModalProps) {
             <div className="justify-center gap-4 bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
               <Link
                 to={personLink}
-                className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#3e6796]"
+                className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#7a6f6f]"
               >
                 個人表單
               </Link>
               <Link
                 to={proLink}
-                className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#3e6796]"
+                className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#7a6f6f]"
               >
                 醫療人員表單
               </Link>

app/root.tsx

@@ -137,16 +137,10 @@ export default function App() {
             您對整個醫療環境的評論！
           </div>
           <div className="flex justify-center gap-4">
-            <Link
-              to={formLink[lang].person}
-              className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#3e6796]"
-            >
+            <Link to={formLink[lang].person} className="link-btn">
               個人表單
             </Link>
-            <Link
-              to={formLink[lang].pro}
-              className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#3e6796]"
-            >
+            <Link to={formLink[lang].pro} className="link-btn">
               醫療人員表單
             </Link>
           </div>

app/routes/($lang).assessment.tsx

@@ -1,6 +1,8 @@
 import type { LinksFunction, V2_MetaFunction } from "@remix-run/node";
 import stylesheet from "~/styles/assessment.css";
 
+import usCDC from "~/images/us-cdc.png";
+
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
@@ -13,25 +15,33 @@ export default function () {
       <div className="hero">
         <div>專業評估</div>
       </div>
-      <div className="container mx-auto max-w-3xl">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non libero
-        obcaecati, omnis consectetur, autem placeat rerum inventore repudiandae
-        veritatis optio ratione. Corrupti mollitia provident alias dolore
-        facilis consequuntur asperiores blanditiis! Distinctio fugiat modi
-        expedita ex consectetur delectus rem! Dicta quisquam odio et quae
-        commodi, doloribus nesciunt autem totam eos iusto, numquam sit sed?
-        Eveniet assumenda quibusdam cumque, consectetur labore minima? Ipsum
-        facilis dignissimos libero accusantium tempora commodi vel omnis sed,
-        quibusdam atque magni impedit ex saepe, amet voluptatum quasi!
-        Aspernatur sunt quaerat debitis repellendus dolore laboriosam fugiat
-        vero veritatis eligendi? Dicta laborum quasi excepturi facilis optio
-        recusandae minus asperiores quo molestias, cumque repellat reiciendis
-        dolorum dolores necessitatibus, est vitae neque nobis dolor voluptatibus
-        ducimus officia quaerat a amet? Expedita, suscipit. Nostrum quis
-        voluptates praesentium sapiente incidunt sunt officia magnam distinctio
-        nemo animi repudiandae rem dicta sint modi, unde laboriosam? Ullam
-        corrupti atque dolores quibusdam repellendus, provident adipisci
-        doloremque a accusantium.
+      <div className="container mx-auto max-w-3xl px-10 text-center text-[#7a6f6f]">
+        <div className="title">
+          賀爾蒙禁忌症評估請參考
+          <span className="block md:inline md:after:content-['：']" />
+          美國疾管局口服避孕藥適用性彙整表
+        </div>
+        <img src={usCDC} className="mx-auto w-40" alt="us-cdc" />
+        <a
+          target="_blank"
+          className="mt-10 inline-block rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#7a6f6f]"
+          href="https://www.cdc.gov/reproductivehealth/contraception/pdf/summary-chart-us-medical-eligibility-criteria_508tagged.pdf"
+          rel="noreferrer"
+        >
+          點即前往（英文版）
+        </a>
+
+        <div className="title">治療期間建議監測項目</div>
+        <ul className="text-left [&>*+*]:mt-4">
+          <li>育齡女性：懷孕計畫、超音波、CA-125、肝功能（依臨床考量）</li>
+          <li>
+            更年前期：超音波、CA-125、FSH、Estradiol、AMH（依臨床考量／自費）、TSH、Free
+            T4
+          </li>
+          <li>
+            更年期：超音波、每2年一次乳癌篩檢（年滿40歲及二等親乳癌病史、年滿45歲）、骨密度檢查（自費）
+          </li>
+        </ul>
       </div>
     </div>
   );

app/routes/($lang).plan.tsx

@@ -22,8 +22,10 @@ export default function () {
         <div className="text">超簡單三步驟</div>
         <div className="text">自我打造專屬治療方案</div>
       </div>
-
       <div className="section">
+        <div className="my-10 text-center text-4xl font-bold text-red-500">
+          @todo 子宮內膜異位症
+        </div>
         <div className="title">步驟一：告訴我們您的主要困擾吧！</div>
         <div className="desc my-6 text-xl">
           在決定任何的治療前，我們須先了解您在3-6個月內是否有懷孕計畫，再考慮針對不同目的將治療分成3大類：
@@ -417,7 +419,7 @@ export default function () {
           </div>
         </div>
 
-        <h1 className="my-20 text-center text-4xl font-bold">
+        <h1 className="my-20 text-center text-4xl font-bold text-red-500">
           @todo 這邊要放懷孕的資訊
         </h1>
       </div>

app/styles/assessment.css

@@ -2,3 +2,7 @@
   background-image: url(~/images/hero-assessment.png);
   @apply bg-bottom;
 }
+
+.title {
+  @apply mb-4 mt-12 text-lg lg:text-2xl;
+}

app/styles/home.css

@@ -16,10 +16,6 @@
     md:text-4xl;
 }
 
-.link-btn {
-  @apply rounded bg-[#dbc9c9] px-4 py-2;
-}
-
 .section {
   @apply px-10 py-24;
 }

app/tailwind.css

@@ -45,4 +45,8 @@
     md:[&>*]:inline
     md:[&>*]:text-white;
   }
+
+  .link-btn {
+    @apply rounded-full bg-[#9b8e8e] px-4 py-2 text-white hover:bg-[#7a6f6f];
+  }
 }