Update IoT Hub home page cards and hero icons to match design

- Item card: match design big-card-stroke layout (8px radius, aspect-ratio
  preview, 16px gap, dot pattern bg, 500 weight name, no version/description)
- Compact card: rewrite to design small-card horizontal layout (72px icon,
  flex content, inline install button)
- Install button: use TB CE primary #305680, border rgba(0,0,0,0.12), 4px radius
- Section headers: use mat-button with iconPositionEnd, no hover color change
- Hero floating icons: re-export as complete self-contained SVGs with rotation
  baked in, remove CSS rotation, animation via translate + scale + opacity only
- Footer: rename "Submit Template" to "Contribute"

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html

@@ -28,9 +28,10 @@
         <div class="tb-iot-hub-hero-icons"
              [class.active]="heroIconsReady && activeHeroType === heroType">
           @for (iconUrl of heroType.icons; track iconUrl; let i = $index) {
-            <img class="tb-iot-hub-hero-float-icon"
+            <div class="tb-iot-hub-hero-float-icon"
-                 [class]="'icon-pos-' + (i + 1)"
+                 [class]="'icon-pos-' + (i + 1)">
-                 [src]="iconUrl" alt="">
+              <img [src]="iconUrl" alt="">
+            </div>
           }
         </div>
       }
@@ -74,10 +75,10 @@
     <!-- Popular Widgets -->
     @if (popularWidgets.length) {
       <div class="tb-iot-hub-section">
-        <a class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.WIDGET)">
+        <button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.WIDGET)">
           {{ 'iot-hub.popular-widgets' | translate }}
-          <mat-icon>chevron_right</mat-icon>
+          <mat-icon iconPositionEnd>chevron_right</mat-icon>
-        </a>
+        </button>
         <div class="tb-iot-hub-big-cards-row">
           @for (item of popularWidgets; track item.id) {
             <tb-iot-hub-item-card
@@ -96,10 +97,10 @@
     <!-- Popular Dashboards -->
     @if (popularDashboards.length) {
       <div class="tb-iot-hub-section">
-        <a class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.DASHBOARD)">
+        <button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.DASHBOARD)">
           {{ 'iot-hub.popular-dashboards' | translate }}
-          <mat-icon>chevron_right</mat-icon>
+          <mat-icon iconPositionEnd>chevron_right</mat-icon>
-        </a>
+        </button>
         <div class="tb-iot-hub-big-cards-row">
           @for (item of popularDashboards; track item.id) {
             <tb-iot-hub-item-card
@@ -118,10 +119,10 @@
     <!-- Popular Solution Templates -->
     @if (popularSolutionTemplates.length) {
       <div class="tb-iot-hub-section">
-        <a class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.SOLUTION_TEMPLATE)">
+        <button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.SOLUTION_TEMPLATE)">
           {{ 'iot-hub.popular-solution-templates' | translate }}
-          <mat-icon>chevron_right</mat-icon>
+          <mat-icon iconPositionEnd>chevron_right</mat-icon>
-        </a>
+        </button>
         <div class="tb-iot-hub-big-cards-row">
           @for (item of popularSolutionTemplates; track item.id) {
             <tb-iot-hub-item-card
@@ -140,10 +141,10 @@
     <!-- Popular Calculated Fields -->
     @if (popularCalcFields.length) {
       <div class="tb-iot-hub-section">
-        <a class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.CALCULATED_FIELD)">
+        <button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.CALCULATED_FIELD)">
           {{ 'iot-hub.popular-calculated-fields' | translate }}
