Oscar's Design Handoff #43
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,25 @@ | ||
| /* eslint-disable linebreak-style */ | ||
| import React from 'react' | ||
| import { ImageSlider } from 'Components/Reviews' | ||
| import { Navbar } from 'Components/Navbar' | ||
| import { Benefits } from 'Components/Benefits'; | ||
| import Contacts from 'Components/Contacts'; | ||
| import { Hero } from 'Components/Hero'; | ||
| import { Membership } from 'Components/Membership'; | ||
| import { Article } from 'Components/Article'; | ||
| import { Footer } from 'Components/Footer'; | ||
|
|
||
| export const App = () => { | ||
| return ( | ||
| <> | ||
| <Navbar /> | ||
| <Hero /> | ||
| <Benefits /> | ||
| <Membership /> | ||
| <Article /> | ||
| <ImageSlider /> | ||
| <Contacts /> | ||
| <Footer /> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import Readme1 from '../images/max-van-den-oetelaar-buymYm3RQ3U-unsplash.jpg'; | ||
| 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!' }, | ||
| { header: 'Yoga retreat ', paragraf: 'This is not just a yoga retreat, meditation course or wellness trip – it is a complete experience for body and soul. Our concept is designed to, togetherwith yoga and meditation and other exciting spiritual tools, allow you to explore movement, emotions, stillness and above all – yourself.' } | ||
| ] | ||
| const ArticleContainer1 = styled.div` | ||
| width: 100vw; | ||
| height: auto; | ||
| margin-top:30px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| background-color: #FFFFFF; | ||
| @media (min-width: 992px) { | ||
| display: flex; | ||
| flex-direction: row-reverse; | ||
| margin-top: 10%; | ||
| } | ||
| `; | ||
| const ArticleContainer2 = styled.div` | ||
| margin-top:30px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| background-color: #FFFFFF; | ||
| @media (min-width: 992px) { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
| `; | ||
| const ContentBox = styled.div` | ||
| padding: 0 31px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| `; | ||
| const Header = styled.h1` | ||
| font-family: 'Libre Franklin'; | ||
| font-style: normal; | ||
| font-weight: 600; | ||
| font-size: 32px; | ||
| line-height: 39px; | ||
| text-align: center; | ||
| color: #025323; | ||
| @media (min-width: 600px){ | ||
| font-size: 42px; | ||
| line-height: 51px; | ||
| } | ||
| `; | ||
| const Paragraf = styled.p` | ||
| font-family: 'Libre Franklin'; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| font-size: 16px; | ||
| line-height: 19px; | ||
| text-align: center; | ||
| letter-spacing: 0.127905px; | ||
| color: #025323; | ||
| padding: 0 50px; | ||
| @media (min-width: 600px){ | ||
| font-size: 22px; | ||
| line-height: 27px; | ||
| } | ||
| `; | ||
| const Button = styled.button` | ||
| padding: 15px 47px; | ||
| background: #025323; | ||
| border-radius: 15px; | ||
| text-align: center; | ||
| color: #FFFFFF; | ||
| margin-bottom:61px; | ||
|
|
||
| `; | ||
| const ImgBox = styled.div` | ||
| width: 378.84px; | ||
| height: 258.8px; | ||
| border: 0.58px solid #025323; | ||
| border-radius: 12px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| @media (min-width: 600px){ | ||
| width: 600px; | ||
| height: 408px; | ||
| } | ||
| @media (min-width: 992px){ | ||
| width: 600px; | ||
| height: 408px; | ||
| } | ||
| ` | ||
| const Image = styled.img` | ||
| width: 351.82px; | ||
| height: 234.34px; | ||
| border: 6px solid #025323; | ||
| border-radius: 12.5651px; | ||
| @media (min-width: 600px){ | ||
| width: 554px; | ||
| height: 373px; | ||
| } | ||
| @media (min-width: 992px){ | ||
| width: 560px; | ||
| height: 374px; | ||
| } | ||
| `; | ||
| const ArticleWrapper = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| @media (min-width: 992px){ | ||
| width: 588px; | ||
| height: 393px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| } | ||
| ` | ||
|
|
||
| const ArticleSection = styled.div` | ||
| margin-bottom: 5rem; | ||
|
|
||
| ` | ||
|
|
||
| export const Article = () => { | ||
| return ( | ||
| <ArticleSection> | ||
| <ArticleContainer1> | ||
| <ArticleWrapper> | ||
| <ContentBox> | ||
| <Header>{article[0].header}</Header> | ||
| <Paragraf>{article[0].paragraf}</Paragraf> | ||
| </ContentBox> | ||
| <Button type="button">Read more</Button> | ||
| </ArticleWrapper> | ||
| <ImgBox> | ||
| <Image src={Readme1} alt="readme" /> | ||
| </ImgBox> | ||
| </ArticleContainer1> | ||
|
|
||
| <ArticleContainer2> | ||
| <ArticleWrapper> | ||
| <ContentBox> | ||
| <Header>{article[0].header}</Header> | ||
| <Paragraf>{article[0].paragraf}</Paragraf> | ||
| </ContentBox> | ||
| <Button type="button">Read more</Button> | ||
| </ArticleWrapper> | ||
| <ImgBox> | ||
| <Image src={Readme2} alt="readme" /> | ||
| </ImgBox> | ||
| </ArticleContainer2> | ||
| </ArticleSection> | ||
| ) | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
||
| import styled from 'styled-components' | ||
| import Back from '../images/jade-stephens-N21356amsyw-unsplash.jpg' | ||
| import Line from '../images/Line.svg' | ||
|
|
||
| const BenefitsWrapper = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 1rem; | ||
| @media (min-width: 768px) { | ||
| flex-direction: row; | ||
| padding: 2rem; | ||
| } | ||
| ` | ||
|
|
||
| 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-size: contain; | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| color: green; | ||
| margin-top: 1rem; | ||
|
There was a problem hiding this comment.
|
||
| padding: 1rem; | ||
| text-align: center; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| p { | ||
| font-size: 1rem; | ||
| line-height: 1.5; | ||
| 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. |
||
| margin-top: 0; | ||
| margin-left: 2rem; | ||
| height: auto; | ||
| width: 50%; | ||
| text-align: center; | ||
| p { | ||
| font-size: 1.25rem; | ||
| line-height: 1.5; | ||
| max-width: 500px; | ||
| margin-top: 2rem; | ||
| } | ||
| } | ||
| ` | ||
| const Heading = styled.h1` | ||
| color: #025323; | ||
| text-align: center; | ||
| margin-top: 1rem; | ||
| ` | ||
|
|
||
| const ImageDiv = styled.div` | ||
| position: relative; | ||
| background-size: cover; | ||
| background-position: center; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 20px; | ||
| margin-top: 1rem; | ||
| height: 50%; | ||
| width: 50%; | ||
| @media (min-width: 768px) { | ||
| margin-top: 0; | ||
| margin-right: 2rem; | ||
| height: auto; | ||
| width: 50%; | ||
| } | ||
| `; | ||
|
|
||
| const Overlay = styled.div` | ||
|
There was a problem hiding this comment. The naming conventions for the components and variables are clear and consistent. |
||
| position: relative; | ||
| z-index: 1; | ||
| width: 100%; | ||
| height: 100%; | ||
| ` | ||
|
|
||
| const YogaWrapper = styled.img` | ||
| max-width: 90%; | ||
| height: auto; | ||
| box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.25); | ||
| border-radius: 20px; | ||
| ` | ||
|
|
||
| const VectorWrapper = styled.img` | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| ` | ||
|
|
||
| export const Benefits = () => { | ||
| return ( | ||
| <BenefitsWrapper> | ||
| <Text> | ||
| <Heading>Benefits of Yoga</Heading> | ||
| <p>There is a wide range of yoga and meditation classes here. | ||
| Here you want to create community and there is always good tea | ||
| and someone you can talk to if you feel like it after class. You | ||
| are warmly welcome regardless of experience. It also has many | ||
| psychological and physical effects, including lowering stress levels | ||
| and blood pressure while improving concentration and memory. | ||
| </p> | ||
| </Text> | ||
| <ImageDiv> | ||
| <Overlay> | ||
| <YogaWrapper src={Back} alt="yoga" /> | ||
| <VectorWrapper src={Line} alt="vector" /> | ||
| </Overlay> | ||
| </ImageDiv> | ||
| </BenefitsWrapper> | ||
| ) | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall, the code seems well-written and organized. However, the article constant could have been named differently to avoid confusion with the Article component.