Design-handoff | Yoga Studio | UX collab #56
Conversation
Add font and stylesheet links in index.html
…styling on customer-reviews
Reviewstyles
…ero.jsx, Philosophy.jsx, and Reviews.jsx in order to have some reusable components in the project
(now we control the value of the <select> element using the value prop, not by setting selected on an <option>.)
…ere on "read more" . also made all text and images clickable as that was what the designer wanted.. 😅
fixed duplicate error
There was a problem hiding this comment.
Great job guys! Love that you tried tailwind out. Hopefully it wasn't a complete headache for you. I made some comments. No major things. Only screen size 768px the "our philosophy" "our classes" and "our location" don't align at the bottom. The text of "Our classes" is a little too long and moved the image down.
It's tough to stay focused when reviewing tailwind. I might have missed some things. Overall, you did a great job. Hope the designer liked it as well!
| import { useTranslation } from "react-i18next" | ||
|
|
||
| export const Footer = () => { | ||
| const { t, i18n } = useTranslation() |
There was a problem hiding this comment.
This is actually super cool! Even cooler if you had implemented for the whole page and not only limited for the footer 😉
| /*<div className="bg-steelblue p-6"> | ||
| <select name="" id="" value={i18n.language} onChange={(e) => i18n.changeLanguage(e.target.value)} className="bg-steelblue border-none"> | ||
| <option value="" disabled selected>{t("footer.select")}</option> | ||
| <option value="en">{t("footer.en")}</option> | ||
| <option value="sv">{t("footer.sw")}</option> | ||
| </select> | ||
| </div>*/ | ||
|
|
||
| /*<div className="bg-steelblue text-center sm:text-left p-6"> | ||
| <button onClick={() => changeLanguage("en")} className="border-2 border-beige text-beige transition hover:text-darkblue hover:border-darkblue">{t("footer.en")}</button> | ||
| <button onClick={() => changeLanguage("sv")} className="border-2 border-beige text-beige transition hover:text-darkblue hover:border-darkblue ml-2">{t("footer.sw")}</button> | ||
| </div>*/ | ||
|
|
||
| /*const changeLanguage = (language) => { | ||
| i18n.changeLanguage(language) | ||
| }*/ | ||
|
|
||
|
|
||
| /* <option value="" selected disabled>{t("footer.select")}</option>*/ |
There was a problem hiding this comment.
Don't forget to delete not used code and comments
| {/* Date picker */} | ||
| <input | ||
| type="date" | ||
| onChange={(e) => | ||
| handleDateTimeSelection(e.target.value, e.target.value) | ||
| } | ||
| className="cursor-pointer py-1 px-4 hover:bg-gray-200" | ||
| /> | ||
| {/* Time picker */} | ||
| <select | ||
| onChange={(e) => | ||
| handleDateTimeSelection( | ||
| e.target.parentElement.firstChild.value, | ||
| e.target.value | ||
| ) | ||
| } | ||
| className="cursor-pointer py-1 px-4 hover:bg-gray-200" | ||
| > | ||
| <option value="">Select time</option> | ||
| <option value="9:00 AM">9:00 AM</option> | ||
| <option value="11:00 AM">11:00 AM</option> | ||
| <option value="2:00 PM">2:00 PM</option> | ||
| </select> |
There was a problem hiding this comment.
Where is this function used? I cannot book anything 😢
| <div className="text-sm md:text-2xl lg:text-3xl font-Roboto">Studio</div> | ||
| </div> | ||
|
|
||
| <div className="flex"> |
There was a problem hiding this comment.
I think this div can be left out
| }}> | ||
| <div className="flex flex-wrap justify-start col-start-1 font-Roboto font-semi-bold "> | ||
| <div className="text-center md:px-5 lg:px-7"> | ||
| <a className='cursor-pointer' href="#"> |
There was a problem hiding this comment.
You actually don't need to define a cursor pointer for a link element. Tailwind does it automatically for you. Except you want a different cursor.
| <div> | ||
| <a href="/"><img className="float-left mr-4 desktop:mr-8 max-w-[120px] md:max-w-[350px] lg:max-w-[600px]" src={strength3} alt="Flexible schedules" /></a> | ||
| <h2><a href="/" className="text-lg tablet:text-2xl desktop:text-3xl font-semibold">Flexible schedules</a></h2> | ||
| <p className="text-base tablet:text-xl desktop:text2xl overflow-auto">We believe in easy access yoga classes. Drop-in or schedule ahead. Sign up or on the go.</p> |
| <div> | ||
| <a href="/"><img className="float-left mr-4 desktop:mr-8 max-w-[120px] md:max-w-[350px] lg:max-w-[600px]" src={strength2} alt=" Close to where you are" /></a> | ||
| <h2><a href="/" className="text-lg tablet:text-2xl desktop:text-3xl font-semibold">Close to where you are</a></h2> | ||
| <p className="text-base tablet:text-xl desktop:text2xl overflow-auto">With over 50 locations all over the city, we made it easy for you to exercise.</p> |
| <div> | ||
| <a href="/"><img className="float-left mr-4 desktop:mr-8 max-w-[120px] md:max-w-[350px] lg:max-w-[600px]" src={strength1} alt="Build strength - lose stress" /></a> | ||
| <h2><a href="/" className="text-lg tablet:text-2xl desktop:text-3xl font-semibold">Build strength - lose stress</a></h2> | ||
| <p className="text-base tablet:text-xl desktop:text2xl overflow-auto">Physically demanding while soothing your soul, Ashtanga yoga is the premium choice.</p> |
There was a problem hiding this comment.
there is a dash missing for desktop view
desktop:text-2xl
There was a problem hiding this comment.
already mentioned it before. Super cool idea to use this library for translation!
| @import 'tailwindcss/base'; | ||
| @import 'tailwindcss/components'; | ||
| @import 'tailwindcss/utilities'; | ||
|
|
||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
There was a problem hiding this comment.
haha just to be sure you imported it both ways 😄
|
Hey team! Can you please confirm the link to your design? I am here confused as your design looks completely different..Thank you 🙏 |
There was a problem hiding this comment.
Hello ladies, congratulations for completing your week 12 assignment! 🥂 The site looks very close to the design and followed most of our requirements. How did you like Tailwind? Seems like you tackled it in the right way and implemented a great result! How cool you experimented with localisation! Now the design is not pixel perfect, and the design lacked some measurements perhaps didn't help, but that's okay 😄 Here's some few things that can need to be taken into consideration to pass the assignment:
- alignments across the app (i.e. on mobile, join our newsletter should be left aligned)
- font sizes/proportions
- consistency in image sizes and text alignment especially on mobile(second to last section)
- language selection mismatches with design
- mobile: header on hero differs from design
Please fix these few things and you're good to go 🚀 💪 ps: don't forget to format every file before committing! ✨
https://ystudioyoga.netlify.app/
Collaborators
[jingh999, kathinka, KatSjolin]