This README provides an overview of the features and UI of a simple product catalog mobile application, as visualized in the provided screenshots.
This application aims to display a list of products on launch and provide a detailed view upon user interaction.
Upon launching the application, users are presented with a scrollable list of products. Each item in this list provides a quick summary of the product:
- 🏷 Product Title: Clearly displays the name of the product.
- 📝 Product Description: Offers a concise description highlighting the key features or benefits of the product.
- 🖼 Product Image: Shows a representative image of the product for visual identification.
Visual Representation (Image 1 & 2):
The initial screens (as seen in Image 1 and Image 2) showcase this product listing functionality. Each row represents a single product with its image on the left and the title and a brief description on the right. Examples of products displayed include:
- Essence Mascara Lash Princess: A popular mascara known for volumizing and lengthening effects.
- Eyeshadow Palette with Mirror: A versatile range of eyeshadow shades with a built-in mirror.
- Powder Canister: A finely milled setting powder for makeup.
- Red Lipstick: A classic and bold choice for adding color to lips.
- Red Nail Polish: A rich and glossy red nail polish for vibrant nails.
- Dior J'adore: A luxurious and floral fragrance.
- Dolce Shine Eau de: A vibrant and fruity fragrance.
- Gucci Bloom Eau de: A floral and captivating fragrance.
- Annibale Colombo Bed: A luxurious and elegant bed frame.
- Annibale Colombo Sofa: A sophisticated and comfortable seating option.
Tapping on any of these listed products would navigate the user to the Product Details Screen.
When a user taps on a product from the list, they are taken to a dedicated screen containing more comprehensive information about that specific product. This screen includes:
- 🖼 Product Images (displayed using a gallery or carousel/pager layout): Multiple images of the product are displayed, likely in a horizontally scrollable gallery or a page-based carousel, allowing users to view the product from different angles or see different aspects. This is evident in Image 3 and Image 4, which show different views of the "Dolce Shine Eau de" perfume. The presence of pagination dots below the main image in these screenshots suggests a pager or carousel layout for displaying multiple images.
- 🏷 Product Title: The full name of the product is clearly displayed. (e.g., "Dolce Shine Eau de").
- 📝 Product Description: A more detailed description of the product is provided. (e.g., "Dolce Shine by Dolce & Gabbana is a vibrant and fruity fragrance, featuring notes of mango, jasmine, and blonde woods. It's a joyful and youthful scent.").
- ⭐ Product Rating (optional): Although not explicitly visible in the provided screenshots, this section would typically display an average star rating based on user reviews. The presence of empty star icons below the price in Image 3 and Image 4 indicates that a rating system is likely implemented but currently shows no rating.
- 🗂 Product Category: The category to which the product belongs is specified. (e.g., "Category: fragrances").
- 💰 Product Price: The price of the product is clearly stated. (e.g., "Price: $69.99").
- 📄 Product Description (Yes, repeat it): The product description is reiterated on this detailed screen, ensuring the user has all the necessary information.
Visual Representation (Image 3 & 4):
Images 3 and 4 provide an example of the Product Details Screen for "Dolce Shine Eau de". They showcase:
- A prominent image of the product (with different views shown across the two images, suggesting a carousel).
- The product title: "Dolce Shine Eau de".
- The category: "Category: fragrances".
- The price: "Price: $69.99".
- The (currently unrated) star rating.
- The detailed product description.
This structure fulfills the requirements of displaying both a product list for browsing and a detailed view for individual products upon selection.