Hello I need the solution of this sample please in first there is the sample and followed with the requirements for the sample its one question with steps so please i need the solution for the sample as it is and not only one part cause the figures are requirements . Thank you

- 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. This project covers two parts: . Bootstrap: 10% Angular: 10% The final result of the project will be similar to the following snaps: Blood Donation Home New Donor Search Donor ad1 this is an ad 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. ad1 GIVE BLOOD SAVE LIFE this is an ad Blood groups? open google A- A+ AB-AB+ . . . AB AB- A+ ad1 . . . this is an ad A- B+ o . . . B- O+ . . ad1 O- this is an ad How to donate? Facebook page Click to register +2415241529245246247248214 Blood Donation Home New Donor Search Donor Select the blood group O+ ad1 0+ Tripoly donor3@gmail.com this is an ad 0+ Tripoly donor7@gmail.com ad1 this is an ad open google ad1 this is an ad ad1 this is an ad Facebook page 48214 7824 us 48214 ocalhost:4200/= Figure 2: large screen search donor page Blood Donation Home New Donor Search Donor Select the blood group ad1 this is an ad Address: address ad1 this is an ad Email: open google enter your email Are you infected by one of the following? HIV, Corona ad1 Additional info: this is an ad ad1 this is an ad Register Facebook page 48214748274828282828242821 Figure 3: large screen New Donor page 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. Figure 3: large screen New Donor page 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 Donors Data service The ads Data service Use the command: ng generate service serviceName to auto generate a service (recommended) In this project we will handle with two objects: In this project we will handle with two objects: O a donor object having the bellow data fields: bloodgroup address email additional info an ad object having the bellow data fields title body link linktext 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 . 1 . 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 45245245214 $ CSC1426 Project Fall 2021-2022 A sticky footer at the bottom of the page with a fluid image. The Home component On above medium screen size: H3 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. GIVE BLOOD SAVE LIFE Blood groups? AB . . . . 00000000 . . How to donate? Click to register Link: when clicked opens the New Donor page On below medium screen size: On below medium screen size: Blood Donation 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 chilot, you may support the recovery of a cancer patient receiving chemotherapy-- 400 donations per day are needed Blood groups? 000000 How to donate? Click to register S24452A - The New Donor component: Select the blood group AB+ Address: Beirut, Lebanon Email: myemail@gmail.com Are you infected by one of the following? HIV, Corona O Additional info: more information about me Register When the register button is clicked it will call a method to add a donor to the donors list in the DonorData service. Note: if the donor is infected (checkbox is checked) then an alert will be shown to notify that infected people cannot register, otherwise a success notification will be shown. failed to register! infected cannot donate blood. successfully registered! Select the blood group Select the blood group AR The Search Donor Component: Blood Donation Home New Donor Search Donor Select the blood group O+ V 0+ 0- AB+ AB- A- A- B+ B- . o When the selected blood group changes, it calls a method that takes the selected value as parameter. The method calls the getDonorsByGroup from DonorsData service If the result is empty set the empty result variable 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 O O . CSC1426 Project Fall 2021-2022 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 . O The email is displayed as button. When clicked a modal similar to the below will popup. The To field must be prefilled with the donor email. Hint: use a variable that holds the receiver email. When the button is clicked call a method to set this variable value. O Search Dono New message 3+ ad1 From: sender email this is an ac To: hello@live.com Blood Donation ad1 Subject: Message: this is an ad open goog ad1 this is an ac Cancel Send ad1 this is an ac Facebook p The ads Panel component: 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. ad1 this is an ad Each ad object has: a title, a body, a link and a link text. 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