Enhance /arms page with rich visuals and animations
cgen-297bae2569774fadb5007e9d202c2c19
This commit is contained in:
Builder.io
parent
f08c7e22d3
commit
6ab5f9b96e
1 changed files with 181 additions and 40 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { ArrowLeft, Sparkles } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface Arm {
|
||||
id: string;
|
||||
|
|
@ -10,6 +11,8 @@ interface Arm {
|
|||
href: string;
|
||||
icon: string;
|
||||
tip: string;
|
||||
shadowColor: string;
|
||||
glowColor: string;
|
||||
}
|
||||
|
||||
const ARMS: Arm[] = [
|
||||
|
|
@ -22,6 +25,8 @@ const ARMS: Arm[] = [
|
|||
href: "/admin",
|
||||
icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc0414efd7af54ef4b821a05d469150d0?format=webp&width=800",
|
||||
tip: "Admin panel & staff management",
|
||||
shadowColor: "shadow-purple-500/50",
|
||||
glowColor: "rgba(168, 85, 247, 0.3)",
|
||||
},
|
||||
{
|
||||
id: "labs",
|
||||
|
|
@ -32,6 +37,8 @@ const ARMS: Arm[] = [
|
|||
href: "/labs",
|
||||
icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fd93f7113d34347469e74421c3a3412e5?format=webp&width=800",
|
||||
tip: "R&D pushing innovation boundaries",
|
||||
shadowColor: "shadow-yellow-500/50",
|
||||
glowColor: "rgba(251, 191, 36, 0.3)",
|
||||
},
|
||||
{
|
||||
id: "gameforge",
|
||||
|
|
@ -42,6 +49,8 @@ const ARMS: Arm[] = [
|
|||
href: "/gameforge",
|
||||
icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800",
|
||||
tip: "Games shipped monthly at speed",
|
||||
shadowColor: "shadow-green-500/50",
|
||||
glowColor: "rgba(34, 197, 94, 0.3)",
|
||||
},
|
||||
{
|
||||
id: "corp",
|
||||
|
|
@ -52,6 +61,8 @@ const ARMS: Arm[] = [
|
|||
href: "/corp",
|
||||
icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fae654ecc18b241bdab273893e8231970?format=webp&width=800",
|
||||
tip: "Enterprise solutions for scale",
|
||||
shadowColor: "shadow-blue-500/50",
|
||||
glowColor: "rgba(59, 130, 246, 0.3)",
|
||||
},
|
||||
{
|
||||
id: "foundation",
|
||||
|
|
@ -62,6 +73,8 @@ const ARMS: Arm[] = [
|
|||
href: "/foundation",
|
||||
icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800",
|
||||
tip: "Community & education initiatives",
|
||||
shadowColor: "shadow-red-500/50",
|
||||
glowColor: "rgba(239, 68, 68, 0.3)",
|
||||
},
|
||||
{
|
||||
id: "devlink",
|
||||
|
|
@ -72,6 +85,8 @@ const ARMS: Arm[] = [
|
|||
href: "/dev-link",
|
||||
icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=webp&width=800",
|
||||
tip: "Professional network for creators",
|
||||
shadowColor: "shadow-cyan-500/50",
|
||||
glowColor: "rgba(6, 182, 212, 0.3)",
|
||||
},
|
||||
{
|
||||
id: "nexus",
|
||||
|
|
@ -82,12 +97,15 @@ const ARMS: Arm[] = [
|
|||
href: "/nexus",
|
||||
icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F6df123b87a144b1fb99894d94198d97b?format=webp&width=800",
|
||||
tip: "Talent marketplace & collaboration",
|
||||
shadowColor: "shadow-purple-500/50",
|
||||
glowColor: "rgba(168, 85, 247, 0.3)",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Arms() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [hoveredArm, setHoveredArm] = useState<string | null>(null);
|
||||
|
||||
const handleSelectArm = (href: string) => {
|
||||
navigate(href);
|
||||
|
|
@ -103,9 +121,16 @@ export default function Arms() {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen w-full bg-black relative overflow-hidden flex flex-col">
|
||||
{/* Multiple Animated Background Layers */}
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
{/* Radial gradient overlays for each arm */}
|
||||
<div className="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/20 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
|
||||
<div className="absolute top-1/4 right-1/4 w-96 h-96 bg-cyan-500/20 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-2000" />
|
||||
<div className="absolute bottom-0 left-1/2 w-96 h-96 bg-emerald-500/20 rounded-full mix-blend-multiply filter blur-3xl animate-pulse animation-delay-4000" />
|
||||
</div>
|
||||
|
||||
{/* Animated Grid Background */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-purple-900/30 via-black to-black" />
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
|
|
@ -114,86 +139,202 @@ export default function Arms() {
|
|||
linear-gradient(90deg, transparent 24%, rgba(120, 58, 237, .05) 25%, rgba(120, 58, 237, .05) 26%, transparent 27%, transparent 74%, rgba(120, 58, 237, .05) 75%, rgba(120, 58, 237, .05) 76%, transparent 77%, transparent)
|
||||
`,
|
||||
backgroundSize: "50px 50px",
|
||||
animation: "float 20s linear infinite",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Floating Particles */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-2 h-2 rounded-full opacity-20"
|
||||
style={{
|
||||
background: `hsl(${i * 45}, 100%, 50%)`,
|
||||
left: `${(i * 12.5) + 5}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
animation: `float ${8 + i}s ease-in-out infinite`,
|
||||
animationDelay: `${i * 0.5}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Header / Back Button */}
|
||||
<div className="relative z-10 flex items-center px-4 sm:px-6 py-4 border-b border-gray-800/50">
|
||||
<div className="relative z-20 flex items-center px-4 sm:px-6 py-4 border-b border-purple-500/20 bg-black/60 backdrop-blur-sm">
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors text-sm"
|
||||
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors text-sm group"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="relative z-10 flex-1 flex flex-col items-center justify-center px-4 sm:px-6 py-8 sm:py-12">
|
||||
<div className="relative z-10 flex-1 flex flex-col items-center justify-center px-4 sm:px-6 py-12 sm:py-16">
|
||||
{/* Hero Section */}
|
||||
<div className="text-center mb-12 sm:mb-16">
|
||||
<h1 className="text-3xl sm:text-5xl font-bold text-white mb-4">
|
||||
Choose Your Arm
|
||||
</h1>
|
||||
<p className="text-gray-400 text-sm sm:text-base max-w-md">
|
||||
Select the arm that best matches your interests and goals
|
||||
</p>
|
||||
<div className="text-center mb-16 sm:mb-20 space-y-6">
|
||||
<div className="inline-block">
|
||||
<div className="flex items-center justify-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-purple-500/10 to-cyan-500/10 border border-purple-500/30 mb-4">
|
||||
<Sparkles className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-xs sm:text-sm text-purple-300">Select Your Arm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h1 className="text-4xl sm:text-6xl lg:text-7xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400 leading-tight">
|
||||
Choose Your Arm
|
||||
</h1>
|
||||
<p className="text-gray-400 text-sm sm:text-base max-w-2xl mx-auto leading-relaxed">
|
||||
Select the arm that best matches your interests and goals. Each arm represents a unique pillar of the AeThex ecosystem with its own mission, team, and opportunities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Decorative line */}
|
||||
<div className="flex items-center justify-center gap-4 pt-4">
|
||||
<div className="h-px bg-gradient-to-r from-transparent to-purple-500 w-12" />
|
||||
<div className="h-px bg-gradient-to-r from-purple-500 to-cyan-500 w-24" />
|
||||
<div className="h-px bg-gradient-to-r from-cyan-500 to-transparent w-12" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arms Grid */}
|
||||
<div className="w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
<div className="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
|
||||
{ARMS.map((arm) => (
|
||||
<button
|
||||
key={arm.id}
|
||||
onClick={() => handleSelectArm(arm.href)}
|
||||
className="group relative p-6 sm:p-8 rounded-xl border border-gray-800 bg-gray-950/50 hover:bg-gray-900/80 hover:border-gray-700 transition-all duration-300 transform hover:scale-105 hover:-translate-y-2"
|
||||
onMouseEnter={() => setHoveredArm(arm.id)}
|
||||
onMouseLeave={() => setHoveredArm(null)}
|
||||
className="group relative p-6 sm:p-8 rounded-2xl border border-gray-800/50 bg-gradient-to-br from-gray-950/60 to-black/80 backdrop-blur-sm hover:border-gray-700 transition-all duration-500 transform hover:scale-105 hover:-translate-y-3"
|
||||
>
|
||||
{/* Gradient Glow on Hover */}
|
||||
{/* Dynamic Glow Background */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl"
|
||||
className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-2xl pointer-events-none"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${arm.color}20, ${arm.color}10)`,
|
||||
background: arm.glowColor,
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 flex flex-col items-center text-center gap-4">
|
||||
{/* Icon */}
|
||||
<div
|
||||
className={`w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-xl bg-gradient-to-br ${arm.bgGradient} p-3`}
|
||||
style={{
|
||||
boxShadow: `0 0 20px ${arm.color}40`,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={arm.icon}
|
||||
alt={arm.label}
|
||||
className="w-full h-full object-contain"
|
||||
{/* Border Glow on Hover */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${arm.color}20, ${arm.color}10)`,
|
||||
pointerEvents: "none",
|
||||
borderRadius: "1rem",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Top accent line */}
|
||||
<div
|
||||
className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-current to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
style={{
|
||||
borderTopLeftRadius: "1rem",
|
||||
borderTopRightRadius: "1rem",
|
||||
background: `linear-gradient(90deg, transparent, ${arm.color}80, transparent)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="relative z-10 flex flex-col items-center text-center gap-4 sm:gap-5">
|
||||
{/* Icon Container with multiple glow layers */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-2xl"
|
||||
style={{
|
||||
background: arm.glowColor,
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className={`w-20 h-20 sm:w-24 sm:h-24 flex items-center justify-center rounded-2xl bg-gradient-to-br ${arm.bgGradient} p-4 transform group-hover:scale-110 transition-transform duration-500`}
|
||||
style={{
|
||||
boxShadow: `0 0 40px ${arm.color}60, inset 0 0 20px ${arm.color}20`,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={arm.icon}
|
||||
alt={arm.label}
|
||||
className="w-full h-full object-contain drop-shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Label */}
|
||||
<div>
|
||||
<h2 className={`text-lg sm:text-xl font-bold ${arm.textColor}`}>
|
||||
<div className="space-y-2">
|
||||
<h2 className={`text-2xl sm:text-3xl font-bold ${arm.textColor} group-hover:text-white transition-colors duration-500`}>
|
||||
{arm.label}
|
||||
</h2>
|
||||
<p className="text-xs sm:text-sm text-gray-500 mt-1">
|
||||
<p className="text-xs sm:text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-500 line-clamp-2">
|
||||
{arm.tip}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Arrow */}
|
||||
<div
|
||||
className={`text-xs sm:text-sm ${arm.textColor} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
|
||||
>
|
||||
→
|
||||
{/* Pulsing indicator */}
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full animate-pulse"
|
||||
style={{
|
||||
backgroundColor: arm.color,
|
||||
opacity: hoveredArm === arm.id ? 1 : 0.5,
|
||||
}}
|
||||
/>
|
||||
<span className={`text-xs font-semibold uppercase tracking-wider ${arm.textColor} opacity-0 group-hover:opacity-100 transition-opacity duration-500`}>
|
||||
Enter
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Corner accent - top right */}
|
||||
<div
|
||||
className="absolute top-4 right-4 w-8 h-8 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
style={{
|
||||
border: `2px solid ${arm.color}40`,
|
||||
borderRadius: "0.25rem",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Corner accent - bottom left */}
|
||||
<div
|
||||
className="absolute bottom-4 left-4 w-8 h-8 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
style={{
|
||||
border: `2px solid ${arm.color}40`,
|
||||
borderRadius: "0.25rem",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer text */}
|
||||
<div className="mt-16 sm:mt-20 text-center text-gray-500 text-xs sm:text-sm max-w-xl">
|
||||
<p>Click any arm to explore its unique offerings and community</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.animation-delay-2000 {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animation-delay-4000 {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue