some improvements

Author: andreromao

src/app/landing-page/landing-page.component.css

@@ -332,3 +332,10 @@
   row-gap: 2rem;
   column-gap: 1rem;
 }
+
+.offers img {
+  max-height: 20vh;
+  max-width: 100%;
+  height: auto;
+  width: auto;
+}

src/app/landing-page/landing-page.component.html

@@ -35,6 +35,11 @@
             About Us
           </a>
         </li>
+        <li class="socials-nav-item">
+          <a (click)="scroll(offers)" class="navigation-link" aria-label="Offers">
+            Offers
+          </a>
+        </li>
         <li class="socials-nav-item">
           <a (click)="scroll(faq)" class="navigation-link" aria-label="FAQ">
             FAQ
@@ -84,6 +89,11 @@
             About Us
           </a>
         </li>
+        <li class="socials-nav-item">
+          <a (click)="scroll(offers);toggleDropdown()" class="navigation-link" aria-label="Offers">
+            Offers
+          </a>
+        </li>
         <li class="socials-nav-item">
           <a (click)="scroll(faq);toggleDropdown()" class="navigation-link" aria-label="FAQ">
             FAQ
@@ -469,7 +479,7 @@ <h6>Target</h6>
       </section>
       <mat-divider></mat-divider>
 
-      <section #faq class="price-area section-padding" style="margin-bottom: 5%;" id="the-event">
+      <section #offers class="price-area section-padding" style="margin-bottom: 5%;">
         <div class="container">
           <div class="row">
             <div class="text-center">
@@ -480,13 +490,12 @@ <h2 class="text-center">Offers</h2>
                 </p>
                 <div class="offers">
                   <mat-card *ngFor="let offer of promocodes" class="example-card" style="padding: 5%;">
-                    <a href="{{offer.company.site}}" style="width: 100%;">
-                      <img src="{{offer.company.img}}" alt="{{offer.company.name}} logo" style="width: 100%;">
-                    </a>
+                    <img src="{{offer.company.img}}" alt="{{offer.company.name}} logo">
+
                     <div class="text-alt description">
                       <small>{{offer.description}}</small>
                     </div>
-                    <a *ngIf="offer.link" href="{{offer.code}}" class="btn btn-rounded btn-outline-clr btn-sm" style="margin-top: 2%;">
+                    <a *ngIf="offer.link" href="{{offer.code}}" target="_blank" class="btn btn-rounded btn-outline-clr btn-sm" style="margin-top: 2%;">
                       Claim Offer
                     </a>
                     <div *ngIf="!offer.link" style="display:flex; flex-direction: column; margin-top: 2%;">