Glass
Category: Headers
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<div style="backdrop-filter: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border-radius: 0px; box-shadow: none; opacity: 1; display: flex; position: relative; width: 1480.8px; height: 54px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 1 0 0px; flex-flow: row; justify-content: space-between; align-items: center; overflow: visible; cursor: default;"><div style="backdrop-filter: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border-radius: 0px; opacity: 1; display: flex; position: relative; width: 378.9px; height: 54px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 10px; overflow: visible; cursor: default;"><div style="backdrop-filter: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border-radius: 0px; opacity: 1; will-change: auto; cursor: crosshair; display: flex; position: relative; width: 378.9px; height: 54px; padding: 0px 24px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 32px; z-index: 1; overflow: visible;"><!--$--><a data-framer-name="Logo" href="./" style="opacity: 1; display: flex; position: relative; width: 74.9px; height: 22px; border: 0px none rgb(0, 0, 238); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: flex-start; align-items: center; gap: 8px; overflow: visible; cursor: pointer;"><div data-framer-component-type="SVG" data-framer-name="shape" parentsize="0" _constraints="[object Object]" rotation="0" shadows="" aria-hidden="true" style="image-rendering: pixelated; flex: 0 0 auto; background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 22 22\"><path d=\"M 5.537 1.447 C 5.594 1.636 5.653 1.826 5.715 2.015 C 8.463 10.473 14.668 16.293 20.533 16.48 C 18.633 19.777 15.078 21.998 11 21.998 C 4.925 21.998 0 17.073 0 10.997 C 0 6.909 2.229 3.344 5.537 1.447 Z\" fill=\"rgb(255, 255, 255)\"></path><path d=\"M 7.21 1.53 C 9.774 9.423 16.155 14.494 21.76 13.284 C 21.616 13.962 21.411 14.616 21.149 15.242 C 18.873 15.337 16.427 14.427 14.104 12.591 C 11.102 10.219 8.433 6.387 6.889 1.633 C 6.808 1.384 6.731 1.134 6.658 0.885 C 6.762 0.84 6.868 0.799 6.974 0.757 C 7.047 1.015 7.126 1.272 7.21 1.53 Z\" fill=\"rgb(255, 255, 255)\"></path><path d=\"M 8.518 0.425 L 8.705 1.044 C 10.851 7.648 16.605 11.698 21.557 10.089 C 21.689 10.046 21.82 9.998 21.948 9.948 C 21.981 10.293 22 10.643 22 10.997 C 22 11.322 21.983 11.643 21.955 11.961 C 19.601 12.648 16.933 11.99 14.45 10.118 C 11.905 8.198 9.656 5.065 8.384 1.149 C 8.299 0.889 8.221 0.628 8.147 0.369 C 8.258 0.339 8.369 0.313 8.48 0.287 C 8.493 0.333 8.505 0.379 8.518 0.425 Z\" fill=\"rgb(255, 255, 255)\"></path><path d=\"M 10.059 0.094 L 10.199 0.558 C 11.808 5.512 16.459 8.44 20.586 7.099 L 20.967 6.962 C 21.044 6.932 21.119 6.897 21.194 6.864 C 21.432 7.449 21.62 8.058 21.755 8.688 C 21.566 8.772 21.374 8.85 21.176 8.915 C 19.152 9.572 16.875 9.105 14.789 7.637 C 12.702 6.168 10.877 3.735 9.879 0.663 C 9.815 0.466 9.756 0.268 9.7 0.072 C 9.814 0.058 9.929 0.047 10.044 0.037 C 10.049 0.056 10.053 0.075 10.059 0.094 Z\" fill=\"rgb(255, 255, 255)\"></path><path d=\"M 11.32 0.001 C 15.36 0.117 18.853 2.408 20.669 5.747 C 20.517 5.813 20.363 5.874 20.204 5.925 C 16.917 6.993 12.84 4.692 11.373 0.177 C 11.354 0.119 11.338 0.06 11.32 0.001 Z\" fill=\"rgb(255, 255, 255)\"></path></svg>") 0% 0% / 100% 100% repeat scroll padding-box border-box rgba(0, 0, 0, 0); opacity: 1; display: block; position: relative; width: 22px; height: 22px; border: 0px none rgb(0, 0, 238); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: pointer;"></div><div data-framer-name="text" data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: rgb(255, 255, 255); --framer-paragraph-spacing: 0px; transform: none; opacity: 1; display: flex; position: relative; width: 44.9px; height: 18.8625px; border: 0px none rgb(0, 0, 238); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible; cursor: pointer;"><p style="--font-selector: Q1VTVE9NO0dpZ2EgU2FucyBEaXNwbGF5IFRyaWFsIDUwMA==; --framer-font-family: "Giga Sans Display Trial 500", sans-serif; --framer-font-size: 22px; --framer-line-height: 18.86px; --framer-text-color: var(--extracted-r6o4lv, rgb(255, 255, 255)); display: block; position: static; width: 44.9px; height: 18.8625px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Giga Sans Display Trial 500", sans-serif; font-size: 22px; font-weight: 400; line-height: 18.86px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><span style="white-space: nowrap; display: inline; position: static; width: auto; height: auto; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Giga Sans Display Trial 500", sans-serif; font-size: 22px; font-weight: 400; line-height: 18.86px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: pointer;"><span style="display: inline-block; will-change: transform; transform: none; opacity: 1; position: static; width: 15.75px; height: 18.8625px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Giga Sans Display Trial 500", sans-serif; font-size: 22px; font-weight: 400; line-height: 18.86px; text-align: start; flex: 0 1 auto; flex-flow: row; overflow: visible; cursor: pointer;">G</span><span style="display: inline-block; will-change: transform; transform: none; opacity: 1; position: static; width: 4.7375px; height: 18.8625px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Giga Sans Display Trial 500", sans-serif; font-size: 22px; font-weight: 400; line-height: 18.86px; text-align: start; flex: 0 1 auto; flex-flow: row; overflow: visible; cursor: pointer;">i</span><span style="display: inline-block; will-change: transform; transform: none; opacity: 1; position: static; width: 13.15px; height: 18.8625px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Giga Sans Display Trial 500", sans-serif; font-size: 22px; font-weight: 400; line-height: 18.86px; text-align: start; flex: 0 1 auto; flex-flow: row; overflow: visible; cursor: pointer;">g</span><span style="display: inline-block; will-change: transform; opacity: 1; transform: none; position: static; width: 11.2625px; height: 18.8625px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: "Giga Sans Display Trial 500", sans-serif; font-size: 22px; font-weight: 400; line-height: 18.86px; text-align: start; flex: 0 1 auto; flex-flow: row; overflow: visible; cursor: pointer;">a</span></span></p></div></a><!--/$--><div style="opacity: 1; display: flex; position: relative; width: 224px; height: 54px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; overflow: clip; cursor: crosshair;"><div style="opacity: 1; display: block; position: relative; width: 112px; height: 54px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><!--$--><a data-framer-name="Transparent /Chevron - Hover" data-highlight="true" style="--border-bottom-width: 0px; --border-color: rgba(0, 0, 0, 0); --border-left-width: 0px; --border-right-width: 0px; --border-style: solid; --border-top-width: 0px; backdrop-filter: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); height: 54px; width: 112px; border-radius: 0px; opacity: 1; cursor: crosshair; display: flex; position: relative; padding: 0px 12px 0px 16px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; gap: 8px; overflow: visible;"><div data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--variable-reference-LPlY0fWw3-cdiXNpXXz); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; --variable-reference-LPlY0fWw3-cdiXNpXXz: rgb(255, 255, 255); transform: none; opacity: 1; display: flex; position: relative; width: 51.8125px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible; cursor: crosshair;"><p style="--framer-font-size: 14px; --framer-line-height: 24px; --framer-text-color: var(--extracted-r6o4lv, var(--variable-reference-LPlY0fWw3-cdiXNpXXz)); display: block; position: static; width: 51.8125px; height: 24px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">Product</p></div><div data-framer-component-type="SVG" data-framer-name="white" parentsize="0" _constraints="[object Object]" rotation="0" shadows="" aria-hidden="true" style="image-rendering: pixelated; flex: 0 0 auto; background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 13 12\"><path d=\"M 7.853 0.147 C 8.024 0.318 8.046 0.582 7.918 0.776 L 7.853 0.854 L 4.353 4.354 C 4.158 4.549 3.842 4.549 3.646 4.354 L 0.146 0.854 C -0.049 0.658 -0.049 0.342 0.146 0.147 C 0.342 -0.049 0.658 -0.049 0.853 0.147 L 4 3.293 L 7.146 0.147 L 7.225 0.082 C 7.419 -0.046 7.683 -0.024 7.853 0.147 Z\" transform=\"translate(2.5 4.5) rotate(180 4 2.25)\" fill=\"rgba(255, 255, 255, 0.45)\"></path></svg>") 0% 0% / 100% 100% repeat scroll padding-box border-box rgba(0, 0, 0, 0); opacity: 1; display: block; position: relative; width: 13px; height: 12px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;"></div></a><!--/$--></div><div style="opacity: 1; display: block; position: relative; width: 112px; height: 54px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; overflow: visible; cursor: crosshair;"><!--$--><a data-framer-name="Transparent /Chevron - Hover" data-highlight="true" style="--border-bottom-width: 0px; --border-color: rgba(0, 0, 0, 0); --border-left-width: 0px; --border-right-width: 0px; --border-style: solid; --border-top-width: 0px; backdrop-filter: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); height: 54px; width: 112px; border-radius: 0px; opacity: 1; cursor: crosshair; display: flex; position: relative; padding: 0px 12px 0px 16px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; gap: 8px; overflow: visible;"><div data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--variable-reference-LPlY0fWw3-cdiXNpXXz); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; --variable-reference-LPlY0fWw3-cdiXNpXXz: rgb(255, 255, 255); transform: none; opacity: 1; display: flex; position: relative; width: 63.4px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible; cursor: crosshair;"><p style="--framer-font-size: 14px; --framer-line-height: 24px; --framer-text-color: var(--extracted-r6o4lv, var(--variable-reference-LPlY0fWw3-cdiXNpXXz)); cursor: crosshair; display: block; position: static; width: 63.4px; height: 24px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Company</p></div><div data-framer-component-type="SVG" data-framer-name="white" parentsize="0" _constraints="[object Object]" rotation="0" shadows="" aria-hidden="true" style="image-rendering: pixelated; flex: 0 0 auto; background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 13 12\"><path d=\"M 7.853 0.147 C 8.024 0.318 8.046 0.582 7.918 0.776 L 7.853 0.854 L 4.353 4.354 C 4.158 4.549 3.842 4.549 3.646 4.354 L 0.146 0.854 C -0.049 0.658 -0.049 0.342 0.146 0.147 C 0.342 -0.049 0.658 -0.049 0.853 0.147 L 4 3.293 L 7.146 0.147 L 7.225 0.082 C 7.419 -0.046 7.683 -0.024 7.853 0.147 Z\" transform=\"translate(2.5 4.5) rotate(180 4 2.25)\" fill=\"rgba(255, 255, 255, 0.45)\"></path></svg>") 0% 0% / 100% 100% repeat scroll padding-box border-box rgba(0, 0, 0, 0); opacity: 1; display: block; position: relative; width: 13px; height: 12px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex-flow: row; overflow: visible; cursor: crosshair;"></div></a><!--/$--></div></div></div></div><div style="backdrop-filter: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border-radius: 0px; opacity: 1; will-change: auto; cursor: crosshair; display: flex; position: relative; width: 230.175px; height: 54px; padding: 0px 16px; border: 0px none rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; justify-content: center; align-items: center; gap: 10px; z-index: 1; overflow: clip;"><div style="opacity: 1; display: block; position: relative; width: 84.8375px; height: 42px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; z-index: 1; overflow: visible; cursor: crosshair;"><!--$--><a data-highlight="true" href="https://console.gigaml.com/" target="_blank" rel="noopener" style="--border-bottom-width: 0px; --border-color: rgba(0, 0, 0, 0); --border-left-width: 0px; --border-right-width: 0px; --border-style: solid; --border-top-width: 0px; backdrop-filter: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border-radius: 0px; opacity: 1; cursor: crosshair; will-change: auto; display: flex; position: relative; width: 84.8375px; height: 42px; padding: 9px 20px; border: 0px none rgb(0, 0, 238); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; gap: 8px; overflow: visible;" data-framer-name="Transparent"><div data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--variable-reference-LPlY0fWw3-cdiXNpXXz); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; --variable-reference-LPlY0fWw3-cdiXNpXXz: rgb(255, 255, 255); transform: none; opacity: 1; display: flex; position: relative; width: 44.8375px; height: 24px; border: 0px none rgb(0, 0, 238); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible; cursor: crosshair;"><p style="--framer-font-size: 14px; --framer-line-height: 24px; --framer-text-color: var(--extracted-r6o4lv, var(--variable-reference-LPlY0fWw3-cdiXNpXXz)); cursor: crosshair; display: block; position: static; width: 44.8375px; height: 24px; border: 0px none rgb(255, 255, 255); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(255, 255, 255); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Sign in</p></div></a><!--/$--></div><!--$--><div style="opacity: 1; display: block; position: relative; width: 103.338px; height: 42px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: row; z-index: 1; overflow: visible; cursor: crosshair;"><!--$--><a data-highlight="true" href="./contact" style="--border-bottom-width: 0px; --border-color: rgba(0, 0, 0, 0); --border-left-width: 0px; --border-right-width: 0px; --border-style: solid; --border-top-width: 0px; backdrop-filter: blur(0px); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); border-radius: 1000px; opacity: 1; cursor: crosshair; will-change: auto; display: flex; position: relative; width: 103.338px; height: 42px; padding: 9px 20px; border: 0px none rgb(0, 0, 238); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; gap: 8px; overflow: visible;" data-framer-name="Main CTA"><div data-framer-component-type="RichTextContainer" style="--extracted-r6o4lv: var(--variable-reference-LPlY0fWw3-cdiXNpXXz); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; --variable-reference-LPlY0fWw3-cdiXNpXXz: rgb(0, 0, 0); transform: none; opacity: 1; will-change: auto; display: flex; position: relative; width: 63.3375px; height: 24px; border: 0px none rgb(0, 0, 238); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 238); font-family: sans-serif; font-size: 12px; font-weight: 400; text-align: start; flex: 0 0 auto; flex-flow: column; justify-content: flex-start; overflow: visible; cursor: crosshair;"><p style="--framer-font-size: 14px; --framer-line-height: 24px; cursor: crosshair; display: block; position: static; width: 63.3375px; height: 24px; border: 0px none rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Talk to us</p></div></a><!--/$--></div><!--/$--></div></div>
create a canvas to display a navbar component. we want the navbar component to be centered and the space around it to be flexible empty.
reproduce this navbar component
Created by: LandingHero
