fix: 調整了一些東西，但預設語系有問題

app/components/links.tsx

@@ -9,6 +9,8 @@ type HeaderProps = {
 export default function Links({ lang, openLang }: HeaderProps) {
   let { t } = useTranslation("common");
   const prefix = lang && `/${lang}`;
+  console.log({ prefix });
+
   const handleClick = () => {
     if ((document.getElementById("menu-toggle") as HTMLInputElement).checked) {
       document.getElementById("menu-toggle")?.click();

app/entry.server.tsx

@@ -27,7 +27,7 @@ export default async function handleRequest(
 
   let lng =
     JSON.parse(remixContext.serverHandoffString || "").state.loaderData.root
-      .locale || "en";
+      ?.locale || "en";
   // await i18next.getLocale(request);
   let ns = i18next.getRouteNamespaces(remixContext);
 

app/root.tsx

@@ -13,6 +13,7 @@ import {
   Scripts,
   ScrollRestoration,
   useLoaderData,
+  useNavigate,
 } from "@remix-run/react";
 
 /** @deprecated */
@@ -37,6 +38,9 @@ export const links: LinksFunction = () => [
 
 export const loader = async ({ request, params }: LoaderArgs) => {
   let locale = params.lang || "en"; //await i18next.getLocale(request);
+
+  console.log("靠北=======");
+
   return json({
     lang: (params.lang || "") as keyof typeof formLink,
     locale,
@@ -59,6 +63,8 @@ const isAtBottom = (): boolean =>
 const isToday = () => !!document.cookie.includes("status=stillToday");
 
 export default function App() {
+  const navigate = useNavigate();
+  // const location = useLocation();
   // Get the locale from the loader
   let { locale, lang } = useLoaderData<typeof loader>();
 
@@ -105,6 +111,17 @@ export default function App() {
   });
 
   useEffect(() => {
+    // 如果沒有 prefix lang, 需判斷導頁 (only first)
+    console.log("進來否?");
+    if (!lang && !document.cookie.includes("save-user-locale=1")) {
+      document.cookie = "save-user-locale=1";
+      console.log(navigator.language);
+      console.log(location);
+
+      if (navigator.language !== "en-US") {
+        navigate(`/${navigator.language}`); // 沒有用.... 網址會變 但不會真的導頁，還是要在 server 端處理
+      }
+    }
     if (document.cookie.includes("twsdmlogo=1")) return setIsPlayLogo(false);
     document.cookie = "twsdmlogo=1";
     setIsPlayLogo(true);

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

@@ -21,6 +21,9 @@ export default function () {
         <div className="text">{t("title2")}</div>
         <div className="text-lg md:text-lg lg:text-2xl">{t("title3")}</div>
       </div>
+      <div className="my-10 text-center text-4xl font-bold text-red-500">
+        @todo 子宮內膜異位症
+      </div>
       <div className="section container mx-auto  max-w-4xl">
         <h2 className="first-title">
           <img src={icon1} className="mx-auto w-20" alt="icon" />
@@ -80,7 +83,7 @@ export default function () {
           </Link>
         </div>
       </div>
-      <div className="section">
+      <div className="section bg-[#f6f8f5]">
         <img src={icon4} className="mx-auto w-20" alt="icon" />
         <h2 className="text-center text-2xl md:text-6xl">
           {t("evaluate.title")}

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

@@ -19,7 +19,7 @@ export const meta: V2_MetaFunction = () => [{ title: "選擇障礙專區" }];
 export default function () {
   return (
     <div>
-      <div className="choice-banner bg-slate-400">
+      <div className="hero choice-banner bg-slate-400">
         <div className="banner-text">有選擇障礙嗎？</div>
       </div>
       <div className="bg-[#f6f8f5]">
@@ -92,7 +92,7 @@ export default function () {
         <div className="choice-img img3">
           <div className="img-box img3-box">
             <div className="img-title img3-title">長期預防復發</div>
-            <div className="img-text img3-text">
+            <div className="img-text img3-text bg-[#a7c5cc]">
               為保存卵巢品質、預防反覆復發及手術，目前建議針對卵巢巧克力囊腫應採取長期控制。適合長期使用的藥物治療包含：
               <span className="underline">異位寧、黛麗安</span>等口服賀爾蒙。
             </div>

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

@@ -1,48 +1,37 @@
 import type { LinksFunction, V2_MetaFunction } from "@remix-run/node";
-import { Link } from "@remix-run/react";
+
 import stylesheet from "~/styles/plan.css";
 
+import todo1 from "~/images/1.png";
+
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
 export const meta: V2_MetaFunction = () => [{ title: "計畫自由選" }];
 
 export default function () {
-  const smoothTo = (targetId: string, e: { preventDefault: () => void }) => {
-    e.preventDefault();
-    const target = document.getElementById(targetId);
-    console.log(target);
-
-    target?.scrollIntoView({ behavior: "smooth", block: "start" });
-  };
   return (
     <div>
       <div className="hero">
         <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大類：
         </div>
-        <div className="plan-block">
-          <Link to="#table1" onClick={smoothTo.bind(null, "table1")}>
-            <div />
-          </Link>
-          <Link to="#table2" onClick={smoothTo.bind(null, "table2")}>
-            <div />
-          </Link>
-          <Link to="#table3" onClick={smoothTo.bind(null, "table3")}>
-            <div />
-          </Link>
-          <div />
-        </div>
-        <h1 className="mb-10 mt-20 text-center text-2xl font-bold">經痛</h1>
+        <h1 className="title-block">
+          <div className="title">經痛</div>
+          <div className="sub-title">
+            睡得開心
+            <span>|</span>
+            快樂上班
+            <span>|</span>
+            家庭和諧
+          </div>
+        </h1>
         <div
           className="flex items-start whitespace-nowrap rounded-lg border border-red-200"
           id="table1"
@@ -167,7 +156,16 @@ export default function () {
           </div>
         </div>
 
-        <h1 className="mb-10 mt-20 text-center text-2xl font-bold">異常出血</h1>
+        <h1 className="title-block">
+          <div className="title">異常出血</div>
+          <div className="sub-title">
+            兼顧生活
+            <span>|</span>
+            增加舒適
+            <span>|</span>
+            活動自如
+          </div>
+        </h1>
         <div
           className="flex items-start whitespace-nowrap rounded-lg border border-red-200"
           id="table2"
@@ -292,8 +290,15 @@ export default function () {
           </div>
         </div>
 
-        <h1 className="mb-10 mt-20 text-center text-2xl font-bold">
-          巧克力囊腫
+        <h1 className="title-block">
+          <div className="title">巧克力囊腫</div>
+          <div className="sub-title">
+            預防復發
+            <span>|</span>
+            減少手術
+            <span>|</span>
+            降低癌症
+          </div>
         </h1>
         <div
           className="flex items-start whitespace-nowrap rounded-lg border border-red-200"
@@ -419,9 +424,20 @@ export default function () {
           </div>
         </div>
 
-        <h1 className="my-20 text-center text-4xl font-bold text-red-500">
-          @todo 這邊要放懷孕的資訊
+        <h1 className="title-block">
+          <div className="title">計畫懷孕</div>
+          <div className="sub-title">
+            卵巢功能
+            <span>|</span>
+            受孕能力
+            <span>|</span>
+            備孕計畫
+          </div>
         </h1>
+        <div className="my-10 text-center text-4xl font-bold text-red-500">
+          @todo ↓ 這邊要用字取代圖
+        </div>
+        <img src={todo1} alt="todo" />
       </div>
     </div>
   );

app/styles/assessment.css

@@ -1,6 +1,6 @@
 .hero {
   background-image: url(~/images/hero-assessment.png);
-  @apply bg-bottom;
+  @apply flex bg-bottom;
 }
 
 .title {

app/styles/choice.css

@@ -1,9 +1,6 @@
 .choice-banner {
-  min-height: 420px;
-  background-size: cover;
-  position: relative;
-  background-position: center center;
   background-image: url(~/images/choice-select-decide-2692575.webp);
+  @apply relative min-h-[420px] bg-cover bg-center;
 }
 
 .banner-text {

app/styles/contact.css

@@ -1,5 +1,6 @@
 .hero {
   background-image: url(~/images/hero-contact.png);
+  @apply bg-center;
 }
 
 .title {

app/styles/curing.css

@@ -1,5 +1,6 @@
 .hero {
   background-image: url("~/images/hero-curing.png");
+  @apply bg-center;
 }
 
 .cp-banner {

app/styles/home.css

@@ -1,5 +1,6 @@
 .hero {
   background-image: url(~/images/home-hero.png);
+  @apply bg-center;
 }
 
 .first-title {

app/styles/plan.css

@@ -7,31 +7,28 @@
   @apply container mx-auto max-w-[900px] px-8 text-[#9b8e8e];
 }
 
-.section .title {
+.section > .title {
   @apply mt-12 text-center text-3xl font-bold;
 }
 
-.section .plan-block {
-  @apply inline-grid w-full grid-cols-1 gap-4 md:grid-cols-2;
+.section .title-block {
+  background-image: url(~/images/bg-flower.png);
+  @apply mx-auto mb-10 mt-20 max-w-md bg-cover bg-center p-10 text-center text-2xl font-bold;
 }
 
-.plan-block > * {
-  aspect-ratio: 16 / 9;
-  @apply bg-cover bg-center bg-no-repeat;
+.section .title-block:before,
+.section .title-block:after {
+  @apply block h-0.5 border-y-0 bg-[#ff914d] content-[''];
 }
 
-.plan-block > *:nth-of-type(1) {
-  background-image: url(~/images/plan-1.png);
+.section .title-block > .title {
+  @apply mt-4 rounded-lg bg-[#ff914d] py-2 text-white;
 }
 
-.plan-block > *:nth-of-type(2) {
-  background-image: url(~/images/plan-2.png);
+.section .title-block > .sub-title {
+  @apply py-2 text-xs text-[#ff914d];
 }
 
-.plan-block > *:nth-of-type(3) {
-  background-image: url(~/images/plan-3.png);
-}
-
-.plan-block > *:nth-of-type(4) {
-  background-image: url(~/images/plan-4.png);
+.section .title-block > .sub-title > span {
+  @apply mx-2 inline-block;
 }