Reusable Section Title Component Made

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

@@ -1,3 +1,3 @@
-<section class="border-b-1 h-100 flex items-center justify-center">
+<section class="border-b-1 h-100 flex items-top justify-top bg-nier-bg p-6 relative">
-  <p class="text-6xl font-terminal-retro">ABOUT SECTION</p>
+  <app-section-title title="NEURAL PROFILE" />
 </section>

src/app/features/about-display/about-display.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
+import {SectionTitleComponent} from "../../shared/ui/section-title/section-title.component";
 
 @Component({
   selector: 'app-about-display',
-  imports: [],
+  imports: [SectionTitleComponent],
   templateUrl: './about-display.component.html',
-  styleUrl: './about-display.component.css'
+  styleUrl: './about-display.component.css',
 })
-export class AboutDisplayComponent {
+export class AboutDisplayComponent {}
-
-}

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

@@ -1,14 +1,3 @@
 <section class="border-b-1 h-100 flex items-top justify-top bg-nier-bg p-6 relative">
-  <!-- First shadow layer (white/light) -->
+ <app-section-title title="TRANSMISSION LINKS" />
-  <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>

src/app/features/contact-display/contact-display.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
+import {SectionTitleComponent} from '../../shared/ui/section-title/section-title.component';
 
 @Component({
   selector: 'app-contact-display',
-  imports: [],
+  imports: [SectionTitleComponent],
   templateUrl: './contact-display.component.html',
-  styleUrl: './contact-display.component.css'
+  styleUrl: './contact-display.component.css',
 })
-export class ContactDisplayComponent {
+export class ContactDisplayComponent {}
-
-}

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

@@ -1,3 +1,3 @@
 <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>
+  <p class="text-6xl font-noto-jp">FOOTER</p>
 </footer>

src/app/features/project-display/components/projects-list/projects-list.component.html

@@ -1,4 +1,5 @@
-<section>
+<section class="border-b-1 h-100 flex items-top justify-top bg-nier-bg p-6 relative">
-  <article class="border-b-1 h-100 flex items-center justify-center"><p class="text-6xl font-terminal-retro">PROJECTS</p></article>
+  <app-section-title title="EXECUTE // DIRECTORY" />
 </section>
 
+

src/app/features/project-display/components/projects-list/projects-list.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
+import {SectionTitleComponent} from "../../../../shared/ui/section-title/section-title.component";
 
 @Component({
   selector: 'app-projects-list',
-  imports: [],
+  imports: [SectionTitleComponent],
   templateUrl: './projects-list.component.html',
-  styleUrl: './projects-list.component.css'
+  styleUrl: './projects-list.component.css',
 })
-export class ProjectsListComponent {
+export class ProjectsListComponent {}
-
-}

src/app/shared/ui/section-title/section-title.component.html

@@ -0,0 +1,19 @@
+<h2>
+<p
+  class="absolute text-6xl font-noto-jp text-white opacity-50"
+  style="top: 1.5rem; left: 1.5rem; transform: translate(1px, 1px)"
+>
+  {{title()}}
+</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)"
+>
+  {{title()}}
+</p>
+<!-- Main text on top -->
+<p class="relative text-6xl font-noto-jp text-nier-dark z-10">
+  {{title()}}
+</p>
+</h2>

src/app/shared/ui/section-title/section-title.component.ts

@@ -0,0 +1,11 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-section-title',
+  imports: [],
+  templateUrl: './section-title.component.html',
+  styleUrl: './section-title.component.css',
+})
+export class SectionTitleComponent {
+  title = input<string>();
+}