From 2b2397e8a57415b5696a944111cb5f7c01abb041 Mon Sep 17 00:00:00 2001
From: AdamBtech <60339324+AdamBtech@users.noreply.github.com>
Date: Tue, 20 May 2025 15:55:02 +0200
Subject: [PATCH] Added extra fonts, started button reusable component

---
 angular.json                                  |  3 +-
 .../about-display.component.html              |  4 +-
 .../contact-display.component.html            | 15 +++++-
 .../footer-display.component.html             |  4 +-
 .../header-logo/header-logo.component.html    |  2 +-
 .../header-nav-links.component.html           | 12 ++---
 .../hero-display/hero-display.component.html  |  4 +-
 .../projects-list.component.html              |  2 +-
 .../sidebar-display.component.html            |  3 +-
 .../main-layout/main-layout.component.html    |  2 +-
 src/app/shared/ui/button/button.component.css |  4 ++
 .../shared/ui/button/button.component.html    |  8 +++-
 src/app/shared/ui/button/button.component.ts  | 15 ------
 src/styles.css                                | 48 +++----------------
 tailwind.config.js                            |  1 +
 15 files changed, 49 insertions(+), 78 deletions(-)

diff --git a/angular.json b/angular.json
index c3b32aa..63f4226 100644
--- a/angular.json
+++ b/angular.json
@@ -86,8 +86,7 @@
               }
             ],
             "styles": [
-              "src/styles.css",
-              "./node_modules/tailwindcss-primeui/v4/index.css"
+              "src/styles.css"
             ],
             "scripts": []
           }
diff --git a/src/app/features/about-display/about-display.component.html b/src/app/features/about-display/about-display.component.html
index d759943..09b500c 100644
--- a/src/app/features/about-display/about-display.component.html
+++ b/src/app/features/about-display/about-display.component.html
@@ -1,3 +1,3 @@
-<section>
-  <p>ABOUT SECTION</p>
+<section class="border-b-1 h-100 flex items-center justify-center">
+  <p class="text-6xl font-terminal-retro">ABOUT SECTION</p>
 </section>
diff --git a/src/app/features/contact-display/contact-display.component.html b/src/app/features/contact-display/contact-display.component.html
index 66159c9..2917da1 100644
--- a/src/app/features/contact-display/contact-display.component.html
+++ b/src/app/features/contact-display/contact-display.component.html
@@ -1,3 +1,14 @@
-<section>
-  <p>CONTACT FORM AND LINKS</p>
+<section class="border-b-1 h-100 flex items-top justify-top bg-nier-bg p-6 relative">
+  <!-- First shadow layer (white/light) -->
+  <p class="absolute text-6xl font-noto-jp text-white opacity-50" style="top: 1.5rem; left: 1.5rem; transform: translate(1px, 1px);">
+    CONTACT FORM AND LINKS
+  </p>
+  <!-- Second shadow layer (dark) -->
+  <p class="absolute text-6xl font-noto-jp text-black opacity-15" style="top: 1.5rem; left: 1.5rem; transform: translate(5px, 10px);">
+    CONTACT FORM AND LINKS
+  </p>
+  <!-- Main text on top -->
+  <p class="relative text-6xl font-noto-jp text-nier-dark z-10">
+    CONTACT FORM AND LINKS
+  </p>
 </section>
diff --git a/src/app/features/footer-display/footer-display.component.html b/src/app/features/footer-display/footer-display.component.html
index 8da4d90..1765f09 100644
--- a/src/app/features/footer-display/footer-display.component.html
+++ b/src/app/features/footer-display/footer-display.component.html
@@ -1,3 +1,3 @@
-<footer class="bg-nier-bg">
-  <p>FOOTER</p>
+<footer class="bg-nier-dark border-b-1 h-100 flex items-center justify-center text-nier-light">
+  <p class="text-6xl font-terminal-retro">FOOTER</p>
 </footer>
diff --git a/src/app/features/header-display/header-logo/header-logo.component.html b/src/app/features/header-display/header-logo/header-logo.component.html
index dc273e2..9064105 100644
--- a/src/app/features/header-display/header-logo/header-logo.component.html
+++ b/src/app/features/header-display/header-logo/header-logo.component.html
@@ -1 +1 @@
-<p class="font-terminal-nier  text-xl">AB</p>
+<p class="font-terminal-nier text-8xl">AB</p>
diff --git a/src/app/features/header-display/header-nav-links/header-nav-links.component.html b/src/app/features/header-display/header-nav-links/header-nav-links.component.html
index a98c7a8..c814295 100644
--- a/src/app/features/header-display/header-nav-links/header-nav-links.component.html
+++ b/src/app/features/header-display/header-nav-links/header-nav-links.component.html
@@ -1,8 +1,8 @@
-<nav>
-  <section>
-    <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()"/>
+<nav class="flex items-center justify-center">
+  <section class="grid grid-cols-2 gap-4 mt-4">
+    <app-button class="flex items-center" label="Neural Profile" (click)="onClick()"/>
+    <app-button class="flex items-center" label="Execute//Directory" (click)="onClick()"/>
+    <app-button class="flex items-center" label="Operative History" (click)="onClick()"/>
+    <app-button class="flex items-center" label="Transmission Link" (click)="onClick()"/>
   </section>
 </nav>
diff --git a/src/app/features/hero-display/hero-display.component.html b/src/app/features/hero-display/hero-display.component.html
index d32e204..d9045dc 100644
--- a/src/app/features/hero-display/hero-display.component.html
+++ b/src/app/features/hero-display/hero-display.component.html
@@ -1,4 +1,4 @@
 <section class="">
