We need to develop product details pages with a layout that EXACTLY the same as the other pages. This layout should have the following: • The layout spread across these pages should be responsive to all screen devices. Build the layout with its natural behavior following the standard framework of bootstrap. • Find attached image for the placement of these components below: • 1. Slider with (prev.next) arrows. Show 1st photos as default • 2. The 2nd photo of entry as default with a link (view all photos) / counter • 3. A video banner with modal behavior, If the video does not exist> shows 3rd photo with a view all link. • 4. Map quick view modal, on top it's minimized with no controls or buttons. Just the pin map center aligned. • 5. H2 and H3 Headlines • 6. Icon - H4 | icon-h4 | Reviews counter • 7. Save btn to trigger a feedback modal (Space is saved to your list!) - Share btn to open the standard share modal (facebook-twitter-whatsapp - link) • 8. Tab bar navigation • 9. Sticky quote form, please check this as example https://www.propertyfinder.ae/en/rent/apartment-for-rent-dubai-motor-city-widcombe-house-widcombe-house-4-7641942.html • The sticky quote form component differs from page to page, please check the attached file for images. • The form includes (text fields - dropdown - radio button(switcher) - date picker - price breakdown is a accordion - coupon code (auto check) - tooltip) • 10. Overview: is normal HTML content and has a vertical list of ul > li • 11. Details are two blocks (with shadow effect to indicate as a link to modal) with a list of icons and labels. The modal will popup with the full view list (icons attached). Checkout Airbnb.com and look for how the modal works for the amenities. • 12. Bullets List • 13. Info list • 14. Avatar + CTA card. The CTA button will show the hidden number behind it. • 15. Reviews have overall rank (stars) a slider with dots and a view all popup modal. • 16. cards list just like the product list page.
FYI again, All pages are almost similar. The only change is the right side box. Attached a pdf with separate images and types of these boxes for reference.
