Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
* text=auto eol=lf

*.bat text eol=crlf
*.cmd text eol=crlf
*.ps1 text eol=crlf
*.png binary
*.jpg binary
*.jpeg binary
*.gif binary
*.ico binary
*.zip binary
*.gz binary
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,4 @@ next-env.d.ts
/.wrangler/
/outputs/
/work/
/moodlia-sites-*.tar.gz
3 changes: 3 additions & 0 deletions .impeccable/config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"buildPath": "code"
}
86 changes: 86 additions & 0 deletions .impeccable/critique/2026-08-29T23-33-53Z__app-page-tsx.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
---
target: MoodlIA public homepage
total_score: 26
max_score: 32
na_heuristics: 7,10
p0_count: 0
p1_count: 2
timestamp: 2026-08-29T23-33-53Z
slug: app-page-tsx
---
# Design Health Score

| # | Heuristic | Score | Key issue |
|---|---|---:|---|
| 1 | Visibility of system status | 3/4 | The decorative playhead can resemble a loading indicator. |
| 2 | Match between system and real world | 4/4 | Teaching-first, human, outcome-oriented language. |
| 3 | User control and freedom | 3/4 | Mobile removes primary navigation and direct contact. |
| 4 | Consistency and standards | 4/4 | Highly cohesive editorial system. |
| 5 | Error prevention | 3/4 | Low-risk surface with explicit actions. |
| 6 | Recognition rather than recall | 3/4 | The three routes are clear, but CLI, Core, and Skills need interpretation. |
| 7 | Flexibility and efficiency | n/a | Not applicable to this Persuade surface. |
| 8 | Aesthetic and minimalist design | 3/4 | Authored, focused composition; density and page length keep it from a 4. |
| 9 | Error recognition and recovery | 3/4 | No error-prone workflow; standard links and meaningful alternatives are present. |
| 10 | Help and documentation | n/a | Not applicable as an operational heuristic; contact is assessed as conversion. |
| **Total** | | **26/32** | **Good — 81%** |

# Design Specificity Verdict

The homepage is unmistakably authored for MoodlIA. The Helpful Selection system—warm paper, ballpoint rules, three numbered routes, educator photography, and a human-help ending—could not be transferred unchanged to an unrelated SaaS product.

The CLI detector returned zero findings for `app/page.tsx`. Correct browser inspection at `http://localhost:3000/` confirmed loaded CSS, fonts, and images; no console errors, failed requests, or horizontal overflow at 1440×1000 or 390×844. Eleven overlay warnings from an initial internal workerd port are invalid and were discarded.

# Overall Impression

The visual foundation is strong, memorable, and mature. The largest opportunity is not more decoration: it is making the three-way promise easier for a nontechnical visitor to act on, while bringing accessibility and mobile conversion up to the quality of the art direction.

# What Is Working

- The desktop first viewport establishes a strong promise, highlighted third line, concise explanation, clear CTA, and distinctive educator collage.
- The three colors, route numbers, ruled lists, photography, and paper material form a disciplined product-specific language without generic cards.
- The copy is humane and evidence-based, and the human-help panel creates a strong ending without fabricated proof.
- Accessibility intent is strong: skip link, landmarks, one H1, visible focus, reduced motion, meaningful alternatives, and equivalent English and Spanish content.

# Priority Issues

## [P1] Contrast and touch targets miss the stated accessibility floor

White CTA text on coral measures 3.47:1; coral and ochre text on cream measure about 3.11–3.12:1, below WCAG AA for normal text. EN and ES measure 40×38 px on desktop and 36×38 px on mobile, below the explicit 44 px target. Darken text-bearing coral and ochre treatments and make both language targets at least 44×44. Suggested command: `$impeccable audit`.

## [P1] The current static export cannot be published

`npm run export:static` still asserts the old title “One Moodle. Three ways forward.” while current metadata uses “Make Moodle work for you.” The rendered page is healthy, but this stale delivery gate blocks future publication. Synchronize exporter assertions with current metadata. Suggested command: `$impeccable harden`.

## [P2] Human help is buried on mobile

Below 620 px, both header contact and primary navigation disappear. The email route returns only around y=5678 on a roughly 6670 px page. Preserve a compact help route in the mobile hero or header. Suggested command: `$impeccable adapt`.

## [P2] The homepage reveals technical products too early

The first route exposes four products plus “See how it helps.” CLI, Moodle Core CLI, and Skills do not reveal teacher/admin fit on their own. Recommend one starting point per route or add concise audience/prerequisite cues, leaving the complete catalog to the route page. Suggested command: `$impeccable distill`.

## [P2] The design contract is split

`DESIGN.md` defines The Helpful Selection, while the homepage surface brief still mandates Learning Automata, a crank, and no automatic animation. Update the surface brief and decide whether the playhead clarifies sequence or merely resembles progress. Suggested command: `$impeccable document`.

# Persona Red Flags

- **Jordan, first-time visitor:** understands the three needs but cannot confidently classify CLI, Core, and Skills or choose among five local actions.
- **Riley, deliberate stress tester:** immediately finds the brief/implementation contradiction and stale static-export assertion.
- **Casey, distracted mobile visitor:** receives a clear hero, but the distinctive collage barely begins at the bottom of the first viewport and direct help disappears until the end.
- **Educator or Moodle site leader:** sees product names but cannot immediately distinguish self-service teaching tools from administrator-installed or command-line infrastructure.

# Minor Observations

- Section-photo hover lift suggests clickability although the figures are not links.
- Some mobile captions fall to about .56rem.
- Three hero images are priority-loaded and repeated later; verify real mobile network cost.
- Unicode arrows are used despite DESIGN.md discouraging glyphs as icon substitutes.
- The page is about 5436 px tall on desktop and 6670 px on mobile, delaying the photographic peak and help on small screens.

# Questions to Consider

- If MoodlIA promises three ways, should the homepage also ask a visitor to classify ten projects?
- Is “Find your starting point” the true primary action, or is the three-route rail the more distinctive decision mechanism?
- Should human help remain available in every viewport instead of working mainly as the ending?
- Does the playhead clarify sequence, or does it resemble loading without representing state?
Loading
Loading