Layout Patterns

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

Usage

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

Usage

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

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

Features

• Multi-Line Titles: Use \n in the title string for line breaks
• Long Heading Support: isLongHeading disables forced line preservation on mobile
• Centered Text: Text-center alignment with proper spacing
• Responsive: Uses whitespace-pre-line and max-md:whitespace-normal for long headings

Common Patterns

Standard Content Section

<Section id="features">
  <SectionHeader
    title={'Everything you need\nto succeed'}
  >
    {'Pre-built integrations\nand components'}
  </SectionHeader>
  <div className="grid grid-cols-3 gap-6">
    {/* Feature cards */}
  </div>
</Section>

Long Heading

<SectionHeader
  isLongHeading
  title={'Trusted by developers around the world'}
>
  {'Join thousands of teams\nbuilding 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