We need to build two web screens in Angular javascript frame work

Description: We need to layout these 2 screens (attached in designs below) in Angular javascript framework. Desing: [login to view URL] You are requested to create 2 main Components: 1. GalleryComponent: route should be: /{teamId?} It's the root component to open in the app, where it consists mainly of a sticky navbar and these 2 items lists: a) Teams rendered as icons, when clicking on an icon the b) list is changed. - Clicking on team, route changed to /{teamId} but GalleryComponent still rendered, only the b) list will change. - There is search icon to right, where user can search on other teams that not rendered on list a). - Component service has to return dummy data, no need to configure HTTP client. b) Snaps list, this list has infinite scroll feature where it renders list of snap objects: mainly a snap_id, thumbnail image, likes count, user_image and video icon when the snap type is video. - Objects should have dynamic height but a static width. This might help - For mobile, make it 2 per row instead of 6 - When scrolling down, show a preloader during the scroll so user knows there is data coming. This might help - Component service has to return dummy data, no need to configure HTTP client. 2. SnapComponent: route should be /snap/{id}, this Component renders an image or a HTML5 video regarding to snap type object returned. You'll need to pass the clicked on snap from GalleryComponent and the 1 snap before and after it, where user get the next object when he clicks on NEXT and previous when he clicks on PREV so you render them as a line shown in design. - This page is shareable, when the user gets in the page from outside, you will get array of 3 snaps object: first is the prev. snap, second is the current and the last is the next. - Because it's shareable, make sure you provide the correct SEO meta data, especially for the image (thumbnail) and title as: "User name" Snap about "Team Name" - All information returned in snap will be returned in api, so make sure to consider them as variables for now. - For mobile: no thumbnail needed for next and prev, the current snap object will take the all screen, with next and prev icons in right and left. Technical Requirements: 1- Angular 4 or + . 2- Clean SCSS/CSS code. 3- IoC: All components must not depend on each other when requesting their routes. 4- Responsive layout for all platforms. 5- Use dummy data all the way. 6- Only install packages you need. 7- SSR for SEO purposes. 8- Use Git for quicker reviews.