Plainform

Layout patterns provide consistent structure, spacing, and styling across your application. These components handle common layout needs like sections, headers, and gradient backgrounds.

Section Component

The Section component creates consistent page sections with automatic spacing and responsive padding.

Props

Section Props	Type	Default
`children`	`React.ReactNode`	`-`
`className?`	`string`	`-`
`offsetTop?`	`boolean`	`false`
`id?`	`string`	`-`

Usage

@/app/(base)/page.tsx

import { Section } from '@/components/Section';

export default function HomePage() {
  return (
    <main>
      <Section id="hero" offsetTop>
        <h1>Welcome</h1>
        <p>Your content here</p>
      </Section>

      <Section id="features">
        <h2>Features</h2>
        {/* Feature content */}
      </Section>
    </main>
  );
}

Features

Consistent Spacing: Automatic padding and gap between elements
Responsive: Adapts padding for mobile (px-20 max-md:px-7)
Max Width: Constrains content to max-w-8xl for readability
Centered Content: Flexbox centering for vertical and horizontal alignment
Offset Support: offsetTop adds h-[calc(100svh-4.5rem)] mt-[4.5rem] for full-height hero sections

SectionHeader Component

The SectionHeader component creates consistent section titles with optional descriptions.

Props

SectionHeader Props	Type	Default
`title`	`{ firstLine: string; secondLine?: string }`	`-`
`children?`	`React.ReactNode`	`-`
`muteFirstLine?`	`boolean`	`false`
`className?`	`string`	`-`

Usage

@/components/Features.tsx

import { Section } from '@/components/Section';
import { SectionHeader } from '@/components/SectionHeader';

export function Features() {
  return (
    <Section>
      <SectionHeader
        title={{
          firstLine: 'Powerful Features',
          secondLine: 'Built for developers',
        }}
      >
        Everything you need to build modern web applications
      </SectionHeader>
      {/* Feature cards */}
    </Section>
  );
}

Features

Two-Line Titles: Support for emphasized first line and muted second line
Flexible Styling: muteFirstLine prop reverses emphasis
Centered Text: Text-center alignment with proper spacing
Responsive: Handles line breaks on mobile (whitespace-pre max-md:whitespace-normal)

GradientSectionWrapper Component

The GradientSectionWrapper adds a radial gradient background effect to sections.

Props

GradientSectionWrapper Props	Type	Default
`children`	`React.ReactNode`	`-`

Usage

@/components/Hero.tsx

import { Section } from '@/components/Section';
import { GradientSectionWrapper } from '@/components/GradientSectionWrapper';

export function Hero() {
  return (
    <GradientSectionWrapper>
      <Section offsetTop>
        <h1>Your Product Name</h1>
        <p>Tagline with gradient background</p>
      </Section>
    </GradientSectionWrapper>
  );
}

Features

Radial Gradient: Creates depth with radial-gradient from surface to brand color
Blur Effect: Applies blur-3xl for soft, modern look
Positioned Background: Uses absolute positioning with -z-10 to stay behind content
Customizable: Uses CSS variables --color-surface and --color-brand

Common Patterns

Full-Height Hero Section

Hero with Gradient

<GradientSectionWrapper>
  <Section id="hero" offsetTop>
    <SectionHeader
      title={{
        firstLine: 'Build Faster',
        secondLine: 'Ship Better',
      }}
    >
      The complete Next.js starter kit
    </SectionHeader>
    <Button>Get Started</Button>
  </Section>
</GradientSectionWrapper>

Standard Content Section

Features Section

<Section id="features">
  <SectionHeader
    title={{
      firstLine: 'Everything you need',
      secondLine: 'to succeed',
    }}
  >
    Pre-built integrations and components
  </SectionHeader>
  <div className="grid grid-cols-3 gap-6">
    {/* Feature cards */}
  </div>
</Section>

Alternating Emphasis

Muted First Line

<SectionHeader
  muteFirstLine
  title={{
    firstLine: 'Trusted by developers',
    secondLine: 'Around the world',
  }}
>
  Join thousands of teams building with our platform
</SectionHeader>

Styling

All layout components use Tailwind CSS with custom design tokens:

max-w-8xl - Maximum content width
px-20 max-md:px-7 - Responsive horizontal padding
py-16 max-md:py-12 - Responsive vertical padding
gap-20 max-md:gap-14 - Responsive spacing between elements
text-neutral-foreground - Secondary text color

Section.tsx - Source code
SectionHeader.tsx - Source code
GradientSectionWrapper.tsx - Source code

Layout Patterns

Section Component

Props

Usage

Features

SectionHeader Component

Props

Usage

Features

GradientSectionWrapper Component

Props

Usage

Features

Common Patterns

Full-Height Hero Section

Standard Content Section

Alternating Emphasis

Styling

On this page