page-home
              app-root
                app-header
                  header
                    layout-grid
                      h1#logo
                      nav#main-nav
                        a#nav-trigger
                          span.nav-trigger-open
                          span.nav-trigger-close
                        ul#page-nav
                          li.menu-links
                        ul#user-nav
                          li.menu-links
                div#main-container
                  div#next
                    div.pb-[100vh].1200:
                      div.z-3.bg-wheat.1200:.sticky.1200:.top-0
                      footer.text-wheat.1200:.min-h-screen.1200:.fixed.inset-0.pb-88.1200:.pb-24.pt-24.1200:.pt-48.bg-blue
                        div.w-full.h-full.opacity-100
                          div.page-container.h-full
                            div.grid.1200:grid-cols-12.h-full
                              div.col-span-5.h-full.1200:.flex.items-end.hidden
                              div
                              div.h-full.col-span-6.flex.flex-col.justify-between.800:.pt-40
                  script
              
            
          
          

Page Home:Shows the overall structure or page contex
App Root: Main container, highest level of container that holds all the other elements
App Header+Header: Header section/ header element contaning various child elements
div.z-3 text-wheat.1200.sticky.1200 styling div with specific classes for appearances and behavior
Footer.text: footer element used for styling classes for layout and appearances
Div: An empty div, possibly for spacing or layout purposes.
Script: Incoporating javascript code