From eea28564851fd4902608a0394e87c1885913aee9 Mon Sep 17 00:00:00 2001
From: sirpiglr <49359077-sirpiglr@users.noreply.replit.com>
Date: Sat, 13 Dec 2025 00:18:33 +0000
Subject: [PATCH] Update buttons and remove unused code from realm selector

Refactors the IsometricRealmSelector component by removing unused gradient code and updating CTA buttons to use the Button component. Also, enhances the Button component's ripple effect to correctly handle the `asChild` prop and ensure consistent behavior across all click events.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: cc85e0aa-eae4-424c-8e21-ce55c6963530
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/OuNSijY
Replit-Helium-Checkpoint-Created: true
---
 client/components/IsometricRealmSelector.tsx | 27 ++++--------
 client/components/ui/button.tsx              | 46 ++++++++++----------
 2 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/client/components/IsometricRealmSelector.tsx b/client/components/IsometricRealmSelector.tsx
index 799e9be8..1185ddef 100644
--- a/client/components/IsometricRealmSelector.tsx
+++ b/client/components/IsometricRealmSelector.tsx
@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect, useMemo } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useNavigate, Link } from "react-router-dom";
 import IsometricRealmCard, { RealmData } from "./IsometricRealmCard";
+import { Button } from "./ui/button";
 
 function TypeWriter({ text, delay = 0 }: { text: string; delay?: number }) {
   const [displayText, setDisplayText] = useState("");
@@ -200,20 +201,6 @@ export default function IsometricRealmSelector() {
     [navigate]
   );
 
-  const backgroundGradient = `
-    radial-gradient(
-      ellipse 80% 50% at ${mousePosition.x * 100}% ${mousePosition.y * 100}%,
-      rgba(59, 130, 246, 0.08) 0%,
-      transparent 50%
-    ),
-    radial-gradient(
-      ellipse 60% 40% at ${100 - mousePosition.x * 100}% ${100 - mousePosition.y * 100}%,
-      rgba(168, 85, 247, 0.06) 0%,
-      transparent 50%
-    ),
-    linear-gradient(180deg, #030712 0%, #0f172a 50%, #030712 100%)
-  `;
-
   return (
     <div className="realm-selector">
       {/* Scanline overlay */}
@@ -266,8 +253,12 @@ export default function IsometricRealmSelector() {
             learn, and bring ideas to life. Join thousands of developers, designers, and innovators.
           </p>
           <div className="hero-cta">
-            <Link to="/get-started" className="cta-primary">Get Started Free</Link>
-            <Link to="/downloads" className="cta-secondary">Download Desktop App</Link>
+            <Button size="lg" className="cta-primary" asChild>
+              <Link to="/get-started">Get Started Free</Link>
+            </Button>
+            <Button variant="outline" size="lg" className="cta-secondary" asChild>
+              <Link to="/downloads">Download Desktop App</Link>
+            </Button>
           </div>
         </motion.div>
 
@@ -356,13 +347,13 @@ export default function IsometricRealmSelector() {
                         <span key={i} className="featured-feature">{feature}</span>
                       ))}
                     </div>
-                    <button 
+                    <Button 
                       className="featured-cta"
                       onClick={() => handleRealmClick(realms[featuredIndex])}
                     >
                       Enter {realms[featuredIndex].label}
                       <span className="cta-arrow">→</span>
-                    </button>
+                    </Button>
                   </div>
                 </div>
                 <div className="featured-corner tl" />
diff --git a/client/components/ui/button.tsx b/client/components/ui/button.tsx
index 5b88ddd9..9d05633b 100644
--- a/client/components/ui/button.tsx
+++ b/client/components/ui/button.tsx
@@ -44,32 +44,34 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, onClick, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
 
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      // Create ripple effect
-      const button = e.currentTarget;
-      const rect = button.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
+    const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+      const target = e.currentTarget;
+      if (target instanceof HTMLElement) {
+        const rect = target.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
 
-      const ripple = document.createElement("span");
-      ripple.style.position = "absolute";
-      ripple.style.borderRadius = "50%";
-      ripple.style.transform = "scale(0)";
-      ripple.style.animation = "ripple 0.6s linear";
-      ripple.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+        const ripple = document.createElement("span");
+        ripple.style.position = "absolute";
+        ripple.style.borderRadius = "50%";
+        ripple.style.transform = "scale(0)";
+        ripple.style.animation = "ripple 0.6s linear";
+        ripple.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+        ripple.style.pointerEvents = "none";
 
-      const size = Math.max(rect.width, rect.height);
-      ripple.style.width = ripple.style.height = size + "px";
-      ripple.style.left = x - size / 2 + "px";
-      ripple.style.top = y - size / 2 + "px";
+        const rippleSize = Math.max(rect.width, rect.height);
+        ripple.style.width = ripple.style.height = rippleSize + "px";
+        ripple.style.left = x - rippleSize / 2 + "px";
+        ripple.style.top = y - rippleSize / 2 + "px";
 
-      button.appendChild(ripple);
+        target.appendChild(ripple);
 
-      setTimeout(() => {
-        ripple.remove();
-      }, 600);
+        setTimeout(() => {
+          ripple.remove();
+        }, 600);
+      }
 
-      if (onClick) onClick(e);
+      if (onClick) onClick(e as React.MouseEvent<HTMLButtonElement>);
     };
 
     return (
@@ -85,7 +87,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         <Comp
           className={cn(buttonVariants({ variant, size, className }))}
           ref={ref}
-          onClick={asChild ? onClick : handleClick}
+          onClick={handleClick}
           {...props}
         />
       </>