Eclipse Midnight Pulse Events generated image asset.
Prompt
Only code in HTML/Tailwind in a single code block. Any CSS styles should be in the style attribute. Start with a response, then code and finish with a response. Don't mention about tokens, Tailwind or HTML. Always include the html, head and body tags. Use Iconify Solar Linear icons for javascript, 1.5 strokewidth, use <iconify-icon> instead of full SVG code. Unless style is specified by user, design in the style of Linear, Stripe, Vercel, Tailwind UI (IMPORTANT: don't mention names). Checkboxes, sliders, dropdowns, toggles should be custom (don't add, only include if part of the UI). Be extremely accurate with fonts. For font weight, use one level thinner: for example, Bold should be Semibold. Titles above 20px should use tracking-tight. Important: do not use px or em values for font sizes. Minimum font size should be xs. Make it responsive. Avoid setting tailwind config or css classes, use tailwind directly in html tags. Don't put tailwind classes in the html tag, put them in the body tags. Do this in less than 300 lines of code.
Create a brand-new landing page from scratch.
Generation mode: image
Target aspect ratio: 16:9
Prompt type: Default
User creation prompt: change texts, names, numbers. no plagia. inspire from the visual in the reference.
Image references attached: DDEEB7FE-3B03-4C72-90B4-C7A0064FB99D_1_105_c.jpeg
Selected skills to apply in this generation:
Skill: Container Lines
Container Lines skill:
- Add vertical container-size guide lines to key sections.
- Add mini squares in line corners/endpoints for technical detail styling.
- Keep these guides subtle so content readability remains strong.
Requirements:
- Return output in exactly this structure: short response, one code block, short response.
- Put only the document code in a single code block.
- Ensure the code block contains a full document with html, head, and body tags.
- Include <script src="https://cdn.tailwindcss.com"></script> in head so utility classes render in standalone HTML.
- If you use <iconify-icon>, include <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script> in head.
- Use Tailwind utility classes directly on elements.
- Do not put Tailwind classes on the html tag; put them on body and nested elements.
- Keep CSS styles in style attributes only (no style tag).
- Keep JavaScript inline only when needed.
- Preserve responsiveness on desktop and mobile.
- Build a complete, production-ready page (avoid minimal placeholder layouts).
- Keep semantic HTML and accessible labels.
- Use Iconify Solar Linear icons for JavaScript-driven icons with 1.5 stroke width and <iconify-icon> tags (no inline SVG).
- Use font-size utility classes only; do not use px or em for font sizes and never go below text-xs.
- Headings larger than 20px must use tracking-tight.
- Use one level thinner font weight than default emphasis choices.
- If style is not specified, use a premium product-UI visual style with clean spacing and precise typography.
- Do not mention tokens, Tailwind, or HTML in surrounding response text.
- Keep copy original and avoid explicit brand copying.
