Made for midcode

Do an accessibility pass on this page and fix what you find. Check and fix: - Structure: one h1, headings in order, landmarks (header, nav, main, footer), lists marked up as lists. - Names: every link and button says where it goes or what it does. Icon-only buttons get an accessible name. Images that carry meaning get alt text; decorative ones get an empty alt. - Forms: every field has a visible label tied to it, errors are in text next to the field, and the right input types and autocomplete values are set. - Key

Add a dark theme to this site that follows the visitor's system setting. How to do it: - Find the colors the site uses and name them as theme tokens (background, surface, text, muted text, line, accent). If the project uses Tailwind 4, define them in @theme and use those classes; do not scatter dark: variants over every element. - The dark set is not the light one inverted. Background near black but not pure black, surfaces a step lighter, text off-white, lines as low-opacity white. Keep the accent, adjusted if it

Build the landing page for this product: [one sentence about what it is and who it is for]. Before writing code, decide and tell me in three lines: the one thing the page has to make a visitor believe, the visual direction (light or dark, one accent color, the typeface roles), and the sections in order. Then build it. What I care about: - A real point of view. One accent color used sparingly, a clear type scale (large tight headlines, comfortable body), generous space. No gradient text, no emoji, no stock "truste

Add motion to this page, with restraint. The page should feel alive, not animated. What to add: - Interactive states: hover and pressed on links, buttons and cards. A color or opacity change on hover, a scale of 0.96 on press. 150 ms, ease-out, and name the properties (never transition all). - One entrance for the top of the page: the headline, the text under it and the buttons fade in and rise a few pixels, one after another, about 80 ms apart. It runs once. - Cards that link somewhere can lift a pixel or two on

Do a polish pass on the element I selected. Keep its content and its structure. Change how it is finished. Go through these in order and fix what is off: 1. Spacing: one rhythm. Related things closer, unrelated things further apart, and the same gap for the same relationship everywhere. 2. Type: a clear order of sizes and weights, tight line height on headings (about 1.1), comfortable on body (1.5 to 1.6), slightly negative tracking on large headings, text-balance on headings and text-pretty on descriptions, tabul

Make this page work well from 360 to 1440 pixels wide. Look at it at 360, 390, 768, 1024 and 1440 and fix what breaks: - Nothing scrolls sideways. Find what is wider than the screen and fix that element, not the page's overflow. - Columns stack in reading order. Grids go to one column on a phone unless the items are small. - Text sizes step down on small screens so headlines break in good places. No single word alone on a last line. - Anything you can tap is at least 44 pixels tall, with space between neighbors. -