BC
backham chakma

Job Detail Screen - Copy this React, Tailwind Component to your project

Create a job detail screen for a mobile application that connects workers with home repair or renovation jobs. The design should closely resemble the structure below: Header Section: At the top, include a status bar showing time (9:41) and indicators for signal, Wi Fi, and battery. A back arrow icon should be placed in the top left for navigating back to the previous screen. The three dots menu and bookmark icons should be placed in the top right. Behind the header, display a background image showing a house or relevant visual. Job Title Section: Title the job "Repainting the whole house" in bold. Below the title, create two text fields: Owner name with the placeholder name "Joshep Romlan." Home location, showing "Colomadu, Surakarta" with a location pin icon next to the location text. Job Summary Section: Include a rectangular card with rounded corners, containing two parts: The applied price: "$24.00/day" with a small money icon. Number of applicants: "52 People apply" next to a people icon. Job Detail Section: Title this section "Job Detail" with bold text. Provide a descriptive paragraph below, explaining the job in detail (e.g., "This job is to repaint all parts of the house, including walls, ceilings, and trim. The stages include..."). Ensure the text is clean, easy to read, and appropriately spaced. Sample Photos Section: Title this section "Sample photo of the room." Below the title, create a horizontal scrolling row of 4 square images (thumbnails), showcasing sample images of rooms related to the job. Label the first image as "Kid's room." Action Buttons: At the bottom, include two action buttons: A black 'Message' button on the left with a bold white font for messaging the job owner. A green 'Apply this job' button on the right for applying to the job. Color Scheme: Primary colors: Black, white, and green (#57A773) for action buttons. Text should be clear and have enough contrast with the background for readability. Fonts: Use bold fonts for titles and headers, and regular fonts for descriptive text. Icons: Use relevant icons for "location," "money," and "people" wherever indicated, ensuring they align with the design.

Prompt
Component Preview

About

JobDetailScreen - View job details like title, owner, location, price, and applicants. Built with React and Tailwind. Copy code today!

Share

Last updated 1 month ago