GreenPets is an innovative platform designed for plant lovers and aspiring plant parents. This unique tool helps users find the perfect plants that suit their lifestyle and expertise level.
Description
Fixed Roadmap, Call-To-Action, and Contributors images on the homepage that were not displaying correctly on the deployed site. This was because the images were being referenced by assigning the src prop on images to the relative path string value of the image. In React you need to either import the images or use the require.context method. In our case, there were a lot of imports to be made for the contributors section so I went in the route of creating an index.ts file that will import those images and then export all the referenced images as an object so I can then reference the needed images in one import.
Fixed Hero Section Button to take the user to the Get Started page on the deployed site. Had to replace the 'a' tag that was being used with the Link component to utilize React Router.
Remove the imported images from the assignment of the image src properties
Assign the src property to the relative path of the images
Do the same for the background image in the call to action component and the images on the Roadmap component.
Navigate to HeroSection Component
Replace the Link component with an A tag with the same props
Previous behavior
Images for Contributors, Roadmap, and the background image for the call to action section would load fine locally but not on the deployed site.
Get Started button was not taking the user to the right page on the deployed website.
Expected behavior
Images on the Roadmap, Call To Action, and Contributors section should now load correctly on the deployed site.
Hero Section button should now take the user to get started on the deployed site.
Overview
*Fix Images on Homepage
Description Fixed Roadmap, Call-To-Action, and Contributors images on the homepage that were not displaying correctly on the deployed site. This was because the images were being referenced by assigning the
srcprop on images to the relative path string value of the image. In React you need to either import the images or use therequire.contextmethod. In our case, there were a lot of imports to be made for the contributors section so I went in the route of creating an index.ts file that will import those images and then export all the referenced images as an object so I can then reference the needed images in one import.Fixed Hero Section Button to take the user to the Get Started page on the deployed site. Had to replace the 'a' tag that was being used with the Link component to utilize React Router.
Ticket Item Fix Images#87
Steps to Reproduce Bug / Validate Feature / Confirm Tech Debt Fix
Navigate to the About Component
Remove the imported images from the assignment of the image src properties
Assign the src property to the relative path of the images
Do the same for the background image in the call to action component and the images on the Roadmap component.
Navigate to HeroSection Component
Replace the Link component with an A tag with the same props
Previous behavior Images for Contributors, Roadmap, and the background image for the call to action section would load fine locally but not on the deployed site.
Get Started button was not taking the user to the right page on the deployed website.
Expected behavior Images on the Roadmap, Call To Action, and Contributors section should now load correctly on the deployed site. Hero Section button should now take the user to get started on the deployed site.