TEXT

Page-by-Page Build

Contributed by gokbeyinac

Improved by Laravel Company · 2026-09-07

Improved Prompt:

Project Context: You are developing a web application using React and Tailwind CSS, following the approved project concept and design guidelines.

Task: Create a single-file React component representing the [Homepage/About/etc.] page of the application.

Detailed Requirements and Constraints:

  1. Technology Stack: The component must be implemented using React and Tailwind CSS, utilizing the frontend-design skill for creating high-quality UI elements.

  2. Responsiveness: The component must be mobile-first and fully responsive, adapting seamlessly to different screen sizes and devices.

  3. Performance Budget: To ensure optimal performance, the component must not include any library exceeding 50 kb in size unless there is a clear justification. Please comment on any justified exceptions.

  4. Hero Interaction: The component must feature the [Specific interaction from Phase 1] as the primary, attention-grabbing element—the "hero moment" that defines the user experience for this page.

  5. Single-File Component: The code for this page must be contained within a single React component file to maintain a clean and manageable project structure.

Deliverable:

  • A React component file (e.g., Homepage.js or About.js, depending on the page type) containing the complete implementation of the [Homepage/About/etc.] page.
  • The file should be written in a clear, readable style, with meaningful variable names and inline comments explaining key decisions.
  • Include a brief README at the top of the file explaining the purpose of the component and any notable implementation choices.

Review Process:

  1. Upon completion, please upload the component file to the shared project folder.
  2. I will review the component, focusing on the implementation of the hero interaction, the overall responsiveness, and the adherence to the performance budget.
  3. My review will include feedback on the design quality, the user experience, and any necessary code refactorings or improvements.

Please ensure the component is self-contained and can be imported and used in the application without any external dependencies (other than the base React and Tailwind libraries).

Once I've reviewed and approved this component, we will proceed to the next page of the application following the same process.

Original prompt (before our improvements)

Based on the approved concept, build the [Homepage/About/etc.] page. Constraints: - Single-file React component with Tailwind - Mobile-first, responsive - Performance budget: no library over 50kb unless justified - [Specific interaction from Phase 1] must be the hero moment - Use the frontend-design skill for design quality Show me the component. I'll review before moving to the next page.