Our Principles Section

[minjlys]

did i do the file layout correct / put the component in the correct spot by chance

[minjlys]

i ran npm run format the second time (not the first), so i think that's why it says there's 2 commits

[brandontran1220]

Hey Lydia, it looks good, but this isn't exactly what we're looking for. Could you style using TailwindCSS instead of importing the rectangle and also using HTML to write the text rather than importing the text as an image. You don't have to import any images for this issue.

Some notes that could be handy in your issue:

Use font-pse-maitree for your text font in the grid
Use font-pse-crimson-text for the heading text
I made a PR for the color you should use for the boxes. It should be pse-purple-100. Once this is merged in, pull from the dev branch (git pull origin dev) and use that color.
Check on the the tailwindcss website for syntax on how to make a box and style it.

[minjlys]

my comments

1. for the grid font, i didn't find font-pse-maitree in the global.css file, so i used GFS didot as a placeholder

2. for the grid box colors, pse-purple-100 is a darker purple versus the light purple color i saw in the pse figma file - again, i didn't find a matching color for that in the global.css file, so was wondering what to do about that

[minjlys]

OKAY i fixed the merge conflict with page.tsx and with my local branch, deleted the svgs in the initial commit and replaced them with tailwindcss styling, swapped the fonts and the colors with the correct one after running git pull origin dev

[brandontran1220]

Looks a lot better now! Could you have the grid extend the whole page?

Right now it looks like this on my monitor:

But on the figma, the grid is a bit wider

Could send a screenshot of yours?

[minjlys]

looks like this for me - by extending the grid you mean making the overall component larger so its closer to the sides of the screen, correct?

[brandontran1220]

looks like this for me - by extending the grid you mean making the overall component larger so its closer to the sides of the screen, correct?

Yep!

[brandontran1220]

LGTM!