-  <article><p class="text-6xl">HERO SECTION</p></article>
-  <article><p class="text-9xl">CREATIVE DEVELOPER</p></article>
+  <article class="border-b-1 h-100 flex items-center justify-center"><p class="text-9xl font-terminal-retro">HERO SECTION</p></article>
+  <article class="border-b-1 h-100 flex items-center justify-center"><p class="font-terminal-nier text-9xl">CREATIVE DEVELOPER</p></article>
 </section>
diff --git a/src/app/features/project-display/components/projects-list/projects-list.component.html b/src/app/features/project-display/components/projects-list/projects-list.component.html
index c8f248c..ebfcbe8 100644
--- a/src/app/features/project-display/components/projects-list/projects-list.component.html
+++ b/src/app/features/project-display/components/projects-list/projects-list.component.html
@@ -1,4 +1,4 @@
 <section>
-  <article><p>PROJECT LIST</p></article>
+  <article class="border-b-1 h-100 flex items-center justify-center"><p class="text-6xl font-terminal-retro">PROJECTS</p></article>
 </section>
 
diff --git a/src/app/features/sidebar-display/sidebar-display.component.html b/src/app/features/sidebar-display/sidebar-display.component.html
index 4f877f1..3a7b9b0 100644
--- a/src/app/features/sidebar-display/sidebar-display.component.html
+++ b/src/app/features/sidebar-display/sidebar-display.component.html
@@ -1 +1,2 @@
-<p>SIDEBAR</p>
+
+<p class="font-terminal-retro">SIDEBAR</p>
diff --git a/src/app/layout/components/main-layout/main-layout.component.html b/src/app/layout/components/main-layout/main-layout.component.html
index 3c75ac3..df4ca0f 100644
--- a/src/app/layout/components/main-layout/main-layout.component.html
+++ b/src/app/layout/components/main-layout/main-layout.component.html
@@ -4,6 +4,6 @@
   <app-projects />
   <app-about />
   <app-contact />
-  <app-sidebar />
 </main>
 <app-footer />
+<app-sidebar />
diff --git a/src/app/shared/ui/button/button.component.css b/src/app/shared/ui/button/button.component.css
index e69de29..091111c 100644
--- a/src/app/shared/ui/button/button.component.css
+++ b/src/app/shared/ui/button/button.component.css
@@ -0,0 +1,4 @@
+.button-hover:hover {
+  background-color: var(--color-nier-dark);
+  color: var(--color-nier-text-light);
+}
diff --git a/src/app/shared/ui/button/button.component.html b/src/app/shared/ui/button/button.component.html
index d17bd4b..7de1e8f 100644
--- a/src/app/shared/ui/button/button.component.html
+++ b/src/app/shared/ui/button/button.component.html
@@ -1,2 +1,6 @@
-<button [class]="getButtonClass()"
-  (onClick)="handleClick()">{{label()}}</button>
+<button
+  class="w-48 text-left font-noto-jp text-base uppercase transition-all duration-300 bg-nier-mid text-nier-dark rounded-none button-hover p-1.5"
+  (click)="handleClick()"
+>
+  {{ label() }}
+</button>
diff --git a/src/app/shared/ui/button/button.component.ts b/src/app/shared/ui/button/button.component.ts
index 7da9b85..7da07a9 100644
--- a/src/app/shared/ui/button/button.component.ts
+++ b/src/app/shared/ui/button/button.component.ts
@@ -8,23 +8,8 @@ import { Component, input, output } from '@angular/core';
 })
 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();
   }
diff --git a/src/styles.css b/src/styles.css
index 9f75f73..9ea89a7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=VT323&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=Noto+Sans+JP:wght@300;400;500&family=VT323&display=swap');
 
 @layer theme, tailwind-base, tailwind-utilities;
 
@@ -12,6 +12,7 @@
     --font-terminal: 'JetBrains Mono', monospace;
     --font-terminal-retro: 'VT323', monospace;
     --font-terminal-nier: 'Major Mono Display', monospace;
+    --font-noto-jp: 'Noto Sans JP', sans-serif;
 
     /* Authentic NieR Automata UI colors from screenshot */
     --color-nier-bg: #dcd8c0;         /* Main parchment background */
@@ -40,6 +41,11 @@
     font-family: var(--font-terminal-nier);
   }
 
+  .font-noto-jp {
+    font-family: var(--font-noto-jp);
+    letter-spacing: -0.02em; /* Slight adjustment to mimic NieR style */
+  }
+
   /* Background utilities */
   .bg-nier-bg {
     background-color: var(--color-nier-bg);
@@ -72,45 +78,5 @@
   }
 
   /* Grid background utility */
-  .bg-nier-grid {
-    background-color: var(--color-nier-bg);
-    background-image: linear-gradient(var(--color-nier-grid) 1px, transparent 1px),
-    linear-gradient(90deg, var(--color-nier-grid) 1px, transparent 1px);
-    background-size: 20px 20px;
-  }
 
-  /* 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;
-  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index cbaec6a..fd2ca17 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
         terminal: ["JetBrains Mono", "monospace"],
         "terminal-retro": ["VT323", "monospace"],
         "terminal-nier": ["Major Mono Display", "monospace"],
+        "noto-jp": ["Noto Sans JP", "sans-serif"],
       },
       colors: {
         nier: {