Removed Primeng in favor of custom made components for easier styling (Too many Tailwind conflicts)

src/app/app.config.ts

@@ -2,23 +2,7 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { providePrimeNG } from 'primeng/config';
-import Aura from '@primeng/themes/aura'; // Choisissez votre thème
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes),
-    provideAnimationsAsync(),
-    providePrimeNG({
-      theme: {
-        preset: Aura,
-        options: {
-          cssLayer: {
-            name: 'primeng',
-            order: 'tailwind-base, primeng, tailwind-utilities'
-          }
-        }
-      }
-    })
-  ]
+  providers: [provideRouter(routes), provideAnimationsAsync()],
 };

src/app/features/header-display/header-nav-links/header-nav-links.component.html

@@ -1,20 +1,8 @@
 <nav>
   <section>
-  <p-button
-    label="Neural Profile"
-    (onClick)="onClick()"
-  ></p-button>
-  <p-button
-    label="Execute//Directory"
-    (onClick)="onClick()"
-  ></p-button>
-  <p-button
-    label="Operative History"
-    (onClick)="onClick()"
-  ></p-button>
-    <p-button
-      label="Transmission Link"
-      (onClick)="onClick()"
-    ></p-button>
+    <app-button label="Neural Profile" (click)="onClick()"/>
+    <app-button label="Execute//Directory" (click)="onClick()"/>
+    <app-button label="Operative History" (click)="onClick()"/>
+    <app-button label="Transmission Link" (click)="onClick()"/>
   </section>
 </nav>

src/app/features/header-display/header-nav-links/header-nav-links.component.ts

@@ -1,16 +1,15 @@
 import { Component } from '@angular/core';
 
-
-import { ButtonModule } from 'primeng/button';
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
 
 @Component({
   selector: 'app-header-nav-links',
-  imports: [ButtonModule],
+  imports: [ButtonComponent],
   templateUrl: './header-nav-links.component.html',
-  styleUrl: './header-nav-links.component.css'
+  styleUrl: './header-nav-links.component.css',
 })
 export class HeaderNavLinksComponent {
-  onClick(){
+  onClick() {
     console.log('click');
   }
 }

src/app/features/hero-display/hero-display.component.html

@@ -1,4 +1,4 @@
-<section>
-  <article><p>HERO SECTION</p></article>
-  <article><p>CREATIVE DEVELOPER</p></article>
+<section class="">
+  <article><p class="text-6xl">HERO SECTION</p></article>
+  <article><p class="text-9xl">CREATIVE DEVELOPER</p></article>
 </section>

src/app/layout/components/main-layout/main-layout.component.html

@@ -1,8 +1,8 @@
 <app-header />
 <main class="bg-nier-bg">
   <app-hero />
-  <app-about />
   <app-projects />
+  <app-about />
   <app-contact />
   <app-sidebar />
 </main>

src/app/shared/ui/button/button.component.html

@@ -0,0 +1,2 @@
+<button [class]="getButtonClass()"
+  (onClick)="handleClick()">{{label()}}</button>

src/app/shared/ui/button/button.component.ts

@@ -0,0 +1,31 @@
+import { Component, input, output } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  imports: [],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css',
+})
+export class ButtonComponent {
+  label = input<string>('label');
+  selected = input<boolean>(false);
+  isNav = input<boolean>(false);
+  onClick = output<void>();
+
+  getButtonClass() {
+    const baseClass =
+      'font-terminal-retro uppercase transition-all duration-300';
+
+    if (this.isNav()) {
+      return `${baseClass} bg-transparent text-nier-text-dark border-0 hover:underline`;
+    }
+
+    return this.selected()
+      ? `${baseClass} bg-nier-dark text-nier-text-light border border-nier-border rounded-none`
+      : `${baseClass} bg-nier-mid text-nier-text-dark border border-nier-border rounded-none hover:bg-nier-dark hover:text-nier-text-light`;
+  }
+
+  handleClick() {
+    this.onClick.emit();
+  }
+}