Total refactoring of file structure for better and simple organization

src/app/pages/hero/hero.component.html

@@ -0,0 +1,32 @@
+<section class="h-screen relative">
+  <app-holo-video-container
+    containerClasses="absolute inset-0 w-full h-full"
+    videoSrc="video/cyber_hands.mp4" />
+
+  <!-- Changed from justify-center to justify-start with top padding -->
+  <div class="absolute inset-0 flex flex-col items-center justify-start pt-16 sm:pt-20 md:pt-24 lg:pt-28 xl:pt-32 2xl:pt-36 pointer-events-none px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20">
+
+    <div class="mb-6 sm:mb-8 md:mb-12 lg:mb-16 xl:mb-20 2xl:mb-24">
+      <h1 class="font-terminal-nier scramble-text-glow text-cyan-200
+              text-5xl sm:text-7xl md:text-8xl lg:text-9xl xl:text-[10rem] 2xl:text-[12rem]
+              text-center
+              leading-[1.1] sm:leading-[1.05] md:leading-[1.0] lg:leading-[0.95] xl:leading-[0.9] 2xl:leading-[0.85]
+              font-black tracking-[-0.02em] pointer-events-auto
+              drop-shadow-[0_0_30px_rgba(34,211,238,0.6)]
+              max-w-[90vw] sm:max-w-[85vw] md:max-w-[80vw] lg:max-w-none break-words whitespace-pre-line">
+        {{ nameText }}
+      </h1>
+    </div>
+
+    <div class="max-w-[98vw] sm:max-w-[95vw] md:max-w-[90vw] lg:max-w-[85vw] xl:max-w-none">
+      <p class="font-terminal-nier scramble-text-glow text-cyan-100
+              text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl 2xl:text-8xl
+              text-center leading-[0.9] sm:leading-[0.85] md:leading-[0.8] font-bold
+              tracking-wide uppercase pointer-events-auto
+              drop-shadow-[0_0_15px_rgba(34,211,238,0.5)] sm:drop-shadow-[0_0_25px_rgba(34,211,238,0.5)]
+              break-words px-2 sm:px-4 md:px-6 lg:px-8 xl:px-10">
+        {{ displayText }}
+      </p>
+    </div>
+  </div>
+</section>