From c61cd06c2c5422d36548d7a6c7c984e74edfa4c5 Mon Sep 17 00:00:00 2001 From: Kato Date: Fri, 4 Sep 2026 18:05:01 +0000 Subject: [PATCH] Render user description as HTML instead of plain text --- .impeccable/config.json | 1 + .../mocks/decision/direction-payload.json | 66 ++++++++++++++++++ .impeccable/surface-briefs/index.html.md | 18 +++++ PRODUCT.md | 67 +++++++++++++++++++ css/styles.css | 1 + js/main.js | 2 +- 6 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 .impeccable/config.json create mode 100644 .impeccable/mocks/decision/direction-payload.json create mode 100644 .impeccable/surface-briefs/index.html.md create mode 100644 PRODUCT.md diff --git a/.impeccable/config.json b/.impeccable/config.json new file mode 100644 index 0000000..7030e9a --- /dev/null +++ b/.impeccable/config.json @@ -0,0 +1 @@ +{"buildPath": "code"} diff --git a/.impeccable/mocks/decision/direction-payload.json b/.impeccable/mocks/decision/direction-payload.json new file mode 100644 index 0000000..7f6d73c --- /dev/null +++ b/.impeccable/mocks/decision/direction-payload.json @@ -0,0 +1,66 @@ +{ + "title": "Redesign direction for Paraguay SRL LLC website", + "subtitle": "Persuade mode — landing page to convert visitors to Telegram group members", + "direction": { + "id": "6", + "title": "Operate-B Normalled Jackfield", + "thesis": "A resumable configuration surface drawn as a jackfield normalling schedule: numbered lanes on unlit black glass where every item is tied to its default by an amber link line that is unbroken, cross-ticked, gapped, doubled or ended in an open ring.", + "palette": "Black glass ground, one signal amber for every mark; foreign photos keep their own colour inside an amber hairline frame with a filled amber caption bar", + "materials": "One condensed grotesque: small-cap legends, upright prose. Rank is inversion, the dominant block knocked dark out of a solid amber plate, one per screen", + "first_viewport": "A backlit schedule taped inside a machine-room door: amber lanes numbered 01 to 48 on black glass, a solid tie line running to each default, and one line interrupted by a neat hand-inked gap where the operator broke the normal and left it broken. The page begins with the visitor's journey mapped against the community's offerings.", + "signature_interaction": "Lanes drift one hairline per second under static type; narrow widths drop lanes, never the edge gutters, and a broken link line never animates closed.", + "cross_surface_reach": "An endless lane grid drifts under a fixed left legend strip; dark gutters at both edges mean nothing spans full width, and panels snap to numbered lanes.", + "honest_risk": "This is a highly distinctive system rarely seen on marketing sites; it may feel unfamiliar to visitors expecting conventional landing page patterns.", + "seed_key": "dec8ae0b", + "raise": "Added urgency cues (Telegram blue accent) for the primary CTA, and softened the rigid grid with subtle gradients on the hero background to maintain regional identity (Paraguay flag colors hint).", + "challenger_decisions": [ + { + "id": "1", + "title": "Provenance Ribbon", + "verdict": "declined", + "kept": "Temporal sequencing of information (left-to-right flow of benefits)", + "reason": "Too museum-like for a conversion-focused landing page" + }, + { + "id": "2", + "title": "Textiles Weave Drape", + "verdict": "declined", + "kept": "None", + "reason": "Transformative animation would distract from clear value proposition" + }, + { + "id": "3", + "title": "Wiener Werkstätte Showroom", + "verdict": "competitive", + "kept": "Strict grid structure, square-unit borders framing content blocks", + "reason": "The black-and-white lattice is too austere; we kept the grid structure but added warmth with Paraguay flag colors" + }, + { + "id": "4", + "title": "Boarding Pass & Gate Board", + "verdict": "competitive", + "kept": "Priority-based ordering of information, live state updates", + "reason": "Ephemeral document aesthetic works for the Telegram join flow but too narrow for full site" + }, + { + "id": "5", + "title": "Nixie Tube Laboratory Counter", + "verdict": "declined", + "kept": "None", + "reason": "Technical instrumentation aesthetic misaligned with business formation theme" + } + ], + "buildPath": { + "value": "code", + "toggle": true + }, + "canonCard": { + "title": "Category Standard (Persuade Landing Page)", + "thesis": "A classic high-conversion landing page with hero, social proof, features grid, and clear CTA", + "palette": "Navy background with gold accents, clean white cards", + "materials": "Inter typeface, rounded cards, Telegram blue primary button", + "first_viewport": "Full-bleed navy hero with headline, sub-headline, two CTA buttons, and stat badges below", + "honest_risk": "Familiar and safe; may blend into category noise without distinctive brand voice" + } + } +} diff --git a/.impeccable/surface-briefs/index.html.md b/.impeccable/surface-briefs/index.html.md new file mode 100644 index 0000000..0dfa1d4 --- /dev/null +++ b/.impeccable/surface-briefs/index.html.md @@ -0,0 +1,18 @@ +# Surface Brief: index.html + +**Primary target**: index.html +**Visitor mode**: Persuade +**Audience**: German/English-speaking expats and international professionals forming Paraguay LLC/SRL +**Job**: Understand value of community, join Telegram group +**Action**: Click Telegram CTA +**Proof**: Real community benefits (tax, banking, ERP guidance) +**Constraints**: Not legal advice; not a government service; community-first + +**Chosen direction**: Operate-B Normalled Jackfield (seed key: dec8ae0b) +**First viewport**: Backlit schedule with numbered lanes on black glass; amber tie lines showing status of each benefit vs default; primary Telegram join CTA as a highlighted amber lane +**Signature interaction**: Lanes drift one hairline per second; Telegram CTA lane has a distinct open-ring state for active conversion +**Memory moment**: The visitor sees their journey mapped against community offerings as amber lanes with clear status + +**Unresolved decisions**: None + +**FINISH**: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance diff --git a/PRODUCT.md b/PRODUCT.md new file mode 100644 index 0000000..346fdc4 --- /dev/null +++ b/PRODUCT.md @@ -0,0 +1,67 @@ +# Product + + + +## Platform + +web + +## Stack + +Existing static HTML/CSS website. + +## Users + +German and English-speaking expats and international business professionals living in Paraguay who are forming or considering forming a Paraguayan LLC (Sociedad de Responsabilidad Limitada) or SRL for business operations, tax planning, or asset protection. + +## Product Purpose + +Paraguay SRL LLC is a community and resource hub focused on helping English/German speakers navigate Paraguay's business formation landscape. The product makes expert guidance on LLC/SRL formation, tax advantages, banking, legal compliance, and residency options accessible through a Telegram community and supporting website. Success means visitors understand what the community offers and feel confident joining. + +## Positioning + +This is a community-first resource — not a law firm or service provider — that offers peer-to-peer support and curated expert knowledge for English/German speaking professionals navigating Paraguay's corporate landscape. The mechanism is the Telegram group where members share real-time, practical experience with local systems. + +## Operating Context + +- Visitors arrive from international expat forums, relocation guides, or search results +- The first touchpoint is the website (index.html), which must quickly communicate value +- Visitors then join the Telegram group for ongoing support, Q&A, and updates +- Success is measured by conversion from website visitor to Telegram group member + +## Capabilities and Constraints + +**Capabilities:** +- Community-driven knowledge sharing on Paraguay business formation +- Expert guidance on LLC/SRL formation, tax strategy, banking, ERP systems +- Multilingual (German/English) support + +**Constraints:** +- Not a law firm — cannot provide binding legal advice +- Not a government service — official registration must be done through local providers +- Relies on member contributions and expert volunteers for content +- Must comply with Paraguay's regulatory environment + +## Brand Commitments + +- **Name:** Paraguay SRL LLC +- **Colors:** Navy (#0f172a), Gold (#f59e0b), Telegram Blue (#2AABEE) +- **Voice:** Professional, approachable, expert but not salesy +- **Assets:** Paraguay flag colors (red, white, blue) used subtly for regional identity + +## Evidence on Hand + +- Live website at `/root/paraguay/index.html` +- Telegram community as the primary engagement channel +- Section covers: Why Paraguay, LLC vs SRL comparison, discussion topics, testimonials + +## Product Principles + +1. **Clarity over cleverness** — business formation is complex; explanations should be precise and accessible +2. **Community-first** — peer experience and real-time Q&A are the core value, not static content +3. **Expert guidance, not legal advice** — distinguish between shared experience and binding professional services +4. **Multilingual accessibility** — serve both German and English speakers without favoring one + +## Accessibility & Inclusion + +No specific accessibility requirements established beyond WCAG 2.1 compliance. The site uses standard semantic HTML, responsive layout, and clear visual hierarchy. diff --git a/css/styles.css b/css/styles.css index 05e8ac4..15a119c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -106,6 +106,7 @@ a:hover { text-decoration: underline; } .detail-row:last-child { border-bottom: none; } .detail-label { font-weight: 600; font-size: .9rem; color: #4b5563; } .detail-value { font-size: .9rem; color: #1f2937; text-align: right; max-width: 60%; word-break: break-word; } +.detail-value-user-desc { font-size: .9rem; color: #1f2937; text-align: left; max-width: 100%; word-break: break-word; line-height: 1.6; } .modal-content h3 { margin-bottom: 24px; } .close-btn { position: absolute; top: 16px; right: 20px; font-size: 24px; cursor: pointer; color: #6b7280; } .username-display { padding: 12px 0; font-size: 1.1rem; font-weight: 700; color: var(--black); } diff --git a/js/main.js b/js/main.js index 585f693..1bd5331 100644 --- a/js/main.js +++ b/js/main.js @@ -326,7 +326,7 @@ function openUserDetailModal(user) { document.getElementById('user-detail-email').textContent = user.email || '-'; document.getElementById('user-detail-homepage').textContent = user.homepage || '-'; document.getElementById('user-detail-location').textContent = user.location || '-'; - document.getElementById('user-detail-description').textContent = user.Description || '-'; + document.getElementById('user-detail-description').innerHTML = user.Description || '-'; modal.classList.remove('hidden'); }