Create an angular project with routing enabled and bootstrap 4.x installed. Attached are the used pictures. You may use them or use another pictures that can be more suitable for the page design. . . The project must have the following components: The app component (default component) The header component The footer component The home component The new Donor component The search Donor component The ads Panel component . . And the following services: The DonorsData service The adsData service Use the command: ng generate service serviceName to auto generate a service (recommended) In this project we will handle with two objects: a donor object having the bellow data fields: o bloodgroup o address o email o additional info an ad object having the bellow data fields title body link linktext 0 O O O The App component Above medium screen size: Header The router outlet The ads panel Footer Below medium screen size Header The router outlet The ads panel The Footer The Donors Data service it has an array of donors, fill it with 10 donors it has a method getDonorsByGroup(group) . the method returns an array of donors having the same bloodgroup as the passed argument it has a method addDonor(donor) the method adds the passed argument to the donors array The adsData service it has an array of ads, fill it with 5 ads it has a method getAds() the method returns the array of ads The Header component Blood Donation Home New Donor Search Donor The navigation is managed by routing. The Footer component +4521452144452114482752141521242448244- $ A sticky footer at the bottom of the page with a fluid image. The Home component On above medium screen size: H3 GIVE BLOOD SAVE LIFE Why donate? Every 4 minutes someone in Lebanon needs blood. It may be following an accident, during surgery or to support the treatment of an illness. By donating blood you may help a woman who has bled during childbirth you may support the recovery of a cancer patient receiving chemotherapy... 400 donations per day are needed. Blood groups? A CAPABAB 00000000 OOOOOO How to donate? Click to register Link: when clicked opens the New Donor page On below medium screen size: Blood Donation SAVE LIFE Why donate? Breyterenye holowing continuery or to Decorating to your home during one anotiert receiving correct Blood groups? 00000000 How to donate? Com The Search Donor Component: Blood Donation Home New Donor Soach Monor Select the bloodyeup O+ 04 0. AB AB A+ A B. When the selected blood group changes, it calls a method that takes the selected value as parameter. o The method calls the getDonorsByGroup from DonorsData service o If the result is empty set the empty result variable o Otherwise, set the donorsList variable (an array of donors objects) If the empty result variable is set then display a message to notify that there is no result . Select the blood group B- Sorry! no donors found for B- If the donorList is set then display donors as table Select the blood group AB+ AB+ Beirut donor2@gmail.com AB+ Beirut hello@live.com AB+ Beirut donor10@gmail.com The email is displayed as button. When clicked a modal similar to the below will popup. o The To field must be prefilled with the donor email. o Hint: use a variable that holds the receiver email. When the button is clicked call a method to set this variable value. Search comes New message ad1 From: sender email this is an ad To: hello@live.com Blood Donation ad1 Subject: Message: this is an a open goog ad1 this is an a Cancel Send adt this is an ac Facebook ad1 The ads Panel displays a list of cards these cards are populated from an array declared in ads component script. The array is initialized from adsData service. Each ad object has: a title, a body, a link and a link text. this is an ad ad1 Note: you have to verify if the link data field is set or not. If it is set then add a link part to the card. this is an ad open google ad1 this is an ad ad1 this is an ad Facebook page Extra Replace the left side image in the home component by a slideshow component. The slideshow component contains a carousel that loads the images paths and the captions from an array in the slideshow component script. The final result of the project will be similar to the following snaps: ad1 this is an ad Blood Donation Home New Soner Search Danor Why donate? a Every 4 minutes someone in Lebanon needs blood. It may be following an accident, during surgery or to support the treatment of an illness. By GIVE donating blood you may help a woman who has bled during childbirth you may support the restery of a cancer patient receiving BLOOD chemotherapy... 400 donations per day are needed. SAVE Blood groups? LIFE ----- ad1 this is an ad open google .. 1 ... ad1 this is an ad 00000000 . . . ad1 this is an ad Facebook page How to donate? Click to register +452145247924449277492149244 +45211921 Figure 1: large screen home page Blood Donation Home New Design Search Donut Select the blood group O. ad1 O+ Tripoly dunen3@gmail.com this is an ad 0+ Tripoly donor7@gmail.com ad1 this is an ad open google adi this is an ad adi this is an ad Facebook page **$2414-4824+244 +452452414424449214-524 ocs host 4200 Figure 2: large screen search donor page Page 1 / 7 + Blood Donation Home New Lonor Search Donor Select the blood group ad1 this is an ad Address: address adi this is an ad Email: open google enter your email adi Are you infected by one of the following? HIV, Corona Additional info: this is an ad ad1 this is an ad Register Facebook page $21+4521215244 45246-52482182124S2pm Figure 3: large screen New Donor page