feat: redesign webapp trial offer

frontend/src/App.svelte

@@ -1439,6 +1439,9 @@
   }
 
   function primaryPayActionLabel() {
+    if (!subscription.active && appSettings?.trial_enabled && appSettings?.trial_available) {
+      return t("wa_pay_full_subscription", {}, "Оплатить полную подписку");
+    }
     if (trafficMode || selectedPlan?.sale_mode === "traffic_package") return t("wa_buy_traffic");
     return subscription.active ? t("wa_renew") : t("wa_pay_subscription");
   }

frontend/src/styles/webapp.css

@@ -467,12 +467,21 @@ a {
 }
 
 .trial-card {
-  padding: 13px 14px;
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+}
+
+.trial-offer-card {
+  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 48%),
+    linear-gradient(135deg, var(--surface-sheen), var(--surface-sheen-soft));
 }
 
 .trial-card-head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 11px;
 }
 
@@ -498,6 +507,46 @@ a {
   line-height: 1.28;
 }
 
+.trial-card-description {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.42;
+}
+
+.trial-card-facts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.trial-card-facts span {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+  padding: 9px 10px;
+  border: 1px solid var(--surface-subtle-border);
+  border-radius: 12px;
+  background: var(--surface-subtle);
+}
+
+.trial-card-facts small {
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.2;
+}
+
+.trial-card-facts strong {
+  overflow-wrap: anywhere;
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.trial-card-action {
+  margin-top: 2px;
+}
+
 .devices-summary-card {
   display: grid;
   gap: 10px;

frontend/src/webapp/screens/HomeScreen.svelte

@@ -69,6 +69,17 @@
     const limit = Number(appSettings?.trial_traffic_limit_gb || 0);
     return limit > 0 ? formatTrafficGb(limit) : t("wa_unlimited_traffic");
   }
+  function trialDurationLabel() {
+    const days = Number(appSettings?.trial_duration_days || 0);
+    return t("wa_sub_term_value_unit", {
+      value: days,
+      unit: termUnitLabel(days, "day"),
+    });
+  }
+
+  $: trialOfferAvailable = Boolean(
+    !subscription?.active && appSettings?.trial_enabled && appSettings?.trial_available
+  );
 
   export let activateTrial = () => {};
   export let openConnectLink = () => {};
@@ -214,20 +225,36 @@
           </div>
         </Card>
       {/if}
-    {:else if appSettings?.trial_enabled && appSettings?.trial_available}
-      <Card class="trial-card">
+    {:else if trialOfferAvailable}
+      <Card class="trial-card trial-offer-card">
         <div class="trial-card-head">
           <Gift size={22} />
           <span>
-            <strong>{t("wa_trial_title")}</strong>
-            <small
-              >{t("wa_trial_details", {
-                days: Number(appSettings?.trial_duration_days || 0),
-                traffic: trialTrafficLabel(),
-              })}</small
-            >
+            <strong>{t("wa_trial_offer_title", {}, "Можно начать с льготного периода")}</strong>
+            <small>{t("wa_trial_title")}</small>
           </span>
         </div>
+        <p class="trial-card-description">
+          {t(
+            "wa_trial_offer_description",
+            { duration: trialDurationLabel(), traffic: trialTrafficLabel() },
+            "Активируйте триал: {duration} доступа и {traffic} для скачивания без оплаты."
+          )}
+        </p>
+        <div class="trial-card-facts">
+          <span>
+            <small>{t("wa_trial_duration_label", {}, "Срок")}</small>
+            <strong>{trialDurationLabel()}</strong>
+          </span>
+          <span>
+            <small>{t("wa_trial_download_traffic_label", {}, "Доступно для скачивания")}</small>
+            <strong>{trialTrafficLabel()}</strong>
+          </span>
+        </div>
+        <Button class="wide trial-card-action" onclick={activateTrial} disabled={trialBusy}>
+          <Gift size={18} />
+          {t("wa_trial_try_free", {}, "Попробовать бесплатно")}
+        </Button>
       </Card>
     {/if}
 
@@ -250,12 +277,6 @@
         {/if}
         {primaryPayActionLabel()}
       </Button>
-      {#if !subscription.active && appSettings?.trial_enabled && appSettings?.trial_available}
-        <Button class="wide" variant="secondary" onclick={activateTrial} disabled={trialBusy}>
-          <Gift size={18} />
-          {t("wa_activate_trial")}
-        </Button>
-      {/if}
       {#if canChangeTariff}
         <Button class="wide" variant="secondary" onclick={openTariffChangeModal}>
           <RefreshCw size={18} />

locales/en.json

@@ -693,6 +693,7 @@
   "wa_premium_topup_balance": "Top-up balance",
   "wa_renew": "Renew",
   "wa_pay_subscription": "Pay subscription",
+  "wa_pay_full_subscription": "Pay full subscription",
   "wa_subscription_title": "Subscription",
   "wa_subscription_choose_period": "Choose subscription period",
   "wa_tariffs_title": "Tariffs",
@@ -747,6 +748,11 @@
   "wa_activate_trial": "Activate trial",
   "wa_trial_title": "Trial period",
   "wa_trial_details": "{days} days, {traffic}",
+  "wa_trial_offer_title": "Start with a grace period",
+  "wa_trial_offer_description": "Activate a trial: {duration} of access and {traffic} available to download for free.",
+  "wa_trial_duration_label": "Duration",
+  "wa_trial_download_traffic_label": "Available to download",
+  "wa_trial_try_free": "Try for free",
   "wa_trial_activated": "Trial activated",
   "wa_trial_activation_failed": "Failed to activate trial",
   "wa_trial_activation_loading": "Activating trial...",

locales/ru.json

@@ -693,6 +693,7 @@
   "wa_premium_topup_balance": "Докупленный остаток",
   "wa_renew": "Продлить",
   "wa_pay_subscription": "Оплатить подписку",
+  "wa_pay_full_subscription": "Оплатить полную подписку",
   "wa_subscription_title": "Подписка",
   "wa_subscription_choose_period": "Выберите срок подписки",
   "wa_tariffs_title": "Тарифы",
@@ -747,6 +748,11 @@
   "wa_activate_trial": "Активировать триал",
   "wa_trial_title": "Пробный период",
   "wa_trial_details": "{days} дн., {traffic}",
+  "wa_trial_offer_title": "Можно начать с льготного периода",
+  "wa_trial_offer_description": "Активируйте триал: {duration} доступа и {traffic} для скачивания без оплаты.",
+  "wa_trial_duration_label": "Срок",
+  "wa_trial_download_traffic_label": "Доступно для скачивания",
+  "wa_trial_try_free": "Попробовать бесплатно",
   "wa_trial_activated": "Пробный период активирован",
   "wa_trial_activation_failed": "Не удалось активировать пробный период",
   "wa_trial_activation_loading": "Активируем пробный период...",