# Public Pages

Public pages provide the public-facing interface for campaign supporters and volunteers. These pages are accessible without authentication and use a dark theme for visual consistency.

## Route Context

- **Prefix:** Various (`/campaigns`, `/map`, `/shifts`, `/p/:slug`, `/media`)
- **Layout:** [PublicLayout](../../layouts/index.md) (dark theme)
- **Auth Required:** No
- **Theme:** Dark blue/teal (`#0d1b2a` background)

## Campaign Pages

### [Campaigns List Page](campaigns-list-page.md)

**Route:** `/campaigns`

Featured campaign listing:

- Hero section with call-to-action
- Featured campaigns grid
- Campaign cards with images
- Search and filter (future)
- Responsive grid layout

**Features:**
- Public campaign discovery
- Featured campaigns first
- Card-based design
- Mobile responsive

### [Campaign Page](campaign-page.md)

**Route:** `/campaigns/:id`

Campaign detail and action page:

- Campaign description
- Target representatives lookup
- Email form with templates
- Progress tracking
- Social sharing

**Features:**
- Postal code → representative lookup
- Email to representatives
- Form validation
- Success confirmation
- Response submission link

### [Response Wall Page](response-wall-page.md)

**Route:** `/responses/:campaignId`

Public response submissions and viewing:

- Response submission form
- Email verification flow
- Response list (verified only)
- Upvoting system
- Sorting options

**Features:**
- Submit responses anonymously
- Email verification required
- Upvote responses
- Sort by newest/popular
- Responsive cards

## Map & Location Pages

### [Map Page](map-page.md)

**Route:** `/map`

Public interactive map:

- Leaflet map with locations
- Color-coded markers by status
- Geographic cuts overlay
- Cut visibility controls
- Geolocate button
- Fullscreen mode
- Map legend

**Features:**
- OpenStreetMap tiles
- Custom markers
- Polygon overlays
- Popup information
- Mobile responsive

### [Shifts Page](shifts-page.md)

**Route:** `/shifts`

Public shift signup:

- Shift cards by date
- Cut information
- Signup modal
- Temp user creation
- Email confirmation

**Features:**
- Filter by date/cut
- Quick signup flow
- Anonymous signups (creates TEMP user)
- Email notifications
- Mobile responsive

## Content Pages

### [Landing Page](landing-page.md)

**Route:** `/p/:slug`

Rendered landing pages:

- Custom HTML/CSS content
- GrapesJS block rendering
- Responsive design
- SEO metadata
- Custom scripts support

**Features:**
- Dynamic content from database
- Custom styling
- Block-based layout
- Published pages only

## Media Pages

### [Media Gallery Page](media-gallery-page.md)

**Route:** `/media`

Public video gallery:

- Shared videos grid
- Category filtering
- Search functionality
- Reaction system (6 emojis)
- Video cards with thumbnails

**Features:**
- Public videos only (unlocked + shared)
- Responsive grid
- Click to view details
- Emoji reactions
- Mobile responsive

### [Media Viewer Page](media-viewer-page.md)

**Route:** `/media/:id`

Video detail page:

- Video player
- Title and description
- Reaction buttons
- Related videos
- Share options

**Features:**
- HTML5 video player
- Reaction tracking
- Social sharing
- Mobile responsive

## Public Page Count

Total: **8 public pages**

## Common Features

Public pages share:

- **Dark Theme** - Blue/teal color scheme (#0d1b2a)
- **No Authentication** - Open access
- **Responsive Design** - Mobile-first approach
- **Grid Breakpoints** - Uses `Grid.useBreakpoint()`
- **Loading States** - Spinners and skeletons
- **Error Handling** - User-friendly messages
- **SEO Friendly** - Meta tags, semantic HTML

## Theme Colors

```typescript
colorBgBase: '#0d1b2a'       // Dark navy background
colorBgContainer: '#1b2838'  // Container background
colorPrimary: '#3498db'      // Bright blue accent
colorLink: '#3498db'         // Link color
colorText: '#e0e0e0'         // Light text
colorTextSecondary: '#a0a0a0' // Secondary text
```

## Layout Structure

Public pages use PublicLayout which provides:

- **Header**
  - Logo/branding
  - Navigation links
  - Login button (when not authenticated)

- **Content Area**
  - Full-width container
  - Responsive padding
  - Dark theme styling

- **Footer**
  - Contact links
  - About information
  - Social media
  - Copyright

## Mobile Responsiveness

Public pages are optimized for mobile:

- Touch-friendly controls
- Responsive grids
- Mobile navigation
- Optimized forms
- Fast loading

## API Integration

Public pages use direct axios (no auth interceptor):

```typescript
import axios from 'axios';

const response = await axios.get(
  `${import.meta.env.VITE_API_URL}/api/campaigns/public`
);
```

Admin pages use authenticated `api` client from `lib/api.ts`.

## Form Validation

Public forms use Zod validation:

```typescript
const emailSchema = z.object({
  email: z.string().email(),
  message: z.string().min(10),
});
```

## Related Documentation

- [Frontend Pages Overview](../index.md)
- [Admin Pages](../admin/index.md)
- [Volunteer Pages](../volunteer/index.md)
- [Public Layout](../../layouts/index.md)
- [Backend Public Routes](../../../backend/modules/index.md)
- [Campaign Features](../../../features/influence/campaigns.md)
- [Map Features](../../../features/map/index.md)