Added new layout

src/app/app.component.html

@@ -1,4 +1,6 @@
-<app-hero></app-hero>
-<app-header></app-header>
-<router-outlet></router-outlet>
-<app-footer></app-footer>
+<!-- <app-hero></app-hero> -->
+<div class="wrapper">
+  <app-header></app-header>
+  <app-services></app-services>
+  <app-footer></app-footer>
+</div>

src/app/app.component.scss

@@ -0,0 +1,5 @@
+.wrapper {
+  max-width: 40rem;
+  padding: 0 1rem;
+  margin: 0 auto;
+}

src/app/app.component.ts

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
 import { HeroComponent } from "./hero/hero.component";
 import { HeaderComponent } from "./header/header.component";
 import { FooterComponent } from "./footer/footer.component";
+import { ServicesComponent } from "./services/services.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeroComponent, HeaderComponent, FooterComponent],
+  imports: [HeroComponent, HeaderComponent, FooterComponent, ServicesComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

src/app/footer/footer.component.html

@@ -1 +1,11 @@
-<p>footer works!</p>
+<div>
+  <h2>Contact me</h2>
+  <p>If you’re ready to bring your ideas to life, feel free to reach out. I’m here to help make your vision a reality with practical, innovative solutions—let’s connect and get started!</p>
+</div>
+
+<div>
+  <p>Arne Vlaeminck</p>
+  <a href="mailto:arne@cptarn.com">arne&#64;cptarn.com</a>
+  <a href="cptarn.com">cptarn.com</a>
+  <p>BE 0800 396 191</p>
+</div>

src/app/footer/footer.component.scss

@@ -0,0 +1,7 @@
+:host {
+  color: #696969;
+  font-style: italic;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/app/footer/footer.component.ts

@@ -8,5 +8,5 @@ import { Component } from '@angular/core';
   styleUrl: './footer.component.scss'
 })
 export class FooterComponent {
-
+  public currentYear: number = new Date().getUTCFullYear();
 }

src/app/header/header.component.html

@@ -1 +1,5 @@
-<p>header works!</p>
+<img src="assets/white-header-logo.svg" />
+<div class="menu">
+  <a href="#">About</a>
+  <a href="#">Contact</a>
+</div>

src/app/header/header.component.scss

@@ -0,0 +1,23 @@
+:host {
+  border-bottom: 1px solid #fff;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 0;
+}
+
+img {
+  max-height: 5rem;
+}
+
+.menu {
+  font-style: italic;
+  display: flex;
+  gap: 3rem;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+    align-content: center;
+  }
+}

src/app/hero/hero.component.scss

@@ -2,6 +2,7 @@
   width: 100%;
   height: 75%;
   display: inline-block;
+  background-color: #e94d1a;
 }
 
 .hero-text {
@@ -10,4 +11,6 @@
   position: relative;
   left: calc(30% - 5rem);
   top: 40%;
+  font-weight: bold;
+  color: white;
 }

src/app/services/services.component.html

@@ -0,0 +1,33 @@
+<div class="left">
+  <div class="text">
+    <h2>Creative thinker with a solution focus.</h2>
+    <p>Welcome to my creative workspace! I’m a solution-driven freelancer with a passion for blending innovative thinking with technical know-how to bring unique ideas to life. Whether you’re looking to build a prototype, develop custom code, or create a tailored automation system, I’m here to help turn your vision into a reality. My approach combines hands-on experience with a fresh perspective, ensuring that every project isn’t just functional, but forwardthinking and impactfu</p>
+  </div>
+  <img src="assets/service-1.svg" />
+</div>
+<div class="right">
+  <div class="text">
+      <h2>Collaboration is at the heart of my work.</h2>
+      <p>I strive to understand not only the technical requirements but also the goals and
+        challenges unique to each project. By working closely with my clients, I ensure
+        that each solution is designed with both practicality and creativity in mind. No
+        matter the scope or complexity, I’m committed to providing efficient, reliable
+        solutions that help you innovate, save time, and stay ahead. Let's work together
+        to make your next project a success!</p>
+  </div>
+  <img src="assets/service-2.svg" />
+</div>
+<div class="full">
+  <div class="text">
+    <h2>For all projects involving prototyping, coding or automation</h2>
+    <p>With a background in IT, engineering, and automation, I offer a versatile skill set to
+      tackle projects across different industries. From streamlining factory processes to
+      designing smart home systems and creating user-friendly software solutions, I tailor
+      my work to meet the specific needs of each client. My technical expertise spans
+      from prototyping to coding and complex automation, allowing me to support
+      projects from the concept phase right through to completion. I believe that the
+      right technology can enhance productivity and improve daily workflows, whether in
+      a corporate environment or your own home.</p>
+  </div>
+  <img src="assets/service-3.svg" />
+</div>

src/app/services/services.component.scss

@@ -0,0 +1,36 @@
+:host {
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+h2 {
+  font-weight: 500;
+  font-style: italic;
+}
+
+.left, .right {
+  display: flex;
+  justify-content: center;
+
+  .text {
+    max-width: 50%;
+  }
+
+  img {
+    max-width: 50%;
+  }
+}
+
+.right {
+  flex-direction: row-reverse;
+  text-align: end;
+}
+
+.full {
+  img {
+    max-width: 100%;
+    margin-top: 2rem;
+  }
+}

src/app/services/services.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicesComponent } from './services.component';
+
+describe('ServicesComponent', () => {
+  let component: ServicesComponent;
+  let fixture: ComponentFixture<ServicesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ServicesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ServicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/services/services.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-services',
+  standalone: true,
+  imports: [],
+  templateUrl: './services.component.html',
+  styleUrl: './services.component.scss'
+})
+export class ServicesComponent {
+
+}

src/index.html

@@ -6,6 +6,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <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:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1,6 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 body {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   margin: 0;
 }
+
+body {
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: normal;
+  font-style: normal;
+  background: linear-gradient(180deg, #E94E1B 0%, #2B2B2B 24.67%, #2B2B2B 63.56%, #000000 96.31%, #000000 100%);
+}
+
+html {
+  background-color: #000000;
+}