Refactoring hero page into smaller components

This commit is contained in:
AdamBtech
2025-06-02 10:17:31 +02:00
parent 98dedb0b22
commit c4a14c6ec7
5 changed files with 325 additions and 316 deletions

View File

@@ -3,30 +3,8 @@
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>
<app-hero-text />
</div>
</section>