Update HeroSection buttons to use Next.js Link for navigation to events and leaderboard, enhancing user experience and accessibility. Rename game title in Navigation component to 'Peaksys'.

components/HeroSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useBackgroundImage } from "@/hooks/usePreferences";
+import Link from "next/link";
 
 export default function HeroSection() {
   const backgroundImage = useBackgroundImage("home", "/got-2.jpg");
@@ -52,13 +53,17 @@ export default function HeroSection() {
 
         {/* Call-to-Action Buttons */}
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
+          <Link href="/events">
             <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
+              <span>See events</span>
             </button>
+          </Link>
+          <Link href="/leaderboard">
             <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>
+              <span>See leaderboard</span>
             </button>
+          </Link>
         </div>
       </div>
 

components/Navigation.tsx

@@ -17,7 +17,7 @@ export default function Navigation() {
           </div>
           <div className="text-pixel-gold text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide">
             <span>✦</span>
-            <span>Game of Tech</span>
+            <span>Peaksys</span>
             <span>✦</span>
           </div>
         </div>