Introduce an interactive realm selector with animated cards
Replace the existing Scene component with a new IsometricRealmSelector component, which includes animated and interactive IsometricRealmCard components. This change enhances the visual appeal and user interaction of the realm selection process. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: 0b0d2f50-5f1a-411e-bb1d-b426ced94cd0 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/lX9tyiI Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr
parent
1d33b56aca
commit
1bf0398b92
4 changed files with 755 additions and 6 deletions
8
.replit
8
.replit
|
|
@ -52,6 +52,10 @@ externalPort = 80
|
|||
localPort = 8044
|
||||
externalPort = 3003
|
||||
|
||||
[[ports]]
|
||||
localPort = 37867
|
||||
externalPort = 3002
|
||||
|
||||
[[ports]]
|
||||
localPort = 38557
|
||||
externalPort = 3000
|
||||
|
|
@ -60,10 +64,6 @@ externalPort = 3000
|
|||
localPort = 40437
|
||||
externalPort = 3001
|
||||
|
||||
[[ports]]
|
||||
localPort = 45997
|
||||
externalPort = 3002
|
||||
|
||||
[deployment]
|
||||
deploymentTarget = "autoscale"
|
||||
run = ["node", "dist/server/production.mjs"]
|
||||
|
|
|
|||
335
client/components/IsometricRealmCard.tsx
Normal file
335
client/components/IsometricRealmCard.tsx
Normal file
|
|
@ -0,0 +1,335 @@
|
|||
import { useRef, useState, useCallback, CSSProperties } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export interface RealmData {
|
||||
id: string;
|
||||
label: string;
|
||||
color: string;
|
||||
route: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
}
|
||||
|
||||
interface IsometricRealmCardProps {
|
||||
realm: RealmData;
|
||||
index: number;
|
||||
onClick: (realm: RealmData) => void;
|
||||
isSelected: boolean;
|
||||
}
|
||||
|
||||
export default function IsometricRealmCard({
|
||||
realm,
|
||||
index,
|
||||
onClick,
|
||||
isSelected,
|
||||
}: IsometricRealmCardProps) {
|
||||
const cardRef = useRef<HTMLDivElement>(null);
|
||||
const [tilt, setTilt] = useState({ x: 0, y: 0 });
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const handleMouseMove = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!cardRef.current) return;
|
||||
const rect = cardRef.current.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left) / rect.width - 0.5;
|
||||
const y = (e.clientY - rect.top) / rect.height - 0.5;
|
||||
setTilt({ x: y * -20, y: x * 20 });
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setTilt({ x: 0, y: 0 });
|
||||
setIsHovered(false);
|
||||
}, []);
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
setIsHovered(true);
|
||||
}, []);
|
||||
|
||||
const cardStyle: CSSProperties = {
|
||||
perspective: "1000px",
|
||||
transformStyle: "preserve-3d",
|
||||
};
|
||||
|
||||
const innerStyle: CSSProperties = {
|
||||
transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg) ${isHovered ? "translateZ(20px)" : "translateZ(0)"}`,
|
||||
transformStyle: "preserve-3d",
|
||||
transition: isHovered ? "transform 0.1s ease-out" : "transform 0.4s ease-out",
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40, rotateX: -15 }}
|
||||
animate={{ opacity: 1, y: 0, rotateX: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1, ease: "easeOut" }}
|
||||
style={cardStyle}
|
||||
className="realm-card-wrapper"
|
||||
>
|
||||
<div
|
||||
ref={cardRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={() => onClick(realm)}
|
||||
style={innerStyle}
|
||||
className={`realm-card ${isSelected ? "selected" : ""}`}
|
||||
>
|
||||
{/* Background glow layer */}
|
||||
<div
|
||||
className="card-glow"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at center, ${realm.color}30 0%, transparent 70%)`,
|
||||
opacity: isHovered ? 1 : 0.3,
|
||||
transform: `translateZ(-10px) translateX(${tilt.y * 2}px) translateY(${tilt.x * -2}px)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Main card surface */}
|
||||
<div
|
||||
className="card-surface"
|
||||
style={{
|
||||
borderColor: isHovered || isSelected ? realm.color : `${realm.color}40`,
|
||||
boxShadow: isHovered
|
||||
? `0 25px 50px -12px ${realm.color}40, 0 0 0 1px ${realm.color}60, inset 0 1px 0 ${realm.color}20`
|
||||
: `0 10px 40px -15px ${realm.color}20`,
|
||||
}}
|
||||
>
|
||||
{/* Floating icon layer */}
|
||||
<div
|
||||
className="card-icon-layer"
|
||||
style={{
|
||||
transform: `translateZ(40px) translateX(${tilt.y * 3}px) translateY(${tilt.x * -3}px)`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="card-icon"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${realm.color}20 0%, ${realm.color}05 100%)`,
|
||||
borderColor: `${realm.color}40`,
|
||||
boxShadow: isHovered ? `0 0 30px ${realm.color}50` : "none",
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 32 }}>{realm.icon}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Text layer */}
|
||||
<div
|
||||
className="card-text-layer"
|
||||
style={{
|
||||
transform: `translateZ(25px) translateX(${tilt.y * 1.5}px) translateY(${tilt.x * -1.5}px)`,
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
className="card-title"
|
||||
style={{ color: realm.color }}
|
||||
>
|
||||
{realm.label}
|
||||
</h3>
|
||||
<p className="card-description">{realm.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Features layer */}
|
||||
<div
|
||||
className="card-features-layer"
|
||||
style={{
|
||||
transform: `translateZ(15px) translateX(${tilt.y * 0.8}px) translateY(${tilt.x * -0.8}px)`,
|
||||
}}
|
||||
>
|
||||
{realm.features.slice(0, 3).map((feature, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="card-feature"
|
||||
style={{
|
||||
borderColor: `${realm.color}30`,
|
||||
background: `${realm.color}08`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="feature-dot"
|
||||
style={{ background: realm.color }}
|
||||
/>
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA layer */}
|
||||
<div
|
||||
className="card-cta-layer"
|
||||
style={{
|
||||
transform: `translateZ(30px) translateX(${tilt.y * 2}px) translateY(${tilt.x * -2}px)`,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
className="card-cta"
|
||||
style={{
|
||||
background: isHovered
|
||||
? `linear-gradient(135deg, ${realm.color} 0%, ${realm.color}cc 100%)`
|
||||
: `${realm.color}20`,
|
||||
borderColor: realm.color,
|
||||
color: isHovered ? "#030712" : realm.color,
|
||||
}}
|
||||
>
|
||||
Enter {realm.label}
|
||||
<span className="cta-arrow">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reflection layer */}
|
||||
<div
|
||||
className="card-reflection"
|
||||
style={{
|
||||
background: `linear-gradient(180deg, ${realm.color}08 0%, transparent 100%)`,
|
||||
transform: `translateZ(-5px) rotateX(180deg) translateY(-100%)`,
|
||||
opacity: isHovered ? 0.4 : 0.15,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.realm-card-wrapper {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.realm-card {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
position: absolute;
|
||||
inset: -40px;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.4s ease;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.card-surface {
|
||||
position: relative;
|
||||
padding: 28px 24px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid;
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
rgba(15, 23, 42, 0.9) 0%,
|
||||
rgba(30, 41, 59, 0.7) 50%,
|
||||
rgba(15, 23, 42, 0.9) 100%
|
||||
);
|
||||
backdrop-filter: blur(12px);
|
||||
transform-style: preserve-3d;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card-icon-layer {
|
||||
transform-style: preserve-3d;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card-text-layer {
|
||||
transform-style: preserve-3d;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card-features-layer {
|
||||
transform-style: preserve-3d;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
color: #cbd5e1;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.feature-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-cta-layer {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.card-cta {
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-arrow {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.realm-card:hover .cta-arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.card-reflection {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
bottom: -60px;
|
||||
height: 60px;
|
||||
border-radius: 20px;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.4s ease;
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
.realm-card.selected .card-surface {
|
||||
border-width: 3px;
|
||||
}
|
||||
`}</style>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
414
client/components/IsometricRealmSelector.tsx
Normal file
414
client/components/IsometricRealmSelector.tsx
Normal file
|
|
@ -0,0 +1,414 @@
|
|||
import { useState, useCallback, useEffect, useMemo } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import IsometricRealmCard, { RealmData } from "./IsometricRealmCard";
|
||||
|
||||
const REALM_COLORS = ["#a855f7", "#22c55e", "#ef4444", "#eab308", "#3b82f6"];
|
||||
|
||||
interface ParticleData {
|
||||
id: number;
|
||||
left: number;
|
||||
top: number;
|
||||
size: number;
|
||||
color: string;
|
||||
duration: number;
|
||||
delay: number;
|
||||
xOffset: number;
|
||||
}
|
||||
|
||||
function generateParticles(count: number): ParticleData[] {
|
||||
return Array.from({ length: count }, (_, i) => ({
|
||||
id: i,
|
||||
left: 10 + Math.random() * 80,
|
||||
top: 10 + Math.random() * 80,
|
||||
size: 2 + Math.random() * 4,
|
||||
color: REALM_COLORS[Math.floor(Math.random() * REALM_COLORS.length)],
|
||||
duration: 4 + Math.random() * 4,
|
||||
delay: Math.random() * 4,
|
||||
xOffset: Math.sin(i) * 20,
|
||||
}));
|
||||
}
|
||||
|
||||
const realms: RealmData[] = [
|
||||
{
|
||||
id: "nexus",
|
||||
label: "NEXUS",
|
||||
color: "#a855f7",
|
||||
route: "/dashboard/nexus",
|
||||
icon: "🌐",
|
||||
description: "The marketplace hub. Find opportunities, contracts, and commissions.",
|
||||
features: ["Browse opportunities", "Submit proposals", "Track contracts"],
|
||||
},
|
||||
{
|
||||
id: "gameforge",
|
||||
label: "GAMEFORGE",
|
||||
color: "#22c55e",
|
||||
route: "/gameforge",
|
||||
icon: "🎮",
|
||||
description: "Game development powerhouse. Build immersive experiences together.",
|
||||
features: ["Sprint management", "Team collaboration", "Asset pipeline"],
|
||||
},
|
||||
{
|
||||
id: "foundation",
|
||||
label: "FOUNDATION",
|
||||
color: "#ef4444",
|
||||
route: "/foundation",
|
||||
icon: "🏛️",
|
||||
description: "Learn and grow. Courses, mentorship, and achievement tracking.",
|
||||
features: ["Structured courses", "1-on-1 mentorship", "Skill badges"],
|
||||
},
|
||||
{
|
||||
id: "labs",
|
||||
label: "LABS",
|
||||
color: "#eab308",
|
||||
route: "/dashboard/labs",
|
||||
icon: "🔬",
|
||||
description: "Research & experimentation. Push the boundaries of what's possible.",
|
||||
features: ["Experimental features", "R&D projects", "Tech deep-dives"],
|
||||
},
|
||||
{
|
||||
id: "corp",
|
||||
label: "CORP",
|
||||
color: "#3b82f6",
|
||||
route: "/corp",
|
||||
icon: "🏢",
|
||||
description: "Enterprise solutions. Managed services for teams and organizations.",
|
||||
features: ["Dedicated support", "Custom integrations", "SLA guarantees"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function IsometricRealmSelector() {
|
||||
const navigate = useNavigate();
|
||||
const [selectedRealm, setSelectedRealm] = useState<string | null>(null);
|
||||
const [mousePosition, setMousePosition] = useState({ x: 0.5, y: 0.5 });
|
||||
|
||||
const particles = useMemo(() => generateParticles(20), []);
|
||||
|
||||
useEffect(() => {
|
||||
let rafId: number;
|
||||
let lastUpdate = 0;
|
||||
const throttleMs = 50;
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const now = Date.now();
|
||||
if (now - lastUpdate < throttleMs) return;
|
||||
lastUpdate = now;
|
||||
|
||||
rafId = requestAnimationFrame(() => {
|
||||
setMousePosition({
|
||||
x: e.clientX / window.innerWidth,
|
||||
y: e.clientY / window.innerHeight,
|
||||
});
|
||||
});
|
||||
};
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
if (rafId) cancelAnimationFrame(rafId);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleRealmClick = useCallback(
|
||||
(realm: RealmData) => {
|
||||
setSelectedRealm(realm.id);
|
||||
setTimeout(() => navigate(realm.route), 400);
|
||||
},
|
||||
[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"
|
||||
style={{ background: backgroundGradient }}
|
||||
>
|
||||
{/* Ambient particles */}
|
||||
<div className="ambient-layer">
|
||||
{particles.map((particle) => (
|
||||
<motion.div
|
||||
key={particle.id}
|
||||
className="particle"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: [0.1, 0.4, 0.1],
|
||||
y: [0, -30, 0],
|
||||
x: [0, particle.xOffset, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: particle.duration,
|
||||
repeat: Infinity,
|
||||
delay: particle.delay,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
style={{
|
||||
left: `${particle.left}%`,
|
||||
top: `${particle.top}%`,
|
||||
width: particle.size,
|
||||
height: particle.size,
|
||||
background: particle.color,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<motion.header
|
||||
className="selector-header"
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="header-left">
|
||||
<div className="logo">
|
||||
<span className="logo-icon">◆</span>
|
||||
<span className="logo-text">AeThex</span>
|
||||
</div>
|
||||
<span className="version-tag">OS v5.0</span>
|
||||
</div>
|
||||
<div className="header-right">
|
||||
<Link to="/login" className="connect-btn">
|
||||
Connect Passport
|
||||
</Link>
|
||||
</div>
|
||||
</motion.header>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="selector-main">
|
||||
<motion.div
|
||||
className="hero-text"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<h1>Select Your Realm</h1>
|
||||
<p>Each realm unlocks a unique experience tailored to your journey</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="realms-grid">
|
||||
{realms.map((realm, index) => (
|
||||
<IsometricRealmCard
|
||||
key={realm.id}
|
||||
realm={realm}
|
||||
index={index}
|
||||
onClick={handleRealmClick}
|
||||
isSelected={selectedRealm === realm.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="footer-links"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.8 }}
|
||||
>
|
||||
<Link to="/community">Community</Link>
|
||||
<span className="divider">•</span>
|
||||
<Link to="/developers">Developers</Link>
|
||||
<span className="divider">•</span>
|
||||
<Link to="/roadmap">Roadmap</Link>
|
||||
<span className="divider">•</span>
|
||||
<Link to="/realms">All Realms</Link>
|
||||
</motion.div>
|
||||
</main>
|
||||
|
||||
<style>{`
|
||||
.realm-selector {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: #e5e7eb;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.ambient-layer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
color: #38bdf8;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
border: 1px solid rgba(56, 189, 248, 0.2);
|
||||
color: #7dd3fc;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.connect-btn {
|
||||
padding: 12px 24px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #38bdf8;
|
||||
background: rgba(14, 165, 233, 0.1);
|
||||
color: #e0f2fe;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.connect-btn:hover {
|
||||
background: rgba(14, 165, 233, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(14, 165, 233, 0.2);
|
||||
}
|
||||
|
||||
.selector-main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
font-size: clamp(32px, 5vw, 48px);
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
background: linear-gradient(135deg, #e5e7eb 0%, #94a3b8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-text p {
|
||||
font-size: 16px;
|
||||
color: #64748b;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.realms-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 32px;
|
||||
justify-items: center;
|
||||
perspective: 2000px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.realms-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.realms-grid {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 60px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #64748b;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.footer-links .divider {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.selector-header {
|
||||
padding: 16px 20px;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.selector-main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.realms-grid {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import SEO from "@/components/SEO";
|
||||
import Scene from "@/components/Scene";
|
||||
import IsometricRealmSelector from "@/components/IsometricRealmSelector";
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
|
|
@ -13,7 +13,7 @@ export default function Index() {
|
|||
: (undefined as any)
|
||||
}
|
||||
/>
|
||||
<Scene />
|
||||
<IsometricRealmSelector />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue