feat(choice): write style of choice page

app/routes/choice.tsx

@@ -1,12 +1,46 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { LinksFunction, V2_MetaFunction } from "@remix-run/node";
+import stylesheet from "~/styles/choice.css";
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+];
 
 export const meta: V2_MetaFunction = () => [{ title: "選擇障礙專區" }];
 
 export default function () {
   return (
-    <div>
-      <div className="h-[300px] bg-yellow-100" />
-      選擇障礙專區
-    </div>
+    <>
+      <div className="choice-banner">
+        <div className="banner-text">有選擇障礙嗎？</div>
+      </div>
+      <div className="choice-content">
+        <div>
+          <div className="choice-title">
+            即使是專業的醫師，也無法在短時間傳達所有治療的效益、時效性及副作用
+          </div>
+          <div className="choice-text">
+            透過我們的預選方案，帶您初步認識大部分女性接受的第一線治療選項。
+          </div>
+          <div className="choice-text">
+            在進一步的抽血報告及影像檢查出爐前，若沒有禁忌症，您可以先嘗試以下這些方案並在下次回診前與醫師討論您的使用心得。
+          </div>
+        </div>
+
+        <div className="icon-container">
+          <div className="choice-icon">
+            123
+            <FontAwesomeIcon icon={["fas", "pills"]} />
+            456
+          </div>
+        </div>
+      </div>
+      <div className="h-fit p-[10px]">
+        <div className="choice-img1">1</div>
+      </div>
+      <div className="choice-img2">2</div>
+      <div className="choice-img3">3</div>
+      <div className="choice-img4">4</div>
+    </>
   );
 }

app/styles/choice.css

@@ -0,0 +1,61 @@
+.choice-banner {
+  min-height: 420px;
+  background-size: cover;
+  position: relative;
+  background-position: center center;
+  background-image: url(~/images/choice-select-decide-2692575.webp);
+  @media (max-width: 1024px) {
+    min-height: 330px;
+  }
+}
+
+.banner-text {
+  width: 100%;
+  text-align: center;
+  font-size: 30px;
+  color: #ffffff;
+  bottom: 50px;
+  position: absolute;
+}
+
+@media (max-width: 922px) {
+  .banner-text {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 768px) {
+  .banner-text {
+    top: 150px;
+  }
+}
+
+.choice-content {
+  background-color: #f6f8f5;
+  padding: 60px 50px 70px 50px;
+  display: flex;
+  flex-direction: row;
+}
+
+.choice-title {
+  color: #536942;
+  font-size: 35px;
+  padding-bottom: 30px;
+}
+
+.choice-text {
+  color: #536942;
+  font-size: 18px;
+  padding-bottom: 60px;
+}
+
+.choice-img1 {
+  width: 100%;
+  height: 300px;
+  background-size: cover;
+  background-image: url(~/images/choice_1-3.webp);
+}
+
+.choice-icon {
+  border: 1px red solid;
+}