-          <mat-icon>chevron_right</mat-icon>
+          <mat-icon iconPositionEnd>chevron_right</mat-icon>
-        </a>
+        </button>
         <div class="tb-iot-hub-compact-cards-grid">
           @for (item of popularCalcFields; track item.id) {
             <tb-iot-hub-item-card
@@ -162,10 +163,10 @@
     <!-- Popular Rule Chains -->
     @if (popularRuleChains.length) {
       <div class="tb-iot-hub-section">
-        <a class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.RULE_CHAIN)">
+        <button mat-button class="tb-iot-hub-section-header" (click)="navigateToBrowse(ItemType.RULE_CHAIN)">
           {{ 'iot-hub.popular-rule-chains' | translate }}
-          <mat-icon>chevron_right</mat-icon>
+          <mat-icon iconPositionEnd>chevron_right</mat-icon>
-        </a>
+        </button>
         <div class="tb-iot-hub-compact-cards-grid">
           @for (item of popularRuleChains; track item.id) {
             <tb-iot-hub-item-card
@@ -187,7 +188,7 @@
       <h2>{{ 'iot-hub.become-a-creator' | translate }}</h2>
       <p>{{ 'iot-hub.become-creator-text' | translate }}</p>
       <button mat-stroked-button color="primary" (click)="openSignup()">
-        {{ 'iot-hub.submit-template' | translate }}
+        {{ 'iot-hub.contribute' | translate }}
       </button>
     </div>
   }

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss

@@ -71,58 +71,64 @@
   inset: 0;
   pointer-events: none;
 
-  // Icons start near center (translate toward center, scaled down, invisible)
+  // Icons start near center (translated toward center, scaled down, invisible)
   .tb-iot-hub-hero-float-icon {
     opacity: 0;
-    transform: var(--icon-rotation) translate(var(--start-x), var(--start-y)) scale(0.9);
+    transform: translate(var(--start-x), var(--start-y)) scale(0.9);
     transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
 
   // Active: icons move outward to final position, scale to 1, fully visible
   &.active .tb-iot-hub-hero-float-icon {
     opacity: 1;
-    transform: var(--icon-rotation) translate(0, 0) scale(1);
+    transform: translate(0, 0) scale(1);
   }
 }
 
-// Individual floating icon — final (resting) positions match Figma
+// Individual floating icon — SVG has rotation/bg/shadow baked in, CSS handles position + animation
 .tb-iot-hub-hero-float-icon {
   position: absolute;
-  width: 64px;
+  width: 78px;
-  height: 64px;
+  height: 78px;
 
-  // Top-left: moves from center-right and center-down to final pos
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  // Top-left
   &.icon-pos-1 {
     top: 40px;
     left: 23%;
-    --icon-rotation: rotate(-15deg);
+    --icon-rotation: ;
     --start-x: 40px;
     --start-y: 12px;
   }
 
-  // Top-right: moves from center-left and center-down
+  // Top-right
   &.icon-pos-2 {
     top: 40px;
     right: 23%;
-    --icon-rotation: rotate(15deg);
+    --icon-rotation: ;
     --start-x: -40px;
     --start-y: 12px;
   }
 
-  // Bottom-left: moves from center-right and center-up
+  // Bottom-left
   &.icon-pos-3 {
     bottom: 100px;
     left: 18%;
-    --icon-rotation: rotate(-30deg);
+    --icon-rotation: ;
     --start-x: 50px;
     --start-y: -8px;
   }
 
-  // Bottom-right: moves from center-left and center-up
+  // Bottom-right
   &.icon-pos-4 {
     bottom: 100px;
     right: 18%;
-    --icon-rotation: rotate(30deg);
+    --icon-rotation: ;
     --start-x: -45px;
     --start-y: -4px;
   }
@@ -277,17 +283,12 @@
   margin-top: 48px;
 }
 
-// Section header — matches Figma "button" (height=40, font-size=20, font-weight=500)
+// Section header — mat-button, Figma: height=40, font-size=20, font-weight=500
 .tb-iot-hub-section-header {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
   font-size: 20px;
   font-weight: 500;
   line-height: 40px;
   color: rgba(0, 0, 0, 0.87);
-  cursor: pointer;
-  text-decoration: none;
 
   mat-icon {
     font-size: 20px;
@@ -295,9 +296,6 @@
     height: 20px;
   }
 
-  &:hover {
-    color: #00695c;
-  }
 }
 
 // Big card row — matches Figma "cards-row" (5 cards, gap=20, mt=12 from header)

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.html

@@ -15,101 +15,66 @@
     limitations under the License.
 
 -->
-<div class="tb-iot-hub-item-card" [class.tb-iot-hub-card-compact]="isCompactLayout()" (click)="onCardClick()">
+@if (isCompactLayout()) {
-  @if (!isCompactLayout()) {
+  <!-- Compact card (CF / RC) — Figma: horizontal row, icon | content | button -->
-    <div class="tb-iot-hub-card-preview" [class]="getPreviewClass()">
+  <div class="tb-iot-hub-card-compact" (click)="onCardClick()">
-      @if (getPreviewUrl(); as previewUrl) {
+    <div class="tb-iot-hub-compact-icon" [style.background]="item.color || '#4caf50'">
-        <img [src]="previewUrl" alt="" class="tb-iot-hub-preview-image">
+      <tb-icon>{{ getPlaceholderIcon() }}</tb-icon>
-      } @else {
-        <div class="tb-iot-hub-preview-placeholder" [style.background]="getCustomIconColor() ? getCustomIconColor() + '22' : null">
-          <tb-icon [style.color]="getCustomIconColor()">{{ getPlaceholderIcon() }}</tb-icon>
-        </div>
-      }
-      @if (item.peOnly) {
-        <span class="tb-iot-hub-pe-badge">PE</span>
-      }
     </div>
-  }
+    <div class="tb-iot-hub-compact-content">
-  <div class="tb-iot-hub-card-content">
+      <h3 class="tb-iot-hub-compact-name">{{ item.name }}</h3>
-    @if (isCompactLayout()) {
+      <div class="tb-iot-hub-compact-meta">
-      <div class="tb-iot-hub-card-cf-header">
+        <tb-icon class="tb-iot-hub-compact-author-icon">person</tb-icon>
-        <div class="tb-iot-hub-card-cf-icon" [style.background]="item.color || '#6366f1'">
+        <span class="tb-iot-hub-compact-creator" (click)="onCreatorClick($event)">{{ item.creatorDisplayName }}</span>
-          <tb-icon>{{ getPlaceholderIcon() }}</tb-icon>
+        <span class="tb-iot-hub-compact-dot">&middot;</span>
-        </div>
+        <tb-icon class="tb-iot-hub-compact-download-icon">download</tb-icon>
-        <div class="tb-iot-hub-card-cf-title-area">
+        <span class="tb-iot-hub-compact-count">{{ item.totalInstallCount | shortNumber }}</span>
-          <div class="tb-iot-hub-card-name-row">
-            <h3 class="tb-iot-hub-card-name">{{ item.name }}</h3>
-            <span class="tb-iot-hub-card-version">v{{ item.version }}</span>
-          </div>
-          @if (getSubtypeLabel(); as subtypeLabel) {
-            <span class="tb-iot-hub-card-cf-type">{{ subtypeLabel }}</span>
-          }
-        </div>
-        @if (item.peOnly) {
-          <span class="tb-iot-hub-pe-badge tb-iot-hub-pe-badge-inline">PE</span>
-        }
-      </div>
-    } @else {
-      <div class="tb-iot-hub-card-name-row">
-        <h3 class="tb-iot-hub-card-name">{{ item.name }}</h3>
-        <span class="tb-iot-hub-card-version">v{{ item.version }}</span>
       </div>
-      @if (item.type === ItemType.WIDGET && getSubtypeLabel(); as subtypeLabel) {
+    </div>
-        <span class="tb-iot-hub-card-widget-type-label">{{ subtypeLabel }}</span>
+    @if (isInstalled()) {
+      @if (isSameVersion()) {
+        <span class="tb-iot-hub-card-installed-label">{{ 'iot-hub.installed' | translate }}</span>
+      } @else {
+        <button class="tb-iot-hub-card-update-btn" (click)="onUpdateClick($event)">{{ 'iot-hub.update' | translate }}</button>
       }
+    } @else {
+      <button class="tb-iot-hub-card-install-btn" (click)="onInstallClick($event)">{{ 'iot-hub.install' | translate }}</button>
     }
-    @if (item.description) {
+  </div>
-      <p class="tb-iot-hub-card-description">{{ item.description }}</p>
+} @else {
-    }
+  <!-- Big card (Widget / Dashboard / Solution Template) -->
-    @if (getNodes(); as nodes) {
+  <div class="tb-iot-hub-item-card" (click)="onCardClick()">
-      @if (nodes.length) {
+    <div class="tb-iot-hub-card-preview">
-        <div class="tb-iot-hub-card-nodes">
+      @if (getPreviewUrl(); as previewUrl) {
-          @for (node of nodes | slice:0:maxVisibleNodes; track node.name) {
+        <img [src]="previewUrl" alt="" class="tb-iot-hub-preview-image">
-            <span class="tb-iot-hub-card-node-chip" [ngClass]="getNodeColorClass(node)" [title]="getNodeLabel(node)">{{ node.name }}</span>
+      } @else {
-          }
+        <div class="tb-iot-hub-preview-placeholder">
-          @if (getNodeCount() > maxVisibleNodes) {
+          <tb-icon>{{ getPlaceholderIcon() }}</tb-icon>
-            <span class="tb-iot-hub-card-node-more">+{{ getNodeCount() - maxVisibleNodes }}</span>
-          }
         </div>
       }
-    }
+    </div>
-    @if (getCategoryLabels().length || getFirstUseCaseLabel()) {
+    <div class="tb-iot-hub-card-content">
-      <div class="tb-iot-hub-card-categories">
+      <h3 class="tb-iot-hub-card-name">{{ item.name }}</h3>
-        @if (getCategoryLabels(); as labels) {
+      <div class="tb-iot-hub-card-footer">
-          @if (labels.length) {
+        <tb-icon class="tb-iot-hub-card-author-icon">person</tb-icon>
-            <span class="tb-iot-hub-card-category-chip">{{ labels[0] }}</span>
+        <span class="tb-iot-hub-card-creator" (click)="onCreatorClick($event)">{{ item.creatorDisplayName }}</span>
-          }
+        <span class="tb-iot-hub-card-dot">&middot;</span>
-        }
-        @if (getFirstUseCaseLabel(); as useCaseLabel) {
-          <span class="tb-iot-hub-card-use-case-chip">{{ useCaseLabel }}</span>
-        }
-      </div>
-    }
-    <div class="tb-iot-hub-card-footer">
-      @if (showCreator) {
-        <tb-icon class="tb-iot-hub-card-author-icon">person</tb-icon><span class="tb-iot-hub-card-creator" (click)="onCreatorClick($event)">{{ item.creatorDisplayName }}</span>
-        @if (item.publishedTime) {
-          <span class="tb-iot-hub-card-dot">&middot;</span>
-        }
-      }
-      @if (item.publishedTime) {
-        <span class="tb-iot-hub-card-published">{{ formatPublishedTime(item.publishedTime) }}</span>
-      }
-      <span class="tb-iot-hub-card-stats">
         <span class="tb-iot-hub-card-stat">
           <tb-icon>download</tb-icon>
           {{ item.totalInstallCount | shortNumber }}
         </span>
-        @if (isInstalled()) {
+        <span class="tb-iot-hub-card-stats">
-          @if (isSameVersion()) {
+          @if (isInstalled()) {
-            <span class="tb-iot-hub-card-installed-label">{{ 'iot-hub.installed' | translate }}</span>
+            @if (isSameVersion()) {
+              <span class="tb-iot-hub-card-installed-label">{{ 'iot-hub.installed' | translate }}</span>
+            } @else {
+              <button class="tb-iot-hub-card-update-btn" (click)="onUpdateClick($event)">{{ 'iot-hub.update' | translate }}</button>
+            }
           } @else {
-            <button class="tb-iot-hub-card-update-btn" (click)="onUpdateClick($event)">{{ 'iot-hub.update' | translate }}</button>
+            <button class="tb-iot-hub-card-install-btn" (click)="onInstallClick($event)">{{ 'iot-hub.install' | translate }}</button>
           }
-        } @else {
+        </span>
-          <button class="tb-iot-hub-card-install-btn" (click)="onInstallClick($event)">{{ 'iot-hub.install' | translate }}</button>
+      </div>
-        }
-      </span>
     </div>
   </div>
-</div>
+}

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.scss

@@ -19,9 +19,10 @@
   height: 100%;
 }
 
+// Card — Figma: white bg, border rgba(0,0,0,0.12), rounded-8, overflow-clip, flex-col, gap-16, pb-16
 .tb-iot-hub-item-card {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 12px;
+  border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
   transition: box-shadow 0.2s, transform 0.2s;
@@ -29,41 +30,33 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  gap: 16px;
 
   &:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
     transform: translateY(-2px);
   }
 
-  &.tb-iot-hub-card-compact {
-    border-color: #e5e7eb;
-
-    .tb-iot-hub-card-content {
-      padding: 16px 18px;
-    }
-  }
 }
 
-// Preview area
+// Preview area — Figma: aspect ~305:172, bg rgba(0,0,0,0.04), overflow-clip, p-12, dot pattern bg
 .tb-iot-hub-card-preview {
-  height: 160px;
+  aspect-ratio: 305 / 172;
+  background: rgba(0, 0, 0, 0.04);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
-
+  padding: 12px;
-  &.preview-widget, &.preview-dashboard { background: #f5f7fa; border-bottom: 1px solid #e5e7eb; }
+  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
-  &.preview-calculated-field { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
+  background-size: 20px 20px;
-  &.preview-rule-chain { background: linear-gradient(135deg, #f3e5f5, #e1bee7); }
-  &.preview-device { background: linear-gradient(135deg, #eceff1, #cfd8dc); }
 }
 
 .tb-iot-hub-preview-image {
-  max-width: 100%;
+  width: 100%;
-  max-height: 100%;
+  height: 100%;
   object-fit: contain;
-  padding: 8px;
 }
 
 .tb-iot-hub-preview-placeholder {
@@ -73,17 +66,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background: rgba(0, 0, 0, 0.06);
 
   tb-icon {
     font-size: 36px;
     width: 36px;
     height: 36px;
+    color: rgba(0, 0, 0, 0.38);
   }
-
-  .preview-widget &, .preview-dashboard & { background: rgba(107, 114, 128, 0.1); tb-icon { color: #6b7280; } }
-  .preview-calculated-field & { background: rgba(25, 118, 210, 0.15); tb-icon { color: #1565c0; } }
-  .preview-rule-chain & { background: rgba(123, 31, 162, 0.15); tb-icon { color: #7b1fa2; } }
-  .preview-device & { background: rgba(69, 90, 100, 0.15); tb-icon { color: #455a64; } }
 }
 
 .tb-iot-hub-pe-badge {
@@ -98,283 +88,253 @@
   font-weight: 600;
 }
 
-// Content area
+// Content area — Figma: px-16, gap-8, flex-col
 .tb-iot-hub-card-content {
-  padding: 12px 16px 12px;
+  padding: 0 16px 16px;
   flex: 1;
   display: flex;
   flex-direction: column;
+  gap: 8px;
 }
 
-// Compact header (CF / RC)
+// Compact card (CF / RC) — Figma: horizontal flex, gap-16, p-16, rounded-8
-.tb-iot-hub-card-cf-header {
+.tb-iot-hub-card-compact {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
-  gap: 12px;
+  gap: 16px;
-  margin-bottom: 10px;
+  padding: 16px;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  cursor: pointer;
+  height: 100%;
+  transition: box-shadow 0.2s, transform 0.2s;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+  }
 }
 
-.tb-iot-hub-card-cf-icon {
+// Compact icon — Figma: 72x72, rounded-6, colored bg, white icon 36px centered
-  width: 40px;
+.tb-iot-hub-compact-icon {
-  height: 40px;
+  width: 72px;
-  border-radius: 10px;
+  height: 72px;
+  border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 
   tb-icon {
-    font-size: 22px;
+    font-size: 36px;
-    width: 22px;
+    width: 36px;
-    height: 22px;
+    height: 36px;
     color: #fff;
   }
 }
 
-.tb-iot-hub-card-cf-title-area {
+// Compact content — Figma: flex-1, flex-col, gap-8
+.tb-iot-hub-compact-content {
   flex: 1;
   min-width: 0;
-
-  .tb-iot-hub-card-name-row {
-    margin-bottom: 2px;
-  }
-}
-
-.tb-iot-hub-card-cf-type {
-  font-size: 11px;
-  font-weight: 500;
-  color: #6b7280;
-}
-
-.tb-iot-hub-pe-badge-inline {
-  position: static;
-  flex-shrink: 0;
-  align-self: flex-start;
-}
-
-// Name row
-.tb-iot-hub-card-name-row {
   display: flex;
-  align-items: baseline;
+  flex-direction: column;
   gap: 8px;
-  margin-bottom: 4px;
 }
 
-.tb-iot-hub-card-name {
+// Compact name — Figma: 16px Medium, line-height 24, tracking 0.25, ellipsis
+.tb-iot-hub-compact-name {
   font-size: 16px;
-  font-weight: 700;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0.25px;
+  color: rgba(0, 0, 0, 0.87);
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-.tb-iot-hub-card-version {
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.4);
-  flex-shrink: 0;
-}
-
-.tb-iot-hub-card-widget-type-label {
-  font-size: 11px;
-  font-weight: 500;
-  color: #6b7280;
-  margin-bottom: 4px;
 }
 
-// Description
+// Compact meta row — Figma: flex row, gap-8, items-center
-.tb-iot-hub-card-description {
+.tb-iot-hub-compact-meta {
-  font-size: 13px;
+  display: flex;
-  line-height: 1.4;
+  align-items: center;
-  color: rgba(0, 0, 0, 0.55);
+  gap: 4px;
-  margin: 0 0 10px;
+  font-size: 12px;
-  display: -webkit-box;
+  line-height: 16px;
-  -webkit-line-clamp: 2;
+  letter-spacing: 0.25px;
-  -webkit-box-orient: vertical;
+  color: rgba(0, 0, 0, 0.54);
-  overflow: hidden;
 }
 
-// Node chips (Rule Chain)
+.tb-iot-hub-compact-author-icon {
-.tb-iot-hub-card-nodes {
+  font-size: 16px;
-  display: flex;
+  width: 16px;
-  gap: 6px;
+  height: 16px;
-  flex-wrap: nowrap;
+  flex-shrink: 0;
-  overflow: hidden;
-  margin-bottom: 8px;
 }
 
-.tb-iot-hub-card-node-chip {
+.tb-iot-hub-compact-creator {
-  display: inline-block;
+  cursor: pointer;
-  padding: 2px 8px;
-  border-radius: 6px;
-  font-size: 11px;
-  line-height: 16px;
-  height: 20px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  min-width: 0;
+
-  max-width: 120px;
+  &:hover {
-
+    color: #00695c;
-  &.node-enrichment { background: #f5fcd5; color: #4a7a00; }
+    text-decoration: underline;
-  &.node-filter { background: #fcfadb; color: #7a7200; }
+  }
-  &.node-transformation { background: #ddf2fc; color: #1a6d9e; }
-  &.node-action { background: #fde3e2; color: #9e2a27; }
-  &.node-analytics { background: #d5f6f4; color: #0e7a74; }
-  &.node-external { background: #fef1d8; color: #8a5d00; }
-  &.node-flow { background: #f3edfc; color: #5b3a9e; }
-  &.node-unknown { background: #f5f5f5; color: rgba(0, 0, 0, 0.54); }
 }
 
-.tb-iot-hub-card-node-more {
+.tb-iot-hub-compact-dot {
-  font-size: 12px;
+  margin: 0 4px;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.45);
-  padding: 3px 4px;
   flex-shrink: 0;
 }
 
-// Category / use case tags
+.tb-iot-hub-compact-download-icon {
-.tb-iot-hub-card-categories {
+  font-size: 12px;
-  display: flex;
+  width: 12px;
-  gap: 4px;
+  height: 12px;
-  flex-wrap: wrap;
+  flex-shrink: 0;
-  margin-bottom: 12px;
 }
 
-.tb-iot-hub-card-category-chip {
+.tb-iot-hub-compact-count {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 11px;
   font-weight: 500;
-  background: #eff6ff;
+  text-transform: uppercase;
-  color: #1e6bb8;
-  white-space: nowrap;
 }
 
-.tb-iot-hub-card-use-case-chip {
+// Name — Figma: 16px Medium, line-height 24, tracking 0.25, ellipsis
-  display: inline-block;
+.tb-iot-hub-card-name {
-  padding: 2px 8px;
+  font-size: 16px;
-  border-radius: 4px;
-  font-size: 11px;
   font-weight: 500;
-  background: #f0fdf4;
+  line-height: 24px;
-  color: #16a34a;
+  letter-spacing: 0.25px;
+  margin: 0;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: rgba(0, 0, 0, 0.87);
 }
 
-// Footer
+
+// Footer — Figma: flex, justify-between, no border-top, inline with content
 .tb-iot-hub-card-footer {
   display: flex;
   align-items: center;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
+  line-height: 16px;
+  letter-spacing: 0.25px;
+  color: rgba(0, 0, 0, 0.54);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-top: auto;
-  margin-left: -16px;
-  margin-right: -16px;
-  margin-bottom: -12px;
-  padding: 12px 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
 
+  // Author icon — Figma: person icon, 16px
   .tb-iot-hub-card-author-icon {
-    font-size: 14px;
+    font-size: 16px;
-    width: 14px;
+    width: 16px;
-    height: 14px;
+    height: 16px;
     flex-shrink: 0;
     margin-right: 4px;
   }
 
   .tb-iot-hub-card-creator {
-    color: #1976d2;
-    cursor: pointer;
     overflow: hidden;
     text-overflow: ellipsis;
+    cursor: pointer;
 
     &:hover {
+      color: #00695c;
       text-decoration: underline;
     }
   }
 
+  // Dot separator — Figma: 3px circle, rgba(0,0,0,0.38)
   .tb-iot-hub-card-dot {
-    margin: 0 6px;
+    margin: 0 8px;
     flex-shrink: 0;
   }
 
   .tb-iot-hub-card-published {
-    flex-shrink: 0;
+    display: none;
   }
 
   .tb-iot-hub-card-stats {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     margin-left: auto;
     flex-shrink: 0;
   }
 
+  // Download stat — Figma: download icon 12px, count 12px Medium uppercase
   .tb-iot-hub-card-stat {
     display: flex;
     align-items: center;
-    gap: 3px;
+    gap: 2px;
-    font-size: 11px;
+    font-size: 12px;
-    color: #9ca3af;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.54);
+    text-transform: uppercase;
 
     tb-icon {
-      font-size: 14px;
+      font-size: 12px;
-      width: 14px;
+      width: 12px;
-      height: 14px;
+      height: 12px;
     }
   }
 
-  .tb-iot-hub-card-install-btn {
+}
-    padding: 5px 14px;
-    border-radius: 6px;
-    border: 1px solid #305680;
-    background: transparent;
-    color: #305680;
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    white-space: nowrap;
-    transition: all 0.15s;
 
-    &:hover {
+// Install button — Figma: border rgba(0,0,0,0.12), rounded-4, px-16 py-6, text #00695c 14px Medium
-      background: #305680;
+.tb-iot-hub-card-install-btn {
-      color: #fff;
+  padding: 6px 16px;
-    }
+  border-radius: 4px;
-  }
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: transparent;
+  color: #305680;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: background 0.15s;
 
-  .tb-iot-hub-card-installed-label {
+  &:hover {
-    padding: 5px 14px;
+    background: rgba(48, 86, 128, 0.04);
-    border-radius: 6px;
-    background: #e8f5e9;
-    color: #2e7d32;
-    font-size: 12px;
-    font-weight: 600;
-    white-space: nowrap;
   }
+}
 
-  .tb-iot-hub-card-update-btn {
+.tb-iot-hub-card-installed-label {
-    padding: 5px 14px;
+  padding: 6px 16px;
-    border-radius: 6px;
+  border-radius: 4px;
-    border: 1px solid #f57c00;
+  background: #e8f5e9;
-    background: transparent;
+  color: #2e7d32;
-    color: #f57c00;
+  font-size: 14px;
-    font-size: 12px;
+  font-weight: 500;
-    font-weight: 600;
+  line-height: 20px;
-    cursor: pointer;
+  white-space: nowrap;
-    white-space: nowrap;
+  flex-shrink: 0;
-    transition: all 0.15s;
+}
 
-    &:hover {
+.tb-iot-hub-card-update-btn {
-      background: #f57c00;
+  padding: 6px 16px;
-      color: #fff;
+  border-radius: 4px;
-    }
+  border: 1px solid #f57c00;
-  }
+  background: transparent;
+  color: #f57c00;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: background 0.15s;
 
+  &:hover {
+    background: rgba(245, 124, 0, 0.04);
+  }
 }

ui-ngx/src/assets/iot-hub/hero-dashboard-icon-1.svg

@@ -1,13 +1,13 @@
 <svg width="74" height="74" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_ii_16977_25520)">
-<rect y="8.09252" width="66.4017" height="66.4017" rx="6.15549" transform="rotate(-7 0 8.09252)" fill="#4D5FD0"/>
+<rect y="8.09243" width="66.4025" height="66.4025" rx="6.15549" transform="rotate(-7 0 8.09243)" fill="#4D5FD0"/>
-<rect x="0.571648" y="8.53914" width="65.3758" height="65.3758" rx="5.64254" transform="rotate(-7 0.571648 8.53914)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
+<rect x="0.571648" y="8.53905" width="65.3766" height="65.3766" rx="5.64254" transform="rotate(-7 0.571648 8.53905)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
 <g clip-path="url(#clip0_16977_25520)">
-<path d="M22.2501 40.5846L35.2941 38.983L33.2921 22.6779L20.2481 24.2795L22.2501 40.5846ZM23.8517 53.6286L36.8957 52.027L35.6945 42.244L22.6505 43.8456L23.8517 53.6286ZM40.1568 51.6266L53.2008 50.025L51.1988 33.7199L38.1547 35.3216L40.1568 51.6266ZM36.5531 22.2775L37.7543 32.0605L50.7984 30.4589L49.5972 20.6759L36.5531 22.2775Z" fill="white"/>
+<path d="M22.2504 40.5849L35.2946 38.9833L33.2925 22.678L20.2483 24.2796L22.2504 40.5849ZM23.852 53.6291L36.8962 52.0275L35.695 42.2443L22.6508 43.846L23.852 53.6291ZM40.1573 51.6271L53.2015 50.0254L51.1994 33.7202L38.1552 35.3218L40.1573 51.6271ZM36.5536 22.2776L37.7548 32.0608L50.799 30.4591L49.5978 20.676L36.5536 22.2776Z" fill="white"/>
 </g>
 </g>
 <defs>
-<filter id="filter0_ii_16977_25520" x="0" y="-2.07505" width="74" height="78.1501" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_ii_16977_25520" x="0" y="-2.07526" width="74.0009" height="78.1511" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@@ -24,7 +24,7 @@
 <feBlend mode="normal" in2="effect1_innerShadow_16977_25520" result="effect2_innerShadow_16977_25520"/>
 </filter>
 <clipPath id="clip0_16977_25520">
-<rect width="38.9848" height="38.9848" fill="white" transform="translate(14.7589 19.9893) scale(1.01132) rotate(-7)"/>
+<rect width="38.9848" height="38.9848" fill="white" transform="translate(14.7591 19.9894) scale(1.01133) rotate(-7)"/>
 </clipPath>
 </defs>
 </svg>

ui-ngx/src/assets/iot-hub/hero-dashboard-icon-2.svg

@@ -1,11 +1,11 @@
 <svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_ii_16977_25524)">
-<rect x="6.94297" width="66.421" height="66.421" rx="6.15549" transform="rotate(6 6.94297 0)" fill="#4D5FD0"/>
+<rect x="6.94288" width="66.421" height="66.421" rx="6.15549" transform="rotate(6 6.94288 0)" fill="#4D5FD0"/>
-<rect x="7.3995" y="0.563767" width="65.3951" height="65.3951" rx="5.64254" transform="rotate(6 7.3995 0.563767)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
+<rect x="7.39941" y="0.563767" width="65.3951" height="65.3951" rx="5.64254" transform="rotate(6 7.39941 0.563767)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
-<path d="M21.3894 36.7069L20.187 48.1464L49.6031 51.2382L49.8607 48.7869L36.3551 35.8014L28.8734 44.1026L21.3894 36.7069ZM22.42 26.9015L28.4416 32.4912L37.815 21.9105L45.2991 29.3062L51.836 29.9933L50.2953 44.6523L36.1892 31.0915L28.7437 39.3634L21.8291 32.5232L22.42 26.9015Z" fill="white"/>
+<path d="M21.3893 36.7069L20.1869 48.1464L49.603 51.2382L49.8606 48.7869L36.355 35.8014L28.8734 44.1026L21.3893 36.7069ZM22.4199 26.9015L28.4415 32.4912L37.815 21.9105L45.299 29.3062L51.8359 29.9933L50.2952 44.6523L36.1891 31.0915L28.7436 39.3634L21.829 32.5232L22.4199 26.9015Z" fill="white"/>
 </g>
 <defs>
-<filter id="filter0_ii_16977_25524" x="0" y="-2.07566" width="73" height="77.1513" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_ii_16977_25524" x="-8.96633e-05" y="-2.07566" width="73" height="77.1513" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>

ui-ngx/src/assets/iot-hub/hero-dashboard-icon-3.svg

@@ -1,13 +1,13 @@
 <svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_ii_16977_25528)">
-<rect y="13.6723" width="65.764" height="65.764" rx="6.15549" transform="rotate(-12 0 13.6723)" fill="#4D5FD0"/>
+<rect y="13.6731" width="65.764" height="65.764" rx="6.15549" transform="rotate(-12 0 13.6731)" fill="#4D5FD0"/>
-<rect x="0.608399" y="14.0674" width="64.7381" height="64.7381" rx="5.64254" transform="rotate(-12 0.608399 14.0674)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
+<rect x="0.608399" y="14.0682" width="64.7381" height="64.7381" rx="5.64254" transform="rotate(-12 0.608399 14.0682)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
 <g clip-path="url(#clip0_16977_25528)">
-<path d="M41.5261 35.0443L37.9298 34.2452L40.8901 32.0524L41.6892 28.4561L43.882 31.4165L47.4783 32.2156L44.5179 34.4084L43.7188 38.0047L41.5261 35.0443ZM26.8897 44.9084L27.6888 41.3121L30.6492 39.1194L27.0529 38.3203L24.8601 35.3599L24.061 38.9562L21.1007 41.149L24.697 41.9481L26.8897 44.9084ZM32.3598 35.4291L33.2792 31.2251L36.7458 28.6752L32.5418 27.7558L29.9919 24.2892L29.0725 28.4932L25.6059 31.0431L29.8099 31.9625L32.3598 35.4291ZM29.8842 55.0835L37.3997 43.4895L45.1185 48.5021L55.4117 30.4129L52.6909 28.6459L44.1037 43.7279L36.3849 38.7152L26.9897 53.2038L29.8842 55.0835Z" fill="white"/>
+<path d="M41.5261 35.0451L37.9298 34.246L40.8901 32.0532L41.6892 28.4569L43.882 31.4173L47.4783 32.2164L44.5179 34.4092L43.7188 38.0055L41.5261 35.0451ZM26.8897 44.9092L27.6889 41.3129L30.6492 39.1202L27.0529 38.3211L24.8601 35.3607L24.061 38.957L21.1007 41.1498L24.697 41.9489L26.8897 44.9092ZM32.3598 35.4299L33.2792 31.2259L36.7458 28.676L32.5418 27.7566L29.9919 24.29L29.0725 28.494L25.6059 31.0439L29.8099 31.9633L32.3598 35.4299ZM29.8842 55.0843L37.3997 43.4903L45.1185 48.5029L55.4117 30.4137L52.6909 28.6467L44.1037 43.7287L36.3849 38.716L26.9897 53.2046L29.8842 55.0843Z" fill="white"/>
 </g>
 </g>
 <defs>
-<filter id="filter0_ii_16977_25528" x="0" y="-2.05513" width="78" height="82.1103" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_ii_16977_25528" x="0" y="-2.05432" width="78" height="82.1103" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@@ -24,7 +24,7 @@
 <feBlend mode="normal" in2="effect1_innerShadow_16977_25528" result="effect2_innerShadow_16977_25528"/>
 </filter>
 <clipPath id="clip0_16977_25528">
-<rect width="38.9848" height="38.9848" fill="white" transform="translate(15.787 23.9818) scale(1.00161) rotate(-12)"/>
+<rect width="38.9848" height="38.9848" fill="white" transform="translate(15.787 23.9826) scale(1.00161) rotate(-12)"/>
 </clipPath>
 </defs>
 </svg>

ui-ngx/src/assets/iot-hub/hero-dashboard-icon-4.svg

@@ -1,13 +1,13 @@
 <svg width="83" height="83" viewBox="0 0 83 83" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_ii_16977_25533)">
-<rect x="20.3542" width="65.8694" height="65.8694" rx="6.15549" transform="rotate(18 20.3542 0)" fill="#4D5FD0"/>
+<rect x="20.3547" width="65.8692" height="65.8692" rx="6.15549" transform="rotate(18 20.3547 0)" fill="#4D5FD0"/>
-<rect x="20.6835" y="0.646365" width="64.8435" height="64.8435" rx="5.64254" transform="rotate(18 20.6835 0.646365)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
+<rect x="20.684" y="0.646365" width="64.8433" height="64.8433" rx="5.64254" transform="rotate(18 20.684 0.646365)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
 <g clip-path="url(#clip0_16977_25533)">
-<path d="M59.3825 28.4348L57.8718 33.0843L62.5213 34.595L61.5141 37.6946L56.8646 36.1839L55.3539 40.8334L52.2543 39.8263L53.765 35.1768L49.1155 33.6661L50.1227 30.5664L54.7721 32.0771L56.2828 27.4277L59.3825 28.4348ZM40.9411 43.0042C39.2363 42.4502 38.2946 40.6022 38.8486 38.8974C39.4025 37.1926 41.2505 36.2509 42.9553 36.8049C44.6601 37.3588 45.6018 39.2068 45.0479 40.9116C44.4939 42.6164 42.6459 43.5581 40.9411 43.0042ZM47.4964 28.1025L46.4792 31.2331C45.9928 30.9855 45.4881 30.7757 44.9696 30.6056C39.7777 28.9186 34.3765 31.5672 32.5485 37.1931C31.3702 40.8196 32.8313 46.6061 37.2449 54.3799C45.3849 50.685 49.9631 46.878 51.1464 43.2359L51.2471 42.9259L54.3468 43.9331L54.2461 44.243C52.5742 49.3884 46.4572 54.1347 35.9054 58.5024C29.9361 48.7667 27.777 41.3313 29.4489 36.1859C31.9567 28.4678 39.4675 25.3909 45.9768 27.5059C46.5037 27.6771 47.0051 27.8743 47.4964 28.1025Z" fill="white"/>
+<path d="M59.3828 28.4347L57.8721 33.0842L62.5216 34.5949L61.5145 37.6945L56.865 36.1838L55.3543 40.8333L52.2547 39.8261L53.7654 35.1767L49.1159 33.666L50.123 30.5663L54.7725 32.077L56.2832 27.4276L59.3828 28.4347ZM40.9415 43.004C39.2367 42.4501 38.2951 40.602 38.849 38.8972C39.4029 37.1924 41.251 36.2508 42.9558 36.8047C44.6606 37.3587 45.6022 39.2067 45.0483 40.9115C44.4943 42.6163 42.6463 43.5579 40.9415 43.004ZM47.4968 28.1024L46.4796 31.233C45.9932 30.9854 45.4885 30.7756 44.97 30.6055C39.7781 28.9185 34.3769 31.5671 32.549 37.1929C31.3706 40.8195 32.8317 46.6059 37.2453 54.3797C45.3853 50.6848 49.9634 46.8778 51.1468 43.2357L51.2475 42.9258L54.3472 43.9329L54.2465 44.2429C52.5746 49.3883 46.4576 54.1345 35.9058 58.5022C29.9365 48.7665 27.7775 41.3312 29.4494 36.1858C31.9571 28.4677 39.4679 25.3908 45.9772 27.5058C46.5041 27.677 47.0055 27.8742 47.4968 28.1024Z" fill="white"/>
 </g>
 </g>
 <defs>
-<filter id="filter0_ii_16977_25533" x="0" y="-2.05842" width="83" height="87.1168" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_ii_16977_25533" x="0.000561057" y="-2.05841" width="82.9997" height="87.1165" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@@ -24,7 +24,7 @@
 <feBlend mode="normal" in2="effect1_innerShadow_16977_25533" result="effect2_innerShadow_16977_25533"/>
 </filter>
 <clipPath id="clip0_16977_25533">
-<rect width="38.9848" height="38.9848" fill="white" transform="translate(28.8893 16.8136) scale(1.00321) rotate(18)"/>
+<rect width="38.9848" height="38.9848" fill="white" transform="translate(28.8898 16.8135) scale(1.00321) rotate(18)"/>
 </clipPath>
 </defs>
 </svg>

ui-ngx/src/assets/iot-hub/hero-widget-icon-1.svg

@@ -1,13 +1,13 @@
 <svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_ii_16977_25487)">
-<rect y="16.6941" width="64.5028" height="64.5028" rx="5.99735" transform="rotate(-15 0 16.6941)" fill="#2C9755"/>
+<rect y="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(-15 0 16.6947)" fill="#2C9755"/>
-<rect x="0.612102" y="17.0475" width="63.5033" height="63.5033" rx="5.49758" transform="rotate(-15 0.612102 17.0475)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
+<rect x="0.612102" y="17.0481" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(-15 0.612102 17.0481)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M28.3431 35.2648C27.6301 37.1079 27.3916 39.0997 27.6496 41.0577C27.6732 41.2124 27.6391 41.3703 27.5537 41.5016C27.4684 41.6329 27.3377 41.7284 27.1866 41.7699L21.365 43.3298C21.2798 43.3529 21.1907 43.3582 21.1033 43.3452C21.016 43.3323 20.9323 43.3014 20.8575 43.2545C20.7827 43.2076 20.7185 43.1458 20.6689 43.0729C20.6193 43.0001 20.5853 42.9177 20.5692 42.831C19.9007 39.0826 20.3753 35.2191 21.9316 31.7407C21.969 31.6598 22.0229 31.5876 22.0899 31.5287C22.1569 31.4698 22.2355 31.4256 22.3206 31.3988C22.4058 31.372 22.4956 31.3633 22.5842 31.3732C22.6729 31.3832 22.7585 31.4115 22.8355 31.4564L28.0732 34.4739C28.206 34.5512 28.3063 34.6737 28.3559 34.819C28.4055 34.9642 28.4009 35.1225 28.3431 35.2648Z" fill="white"/>
+<path d="M28.3433 35.2655C27.6302 37.1086 27.3918 39.1005 27.6498 41.0585C27.6734 41.2131 27.6393 41.3711 27.5539 41.5024C27.4685 41.6337 27.3379 41.7291 27.1867 41.7707L21.3652 43.3306C21.2799 43.3537 21.1908 43.3589 21.1034 43.346C21.0161 43.333 20.9324 43.3021 20.8576 43.2553C20.7829 43.2084 20.7186 43.1466 20.669 43.0737C20.6194 43.0008 20.5855 42.9184 20.5693 42.8318C19.9008 39.0834 20.3754 35.2198 21.9317 31.7414C21.9691 31.6605 22.0231 31.5883 22.0901 31.5294C22.1571 31.4705 22.2357 31.4262 22.3208 31.3995C22.4059 31.3727 22.4957 31.364 22.5844 31.3739C22.673 31.3838 22.7586 31.4122 22.8356 31.4571L28.0734 34.4746C28.2062 34.5519 28.3065 34.6744 28.3561 34.8197C28.4056 34.9649 28.4011 35.1232 28.3433 35.2655Z" fill="white"/>
-<path d="M47.5433 22.9025L44.5154 28.1356C44.4373 28.268 44.3142 28.3681 44.1685 28.4177C44.0228 28.4674 43.8641 28.4633 43.7213 28.4062C41.3783 27.5098 38.8104 27.3769 36.3856 28.0266C33.9607 28.6764 31.8033 30.0754 30.2224 32.0232C30.1278 32.1448 29.9924 32.2281 29.8412 32.258C29.69 32.2879 29.5331 32.2623 29.3994 32.1859L24.1606 29.1679C24.0834 29.1238 24.0162 29.0642 23.9633 28.9927C23.9105 28.9212 23.8733 28.8395 23.8539 28.7528C23.8346 28.666 23.8336 28.5762 23.851 28.489C23.8685 28.4019 23.9039 28.3193 23.9552 28.2466C26.5405 24.7018 30.2646 22.1481 34.5059 21.0116C38.7473 19.8752 43.2493 20.2247 47.2606 22.0019C47.3413 22.0393 47.4133 22.0931 47.472 22.1598C47.5307 22.2266 47.5747 22.3049 47.6014 22.3896C47.628 22.4744 47.6365 22.5638 47.6266 22.6521C47.6166 22.7405 47.5882 22.8257 47.5433 22.9025Z" fill="white"/>
+<path d="M47.5436 22.9031L44.5157 28.1362C44.4375 28.2686 44.3144 28.3688 44.1687 28.4184C44.023 28.4681 43.8644 28.464 43.7216 28.4068C41.3786 27.5104 38.8107 27.3776 36.3858 28.0273C33.9609 28.677 31.8035 30.0761 30.2226 32.0239C30.128 32.1454 29.9926 32.2288 29.8414 32.2587C29.6902 32.2886 29.5333 32.263 29.3996 32.1866L24.1608 29.1685C24.0835 29.1245 24.0163 29.0648 23.9635 28.9933C23.9107 28.9219 23.8734 28.8401 23.8541 28.7534C23.8347 28.6667 23.8337 28.5769 23.8512 28.4897C23.8686 28.4025 23.9041 28.32 23.9553 28.2472C26.5406 24.7024 30.2647 22.1487 34.5061 21.0122C38.7475 19.8758 43.2495 20.2253 47.2609 22.0025C47.3416 22.0399 47.4136 22.0937 47.4723 22.1604C47.531 22.2272 47.575 22.3055 47.6017 22.3903C47.6283 22.475 47.6369 22.5644 47.6269 22.6528C47.6169 22.7411 47.5885 22.8264 47.5436 22.9031Z" fill="white"/>
-<path d="M57.9955 34.5403C60.7268 44.7336 54.6568 55.2639 44.4167 58.0035C35.0048 60.5255 25.2716 55.6207 21.6825 46.7113C21.65 46.6274 21.6356 46.5377 21.6403 46.4479C21.645 46.358 21.6686 46.2702 21.7097 46.1901C21.7507 46.11 21.8083 46.0394 21.8785 45.9831C21.9488 45.9267 22.0302 45.8857 22.1173 45.8629L27.9767 44.2929C28.1225 44.2548 28.277 44.2693 28.413 44.3338C28.549 44.3983 28.6577 44.5087 28.7201 44.6455C29.9969 47.3101 32.2227 49.4033 34.9634 50.5169C37.7041 51.6304 40.7632 51.6845 43.5439 50.6685C48.8067 48.7627 52.0795 43.2914 51.2452 37.7682C50.8126 34.8222 49.2854 32.1476 46.9671 30.2758C46.8458 30.1814 46.7626 30.0464 46.733 29.8956C46.7034 29.7448 46.7293 29.5884 46.806 29.455L49.8338 24.2219C49.878 24.1447 49.9379 24.0776 50.0095 24.0248C50.0812 23.972 50.1631 23.9347 50.25 23.9153C50.3369 23.8959 50.4269 23.8949 50.5142 23.9122C50.6015 23.9295 50.6842 23.9648 50.757 24.0159C54.3131 26.5858 56.87 30.3034 57.9955 34.5403Z" fill="white"/>
+<path d="M57.9959 34.541C60.7271 44.7344 54.6571 55.2647 44.417 58.0044C35.005 60.5263 25.2718 55.6215 21.6826 46.7121C21.6501 46.6282 21.6357 46.5384 21.6404 46.4486C21.6451 46.3588 21.6688 46.271 21.7098 46.1909C21.7509 46.1108 21.8084 46.0402 21.8787 45.9838C21.9489 45.9274 22.0303 45.8865 22.1175 45.8637L27.9769 44.2937C28.1226 44.2556 28.2771 44.2701 28.4131 44.3346C28.5491 44.3991 28.6579 44.5095 28.7203 44.6463C29.997 47.3108 32.2229 49.4041 34.9636 50.5177C37.7044 51.6312 40.7634 51.6853 43.5442 50.6693C48.807 48.7635 52.0798 43.2921 51.2455 37.7689C50.8129 34.8229 49.2858 32.1483 46.9674 30.2765C46.8461 30.1821 46.7629 30.0471 46.7333 29.8963C46.7037 29.7455 46.7296 29.589 46.8062 29.4557L49.8341 24.2226C49.8783 24.1454 49.9382 24.0782 50.0099 24.0254C50.0815 23.9727 50.1634 23.9354 50.2503 23.916C50.3372 23.8966 50.4272 23.8955 50.5145 23.9128C50.6018 23.9301 50.6845 23.9654 50.7573 24.0165C54.3134 26.5864 56.8703 30.304 57.9959 34.541Z" fill="white"/>
 </g>
 <defs>
-<filter id="filter0_ii_16977_25487" x="0" y="-2.01571" width="79" height="83.0314" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_ii_16977_25487" x="0" y="-2.01525" width="79.0005" height="83.032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>

ui-ngx/src/assets/iot-hub/hero-widget-icon-2.svg

@@ -1,11 +1,11 @@
 <svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_ii_16977_25492)">
-<rect x="16.6941" width="64.5028" height="64.5028" rx="5.99735" transform="rotate(15 16.6941 0)" fill="#2C9755"/>
+<rect x="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(15 16.6947 0)" fill="#2C9755"/>
-<rect x="17.0475" y="0.612102" width="63.5033" height="63.5033" rx="5.49758" transform="rotate(15 17.0475 0.612102)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
+<rect x="17.0481" y="0.612102" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(15 17.0481 0.612102)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M24.4505 48.4841L47.664 54.7041C50.0377 55.3402 52.2072 53.1625 51.5696 50.7944L45.3363 27.6308C44.6987 25.2627 41.7392 24.4698 40.003 26.2018L23.0229 43.1454C21.2868 44.8774 22.0768 47.848 24.4505 48.4841ZM38.9484 40.8043C38.1006 40.5772 37.5928 39.6977 37.82 38.8499L38.646 35.7671C38.8732 34.9193 39.7527 34.4116 40.6004 34.6387C41.4482 34.8659 41.956 35.7454 41.7288 36.5931L40.9028 39.6759C40.6756 40.5237 39.7961 41.0315 38.9484 40.8043ZM38.8377 47.3829L35.7549 46.5569L36.5809 43.4741L39.6637 44.3001L38.8377 47.3829Z" fill="white"/>
+<path d="M24.4511 48.4844L47.6648 54.7045C50.0385 55.3405 52.208 53.1629 51.5704 50.7948L45.337 27.631C44.6994 25.2629 41.7399 24.4699 40.0037 26.202L23.0236 43.1456C21.2874 44.8777 22.0774 47.8483 24.4511 48.4844ZM38.9491 40.8046C38.1013 40.5774 37.5935 39.6979 37.8207 38.8501L38.6467 35.7673C38.8739 34.9196 39.7534 34.4118 40.6012 34.6389C41.4489 34.8661 41.9567 35.7456 41.7295 36.5934L40.9035 39.6762C40.6763 40.524 39.7969 41.0317 38.9491 40.8046ZM38.8384 47.3832L35.7556 46.5572L36.5816 43.4744L39.6645 44.3004L38.8384 47.3832Z" fill="white"/>
 </g>
 <defs>
-<filter id="filter0_ii_16977_25492" x="0" y="-2.01571" width="79" height="83.0314" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_ii_16977_25492" x="0.000478935" y="-2.01573" width="79.0005" height="83.032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>

ui-ngx/src/assets/iot-hub/hero-widget-icon-3.svg

@@ -1,15 +1,15 @@
 <svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_ii_16977_25494)">
 <g clip-path="url(#clip0_16977_25494)">
-<rect y="32.2108" width="64.4207" height="64.4207" rx="5.99735" transform="rotate(-30 0 32.2108)" fill="#2C9755"/>
+<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="#2C9755"/>
 <g clip-path="url(#clip1_16977_25494)">
-<path d="M38.3283 49.6292L45.5002 62.0512C45.7115 62.4172 45.7688 62.8522 45.6594 63.2605C45.55 63.6688 45.2829 64.0169 44.9168 64.2283L39.3959 67.4157C39.0299 67.6271 38.5949 67.6844 38.1866 67.575C37.7783 67.4656 37.4302 67.1984 37.2188 66.8324L30.047 54.4104C29.8357 54.0443 29.7784 53.6093 29.8878 53.201C29.9972 52.7928 30.2643 52.4447 30.6304 52.2333L36.1512 49.0458C36.5173 48.8345 36.9523 48.7772 37.3606 48.8866C37.7689 48.996 38.117 49.2631 38.3283 49.6292ZM38.4274 27.4884L32.9065 30.6759C32.5405 30.8873 32.2734 31.2354 32.164 31.6436C32.0546 32.0519 32.1119 32.4869 32.3232 32.853L48.2606 60.4574C48.472 60.8235 48.8201 61.0906 49.2283 61.2C49.6366 61.3094 50.0717 61.2521 50.4377 61.0408L55.9586 57.8533C56.3246 57.6419 56.5918 57.2938 56.7012 56.8856C56.8106 56.4773 56.7533 56.0423 56.5419 55.6762L40.6045 28.0718C40.3932 27.7057 40.0451 27.4386 39.6368 27.3292C39.2285 27.2198 38.7935 27.2771 38.4274 27.4884ZM53.4536 28.0146L47.9327 31.202C47.5666 31.4134 47.2995 31.7615 47.1901 32.1698C47.0807 32.5781 47.138 33.0131 47.3493 33.3791L59.3024 54.0825C59.5137 54.4485 59.8618 54.7156 60.2701 54.825C60.6784 54.9344 61.1134 54.8771 61.4795 54.6658L67.0004 51.4783C67.3664 51.267 67.6335 50.9189 67.7429 50.5106C67.8523 50.1023 67.7951 49.6673 67.5837 49.3012L55.6306 28.5979C55.4193 28.2319 55.0712 27.9647 54.6629 27.8553C54.2546 27.7459 53.8196 27.8032 53.4536 28.0146Z" fill="white"/>
+<path d="M38.3282 49.6285L45.5 62.0505C45.7113 62.4165 45.7686 62.8515 45.6592 63.2598C45.5498 63.6681 45.2827 64.0162 44.9166 64.2276L39.3958 67.415C39.0297 67.6264 38.5947 67.6836 38.1864 67.5742C37.7781 67.4648 37.43 67.1977 37.2187 66.8317L30.0469 54.4097C29.8355 54.0437 29.7783 53.6087 29.8877 53.2004C29.9971 52.7921 30.2642 52.444 30.6302 52.2327L36.1511 49.0452C36.5171 48.8338 36.9522 48.7766 37.3604 48.886C37.7687 48.9954 38.1168 49.2625 38.3282 49.6285ZM38.4273 27.4879L32.9064 30.6753C32.5404 30.8867 32.2732 31.2348 32.1638 31.6431C32.0544 32.0514 32.1117 32.4864 32.3231 32.8524L48.2604 60.4567C48.4718 60.8228 48.8199 61.0899 49.2281 61.1993C49.6364 61.3087 50.0714 61.2514 50.4375 61.0401L55.9584 57.8526C56.3244 57.6413 56.5915 57.2932 56.7009 56.8849C56.8103 56.4766 56.7531 56.0416 56.5417 55.6755L40.6044 28.0712C40.393 27.7052 40.0449 27.4381 39.6366 27.3287C39.2283 27.2193 38.7933 27.2765 38.4273 27.4879ZM53.4533 28.014L47.9325 31.2015C47.5664 31.4128 47.2993 31.7609 47.1899 32.1692C47.0805 32.5775 47.1378 33.0125 47.3491 33.3786L59.3021 54.0818C59.5135 54.4478 59.8616 54.715 60.2699 54.8244C60.6781 54.9338 61.1132 54.8765 61.4792 54.6651L67.0001 51.4777C67.3661 51.2663 67.6332 50.9182 67.7426 50.5099C67.852 50.1017 67.7948 49.6666 67.5834 49.3006L55.6304 28.5974C55.4191 28.2313 55.071 27.9642 54.6627 27.8548C54.2544 27.7454 53.8194 27.8027 53.4533 28.014Z" fill="white"/>
 </g>
 </g>
-<rect x="0.682712" y="32.3937" width="63.4212" height="63.4212" rx="5.49758" transform="rotate(-30 0.682712 32.3937)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
+<rect x="0.682712" y="32.3932" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(-30 0.682712 32.3932)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
 </g>
 <defs>
-<filter id="filter0_ii_16977_25494" x="0" y="-2.01315" width="88" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_ii_16977_25494" x="0" y="-2.01358" width="87.9996" height="92.0259" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@@ -26,10 +26,10 @@
 <feBlend mode="normal" in2="effect1_innerShadow_16977_25494" result="effect2_innerShadow_16977_25494"/>
 </filter>
 <clipPath id="clip0_16977_25494">
-<rect y="32.2108" width="64.4207" height="64.4207" rx="5.99735" transform="rotate(-30 0 32.2108)" fill="white"/>
+<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="white"/>
 </clipPath>
 <clipPath id="clip1_16977_25494">
-<rect width="37.9832" height="37.9832" fill="white" transform="translate(18.3073 37.2636) scale(1.00702) rotate(-30)"/>
+<rect width="37.9832" height="37.9832" fill="white" transform="translate(18.3072 37.263) scale(1.00701) rotate(-30)"/>
 </clipPath>
 </defs>
 </svg>

ui-ngx/src/assets/iot-hub/hero-widget-icon-4.svg

@@ -1,15 +1,15 @@
 <svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_ii_16977_25497)">
 <g clip-path="url(#clip0_16977_25497)">
-<rect x="32.2108" width="64.4207" height="64.4207" rx="5.99735" transform="rotate(30 32.2108 0)" fill="#2C9755"/>
+<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="#2C9755"/>
 <g clip-path="url(#clip1_16977_25497)">
-<path d="M40.3148 24.9297C40.7549 24.1674 40.4937 23.1927 39.7315 22.7526C38.9692 22.3125 37.9945 22.5737 37.5544 23.336L27.9921 39.8983L24.8044 45.4195C23.4841 47.7064 24.2677 50.6305 26.5545 51.9508L48.638 64.7007C49.4003 65.1408 50.375 64.8797 50.8151 64.1174C51.2552 63.3551 50.9941 62.3804 50.2318 61.9403L28.1482 49.1903C27.386 48.7502 27.1248 47.7755 27.5649 47.0133L30.4223 42.0641L36.9536 40.314L38.2911 45.3058C38.519 46.156 39.3929 46.6606 40.2431 46.4328L56.1204 42.1785L57.4579 47.1703C57.6857 48.0205 58.5597 48.5251 59.4098 48.2973C60.26 48.0694 60.7646 47.1955 60.5368 46.3453L58.7867 39.8141C58.559 38.9639 57.685 38.4593 56.8348 38.6871L40.9575 42.9415L39.62 37.9496C39.3921 37.0994 38.5182 36.5948 37.668 36.8227L32.6762 38.1602L40.3148 24.9297Z" fill="white"/>
+<path d="M40.3142 24.9296C40.7543 24.1673 40.4931 23.1926 39.7309 22.7525C38.9686 22.3124 37.9939 22.5736 37.5538 23.3359L27.9915 39.8982L24.8039 45.4193C23.4836 47.7062 24.2671 50.6303 26.5539 51.9506L48.6374 64.7005C49.3997 65.1406 50.3744 64.8794 50.8145 64.1171C51.2546 63.3548 50.9934 62.3801 50.2311 61.94L28.1477 49.1901C27.3854 48.75 27.1242 47.7753 27.5643 47.0131L30.4217 42.0639L36.953 40.3138L38.2905 45.3057C38.5184 46.1558 39.3923 46.6604 40.2425 46.4326L56.1197 42.1783L57.4573 47.1702C57.6851 48.0203 58.559 48.5249 59.4092 48.2971C60.2593 48.0692 60.7639 47.1953 60.5361 46.3452L58.7861 39.8139C58.5583 38.9637 57.6843 38.4591 56.8342 38.687L40.9569 42.9413L39.6194 37.9495C39.3915 37.0992 38.5176 36.5947 37.6674 36.8225L32.6756 38.1601L40.3142 24.9296Z" fill="white"/>
 </g>
 </g>
-<rect x="32.3937" y="0.682712" width="63.4212" height="63.4212" rx="5.49758" transform="rotate(30 32.3937 0.682712)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
+<rect x="32.3932" y="0.682712" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(30 32.3932 0.682712)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
 </g>
 <defs>
-<filter id="filter0_ii_16977_25497" x="0" y="-2.01315" width="88" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_ii_16977_25497" x="-0.000439846" y="-2.01314" width="87.9996" height="92.0259" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
@@ -26,10 +26,10 @@
 <feBlend mode="normal" in2="effect1_innerShadow_16977_25497" result="effect2_innerShadow_16977_25497"/>
 </filter>
 <clipPath id="clip0_16977_25497">
-<rect x="32.2108" width="64.4207" height="64.4207" rx="5.99735" transform="rotate(30 32.2108 0)" fill="white"/>
+<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="white"/>
 </clipPath>
 <clipPath id="clip1_16977_25497">
-<rect width="37.9832" height="37.9832" fill="white" transform="translate(37.1849 17.6012) scale(1.00702) rotate(30)"/>
+<rect width="37.9832" height="37.9832" fill="white" transform="translate(37.1843 17.6011) scale(1.00701) rotate(30)"/>
 </clipPath>
 </defs>
 </svg>

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3709,7 +3709,7 @@
         "popular-calculated-fields": "Popular Calculated Fields",
         "popular-rule-chains": "Popular Rule Chains",
         "become-creator-text": "Submit your templates to the ThingsBoard IoT Hub to get featured and showcase your solutions to our global community.",
-        "submit-template": "Submit Template",
+        "contribute": "Contribute",
         "browse": "Browse IoT Hub",
         "creator-profile": "Creator Profile",
         "title-widgets": "Widgets",