NOTTO
LAYOUT_COMPONENTS

PAGE

STRUCTURE

STRUCTURAL_COMPONENTS

HEADER_FOOTER_CONTENT.EXE

LAYOUT

Root Application Wrapper

The Layout component provides the fundamental HTML structure and theme management for the entire application.

USAGE_EXAMPLE
import { Layout } from '@/app/components/layout/layout'
import { Header } from '@/app/components/layout/header'
import { Content } from '@/app/components/layout/content'
import { Footer } from '@/app/components/layout/footer'

export default function RootLayout({ children }) {
  return (
    <Layout>
      <Header>
        <Logo>YOUR_BRAND</Logo>
        <Nav>...</Nav>
        <Actions>...</Actions>
      </Header>
      
      <Content>
        {children}
      </Content>
      
      <Footer>...</Footer>
    </Layout>
  )
}

HEADER

Top Navigation Container

The Header component provides a consistent top navigation area with logo, navigation links, and action buttons.

USAGE_EXAMPLE
import { Header } from '@/app/components/layout/header'
import { Logo } from '@/app/components/core/logo'
import { Nav } from '@/app/components/layout/nav'
import { NavLink } from '@/app/components/layout/nav-link'
import { Actions } from '@/app/components/layout/actions'

<Header>
  <Logo href="/">NOTTO</Logo>
  
  <Nav>
    <NavLink href="/docs">OVERVIEW</NavLink>
    <NavLink href="/components">MODULES</NavLink>
  </Nav>
  
  <Actions>
    <Button variant="ghost">GITHUB</Button>
    <Button>GET_STARTED</Button>
  </Actions>
</Header>

NAV & NAVLINK

Navigation Menu System

The Nav and NavLink components work together to provide accessible, keyboard-navigable menu systems.

USAGE_EXAMPLE
import { Nav } from '@/app/components/layout/nav'
import { NavLink } from '@/app/components/layout/nav-link'

<Nav>
  <NavLink href="/docs">DOCUMENTATION</NavLink>
  <NavLink href="/components">COMPONENTS</NavLink>
  <NavLink href="/guides">GUIDES</NavLink>
</Nav>

CONTENT

Main Content Area

The Content component provides the main content area with proper semantic HTML and accessibility features.

USAGE_EXAMPLE
import { Content } from '@/app/components/layout/content'

<Content>
  {children}
</Content>

FOOTER

Site Footer System

The Footer system includes multiple components for organizing links, legal information, and site navigation.

FOOTER_COMPONENTS
COMPONENTPURPOSE
FooterMain footer container
FooterNavNavigation columns container
FooterColumnIndividual link column
FooterLinkFooter navigation links
FooterLegalLegal information section
USAGE_EXAMPLE
import { Footer } from '@/app/components/layout/footer'
import { FooterNav } from '@/app/components/layout/footer-nav'
import { FooterColumn } from '@/app/components/layout/footer-column'
import { FooterLink } from '@/app/components/layout/footer-link'

<Footer>
  <FooterNav>
    <FooterColumn title="PRODUCT">
      <FooterLink href="/docs">DOCUMENTATION</FooterLink>
      <FooterLink href="/components">COMPONENTS</FooterLink>
    </FooterColumn>
    
    <FooterColumn title="RESOURCES">
      <FooterLink href="/guides">GUIDES</FooterLink>
      <FooterLink href="/help">HELP</FooterLink>
    </FooterColumn>
  </FooterNav>
  
  <FooterLegal>
    <FooterInfo>
      <FooterText>© 2024 YOUR_COMPANY</FooterText>
    </FooterInfo>
  </FooterLegal>
</Footer>

BACKGROUND

Decorative Page Background

The Background component adds subtle visual texture and branding to page layouts.

USAGE_EXAMPLE
import { Background } from '@/app/components/layout/background'

<Section container spacing="xl">
  <Background />
  
  {/* Your page content */}
  <Heading level={1}>Page Title</Heading>
</Section>

COMPLETE_LAYOUT_EXAMPLE

Full Application Structure

import { Layout } from '@/app/components/layout/layout'
import { Header } from '@/app/components/layout/header'
import { Logo } from '@/app/components/core/logo'
import { Nav } from '@/app/components/layout/nav'
import { NavLink } from '@/app/components/layout/nav-link'
import { Actions } from '@/app/components/layout/actions'
import { Content } from '@/app/components/layout/content'
import { Footer } from '@/app/components/layout/footer'
import { FooterNav } from '@/app/components/layout/footer-nav'
import { FooterColumn } from '@/app/components/layout/footer-column'
import { FooterLink } from '@/app/components/layout/footer-link'
import { Button } from '@/app/components/ui/button'

export default function RootLayout({ children }) {
  return (
    <Layout>
      <Header>
        <Logo href="/">NOTTO</Logo>

        <Nav>
          <NavLink href="/docs">OVERVIEW</NavLink>
          <NavLink href="/docs/components/ui">MODULES</NavLink>
          <NavLink href="/docs/components/core">CORE</NavLink>
          <NavLink href="/docs/components/layout">LAYOUT</NavLink>
        </Nav>

        <Actions>
          <Button variant="ghost" size="sm">GITHUB</Button>
          <Button size="sm">GET_STARTED</Button>
        </Actions>
      </Header>

      <Content>
        {children}
      </Content>

      <Footer>
        <FooterNav>
          <FooterColumn title="SYSTEM">
            <FooterLink href="#about">ABOUT_PROJECT</FooterLink>
            <FooterLink href="#blog">RELEASE_NOTES</FooterLink>
          </FooterColumn>

          <FooterColumn title="MODULES">
            <FooterLink href="/docs/components/ui">UI_COMPONENTS</FooterLink>
            <FooterLink href="/docs/components/core">CORE_COMPONENTS</FooterLink>
            <FooterLink href="/docs/components/layout">LAYOUT_COMPONENTS</FooterLink>
          </FooterColumn>
        </FooterNav>
      </Footer>
    </Layout>
  )
}