From fb6da4c6dd8f380d61327c784a92db18e1daaf4c Mon Sep 17 00:00:00 2001
From: indumathi-murali <57896631+indumathi-murali@users.noreply.github.com>
Date: Fri, 1 Aug 2025 09:56:25 +0530
Subject: [PATCH 1/2] added code for the banner section.

---
 src/components/Grid/App.css | 482 ++++++++++++++++++++++++++++++++++--
 src/components/Grid/App.tsx | 261 +++++++++++++++++--
 2 files changed, 709 insertions(+), 34 deletions(-)

diff --git a/src/components/Grid/App.css b/src/components/Grid/App.css
index 5fddbe6..bc580bb 100644
--- a/src/components/Grid/App.css
+++ b/src/components/Grid/App.css
@@ -47,9 +47,9 @@ hr.separator-line {
 }
 
 .parent-Grid-Container {
-  height: calc(96vh - 28px);
+  height: calc(96vh - 50px);
   border: 1px solid #c4c7c5;
-  margin-top: 35px;
+  margin-top: 1px;
   margin-left: 5px;
   margin-right: 5px;
 }
@@ -576,19 +576,6 @@ th[aria-colindex="15"] .e-grptogglebtn {
   height: 100% !important;
 }
 
-#download-now-button {
-  position: absolute;
-  border: 2px solid #0073dc;
-  background-color: #0073dc;
-  color: #fff;
-  right: 10px;
-  font-weight: 700;
-  font-size: 12px;
-  letter-spacing: .5px;
-  vertical-align: top;
-  opacity: 1 !important;
-}
-
 body.material3-dark,
 body.fluent-dark {
   background-color: black;
@@ -965,4 +952,469 @@ body.fluent {
 .e-ddt.e-popup .e-selectall-parent,
 .e-treeview .e-ul {
   padding: 0px 9px 0px 0px !important;
+}
+
+
+/* When the browser is in responsive mode, all banner text is grouped into a popup menu for better mobile usability */
+.popup-menu {
+  top: 60px;
+  right: 5px;
+  background-color: #111;
+  padding: 15px;
+  border-radius: 5px;
+  z-index: 1000;
+}
+
+/* When the browser switches to responsive mode, all banner text is moved into a popup menu, with hyperlink tags styled for optimal appearance and interaction on smaller screens */
+.popup-menu a {
+  display: block;
+  color: white;
+  text-decoration: none;
+  margin: 5px 0;
+}
+
+.githubdemo {
+  margin-top: 2px !important;
+}
+
+.mobile-only .githubdemo a {
+  margin-left: -5px !important;
+}
+
+/* Customization applied to the app bar for layout and styling */
+.appbar {
+  height: 60px;
+}
+
+/* Styling and customization for the div element containing the Syncfusion logo */
+.syncfusion-logo {
+  float: left;
+  width: 170px !important;
+  padding: 11px 0;
+}
+
+/* Image is rendered as a hyperlink with custom styling applied */
+.sync-logo-img {
+  background-repeat: no-repeat;
+  background-image: url(https://cdn.syncfusion.com/content/images/Logo/Logo_150dpi.png);
+  background-size: 160px 36px;
+  position: absolute;
+  width: 160px !important;
+  height: 36px;
+}
+
+/* Customization of the separator height for visual spacing */
+.e-appbar-separator {
+  height: 33px !important;
+}
+
+/* Customization of the title name for the React Feature Rich Data Grid */
+.title {
+  font-size: 20px;
+  font-weight: 500;
+  white-space: nowrap;
+  padding: 10px 15px !important;
+}
+
+/* Font family and color customization for the title, menu text, and "Try Free" label in the React Feature-Rich Data Grid component */
+.menu-title,
+.title,
+.tryfree,
+#github,
+#download-now-button {
+  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
+  color: #fff;
+  font-variant-ligatures: common-ligatures;
+}
+
+/* Font size and weight customization for the "Try Free" label and the "Book Free Demo" button text */
+.tryfree,
+.bookdemo {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+/* Opacity and letter-spacing customization for the "Try Free" label */
+.tryfree {
+  letter-spacing: .5px;
+  opacity: 1 !important;
+}
+
+/* Styling and customization applied to the "Learning" text used as a menu title */
+.menu-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* Customization of the "GitHub" text label */
+#github {
+  font-size: 14px;
+  font-weight: 600;
+  margin-left: auto;
+  padding: 10px 15px;
+}
+
+/* Responsive customization of the "GitHub" text label for different browser sizes */
+.mobile-only #github {
+  padding: 0px;
+}
+
+.mobile-only .bookdemo {
+  border-radius: 5px;
+  height: auto;
+}
+
+.bookdemo:hover {
+  color: black !important;
+}
+
+#book-free-demo:hover {
+  background-color: #fff;
+  color: black !important;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+#book-free-demo,
+#download-now-button,
+.menu-title {
+  opacity: 1 !important;
+  transition-delay: 0s;
+  transition-duration: .3s;
+  transition-property: all;
+  transition: font-weight .1s ease-in-out;
+}
+
+#book-free-demo,
+#download-now-button {
+  padding: 8px 18px !important;
+  border-radius: 4px;
+}
+
+#book-free-demo {
+  text-align: center;
+  color: white !important;
+  border: 1px solid #fff !important;
+  background-color: transparent;
+  text-decoration: none;
+  letter-spacing: .5px;
+  vertical-align: top;
+}
+
+#download-now-button {
+  font-weight: 600;
+  background: #0073dc !important;
+  border-color: #4a90e2;
+  outline: medium none !important;
+}
+
+.mobile-only #download-now-button {
+  text-align: center;
+}
+
+#tryfreebutton {
+  padding: 10 15px;
+}
+
+#demo {
+  margin: 0px 10px 0px 10px;
+  padding: 2px 20px 0px 20px;
+}
+
+.mobile-only #demo {
+  padding: 10px 0px 10px 0px;
+  margin: 0px 0px 0px 0px;
+}
+
+/* Grid layout for menu items */
+@media (min-width: 1017px) {
+  .e-template-menu.e-menu-wrapper ul.e-ul {
+    width: 850px;
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, 185px);
+    gap: 10px;
+    padding: 10px;
+  }
+}
+
+#menu .e-menu-wrapper,
+#menu .e-menu-container {
+  background: #111;
+}
+
+/* Each menu item styled as a card */
+@media (min-width: 1024px) {
+  .e-template-menu.e-menu-wrapper ul.e-ul .e-menu-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    border-radius: 8px;
+    background-color: #fff;
+    padding: 10px;
+    min-height: 95px;
+  }
+  
+}
+
+@media (min-width: 1023px) {
+  .e-menu-wrapper.e-popup.e-menu-popup,
+   .e-menu-container.e-popup.e-menu-popup {
+  margin-left: -5%;
+  top: 66px !important;
+  }
+}
+
+
+@media (min-width: 800px) and (max-width: 1024px) {
+  .e-menu-wrapper.e-popup.e-menu-popup {
+    margin-left: 5px !important;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 555px) {
+  .popup-menu.mobile-only {
+    margin-right: -3px !important;
+  }
+}
+
+@media (min-width: 750px) and (max-width: 1024px) {
+  .popup-menu.mobile-only {
+    width: 98.92% !important;
+    margin-left: 0px !important;
+  }
+}
+
+.e-menu-wrapper ul .e-menu-item .e-caret {
+  top: 0px !important;
+  right: 0px !important;
+}
+
+.mobile-only .e-menu-wrapper ul .e-menu-item .e-caret {
+  top: 5px !important;
+}
+
+#menu .e-menu-wrapper .e-menu .e-menu-item .e-caret,
+#menu .e-menu-container .e-menu .e-menu-item .e-caret,
+#menumobile .e-menu-wrapper .e-menu .e-menu-item .e-caret,
+#menumobile .e-menu-container .e-menu .e-menu-item .e-caret {
+  color: white !important;
+}
+
+/* Badge */
+.e-template-menu.e-menu-wrapper ul .e-menu-item .e-badge {
+  background-color: #ffeb3b;
+  color: #000;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-left: 8px;
+}
+
+.menu-item {
+  width: 100%;
+  text-decoration: none;
+}
+
+/* Title and description */
+.menusubitems {
+  font-weight: bold;
+  color: #000;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.description {
+  display: inline-block;
+  font-weight: 400;
+  margin-left: 32px;
+  line-height: 16px;
+  white-space: normal;
+  letter-spacing: 0.24px;
+  font-size: 12px;
+  color: #475569;
+}
+
+.icon-text-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.menusubitems .icon-spacing {
+  margin-right: 8px;
+  display: inline-block;
+  vertical-align: text-top;
+}
+
+.mobile-only .e-menu-wrapper ul .e-menu-item {
+  padding-left: 0px !important;
+}
+
+hr.separator-line-mobile {
+  opacity: 0.25;
+  margin-top:0px !important;
+  margin-bottom:0px !important;
+}
+
+/* Removed the hover color effect from the "Learning" menu text items for a cleaner appearance */
+.e-menu-wrapper .e-menu .e-menu-item.e-focused,
+.e-menu-container .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper .e-menu .e-menu-item.e-selected,
+.e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
+  background-color: transparent !important;
+}
+
+/* Hover effect for the entire menu item */
+.e-template-menu.e-menu-wrapper ul.e-ul .e-menu-item:hover {
+  background-color: #e6f4ff;
+  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
+  transition: all 0.3s ease;
+}
+
+/* Zoom-in effect for the icon */
+.e-template-menu.e-menu-wrapper ul.e-ul .e-menu-item:hover .icon-spacing span {
+  transform: scale(1.3);
+  transition: transform 0.3s ease;
+}
+
+/* Ensure icon has smooth transition */
+.icon-spacing span {
+  /* margin-top: -10px; */
+  color: #0057FF;
+  display: inline-block;
+  transition: transform 0.3s ease;
+}
+
+.menu-item-title {
+  color: #334155 !important;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.e-menu-wrapper .e-ul,
+.e-menu-container .e-ul {
+  min-width: 85px !important;
+}
+
+.desktop-only {
+  display: flex;
+}
+
+.mobile-only {
+  display: none;
+  margin-left: auto;
+}
+
+.hamburger {
+  font-size: 24px;
+  cursor: pointer;
+  color: white;
+}
+
+@media (max-width: 1024px) {
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: block;
+  }
+}
+
+@media (min-width: 750px) {
+ .mobile-only.popup-menu {
+    width: 98.4%;
+  }
+}
+
+@media (max-width: 1024px) {
+
+  .mobile-only.popup-menu {
+    position: absolute;
+    width: 98.92%;
+  }
+      
+  .menusubitems {
+    margin-bottom: 0px;
+  }
+
+  .e-template-menu.e-menu-wrapper ul.e-ul .e-menu-item {
+    min-height: 60px;
+    line-height: 0px;
+    padding-top: 10px !important;
+  }
+
+ 
+
+  .hamburger {
+    width: 40px;
+    height: 40px;
+    background-color: #333;
+    border: 1px solid #333;
+    color: white;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    /* Optional: for slightly rounded corners */
+    transition: background-color 0.3s ease, transform 0.2s ease;
+  }
+
+  .hamburger:hover {
+    background-color: #555;
+    transform: scale(1.05);
+    /* Slight zoom on hover */
+  }
+
+  .e-menu-wrapper.e-popup.e-menu-popup,
+  .e-menu-container.e-popup.e-menu-popup {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .e-menu-wrapper.e-popup.e-menu-popup {
+    left: 5px !important;
+  }
+}
+
+.react-ui-kit {
+  width: 30px;
+  height: 30px;
+  background: url(https://cdn.syncfusion.com/content/images/common/menu/images/product-icons-v7.svg) 0 0 !important;
+  background-repeat: no-repeat !important;
+  background-position-x: -112px !important;
+  background-position-y: -104px !important;
+}
+
+.mobile-only .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon,
+.mobile-only .e-menu-container ul .e-menu-item.e-menu-caret-icon,
+.mobile-only .e-menu-wrapper,
+.mobile-only .e-menu-container,
+.e-appbar.e-dark {
+  background: #111;
+}
+
+#download-now-button:hover {
+  background-color: #66b2ff !important;
+  border-radius: 4px;
+  border-color: #66b2ff;
+  transition: background-color 0.3s ease;
+}
+
+.platform-image {
+  font-family: 'SyncfusionMenuIcons' !important;
+  font-size: 24px;
+}
+
+.App {
+  min-width: 550px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
\ No newline at end of file
diff --git a/src/components/Grid/App.tsx b/src/components/Grid/App.tsx
index 5aadc5b..f06eb0e 100644
--- a/src/components/Grid/App.tsx
+++ b/src/components/Grid/App.tsx
@@ -55,7 +55,7 @@ import { AsyncSettingsModel, ChangedEventArgs, FileInfo, NumericTextBox, RatingC
 import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
 import { createElement, Internationalization, isNullOrUndefined, setCulture, closest } from '@syncfusion/ej2-base';
 import { AutoComplete, DdtSelectEventArgs, DropDownListComponent, DropDownTree, FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';
-import { MenuComponent, SidebarComponent } from '@syncfusion/ej2-react-navigations';
+import { AppBarComponent, MenuComponent, SidebarComponent } from '@syncfusion/ej2-react-navigations';
 import { ButtonComponent, CheckBox, CheckBoxComponent, ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
 import { DatePicker } from '@syncfusion/ej2-react-calendars';
 import { BeforeOpenEventArgs, DialogComponent, TooltipComponent } from '@syncfusion/ej2-react-popups';
@@ -1886,7 +1886,7 @@ export const App = () => {
         setSelectedField(selectedField);
         setSelectedDataType(mappedType);
         operatorOptions = operatorMap[mappedType];
-        if (operatorDropdown) {
+        if (operatorDropdown && operatorDropdown.current) {
           operatorDropdown.current.dataSource = operatorOptions;
         }
         setSelectedOperator(null);
@@ -3125,6 +3125,122 @@ export const App = () => {
     }
   };
 
+  let menuRef!: MenuComponent;
+  let menuMobileRef!: MenuComponent;
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  let isResized: boolean = false;
+  let isDesktop: boolean = true;
+  let isMenuDesktopOpened: boolean = false;
+  let isMenuMobileOpened: boolean = false;
+  let menuAppBarFields = { text: ['category', 'value'], children: ['options'] };
+
+  useEffect(() => {
+    const handleWindowResize = () => {
+      isResized = true;
+
+      if (isResized && (isMenuDesktopOpened || isMenuMobileOpened)) {
+        isResized = false;
+        menuRef?.close();
+        menuMobileRef?.close();
+      }
+    };
+    window.addEventListener('resize', handleWindowResize);
+
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  });
+
+  const menuItems = [
+    {
+      category: 'LEARNING',
+      options: [
+        {
+          icon: 'platform-image sf-icon-demos',
+          link: 'https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/overview',
+          title: 'Demos',
+          about: {
+            value: 'Explore our exciting product demos.',
+          },
+        },
+        {
+          icon: 'platform-image sf-icon-documentation',
+          link: 'https://ej2.syncfusion.com/react/documentation/grid/getting-started',
+          title: 'Documentation',
+          about: {
+            value: 'Comprehensive guides for every product.',
+          },
+        },
+        {
+          icon: 'platform-image sf-icon-blog',
+          link: 'https://www.syncfusion.com/blogs',
+          title: 'Blog',
+          about: {
+            value: 'Discover new ideas and perspectives.',
+          },
+        },
+        {
+          icon: 'platform-image sf-icon-tutorial-videos',
+          link: 'https://www.syncfusion.com/tutorial-videos/react/grid',
+          title: 'Tutorial Videos',
+          about: {
+            value: 'Sharpen your skills with our tutorial videos.',
+          },
+        },
+        {
+          icon: 'platform-image sf-icon-video-guide',
+          link: 'https://www.syncfusion.com/self-service-demo/react/',
+          title: 'Video Guides',
+          about: {
+            value: 'Explore key features in minutes with our quick video guides.',
+          },
+          isNew: true,
+        },
+        {
+          icon: 'platform-image sf-icon-showcase-app',
+          link: 'https://www.syncfusion.com/showcase-apps/react',
+          title: 'Showcase Apps',
+          about: {
+            value: 'Real-time apps built using our UI components.',
+          },
+          isNew: true,
+        },
+        {
+          icon: 'react-ui-kit',
+          link: 'https://ej2.syncfusion.com/react/essential-ui-kit/blocks/grid',
+          title: 'React UI Kit',
+          about: {
+            value: 'Prebuilt UI blocks for modern, responsive React apps.',
+          }
+        }
+      ],
+    },
+  ];
+
+  const menuTemplate = (data: any) => {
+    return (
+      <a
+        href={data.link}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="menu-item"
+        data-title={data.title}
+      >
+        {data.category && (
+          <div className="menu-title">{data.category}</div>
+        )}
+        <div className="menusubitems">
+          <div className="icon-spacing">
+            <span className={data.icon} />
+          </div>
+          <span className="menu-item-title">{data.title}</span>
+          {data.isNew && <span className="e-badge">NEW</span>}
+        </div>
+        <div className="description">{data.about?.value}</div>
+      </a>
+    );
+  };
+
   /* eslint-disable react-hooks/exhaustive-deps */
   const initialGridRender: JSX.Element = useMemo(() => {
     return (
@@ -3231,25 +3347,132 @@ export const App = () => {
 
   return (
     <div id="overalContainer" onClick={(e: any) => { removeWalkthrough(e) }}>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "flex-start", // Align to top of first row
-          flexWrap: "wrap",
-          gap: "16px"
-        }}
-      >
-        {/* TRY IT FREE button */}
-        <div style={{ flexShrink: 0, marginTop: '-2px' }}>
-          <a
-            id="download-now-button"
-            href="https://www.syncfusion.com/downloads/react?tag=es-livesample-react-featurerich-datagrid"
-            className="btn btn-free bold free-trial-gtag-sep15"
+      <div className="App">
+        <AppBarComponent colorMode="Dark" cssClass="appbar">
+          <div className="syncfusion-logo">
+            <a className="sync-logo-img" title="Syncfusion" aria-label="Syncfusion logo" href="https://www.syncfusion.com/">
+            </a>
+          </div>
+          <div className="e-appbar-separator"></div>
+          <div>
+            <span className="title">Feature Rich React Data Grid</span>
+          </div>
+
+          {isDesktop && (
+            <>
+              <div id="github" className="desktop-only">
+                <span className="githubdemo"> <span> <i className="fab fa-github"></i> </span>
+                  <a href="https://github.com/SyncfusionExamples/React-Feature-Rich-Grid" target="_blank" rel="noopener noreferrer"
+                    style={{ textDecoration: 'none', color: 'white', fontSize: '15px' }}>GitHub</a></span>
+              </div>
+
+              <div id="menu" className="desktop-only">
+                <MenuComponent id="listmenu" ref={(list: any) => menuRef = list}
+                  items={menuItems}
+                  showItemOnClick={true}
+                  fields={menuAppBarFields}
+                  template={menuTemplate}
+                  cssClass="e-template-menu"
+                  onOpen={() => {
+                      isMenuDesktopOpened = true;
+                  }}
+                ></MenuComponent>
+              </div>
+              <div id="demo" className="desktop-only">
+                <a
+                  id="book-free-demo" target="_blank"
+                  href="https://www.syncfusion.com/request-demo"
+                >
+                  <span className="bookdemo">BOOK A FREE DEMO</span>
+                </a>
+              </div>
+              <div id="tryfreebutton" className="desktop-only">
+                <a
+                  id="download-now-button" target="_blank"
+                  href="https://www.syncfusion.com/downloads/react/?tag=es-livesample-react-featurerich-datagrid"
+                  className="menu-item btn btn--primary"
+                >
+                  <span className="tryfree">TRY IT FREE</span>
+                </a>
+              </div>
+            </>
+          )}
+
+          {/* Hamburger icon for mobile */}
+          <div className="hamburger mobile-only"
+            onClick={() => {
+              setMobileMenuOpen(!mobileMenuOpen)
+            }
+            }
           >
-            <span className="btn__text">TRY IT FREE</span>
-          </a>
+            ☰
+          </div>
+
+        </AppBarComponent >
+
+        {/* Popup menu for mobile */}
+
+        { mobileMenuOpen && (<div className="popup-menu mobile-only">
+
+          <div id="github" className="mobile-only" style={{ display: 'flex', alignItems: 'center' }}>
+            <span className="githubdemo" style={{ display: 'flex', alignItems: 'center' }}>
+              <span style={{ padding: '2px', color: 'white' }}>
+                <i className="fab fa-github"></i>
+              </span>
+              <a
+                href="https://github.com/SyncfusionExamples/React-Feature-Rich-Grid"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ textDecoration: 'none', color: 'white', fontSize: '15px', marginLeft: '5px' }}>GitHub</a></span>
+          </div> <hr className="separator-line-mobile" />
+          <div id="menumobile" className="mobile-only">
+            <MenuComponent id="listmenu" ref={(list: any) => menuMobileRef = list}
+              items={menuItems}
+              showItemOnClick={true}
+              enableScrolling={true}
+              fields={menuAppBarFields}
+              template={menuTemplate}
+              cssClass="e-template-menu"
+              onOpen={() => {
+                isMenuMobileOpened = true;
+              }}
+              beforeOpen={(e) => {
+                if (e.parentItem.category === 'LEARNING') {
+                  (closest(e.element, '.e-menu-wrapper') as HTMLElement).style.height = '250px';
+                }
+                const menuWrapper = document.getElementById("menumobile");
+                if (menuWrapper) {
+                  (menuWrapper as HTMLElement).style.setProperty('height', '300px', 'important');
+                }
+              }}
+              beforeClose={(e) => {
+                const menuWrapper = document.getElementById("menumobile");
+                if (menuWrapper) {
+                  (menuWrapper as HTMLElement).style.setProperty('height', '');
+                }
+              }}
+            ></MenuComponent>
+          </div>
+          <hr className="separator-line-mobile" />
+          <div id="demo" className="mobile-only">
+            <a
+              id="book-free-demo" target="_blank"
+              href="https://www.syncfusion.com/request-demo"
+            >
+              <span className="bookdemo">BOOK A FREE DEMO</span>
+            </a>
+          </div> <hr className="separator-line-mobile" />
+          <div className="mobile-only">
+            <a
+              id="download-now-button" target="_blank"
+              href="https://www.syncfusion.com/downloads/react"
+              className="btn btn-free bold free-trial-gtag-sep15"
+            >
+              <span className="tryfree">TRY IT FREE</span>
+            </a>
+          </div>
         </div>
+        )}
       </div>
       <div className='parent-Grid-Container'>
         {initialGridRender}

From 858524de8fa90b676ef047be2e273929841805eb Mon Sep 17 00:00:00 2001
From: indumathi-murali <57896631+indumathi-murali@users.noreply.github.com>
Date: Fri, 1 Aug 2025 10:03:00 +0530
Subject: [PATCH 2/2] added code for the banner section.

---
 index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/index.html b/index.html
index 5550fd5..8d3b933 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,9 @@
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
     <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script> 
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/material3.css" class="theme-primary" rel="stylesheet">
+    <link href="https://ej2.syncfusion.com/demos/src/grid/images/Grid/style.css" rel="stylesheet" type="text/css"/>
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/content/images/common/menu/master/icons/menufontV2.css?v1">
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/content/stylesheets/components/bootstrap/BootstrapLayoutv132.min.css">
 </head>
 
 <body>