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"}>
+          <Button
-            <PlusIcon className="h-4 w-4 mr-2" />
+            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"}>
+          <Button
-            <PlusIcon className="h-4 w-4 mr-2" />
+            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,10 +140,11 @@ function PublicTierCard({ tier }: { tier: TierInfo }) {
               `~${tier.maxMonthlyPrice.toLocaleString()}`}
           </span>
           <span className="text-[10px] text-muted-foreground">/mo</span>
+        </div>
         {tier.pricingNote && (
           <span
             className={cn(
-                "text-[10px] ml-1",
+              "text-[10px] block",
               tier.tier === "Platinum" ? "text-primary" : "text-amber-600"
             )}
           >
@@ -151,7 +152,6 @@ function PublicTierCard({ tier }: { tier: TierInfo }) {
           </span>
         )}
       </div>
-      </div>
 
       <p className="text-[11px] text-muted-foreground mb-2">{tier.description}</p>