262 lines
5.2 KiB
Markdown
262 lines
5.2 KiB
Markdown
# 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)
|