Added collapse component

src/app/app.component.html

@@ -16,7 +16,55 @@
 </div>
 <div>
 <div class="wrapper" id="diensten">
-  <h2>Diensten</h2>
+  <div class="content">
+    <h2>Diensten</h2>
+    <app-collapse [icon]="'fa-book-open'" [title]="'Boekhouding/Accountancy'">
+      <ul>
+        <li>Het voeren van de boekhouding van A tot Z (met inbegrip van alle BTW verplichtingen)</li>
+        <li>ul bezorgen u geregeld (of op verzoek) een tussentijds resultaat zodat onder meer</li>
+        <li>voorafbetalingen van belasting optimaal kunnen opgevolgd worden</li>
+        <li>Ondersteuning van uw interne boekhoudafdeling</li>
+        <li>Opmaken van de interne jaarrekening en de statutaire jaarrekening (NBB)</li>
+        <li>Opstellen van de verslagen aan en van de algemene vergadering</li>
+      </ul>
+    </app-collapse>
+    <app-collapse [icon]="'fa-shield-halved'" [title]="'Fiscaliteit/Fiscale controles'">
+        Het opmaken / indienen van aangiften m.b.t. onder meer:
+        ◦ Btw
+        ◦ Personenbelasting
+        ◦ Vennootschapsbelasting
+        ◦ Rechtspersonenbelasting
+        ◦ Belasting van niet-inwoners (natuurlijke personen en  vennootschappen)
+        ◦ Diverse andere aangiften ...
+    </app-collapse>
+    <app-collapse [icon]="'fa-forward-fast'" [title]="'Hulp bij opstart'">
+      Eenmanszaak of Vennootschap?
+Wij helpen je de juiste keuze te maken.
+De keuze tussen een éénmanszaak of vennootschap heeft fiscale, boekhoudkundige en juridische
+gevolgen.
+
+We informeren je over de voor- en nadelen, helpen je de keuze te maken, en verwittigen je tijdig
+indien een omschakeling nuttig is.
+
+Vanaf het moment van de opstart van uw zaak kunnen wij u bijstaan in de administratieve
+verwerking van de opstartformaliteiten zoals onder meer :
+Opstellen van het financieel plan
+Opstellen van het ontwerp van statuten bij de oprichting van vennootschappen / tussenkomst bij
+de notaris
+Inschrijving bij de kruispuntbank ondernemingen (KBO)
+Aansluiting(en) bij een sociaal verzekeringsfonds
+Aanvraag van het BTW identificatienummer
+Inschrijving in het UBO register
+Aanvraag van diverse andere vergunningen
+    </app-collapse>
+    <app-collapse [icon]="'fa-square-up-right'" [title]="'Waardering van de onderneming & Vereffening van de vennootschap'">
+    </app-collapse>
+    <app-collapse [icon]="'fa-handshake'" [title]="'Management accounting'">
+    </app-collapse>
+    <app-collapse [icon]="'fa-money-bill'" [title]="'Andere accountancy dienstverlening'">
+    </app-collapse>
+  </div>
+  <img src="assets/b-images/invoice.png" alt="factuur">
 </div>
 </div>
 <div class="alternate" id="advies">

src/app/app.component.scss

@@ -70,6 +70,14 @@ h2 {
   background-color: $light;
 }
 
+#diensten {
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+}
+
 #wiezijnwe .wrapper {
   display: flex;
   justify-content: space-between;
@@ -119,7 +127,7 @@ h2 {
   }
 }
 
-#vacatures, #klantworden {
+#vacatures, #klantworden, #diensten {
   display: flex;
   justify-content: space-between;
 

src/app/app.module.ts

@@ -4,11 +4,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
+import { CollapseComponent } from './collapse/collapse.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
+    CollapseComponent,
   ],
   imports: [
     BrowserModule,

src/app/collapse/collapse.component.html

@@ -0,0 +1,10 @@
+<div class="wrapper">
+  <div class="heading" (click)="collapsed = !collapsed">
+    <span class="fa-solid {{icon}}"></span>
+    <h3>{{title}}</h3>
+    <span class="fa-solid" [ngClass]="{'fa-chevron-up': !collapsed, 'fa-chevron-down': collapsed}"></span>
+  </div>
+  <div class="collapse" [ngClass]="{'collapsed': collapsed}">
+    <ng-content></ng-content>
+  </div>
+</div>

src/app/collapse/collapse.component.scss

@@ -0,0 +1,37 @@
+
+@import '../../styles.scss';
+
+.wrapper {
+  overflow: hidden;
+  background-color: $light;
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+.heading {
+  display: flex;
+  justify-content: space-between;
+}
+
+h3 {
+  width: 80%;
+  margin: 0;
+}
+
+span {
+  font-size: 2rem;
+}
+
+.collapse {
+  padding-left: 3rem;
+  border-left: 2px solid $secondary-color;
+  max-height: 20rem;
+  transition: max-height 0.5s ease-in;
+  overflow: hidden;
+}
+
+.collapsed {
+  max-height: 0rem;
+  overflow: hidden;
+  transition: max-height 0.5s ease-in;
+}

src/app/collapse/collapse.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CollapseComponent } from './collapse.component';
+
+describe('CollapseComponent', () => {
+  let component: CollapseComponent;
+  let fixture: ComponentFixture<CollapseComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CollapseComponent]
+    });
+    fixture = TestBed.createComponent(CollapseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/collapse/collapse.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-collapse',
+  templateUrl: './collapse.component.html',
+  styleUrls: ['./collapse.component.scss']
+})
+export class CollapseComponent {
+  @Input() public title: string = '';
+  @Input() public icon: string = '';
+
+  public collapsed: boolean = true;
+}

src/index.html

@@ -9,6 +9,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
   <style>
     html {