Apply Unstuck design system to live site

[simongonzalezdc]

Summary

• simplifies the Unstuck landing page into a product-first prompt surface
• applies the blue apatite Unstuck design system to landing and chat
• preserves runtime PostHog config and deploy-time key handling from main

Verification

• node --test EF-COACH/live-demo/test/*.test.mjs
• npm test
• git diff --check

Deploy

After merge, deploy /docker/unstuck-coach-live/app on the VPS and verify https://unstuck.kyanitelabs.tech/ plus /chat/.

---

^{Need help on this PR? Tag @codesmith with what you need. Autofix is disabled.}

Summary by CodeRabbit

• Style

  • Landing page redesigned with updated color palette, typography system, and visual components.

• Refactor

  • Simplified page layout and navigation structure.
  • Streamlined landing page by removing advanced interactive features and demo functionality.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR transitions the Unstuck Coach landing page and live demo interface to a simplified content structure and unified design system. The landing page removes feature discovery and complex navigation in favor of a focused hero-to-form-to-benefits flow. A new CSS token system replaces the prior palette and typography, and that system is applied throughout the chat demo components and Hostinger deployment.

Changes

Landing page redesign and design system migration

Layer / File(s)	Summary
Landing page content and behavior simplification EF-COACH/landing/app.js, EF-COACH/landing/index.html	Landing page HTML reduced to head metadata, simplified header/nav, hero section with updated CTA, stuck sentence form, three-step "How it works", use case section, privacy messaging, and footer. JavaScript reduced to nav toggle and sample-input population; panel deck, review navigation, demo rendering, and copy controls removed.
Design system tokens and global styling EF-COACH/live-demo/public/styles.css (lines 3–108)	CSS custom properties in :root replaced with apatite palette (--apatite-950 through --apatite-50), font variables (--font-sans, --font-mono), typography scale (--step--1 through --step-3), and motion/easing tokens. Old palette (--taste-*, --gold, --magenta, --cyan, --lime, --orange) and --editorial removed. Global html/body styling updated with new tokens and background/gradient/font-family values. Focus-visible outline and selection colors refreshed.
Component styling refresh with new tokens EF-COACH/live-demo/public/styles.css (lines 117–622)	Chat header, landing link, work surface, and turn cards restyled with apatite borders/backgrounds/shadows. Button, textarea, and composer control colors and hover states updated. Coach dock and demo-limits cards re-themed. Energy visualization, status indicators, small-button grouping, responsive breakpoints, and reduced-motion handling adjusted to use new tokens and structure.
Hostinger template and test validation EF-COACH/live-demo/scripts/build-hostinger-compose.mjs, EF-COACH/live-demo/test/chat-ui.test.mjs, EF-COACH/live-demo/test/compose.test.mjs, EF-COACH/live-demo/test/server.test.mjs	Hostinger compose template updated with new design token values and styling. Chat-ui test assertions updated to expect new --apatite-* tokens and exclude old palette variables. New compose test validates design tokens are present in built HTML. Server test updated to match new landing page text fragments.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is missing the required Empower Orchestrator checklist section defined in the template, making it incomplete against the repository's standards.	Add the Empower Orchestrator checklist section with the four required items and checkboxes as specified in the description_template.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures the main objective of the changeset—applying the Unstuck design system to the live site—and clearly summarizes the primary change.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/unstuck-design-system

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d3b1b5818a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Keep pasted prompts out of query strings

When someone enters or selects a stuck sentence and clicks “Open the coach,” this GET form sends the text as /chat/?q=.... The chat client does not consume q, while the prompt is now exposed in browser history, proxy/access logs, and any page analytics that capture the full URL (the existing tracker records window.location.href as $current_url). This contradicts the new privacy promise that analytics are not used for prompt storage and can leak sensitive pasted messages; pass the draft without putting it in the URL.

Useful? React with 👍 / 👎.