▸case-01 Can you design a React component and styling layout for an aerospace launch landing page? The section should put a full-viewport rocket photo at the core, overlaid with dark readability gradients, subtle structural grid markers, and translucent metric panels anchored along the bottom edge rather than centered over the image. Show me the complete component code with layout specs. | fail→fail | 25,902 | 27,717 | +7% | 1 | 1 | 0% | 5,907 | 7,063 | +20% | 0 | 0 | — |
▸case-02 I need a Tailwind HTML layout for a literary journal's long-form editorial article page featuring clean centered typography, drop caps, and comfortable reading line length without background imagery or overlay cards. How should this editorial text layout be structured? | pass→pass | 19,360 | 24,079 | +24% | 1 | 1 | 0% | 3,909 | 5,665 | +45% | 0 | 0 | — |
▸case-03 Design an e-commerce product catalog page grid for a luxury watch brand showcasing 12 items in a 4-column responsive product card thumbnail grid with pagination and filter sidebars. Provide the layout structure. | pass→pass | 20,031 | 26,699 | +33% | 1 | 1 | 0% | 4,214 | 7,038 | +67% | 0 | 0 | — |
▸case-04 Build a classic centered SaaS marketing hero section with a centered headline, subheadline, dual primary/secondary action buttons centered underneath, and a floating dashboard app screenshot preview card centered below the text. Provide the code. | pass→fail | 22,046 | 28,167 | +28% | 1 | 1 | 0% | 5,276 | 7,038 | +33% | 0 | 0 | — |
▸case-05 Create a Tailwind CSS layout for an architectural firm's flagship project showcase hero section. The team wants a bold visual look with a full-screen background photo of a modern skyscraper, but developers usually make button colors solid bright primary blue and center all text over the middle of the photo. How should the hero layout and typography be styled? | fail→pass | 23,542 | 28,083 | +19% | 1 | 1 | 0% | 5,083 | 7,063 | +39% | 0 | 0 | — |
▸case-06 Write a React layout component for a luxury electric vehicle reveal hero section. We want to overlay telemetry metrics and key specs directly over a full-bleed vehicle photo. Designers suggested using heavy dark solid card containers for each metric and 4 different neon accent colors (yellow, pink, green, cyan) for different metrics. What layout and container styling approach should be implemented? | fail→pass | 19,695 | 28,244 | +43% | 1 | 1 | 0% | 4,275 | 7,069 | +65% | 0 | 0 | — |
▸case-07 Provide a CSS/HTML layout structure for a marine conservation documentary website featuring a full-viewport underwater photography hero section. The client asked to ensure the dark text overlays stay legible without making the deep ocean photo look washed out or fully covered by black blocks. What overlay technique should be applied? | pass→pass | 19,328 | 25,257 | +31% | 1 | 1 | 0% | 4,302 | 6,705 | +56% | 0 | 0 | — |
▸case-08 Design a Tailwind CSS hero component for a luxury fashion house runway presentation site using a full-screen high-resolution portrait photograph. A junior designer suggested removing all grid lines and structural markers so the image looks completely borderless and unguided. How should the layout overlay structure be designed? | pass→pass | 20,407 | 26,436 | +30% | 1 | 1 | 0% | 3,910 | 6,452 | +65% | 0 | 0 | — |
▸case-09 Create a React hero component for an audiophile headphone launch page built around an immersive macro photograph of the driver mesh. We need to display the hero headline and a secondary quote box with acoustic testing metrics. Should both boxes be centered in a single middle stack or split across adjacent grid lanes? | pass→pass | 20,786 | 27,856 | +34% | 1 | 1 | 0% | 4,398 | 6,984 | +59% | 0 | 0 | — |
▸case-10 Write a CSS and JSX layout for a satellite mission overview page using a full-bleed orbital photograph. The team wants to know how top navigation should be integrated so it doesn't block the top portion of the cinematic space photograph. | pass→pass | 20,620 | 23,662 | +15% | 1 | 1 | 0% | 4,680 | 6,013 | +28% | 0 | 0 | — |
▸case-11 Build a UI component for a photo gallery exhibition hero page featuring an expansive architectural landscape photo. The marketing team suggested adding dynamic glowing animated sweeps, bright rainbow hover states, and multi-colored status badges across the screen. How should motion and hover effects be designed? | pass→pass | 19,400 | 29,049 | +50% | 1 | 1 | 0% | 3,893 | 7,048 | +81% | 0 | 0 | — |
▸case-12 Design an alpine outdoor brand hero section featuring a full-viewport summit photo. The design proposal includes three heavy solid white cards sitting in the middle of the photograph to display altitude, temperature, and wind speed. What card styling decision should replace these heavy solid white cards? | pass→pass | 10,273 | 7,909 | -23% | 1 | 1 | 0% | 1,752 | 2,301 | +31% | 0 | 0 | — |
▸case-13 Construct a React hero section for a penthouse residential tower page featuring a full-bleed dusk skyline background image. How should the dark gradient readability layers be structured across the viewport? | pass→pass | 19,860 | 27,482 | +38% | 1 | 1 | 0% | 4,071 | 7,030 | +73% | 0 | 0 | — |
▸case-14 Develop a CSS layout for a high-performance network security appliance product page with a full-screen hardware render background. The team wants to overlay structural guide lines. What specific visual details should be added to the guide lines to give them product-grade structure? | fail→fail | 25,907 | 27,598 | +7% | 1 | 1 | 0% | 5,691 | 7,047 | +24% | 0 | 0 | — |
▸case-15 We are rebranding an enterprise AI platform landing page to an image-first cinematic layout with a full-viewport neural visualization image. The team wants to put glowing solid bright green CTA buttons and bright orange stat badges over the background. What color palette constraints should be applied? | fail→pass | 17,416 | 11,396 | -35% | 1 | 1 | 0% | 2,861 | 2,909 | +2% | 0 | 0 | — |
▸case-16 Design a resort landing hero section in HTML/CSS with a full-bleed aerial coast photo. Should the main headline and booking CTA group be centered vertically in the hero or anchored near the bottom edge? | pass→pass | 18,990 | 27,551 | +45% | 1 | 1 | 0% | 4,332 | 6,883 | +59% | 0 | 0 | — |
▸case-17 Write a Tailwind React hero layout for a track car reveal page featuring a wide action photo. We want to display engine specs alongside a customer testimonial. How should the layout organize these two content blocks on top of the image grid? | fail→fail | 18,449 | 27,185 | +47% | 1 | 1 | 0% | 3,908 | 7,041 | +80% | 0 | 0 | — |
▸case-18 Create a React hero component for an industrial robotics company with a full-screen factory photo background. The team wants to know what technical atmosphere overlays can be added quietly to enhance the product-grade feel without obscuring the photograph. | fail→pass | 20,697 | 27,245 | +32% | 1 | 1 | 0% | 4,551 | 7,041 | +55% | 0 | 0 | — |
▸case-19 Design a luxury yacht charter hero section with a full-screen ocean background. A team member suggested making the background grid invisible and using bright yellow buttons. What corrections should be made to align with an image-first grid design system? | fail→pass | 14,213 | 11,053 | -22% | 1 | 1 | 0% | 2,419 | 2,767 | +14% | 0 | 0 | — |
▸case-20 Develop a layout component for a quantum processor reveal page featuring a full-bleed hardware image background. How should text entrances and scroll animations behave? | fail→pass | 25,580 | 29,586 | +16% | 1 | 1 | 0% | 5,398 | 7,024 | +30% | 0 | 0 | — |
▸case-21 Write a CSS and React hero layout for a high-end gaming console page using a full-viewport render. The designer asked whether content should dictate image size or if image dominance should dictate content density. What principle should govern the layout scale? | pass→pass | 22,981 | 26,254 | +14% | 1 | 1 | 0% | 5,019 | 7,044 | +40% | 0 | 0 | — |
▸case-22 Create a Tailwind component for an autonomous flight drone product page with a full-viewport atmospheric background. The current layout has 8 heavy metric boxes scattered across the center of the image. How should content density and layout structure be optimized? | fail→pass | 21,146 | 22,941 | +8% | 1 | 1 | 0% | 4,807 | 5,962 | +24% | 0 | 0 | — |