Home Page of Book

[ethmth]

Background Information on Book/Pages Components

Right now, our "Book" renders all of its pages from the 'src/components/Pages.jsx' file. Upon inspection of that file, you will see that each "page" is an array with two components, the left and right page. These 2-arrays are put together to make up all of the pages.

For specific types of pages, like Speaker pages or Event pages, I call custom functions like "getSchedulePages" or "getSpeakerPages" to return those pages. Other pages, like HomePage and TracksPage are hard-coded into the Pages.jsx component. Each of these individual components are organized in 'src/components/pages.'

Finally, I pass in an "updatePage" function and "pageDictionary" object as props to components that need them, including the components you will probably work on. The pageDictionary object contains mappings from page name to page number. For example, one pair it includes is {"Speakers": 3} which tells us that the "Speakers" start on page 3. updatePage allows you to update the page. IF YOU DO NOT UNDERSTAND THIS PART ASK.

Home Page of Book Task

Right now the home page has nothing:

And we want to make it look like a comic book.

Your task is to update the HomePage component found in 'src/components/pages/home'. You should make the following updates:

1. Make a big "DevFest 24" title or something like that to really catch the eye.
2. Add a brief description of what DevFest is, such as this one from last year's website (2023.devfestcu.com):
3. Create a "Register" button that leads to the registration website (I currently do not know what this URL should be. You can either put a placeholder or ask Ellen)
4. Do all of these things in a very "comic-booky" style. See the Figma for inspiration (this page isn't designed in the Figma, but you can see others for inspiration).

Remember, this page is going to be the first thing that our users see when they load the website, so make it look good.

Feel free to install any necessary packages, install any custom fonts (via npm packages or ttf files added to the correct location: public/fonts), or create any new components/styling. I just ask that your styling stays contained to your part of the project. If you have any questions do not hesitate to ask.

[ethmth]

There's now a design in the figma under the 'pages' tab in the 'Wireframe' Here's what it currently looks like: