Added advies

src/app/app.component.html

@@ -14,7 +14,6 @@
   </p>
 </div>
 </div>
-<div>
 <div class="wrapper" id="diensten">
   <div class="content">
     <h2>Diensten</h2>
@@ -66,10 +65,25 @@ Aanvraag van diverse andere vergunningen
   </div>
   <img src="assets/b-images/invoice.png" alt="factuur">
 </div>
-</div>
 <div class="alternate" id="advies">
 <div class="wrapper">
-  <h2>Advies</h2>
+  <img src="assets/b-images/advice.png" alt="advies">
+  <div class="content">
+    <h2>Advies</h2>
+    <app-collapse [icon]="'fa-money-check'" [title]="'Fiscaal advies'" [alternate]="true">
+    </app-collapse>
+    <app-collapse [icon]="'fa-receipt'" [title]="'Vennootschaprecht'" [alternate]="true">
+    </app-collapse>
+    <app-collapse [icon]="'fa-credit-card'" [title]="'Algemeen advies'" [alternate]="true">
+      Wij streven naar een deskundig advies op tal van kantelmomenten in de levensloop van uw zaak
+zoals onder meer bij de financiering van investeringen, bedrijfsovernames, overdracht van aandelen,
+waardering van de onderneming, contractuele overeenkomsten enz.
+    </app-collapse>
+    <app-collapse [icon]="'fa-coins'" [title]="'Vermogensplanning'" [alternate]="true">
+    </app-collapse>
+    <app-collapse [icon]="'fa-scale-balanced'" [title]="'Juridisch advies'" [alternate]="true">
+    </app-collapse>
+  </div>
 </div>
 </div>
 <div>

src/app/app.component.scss

@@ -70,7 +70,7 @@ h2 {
   background-color: $light;
 }
 
-#diensten {
+#diensten, #advies {
   .content {
     display: flex;
     flex-direction: column;
@@ -78,7 +78,7 @@ h2 {
   }
 }
 
-#wiezijnwe .wrapper {
+#wiezijnwe .wrapper, #advies .wrapper {
   display: flex;
   justify-content: space-between;
 

src/app/collapse/collapse.component.html

@@ -1,4 +1,4 @@
-<div class="wrapper">
+<div class="wrapper" [ngClass]="{'alternate': alternate}">
   <div class="heading" (click)="collapsed = !collapsed">
     <span class="fa-solid {{icon}}"></span>
     <h3>{{title}}</h3>

src/app/collapse/collapse.component.scss

@@ -8,6 +8,10 @@
   padding: 1rem;
 }
 
+.alternate {
+  background-color: $white;
+}
+
 .heading {
   display: flex;
   justify-content: space-between;

src/app/collapse/collapse.component.ts

@@ -8,6 +8,7 @@ import { Component, Input } from '@angular/core';
 export class CollapseComponent {
   @Input() public title: string = '';
   @Input() public icon: string = '';
+  @Input() public alternate: boolean = false;
 
   public collapsed: boolean = true;
 }