feat(home): implement and style first section at home

src/app/pages/home/home.html

@@ -1 +1,19 @@
-<p>home works!</p>
+<main class="flex flex-row justify-center items-center gap-10 py-10">
+    <div class="w-[40%]">
+        <span class="block text-[4rem]/[1.1] font-bold mb-4" [innerHTML]="'home.header' | translate"></span>
+        <span class="block text-[1.5rem]/[1.3] text-gray">{{ 'home.subheader' | translate }}</span>
+        <a class="block mt-5" href="https://www.google.com/maps/place/Dobersberg,+Nieder%C3%B6sterreich" target="_blank"><p-chip label="Dobersberg, Niederösterreich" icon="fa-solid fa-location-dot"/></a>
+    </div>
+    <div class="w-[40%]">
+        <img src="img/me.png" alt="">
+        <div class="pt-5 p-3 flex gap-3 flex-wrap justify-center">
+            <a pButton outlined severity="secondary" label="nico@td-haider.at" icon="fa-solid fa-envelope" href="mailto:nico@td-haider.at"></a>
+            <a pButton outlined severity="secondary" label="+43 670 2060140" icon="fa-solid fa-phone" href="tel:+436702060140"></a>
+        </div>
+        <div class="flex gap-3 justify-center text-[1.5rem] text-gray">
+            <a pButton text severity="secondary" icon="fa-brands fa-linkedin" href="https://www.linkedin.com/in/nico-haider-164444316/" target="_blank"></a>
+            <a pButton text severity="secondary" icon="fa-brands fa-instagram" href="https://www.instagram.com/nico.hdr8/" target="_blank"></a>
+            <a pButton text severity="secondary" icon="fa-brands fa-facebook" href="https://www.facebook.com/nico.haider.33" target="_blank"></a>
+        </div>
+    </div>
+</main>

src/app/pages/home/home.scss

@@ -0,0 +1,10 @@
+main {
+    img {
+        filter: drop-shadow(0 0 30px rgb(from var(--primary-color) r g b / 0.2));
+        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
+    }
+}
+
+.text-gray {
+    color: rgb(from var(--content-color) r g b / 0.7);
+}

src/app/pages/home/home.ts

@@ -1,8 +1,12 @@
 import { Component } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ChipModule } from 'primeng/chip';
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { ButtonModule } from 'primeng/button';
 
 @Component({
   selector: 'app-home',
-  imports: [],
+  imports: [TranslatePipe, ChipModule, FontAwesomeModule, ButtonModule],
   templateUrl: './home.html',
   styleUrl: './home.scss'
 })