Home Page

[aclai4067]

Developer Story

As a user, when I navigate to the homepage after age verification, I should see the the homepage.

AC

WHEN I navigate to the homepage from the age verification modal THEN I should see the homepage set up with parallax scrolling. AND if the age is verified older then 21, then the user will see sections for about, beer, whiskey, books, and community. OR if the age is not 21, then the user will see sections for about, books and community.

Dev Notes

• [ ] If you haven't installed yet, install semantic-UI. npm i semantic-ui-react
• [ ] Create these 5 folders in the shared folder in Components.
  • [ ] AboutHome (Feel free to name these better)
  • [ ] BeerHome
  • [ ] WhiskeyHome
  • [ ] BooksHome
  • [ ] CommunityHome
• [ ] Create a javascript file and a css file in each of those folders.
  • [ ] AboutHome.js / AboutHome.scss (Feel free to name these better)
  • [ ] BeerHome.js / BeerHome.scss
  • [ ] WhiskeyHome.js / WhiskeyHome.scss
  • [ ] BooksHome.js / BooksHome.scss
  • [ ] CommunityHome.js / CommunityHome.scss

• [ ] Create a basic class function for the Homepage.js file.

  class HomePage extends React.Component {
  state = {
  verified = [ ]
  }
  
  render() {
    return {
     <div className="homepage">
           <About />
            {As you fill in details in the 5 shared components above, come back and add the 
              compenent here. Don't forget to import above.}
     </div>
    }
  }
  }

• [ ] Next, go to the AboutHomepage.js file. Choose a semantic UI design. Divide the component like so:

  class AboutHomePage extends React.Component {
  
  render() {
     return(
        <div className="aboutScroll"></div>
        <div className="aboutDetails">
                  { insert semantic UI design and about us details here}
        </div>
     );
  }
  }

• [ ] Remember to export the class at the bottom of the file.
• [ ] In the AboutHomepage.scss file add this code for Parallax scrolling design.

  
  .aboutScroll {
  background-image: url(insertImageHere);
  height: 100vh; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }

.aboutDetails { Any styling you may need for the semantic UI design starts here. }

- [ ] Repeat the last 4 checkboxes for each of the last 4 shared components (beer, whiskey, books, community).
- [ ] Since we will want to display data on the Homepage based on if the user is 21, the final Homepage.js file should look like this.

class HomePage extends React.Component { state = { verified = [ ] }

render() { return { (verified) ?

          : 
             <div className="homepage">
                   <AboutHome />
                   <BooksHome />
                   <CommunityHome />
             </div>
  }

} }

# Updates

*

# Which ticket in Notion does this relate to

*

[aclai4067]