Currently:

what it's supposed to look like:

• Go to Figma file
• export bamboo image as png (doesn't matter which one, just grab one)
• add it to the public folder and add bamboos to all 4 pages according to the figma

• individual part of the component are moving around in unwanted places, fix this
• try to see if you can contain the circles inside of a div and move that around instead of setting the location of each individual circle

• don't worry abt the navbar
• create div with background image
• allow a text variable to be passed in for different titles

• create a new component folder, "gallery". If a folder exists inside of gallery, create a button on the Photos page.
• if a button is clicked, all images inside the folder will be displayed
• clicking it again should collapse the images

• currently, the divs do not have any specifications for smaller-sized screens
• you have creative freedom in making this section look presentable, just make sure to:
  • make the text smaller to fit next to the image, if it doesn't work try a different layout (maybe column layout, with text over image?)

• Image for Go board will be uploaded soon, for now just make a gray div as a placeholder

• Image for Mahjang board will be uploaded soon, for now make a gray div as a placeholder

• add green tint, make sure it has gradient from black to green
• fix the width, make sure the border is evenly spaced
• change the border ring color to a lighter green

Currently:

What it's supposed to look like:

• currently the Connect section is not able to shrink for smaller screen sizes, and doesn't center properly at a certain point
• make sure that icons' text lowers at medium and small screen sizes and that the component is centered properly

• currently the footer is not set for different screen sizes, elements are moved all over the place on smaller screens
• you have creative freedom in the layout of the footer, just make sure that it looks presentable on smaller/larger screen sizes

• make icons slightly grow in size if mouse hovers on them
• add discord, email, and Instagram links

Make the line on the Mahjong section look like the Go line

• located under src/components/title
• for button: import Link from "next/link"
• located under src/components/title.jsx

• the div and its border get squished on smaller screen sizes and the proportions get messed up
• play around with the sizing to make sure the shape keep the same proportions

• use the tag to add links to the buttons
• the links can be found in Footer.jsx, but we only have links to IG, discord, and email
  • for now set href="/" for the facebook and link icons, we'll get them later

• currently we have no specifications for medium and small-sized screens, so the text overflows from the div, and the shape of the ring does not follow the shape of the div
• you have creative control over this component, just make sure that text gets smaller on smaller screensizes and the shape of the ring follows the shape of the div

• text is too large
  • "Rules of Go" and "Rules of Mahjong" should not be the same size as the section title)
  • make the paragraph text smaller as well
• make sure that the Mahjong picture is on top of its text on medium/small screens

• the middle bar doesn't stay the same size on different screen sizes

• make ring a lighter shade of green (find colors in tailwind config file)

• create a data file, board.json, and make a couple of fake entries
• create a card component
• map the entries in board.json to the cards
• use grid to organize rows/columns

• get icons from from React: https://react-icons.github.io/react-icons/
• located under src/components/connect.jsx

• don't worry about the title section
• add the 5 event buttons, link them to the home page for now
  

• make about section look good in small and medium screen sizes
• try downsizing the text in small/medium screens

• located under src/components/about.jsx

• make divs and change their shape to circles. set images as backgrounds
• located under src/components/circles

• on some phone sizes the text on the header is too big
• find a text size that looks good on a wide variety of small screens. Also make sure that the text for medium, large, and extra-large screen sizes are also adjusted to look good
• direction for how to view different phone sizes will be posted in the project group chat

• Get icons from react-icons: https://react-icons.github.io/react-icons/
• located under src/components/footer.jsx
• don't add this component to every individual page, add this to layout.jsx