From 6d622dbf6099a61ce05ce00628467f5e0bb8f57a Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 20 Nov 2025 09:13:15 +0100
Subject: [PATCH 1/2] header and application layout examples updated

---
 .../code/ApplicationLayoutCodePage.tsx        | 43 ++-----------------
 .../components/header/code/HeaderCodePage.tsx | 40 +++++++----------
 2 files changed, 19 insertions(+), 64 deletions(-)

diff --git a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
index c06008ad6..4f2e56d06 100644
--- a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
+++ b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
@@ -96,10 +96,10 @@ const sections = [
     title: "Examples",
     subSections: [
       {
-        title: "Basic usage",
+        title: "Application layout with components",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/basic-usage-pi619r?fontsize=14&hidenavigation=1&theme=dark"
+            src="https://codesandbox.io/embed/p4xxm3?view=editor+%2B+preview&module=%2Fsrc%2FApp.js"
             style={{
               width: "100%",
               minHeight: "500px",
@@ -107,44 +107,7 @@ const sections = [
               borderRadius: "4px",
               overflow: "hidden",
             }}
-            title="Basic usage"
-            allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-          />
-        ),
-      },
-      {
-        title: "With sidenav",
-        content: (
-          <iframe
-            src="https://codesandbox.io/embed/with-sidenav-xce9s2?fontsize=14&hidenavigation=1&theme=dark"
-            style={{
-              width: "100%",
-              minHeight: "500px",
-              border: "0",
-              borderRadius: "4px",
-              overflow: "hidden",
-            }}
-            title="With sidenav"
-            allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-          />
-        ),
-      },
-      {
-        title: "Custom header and footer",
-        content: (
-          <iframe
-            src="https://codesandbox.io/embed/custom-footer-and-header-lt3gkv?fontsize=14&hidenavigation=1&theme=dark"
-            style={{
-              width: "100%",
-              minHeight: "500px",
-              border: "0",
-              borderRadius: "4px",
-              overflow: "hidden",
-            }}
-            title="Custom footer and header"
-            allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+            title="Application layout with components"
             sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
           />
         ),
diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx
index 5b1682350..e0a395ddd 100644
--- a/apps/website/screens/components/header/code/HeaderCodePage.tsx
+++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx
@@ -110,30 +110,22 @@ const sections = [
       </DxcTable>
     ),
   },
-  // UPDATE to new sandbox link when available
-  // {
-  //   title: "Examples",
-  //   subSections: [
-  //     {
-  //       title: "Header in application layout",
-  //       content: (
-  //         <iframe
-  //           src="https://codesandbox.io/embed/rough-https-9oduyh?fontsize=14&hidenavigation=1&theme=dark"
-  //           style={{
-  //             width: "100%",
-  //             minHeight: "500px",
-  //             border: "0",
-  //             borderRadius: "4px",
-  //             overflow: "hidden",
-  //           }}
-  //           title="Footer and header"
-  //           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  //           allowFullScreen
-  //         />
-  //       ),
-  //     },
-  //   ],
-  // },
+  {
+    title: "Examples",
+    subSections: [
+      {
+        title: "Header in application layout",
+        content: (
+          <iframe
+            src="https://codesandbox.io/embed/6m6hdj?view=editor+%2B+preview&module=%2Fsrc%2FApp.js&hidenavigation=1"
+            style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
+            title="Header in application layout"
+            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+          ></iframe>
+        ),
+      },
+    ],
+  },
 ];
 
 const HeaderCodePage = () => {

From 264921b5d53288149c6d7f65da424e3a4a8724e1 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 20 Nov 2025 09:23:49 +0100
Subject: [PATCH 2/2] Changed closing tag

---
 apps/website/screens/components/header/code/HeaderCodePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx
index e0a395ddd..ef737346e 100644
--- a/apps/website/screens/components/header/code/HeaderCodePage.tsx
+++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx
@@ -121,7 +121,7 @@ const sections = [
             style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
             title="Header in application layout"
             sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-          ></iframe>
+          />
         ),
       },
     ],