feat(payment): implement first recharge offer functionality and UI updates

src/app/subscription/subscription-screen.tsx

@@ -16,6 +16,7 @@ import {
 import styles from "./components/subscription-screen.module.css";
 import {
   findSelectedSubscriptionPlan,
+  getFirstRechargeOfferView,
   getDefaultSubscriptionPlanId,
   toCoinsOfferPlanViews,
   toVipOfferPlanViews,
@@ -60,6 +61,21 @@ export function SubscriptionScreen({
     () => toCoinsOfferPlanViews(payment.plans),
     [payment.plans],
   );
+  const firstRechargeOffer = useMemo(
+    () =>
+      getFirstRechargeOfferView({
+        isFirstRecharge: payment.isFirstRecharge,
+        discountPercent: payment.firstRechargeOffer?.discountPercent,
+        vipPlans: vipOfferPlans,
+        coinPlans: directCoinsPlans,
+      }),
+    [
+      directCoinsPlans,
+      payment.firstRechargeOffer?.discountPercent,
+      payment.isFirstRecharge,
+      vipOfferPlans,
+    ],
+  );
 
   const selectedPlan = findSelectedSubscriptionPlan({
     canSubscribeVip,
@@ -111,6 +127,25 @@ export function SubscriptionScreen({
           />
         </header>
 
+        {firstRechargeOffer ? (
+          <section
+            className={styles.firstRechargeBanner}
+            aria-label="First recharge offer"
+          >
+            <span className={styles.firstRechargeBadge}>
+              {firstRechargeOffer.badgeText}
+            </span>
+            <div className={styles.firstRechargeCopy}>
+              <h2 className={styles.firstRechargeTitle}>
+                {firstRechargeOffer.title}
+              </h2>
+              <p className={styles.firstRechargeSubtitle}>
+                {firstRechargeOffer.subtitle}
+              </p>
+            </div>
+          </section>
+        ) : null}
+
         <div className={styles.offerStack}>
           {canSubscribeVip ? (
             <SubscriptionVipOfferSection