Add page hints to admin and user plan interfaces

- Introduced page hints in the PlanContent, AdminPlansPage, and AdminRolesPage components to provide users with contextual information.
- Updated i18n resource files to include new translations for page hints related to plans and roles, enhancing user experience and clarity.
- Improved existing text for downgrade notices and discount tier hints for better understanding of billing implications.

frontend/src/routes/admin/plans.tsx

@@ -51,6 +51,7 @@ function AdminPlansPage() {
 
   return (
     <div className="flex flex-col gap-4">
+      <p className="text-xs text-muted-foreground">{t('admin.plans.pageHint')}</p>
       <div className="flex justify-end">
         <PlanFormDialog />
       </div>

frontend/src/routes/admin/roles.tsx

@@ -29,6 +29,7 @@ function AdminRolesPage() {
 
   return (
     <div className="flex flex-col gap-4">
+      <p className="text-xs text-muted-foreground">{t('admin.roles.pageHint')}</p>
       <div className="flex justify-end">
         <RoleFormDialog />
       </div>

frontend/src/routes/plan.tsx

@@ -101,6 +101,7 @@ function PlanContent() {
               : t('plan.current', { count: statusQuery.data.configQuota })}
           </p>
         )}
+        <p className="mt-1 text-xs text-muted-foreground">{t('plan.pageHint')}</p>
       </div>
 
       <div className="flex flex-col gap-3">
@@ -136,6 +137,7 @@ function PlanContent() {
             }}
           />
         </label>
+        {selection === 'custom' && <p className="text-xs text-muted-foreground">{t('plan.customHint')}</p>}
       </div>
 
       {needsRevokePicker && (