@eric-emg/symphiq-components 1.2.140 → 1.2.142

package/fesm2022/symphiq-components.mjs

@@ -50912,20 +50912,20 @@ class SymphiqFunnelAnalysisPreviewComponent {
 
 const _forTrack0$i = ($index, $item) => $item.id;
 function SymphiqWelcomeDashboardComponent_For_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31)(1, "div", 36)(2, "span", 37);
-    i0.ɵɵtext(3);
+    i0.ɵɵelementStart(0, "div", 31)(1, "div", 36)(2, "div", 37)(3, "span", 38);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 18)(5, "div", 38);
+    i0.ɵɵelementStart(5, "div", 23);
     i0.ɵɵtext(6);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "div", 39);
     i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const step_r1 = ctx.$implicit;
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(step_r1.number);
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(step_r1.title);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(step_r1.description);
@@ -51138,7 +51138,7 @@ class SymphiqWelcomeDashboardComponent {
     static { this.ɵfac = function SymphiqWelcomeDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqWelcomeDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqWelcomeDashboardComponent, selectors: [["symphiq-welcome-dashboard"]], hostBindings: function SymphiqWelcomeDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqWelcomeDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 74, vars: 57, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], [3, "viewMode", "currentStepId"], [1, "mt-6", "p-5", "rounded-xl", "border-l-4", "flex", "items-start", "gap-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "font-bold", "text-lg", "mb-3", 3, "ngClass"], [1, "space-y-3", "text-sm", 3, "ngClass"], [1, "flex", "items-start", "gap-3"], [1, "mt-6", "p-5", "rounded-xl", "border", "flex", "items-start", "gap-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "font-bold", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "bg-blue-100", "dark:bg-blue-900/30", "flex", "items-center", "justify-center"], [1, "text-xs", "font-bold", "text-blue-600", "dark:text-blue-400"], [1, "font-semibold", "mb-0.5"], [1, "text-xs", "opacity-90"]], template: function SymphiqWelcomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 74, vars: 57, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], [3, "viewMode", "currentStepId"], [1, "mt-6", "p-5", "rounded-xl", "border-l-4", "flex", "items-start", "gap-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "font-bold", "text-lg", "mb-3", 3, "ngClass"], [1, "space-y-3", "text-sm", 3, "ngClass"], [1, "flex", "flex-col"], [1, "mt-6", "p-5", "rounded-xl", "border", "flex", "items-start", "gap-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "font-bold", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "bg-blue-100", "dark:bg-blue-900/30", "flex", "items-center", "justify-center"], [1, "text-xs", "font-bold", "text-blue-600", "dark:text-blue-400"], [1, "text-xs", "opacity-90", "ml-9"]], template: function SymphiqWelcomeDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -51282,163 +51282,163 @@ class SymphiqWelcomeDashboardComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqWelcomeDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-welcome-dashboard', standalone: true, imports: [CommonModule, ConfidenceLevelCardComponent, JourneyProgressIndicatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="getContainerClasses()">
