atomic-design-templates

# Atomic Design: Templates

Master the creation of templates - page-level layouts that define content structure without actual content. Templates establish the skeletal structure that pages will use.

## What Are Templates?

Templates are the page-level objects that place components into a layout and articulate the design's underlying content structure. They are:

- **Composed of organisms**: Arrange organisms into page layouts
- **Content-agnostic**: Use placeholder content, not real data
- **Structural**: Define where content types will appear
- **Reusable**: Same template can be used by multiple pages
- **Responsive**: Handle all viewport sizes

## Common Template Types

### Marketing Templates

- Landing page layouts
- Homepage layouts
- Product showcase layouts
- About/Company layouts

### Application Templates

- Dashboard layouts
- Settings page layouts
- Profile page layouts
- List/Detail page layouts

### Content Templates

- Blog post layouts
- Article layouts
- Documentation layouts
- Help center layouts

### E-commerce Templates

- Product listing layouts
- Product detail layouts
- Checkout layouts
- Order confirmation layouts

## MainLayout Template Example

### Complete Implementation

```typescript
// templates/MainLayout/MainLayout.tsx
import React from 'react';
import { Header, type HeaderProps } from '@/components/organisms/Header';
import { Footer, type FooterProps } from '@/components/organisms/Footer';
import styles from './MainLayout.module.css';

export interface MainLayoutProps {
  /** Header configuration */
  headerProps: HeaderProps;
  /** Footer configuration */
  footerProps: FooterProps;
  /** Main content */
  children: React.ReactNode;
  /** Show breadcrumbs */
  showBreadcrumbs?: boolean;
  /** Breadcrumb component */
  breadcrumbs?: React.ReactNode;
  /** Maximum content width */
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  /** Page background color */
  background?: 'white' | 'gray' | 'primary';
}

export const MainLayout: Re