Achievements Grid

[XiyuanWu]

For this issue, a lot of them have changed:

1. Remove the test image; only keep the mock trail image. The naming is also messy; I rank and list them in order.
2. Delete LeftAch and RightAch because we no longer need them. All data is stored in AchievementsData.ts and input card elements LeftAchCard and RightAchCard to AchievementsGrid.tsx.
3. Different code style between LeftAchCard and RightAchCard. And the grid size is even different. See image below:

So to address this issue, I replaced one of the Card elements entirely and adjusted the grid size, making sure they are in the same code style, the only difference is the order of the div box. Technically, both elements should be assigned to the same people, because they essentially just rearrange the div box in a different order. Left Ach image div box is on top, and Right Ach text div box is on top.

Also, since the mobile page is different, the Whole grid will be hidden, hidden md:block.

Since the web page is too long, I captured a full-size web preview (since the image is large when uploaded to GitHub, that ratio doesn't seem right. Switch to this branch to see the complete work).

close #47

[wesleylwu]

good work, just a small comment. also can you revert the names of the files; it's better named as it helps us reference what each photo is without having to actually open it.

[wesleylwu]

make these have absolute pathing with @. an example is like line 3 (import AchievementsData from "@/data/AchievementsData";)

[XiyuanWu]

I try to replace it with @, but the import fails. Because they are under same folder, so use ./.

And with the image, the original image names are messy and very hard to do when adding to achievementsData. All the images follow the order that Figma gives.

[JeffreyXia05]

looks good to me!