Issue 33 create the last three sections of the landing page #42
Conversation
| const upcomingEvents = [ | ||
| { | ||
| id: 1, | ||
| title: "Summer 2026 Game Jam", | ||
| time: "Monday 24th Oct 11:00am–4:00pm", | ||
| image: "/placeholder.png", | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: "Godot Workshop", | ||
| time: "Thursday 2nd Nov 2:00–4:00pm", | ||
| image: "/placeholder.png", | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: "World domination", | ||
| time: "Thursday 2nd Nov 2:00–4:00pm", | ||
| image: "/placeholder.png", | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
Data on the upcoming events should be fetched from the backend. See #6 and #29. You may need to create a hook to fetch all the events if one doesn't already exist. Happy to help and explain more if you would like. You can also refer to older CFC react projects such as coexist if you would like examples of how we do this.
client/src/pages/index.tsx
Outdated
| </div> | ||
| </div> | ||
| <div> | ||
| <span className="font-jersey10">See More </span> |
There was a problem hiding this comment.
This should link to the events page (/events)
client/src/pages/index.tsx
Outdated
| <div className="mb-10 flex flex-col items-start"> | ||
| <h2 className="flex items-center gap-3 font-jersey10 text-5xl text-white"> | ||
| Featured Member Creations | ||
| <span className="text-4xl text-red-400">❤️</span> |
There was a problem hiding this comment.
Please use the pixel heart from the figma here instead
laurenpudz
left a comment
laurenpudz
left a comment
There was a problem hiding this comment.
Looking good! could you please also merge main into this branch and resolve conflicts so we can see what it looks like with the first sections of the landing page above it. Thanks!
| const btnList2 = [ | ||
| { name: "See more games by our members", link: "/" }, | ||
| { name: "See other cool stuff our members have created", link: "/" }, | ||
| ]; |
There was a problem hiding this comment.
please name this something more informative, like 'gameShowcaseBtnList'
| /> | ||
| </div> | ||
|
|
||
| <h3 className="mb-2 text-2xl text-white">{game.title}</h3> |
There was a problem hiding this comment.
This should be the pixel font, jersey10
|
|
||
| <h3 className="mb-2 text-2xl text-white">{game.title}</h3> | ||
|
|
||
| <p className="mb-4 text-sm text-primary">{game.description}</p> |
There was a problem hiding this comment.
This should be the monospace font, firacode
| <div className="flex w-full justify-between px-4"> | ||
| <div> | ||
| <div className="flex w-52 justify-around"> | ||
| <Image | ||
| src="/placeholder.png" | ||
| width={27} | ||
| height={20} | ||
| alt="Placeholder" | ||
| /> | ||
| <div className="font-jersey10">Join our Discord </div> | ||
| </div> | ||
| <div className="flex w-52 justify-around"> | ||
| <Image | ||
| src="/placeholder.png" | ||
| width={27} | ||
| height={20} | ||
| alt="Placeholder" | ||
| /> | ||
| <div className="font-jersey10">Join our Discord </div> | ||
| </div> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
could you please remove these for now and center the feature box :)
| <div className="mb-12 flex flex-col items-start gap-4"> | ||
| {btnList2.map((item, i) => ( | ||
| <Link href={item.link} key={i}> | ||
| <Button>{item.name} ></Button> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
could you please display these buttons either below the featured games or below the title on mobile. At the moment they are at the same level as the title and it looks a little squished.
Implemented the last three sections of the Landing Page.
Added upcoming Events, featured Member Creations.
Basic layout and styling in Tailwind completed.
Change Form
Fill this up (NA if not available). If a certain criteria is not met, can you please give a reason.
Related issue