feat : u0pdate

components/public/structured-guide.tsx

@@ -409,27 +409,28 @@ function WeaponSectionContent({
           backgroundUrl={guide.character.splashImageUrl ?? guide.coverUrl}
         />
       ) : null}
-      <header
-        className={cn(
-          "relative z-10 flex items-center justify-center gap-3 text-center",
-          !exporting && "flex-col",
-        )}
-      >
-        {exporting ? (
-          <Image
-            src="/icon/nav/Weapon.png"
-            alt=""
-            width={56}
-            height={56}
-            loading="eager"
-            className="size-14 shrink-0 object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
-          />
-        ) : null}
+      <header className="relative z-10 flex items-center justify-center text-center">
         <div className="flex flex-col items-center gap-3">
-          <p className="text-sm font-medium text-primary">อาวุธที่แนะนำ</p>
-          <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
-            Weapons
-          </h1>
+          <p className="text-sm font-medium text-primary">
+            อาวุธที่แนะนำ
+          </p>
+          <div className="flex items-center justify-center gap-3">
+            <Image
+              src="/icon/nav/Weapon.png"
+              alt=""
+              width={56}
+              height={56}
+              loading={exporting ? "eager" : "lazy"}
+              className={cn(
+                "size-14 shrink-0 object-contain",
+                exporting &&
+                  "drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]",
+              )}
+            />
+            <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
+              Weapons
+            </h1>
+          </div>
           {note ? (
             <p className="max-w-3xl whitespace-pre-wrap text-muted-foreground">
               {note}
@@ -646,29 +647,28 @@ function ArtifactSectionContent({
           backgroundUrl={guide.character.splashImageUrl ?? guide.coverUrl}
         />
       ) : null}
-      <header
-        className={cn(
-          "relative z-10 flex items-center justify-center gap-3 text-center",
-          !exporting && "flex-col",
-        )}
-      >
-        {exporting ? (
-          <Image
-            src="/icon/nav/Artifact.webp"
-            alt=""
-            width={56}
-            height={56}
-            loading="eager"
-            className="size-14 shrink-0 object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
-          />
-        ) : null}
+      <header className="relative z-10 flex items-center justify-center text-center">
         <div className="flex flex-col items-center gap-3">
           <p className="text-sm font-medium text-primary">
             อาร์ติแฟกต์และสแตทที่แนะนำ
           </p>
-          <h1 className="font-heading text-4xl font-semibold">
-            Artifact & Stats
-          </h1>
+          <div className="flex items-center justify-center gap-3">
+            <Image
+              src="/icon/nav/Artifact.webp"
+              alt=""
+              width={56}
+              height={56}
+              loading={exporting ? "eager" : "lazy"}
+              className={cn(
+                "size-14 shrink-0 object-contain",
+                exporting &&
+                  "drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]",
+              )}
+            />
+            <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
+              Artifact & Stats
+            </h1>
+          </div>
           {action}
         </div>
       </header>
@@ -1077,8 +1077,22 @@ function ConstellationSection({ guide }: { guide: PublicGuide }) {
   return (
     <section className="flex flex-col gap-6">
       <header className="flex flex-col items-center gap-3 text-center">
-        <p className="text-sm font-medium text-primary">กลุ่มดาว</p>
-        <h1 className="font-heading text-4xl font-semibold">กลุ่มดาว</h1>
+        <p className="text-sm font-medium text-primary">
+          กลุ่มดาวที่แนะนำ
+        </p>
+        <div className="flex items-center justify-center gap-3">
+          <Image
+            src="/icon/nav/Constellations.webp"
+            alt=""
+            width={56}
+            height={56}
+            loading="lazy"
+            className="size-14 shrink-0 object-contain"
+          />
+          <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">
+            Constellations
+          </h1>
+        </div>
         {note ? (
           <p className="max-w-3xl whitespace-pre-wrap text-muted-foreground">
             {note}