Page Structure
When clients open your public link (yoursite.com/offer/abc123/), they see:
┌─────────────────────────────────────────────┐
│ HEADER │
│ ├─ Your Company Logo │
│ ├─ Company Name & Tagline │
│ └─ Offer Title │
├─────────────────────────────────────────────┤
│ INFO BAR │
│ ├─ Offer Date │
│ ├─ Offer Number │
│ └─ Validity Period │
├─────────────────────────────────────────────┤
│ CUSTOMER INFORMATION │
│ └─ Name, Address (their details) │
├─────────────────────────────────────────────┤
│ OFFER DESCRIPTION │
│ └─ Introductory text │
├─────────────────────────────────────────────┤
│ TECHNICAL SECTIONS (if any) │
│ └─ Specifications, details │
├─────────────────────────────────────────────┤
│ PRICE OVERVIEW TABLE │
│ ├─ Items with quantities │
│ ├─ Net prices, VAT, Gross prices │
│ └─ TOTAL (highlighted) │
├─────────────────────────────────────────────┤
│ PAYMENT TERMS │
│ DELIVERY TIME │
│ WARRANTY │
│ NOTES │
├─────────────────────────────────────────────┤
│ IMAGE GALLERY (if photos added) │
│ └─ Product images in grid layout │
├─────────────────────────────────────────────┤
│ ACCEPTANCE BOX │
│ ├─ "Accept This Offer" button │
│ └─ Form fields (appears on click) │
├─────────────────────────────────────────────┤
│ FOOTER │
│ └─ Company contact information │
└─────────────────────────────────────────────┘Visual Design
Color scheme:
- Primary color: Your brand color (from Branding settings)
- Accent color: Green gradient for acceptance box
- Background: Clean white for readability
Typography:
- Professional fonts (system fonts for fast loading)
- Clear hierarchy (large titles, readable body text)
- Responsive sizing (adapts to mobile screens)
Branding elements:
- Logo: Displays at top (light or dark version based on template)
- Company name: Prominent display
- Footer tagline: Your custom footer text
- Colors: Match your brand settings