Hello, Emmilie Estabillo! 👋

I'm sorry I'm late to this challenge—I only noticed it just now! 😅 That being said, I'm glad I didn't miss because I was looking forward to seeing another solution from you (and my prediction was right—it's pretty awesome)! 😀 The design of your solution looks great and is on point (you're right—it does look fine without a max-width on extra-large screens 😆) and your code looks really nice, as well! 👍

Kudos for trying out Next.js! It's an awesome framework that makes using React to build sites sooo much nicer! About mapping more than one route to the same page in Next.js—I don't remember having done that with only Next.js (yet) but this page from StackOverflow might present a possible solution. 🙂

I agree that working with Next.js's Image component can be a little tricky! I've gotten pretty annoyed before at the weird way the image is wrapped in two divs with their own styles (and they have inline styles, too, I think, which makes changing them super-difficult). For now, I usually just wrap the Image component in a wrapper of my own (yeah, a third wrapper 🤪) and then focus on sizing and positioning that. 🤷‍♂️

I really like the animation to the stars that you added with Framer Motion! I wish I could help you with your question, but it's been a while since I last used Framer Motion and I've almost forgotten the basic syntax! 🙃 One thing I noticed, however, is that the you're animating the background position property, which generally isn't very performant and is causing a tiny bit of lag on my computer, I believe (but I don't have a great laptop at the moment, anyway, so lots of things make it lag 😅). It might require a bit of extra work, but finding a way to animate the transform property instead to create the animated stars would probably be a good idea, since the transform property is optimized for animations by browsers and animating background-related properties is usually a bit expensive. 🙂

If I understand your question about styled-components correctly, I think you can do something like this in your styled-components (correct me if I misunderstood):

const Wrapper = styled.div`
  // styles...
  background: ${(props) => props.name || props.planet && 'var(--color-mercury-main)'};
`

Anyways, really great job on this project, once again! 👏 I hope that helps a little! 🙂

And of course—keep coding (and happy coding, too)! 😁

Hi, Josué Ramírez! 👋

Nice effort on this challenge! 👏

I'd like to suggest,

• Using CSS background images to add and position some of the background images in this challenge. Doing so means you won’t have to add those images directly to your HTML (which will keep your markup a little cleaner) and I think it’s easier to manage background images with CSS because you won’t have to worry about things like overflow issues. If you’d like to learn more about CSS background images and how to use them, check out this tutorial from MDN.
• You can also try playing around with percentages and viewport units to position the background images in this challenge, since that should help to position the background shapes in such a way that they do not move around so much when the page is resized. That's what I did for my solution to this challenge, and it seemed to work out fairly well.
• Adding a favicon to your site would be a nice touch. 😉

Hope that helps a bit. 🙂

Keep coding (and happy coding, too)! 😁

Hi, Mgbojikwe Chukwuebuka! 👋

Just wanted to say—great job on this challenge! 👏 The card component looks pretty good and you did a rather nice job of positioning the background images (which can be a little tricky in this challenge)! 👍

Keep coding (and happy coding, too)! 😁

Hi there, LouiseCW! 👋

Well done on this challenge! 👍 Your solution looks good and is responsive! 😀

One tiny thing I'd like to suggest is that you perhaps use the a heading tag of the same level for all three headings in the card component (since one doesn't seem to be of any more importance than another in this design). 😉

As for styling the buttons, you can simply make set their background-color to transparent when they are hovered over so that the background of each section shows through them and you don't have to mess around with adding individual background-colors to each button upon hover:

button:hover {
  background-color: transparent;
}

Hope that is helpful. 🙂

Keep coding (and happy coding, too)! 😁

Hi, Swan-Yee-Tun! 👋

Good effort on this challenge! 👍

I'd like to suggest switching to a mobile-friendly layout sooner to prevent a horizontal scroll bar from appearing along the bottom of the page when the width of the screen decreases in the desktop layout. Currently, the card component looks pretty good in the desktop layout, but the content inside ends up looking a bit squished as the width of the screen decreases. It's important to make your solution look good on all screen sizes so that as many people as possible can view and enjoy your work. 😉

Hope that small tip helps. 🙂

Keep coding (and happy coding, too)! 😁