Landing Page Prompt

Create a complete, self-contained index.html for ClearWeek, a fictional weekly planning app. Return only HTML with inline CSS and JavaScript. It must run by opening the file directly, without dependencies, external assets, a server, API keys or a build step. Use a calm productivity aesthetic: pale mint #e8f3ed, dark forest #173d32, cream #fffdf7 and a coral #ee795f accent. Use system sans-serif typography, generous spacing, fine borders and softly rounded cards. Build a responsive header, hero, interactive product preview, three benefits, pricing, FAQ and footer. Hero copy: “A clearer week starts with one small plan.” Supporting copy: “Turn scattered tasks into a realistic Monday-to-Sunday rhythm.” Primary CTA: “Try the local demo”. Secondary CTA: “See pricing”. Benefits are “See the whole week”, “Keep today realistic” and “Notice what got done”, each with a short concrete explanation. The preview and primary CTA must open the same functional planner dialog for 19–25 October 2026. Seed it with “Draft project outline” on Monday, “Review pull request” on Tuesday and “Plan next week” on Friday. Users can add a task with a day, mark it complete, delete it, and filter between All and Incomplete. Display a completed-task count. Use safe text rendering for task names. Save state in localStorage with a ClearWeek-specific key and gracefully continue in memory if storage is unavailable. Include a reset control that requires a second confirmation click before restoring the three seed tasks. Pricing has Free at $0 and Plus at $8 monthly or $72 yearly. A monthly/yearly toggle updates the Plus price and its billing label. Both plan buttons open the local demo and clearly say that no account or payment is created. Do not add a pretend checkout. Provide four working FAQ disclosures covering local storage, offline use, pricing and the fictional nature of the product. Finish with “ClearWeek is a fictional product demo. Tasks stay in this browser.” Use subtle button transitions and section reveals, honoring prefers-reduced-motion. Make navigation, dialog focus, Escape, forms and all controls accessible by keyboard. On narrow screens, present planner days as a readable vertical list. Avoid horizontal page overflow.