Init

components/HeroSection.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+export default function HeroSection() {
+  return (
+    <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `url('/got-2.jpg')`,
+        }}
+      >
+        {/* Dark overlay for readability */}
+        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
+      </div>
+
+      {/* Hero Content */}
+      <div className="relative z-10 w-full max-w-5xl mx-auto px-8 py-16 text-center">
+        {/* Game Title */}
+        <h1 className="text-6xl md:text-8xl lg:text-9xl font-gaming font-black mb-4 tracking-tight">
+          <span
+            className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent"
+            style={{
+              textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
+            }}
+          >
+            GAME.OF.TECH
+          </span>
+        </h1>
+
+        {/* Subtitle */}
+        <div className="text-pixel-gold text-xl md:text-2xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 mb-8 tracking-wider">
+          <span>✦</span>
+          <span>Peaksys</span>
+          <span>✦</span>
+        </div>
+
+        {/* Description */}
+        <p className="text-white text-base md:text-lg max-w-3xl mx-auto mb-12 leading-relaxed px-4">
+          In a digital world of cutting-edge technology, where AI systems are
+          evolving and ancient code awaits discovery. Go on an epic journey to
+          forge alliances, conquer challenges and tell your story of innovation
+          as part of a flourishing tech gaming community.
+        </p>
+
+        {/* Call-to-Action Buttons */}
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
+          <button className="px-8 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition">
+            PLAY NOW
+          </button>
+          <button className="px-8 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition flex items-center gap-2">
+            <span>⏵</span>
+            <span>Watch Trailer</span>
+          </button>
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes float {
+          0%,
+          100% {
+            transform: translateY(0px);
+          }
+          50% {
+            transform: translateY(-20px);
+          }
+        }
+      `}</style>
+    </section>
+  );
+}