As a user,
I want to see an inviting and informative splash page,
So that I understand what the app is, and I want to learn more
Acceptance Criteria:
Try to think about the design in terms of boxes, and plan how you will lay everything out before hand. A simple starter is to think about how there should be a box on the left that contains all the text and the button, and a box on the right that contains all the images.
You can make the images move on top of each other by using position: absolute (absolute is the tailwind class`). If you have trouble with this, reach out to @Hanna-N9, she recently did some investigation about absolute positioning.
You also don't need to worry about styling the button perfectly, just use the existing Button component and we'll improve on it in another story
[x] Use TailwindCSS to style the hero section like the attached design mockup
[x] Use the Button component and the LinearGradient component
[x] Use the attached images for the "halogen" title logo, and for the 3 window elements
User Story:
Acceptance Criteria:
Try to think about the design in terms of boxes, and plan how you will lay everything out before hand. A simple starter is to think about how there should be a box on the left that contains all the text and the button, and a box on the right that contains all the images.
You can make the images move on top of each other by using
position: absolute(absoluteis the tailwind class`). If you have trouble with this, reach out to @Hanna-N9, she recently did some investigation about absolute positioning.You also don't need to worry about styling the button perfectly, just use the existing
Buttoncomponent and we'll improve on it in another storyButtoncomponent and theLinearGradientcomponentNote: don't forget you can use the live mockup site to reference for your work - https://xd.adobe.com/view/5d8116ab-aaca-433c-9b16-2f883df98c75-08d2/