Oscar's Design Handoff #43
Conversation
…s messed up, will work on that, added all other components
…e's a strange button system in the mobile version
| import Readme2 from '../images/dylan-gillis-YJdCZba0TYE-unsplash.jpg'; | ||
|
|
||
| export const article = [ | ||
| { header: 'Guide for beginners', paragraf: 'Join our growing community and let us support your well-being. If you are a beginner and do not dare to try yoga because you think you are too stiff and immobile for some of the positions, then you have come to the right place!' }, |
There was a problem hiding this comment.
Overall, the code seems well-written and organized. However, the article constant could have been named differently to avoid confusion with the Article component.
There was a problem hiding this comment.
Overall, the code looks well-written and follows best practices of using styled-components to create reusable and maintainable styles for components.
It's good to see that the code is well-organized, with each styled component defined separately.
The use of media queries is a nice touch to ensure responsive design.
The use of alt text on images is also good for accessibility.
The naming conventions for the components and variables are clear and consistent.
The Benefits component is a good example of a functional component that returns JSX.
| @@ -0,0 +1,119 @@ | |||
| import React from 'react' | |||
There was a problem hiding this comment.
Overall, the code looks well-written and follows best practices of using styled-components to create reusable and maintainable styles for components
| color: #025323; | ||
| margin-top: 1rem; | ||
| } | ||
| @media (min-width: 768px) { |
There was a problem hiding this comment.
The use of media queries is a nice touch to ensure responsive design.
| } | ||
| `; | ||
|
|
||
| const Overlay = styled.div` |
There was a problem hiding this comment.
The naming conventions for the components and variables are clear and consistent.
| ` | ||
|
|
||
| const Text = styled.div` | ||
| background-image: url("../images/Blob.png"); |
There was a problem hiding this comment.
It's generally better practice to import images as modules, rather than using their file path directly. This allows webpack to optimize the images and handle them more efficiently.
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| color: green; | ||
| margin-top: 1rem; |
There was a problem hiding this comment.
Margin-top property set to 1rem, which is then overridden in the media query. It would be more efficient to only set this property once in the media query.
https://mellifluous-hummingbird-d3b9ff.netlify.app