Issue 33 create the last three sections of the landing page #42
Conversation
There was a problem hiding this comment.
this seems like a duplicate of the first explosion image, please delete this and use the first image instead
There was a problem hiding this comment.
this also seems like a duplicate, please delete
| 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.
| <span className="cursor-pointer hover:text-white"><</span> | ||
| <span className="cursor-pointer hover:text-white">></span> |
There was a problem hiding this comment.
These should be buttons that allow us to scroll left or right to view all of the upcoming events. Buttons should use right and left chevron icons rather than < and > characters. Please use lucide-react icons if you can. Buttons should be disabled when we can no longer move in one direction :)
| </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)
| style={{ | ||
| clipPath: | ||
| "polygon(0% 0%, 27% 0%, 31% 1rem, 100% 1rem, 100% calc(100% - 1rem), 97% 100%, 70% 100%, 67% calc(100% - 1rem), 0% calc(100% - 1rem))", | ||
| }} | ||
| className="relative w-[60vw] bg-secondary p-[1px]" | ||
| > | ||
| <div | ||
| style={{ | ||
| clipPath: | ||
| "polygon(1px 1px, calc(27% - 1px) 1px, calc(31% - 1px) 1rem, calc(100% - 1px) 1rem, calc(100% - 1px) calc(100% - 1rem - 1px), calc(97% - 1px) calc(100% - 1px), calc(70% + 1px) calc(100% - 1px), calc(67% + 1px) calc(100% - 1rem - 1px), 1px calc(100% - 1rem - 1px))", | ||
| }} | ||
| className="h-full bg-[#0d1025] p-10" | ||
| > | ||
| <h3 className="mb-[15px] font-jersey10 text-4xl"> | ||
| So... How do I get involved? | ||
| </h3> | ||
| <p> | ||
| { | ||
| "The easiest way to get involved is to come along to one of our events! Most events don't need registration- just check the event description to make sure. If you aren't feeling up to an event, just join our discord. React out to our friendly committee members if you need any help!" | ||
| } | ||
| </p> | ||
| </div> |
There was a problem hiding this comment.
This component should already exist! Really sorry this hadn't already been communicated to you. It is called FeatureBox. Please use that here instead :)
| <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
| <button className="rounded-md border border-purple-300 bg-[#090A19] px-6 py-3 text-white transition hover:bg-purple-300 hover:text-black"> | ||
| See more games by our members > | ||
| </button> | ||
| <button className="rounded-md border border-purple-300 bg-[#090A19] px-6 py-3 text-white transition hover:bg-purple-300 hover:text-black"> |
There was a problem hiding this comment.
Please use the Button component here instead. If you need to add a new variant to the Button component please do so. Let me know if you need any help with this
There was a problem hiding this comment.
For the entire file please use existing project colours instead of hex, and try to replace arbitrary px classes with tailwind classes.
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