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. - Keyboard: everything works with Tab, Enter, Space and Escape, in a sensible order, with a clearly visible focus ring (focus-visible) on every control. - Color: text contrast of at least 4.5 to 1 (3 to 1 for large text), and nothing said by color alone. - Motion: anything that animates respects prefers-reduced-motion. Use the platform first: a real button, a real link, a real label. Add ARIA only where no native element says it. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. Report what you fixed, and what you could not fix without a decision from me.

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 gets too loud. - Shadows mostly disappear on dark: replace them with a faint light ring where a surface needs an edge. - Check contrast for body text, muted text and text on the accent. Body text at least 4.5 to 1. - Images and logos that assume a light background get a treatment, or a note to me if they need new files. Do not add a theme switcher unless I ask. Do not change the layout. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. List the tokens you created with their light and dark values.

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 "trusted by" row unless I gave you names. - Real words. Write the copy for this product, specific and plain. No lorem ipsum and no "revolutionize". - Show the product. Where a screenshot would go, draw a small piece of the interface in markup (a list, a card, a chart made of bars) instead of a gray box. - Details: balanced headlines (text-balance), body text capped around 65 characters, concentric corner radii, a soft ring or shadow instead of a hard border, a pressed state on buttons. - It works at 390, 768 and 1440 pixels wide, with no horizontal scrolling. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. When you are done, list the sections you made and anything you were unsure about.

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 hover. What not to add: - Nothing that loops, nothing that follows the scroll, no parallax. - No animation on anything the visitor does repeatedly. - No entrance on every section. Everything respects prefers-reduced-motion: with it on, states still change, and nothing moves. Use CSS only (Tailwind classes and, if you need keyframes, one small block in the stylesheet). No animation library unless the project already has one. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. List each animation you added, where, and how long it runs.

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, tabular numbers where digits line up. 3. Surfaces: nested corners are concentric (outer radius = inner radius + padding). Borders that only fake depth become a soft ring or a layered shadow. Dividers stay borders. 4. States: every link and button has hover, focus-visible and pressed (a scale of 0.96 on press). Transitions name the properties they change and stay under 200 ms. 5. Alignment: icons sit optically centered next to their text, and their stroke matches the text weight. Do not add new sections, new colors or decoration. If something needs a decision from me, ask instead of guessing. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. Finish with a short list of what you changed and why.

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. - Navigation: links that do not fit go behind a menu or are trimmed to the essential ones. - Images and embeds keep their proportions and never overflow. Write mobile first: the bare classes are the phone, and md: and lg: add the larger layouts. Do not hide content on phones that someone would need there. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. Tell me what you changed at each width.