CORE_COMPONENTS

BUILDING

BLOCKS

FOUNDATIONAL_COMPONENTS

SECTION_LINK_LOGO.EXE

SECTION

Universal Layout Component

The Section component works like CSS flexbox - simple, predictable layout with direction, spacing, and alignment. Perfect for building any interface structure.

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
direction	'vertical' \| 'horizontal'	'vertical'	Layout direction (flex-col \| flex-row)
spacing	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Gap between children (space-y-* \| gap-*)
alignment	'start' \| 'center' \| 'end' \| 'stretch'	'center'	Both justify-* and items-* alignment
className	string	""	Additional CSS classes

USAGE_EXAMPLE

import { Section } from '@/app/components/core/section'

// Basic vertical layout (default)
<Section spacing="lg">
  <h1>Title</h1>
  <p>Content</p>
</Section>

// Left-aligned content
<Section spacing="lg" alignment="start">
  <h1>Left aligned</h1>
  <p>Everything aligns to the left</p>
</Section>

// Horizontal layout with spacing
<Section direction="horizontal" spacing="sm" alignment="center">
  <Button>Primary</Button>
  <Button variant="outline">Secondary</Button>
</Section>

// Trickle-down alignment
<Section spacing="xl" alignment="start">
  {/* Everything aligns left */}
  <h1>Main Title</h1>
  
  {/* Override alignment for this section only */}
  <Section direction="horizontal" spacing="sm" alignment="center">
    <Button>Centered</Button>
    <Button>Buttons</Button>
  </Section>
</Section>

LINK

Branded Navigation Component

The Link component provides consistent branded styling for all navigation elements.

USAGE_EXAMPLE

import { Link } from '@/app/components/core/link'

// Basic link
<Link href="/about">ABOUT_US</Link>

// External link
<Link href="https://github.com/your-repo">
  GITHUB_REPO
</Link>

LIVE_EXAMPLE

DOCUMENTATION BACK_TO_HOME

LOGO

Branded Logo Component

The Logo component provides consistent typography and optional linking for brand identity.

USAGE_EXAMPLE

import { Logo } from '@/app/components/core/logo'

// Text logo
<Logo>NOTTO</Logo>

// Linked logo (typically in header)
<Logo href="/">NOTTO</Logo>

LIVE_EXAMPLE

NOTTO

YOUR_BRAND

COMPLETE_EXAMPLE

Page Layout Pattern

import { Section } from '@/app/components/core/section'
import { Logo } from '@/app/components/core/logo'
import { Link } from '@/app/components/core/link'
import { Heading } from '@/app/components/ui/heading'
import { Button } from '@/app/components/ui/button'

export default function MyPage() {
  return (
    <Section container spacing="xl">
      {/* Header */}
      <Section direction="horizontal" alignment="center" spacing="lg">
        <Logo href="/">NOTTO</Logo>
        
        <Section direction="horizontal" spacing="md">
          <Link href="/components">COMPONENTS</Link>
          <Link href="/docs">DOCS</Link>
        </Section>
      </Section>

      {/* Content */}
      <Section spacing="lg">
        <Heading level={1}>Page Title</Heading>
        <Heading level={2}>Subtitle goes here</Heading>
      </Section>

      {/* Actions */}
      <Section direction="horizontal" spacing="sm">
        <Button size="lg" style="dark">Primary Action</Button>
        <Button size="lg" variant="outline">Secondary</Button>
      </Section>
    </Section>
  )
}