diff --git a/client/pages/GetStarted.tsx b/client/pages/GetStarted.tsx index 567e0de3..a0e68275 100644 --- a/client/pages/GetStarted.tsx +++ b/client/pages/GetStarted.tsx @@ -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(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 ( +
+ + {isOpen && ( +
+ {answer} +
+ )} +
+ ); +} + 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 ( + {/* Hero Section */}
+ + Join 12,000+ builders +

- Get Started + Get Started with AeThex

Create your account, personalize your experience, and ship faster - with AeThex. + with the platform built for builders.

- {/* Guided Steps */} + {/* Stats Section */} +
+
+
+
+
+ + +
+
Builders
+
+
+
+
+ + +
+
Projects
+
+
+
+
+ +
+
Realms
+
+
+
+
+ +
+
AI Agents
+
+
+
+ + Live Now +
+
+
+
+ + {/* Video Demo Section */}
+
+
+ + See it in action + +

+ Watch the Platform Tour +

+

+ Get a quick overview of everything AeThex has to offer +

+
+
+
+
+
+ +
+

Video coming soon

+
+
+
+ Platform Tour + ~3 min +
+
+
+
+ + {/* Guided Steps */} +
+
+

+ Get Up and Running in 3 Steps +

+

+ From signup to shipping in minutes +

+
{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" > +
+ {idx + 1} +
- +
{step.title} @@ -181,6 +497,179 @@ export default function GetStarted() {
+ {/* Platform Features */} +
+
+
+ + Why AeThex + +

+ Everything You Need to Build & Grow +

+

+ A comprehensive platform designed for creators, developers, and teams +

+
+
+ {platformFeatures.map((feature) => { + const Icon = feature.icon; + return ( + +
+ +
+ +
+
+

{feature.title}

+

+ {feature.description} +

+
+ + + ); + })} +
+
+
+ + {/* Realms Overview */} +
+
+
+ + Explore the Ecosystem + +

+ 7 Realms for Every Builder +

+

+ Each realm is designed for different aspects of building and collaboration +

+
+
+ {realms.map((realm) => { + const Icon = realm.icon; + return ( + +
+ +
+
+ +
+
+

{realm.label}

+
+
+

+ {realm.description} +

+
+ {realm.features.map((f) => ( + + {f} + + ))} +
+ + + ); + })} +
+
+ +
+
+
+ + {/* Testimonials */} +
+
+
+ + Community Love + +

+ What Builders Are Saying +

+
+
+ {testimonials.map((t, idx) => ( + + + +

+ "{t.quote}" +

+
+
+
+ {t.avatar} +
+
+

{t.name}

+

{t.role}

+
+
+
+ {Array.from({ length: t.rating }).map((_, i) => ( + + ))} +
+
+ + + ))} +
+
+
+ + {/* FAQ Section */} +
+
+
+ + FAQ + +

+ Common Questions +

+
+
+ {faqs.map((faq, idx) => ( + + ))} +
+
+
+ {/* Quick Links */}
@@ -239,26 +728,33 @@ export default function GetStarted() {
{/* Footer CTA */} -
-
+
+
- Next up + Ready to build? -

- Create your account and start building +

+ Join the AeThex Community

-
+

+ Create your free account today and start building with thousands of developers, designers, and innovators. +

+