karthickthangasamy · Oct 14, 2026 · Oct 12, 2026 · Oct 12, 2026
diff --git a/assets/footer/bg-texture.png b/assets/footer/bg-texture.png
diff --git a/build/build.js b/build/build.js
@@ -1,6 +1,7 @@
 const gulp = require("gulp");
 var shelljs = require('shelljs');
 const runSequence = require('gulp4-run-sequence');
+const fs = require("fs");
 
 gulp.task('build',(done)=>{
     runSequence('update-extensions-export', 'clean', 'new-tab', done);

diff --git a/build/templates/common/index.css b/build/templates/common/index.css
@@ -1,3 +1,5 @@
+@import '../../../src/common/variables.css';
+
 /* loader */
 @import '../../../src/common/ej2-buttons.min.css';
 
@@ -146,12 +148,6 @@ body {
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-@font-face {
-  font-family: 'ej-preview-header-icons';
-  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
 
 #r-w-form {
   display: inherit;
@@ -318,140 +314,174 @@ body {
   }
 }
 
-/* header */
-
-.ej-preview-header {
-  background-color: #fff;
-  box-shadow: 0 8px 11px -6px rgba(0, 0, 0, 0.12);
-  height: 48px;
-  width: 100%;
-  display: flex;
-  position: fixed;
-  z-index: 1;
-  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
-  justify-content: space-between;
+.ej-sb-header {
+    width: 100%;
+    position: fixed;
+    z-index: 10000;
+    height: 64px;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 24px;
+    background: var(--neutral-0);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.ej-sb-header .ej-sb-left-side {
+    height: inherit;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.ej-sb-header .ej-sb-left-side .ej-sb-logo-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+}
+
+.ej-sb-header .ej-sb-left-side .ej-sb-logo {
+    height: 28px;
+    width: auto;
+    display: block;
+}
+
+.ej-framework-selector {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-left: 16px;
+    padding-left: 16px;
+    border-left: 1px solid var(--border-subtle);
 }
-
-.ej-preview-header .ej-preview-left-side {
-  height: inherit;
-  display: flex;
-  align-items: center;
+
+.ej-fw-label {
+    font-family: 'Inter', sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--neutral-500);
+    margin-bottom: 0px;
 }
-
-.ej-preview-header .ej-preview-left-side a {
-  color: #212529;
-  cursor: pointer;
-  text-decoration: none;
+
+.ej-fw-pills {
+    display: flex;
+    align-items: center;
+    background: var(--neutral-0);
+    border-radius: 9999px;
+    padding: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.9);
+    box-shadow: rgba(10, 62, 125, 0.22) 0px 8px 20px -10px, rgba(16, 100, 199, 0.18) 0px 3px 8px -3px, rgba(255, 255, 255, 0.9) 0px 1px 0px inset;
 }
 
-.ej-preview-header .ej-preview-left-side .ej-preview-platform-name {
-  margin: 0 21px 0 25px;
-  font-size: 15px;
-  opacity: 0.87;
-  font-weight: 600;
+.ej-fw-pill {
+    font-family: 'Inter', sans-serif;
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--neutral-600);
+    text-decoration: none;
+    padding: 8px 18px;
+    border-radius: 9999px;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
+    background: transparent;
 }
 
-.ej-preview-header .ej-preview-right-side {
-  height: inherit;
-  display: flex;
-  align-items: center;
+.ej-fw-pill:hover {
+    color: var(--blue-700);
+    background: linear-gradient(rgb(246, 248, 251) 0%, rgb(220, 234, 251) 100%) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(16, 100, 199, 0.35) 0px 6px 14px -6px, rgba(10, 62, 125, 0.12) 0px 3px 6px -2px !important;
 }
 
-.ej-preview-header .ej-preview-right-side .ej-preview-header-icons {
-  font-family: 'ej-preview-header-icons';
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.ej-fw-pill.active {
+    background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 55%, var(--blue-700) 100%);
+    color: var(--neutral-0);
+    font-weight: 600;
+    box-shadow: 0 4px 12px rgba(16, 100, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
 
-.ej-preview-header .ej-preview-right-side .ej-preview-divider {
-  border-left: 1px solid rgb(196, 196, 196);
-  height: 32px;
+.ej-fw-pill.active:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(16, 100, 199, 0.35) 0px 6px 14px -6px, rgba(10, 62, 125, 0.12) 0px 3px 6px -2px !important;
+    background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 55%, var(--blue-700) 100%) !important;
 }
-
-.ej-preview-header .ej-preview-right-side a {
-  font-size: 20px;
-  cursor: pointer;
-  text-decoration: none;
-  margin: 0 10px 0px 10px;
-  color: #333;
-  opacity: 0.87;
+.ej-sb-header .ej-sb-right-side {
+    height: inherit;
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
-/* header try-it-free and schedule-free-demo*/
-.ej-preview-header .ej-preview-right-side a.ej-preview-button {
-  padding: 0.4rem 0.5rem 1rem 0.5rem;
-  width: 125px;
-  border-radius: 5px;
-  height: 35px;
-  font-size: 14px;
-  font-weight: 500;
-  opacity: 1;
-  text-decoration: none;
-  cursor: pointer;
-  text-align: center;  
+.ej-sb-header .ej-sb-right-side a.ej-sb-button {
+    font-family: 'Inter', sans-serif;
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 12px;
+    padding: 0 20px;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.ej-preview-header .ej-preview-right-side a.ej-preview-button.bold-schedule-demo{
-  border-color: #ff4800;
-  border-style: solid;
-  border-width: 1px;
-  background-color: #ffffff;
-  color: #ff4800 !important;
+.ej-sb-header .ej-sb-right-side a.ej-sb-button.request-demo {
+    background: var(--neutral-0);
+    border: 1px solid var(--neutral-200);
+    color: var(--blue-600);
 }
 
-.ej-preview-header .ej-preview-right-side a.ej-preview-button.bold-schedule-demo:hover{
-  background: #ff4801 ;
-  color: white !important;
-}
-
-.ej-preview-header .ej-preview-right-side a.ej-preview-button.try-it-free{
-  background: #ff4801;
-  color: white;
-}
-
-.ej-preview-header .ej-preview-right-side a.ej-preview-button.product-detail{
-  border-color: #ff4800;
-  border-style: solid;
-  border-width: 1px;
-  background: white;
-  color: #ff4801;
-}
+.ej-sb-header .ej-sb-right-side a.ej-sb-button.request-demo:hover {
+    border-color: var(--blue-300);
+    background: var(--blue-50);
+    color: var(--blue-700);
+    transform: translateY(-1px);
+}
 
-.ej-preview-header .ej-preview-right-side a.ej-preview-button.product-detail:hover{
-  background: #ff4801;
-  color: white;
+.ej-sb-header .ej-sb-right-side a.ej-sb-button.try-it-free {
+    background: var(--blue-600);
+    color: var(--neutral-0);
+    box-shadow: 0 4px 12px rgba(16, 100, 199, 0.25);
+}
+
+.ej-sb-header .ej-sb-right-side a.ej-sb-button.try-it-free:hover {
+    background: var(--blue-700);
+    transform: translateY(-1px);
 }
 
-.ej-preview-header .ej-preview-right-side .preview-icon-product:before {
-  content: '\e707';
+@media only screen and (max-width: 1024px) {
+    .ej-framework-selector {
+        display: none;
+    }
 }
 
-.ej-preview-header .ej-preview-right-side .preview-icon-download::before {
-  content: '\e701';
+@media only screen and (max-width: 768px) {
+    .ej-sb-header .ej-sb-right-side {
+        display: none;
+    }
 }
-
-.ej-preview-header .ej-preview-right-side .preview-icon-documentation::before {
-  content: '\e704';
-}
-
-@media only screen and (max-width: 850px) {
-  .ej-preview-header .ej-preview-right-side {
-    display: none;
-  }
-}
-
 .ej-preview-content {
   position: absolute;
   left: 0;
-  top: 48px;
+  top: 64px;
   bottom: 0;
   right: 0;
 }
 
+body.e-reportdesigner-document-full-screen .ej-sb-header {
+  display: none;
+}
+
+body.e-reportdesigner-document-full-screen .ej-preview-content {
+  top: 0;
+}
+
 #container_reportName {
   visibility: hidden;
 }
diff --git a/build/templates/common/index.html b/build/templates/common/index.html
@@ -69,20 +69,25 @@
         </div>
     </div>
     <div class="ej-body e-hidden">
-        <div class="ej-preview-header">
-            <div class="ej-preview-left-side">
-                <a id="home_page" href="/" target="_blank" rel="noreferrer">
-                    <h1 class="ej-preview-platform-name">Bold Reports<sup>®</sup> for JavaScript</h1>
+        <div class="ej-sb-header">
+            <div class="ej-sb-left-side">
+                <a href="https://www.boldreports.com/" class="ej-sb-logo-link" title="Bold Reports Home">
+                    <img class="ej-sb-logo" src="https://cdn.boldreports.com/website/images/logo/bold-reports-logo.svg" alt="Bold Reports Logo" />
                 </a>
+                <div class="ej-framework-selector">
+                    <h1 class="ej-fw-label">Frameworks</h1>
+                    <div class="ej-fw-pills">
+                        <a data-fw-slug="" class="ej-fw-pill">ASP.NET Core</a>
+                        <a data-fw-slug="blazor" class="ej-fw-pill">Blazor</a>
+                        <a data-fw-slug="angular" class="ej-fw-pill">Angular</a>
+                        <a data-fw-slug="react" class="ej-fw-pill">React</a>
+                        <span class="ej-fw-pill active" aria-current="page">JavaScript</span>
+                    </div>
+                </div>
             </div>
-            <div class="ej-preview-right-side">
-                <!-- We hided this element as per management instruction -->
-                <!-- <a class="ej-preview-button bold-schedule-demo" href="https://www.boldreports.com/schedule-free-demo"
-                    title="Report Server" target="_blank" rel="noreferrer">Schedule Free Demo</a> -->
-                <a class="ej-preview-button product-detail" href="https://www.boldreports.com/embedded-reporting/javascript-report-viewer"
-                    title="Report Viewer" target="_blank" rel="noreferrer">Product Detail</a>
-                <a class="ej-preview-button try-it-free" href="https://www.boldreports.com/register/reports?evaluation=v2"
-                    title="Report Server" target="_blank" rel="noreferrer">Try it Free</a>
+            <div class="ej-sb-right-side">
+                <a class="ej-sb-button nav-link request-demo" href="https://www.boldreports.com/embedded-reporting/javascript-report-viewer" target="_blank">Product Details</a>
+                <a class="ej-sb-button nav-link try-it-free" href="https://www.boldreports.com/register/reports?evaluation=v2" target="_blank">Try it Free</a>
             </div>
         </div>
         <div class="ej-preview-content">

diff --git a/build/templates/common/index.js b/build/templates/common/index.js
@@ -91,7 +91,23 @@ window['CodeMirror'] = CodeMirror;
 import './../../../src/common/tracking';
 
 $(function() {
-    document.getElementById('home_page').setAttribute('href', '/javascript/#/');
+    let homePage = document.getElementById('home_page');
+    if (homePage) {
+        homePage.setAttribute('href', '/javascript/#/');
+    }
+});
+
+$(function () {
+    const isLocal = !window.location.hostname.includes('boldreports.com');
+    document.querySelectorAll('a.ej-fw-pill[data-fw-slug]').forEach((pill) => {
+        const slug = pill.getAttribute('data-fw-slug') || '';
+        pill.setAttribute(
+            'href',
+            isLocal
+                ? (slug === '' ? '/' : '/' + slug + '.html')
+                : (slug === '' ? '/home/' : '/home/' + slug + '.html')
+        );
+    });
 });
 
 window.addEventListener('beforeunload', () => {