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();
+  }
+}

src/styles.css

@@ -1,8 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=VT323&display=swap');
 
-@layer theme, tailwind-base, primeng, tailwind-utilities;
-
-@import "tailwindcss-primeui";
+@layer theme, tailwind-base, tailwind-utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/preflight.css" layer(tailwind-base);
@@ -27,7 +25,22 @@
     --color-nier-highlight: #5a5a50;  /* Highlight for selection */
   }
 }
+
 @layer tailwind-utilities {
+  /* Font utilities */
+  .font-terminal {
+    font-family: var(--font-terminal);
+  }
+
+  .font-terminal-retro {
+    font-family: var(--font-terminal-retro);
+  }
+
+  .font-terminal-nier {
+    font-family: var(--font-terminal-nier);
+  }
+
+  /* Background utilities */
   .bg-nier-bg {
     background-color: var(--color-nier-bg);
   }
@@ -40,6 +53,7 @@
     background-color: var(--color-nier-mid);
   }
 
+  /* Text utilities */
   .text-nier-dark {
     color: var(--color-nier-text-dark);
   }
@@ -48,10 +62,15 @@
     color: var(--color-nier-text-light);
   }
 
+  /* Border utilities */
   .border-nier-border {
     border-color: var(--color-nier-border);
   }
 
+  .border-nier-accent {
+    border-color: var(--color-nier-accent);
+  }
+
   /* Grid background utility */
   .bg-nier-grid {
     background-color: var(--color-nier-bg);
@@ -59,8 +78,39 @@
     linear-gradient(90deg, var(--color-nier-grid) 1px, transparent 1px);
     background-size: 20px 20px;
   }
-}
 
-@layer primeng {
-  /* Your PrimeNG customizations here */
+  /* Button utilities */
+  .nier-button {
+    background-color: var(--color-nier-mid);
+    color: var(--color-nier-text-dark);
+    border: 1px solid var(--color-nier-border);
+    font-family: var(--font-terminal-retro);
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+    transition: all 0.3s;
+  }
+
+  .nier-button:hover {
+    background-color: var(--color-nier-dark);
+    color: var(--color-nier-text-light);
+  }
+
+  .nier-button-active {
+    background-color: var(--color-nier-dark);
+    color: var(--color-nier-text-light);
+    border: 1px solid var(--color-nier-border);
+    font-family: var(--font-terminal-retro);
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+  }
+
+  /* Interactive element focus styles */
+  .nier-focus-ring {
+    outline: none;
+  }
+
+  .nier-focus-ring:focus-visible {
+    outline: 2px solid var(--color-nier-dark);
+    outline-offset: 1px;
+  }
 }