fix : use buzz style card

components/public/structured-guide.tsx

@@ -9,7 +9,7 @@ import { Kbd } from "@/components/ui/kbd";
 import { Separator } from "@/components/ui/separator";
 import { SiteHeader } from "@/components/public/site-header";
 import { LiveRefresh } from "@/components/live-refresh";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { cn } from "@/lib/utils";
 
@@ -49,15 +49,17 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
   return (
     <section className="flex flex-col gap-6">
       <header className="text-center"><p className="text-sm font-medium text-primary">อาวุธที่แนะนำ</p><h1 className="font-heading text-4xl font-semibold">Weapons</h1></header>
-      <div className="grid gap-3 lg:grid-cols-2">
+      <div className="grid gap-3">
         {guide.weapons.map((row, index) => (
-          <Card key={row.id} size="sm" className={cn(rarityGradientClass(row.weapon.rarity))}>
+          <Card key={row.id} size="sm" className="bg-white py-0">
-            <CardContent className="flex items-center gap-3">
+            <CardContent className="grid p-0 md:grid-cols-[minmax(0,3fr)_minmax(18rem,2fr)]">
-              <div className="relative size-16 shrink-0 overflow-hidden rounded-lg bg-black"><Image src={row.weapon.imageUrl} alt={row.weapon.name} fill className="object-contain" /></div>
+              <div className={cn("flex min-h-28 min-w-0 items-center gap-4 rounded-br-[4rem] p-4 pr-10 text-white md:rounded-br-[8rem] md:pr-16", rarityGradientClass(row.weapon.rarity))}>
-              <div className="flex min-w-0 flex-1 flex-wrap items-center gap-4 rounded-lg bg-black p-3 text-white">
+                <div className="relative size-20 shrink-0"><Image src={row.weapon.imageUrl} alt={row.weapon.name} fill className="object-contain" /></div>
-                <p className="min-w-40 flex-1 font-semibold">{index + 1}. {row.weapon.name} R{row.refinement}</p>
+                <p className="truncate text-base font-semibold sm:text-lg">{index + 1}. {row.weapon.name} R{row.refinement}</p>
-                {row.overallPercent ? <div className="text-right"><p className="text-xs text-white/70">ดาเมทโดยรวม</p><p className="text-2xl font-semibold">{metric(row.overallPercent)}</p></div> : null}
+              </div>
-                {row.personalPercent ? <div className="text-right"><p className="text-xs text-white/70">ดาเมทส่วนตัว</p><p className="text-2xl font-semibold">{metric(row.personalPercent)}</p></div> : null}
+              <div className="flex items-center justify-around gap-4 bg-white px-4 py-5 text-black">
+                {row.overallPercent ? <div className="flex-1 text-center"><p className={cn("text-4xl leading-none font-bold sm:text-5xl", rarityTextClass(row.weapon.rarity))}>{metric(row.overallPercent)}</p><p className="mt-1 text-sm sm:text-base">ดาเมททั้งทีม</p></div> : null}
+                {row.personalPercent ? <div className="flex-1 text-center"><p className={cn("text-4xl leading-none font-bold sm:text-5xl", rarityTextClass(row.weapon.rarity))}>{metric(row.personalPercent)}</p><p className="mt-1 text-sm sm:text-base">ดาเมจส่วนตัว</p></div> : null}
               </div>
             </CardContent>
           </Card>

lib/catalog/rarity.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { rarityGradient, rarityGradientClass } from "@/lib/catalog/rarity";
+import { rarityGradient, rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
 
 describe("catalog rarity backgrounds", () => {
   it("maps every weapon and artifact rarity to its Tailwind gradient", () => {
@@ -12,10 +12,14 @@ describe("catalog rarity backgrounds", () => {
     expect(rarityGradient(3)).toBe("linear-gradient(90deg, rgba(77, 118, 145, 1) 0%, rgba(71, 135, 165, 1) 100%)");
     expect(rarityGradient(4)).toBe("linear-gradient(90deg, rgba(109, 106, 156, 1) 0%, rgba(150, 122, 179, 1) 100%)");
     expect(rarityGradient(5)).toBe("linear-gradient(90deg, rgba(166, 123, 52, 1) 0%, rgba(178, 123, 44, 1) 100%)");
+    expect(rarityTextClass(3)).toBe("text-[#4D7691]");
+    expect(rarityTextClass(4)).toBe("text-[#6D6A9C]");
+    expect(rarityTextClass(5)).toBe("text-[#A67B34]");
   });
 
   it("uses the neutral equipment background when rarity is unavailable", () => {
     expect(rarityGradient(null)).toBe("#17383d");
     expect(rarityGradientClass(undefined)).toBeUndefined();
+    expect(rarityTextClass(undefined)).toBeUndefined();
   });
 });

lib/catalog/rarity.ts

@@ -14,6 +14,12 @@ const rarityGradients: Record<number, string> = {
   5: "linear-gradient(90deg, rgba(166, 123, 52, 1) 0%, rgba(178, 123, 44, 1) 100%)",
 };
 
+const rarityTextClasses: Record<number, string> = {
+  3: "text-[#4D7691]",
+  4: "text-[#6D6A9C]",
+  5: "text-[#A67B34]",
+};
+
 export function rarityGradientClass(rarity: number | null | undefined): string | undefined {
   return rarity ? rarityGradientClasses[rarity] : undefined;
 }
@@ -21,3 +27,7 @@ export function rarityGradientClass(rarity: number | null | undefined): string |
 export function rarityGradient(rarity: number | null | undefined): string {
   return (rarity && rarityGradients[rarity]) || "#17383d";
 }
+
+export function rarityTextClass(rarity: number | null | undefined): string | undefined {
+  return rarity ? rarityTextClasses[rarity] : undefined;
+}