All solutions

What are you most proud of, and what would you do differently next time?

I made various efforts to enhance the reusability of components,

like:

• storing the card's content information (title, logo, description) as an array of data, allowing it to be flexibly passed as arguments to the card component.
• using grid-template-area to handle changes in screen width only with the parent element of the card.
• using round and overflow-hidden class to make cards round.

What challenges did you encounter, and how did you overcome them?

I needed to change the card layout between the mobile and desktop versions, but achieving this with "flex" was challenging, so I decided to use "grid". While it’s possible to achieve the desired layout with grid-row and grid-column, it would require writing different conditional logic for each card, which would reduce the reusability of the component and make it difficult to process the array data using the map function. I wanted the parent element of the cards to have full control over the layout without adding layout-specific classes to each card. Therefore, I used grid-template-areas to allow the parent element to handle the layout adjustments based on screen size. Since grid-template-areas isn't available as a utility in TailwindCSS, I resolved this by using CSS modules.

What are you most proud of, and what would you do differently next time?

The actual design was adjusted so that the position of the text was approximately the same as the actual design photo.

What challenges did you encounter, and how did you overcome them?

"Flexbox" is specified for each lists to make the space between the text and bullet points.

What specific areas of your project would you like help with?

The CSS classes to make the space between bullet points and text was not clean because it has many repetitions. I want to learn from others' examples how it could have been written elegantly.

What are you most proud of, and what would you do differently next time?

All elements except those related to box-shadow and color were created using existing TailwindCSS classes without using arbitrary values. I prioritized maintainability over achieving 100% reproduction accuracy.

While tags, titles, and content strings are directly written in components, I believe it would be more practical to divide the content written in page.tsx into components like Card and receive the content through props.

What challenges did you encounter, and how did you overcome them?

We had to use arbitrary values for box-shadow because it couldn't be addressed with existing TailwindCSS classes.