None, but any thoughts more than welcome.
I did the bulk of this a month ago, and then got sidetracked. At the time all that was left to do was the spacing between sections, and inside the table. Also how to handle the header image using full width for mobile, and inside the card for desktop. (I think this was why I stopped at the time)
I'm aware of the H3 warning above. Will correct in due course.
Great job, can't / won't comment on Tailwind / next.js build as I don't know enough.
Its nice and responsive, breaks nicely between the two sizes.
If you wanted me to be really (😹) pedantic there are two things in the "Preparation Time" callout:
First the wrap of "minutes" on mobile isn't in line with Total. However there is alignment further down the page on others that wrap.
Second, in the callout the : is outside the span, but further down you have the : inside the span. To me both should be inside the span.
Looks great, and its responsive to resizing. Can't really comment on the code because I know nout about React/Tailwind so far.
Respondeds to tabbing which is good.
Only suggestion is breaking at 768px looks rough, you'd be better being two columns down closer towards the mobile size. Maybe 500? If I was looking on my iPad I'd feel it was a huge waste of screen real estate.
Have SVG's for each of the social services but didn't end up adding them as an "enhancement"
Hey congrats on finishing the challenge. There are some issues, particularly in the between sizes.
aria-labels to the social links so that a screenreader will read out what the links are for. Particularly regarding the social links..offer-price-box has a z-index of 0 after 800px. You set z-index: 3 in the media query upto max-width: 50rem.:hover, also add :focus, you could do .ios-btn:where(:focus, :hover) that way someone using the keyboard to navigate around the page gets the effect too.<br> after the year in the footer.alts for images (on patterns, logos). Add a description, and it you feel its not an important thing for not sighted people, then use aria-hidden on them.apple class for both the apple and android svgs.Hope this was of some help to you.
Hey congrats on completing the challenge. Looks great, and nicely responds to screen being shrunk. (Can't comment on the code as I don't know tailwind)
Couple of little things:
a tags, which are selectable via the keyboard. Not li tags.:focus as well as :hoverdiv for everything. Try and use the approriate semantic tags where you can. For instance the bottom section should be footer.