From 6603fa9124542f2e23db7baaa1377980b81cfd67 Mon Sep 17 00:00:00 2001
From: Nitansh Shankar <167768158+BIJJUDAMA@users.noreply.github.com>
Date: Fri, 15 May 2026 22:33:23 +0530
Subject: [PATCH] fix: implement dynamic scaling of hero section text

---
 src/components/landing/Header.tsx    |  6 +--
 src/components/shared/GlitchText.tsx | 78 ++++++++++------------------
 2 files changed, 30 insertions(+), 54 deletions(-)

diff --git a/src/components/landing/Header.tsx b/src/components/landing/Header.tsx
index 02f6740..98f2946 100644
--- a/src/components/landing/Header.tsx
+++ b/src/components/landing/Header.tsx
@@ -319,8 +319,8 @@ const LandingHeader = () => {
               <div className="flex flex-col w-full max-w-4xl mt-12 md:mt-20 sm:mt-8">
                 {/* Content Box with Border */}
 
-                <SectionCard className="mb-0 w-full !p-5 md:!py-10 md:!px-8" paddingClassName="p-0">
-                  <h1 className="text-[28px] sm:text-4xl md:text-5xl lg:text-6xl font-black font-heading mb-4 text-ghost-white text-left break-words leading-tight">
+                <SectionCard className="mb-4 w-full !p-5 md:!py-10 md:!px-8" paddingClassName="p-0">
+                  <h1 className="text-[clamp(1.4rem,8vw,3.2rem)] font-black font-heading mb-6 text-ghost-white text-left break-words leading-tight">
                     <span className="block mb-2">
                       <GlitchText
                         text="India's Cybersecurity Championship"
@@ -341,7 +341,7 @@ const LandingHeader = () => {
                   </div>
                 </SectionCard>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6 justify-center w-full mt-6 md:mt-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6 justify-center w-full mt-8 md:mt-12">
                   <Link href="https://register.inctf.in" target="_blank" rel="noopener noreferrer" className="plain-link w-full">
                     <motion.button
                       initial={{ opacity: 0, y: 20, boxShadow: "4px 4px 0 rgba(255,255,255,0.5)" }}
diff --git a/src/components/shared/GlitchText.tsx b/src/components/shared/GlitchText.tsx
index 4ba8c98..154a57f 100644
--- a/src/components/shared/GlitchText.tsx
+++ b/src/components/shared/GlitchText.tsx
@@ -62,28 +62,22 @@ const GlitchText = ({ text, className = "", delay = 0, strikethrough = false, tr
   }, [started, text, triggerOnView]);
 
   return (
-    <span ref={ref} className={`relative inline ${className}`}>
+    <span ref={ref} className={`relative inline-block ${className}`}>
       <style jsx>{`
-        @keyframes glitch {
-          2%, 64% { transform: translate(2px, 0) skew(0deg); }
-          4%, 60% { transform: translate(-2px, 0) skew(0deg); }
-          62% { transform: translate(0, 0) skew(5deg); }
+        @keyframes glitchSlow {
+          0%, 90%, 100% { transform: translate(0.04em, 0); }
+          92% { transform: translate(0.08em, -0.01em); }
+          94% { transform: translate(0.02em, 0.01em); }
         }
-        @keyframes glitchTop {
-          2%, 64% { transform: translate(2px, -2px); }
-          4%, 60% { transform: translate(-2px, 2px); }
-          62% { transform: translate(13px, -1px) skew(-13deg); }
-        }
-        @keyframes glitchBottom {
-          2%, 64% { transform: translate(-2px, 0); }
-          4%, 60% { transform: translate(-2px, 0); }
-          62% { transform: translate(-22px, 5px) skew(21deg); }
+        @keyframes glitchSlowBottom {
+          0%, 90%, 100% { transform: translate(-0.04em, 0); }
+          92% { transform: translate(-0.08em, 0.01em); }
+          94% { transform: translate(-0.02em, -0.01em); }
         }
         
         .glitch-wrapper {
           position: relative;
-          display: inline;
-          animation: glitch 1s linear infinite;
+          display: inline-block;
         }
         
         .glitch-wrapper::before,
@@ -94,57 +88,39 @@ const GlitchText = ({ text, className = "", delay = 0, strikethrough = false, tr
           top: 0;
           width: 100%;
           height: 100%;
+          z-index: -1;
+          pointer-events: none;
+          opacity: 1;
         }
         
         .glitch-wrapper::before {
           color: #ff0000;
-          animation: glitchTop 1s linear infinite;
-          clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-          -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
+          animation: glitchSlow 8s ease-in-out infinite;
         }
         
         .glitch-wrapper::after {
           color: #00ffff;
-          animation: glitchBottom 1.5s linear infinite;
-          clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-          -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
+          animation: glitchSlowBottom 8s ease-in-out infinite;
         }
         
         .glitch-main {
           position: relative;
           z-index: 1;
-          color: inherit; /* Inherit color to allow customization */
-          text-shadow: 
-            1px 1px 0 rgba(0, 255, 255, 0.8),
-            2px 2px 0 rgba(0, 255, 255, 0.7),
-            3px 3px 0 rgba(0, 255, 255, 0.6),
-            4px 4px 0 rgba(0, 200, 200, 0.5),
-            5px 5px 0 rgba(0, 150, 150, 0.4),
-            6px 6px 0 rgba(255, 0, 0, 0.3),
-            7px 7px 0 rgba(255, 0, 0, 0.2),
-            8px 8px 20px rgba(0, 0, 0, 0.5);
-          transform: skewY(-2deg);
+          color: inherit;
+          /* No shadow, no blur - pure clarity */
         }
       `}</style>
 
-      {/* Invisible spacer to reserve layout space */}
-      <span className="opacity-0 pointer-events-none select-none" aria-hidden="true">
-        {text}
-      </span>
-
-      {/* Overlay for the actual effect */}
-      <span className="absolute top-0 left-0 w-full">
-        {!typingComplete ? (
-          <span className="glitch-main">
-            {displayText}
-            <span className="animate-pulse">|</span>
-          </span>
-        ) : (
-          <span className="glitch-wrapper" data-text={text}>
-            <span className="glitch-main">{text}</span>
-          </span>
-        )}
-      </span>
+      {!typingComplete ? (
+        <span className="glitch-main">
+          {displayText}
+          <span className="animate-pulse">|</span>
+        </span>
+      ) : (
+        <span className="glitch-wrapper" data-text={text}>
+          <span className="glitch-main">{text}</span>
+        </span>
+      )}
 
       {/* Strikethrough Lines */}
       {strikethrough && (