refactor: update EmptyState and PublicOfferingCard components for improved UI consistency

- Enhanced the EmptyState component by adjusting button properties to include left icons for better visual alignment.
- Refactored the PublicOfferingCard component to simplify the layout of pricing notes, improving readability and consistency in design.
- Made minor adjustments to spacing and layout properties across both components to enhance overall user experience.

apps/portal/src/components/atoms/empty-state.tsx

@@ -58,13 +58,20 @@ export function EmptyState({
 
       {action &&
         (action.href ? (
-          <Button as="a" href={action.href} size={isCompact ? "sm" : "default"}>
-            <PlusIcon className="h-4 w-4 mr-2" />
+          <Button
+            as="a"
+            href={action.href}
+            size={isCompact ? "sm" : "default"}
+            leftIcon={<PlusIcon className="h-4 w-4" />}
+          >
             {action.label}
           </Button>
         ) : (
-          <Button onClick={action.onClick} size={isCompact ? "sm" : "default"}>
-            <PlusIcon className="h-4 w-4 mr-2" />
+          <Button
+            onClick={action.onClick}
+            size={isCompact ? "sm" : "default"}
+            leftIcon={<PlusIcon className="h-4 w-4" />}
+          >
             {action.label}
           </Button>
         ))}

apps/portal/src/features/services/components/internet/PublicOfferingCard.tsx

@@ -132,7 +132,7 @@ function PublicTierCard({ tier }: { tier: TierInfo }) {
       </div>
 
       <div className="mb-2">
-        <div className="flex items-baseline gap-0.5 flex-wrap">
+        <div className="flex items-baseline gap-0.5">
           <span className="text-lg font-bold text-foreground">
             ¥{tier.monthlyPrice.toLocaleString()}
             {tier.maxMonthlyPrice &&
@@ -140,17 +140,17 @@ function PublicTierCard({ tier }: { tier: TierInfo }) {
               `~${tier.maxMonthlyPrice.toLocaleString()}`}
           </span>
           <span className="text-[10px] text-muted-foreground">/mo</span>
-          {tier.pricingNote && (
-            <span
-              className={cn(
-                "text-[10px] ml-1",
-                tier.tier === "Platinum" ? "text-primary" : "text-amber-600"
-              )}
-            >
-              {tier.pricingNote}
-            </span>
-          )}
         </div>
+        {tier.pricingNote && (
+          <span
+            className={cn(
+              "text-[10px] block",
+              tier.tier === "Platinum" ? "text-primary" : "text-amber-600"
+            )}
+          >
+            {tier.pricingNote}
+          </span>
+        )}
       </div>
 
       <p className="text-[11px] text-muted-foreground mb-2">{tier.description}</p>