-      <!-- Scroll Progress Bar -->
-      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-          [style.width.%]="scrollProgress()"
-          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-          class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
-
-      <div class="relative z-[51]">
-        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
-          <!-- Expanded Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="headerScrollService.isScrolled()"
-            [class.opacity-0]="headerScrollService.isScrolled()"
-            [class.max-h-96]="!headerScrollService.isScrolled()"
-            [class.opacity-100]="!headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-              [class.pointer-events-none]="headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h1 [ngClass]="getMainTitleClasses()">
-                    Welcome to Symphiq
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Your Revenue Orchestration Journey Starts Here
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="!headerScrollService.isScrolled()"
-            [class.opacity-0]="!headerScrollService.isScrolled()"
-            [class.max-h-20]="headerScrollService.isScrolled()"
-            [class.opacity-100]="headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-              [class.pointer-events-none]="!headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div class="flex-1 min-w-0 mr-4">
-                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
-                    Welcome to Symphiq
-                  </h1>
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <!-- Journey Progress Indicator -->
-        <symphiq-journey-progress-indicator
-          [viewMode]="viewMode()"
-          [currentStepId]="JourneyStepIdEnum.WELCOME"
-          [showNextStepAction]="true"
-          [forDemo]="forDemo()"
-          [maxAccessibleStepId]="maxAccessibleStepId()"
-          (stepClick)="stepClick.emit($event)"
-          (nextStepClick)="nextStepClick.emit()"
-        />
-
-        <main class="relative">
-          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-            <!-- Welcome Section -->
-            <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
-              <div [ngClass]="contentClasses()" class="px-8 py-8">
-                <div class="flex items-start gap-6">
-                  <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
-                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                    </svg>
-                  </div>
-
-                  <div class="flex-1">
-                    <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-3">
-                      Welcome to Symphiq
-                    </h2>
-
-                    <!-- Description and Confidence Card in Responsive Layout -->
-                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
-                      <!-- Description -->
-                      <div class="lg:col-span-2 space-y-3">
-                        <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                          Symphiq is your Revenue Orchestration Workspace for eCommerce. We help you turn goals into coordinated actions by connecting every revenue touchpoint—so your team plans with confidence, executes together, and measures what truly drives growth.
-                        </p>
-                        <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                          <strong class="font-semibold">How it works:</strong> Symphiq guides you through a continuous journey loop. You'll <strong>Build Revenue Targets</strong> with bottom-up metric goals, <strong>Strategize Proactively</strong> with AI-generated business goals and objectives, <strong>Execute Together</strong> with your team on recommendations and tasks, <strong>Measure What Matters</strong> with pacing and impact tracking, and <strong>Retain Knowledge</strong> through detailed profiles that preserve institutional wisdom. This loop repeats as your business grows, learning from each cycle to refine strategies.
-                        </p>
-                      </div>
-
-                      <!-- Confidence Card -->
-                      <div class="lg:col-span-1">
-                        <symphiq-confidence-level-card
-                          [viewMode]="viewMode()"
-                          [currentStepId]="JourneyStepIdEnum.WELCOME"
-                        />
-                      </div>
-                    </div>
-
-                    <!-- What You'll See Next -->
-                    <div [ngClass]="highlightBoxClasses()" class="mt-6 p-5 rounded-xl border-l-4 flex items-start gap-4">
-                      <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="highlightIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                      </svg>
-                      <div class="flex-1">
-                        <h3 [ngClass]="highlightTitleClasses()" class="font-bold text-lg mb-3">
-                          Your Onboarding Journey
-                        </h3>
-                        <div [ngClass]="highlightListClasses()" class="space-y-3 text-sm">
-                          @for (step of journeySteps; track step.id) {
-                            <div class="flex items-start gap-3">
-                              <div class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
-                                <span class="text-xs font-bold text-blue-600 dark:text-blue-400">{{ step.number }}</span>
-                              </div>
-                              <div class="flex-1">
-                                <div class="font-semibold mb-0.5">{{ step.title }}</div>
-                                <div class="text-xs opacity-90">{{ step.description }}</div>
-                              </div>
-                            </div>
-                          }
-                        </div>
-                      </div>
-                    </div>
-
-                    <!-- Call to Action -->
-                    <div [ngClass]="nextStepsBoxClasses()" class="mt-6 p-5 rounded-xl border flex items-start gap-4">
-                      <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="nextStepsIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                      </svg>
-                      <div class="flex-1">
-                        <h3 [ngClass]="nextStepsTitleClasses()" class="font-bold mb-1">
-                          Ready to Begin Your Journey?
-                        </h3>
-                        <p [ngClass]="nextStepsTextClasses()" class="text-sm leading-relaxed">
-                          The next step will guide you through creating your account and entering your shop details—including your business name, website URL, and ecommerce platform. Each step builds on the previous one to create comprehensive business context, enabling Symphiq to deliver increasingly accurate and personalized recommendations as you progress.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
+        args: [{ selector: 'symphiq-welcome-dashboard', standalone: true, imports: [CommonModule, ConfidenceLevelCardComponent, JourneyProgressIndicatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="getContainerClasses()">
+      <!-- Scroll Progress Bar -->
+      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+          [style.width.%]="scrollProgress()"
+          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+          class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+
+      <div class="relative z-[51]">
+        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
+          <!-- Expanded Header -->
+          <div
+            class="transition-all duration-300 ease-in-out overflow-hidden"
+            [class.max-h-0]="headerScrollService.isScrolled()"
+            [class.opacity-0]="headerScrollService.isScrolled()"
+            [class.max-h-96]="!headerScrollService.isScrolled()"
+            [class.opacity-100]="!headerScrollService.isScrolled()">
+            <div
+              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+              [class.pointer-events-none]="headerScrollService.isScrolled()"
+              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
+              <div class="flex items-center justify-between">
+                <div>
+                  <h1 [ngClass]="getMainTitleClasses()">
+                    Welcome to Symphiq
+                  </h1>
+                  <p [ngClass]="getSubtitleClasses()">
+                    Your Revenue Orchestration Journey Starts Here
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Condensed Header -->
+          <div
+            class="transition-all duration-300 ease-in-out overflow-hidden"
+            [class.max-h-0]="!headerScrollService.isScrolled()"
+            [class.opacity-0]="!headerScrollService.isScrolled()"
+            [class.max-h-20]="headerScrollService.isScrolled()"
+            [class.opacity-100]="headerScrollService.isScrolled()">
+            <div
+              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
+              [class.pointer-events-none]="!headerScrollService.isScrolled()"
+              [class.pointer-events-auto]="headerScrollService.isScrolled()">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0 mr-4">
+                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
+                    Welcome to Symphiq
+                  </h1>
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <!-- Journey Progress Indicator -->
+        <symphiq-journey-progress-indicator
+          [viewMode]="viewMode()"
+          [currentStepId]="JourneyStepIdEnum.WELCOME"
+          [showNextStepAction]="true"
+          [forDemo]="forDemo()"
+          [maxAccessibleStepId]="maxAccessibleStepId()"
+          (stepClick)="stepClick.emit($event)"
+          (nextStepClick)="nextStepClick.emit()"
+        />
+
+        <main class="relative">
+          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            <!-- Welcome Section -->
+            <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
+              <div [ngClass]="contentClasses()" class="px-8 py-8">
+                <div class="flex items-start gap-6">
+                  <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
+                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                    </svg>
+                  </div>
+
+                  <div class="flex-1">
+                    <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-3">
+                      Welcome to Symphiq
+                    </h2>
+
+                    <!-- Description and Confidence Card in Responsive Layout -->
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+                      <!-- Description -->
+                      <div class="lg:col-span-2 space-y-3">
+                        <p [ngClass]="textClasses()" class="text-base leading-relaxed">
+                          Symphiq is your Revenue Orchestration Workspace for eCommerce. We help you turn goals into coordinated actions by connecting every revenue touchpoint—so your team plans with confidence, executes together, and measures what truly drives growth.
+                        </p>
+                        <p [ngClass]="textClasses()" class="text-base leading-relaxed">
+                          <strong class="font-semibold">How it works:</strong> Symphiq guides you through a continuous journey loop. You'll <strong>Build Revenue Targets</strong> with bottom-up metric goals, <strong>Strategize Proactively</strong> with AI-generated business goals and objectives, <strong>Execute Together</strong> with your team on recommendations and tasks, <strong>Measure What Matters</strong> with pacing and impact tracking, and <strong>Retain Knowledge</strong> through detailed profiles that preserve institutional wisdom. This loop repeats as your business grows, learning from each cycle to refine strategies.
+                        </p>
+                      </div>
+
+                      <!-- Confidence Card -->
+                      <div class="lg:col-span-1">
+                        <symphiq-confidence-level-card
+                          [viewMode]="viewMode()"
+                          [currentStepId]="JourneyStepIdEnum.WELCOME"
+                        />
+                      </div>
+                    </div>
+
+                    <!-- What You'll See Next -->
+                    <div [ngClass]="highlightBoxClasses()" class="mt-6 p-5 rounded-xl border-l-4 flex items-start gap-4">
+                      <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="highlightIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                      </svg>
+                      <div class="flex-1">
+                        <h3 [ngClass]="highlightTitleClasses()" class="font-bold text-lg mb-3">
+                          Your Onboarding Journey
+                        </h3>
+                        <div [ngClass]="highlightListClasses()" class="space-y-3 text-sm">
+                          @for (step of journeySteps; track step.id) {
+                            <div class="flex flex-col">
+                              <div class="flex items-center gap-3">
+                                <div class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+                                  <span class="text-xs font-bold text-blue-600 dark:text-blue-400">{{ step.number }}</span>
+                                </div>
+                                <div class="font-semibold">{{ step.title }}</div>
+                              </div>
+                              <div class="text-xs opacity-90 ml-9">{{ step.description }}</div>
+                            </div>
+                          }
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Call to Action -->
+                    <div [ngClass]="nextStepsBoxClasses()" class="mt-6 p-5 rounded-xl border flex items-start gap-4">
+                      <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="nextStepsIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                      </svg>
+                      <div class="flex-1">
+                        <h3 [ngClass]="nextStepsTitleClasses()" class="font-bold mb-1">
+                          Ready to Begin Your Journey?
+                        </h3>
+                        <p [ngClass]="nextStepsTextClasses()" class="text-sm leading-relaxed">
+                          The next step will guide you through creating your account and entering your shop details—including your business name, website URL, and ecommerce platform. Each step builds on the previous one to create comprehensive business context, enabling Symphiq to deliver increasingly accurate and personalized recommendations as you progress.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
   `, styles: [":host{display:block}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
     }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
             type: HostListener,