317 lines
12 KiB
TypeScript
317 lines
12 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import Layout from "@/components/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import LoadingScreen from "@/components/LoadingScreen";
|
|
import { SkeletonStats, SkeletonUserPath } from "@/components/Skeleton";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
ArrowRight,
|
|
CheckCircle,
|
|
Sparkles,
|
|
LayoutDashboard,
|
|
Users,
|
|
Microscope,
|
|
IdCard,
|
|
} from "lucide-react";
|
|
|
|
export default function Index() {
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [activeSection, setActiveSection] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 1200);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setActiveSection((prev) => (prev + 1) % 4);
|
|
}, 4000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const features = [
|
|
{
|
|
title: "Dashboard",
|
|
description: "Your projects, applications, and rewards — in one place",
|
|
icon: LayoutDashboard,
|
|
color: "from-blue-500 to-purple-600",
|
|
},
|
|
{
|
|
title: "Community Feed",
|
|
description: "Share progress, discover collaborators, and stay updated",
|
|
icon: Users,
|
|
color: "from-purple-500 to-pink-600",
|
|
},
|
|
{
|
|
title: "Developer Passport",
|
|
description: "A public profile with verifiable achievements",
|
|
icon: IdCard,
|
|
color: "from-green-500 to-blue-600",
|
|
},
|
|
{
|
|
title: "Docs & CLI",
|
|
description: "Guides, API reference, and tooling to ship faster",
|
|
icon: Microscope,
|
|
color: "from-orange-500 to-red-600",
|
|
},
|
|
];
|
|
|
|
const achievements = [
|
|
{ metric: "10K+", label: "Active Creators" },
|
|
{ metric: "500+", label: "Projects Shipped" },
|
|
{ metric: "99.99%", label: "Feature Quality" },
|
|
{ metric: "24/7", label: "Global Community" },
|
|
];
|
|
|
|
const serviceOfferings = [
|
|
{
|
|
title: "Game Development",
|
|
description: "Studios and indie support",
|
|
link: "/game-development",
|
|
cardClass:
|
|
"border-blue-500/40 bg-gradient-to-br from-blue-950/60 via-indigo-950/30 to-purple-900/40 text-blue-100 hover:border-blue-400/80 hover:shadow-[0_0_25px_rgba(59,130,246,0.35)]",
|
|
titleClass: "text-blue-100",
|
|
descriptionClass: "text-blue-100/70",
|
|
buttonClass:
|
|
"bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 hover:from-blue-400 hover:via-indigo-400 hover:to-purple-400 text-white shadow-[0_0_18px_rgba(59,130,246,0.25)]",
|
|
},
|
|
{
|
|
title: "Consulting",
|
|
description: "Architecture & delivery",
|
|
link: "/consulting",
|
|
cardClass:
|
|
"border-fuchsia-500/40 bg-gradient-to-br from-fuchsia-950/60 via-rose-950/30 to-purple-900/40 text-fuchsia-100 hover:border-fuchsia-400/80 hover:shadow-[0_0_25px_rgba(217,70,239,0.35)]",
|
|
titleClass: "text-fuchsia-100",
|
|
descriptionClass: "text-fuchsia-100/70",
|
|
buttonClass:
|
|
"bg-gradient-to-r from-fuchsia-500 via-pink-500 to-rose-500 hover:from-fuchsia-400 hover:via-pink-400 hover:to-rose-400 text-white shadow-[0_0_18px_rgba(236,72,153,0.25)]",
|
|
},
|
|
{
|
|
title: "Mentorship",
|
|
description: "Programs and guidance",
|
|
link: "/mentorship",
|
|
cardClass:
|
|
"border-emerald-500/40 bg-gradient-to-br from-emerald-950/60 via-teal-950/30 to-blue-900/40 text-emerald-100 hover:border-emerald-400/80 hover:shadow-[0_0_25px_rgba(16,185,129,0.35)]",
|
|
titleClass: "text-emerald-100",
|
|
descriptionClass: "text-emerald-100/70",
|
|
buttonClass:
|
|
"bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 hover:from-emerald-400 hover:via-teal-400 hover:to-cyan-400 text-black font-semibold shadow-[0_0_18px_rgba(20,184,166,0.25)]",
|
|
},
|
|
];
|
|
|
|
const resourceOfferings = [
|
|
{
|
|
title: "Documentation",
|
|
description: "Guides and tutorials",
|
|
cardClass:
|
|
"border-cyan-400/40 bg-gradient-to-br from-cyan-950/50 via-sky-950/25 to-blue-900/30 text-cyan-100 hover:border-cyan-300/70 hover:shadow-[0_0_20px_rgba(34,211,238,0.3)]",
|
|
titleClass: "text-cyan-100",
|
|
descriptionClass: "text-cyan-100/70",
|
|
actions: [
|
|
{
|
|
label: "Docs",
|
|
href: "/docs",
|
|
variant: "outline",
|
|
buttonClass:
|
|
"border-cyan-400/60 text-cyan-200 hover:bg-cyan-500/10 hover:text-cyan-100",
|
|
},
|
|
{
|
|
label: "Tutorials",
|
|
href: "/docs/tutorials",
|
|
variant: "outline",
|
|
buttonClass:
|
|
"border-cyan-400/60 text-cyan-200 hover:bg-cyan-500/10 hover:text-cyan-100",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Community",
|
|
description: "News and discussions",
|
|
cardClass:
|
|
"border-orange-400/40 bg-gradient-to-br from-amber-950/50 via-orange-950/25 to-rose-900/30 text-orange-100 hover:border-orange-300/70 hover:shadow-[0_0_20px_rgba(249,115,22,0.3)]",
|
|
titleClass: "text-orange-100",
|
|
descriptionClass: "text-orange-100/70",
|
|
actions: [
|
|
{
|
|
label: "Community",
|
|
href: "/community",
|
|
variant: "outline",
|
|
buttonClass:
|
|
"border-orange-400/60 text-orange-200 hover:bg-orange-500/10 hover:text-orange-100",
|
|
},
|
|
{
|
|
label: "Blog",
|
|
href: "/blog",
|
|
variant: "outline",
|
|
buttonClass:
|
|
"border-orange-400/60 text-orange-200 hover:bg-orange-500/10 hover:text-orange-100",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
description: "About and contact",
|
|
cardClass:
|
|
"border-indigo-400/40 bg-gradient-to-br from-indigo-950/50 via-blue-950/25 to-slate-900/30 text-indigo-100 hover:border-indigo-300/70 hover:shadow-[0_0_20px_rgba(99,102,241,0.3)]",
|
|
titleClass: "text-indigo-100",
|
|
descriptionClass: "text-indigo-100/70",
|
|
actions: [
|
|
{
|
|
label: "About",
|
|
href: "/about",
|
|
variant: "outline",
|
|
buttonClass:
|
|
"border-indigo-400/60 text-indigo-200 hover:bg-indigo-500/10 hover:text-indigo-100",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "/contact",
|
|
variant: "outline",
|
|
buttonClass:
|
|
"border-indigo-400/60 text-indigo-200 hover:bg-indigo-500/10 hover:text-indigo-100",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<LoadingScreen
|
|
message="Initializing AeThex OS..."
|
|
showProgress={true}
|
|
duration={1200}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
{/* Hero Section - Geometric Design */}
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
{/* Geometric Background Pattern */}
|
|
<div className="absolute inset-0">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-aethex-900/50 via-background to-aethex-800/50" />
|
|
<div className="absolute inset-0">
|
|
{/* Large Logo-inspired Geometric Shape */}
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<div className="relative w-96 h-96 opacity-5">
|
|
<img
|
|
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3979ec9a8a28471d900a80e94e2c45fe?format=webp&width=800"
|
|
alt="Background"
|
|
className="w-full h-full animate-float"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Geometric Elements */}
|
|
{[...Array(20)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute bg-aethex-400/20 animate-float"
|
|
style={{
|
|
width: `${10 + Math.random() * 20}px`,
|
|
height: `${10 + Math.random() * 20}px`,
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`,
|
|
animationDelay: `${Math.random() * 5}s`,
|
|
animationDuration: `${4 + Math.random() * 3}s`,
|
|
clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="container mx-auto px-4 relative z-10">
|
|
<div className="text-center space-y-12">
|
|
{/* Title */}
|
|
<div className="space-y-6 animate-scale-in">
|
|
<div className="space-y-4">
|
|
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold">
|
|
<span className="text-gradient-purple">AeThex</span>
|
|
</h1>
|
|
<h2 className="text-2xl lg:text-3xl text-gradient animate-fade-in">
|
|
The AeThex Platform
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto animate-slide-up">
|
|
Build in public, grow with community, and manage your work — from profile to production.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Interactive Features Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-4xl mx-auto animate-slide-up">
|
|
{features.map((feature, index) => {
|
|
const Icon = feature.icon;
|
|
const isActive = activeSection === index;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className={`relative overflow-hidden border-2 transition-all duration-500 hover-lift cursor-pointer group ${
|
|
isActive
|
|
? "border-aethex-500 glow-blue scale-105"
|
|
: "border-border/30 hover:border-aethex-400/50"
|
|
}`}
|
|
onClick={() => setActiveSection(index)}
|
|
>
|
|
<CardContent className="p-5 sm:p-6 text-center space-y-3">
|
|
<div
|
|
className={`mx-auto w-12 h-12 rounded-lg bg-gradient-to-r ${feature.color} flex items-center justify-center transition-all duration-300 group-hover:scale-110`}
|
|
>
|
|
<Icon className="h-6 w-6 text-white" />
|
|
</div>
|
|
<h3 className="font-semibold text-sm">{feature.title}</h3>
|
|
<p className="text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
{feature.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex flex-col sm:flex-row justify-center gap-6 animate-slide-up">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
|
|
>
|
|
<Link
|
|
to="/onboarding"
|
|
className="flex items-center space-x-2 group"
|
|
>
|
|
<Sparkles className="h-5 w-5" />
|
|
<span>Start Your Journey</span>
|
|
<ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-2" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
|
|
>
|
|
<Link to="/explore">Explore Platform</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
);
|
|
}
|