# WHP Site Builder - Features

## Visual Editor
- Drag-and-drop page building with real-time preview
- No iframe -- content renders directly in the editor
- Responsive device preview (Desktop / Tablet / Mobile)
- Undo / Redo with full history
- Auto-save every 30 seconds
- Save as draft / Publish workflow

## Components (36 modules)

### Layout
- **Container** -- Generic wrapper with bg color/gradient/image, parallax, overlay
- **Section** -- Full-width section with centered content area
- **Column Layout** -- 1-10 columns with preset and custom splits
- **Background Section** -- Section with background image/gradient overlay

### Content
- **Heading** -- H1-H6 with inline editing, full typography controls
- **Text Block** -- Paragraph with inline editing
- **Button / Link** -- Styled button with color presets, radius, padding
- **Divider** -- Horizontal rule with color and thickness
- **Spacer** -- Adjustable vertical spacing
- **Icon** -- Font Awesome icon with size, color, background shape
- **Star Rating** -- Decorative star display (0-5 stars)
- **Social Links** -- Social media icon links (10+ platforms)

### Navigation
- **Logo** -- Text or image logo with link
- **Menu** -- Navigation links with page integration, CTA support
- **Navbar** -- Combined logo + menu layout (convenience block)

### Media
- **Image** -- Upload, browse, drag-drop, sizing controls (width/height/max-width with units)
- **Video** -- YouTube, Vimeo, direct files, background mode with overlay
- **Gallery** -- Image grid (2-6 columns) with optional lightbox
- **Map Embed** -- Google Maps with address, zoom, height

### Sections (Pre-built)
- **Hero** -- Gradient hero with heading, subtitle, CTA button
- **Features Grid** -- Multi-column feature cards
- **Call to Action** -- Full CTA section with bg options and dual buttons
- **Pricing Table** -- 2-4 tier comparison cards with featured plan
- **Testimonials** -- Quote cards with star ratings (grid or single view)
- **Accordion** -- Expandable FAQ/content panels
- **Tabs** -- Tabbed content panels
- **Countdown** -- Date countdown timer with live updating
- **Footer** -- Footer component with copyright text

### Forms
- **Contact Form** -- Complete form with configurable fields
- **Form Container** -- Wrapper for custom form layouts
- **Input Field** -- Text/email/tel/password/number inputs
- **Textarea** -- Multi-line text input
- **Form Button** -- Submit button with styling

## Site Design System
- **Basic mode**: Primary, secondary, accent colors + heading/body fonts + link color
- **Advanced mode**: Success/warning/error colors, background/text/border colors, border radius, button styling, nav style
- Design tokens applied across all pages and components
- Reset to defaults button

## Pages & Structure
- Multi-page support with unlimited pages
- **Header** -- Shared across all pages, edited separately
- **Footer** -- Shared across all pages, edited separately
- Clean URLs via .htaccess (no .html extension)
- Page management: add, edit, rename, delete, reorder

## Templates (16 pre-built)
- **Business**: Restaurant, Small Business, SaaS, Agency, Medical
- **Creative**: Portfolio, Photography, Content Creator, Event
- **Personal**: Resume, Blog, Wedding, Coming Soon
- **Community**: Church, Non-Profit, Fitness
- Each includes header, footer, and design tokens
- One-click loading with optional design token import

## Asset Management
- Image/video upload with drag-and-drop
- Asset browser with thumbnails
- Inline asset selection in component settings
- Assets stored in staging area, deployed on publish

## Settings Per Component (3-tab system)
- **General** -- Content-specific settings
- **Style** -- Typography, colors, spacing, borders, backgrounds
- **Advanced** -- Margin/padding (4-sided), CSS class/ID, responsive visibility, entrance animations

## Editor Features
- Component tree (Layers panel)
- Right-click context menu (duplicate, copy, paste, move, delete)
- Keyboard shortcuts (Ctrl+Z/Y/C/V/D, Delete, Escape)
- Dashed outlines for all containers/rows/columns
- Component selection with blue outline indicator

## Publishing
- **Save** stores to staging area (.site-builder/) -- does not affect live site
- **Publish** deploys to document root with header + body + footer composition
- Preview in new tab with header and footer included
- Coming Soon / Go Live toggle
- Clean HTML output with Google Fonts and responsive CSS