# Onboarding MVP Wireframes

These are low-fidelity, Figma-transfer-ready wireframes for the onboarding MVP.

These are provided as structured low-fi specs and ASCII layouts that can be recreated in Figma or compared directly against the implemented CakePHP screens.

## 1. Landing Page

Purpose: Introduce CandleCraft Academy and drive enquiry submissions.

Primary user: Visitor, prospective parent, prospective student.

Key sections/components:

- Header with logo/business name and CTA
- Hero section with value proposition
- Offerings summary for pottery and knitting
- Trust/credibility section
- Footer with contact CTA

CTAs:

- Enquire now
- Contact us

Validation/error states:

- Ensure CTA links are visible and functional.

Accessibility notes:

- Clear heading hierarchy
- Sufficient color contrast
- Keyboard focus visible on CTAs

Responsive/mobile notes:

- Stack hero and summary sections vertically
- Keep CTA near the top on mobile

```text
+------------------------------------------------------+
| Logo                    Nav / Contact CTA            |
+------------------------------------------------------+
| HERO: CandleCraft Academy                            |
| "Pottery and knitting tutoring for curious makers"   |
| [Enquire Now]                                        |
+------------------------------------------------------+
| Why Choose Us                                        |
| - supportive learning                                |
| - beginner friendly                                  |
| - creative confidence                                |
+------------------------------------------------------+
| Programs                                             |
| [Pottery] [Knitting] [Both / Unsure]                 |
+------------------------------------------------------+
| Trust / About                                        |
| short intro, social proof placeholder                |
+------------------------------------------------------+
| Footer + Contact CTA                                 |
+------------------------------------------------------+
```

## 2. Contact / Enquiry Page

Purpose: Capture a valid public enquiry.

Primary user: Visitor.

Key sections/components:

- Intro text
- Contact form
- CAPTCHA widget placeholder
- Submission CTA

CTAs:

- Submit enquiry

Validation/error states:

- Required field errors
- Invalid email
- Missing consent
- CAPTCHA failure
- Submission failure fallback message

Accessibility notes:

- Labels tied to inputs
- Error text announced clearly
- Logical tab order

Responsive/mobile notes:

- Single-column layout
- Large touch targets

```text
+------------------------------------------------------+
| Page Title: Contact CandleCraft Academy              |
+------------------------------------------------------+
| Short intro text                                     |
+------------------------------------------------------+
| Name *                                               |
| Email *                                              |
| Phone                                                |
| Interest Area * [Pottery/Knitting/Both/Unsure]       |
| Subject                                              |
| Message *                                            |
| Consent to contact * [ ]                             |
| CAPTCHA widget                                       |
| [Submit Enquiry]                                     |
+------------------------------------------------------+
| Inline errors appear below affected fields           |
+------------------------------------------------------+
```

## 3. Contact Form Success State

Purpose: Confirm the enquiry was submitted successfully.

Primary user: Visitor.

Key sections/components:

- Success headline
- Short confirmation text
- Return CTA

CTAs:

- Back to home

Accessibility notes:

- Success message should be announced clearly

Responsive/mobile notes:

- Keep content centered and concise

```text
+------------------------------------------------------+
| Success                                              |
| "Thanks, your enquiry has been sent."                |
| "We will get back to you soon."                      |
| [Back to Home]                                       |
+------------------------------------------------------+
```

## 4. Admin Login Page

Purpose: Authenticate admin users.

Primary user: Admin.

Key sections/components:

- Login form
- Error message region

CTAs:

- Log in

Validation/error states:

- Missing fields
- Invalid credentials

Accessibility notes:

- Password field properly labeled
- Error summary clear and keyboard reachable

Responsive/mobile notes:

- Centered card layout

```text
+----------------------------------------------+
| Admin Login                                  |
+----------------------------------------------+
| Email / Username                             |
| Password                                     |
| [Log in]                                     |
| Error message area                           |
+----------------------------------------------+
```

## 5. Admin Dashboard / Message Inbox

Purpose: Show incoming enquiries and allow quick triage.

Primary user: Admin.

Key sections/components:

- Admin header
- Status filters
- Message table/list
- Quick status indicators

CTAs:

- Open message
- Filter by status
- Log out

Validation/error states:

- Empty inbox state
- Filter with no results

Accessibility notes:

- Table headers or list semantics should be clear
- Keyboard access to filters and row links

Responsive/mobile notes:

- Collapse table into stacked cards on smaller screens

```text
+------------------------------------------------------+
| Admin Header                     [Logout]            |
+------------------------------------------------------+
| Filters: [All] [New] [In Progress] [Resolved] [Spam] |
+------------------------------------------------------+
| Name | Interest | Submitted | Status | Action        |
| Ana  | Pottery  | Today     | New    | [Open]        |
| Ben  | Both     | Yesterday | InProg | [Open]        |
+------------------------------------------------------+
| Empty state if no messages                           |
+------------------------------------------------------+
```

## 6. Message Detail / Review Page

Purpose: Let admin read and manage an enquiry.

Primary user: Admin.

Key sections/components:

- Back to inbox link
- Full message details
- Status update control
- Admin notes field
- Save action

CTAs:

- Save changes
- Back to inbox

Validation/error states:

- Save failure
- Invalid status or notes handling

Accessibility notes:

- Form controls labeled
- Readable sections and heading structure

Responsive/mobile notes:

- Single-column detail layout on small screens

```text
+------------------------------------------------------+
| [Back to Inbox]                                     |
+------------------------------------------------------+
| Message Detail                                      |
| Name:                                               |
| Email:                                              |
| Phone:                                              |
| Interest Area:                                      |
| Subject:                                            |
| Submitted At:                                       |
| Consent:                                            |
+------------------------------------------------------+
| Message Body                                        |
| --------------------------------------------------  |
| full enquiry text                                   |
+------------------------------------------------------+
| Status [new v]                                      |
| Admin Notes                                         |
| [Save Changes]                                      |
+------------------------------------------------------+
```
