824 lines
32 KiB
TypeScript
824 lines
32 KiB
TypeScript
import Layout from "@/components/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
Microscope,
|
|
Sparkles,
|
|
ArrowRight,
|
|
Rocket,
|
|
Layers,
|
|
Users,
|
|
BookOpen,
|
|
Terminal,
|
|
Shield,
|
|
Compass,
|
|
Zap,
|
|
Gamepad2,
|
|
Briefcase,
|
|
Network,
|
|
TrendingUp,
|
|
Heart,
|
|
MessageSquare,
|
|
Avatar,
|
|
} from "lucide-react";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import {
|
|
Avatar as AvatarComponent,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "@/components/ui/avatar";
|
|
import { communityService } from "@/lib/supabase-service";
|
|
|
|
const ARMS = [
|
|
{
|
|
id: "labs",
|
|
label: "AeThex Labs",
|
|
icon: Zap,
|
|
color: "from-yellow-500 to-orange-600",
|
|
description: "Experimental interfaces and prototypes",
|
|
focus: "R&D, Innovation, Emerging tech",
|
|
},
|
|
{
|
|
id: "gameforge",
|
|
label: "GameForge",
|
|
icon: Gamepad2,
|
|
color: "from-green-500 to-emerald-600",
|
|
description: "Game development studios and tools",
|
|
focus: "Game Development, Studios, Tools",
|
|
},
|
|
{
|
|
id: "corp",
|
|
label: "AeThex Corp",
|
|
icon: Briefcase,
|
|
color: "from-blue-500 to-indigo-600",
|
|
description: "Enterprise consulting & architecture",
|
|
focus: "Consulting, Architecture, Delivery",
|
|
},
|
|
{
|
|
id: "foundation",
|
|
label: "Foundation",
|
|
icon: BookOpen,
|
|
color: "from-red-500 to-rose-600",
|
|
description: "Education, mentorship & learning",
|
|
focus: "Education, Mentorship, Guidance",
|
|
},
|
|
{
|
|
id: "devlink",
|
|
label: "Dev-Link",
|
|
icon: Network,
|
|
color: "from-cyan-500 to-blue-600",
|
|
description: "Developer community & connections",
|
|
focus: "Community, Networking, Resources",
|
|
},
|
|
{
|
|
id: "nexus",
|
|
label: "Nexus",
|
|
icon: Sparkles,
|
|
color: "from-purple-500 to-pink-600",
|
|
description: "Opportunities and collaborations",
|
|
focus: "Opportunities, Collaborations, Growth",
|
|
},
|
|
{
|
|
id: "staff",
|
|
label: "Staff",
|
|
icon: Shield,
|
|
color: "from-indigo-500 to-purple-600",
|
|
description: "Internal operations and governance",
|
|
focus: "Operations, Governance, Support",
|
|
},
|
|
];
|
|
|
|
export default function Explore() {
|
|
const [featuredPosts, setFeaturedPosts] = useState<any[]>([]);
|
|
const [topCreators, setTopCreators] = useState<any[]>([]);
|
|
const [isLoadingFeed, setIsLoadingFeed] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const loadFeaturedContent = async () => {
|
|
try {
|
|
const posts = await communityService.getPosts(12);
|
|
const sorted = posts
|
|
.sort((a: any) => (a.likes_count || 0) - (a.comments_count || 0))
|
|
.slice(0, 6);
|
|
setFeaturedPosts(sorted);
|
|
|
|
const creators = new Map<string, any>();
|
|
posts.forEach((post: any) => {
|
|
const author = post.user_profiles;
|
|
if (author?.id) {
|
|
if (!creators.has(author.id)) {
|
|
creators.set(author.id, {
|
|
...author,
|
|
posts: 1,
|
|
likes: post.likes_count || 0,
|
|
});
|
|
} else {
|
|
const existing = creators.get(author.id);
|
|
existing.posts += 1;
|
|
existing.likes += post.likes_count || 0;
|
|
}
|
|
}
|
|
});
|
|
|
|
const topCreatorsArray = Array.from(creators.values())
|
|
.sort((a, b) => b.likes - a.likes)
|
|
.slice(0, 4);
|
|
setTopCreators(topCreatorsArray);
|
|
} catch (error) {
|
|
console.error("Failed to load featured content:", error);
|
|
} finally {
|
|
setIsLoadingFeed(false);
|
|
}
|
|
};
|
|
|
|
loadFeaturedContent();
|
|
}, []);
|
|
|
|
const achievements = useMemo(
|
|
() => [
|
|
{ metric: "10K+", label: "Active Creators" },
|
|
{ metric: "500+", label: "Projects Shipped" },
|
|
{ metric: "99.99%", label: "Feature Quality" },
|
|
{ metric: "24/7", label: "Global Community" },
|
|
],
|
|
[],
|
|
);
|
|
|
|
const serviceOfferings = useMemo(
|
|
() => [
|
|
{
|
|
title: "Game Development",
|
|
description: "Studios and indie support",
|
|
link: "/game-development",
|
|
tags: ["Studios", "Tools"],
|
|
icon: Rocket,
|
|
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",
|
|
tags: ["Architecture", "Delivery"],
|
|
icon: Layers,
|
|
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",
|
|
tags: ["Programs", "Guidance"],
|
|
icon: Users,
|
|
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 = useMemo(
|
|
() => [
|
|
{
|
|
title: "Documentation",
|
|
description: "Guides and tutorials",
|
|
tags: ["Guides", "Tutorials"],
|
|
icon: BookOpen,
|
|
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",
|
|
tags: ["Blog", "Hub"],
|
|
icon: Shield,
|
|
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",
|
|
tags: ["About", "Contact"],
|
|
icon: Compass,
|
|
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",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<Layout>
|
|
{/* Achievements Section */}
|
|
<section id="overview" className="py-16 sm:py-20 bg-background/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h1 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Explore AeThex
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">
|
|
Our impact across the digital landscape
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{achievements.map((achievement, index) => (
|
|
<div
|
|
key={index}
|
|
className="text-center space-y-4 animate-scale-in hover-lift"
|
|
style={{ animationDelay: `${index * 0.2}s` }}
|
|
>
|
|
<div className="relative">
|
|
<div className="text-4xl lg:text-5xl font-bold text-gradient-purple animate-pulse-glow">
|
|
{achievement.metric}
|
|
</div>
|
|
<div className="absolute -inset-2 bg-gradient-to-r from-aethex-400/20 to-neon-blue/20 rounded-lg blur-xl opacity-50" />
|
|
</div>
|
|
<p className="text-sm text-muted-foreground uppercase tracking-wider">
|
|
{achievement.label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Core Areas */}
|
|
<section id="services" className="py-16 sm:py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient">
|
|
Core Areas
|
|
</h2>
|
|
<p className="text-muted-foreground mt-2">
|
|
Services, programs, resources, and community
|
|
</p>
|
|
</div>
|
|
|
|
{(() => {
|
|
const combined = [...serviceOfferings, ...resourceOfferings];
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{combined.map((offering: any, idx: number) => (
|
|
<Card
|
|
key={offering.title}
|
|
className={`relative overflow-hidden border transition-all duration-500 group hover:-translate-y-1 h-full flex flex-col bg-card/60 border-border/50 ${offering.cardClass}`}
|
|
style={{ animationDelay: `${idx * 0.06}s` }}
|
|
>
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 group-hover:opacity-40 transition-opacity duration-500" />
|
|
<CardHeader className="relative space-y-3 min-h-[110px]">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className={`text-lg ${offering.titleClass}`}>
|
|
{offering.title}
|
|
</CardTitle>
|
|
{offering.icon && (
|
|
<div className="w-9 h-9 rounded-md bg-white/10 grid place-items-center">
|
|
{/* @ts-ignore */}
|
|
<offering.icon className="h-4 w-4" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<CardDescription
|
|
className={`text-sm ${offering.descriptionClass}`}
|
|
>
|
|
{offering.description}
|
|
</CardDescription>
|
|
{offering.tags && (
|
|
<div className="flex flex-wrap gap-2 pt-1">
|
|
{offering.tags.map((t: string) => (
|
|
<span
|
|
key={t}
|
|
className="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded border border-white/10 text-white/80"
|
|
>
|
|
{t}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="relative pt-2 mt-auto">
|
|
{offering.link ? (
|
|
<Button
|
|
asChild
|
|
className={`w-full ${offering.buttonClass || "bg-gradient-to-r from-aethex-500 to-neon-blue"}`}
|
|
>
|
|
<Link to={offering.link}>Learn More</Link>
|
|
</Button>
|
|
) : (
|
|
<>
|
|
{offering.actions?.[0] ? (
|
|
<Button
|
|
asChild
|
|
variant={offering.actions[0].variant as any}
|
|
className={`w-full ${offering.actions[0].buttonClass || "border-border"}`}
|
|
>
|
|
{offering.actions[0].external ? (
|
|
<a
|
|
href={offering.actions[0].href}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{offering.actions[0].label}
|
|
</a>
|
|
) : (
|
|
<Link to={offering.actions[0].href}>
|
|
{offering.actions[0].label}
|
|
</Link>
|
|
)}
|
|
</Button>
|
|
) : null}
|
|
{offering.actions && offering.actions.length > 1 ? (
|
|
<div className="mt-2 flex flex-wrap gap-3 justify-center text-xs text-muted-foreground">
|
|
{offering.actions.slice(1).map((a: any) =>
|
|
a.external ? (
|
|
<a
|
|
key={a.label}
|
|
href={a.href}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="hover:text-foreground/80"
|
|
>
|
|
{a.label}
|
|
</a>
|
|
) : (
|
|
<Link
|
|
key={a.label}
|
|
to={a.href}
|
|
className="hover:text-foreground/80"
|
|
>
|
|
{a.label}
|
|
</Link>
|
|
),
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Arms Directory */}
|
|
<section id="arms" className="py-16 sm:py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient">
|
|
The 7 Arms of AeThex
|
|
</h2>
|
|
<p className="text-muted-foreground mt-2">
|
|
Explore each specialized division shaping the future
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-4">
|
|
{ARMS.map((arm, idx) => {
|
|
const Icon = arm.icon;
|
|
return (
|
|
<Card
|
|
key={arm.id}
|
|
className="relative overflow-hidden bg-card/40 border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift group h-full"
|
|
style={{ animationDelay: `${idx * 0.06}s` }}
|
|
>
|
|
<CardContent className="p-4 space-y-3 flex flex-col h-full">
|
|
<div
|
|
className={`w-10 h-10 rounded-lg bg-gradient-to-r ${arm.color} grid place-items-center`}
|
|
>
|
|
<Icon className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-foreground text-sm">
|
|
{arm.label}
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{arm.description}
|
|
</p>
|
|
</div>
|
|
<div className="mt-auto pt-2">
|
|
<p className="text-[10px] text-muted-foreground/70 uppercase tracking-wider">
|
|
Focus:
|
|
</p>
|
|
<p className="text-xs text-foreground/80 mt-1">
|
|
{arm.focus}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Posts Section */}
|
|
{!isLoadingFeed && featuredPosts.length > 0 && (
|
|
<section
|
|
id="featured-posts"
|
|
className="py-16 sm:py-20 bg-background/50"
|
|
>
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient">
|
|
Community Highlights
|
|
</h2>
|
|
<p className="text-muted-foreground mt-2">
|
|
Top posts from the AeThex community
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{featuredPosts.map((post: any, idx: number) => {
|
|
const author = post.user_profiles;
|
|
return (
|
|
<Card
|
|
key={post.id}
|
|
className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift group"
|
|
style={{ animationDelay: `${idx * 0.08}s` }}
|
|
>
|
|
<CardContent className="p-6 space-y-4">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<AvatarComponent className="h-10 w-10">
|
|
<AvatarImage
|
|
src={author?.avatar_url}
|
|
alt={author?.full_name}
|
|
/>
|
|
<AvatarFallback>
|
|
{author?.full_name?.[0]?.toUpperCase() || "C"}
|
|
</AvatarFallback>
|
|
</AvatarComponent>
|
|
<div className="min-w-0">
|
|
<p className="font-semibold text-sm text-foreground truncate">
|
|
{author?.full_name || "Community member"}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{new Date(post.created_at).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm text-foreground line-clamp-3">
|
|
{post.title}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 pt-2 text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-1">
|
|
<Heart className="h-3.5 w-3.5" />
|
|
<span>{post.likes_count || 0}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<MessageSquare className="h-3.5 w-3.5" />
|
|
<span>{post.comments_count || 0}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full"
|
|
>
|
|
<Link to="/feed">View Post</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="text-center mt-8">
|
|
<Button asChild size="lg" variant="outline">
|
|
<Link to="/feed">Explore Full Feed</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Creator Spotlights Section */}
|
|
{!isLoadingFeed && topCreators.length > 0 && (
|
|
<section id="creators" className="py-16 sm:py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient">
|
|
Top Creators
|
|
</h2>
|
|
<p className="text-muted-foreground mt-2">
|
|
Meet the most engaged members of our community
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{topCreators.map((creator: any, idx: number) => (
|
|
<Card
|
|
key={creator.id}
|
|
className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift group"
|
|
style={{ animationDelay: `${idx * 0.1}s` }}
|
|
>
|
|
<CardContent className="p-6 space-y-4 text-center">
|
|
<div className="flex justify-center">
|
|
<AvatarComponent className="h-16 w-16">
|
|
<AvatarImage
|
|
src={creator.avatar_url}
|
|
alt={creator.full_name}
|
|
/>
|
|
<AvatarFallback>
|
|
{creator.full_name?.[0]?.toUpperCase() || "C"}
|
|
</AvatarFallback>
|
|
</AvatarComponent>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="font-semibold text-foreground">
|
|
{creator.full_name || creator.username}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{creator.username}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3 text-center">
|
|
<div>
|
|
<p className="text-lg font-bold text-gradient-purple">
|
|
{creator.posts}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">Posts</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-lg font-bold text-gradient-purple">
|
|
{creator.likes}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">Likes</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
asChild
|
|
size="sm"
|
|
className="w-full bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"
|
|
>
|
|
<Link to="/feed">Follow</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Labs Spotlight */}
|
|
<section id="labs" className="py-16 sm:py-20">
|
|
<div className="container mx-auto px-4">
|
|
<Card className="relative overflow-hidden border border-yellow-400/40 bg-black/85 text-yellow-100 shadow-[0_0_24px_rgba(250,204,21,0.15)]">
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-yellow-500/10 via-transparent to-transparent" />
|
|
<CardContent className="p-8 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
|
<div className="space-y-3">
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-yellow-400/40 px-3 py-1 text-xs uppercase tracking-widest">
|
|
R&D
|
|
</div>
|
|
<h3 className="text-2xl font-bold flex items-center gap-2">
|
|
<Microscope className="h-5 w-5 text-yellow-300" /> AeThex Labs
|
|
</h3>
|
|
<p className="text-yellow-100/80">
|
|
Experimental interfaces, prototypes, and internal tooling.
|
|
Enter the BlackSite to see what's next.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-3 justify-end">
|
|
<Button
|
|
asChild
|
|
className="bg-yellow-400 text-black hover:bg-yellow-300"
|
|
>
|
|
<Link to="/research">Open Interface</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
className="border-yellow-400/60 text-yellow-200 hover:bg-yellow-500/10"
|
|
>
|
|
<a
|
|
href="https://labs.aethex.biz"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Visit labs.aethex.biz
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Technology Showcase */}
|
|
<section
|
|
id="technology"
|
|
className="py-16 sm:py-20 relative overflow-hidden"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-aethex-900/20 via-transparent to-neon-blue/20" />
|
|
|
|
<div className="container mx-auto px-4 relative z-10">
|
|
<div className="max-w-5xl mx-auto text-center space-y-10">
|
|
<div className="animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
What We Build
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-3xl mx-auto">
|
|
Systems, tools, and experiences that power creators and teams.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
|
|
{[
|
|
{
|
|
name: "Game Studios",
|
|
status: "Active",
|
|
color: "from-purple-500 to-blue-600",
|
|
icon: Rocket,
|
|
desc: "Production pipelines, content tooling, and live ops.",
|
|
},
|
|
{
|
|
name: "Design Systems",
|
|
status: "Evolving",
|
|
color: "from-blue-500 to-green-600",
|
|
icon: Layers,
|
|
desc: "Unified components and patterns across apps.",
|
|
},
|
|
{
|
|
name: "Creator Tools",
|
|
status: "Live",
|
|
color: "from-green-500 to-yellow-600",
|
|
icon: Terminal,
|
|
desc: "CLI, automation, and workflow accelerators.",
|
|
},
|
|
{
|
|
name: "Launch Ops",
|
|
status: "Scaling",
|
|
color: "from-yellow-500 to-red-600",
|
|
icon: Shield,
|
|
desc: "Release orchestration, quality gates, and metrics.",
|
|
},
|
|
{
|
|
name: "Content Pipeline",
|
|
status: "In Progress",
|
|
color: "from-red-500 to-purple-600",
|
|
icon: BookOpen,
|
|
desc: "Publishing, assets, and distribution systems.",
|
|
},
|
|
{
|
|
name: "Edge Experiences",
|
|
status: "Deployed",
|
|
color: "from-purple-500 to-pink-600",
|
|
icon: Users,
|
|
desc: "Low-latency interfaces on the edge.",
|
|
},
|
|
].map((tech, index) => (
|
|
<Card
|
|
key={index}
|
|
className="relative overflow-hidden bg-card/40 border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift group animate-scale-in"
|
|
style={{ animationDelay: `${index * 0.08}s` }}
|
|
>
|
|
<CardContent className="p-6 space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className={`w-9 h-9 rounded-md bg-gradient-to-r ${tech.color} grid place-items-center`}
|
|
>
|
|
{/* @ts-ignore */}
|
|
<tech.icon className="h-4 w-4 text-white" />
|
|
</div>
|
|
<h3 className="font-semibold text-foreground">
|
|
{tech.name}
|
|
</h3>
|
|
</div>
|
|
<span className="text-xs px-2 py-0.5 rounded-full border border-white/10 text-muted-foreground">
|
|
{tech.status}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">{tech.desc}</p>
|
|
<div
|
|
className={`mt-1 h-[2px] w-16 rounded-full bg-gradient-to-r ${tech.color} opacity-60 group-hover:opacity-100 transition-opacity`}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<div className="space-y-6 animate-slide-up">
|
|
<h3 className="text-2xl font-bold text-gradient-purple">
|
|
Ready to Build the Future?
|
|
</h3>
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<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 interactive-scale"
|
|
>
|
|
<Link
|
|
to="/onboarding"
|
|
className="flex items-center space-x-2 group"
|
|
>
|
|
<Sparkles className="h-5 w-5" />
|
|
<span>Join AeThex</span>
|
|
<ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-aethex-400/50 hover:border-aethex-400 hover-lift interactive-scale"
|
|
>
|
|
<Link to="/dashboard">Explore Platform</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
);
|
|
}
|