Technical Sections

Purpose: Detailed technical specifications with bullet lists

Default Sections

Every new offer starts with 4 default sections:

1. Construction ✅ (visible by default)
   • Content: “Default content 1, 2, 3…”
2. Steps ⬜ (hidden by default)
   • Content: Empty
3. Railing ⬜ (hidden by default)
   • Content: Empty
4. Extras ⬜ (hidden by default)
   • Content: Empty

Adding a Section

1. Click ➕ Add section button (purple, top of Technical Sections)
2. New section appears with:
   • Default title: "Section 5", "Section 6", etc.
   • Empty content
   • Visibility checkbox checked ✅
   • Layout set to 50% width (half)

Section Editor

Each section card contains:

Header (clickable to expand/collapse):

• ✅ Checkbox – toggle visibility in PDF
• Title label – section name display
• Expand icon (▼/▶) – shows if expanded
• Action buttons:
  • ↑ Move up
  • ↓ Move down
  • 🗑️ Delete section

Content area (when expanded):

Section Title input:

• Label: “Section title”
• Placeholder: “e.g., Construction, Steps…”
• Updates live in:
  • Section header (left panel)
  • PDF preview (right panel)

Display Width selector (Premium only):

• 50% width (2 columns) – Default, sections appear side-by-side
• 100% width (1 column) – Full-width section, spans entire page
• Help text: “Choose how wide this section should appear in the preview and PDF”
• Updates live in PDF preview

Content textarea:

• Label: “Content (bullet list – one line per item)”
• Placeholder:

  Point 1
  Point 2
  Point 3

• Format: One bullet point per line
• Rendered as: <ul> list in PDF
• Example:

  Oak wood construction
  Stainless steel fasteners
  Hand-finished surface
  5-year warranty

Section Actions

Move Up ↑:

• Moves section one position higher in the list
• Disabled if section is already first
• Reorders immediately in preview

Move Down ↓:

• Moves section one position lower
• Disabled if section is last
• Reorders immediately in preview

Delete 🗑️:

• Confirms: “Are you sure you want to delete this section?”
• Removes section permanently
• Cannot delete if it’s the last section
  • Error: “You cannot delete the last section!”
• Other sections retain their positions

Toggle Visibility (checkbox):

• ✅ Checked – Section appears in PDF
• ⬜ Unchecked – Section hidden from PDF
• Collapse animation when unchecked
• Data preserved even when hidden

Premium Rich Text Editor

If you have Premium, technical sections support rich formatting:

Formatting options:

• Bold (<strong>)
• Italic (<em>)
• Underline (<u>)
• Links (<a href>)
• Bullet lists (<ul>)
• Numbered lists (<ol>)

How to use:

1. Select text in section content area
2. Click formatting button in toolbar
3. Text updates with formatting
4. Preview shows formatted text
5. PDF preserves all formatting

Basic users:

• Plain textarea only
• Bullet points via line breaks
• No rich formatting available