AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance Get Started page with new features and improve component cleanup

Browse source 
Adds a comprehensive onboarding page for '/get-started' including animated stats, platform features, realm overviews, testimonials, and FAQs. Also includes cleanup for the AnimatedCounter component by properly handling requestAnimationFrame.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: fbed6f14-ed74-44ad-8bac-a96e5d73aa28
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/aPpJgbb
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr 2025-12-13 01:24:53 +00:00
parent 6840cca5b3
commit 695ca69c91
2 changed files with 512 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

526
client/pages/GetStarted.tsx
View file

@ -9,7 +9,7 @@ import {
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Link, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { useEffect, useState, useRef } from "react";
import { useAuth } from "@/contexts/AuthContext";
import {
UserPlus,
@ -20,8 +20,80 @@ import {
LifeBuoy,
ArrowRight,
CheckCircle,
Sparkles,
Trophy,
Bot,
IdCard,
Zap,
Shield,
Globe,
Gamepad2,
Building2,
FlaskConical,
Building,
Wrench,
Link2,
Play,
ChevronDown,
ChevronUp,
Quote,
Star,
} from "lucide-react";
function AnimatedCounter({ target, duration = 2000 }: { target: number; duration?: number }) {
const [count, setCount] = useState(0);
const rafRef = useRef<number | null>(null);
useEffect(() => {
const startTime = Date.now();
const animate = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3);
setCount(Math.floor(target * eased));
if (progress < 1) {
rafRef.current = requestAnimationFrame(animate);
}
};
const timer = setTimeout(() => {
rafRef.current = requestAnimationFrame(animate);
}, 300);
return () => {
clearTimeout(timer);
if (rafRef.current !== null) {
cancelAnimationFrame(rafRef.current);
}
};
}, [target, duration]);
return <>{count.toLocaleString()}</>;
}
function FAQItem({ question, answer }: { question: string; answer: string }) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="border border-border/50 rounded-lg overflow-hidden bg-card/40 hover:border-aethex-400/30 transition-colors">
<button
onClick={() => setIsOpen(!isOpen)}
className="w-full px-6 py-4 flex items-center justify-between text-left"
>
<span className="font-medium">{question}</span>
{isOpen ? (
<ChevronUp className="h-5 w-5 text-muted-foreground" />
) : (
<ChevronDown className="h-5 w-5 text-muted-foreground" />
)}
</button>
{isOpen && (
<div className="px-6 pb-4 text-muted-foreground text-sm leading-relaxed">
{answer}
</div>
)}
</div>
);
}
export default function GetStarted() {
const steps = [
{
@ -58,6 +130,162 @@ export default function GetStarted() {
},
];
const platformFeatures = [
{
title: "XP & Leveling System",
description: "Earn XP for daily logins, completing your profile, creating posts, and earning badges. Level up to unlock new features and recognition.",
icon: Trophy,
color: "from-yellow-500 to-amber-600",
},
{
title: "AI Intelligent Agents",
description: "Access 10 specialized AI personas for guidance on networking, game development, ethics, architecture, and more.",
icon: Bot,
color: "from-purple-500 to-violet-600",
},
{
title: "Creator Passports",
description: "Build a portable profile that aggregates your achievements, verified skills, project history, and mentorship contributions.",
icon: IdCard,
color: "from-cyan-500 to-blue-600",
},
{
title: "Real-time Community",
description: "Connect with fellow builders through posts, comments, and direct collaboration. Share progress and find teammates.",
icon: Users,
color: "from-green-500 to-emerald-600",
},
{
title: "Achievement Badges",
description: "Unlock badges for milestones like first post, mentorship, event attendance, and project completions.",
icon: Sparkles,
color: "from-pink-500 to-rose-600",
},
{
title: "Secure & Private",
description: "Enterprise-grade security with Supabase authentication, role-based access, and encrypted data storage.",
icon: Shield,
color: "from-slate-500 to-gray-600",
},
];
const realms = [
{
id: "nexus",
label: "NEXUS",
description: "The marketplace hub for opportunities, contracts, and commissions.",
icon: Globe,
color: "from-violet-500 to-purple-600",
features: ["Job board", "Contracts", "Proposals"],
},
{
id: "gameforge",
label: "GAMEFORGE",
description: "Game development powerhouse for building immersive experiences.",
icon: Gamepad2,
color: "from-green-500 to-emerald-600",
features: ["Sprints", "Assets", "Playtests"],
},
{
id: "foundation",
label: "FOUNDATION",
description: "Learn and grow through courses, mentorship, and skill tracking.",
icon: Building2,
color: "from-red-500 to-rose-600",
features: ["Courses", "Mentors", "Badges"],
},
{
id: "labs",
label: "LABS",
description: "Research and experimentation pushing the boundaries of possible.",
icon: FlaskConical,
color: "from-yellow-500 to-amber-600",
features: ["R&D", "Experiments", "Deep-dives"],
},
{
id: "corp",
label: "CORP",
description: "Enterprise solutions with managed services for organizations.",
icon: Building,
color: "from-blue-500 to-cyan-600",
features: ["Support", "SLAs", "Integrations"],
},
{
id: "staff",
label: "STAFF",
description: "Internal operations and team management for AeThex members.",
icon: Wrench,
color: "from-purple-500 to-violet-600",
features: ["Admin", "Ops", "Tools"],
},
{
id: "devlink",
label: "DEV-LINK",
description: "Developer networking and collaboration for fellow builders.",
icon: Link2,
color: "from-teal-500 to-cyan-600",
features: ["Profiles", "Matching", "Collab"],
},
];
const testimonials = [
{
name: "Alex Chen",
role: "Indie Game Developer",
avatar: "🎮",
quote: "AeThex transformed how I find collaborators. The Passport system makes it easy to showcase my work and connect with the right people.",
rating: 5,
},
{
name: "Sarah Mitchell",
role: "Full Stack Engineer",
avatar: "👩‍💻",
quote: "The AI agents are incredible. Having specialized guidance for different aspects of development saves me hours of research every week.",
rating: 5,
},
{
name: "Marcus Johnson",
role: "Studio Lead @ PixelForge",
avatar: "🚀",
quote: "We've onboarded our entire team to AeThex. The GameForge realm is perfect for managing our sprint cycles and asset pipelines.",
rating: 5,
},
{
name: "Emily Rodriguez",
role: "UX Designer",
avatar: "🎨",
quote: "Love the XP system! It gamifies professional growth in a way that actually motivates me to engage more with the community.",
rating: 5,
},
];
const faqs = [
{
question: "Is AeThex free to use?",
answer: "Yes! AeThex offers a generous free tier that includes full access to community features, XP & leveling, basic AI agent access, and your Creator Passport. Pro ($9/mo) and Council ($29/mo) tiers unlock additional AI personas and premium features.",
},
{
question: "What are Realms and how do they work?",
answer: "Realms are specialized areas of the platform, each designed for different aspects of building and collaboration. You can explore all 7 realms freely, but you'll set a primary realm during onboarding that personalizes your dashboard and recommendations.",
},
{
question: "How does the XP system work?",
answer: "You earn XP through various activities: daily logins (25 XP + streak bonus), completing your profile (100 XP), creating posts (20 XP), earning badges (200 XP), and more. Every 1000 XP you level up, unlocking recognition and features.",
},
{
question: "Can I use AeThex for my team or studio?",
answer: "Absolutely! The Corp realm offers enterprise solutions with dedicated support, custom integrations, and SLA guarantees. Teams can also collaborate freely in GameForge for game development or Dev-Link for general projects.",
},
{
question: "What are AI Intelligent Agents?",
answer: "AeThex includes 10 specialized AI personas powered by advanced language models. Each agent is tailored for specific domains like networking, game development, ethics, curriculum design, and more. Free users get access to core agents, while Pro/Council unlock the full roster.",
},
{
question: "How do Creator Passports work?",
answer: "Your Creator Passport is a portable profile that aggregates your achievements, verified skills, project contributions, and mentorship history. It serves as your professional identity across the AeThex ecosystem and can be shared externally.",
},
];
const quickLinks = [
{
title: "Documentation",
@ -75,7 +303,7 @@ export default function GetStarted() {
},
{
title: "Support",
desc: "We’re here to help",
desc: "We're here to help",
icon: LifeBuoy,
href: "/support",
color: "from-amber-500 to-orange-500",
@ -93,28 +321,34 @@ export default function GetStarted() {
return (
<Layout>
{/* Hero Section */}
<section className="relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-aethex-900/40 via-background to-neon-blue/10" />
<div className="container mx-auto px-4 relative z-10 py-14 sm:py-20">
<div className="max-w-5xl mx-auto text-center space-y-6">
<Badge variant="outline" className="border-aethex-400/40 text-aethex-300">
Join 12,000+ builders
</Badge>
<h1 className="text-4xl lg:text-5xl font-extrabold tracking-tight">
<span className="text-gradient">Get Started</span>
<span className="text-gradient">Get Started with AeThex</span>
</h1>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Create your account, personalize your experience, and ship faster
with AeThex.
with the platform built for builders.
</p>
<div className="flex flex-col sm:flex-row items-center 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"
>
<Link to="/onboarding" className="flex items-center gap-2">
<CheckCircle className="h-5 w-5" /> Join AeThex
<CheckCircle className="h-5 w-5" /> Join AeThex Free
</Link>
</Button>
<Button
asChild
size="lg"
variant="outline"
className="border-aethex-400/50 hover:border-aethex-400"
>
@ -125,9 +359,88 @@ export default function GetStarted() {
</div>
</section>
{/* Guided Steps */}
{/* Stats Section */}
<section className="py-8 border-y border-border/30 bg-muted/20">
<div className="container mx-auto px-4">
<div className="flex flex-wrap justify-center items-center gap-8 sm:gap-16">
<div className="text-center">
<div className="text-3xl font-bold text-foreground">
<AnimatedCounter target={12000} />+
</div>
<div className="text-sm text-muted-foreground">Builders</div>
</div>
<div className="hidden sm:block w-px h-10 bg-border/50" />
<div className="text-center">
<div className="text-3xl font-bold text-foreground">
<AnimatedCounter target={500} />+
</div>
<div className="text-sm text-muted-foreground">Projects</div>
</div>
<div className="hidden sm:block w-px h-10 bg-border/50" />
<div className="text-center">
<div className="text-3xl font-bold text-foreground">
<AnimatedCounter target={7} duration={1000} />
</div>
<div className="text-sm text-muted-foreground">Realms</div>
</div>
<div className="hidden sm:block w-px h-10 bg-border/50" />
<div className="text-center">
<div className="text-3xl font-bold text-foreground">
<AnimatedCounter target={10} duration={1000} />
</div>
<div className="text-sm text-muted-foreground">AI Agents</div>
</div>
<div className="hidden sm:block w-px h-10 bg-border/50" />
<div className="text-center flex items-center gap-2">
<span className="h-3 w-3 rounded-full bg-green-500 animate-pulse" />
<span className="text-sm text-muted-foreground">Live Now</span>
</div>
</div>
</div>
</section>
{/* Video Demo Section */}
<section className="py-12 sm:py-16">
<div className="container mx-auto px-4 max-w-4xl">
<div className="text-center mb-8">
<Badge variant="outline" className="border-aethex-400/40 text-aethex-300 mb-4">
See it in action
</Badge>
<h2 className="text-2xl sm:text-3xl font-bold">
Watch the <span className="text-gradient">Platform Tour</span>
</h2>
<p className="text-muted-foreground mt-2">
Get a quick overview of everything AeThex has to offer
</p>
</div>
<div className="relative aspect-video rounded-xl overflow-hidden border border-border/50 bg-card/60 group cursor-pointer hover:border-aethex-400/50 transition-all">
<div className="absolute inset-0 bg-gradient-to-br from-aethex-900/60 via-background/80 to-neon-blue/20 flex items-center justify-center">
<div className="text-center space-y-4">
<div className="w-20 h-20 rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg shadow-aethex-500/30">
<Play className="h-8 w-8 text-white ml-1" />
</div>
<p className="text-muted-foreground text-sm">Video coming soon</p>
</div>
</div>
<div className="absolute bottom-4 left-4 right-4 flex items-center justify-between text-xs text-muted-foreground">
<span>Platform Tour</span>
<span>~3 min</span>
</div>
</div>
</div>
</section>
{/* Guided Steps */}
<section className="py-12 sm:py-16 bg-muted/10">
<div className="container mx-auto px-4 max-w-6xl">
<div className="text-center mb-10">
<h2 className="text-2xl sm:text-3xl font-bold">
Get Up and Running in <span className="text-gradient">3 Steps</span>
</h2>
<p className="text-muted-foreground mt-2">
From signup to shipping in minutes
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{steps.map((step, idx) => {
const Icon = step.icon;
@ -136,10 +449,13 @@ export default function GetStarted() {
key={idx}
className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-300 group"
>
<div className="absolute top-4 left-4 w-8 h-8 rounded-full bg-muted flex items-center justify-center text-sm font-bold text-muted-foreground">
{idx + 1}
</div>
<div
className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${step.color} opacity-0 group-hover:opacity-10 transition-opacity`}
/>
<CardHeader className="space-y-3">
<CardHeader className="space-y-3 pt-14">
<div className="flex items-center justify-between">
<CardTitle className="text-lg font-semibold">
{step.title}
@ -181,6 +497,179 @@ export default function GetStarted() {
</div>
</section>
{/* Platform Features */}
<section className="py-12 sm:py-16">
<div className="container mx-auto px-4 max-w-6xl">
<div className="text-center mb-10">
<Badge variant="outline" className="border-aethex-400/40 text-aethex-300 mb-4">
Why AeThex
</Badge>
<h2 className="text-2xl sm:text-3xl font-bold">
Everything You Need to <span className="text-gradient-purple">Build & Grow</span>
</h2>
<p className="text-muted-foreground mt-2 max-w-2xl mx-auto">
A comprehensive platform designed for creators, developers, and teams
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{platformFeatures.map((feature) => {
const Icon = feature.icon;
return (
<Card
key={feature.title}
className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-300 group"
>
<div
className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-10 transition-opacity`}
/>
<CardContent className="p-6 space-y-4">
<div
className={`w-12 h-12 rounded-lg bg-gradient-to-r ${feature.color} grid place-items-center`}
>
<Icon className="h-6 w-6 text-white" />
</div>
<div>
<h3 className="font-semibold text-lg">{feature.title}</h3>
<p className="text-sm text-muted-foreground mt-1">
{feature.description}
</p>
</div>
</CardContent>
</Card>
);
})}
</div>
</div>
</section>
{/* Realms Overview */}
<section className="py-12 sm:py-16 bg-muted/10">
<div className="container mx-auto px-4 max-w-6xl">
<div className="text-center mb-10">
<Badge variant="outline" className="border-aethex-400/40 text-aethex-300 mb-4">
Explore the Ecosystem
</Badge>
<h2 className="text-2xl sm:text-3xl font-bold">
<span className="text-gradient">7 Realms</span> for Every Builder
</h2>
<p className="text-muted-foreground mt-2 max-w-2xl mx-auto">
Each realm is designed for different aspects of building and collaboration
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{realms.map((realm) => {
const Icon = realm.icon;
return (
<Card
key={realm.id}
className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/50 transition-all duration-300 group cursor-pointer"
>
<div
className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${realm.color} opacity-0 group-hover:opacity-15 transition-opacity`}
/>
<CardContent className="p-5 space-y-3">
<div className="flex items-center gap-3">
<div
className={`w-10 h-10 rounded-md bg-gradient-to-r ${realm.color} grid place-items-center shrink-0`}
>
<Icon className="h-5 w-5 text-white" />
</div>
<div>
<h3 className="font-bold text-sm">{realm.label}</h3>
</div>
</div>
<p className="text-xs text-muted-foreground leading-relaxed">
{realm.description}
</p>
<div className="flex flex-wrap gap-1.5">
{realm.features.map((f) => (
<span
key={f}
className="text-[10px] px-2 py-0.5 rounded-full bg-muted text-muted-foreground"
>
{f}
</span>
))}
</div>
</CardContent>
</Card>
);
})}
</div>
<div className="text-center mt-8">
<Button asChild variant="outline" className="border-aethex-400/50 hover:border-aethex-400">
<Link to="/" className="flex items-center gap-2">
Explore All Realms <ArrowRight className="h-4 w-4" />
</Link>
</Button>
</div>
</div>
</section>
{/* Testimonials */}
<section className="py-12 sm:py-16">
<div className="container mx-auto px-4 max-w-6xl">
<div className="text-center mb-10">
<Badge variant="outline" className="border-aethex-400/40 text-aethex-300 mb-4">
Community Love
</Badge>
<h2 className="text-2xl sm:text-3xl font-bold">
What <span className="text-gradient">Builders</span> Are Saying
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{testimonials.map((t, idx) => (
<Card
key={idx}
className="relative overflow-hidden bg-card/60 border-border/50 hover:border-aethex-400/30 transition-all"
>
<CardContent className="p-6 space-y-4">
<Quote className="h-8 w-8 text-aethex-400/30" />
<p className="text-muted-foreground leading-relaxed">
"{t.quote}"
</p>
<div className="flex items-center justify-between pt-2 border-t border-border/30">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-aethex-500/20 to-neon-blue/20 flex items-center justify-center text-xl">
{t.avatar}
</div>
<div>
<p className="font-medium text-sm">{t.name}</p>
<p className="text-xs text-muted-foreground">{t.role}</p>
</div>
</div>
<div className="flex gap-0.5">
{Array.from({ length: t.rating }).map((_, i) => (
<Star key={i} className="h-4 w-4 fill-yellow-500 text-yellow-500" />
))}
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* FAQ Section */}
<section className="py-12 sm:py-16 bg-muted/10">
<div className="container mx-auto px-4 max-w-3xl">
<div className="text-center mb-10">
<Badge variant="outline" className="border-aethex-400/40 text-aethex-300 mb-4">
FAQ
</Badge>
<h2 className="text-2xl sm:text-3xl font-bold">
Common <span className="text-gradient-purple">Questions</span>
</h2>
</div>
<div className="space-y-3">
{faqs.map((faq, idx) => (
<FAQItem key={idx} question={faq.question} answer={faq.answer} />
))}
</div>
</div>
</section>
{/* Quick Links */}
<section className="py-8 sm:py-12">
<div className="container mx-auto px-4 max-w-6xl">
@ -239,26 +728,33 @@ export default function GetStarted() {
</section>
{/* Footer CTA */}
<section className="py-10 sm:py-14">
<div className="container mx-auto px-4 max-w-4xl text-center space-y-5">
<section className="py-14 sm:py-20">
<div className="container mx-auto px-4 max-w-4xl text-center space-y-6">
<Badge
variant="outline"
className="border-aethex-400/40 text-aethex-300"
>
Next up
Ready to build?
</Badge>
<h3 className="text-2xl font-bold">
Create your account and start building
<h3 className="text-3xl sm:text-4xl font-bold">
Join the <span className="text-gradient">AeThex Community</span>
</h3>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<p className="text-muted-foreground max-w-xl mx-auto">
Create your free account today and start building with thousands of developers, designers, and innovators.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
<Button
asChild
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue"
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"
>
<Link to="/onboarding">Join AeThex</Link>
<Link to="/onboarding" className="flex items-center gap-2">
<Zap className="h-5 w-5" /> Get Started Free
</Link>
</Button>
<Button
asChild
size="lg"
variant="outline"
className="border-aethex-400/50 hover:border-aethex-400"
>

1
replit.md
View file

@ -68,6 +68,7 @@ This ensures the Foundation's user-facing URLs display `aethex.foundation` in th
- Updated Roadmap with Desktop App milestones (Beta in Now, Stable in Month 2) and Mobile App milestones (iOS/Android in Month 3)
- Fixed GitHub Actions workflows: icon generation pipeline, deprecated action updates, Vitest test command
- **Landing Page Styling Alignment**: Updated hero CTAs and featured realm button to use shared Button component with asChild prop for consistent styling and ripple effects. Fixed Button component to support ripple animation for both native buttons and asChild elements. Removed unused backgroundGradient variable. Custom landing page cards (featured-card, stats-strip, hero-intro) intentionally use advanced CSS effects while still leveraging design tokens (--aethex-*, --foreground, --background, --muted, etc.).
- **Get Started Page Enhancement**: Comprehensive onboarding page (`/get-started`) with: Stats/Social Proof section (animated counters: 12k+ builders, 500+ projects, 7 realms, 10 AI agents), Video Demo placeholder, 3-step guided signup flow, Platform Features section (6 cards: XP & Leveling, AI Agents, Creator Passports, Community, Badges, Security), Realms Overview (all 7 realms with descriptions and feature tags), Testimonials section (4 community quotes), and FAQ section (6 expandable questions). AnimatedCounter uses proper useRef cleanup for requestAnimationFrame.
## External Dependencies
- **Supabase**: Used for database (PostgreSQL), authentication, and real-time features.