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

Prettier format pending files

Browse source
This commit is contained in:
Builder.io 2025-08-05 23:41:41 +00:00
parent d17b42b330
commit 0af22f0488
27 changed files with 2503 additions and 1128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
client/App.tsx
View file

@ -51,13 +51,53 @@ const App = () => (
<Route path="/support" element={<Support />} /> <Route path="/support" element={<Support />} />
{/* Placeholder routes for navigation links */} {/* Placeholder routes for navigation links */}
<Route path="/about" element={<Placeholder title="About AeThex" description="Learn more about our company, mission, and team." />} /> <Route
<Route path="/contact" element={<Placeholder title="Contact Us" description="Get in touch with our team for support or inquiries." />} /> path="/about"
<Route path="/get-started" element={<Placeholder title="Get Started" description="Begin your journey with AeThex tools and services." />} /> element={
<Placeholder
title="About AeThex"
description="Learn more about our company, mission, and team."
/>
}
/>
<Route
path="/contact"
element={
<Placeholder
title="Contact Us"
description="Get in touch with our team for support or inquiries."
/>
}
/>
<Route
path="/get-started"
element={
<Placeholder
title="Get Started"
description="Begin your journey with AeThex tools and services."
/>
}
/>
{/* Legal routes */} {/* Legal routes */}
<Route path="/privacy" element={<Placeholder title="Privacy Policy" description="Our commitment to protecting your privacy." />} /> <Route
<Route path="/terms" element={<Placeholder title="Terms of Service" description="Terms and conditions for using AeThex services." />} /> path="/privacy"
element={
<Placeholder
title="Privacy Policy"
description="Our commitment to protecting your privacy."
/>
}
/>
<Route
path="/terms"
element={
<Placeholder
title="Terms of Service"
description="Terms and conditions for using AeThex services."
/>
}
/>
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
<Route path="*" element={<NotFound />} /> <Route path="*" element={<NotFound />} />

162
client/components/Layout.tsx
View file

@ -17,7 +17,7 @@ export default function Layout({ children }: LayoutProps) {
]; ];
const scrollToTop = () => { const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' }); window.scrollTo({ top: 0, behavior: "smooth" });
}; };
return ( return (
@ -32,7 +32,9 @@ export default function Layout({ children }: LayoutProps) {
alt="AeThex Logo" alt="AeThex Logo"
className="h-10 w-10 transition-all duration-300 group-hover:scale-110 group-hover:rotate-12" className="h-10 w-10 transition-all duration-300 group-hover:scale-110 group-hover:rotate-12"
/> />
<span className="text-xl font-bold text-gradient group-hover:animate-pulse">AeThex</span> <span className="text-xl font-bold text-gradient group-hover:animate-pulse">
AeThex
</span>
</div> </div>
</Link> </Link>
@ -46,7 +48,7 @@ export default function Layout({ children }: LayoutProps) {
"text-sm font-medium transition-all duration-300 hover:text-aethex-400 hover:scale-105 relative animate-fade-in", "text-sm font-medium transition-all duration-300 hover:text-aethex-400 hover:scale-105 relative animate-fade-in",
location.pathname === item.href location.pathname === item.href
? "text-aethex-500 animate-pulse-glow" ? "text-aethex-500 animate-pulse-glow"
: "text-muted-foreground" : "text-muted-foreground",
)} )}
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
@ -60,10 +62,17 @@ export default function Layout({ children }: LayoutProps) {
{/* CTA */} {/* CTA */}
<div className="flex items-center space-x-4 animate-slide-left"> <div className="flex items-center space-x-4 animate-slide-left">
<Button asChild variant="outline" className="hidden sm:inline-flex hover-lift interactive-scale"> <Button
asChild
variant="outline"
className="hidden sm:inline-flex hover-lift interactive-scale"
>
<Link to="/login">Sign In</Link> <Link to="/login">Sign In</Link>
</Button> </Button>
<Button asChild className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue"> <Button
asChild
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue"
>
<Link to="/onboarding">Join AeThex</Link> <Link to="/onboarding">Join AeThex</Link>
</Button> </Button>
</div> </div>
@ -83,55 +92,154 @@ export default function Layout({ children }: LayoutProps) {
alt="AeThex Logo" alt="AeThex Logo"
className="h-6 w-6 transition-all duration-300 group-hover:scale-110 group-hover:rotate-6" className="h-6 w-6 transition-all duration-300 group-hover:scale-110 group-hover:rotate-6"
/> />
<span className="font-bold text-gradient group-hover:animate-pulse">AeThex</span> <span className="font-bold text-gradient group-hover:animate-pulse">
AeThex
</span>
</div> </div>
<p className="text-sm text-muted-foreground hover:text-muted-foreground/80 transition-colors"> <p className="text-sm text-muted-foreground hover:text-muted-foreground/80 transition-colors">
Pushing the boundaries of technology through cutting-edge research and breakthrough discoveries. Pushing the boundaries of technology through cutting-edge
research and breakthrough discoveries.
</p> </p>
</div> </div>
{/* Services */} {/* Services */}
<div className="space-y-4 animate-slide-up" style={{ animationDelay: '0.1s' }}> <div
<h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">Services</h3> className="space-y-4 animate-slide-up"
style={{ animationDelay: "0.1s" }}
>
<h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">
Services
</h3>
<ul className="space-y-2 text-sm text-muted-foreground"> <ul className="space-y-2 text-sm text-muted-foreground">
<li><Link to="/game-development" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Game Development</Link></li> <li>
<li><Link to="/consulting" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Development Consulting</Link></li> <Link
<li><Link to="/mentorship" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Mentorship Programs</Link></li> to="/game-development"
<li><Link to="/research" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Research & Labs</Link></li> onClick={scrollToTop}
className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
>
Game Development
</Link>
</li>
<li>
<Link
to="/consulting"
onClick={scrollToTop}
className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
>
Development Consulting
</Link>
</li>
<li>
<Link
to="/mentorship"
onClick={scrollToTop}
className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
>
Mentorship Programs
</Link>
</li>
<li>
<Link
to="/research"
onClick={scrollToTop}
className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
>
Research & Labs
</Link>
</li>
</ul> </ul>
</div> </div>
{/* Resources */} {/* Resources */}
<div className="space-y-4 animate-slide-up" style={{ animationDelay: '0.2s' }}> <div
<h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">Resources</h3> className="space-y-4 animate-slide-up"
style={{ animationDelay: "0.2s" }}
>
<h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">
Resources
</h3>
<ul className="space-y-2 text-sm text-muted-foreground"> <ul className="space-y-2 text-sm text-muted-foreground">
<li><Link to="/docs" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Documentation</Link></li> <li>
<li><Link to="/blog" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Blog</Link></li> <Link
<li><Link to="/community" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Community</Link></li> to="/docs"
<li><Link to="/support" onClick={scrollToTop} className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block">Support</Link></li> onClick={scrollToTop}
className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
>
Documentation
</Link>
</li>
<li>
<Link
to="/blog"
onClick={scrollToTop}
className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
>
Blog
</Link>
</li>
<li>
<Link
to="/community"
onClick={scrollToTop}
className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
>
Community
</Link>
</li>
<li>
<Link
to="/support"
onClick={scrollToTop}
className="hover:text-aethex-400 transition-all duration-300 hover:translate-x-1 inline-block"
>
Support
</Link>
</li>
</ul> </ul>
</div> </div>
{/* Contact */} {/* Contact */}
<div className="space-y-4 animate-slide-up" style={{ animationDelay: '0.3s' }}> <div
<h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">Contact</h3> className="space-y-4 animate-slide-up"
style={{ animationDelay: "0.3s" }}
>
<h3 className="font-semibold text-foreground hover:text-gradient transition-all duration-300">
Contact
</h3>
<ul className="space-y-2 text-sm text-muted-foreground"> <ul className="space-y-2 text-sm text-muted-foreground">
<li className="hover:text-aethex-400 transition-colors">Queen Creek, Arizona</li> <li className="hover:text-aethex-400 transition-colors">
<li className="hover:text-aethex-400 transition-colors">info@aethex.biz</li> Queen Creek, Arizona
<li className="hover:text-aethex-400 transition-colors">(530) 784-1287</li> </li>
<li className="hover:text-aethex-400 transition-colors">
info@aethex.biz
</li>
<li className="hover:text-aethex-400 transition-colors">
(530) 784-1287
</li>
</ul> </ul>
</div> </div>
</div> </div>
<div className="mt-8 pt-8 border-t border-border/40 flex flex-col sm:flex-row justify-between items-center animate-fade-in" style={{ animationDelay: '0.4s' }}> <div
className="mt-8 pt-8 border-t border-border/40 flex flex-col sm:flex-row justify-between items-center animate-fade-in"
style={{ animationDelay: "0.4s" }}
>
<p className="text-xs text-muted-foreground hover:text-aethex-400 transition-colors"> <p className="text-xs text-muted-foreground hover:text-aethex-400 transition-colors">
© 2024 AeThex Corporation. All rights reserved. © 2024 AeThex Corporation. All rights reserved.
</p> </p>
<div className="flex items-center space-x-4 mt-4 sm:mt-0"> <div className="flex items-center space-x-4 mt-4 sm:mt-0">
<Link to="/privacy" onClick={scrollToTop} className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105"> <Link
to="/privacy"
onClick={scrollToTop}
className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105"
>
Privacy Policy Privacy Policy
</Link> </Link>
<Link to="/terms" onClick={scrollToTop} className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105"> <Link
to="/terms"
onClick={scrollToTop}
className="text-xs text-muted-foreground hover:text-aethex-400 transition-all duration-300 hover:scale-105"
>
Terms of Service Terms of Service
</Link> </Link>
</div> </div>

53
client/components/LoadingScreen.tsx
View file

@ -3,18 +3,18 @@ import { cn } from "@/lib/utils";
interface LoadingScreenProps { interface LoadingScreenProps {
message?: string; message?: string;
variant?: 'full' | 'overlay' | 'inline'; variant?: "full" | "overlay" | "inline";
size?: 'sm' | 'md' | 'lg'; size?: "sm" | "md" | "lg";
showProgress?: boolean; showProgress?: boolean;
duration?: number; duration?: number;
} }
export default function LoadingScreen({ export default function LoadingScreen({
message = "Loading...", message = "Loading...",
variant = 'full', variant = "full",
size = 'md', size = "md",
showProgress = false, showProgress = false,
duration = 3000 duration = 3000,
}: LoadingScreenProps) { }: LoadingScreenProps) {
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const [currentMessage, setCurrentMessage] = useState(message); const [currentMessage, setCurrentMessage] = useState(message);
@ -22,8 +22,8 @@ export default function LoadingScreen({
useEffect(() => { useEffect(() => {
if (showProgress) { if (showProgress) {
const interval = setInterval(() => { const interval = setInterval(() => {
setProgress(prev => { setProgress((prev) => {
const newProgress = prev + (100 / (duration / 100)); const newProgress = prev + 100 / (duration / 100);
return newProgress > 100 ? 100 : newProgress; return newProgress > 100 ? 100 : newProgress;
}); });
}, 100); }, 100);
@ -38,10 +38,10 @@ export default function LoadingScreen({
"Loading quantum processors...", "Loading quantum processors...",
"Calibrating neural networks...", "Calibrating neural networks...",
"Synchronizing data streams...", "Synchronizing data streams...",
"Preparing your experience..." "Preparing your experience...",
]; ];
if (variant === 'full') { if (variant === "full") {
let index = 0; let index = 0;
const interval = setInterval(() => { const interval = setInterval(() => {
setCurrentMessage(messages[index % messages.length]); setCurrentMessage(messages[index % messages.length]);
@ -53,26 +53,29 @@ export default function LoadingScreen({
}, [variant]); }, [variant]);
const sizeClasses = { const sizeClasses = {
sm: 'h-4 w-4', sm: "h-4 w-4",
md: 'h-8 w-8', md: "h-8 w-8",
lg: 'h-12 w-12' lg: "h-12 w-12",
}; };
if (variant === 'inline') { if (variant === "inline") {
return ( return (
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className={cn("relative", sizeClasses[size])}> <div className={cn("relative", sizeClasses[size])}>
<div className="absolute inset-0 rounded-full border-2 border-aethex-400/30"></div> <div className="absolute inset-0 rounded-full border-2 border-aethex-400/30"></div>
<div className="absolute inset-0 rounded-full border-2 border-transparent border-t-aethex-400 animate-spin"></div> <div className="absolute inset-0 rounded-full border-2 border-transparent border-t-aethex-400 animate-spin"></div>
</div> </div>
<span className="text-sm text-muted-foreground animate-pulse">{message}</span> <span className="text-sm text-muted-foreground animate-pulse">
{message}
</span>
</div> </div>
); );
} }
const containerClasses = variant === 'full' const containerClasses =
? "fixed inset-0 bg-background/95 backdrop-blur-sm z-50" variant === "full"
: "absolute inset-0 bg-background/80 backdrop-blur-sm z-40"; ? "fixed inset-0 bg-background/95 backdrop-blur-sm z-50"
: "absolute inset-0 bg-background/80 backdrop-blur-sm z-40";
return ( return (
<div className={containerClasses}> <div className={containerClasses}>
@ -100,9 +103,9 @@ export default function LoadingScreen({
key={i} key={i}
className="w-1 bg-aethex-400 rounded-full animate-pulse" className="w-1 bg-aethex-400 rounded-full animate-pulse"
style={{ style={{
height: `${20 + (i * 10)}px`, height: `${20 + i * 10}px`,
animationDelay: `${i * 0.2}s`, animationDelay: `${i * 0.2}s`,
animationDuration: '1s' animationDuration: "1s",
}} }}
/> />
))} ))}
@ -113,12 +116,14 @@ export default function LoadingScreen({
{showProgress && ( {showProgress && (
<div className="space-y-2"> <div className="space-y-2">
<div className="w-full bg-muted rounded-full h-2 overflow-hidden"> <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
<div <div
className="h-full bg-gradient-to-r from-aethex-500 to-neon-blue transition-all duration-300 ease-out" className="h-full bg-gradient-to-r from-aethex-500 to-neon-blue transition-all duration-300 ease-out"
style={{ width: `${progress}%` }} style={{ width: `${progress}%` }}
/> />
</div> </div>
<div className="text-xs text-muted-foreground">{Math.round(progress)}%</div> <div className="text-xs text-muted-foreground">
{Math.round(progress)}%
</div>
</div> </div>
)} )}
@ -142,7 +147,7 @@ export default function LoadingScreen({
left: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 2}s`, animationDelay: `${Math.random() * 2}s`,
animationDuration: `${2 + Math.random() * 3}s` animationDuration: `${2 + Math.random() * 3}s`,
}} }}
> >
{Math.random().toString(2).substr(2, 1)} {Math.random().toString(2).substr(2, 1)}

12
client/components/PageTransition.tsx
View file

@ -14,7 +14,7 @@ export default function PageTransition({ children }: PageTransitionProps) {
useEffect(() => { useEffect(() => {
setIsLoading(true); setIsLoading(true);
setIsVisible(false); setIsVisible(false);
const timer = setTimeout(() => { const timer = setTimeout(() => {
setIsLoading(false); setIsLoading(false);
setIsVisible(true); setIsVisible(true);
@ -26,13 +26,11 @@ export default function PageTransition({ children }: PageTransitionProps) {
return ( return (
<> <>
{isLoading && ( {isLoading && (
<LoadingScreen <LoadingScreen message="Transitioning..." variant="overlay" size="md" />
message="Transitioning..."
variant="overlay"
size="md"
/>
)} )}
<div className={`transition-all duration-500 ${isVisible ? 'animate-fade-in' : 'opacity-0'}`}> <div
className={`transition-all duration-500 ${isVisible ? "animate-fade-in" : "opacity-0"}`}
>
{children} {children}
</div> </div>
</> </>

53
client/components/Skeleton.tsx
View file

@ -2,29 +2,30 @@ import { cn } from "@/lib/utils";
interface SkeletonProps { interface SkeletonProps {
className?: string; className?: string;
variant?: 'text' | 'avatar' | 'card' | 'button' | 'image'; variant?: "text" | "avatar" | "card" | "button" | "image";
lines?: number; lines?: number;
animate?: boolean; animate?: boolean;
} }
export function Skeleton({ className, variant = 'text', lines = 1, animate = true }: SkeletonProps) { export function Skeleton({
const baseClasses = cn( className,
"bg-muted rounded", variant = "text",
animate && "skeleton", lines = 1,
className animate = true,
); }: SkeletonProps) {
const baseClasses = cn("bg-muted rounded", animate && "skeleton", className);
switch (variant) { switch (variant) {
case 'avatar': case "avatar":
return <div className={cn(baseClasses, "h-12 w-12 rounded-full")} />; return <div className={cn(baseClasses, "h-12 w-12 rounded-full")} />;
case 'button': case "button":
return <div className={cn(baseClasses, "h-10 w-24")} />; return <div className={cn(baseClasses, "h-10 w-24")} />;
case 'image': case "image":
return <div className={cn(baseClasses, "h-48 w-full")} />; return <div className={cn(baseClasses, "h-48 w-full")} />;
case 'card': case "card":
return ( return (
<div className={cn("space-y-3 p-4 border rounded-lg", className)}> <div className={cn("space-y-3 p-4 border rounded-lg", className)}>
<div className={cn(baseClasses, "h-6 w-3/4")} /> <div className={cn(baseClasses, "h-6 w-3/4")} />
@ -32,8 +33,8 @@ export function Skeleton({ className, variant = 'text', lines = 1, animate = tru
<div className={cn(baseClasses, "h-4 w-2/3")} /> <div className={cn(baseClasses, "h-4 w-2/3")} />
</div> </div>
); );
case 'text': case "text":
default: default:
return ( return (
<div className="space-y-2"> <div className="space-y-2">
@ -43,7 +44,7 @@ export function Skeleton({ className, variant = 'text', lines = 1, animate = tru
className={cn( className={cn(
baseClasses, baseClasses,
"h-4", "h-4",
i === lines - 1 ? "w-2/3" : "w-full" i === lines - 1 ? "w-2/3" : "w-full",
)} )}
/> />
))} ))}
@ -93,7 +94,10 @@ export function SkeletonUserPath() {
return ( return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{Array.from({ length: 4 }).map((_, i) => ( {Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="bg-card/50 border border-border/50 rounded-xl p-6 space-y-4"> <div
key={i}
className="bg-card/50 border border-border/50 rounded-xl p-6 space-y-4"
>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<Skeleton className="h-12 w-12 rounded-lg" /> <Skeleton className="h-12 w-12 rounded-lg" />
<div className="space-y-2 flex-1"> <div className="space-y-2 flex-1">
@ -120,18 +124,21 @@ export function SkeletonOnboardingStep() {
<Skeleton className="h-8 w-64 mx-auto" /> <Skeleton className="h-8 w-64 mx-auto" />
<Skeleton className="h-4 w-96 mx-auto" /> <Skeleton className="h-4 w-96 mx-auto" />
</div> </div>
<div className="max-w-2xl mx-auto space-y-6"> <div className="max-w-2xl mx-auto space-y-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{Array.from({ length: 4 }).map((_, i) => ( {Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="p-4 border-2 border-border/50 rounded-lg space-y-2"> <div
key={i}
className="p-4 border-2 border-border/50 rounded-lg space-y-2"
>
<Skeleton className="h-5 w-32" /> <Skeleton className="h-5 w-32" />
<Skeleton className="h-4 w-full" /> <Skeleton className="h-4 w-full" />
</div> </div>
))} ))}
</div> </div>
</div> </div>
<div className="flex justify-between pt-6"> <div className="flex justify-between pt-6">
<Skeleton variant="button" className="w-20" /> <Skeleton variant="button" className="w-20" />
<Skeleton variant="button" className="w-24" /> <Skeleton variant="button" className="w-24" />
@ -161,7 +168,7 @@ export function SkeletonLayout() {
</div> </div>
</div> </div>
</div> </div>
{/* Content Skeleton */} {/* Content Skeleton */}
<div className="py-20"> <div className="py-20">
<div className="container mx-auto px-4 space-y-16"> <div className="container mx-auto px-4 space-y-16">
@ -173,7 +180,7 @@ export function SkeletonLayout() {
<Skeleton variant="button" className="w-32 h-12" /> <Skeleton variant="button" className="w-32 h-12" />
</div> </div>
</div> </div>
<SkeletonStats /> <SkeletonStats />
<SkeletonUserPath /> <SkeletonUserPath />
</div> </div>

129
client/components/onboarding/Experience.tsx
View file

@ -14,40 +14,77 @@ interface ExperienceProps {
} }
const experienceLevels = [ const experienceLevels = [
{ id: 'beginner', label: 'Beginner', description: 'New to the field' }, { id: "beginner", label: "Beginner", description: "New to the field" },
{ id: 'intermediate', label: 'Intermediate', description: '1-3 years experience' }, {
{ id: 'advanced', label: 'Advanced', description: '3-7 years experience' }, id: "intermediate",
{ id: 'expert', label: 'Expert', description: '7+ years experience' }, label: "Intermediate",
description: "1-3 years experience",
},
{ id: "advanced", label: "Advanced", description: "3-7 years experience" },
{ id: "expert", label: "Expert", description: "7+ years experience" },
]; ];
const skillSuggestions = { const skillSuggestions = {
'game-developer': [ "game-developer": [
'Unity', 'Unreal Engine', 'C#', 'C++', 'JavaScript', 'Python', 'Blender', '3D Modeling', "Unity",
'Game Design', 'Level Design', 'Animation', 'Shader Programming', 'Roblox Development' "Unreal Engine",
"C#",
"C++",
"JavaScript",
"Python",
"Blender",
"3D Modeling",
"Game Design",
"Level Design",
"Animation",
"Shader Programming",
"Roblox Development",
], ],
'client': [ client: [
'Project Management', 'Business Strategy', 'Product Development', 'Marketing', "Project Management",
'Team Leadership', 'Budget Management', 'Quality Assurance', 'User Experience' "Business Strategy",
"Product Development",
"Marketing",
"Team Leadership",
"Budget Management",
"Quality Assurance",
"User Experience",
], ],
'member': [ member: [
'Research', 'Innovation', 'Technology Trends', 'Community Building', 'Networking', "Research",
'Content Creation', 'Documentation', 'Knowledge Sharing' "Innovation",
"Technology Trends",
"Community Building",
"Networking",
"Content Creation",
"Documentation",
"Knowledge Sharing",
],
customer: [
"Gaming",
"Technology Adoption",
"User Feedback",
"Beta Testing",
"Community Participation",
"Content Consumption",
"Product Evaluation",
], ],
'customer': [
'Gaming', 'Technology Adoption', 'User Feedback', 'Beta Testing', 'Community Participation',
'Content Consumption', 'Product Evaluation'
]
}; };
export default function Experience({ data, updateData, nextStep, prevStep }: ExperienceProps) { export default function Experience({
const [newSkill, setNewSkill] = useState(''); data,
updateData,
nextStep,
prevStep,
}: ExperienceProps) {
const [newSkill, setNewSkill] = useState("");
const handleLevelChange = (level: string) => { const handleLevelChange = (level: string) => {
updateData({ updateData({
experience: { experience: {
...data.experience, ...data.experience,
level level,
} },
}); });
}; };
@ -56,19 +93,21 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
updateData({ updateData({
experience: { experience: {
...data.experience, ...data.experience,
skills: [...data.experience.skills, skill] skills: [...data.experience.skills, skill],
} },
}); });
} }
setNewSkill(''); setNewSkill("");
}; };
const handleSkillRemove = (skillToRemove: string) => { const handleSkillRemove = (skillToRemove: string) => {
updateData({ updateData({
experience: { experience: {
...data.experience, ...data.experience,
skills: data.experience.skills.filter(skill => skill !== skillToRemove) skills: data.experience.skills.filter(
} (skill) => skill !== skillToRemove,
),
},
}); });
}; };
@ -76,13 +115,15 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
updateData({ updateData({
experience: { experience: {
...data.experience, ...data.experience,
previousProjects: projects previousProjects: projects,
} },
}); });
}; };
const isValid = data.experience.level && data.experience.skills.length > 0; const isValid = data.experience.level && data.experience.skills.length > 0;
const suggestions = data.userType ? skillSuggestions[data.userType] || [] : []; const suggestions = data.userType
? skillSuggestions[data.userType] || []
: [];
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@ -103,12 +144,14 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
onClick={() => handleLevelChange(level.id)} onClick={() => handleLevelChange(level.id)}
className={`p-4 rounded-lg border-2 text-left transition-all duration-200 ${ className={`p-4 rounded-lg border-2 text-left transition-all duration-200 ${
data.experience.level === level.id data.experience.level === level.id
? 'border-aethex-500 bg-aethex-500/10 glow-purple' ? "border-aethex-500 bg-aethex-500/10 glow-purple"
: 'border-border/50 hover:border-aethex-400/50 bg-background/50' : "border-border/50 hover:border-aethex-400/50 bg-background/50"
}`} }`}
> >
<div className="font-medium">{level.label}</div> <div className="font-medium">{level.label}</div>
<div className="text-sm text-muted-foreground">{level.description}</div> <div className="text-sm text-muted-foreground">
{level.description}
</div>
</button> </button>
))} ))}
</div> </div>
@ -117,7 +160,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
{/* Skills */} {/* Skills */}
<div className="space-y-3"> <div className="space-y-3">
<Label className="text-sm font-medium">Skills & Technologies *</Label> <Label className="text-sm font-medium">Skills & Technologies *</Label>
{/* Current Skills */} {/* Current Skills */}
{data.experience.skills.length > 0 && ( {data.experience.skills.length > 0 && (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@ -145,7 +188,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
onChange={(e) => setNewSkill(e.target.value)} onChange={(e) => setNewSkill(e.target.value)}
placeholder="Add a skill..." placeholder="Add a skill..."
className="flex-1 px-3 py-2 text-sm rounded-md border border-border/50 bg-background/50 focus:border-aethex-400 focus:outline-none" className="flex-1 px-3 py-2 text-sm rounded-md border border-border/50 bg-background/50 focus:border-aethex-400 focus:outline-none"
onKeyPress={(e) => e.key === 'Enter' && handleSkillAdd(newSkill)} onKeyPress={(e) => e.key === "Enter" && handleSkillAdd(newSkill)}
/> />
<Button <Button
size="sm" size="sm"
@ -160,10 +203,12 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
{/* Skill Suggestions */} {/* Skill Suggestions */}
{suggestions.length > 0 && ( {suggestions.length > 0 && (
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-xs text-muted-foreground">Suggested skills:</Label> <Label className="text-xs text-muted-foreground">
Suggested skills:
</Label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{suggestions {suggestions
.filter(skill => !data.experience.skills.includes(skill)) .filter((skill) => !data.experience.skills.includes(skill))
.slice(0, 8) .slice(0, 8)
.map((skill) => ( .map((skill) => (
<button <button
@ -180,7 +225,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
</div> </div>
{/* Previous Projects (optional for some user types) */} {/* Previous Projects (optional for some user types) */}
{(data.userType === 'game-developer' || data.userType === 'client') && ( {(data.userType === "game-developer" || data.userType === "client") && (
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="projects" className="text-sm font-medium"> <Label htmlFor="projects" className="text-sm font-medium">
Previous Projects or Experience Previous Projects or Experience
@ -188,7 +233,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
</Label> </Label>
<Textarea <Textarea
id="projects" id="projects"
value={data.experience.previousProjects || ''} value={data.experience.previousProjects || ""}
onChange={(e) => handleProjectsChange(e.target.value)} onChange={(e) => handleProjectsChange(e.target.value)}
placeholder="Tell us about your previous projects, experiences, or achievements..." placeholder="Tell us about your previous projects, experiences, or achievements..."
className="bg-background/50 border-border/50 focus:border-aethex-400 min-h-[100px]" className="bg-background/50 border-border/50 focus:border-aethex-400 min-h-[100px]"
@ -198,16 +243,16 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
</div> </div>
<div className="flex justify-between pt-6"> <div className="flex justify-between pt-6">
<Button <Button
variant="outline" variant="outline"
onClick={prevStep} onClick={prevStep}
className="flex items-center space-x-2" className="flex items-center space-x-2"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
<span>Back</span> <span>Back</span>
</Button> </Button>
<Button <Button
onClick={nextStep} onClick={nextStep}
disabled={!isValid} disabled={!isValid}
className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90" className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"

201
client/components/onboarding/Interests.tsx
View file

@ -11,130 +11,138 @@ interface InterestsProps {
} }
const goalOptions = { const goalOptions = {
'game-developer': [ "game-developer": [
'Learn new game development technologies', "Learn new game development technologies",
'Get mentorship from industry experts', "Get mentorship from industry experts",
'Collaborate on innovative projects', "Collaborate on innovative projects",
'Build a portfolio of game projects', "Build a portfolio of game projects",
'Join a development team', "Join a development team",
'Start freelancing in game development', "Start freelancing in game development",
'Improve programming skills', "Improve programming skills",
'Learn game design principles' "Learn game design principles",
], ],
'client': [ client: [
'Develop a custom game or application', "Develop a custom game or application",
'Get technical consulting for my project', "Get technical consulting for my project",
'Find reliable development partners', "Find reliable development partners",
'Scale my existing game/platform', "Scale my existing game/platform",
'Implement new features or technologies', "Implement new features or technologies",
'Optimize performance and user experience', "Optimize performance and user experience",
'Launch a new digital product', "Launch a new digital product",
'Build a development team' "Build a development team",
], ],
'member': [ member: [
'Stay updated on industry trends', "Stay updated on industry trends",
'Network with tech professionals', "Network with tech professionals",
'Access research and insights', "Access research and insights",
'Participate in innovation projects', "Participate in innovation projects",
'Share knowledge with the community', "Share knowledge with the community",
'Explore new technologies', "Explore new technologies",
'Contribute to open source projects', "Contribute to open source projects",
'Attend workshops and events' "Attend workshops and events",
],
customer: [
"Play cutting-edge games",
"Access premium development tools",
"Get early access to new releases",
"Join beta testing programs",
"Connect with other gamers",
"Learn about game development",
"Provide feedback on products",
"Explore interactive experiences",
], ],
'customer': [
'Play cutting-edge games',
'Access premium development tools',
'Get early access to new releases',
'Join beta testing programs',
'Connect with other gamers',
'Learn about game development',
'Provide feedback on products',
'Explore interactive experiences'
]
}; };
const serviceOptions = { const serviceOptions = {
'game-developer': [ "game-developer": [
'Mentorship Programs', "Mentorship Programs",
'Development Tools Access', "Development Tools Access",
'Collaborative Projects', "Collaborative Projects",
'Technical Workshops', "Technical Workshops",
'Code Review Services', "Code Review Services",
'Career Guidance', "Career Guidance",
'Networking Events', "Networking Events",
'Skill Assessments' "Skill Assessments",
], ],
'client': [ client: [
'Custom Game Development', "Custom Game Development",
'Technical Consulting', "Technical Consulting",
'Project Management', "Project Management",
'Quality Assurance', "Quality Assurance",
'Performance Optimization', "Performance Optimization",
'Team Augmentation', "Team Augmentation",
'Technology Integration', "Technology Integration",
'Ongoing Support' "Ongoing Support",
], ],
'member': [ member: [
'Research Access', "Research Access",
'Community Forums', "Community Forums",
'Expert Insights', "Expert Insights",
'Innovation Labs', "Innovation Labs",
'Knowledge Base', "Knowledge Base",
'Networking Platform', "Networking Platform",
'Event Participation', "Event Participation",
'Content Library' "Content Library",
],
customer: [
"Premium Games",
"Development Tools",
"Beta Access",
"Community Features",
"Customer Support",
"Regular Updates",
"Educational Content",
"User Forums",
], ],
'customer': [
'Premium Games',
'Development Tools',
'Beta Access',
'Community Features',
'Customer Support',
'Regular Updates',
'Educational Content',
'User Forums'
]
}; };
export default function Interests({ data, updateData, nextStep, prevStep }: InterestsProps) { export default function Interests({
data,
updateData,
nextStep,
prevStep,
}: InterestsProps) {
const goals = data.userType ? goalOptions[data.userType] || [] : []; const goals = data.userType ? goalOptions[data.userType] || [] : [];
const services = data.userType ? serviceOptions[data.userType] || [] : []; const services = data.userType ? serviceOptions[data.userType] || [] : [];
const handleGoalToggle = (goal: string) => { const handleGoalToggle = (goal: string) => {
const currentGoals = data.interests.primaryGoals; const currentGoals = data.interests.primaryGoals;
const updatedGoals = currentGoals.includes(goal) const updatedGoals = currentGoals.includes(goal)
? currentGoals.filter(g => g !== goal) ? currentGoals.filter((g) => g !== goal)
: [...currentGoals, goal]; : [...currentGoals, goal];
updateData({ updateData({
interests: { interests: {
...data.interests, ...data.interests,
primaryGoals: updatedGoals primaryGoals: updatedGoals,
} },
}); });
}; };
const handleServiceToggle = (service: string) => { const handleServiceToggle = (service: string) => {
const currentServices = data.interests.preferredServices; const currentServices = data.interests.preferredServices;
const updatedServices = currentServices.includes(service) const updatedServices = currentServices.includes(service)
? currentServices.filter(s => s !== service) ? currentServices.filter((s) => s !== service)
: [...currentServices, service]; : [...currentServices, service];
updateData({ updateData({
interests: { interests: {
...data.interests, ...data.interests,
preferredServices: updatedServices preferredServices: updatedServices,
} },
}); });
}; };
const isValid = data.interests.primaryGoals.length > 0 && data.interests.preferredServices.length > 0; const isValid =
data.interests.primaryGoals.length > 0 &&
data.interests.preferredServices.length > 0;
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="text-center space-y-2"> <div className="text-center space-y-2">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Tell us about your goals and interests so we can personalize your experience Tell us about your goals and interests so we can personalize your
experience
</p> </p>
</div> </div>
@ -152,8 +160,8 @@ export default function Interests({ data, updateData, nextStep, prevStep }: Inte
onClick={() => handleGoalToggle(goal)} onClick={() => handleGoalToggle(goal)}
className={`p-3 rounded-lg border-2 text-left text-sm transition-all duration-200 ${ className={`p-3 rounded-lg border-2 text-left text-sm transition-all duration-200 ${
isSelected isSelected
? 'border-aethex-500 bg-aethex-500/10 text-aethex-300' ? "border-aethex-500 bg-aethex-500/10 text-aethex-300"
: 'border-border/50 hover:border-aethex-400/50 bg-background/50 hover:bg-aethex-500/5' : "border-border/50 hover:border-aethex-400/50 bg-background/50 hover:bg-aethex-500/5"
}`} }`}
> >
{goal} {goal}
@ -166,18 +174,21 @@ export default function Interests({ data, updateData, nextStep, prevStep }: Inte
{/* Preferred Services */} {/* Preferred Services */}
<div className="space-y-3"> <div className="space-y-3">
<Label className="text-sm font-medium">Services of Interest *</Label> <Label className="text-sm font-medium">Services of Interest *</Label>
<p className="text-xs text-muted-foreground">Select all that interest you</p> <p className="text-xs text-muted-foreground">
Select all that interest you
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{services.map((service) => { {services.map((service) => {
const isSelected = data.interests.preferredServices.includes(service); const isSelected =
data.interests.preferredServices.includes(service);
return ( return (
<button <button
key={service} key={service}
onClick={() => handleServiceToggle(service)} onClick={() => handleServiceToggle(service)}
className={`p-3 rounded-lg border-2 text-left text-sm transition-all duration-200 ${ className={`p-3 rounded-lg border-2 text-left text-sm transition-all duration-200 ${
isSelected isSelected
? 'border-neon-blue bg-neon-blue/10 text-neon-blue' ? "border-neon-blue bg-neon-blue/10 text-neon-blue"
: 'border-border/50 hover:border-neon-blue/50 bg-background/50 hover:bg-neon-blue/5' : "border-border/50 hover:border-neon-blue/50 bg-background/50 hover:bg-neon-blue/5"
}`} }`}
> >
{service} {service}
@ -189,16 +200,16 @@ export default function Interests({ data, updateData, nextStep, prevStep }: Inte
</div> </div>
<div className="flex justify-between pt-6"> <div className="flex justify-between pt-6">
<Button <Button
variant="outline" variant="outline"
onClick={prevStep} onClick={prevStep}
className="flex items-center space-x-2" className="flex items-center space-x-2"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
<span>Back</span> <span>Back</span>
</Button> </Button>
<Button <Button
onClick={nextStep} onClick={nextStep}
disabled={!isValid} disabled={!isValid}
className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90" className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"

58
client/components/onboarding/PersonalInfo.tsx
View file

@ -11,25 +11,38 @@ interface PersonalInfoProps {
prevStep: () => void; prevStep: () => void;
} }
export default function PersonalInfo({ data, updateData, nextStep, prevStep }: PersonalInfoProps) { export default function PersonalInfo({
data,
updateData,
nextStep,
prevStep,
}: PersonalInfoProps) {
const handleInputChange = (field: string, value: string) => { const handleInputChange = (field: string, value: string) => {
updateData({ updateData({
personalInfo: { personalInfo: {
...data.personalInfo, ...data.personalInfo,
[field]: value [field]: value,
} },
}); });
}; };
const isValid = data.personalInfo.firstName && data.personalInfo.lastName && data.personalInfo.email; const isValid =
data.personalInfo.firstName &&
data.personalInfo.lastName &&
data.personalInfo.email;
const getUserTypeLabel = () => { const getUserTypeLabel = () => {
switch (data.userType) { switch (data.userType) {
case 'game-developer': return 'Game Developer'; case "game-developer":
case 'client': return 'Client'; return "Game Developer";
case 'member': return 'Community Member'; case "client":
case 'customer': return 'Customer'; return "Client";
default: return 'User'; case "member":
return "Community Member";
case "customer":
return "Customer";
default:
return "User";
} }
}; };
@ -50,7 +63,7 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
<Input <Input
id="firstName" id="firstName"
value={data.personalInfo.firstName} value={data.personalInfo.firstName}
onChange={(e) => handleInputChange('firstName', e.target.value)} onChange={(e) => handleInputChange("firstName", e.target.value)}
placeholder="Enter your first name" placeholder="Enter your first name"
className="bg-background/50 border-border/50 focus:border-aethex-400" className="bg-background/50 border-border/50 focus:border-aethex-400"
/> />
@ -62,7 +75,7 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
<Input <Input
id="lastName" id="lastName"
value={data.personalInfo.lastName} value={data.personalInfo.lastName}
onChange={(e) => handleInputChange('lastName', e.target.value)} onChange={(e) => handleInputChange("lastName", e.target.value)}
placeholder="Enter your last name" placeholder="Enter your last name"
className="bg-background/50 border-border/50 focus:border-aethex-400" className="bg-background/50 border-border/50 focus:border-aethex-400"
/> />
@ -77,25 +90,25 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
id="email" id="email"
type="email" type="email"
value={data.personalInfo.email} value={data.personalInfo.email}
onChange={(e) => handleInputChange('email', e.target.value)} onChange={(e) => handleInputChange("email", e.target.value)}
placeholder="Enter your email address" placeholder="Enter your email address"
className="bg-background/50 border-border/50 focus:border-aethex-400" className="bg-background/50 border-border/50 focus:border-aethex-400"
/> />
</div> </div>
{(data.userType === 'client' || data.userType === 'game-developer') && ( {(data.userType === "client" || data.userType === "game-developer") && (
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="company" className="text-sm font-medium"> <Label htmlFor="company" className="text-sm font-medium">
Company / Organization Company / Organization
{data.userType === 'client' && ' *'} {data.userType === "client" && " *"}
</Label> </Label>
<Input <Input
id="company" id="company"
value={data.personalInfo.company || ''} value={data.personalInfo.company || ""}
onChange={(e) => handleInputChange('company', e.target.value)} onChange={(e) => handleInputChange("company", e.target.value)}
placeholder={ placeholder={
data.userType === 'client' data.userType === "client"
? "Enter your company name" ? "Enter your company name"
: "Enter your company/organization (optional)" : "Enter your company/organization (optional)"
} }
className="bg-background/50 border-border/50 focus:border-aethex-400" className="bg-background/50 border-border/50 focus:border-aethex-400"
@ -116,7 +129,10 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
<Button <Button
onClick={nextStep} onClick={nextStep}
disabled={!isValid || (data.userType === 'client' && !data.personalInfo.company)} disabled={
!isValid ||
(data.userType === "client" && !data.personalInfo.company)
}
className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue group disabled:opacity-50 disabled:cursor-not-allowed" className="flex items-center space-x-2 bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue group disabled:opacity-50 disabled:cursor-not-allowed"
> >
<span>Continue</span> <span>Continue</span>
@ -125,9 +141,7 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
</div> </div>
<div className="text-center"> <div className="text-center">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">* Required fields</p>
* Required fields
</p>
</div> </div>
</div> </div>
); );

123
client/components/onboarding/UserTypeSelection.tsx
View file

@ -1,7 +1,18 @@
import { UserType, OnboardingData } from "@/pages/Onboarding"; import { UserType, OnboardingData } from "@/pages/Onboarding";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
import { GamepadIcon, BriefcaseIcon, UsersIcon, ShoppingCartIcon } from "lucide-react"; Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
GamepadIcon,
BriefcaseIcon,
UsersIcon,
ShoppingCartIcon,
} from "lucide-react";
interface UserTypeSelectionProps { interface UserTypeSelectionProps {
data: OnboardingData; data: OnboardingData;
@ -11,60 +22,68 @@ interface UserTypeSelectionProps {
const userTypes = [ const userTypes = [
{ {
id: 'game-developer' as UserType, id: "game-developer" as UserType,
title: 'Game Developer', title: "Game Developer",
description: 'Join our development community, access tools, mentorship, and collaborate on cutting-edge game projects.', description:
"Join our development community, access tools, mentorship, and collaborate on cutting-edge game projects.",
icon: GamepadIcon, icon: GamepadIcon,
benefits: [ benefits: [
'Access to development tools and frameworks', "Access to development tools and frameworks",
'Mentorship from industry veterans', "Mentorship from industry veterans",
'Collaborative project opportunities', "Collaborative project opportunities",
'Technical workshops and boot camps' "Technical workshops and boot camps",
], ],
color: 'from-neon-purple to-aethex-500' color: "from-neon-purple to-aethex-500",
}, },
{ {
id: 'client' as UserType, id: "client" as UserType,
title: 'Client', title: "Client",
description: 'Partner with us for custom game development, consulting services, and technical solutions.', description:
"Partner with us for custom game development, consulting services, and technical solutions.",
icon: BriefcaseIcon, icon: BriefcaseIcon,
benefits: [ benefits: [
'Custom game development services', "Custom game development services",
'Technical consulting and strategy', "Technical consulting and strategy",
'Project management expertise', "Project management expertise",
'End-to-end solution delivery' "End-to-end solution delivery",
], ],
color: 'from-neon-blue to-aethex-400' color: "from-neon-blue to-aethex-400",
}, },
{ {
id: 'member' as UserType, id: "member" as UserType,
title: 'Community Member', title: "Community Member",
description: 'Be part of our innovation community with access to research, networking, and exclusive content.', description:
"Be part of our innovation community with access to research, networking, and exclusive content.",
icon: UsersIcon, icon: UsersIcon,
benefits: [ benefits: [
'Access to research and publications', "Access to research and publications",
'Networking with industry professionals', "Networking with industry professionals",
'Exclusive community events', "Exclusive community events",
'Early access to new technologies' "Early access to new technologies",
], ],
color: 'from-neon-green to-aethex-600' color: "from-neon-green to-aethex-600",
}, },
{ {
id: 'customer' as UserType, id: "customer" as UserType,
title: 'Customer', title: "Customer",
description: 'Explore our games, tools, and products designed to enhance your gaming and development experience.', description:
"Explore our games, tools, and products designed to enhance your gaming and development experience.",
icon: ShoppingCartIcon, icon: ShoppingCartIcon,
benefits: [ benefits: [
'Access to premium games and tools', "Access to premium games and tools",
'Customer support and documentation', "Customer support and documentation",
'Regular updates and new releases', "Regular updates and new releases",
'Community forums and discussions' "Community forums and discussions",
], ],
color: 'from-neon-yellow to-aethex-700' color: "from-neon-yellow to-aethex-700",
} },
]; ];
export default function UserTypeSelection({ data, updateData, nextStep }: UserTypeSelectionProps) { export default function UserTypeSelection({
data,
updateData,
nextStep,
}: UserTypeSelectionProps) {
const handleSelectType = (userType: UserType) => { const handleSelectType = (userType: UserType) => {
updateData({ userType }); updateData({ userType });
setTimeout(() => { setTimeout(() => {
@ -90,19 +109,23 @@ export default function UserTypeSelection({ data, updateData, nextStep }: UserTy
key={type.id} key={type.id}
className={`cursor-pointer transition-all duration-500 hover-lift interactive-scale border-2 animate-scale-in ${ className={`cursor-pointer transition-all duration-500 hover-lift interactive-scale border-2 animate-scale-in ${
isSelected isSelected
? 'border-aethex-500 glow-purple animate-pulse-glow' ? "border-aethex-500 glow-purple animate-pulse-glow"
: 'border-border/50 hover:border-aethex-400/50' : "border-border/50 hover:border-aethex-400/50"
}`} }`}
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
onClick={() => handleSelectType(type.id)} onClick={() => handleSelectType(type.id)}
> >
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className={`p-2 rounded-lg bg-gradient-to-r ${type.color} transition-all duration-300 hover:scale-110 ${isSelected ? 'animate-bounce-gentle' : ''}`}> <div
className={`p-2 rounded-lg bg-gradient-to-r ${type.color} transition-all duration-300 hover:scale-110 ${isSelected ? "animate-bounce-gentle" : ""}`}
>
<Icon className="h-6 w-6 text-white" /> <Icon className="h-6 w-6 text-white" />
</div> </div>
<div> <div>
<CardTitle className={`text-lg transition-all duration-300 ${isSelected ? 'text-gradient animate-pulse' : ''}`}> <CardTitle
className={`text-lg transition-all duration-300 ${isSelected ? "text-gradient animate-pulse" : ""}`}
>
{type.title} {type.title}
</CardTitle> </CardTitle>
</div> </div>
@ -117,11 +140,17 @@ export default function UserTypeSelection({ data, updateData, nextStep }: UserTy
<li <li
key={benefitIndex} key={benefitIndex}
className={`text-xs text-muted-foreground flex items-start transition-all duration-300 animate-slide-left ${ className={`text-xs text-muted-foreground flex items-start transition-all duration-300 animate-slide-left ${
isSelected ? 'text-aethex-300' : '' isSelected ? "text-aethex-300" : ""
}`} }`}
style={{ animationDelay: `${(index * 0.1) + (benefitIndex * 0.05)}s` }} style={{
animationDelay: `${index * 0.1 + benefitIndex * 0.05}s`,
}}
> >
<span className={`mr-2 transition-all duration-300 ${isSelected ? 'text-aethex-400 animate-pulse' : 'text-aethex-400'}`}>•</span> <span
className={`mr-2 transition-all duration-300 ${isSelected ? "text-aethex-400 animate-pulse" : "text-aethex-400"}`}
>
•
</span>
{benefit} {benefit}
</li> </li>
))} ))}
@ -132,9 +161,13 @@ export default function UserTypeSelection({ data, updateData, nextStep }: UserTy
})} })}
</div> </div>
<div className="flex justify-center pt-6 animate-fade-in" style={{ animationDelay: '0.5s' }}> <div
className="flex justify-center pt-6 animate-fade-in"
style={{ animationDelay: "0.5s" }}
>
<p className="text-sm text-muted-foreground text-center max-w-lg"> <p className="text-sm text-muted-foreground text-center max-w-lg">
Don't worry - you can always change your preferences later or access multiple areas of our platform. Don't worry - you can always change your preferences later or access
multiple areas of our platform.
</p> </p>
</div> </div>
</div> </div>

145
client/components/onboarding/Welcome.tsx
View file

@ -1,6 +1,12 @@
import { OnboardingData } from "@/pages/Onboarding"; import { OnboardingData } from "@/pages/Onboarding";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { CheckCircle, ArrowRight, Sparkles } from "lucide-react"; import { CheckCircle, ArrowRight, Sparkles } from "lucide-react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@ -11,43 +17,97 @@ interface WelcomeProps {
export default function Welcome({ data }: WelcomeProps) { export default function Welcome({ data }: WelcomeProps) {
const getUserTypeLabel = () => { const getUserTypeLabel = () => {
switch (data.userType) { switch (data.userType) {
case 'game-developer': return 'Game Developer'; case "game-developer":
case 'client': return 'Client'; return "Game Developer";
case 'member': return 'Community Member'; case "client":
case 'customer': return 'Customer'; return "Client";
default: return 'User'; case "member":
return "Community Member";
case "customer":
return "Customer";
default:
return "User";
} }
}; };
const getNextSteps = () => { const getNextSteps = () => {
switch (data.userType) { switch (data.userType) {
case 'game-developer': case "game-developer":
return [ return [
{ title: 'Access Development Tools', description: 'Get started with our development toolkit and resources' }, {
{ title: 'Join Mentorship Program', description: 'Connect with experienced developers for guidance' }, title: "Access Development Tools",
{ title: 'Explore Projects', description: 'Browse collaborative projects and opportunities' }, description:
{ title: 'Attend Workshops', description: 'Join our next technical workshop or boot camp' } "Get started with our development toolkit and resources",
},
{
title: "Join Mentorship Program",
description: "Connect with experienced developers for guidance",
},
{
title: "Explore Projects",
description: "Browse collaborative projects and opportunities",
},
{
title: "Attend Workshops",
description: "Join our next technical workshop or boot camp",
},
]; ];
case 'client': case "client":
return [ return [
{ title: 'Schedule Consultation', description: 'Book a free consultation to discuss your project' }, {
{ title: 'View Our Portfolio', description: 'Explore our previous work and case studies' }, title: "Schedule Consultation",
{ title: 'Get Project Quote', description: 'Receive a detailed quote for your development needs' }, description: "Book a free consultation to discuss your project",
{ title: 'Meet Your Team', description: 'Connect with our development specialists' } },
{
title: "View Our Portfolio",
description: "Explore our previous work and case studies",
},
{
title: "Get Project Quote",
description: "Receive a detailed quote for your development needs",
},
{
title: "Meet Your Team",
description: "Connect with our development specialists",
},
]; ];
case 'member': case "member":
return [ return [
{ title: 'Explore Research', description: 'Access our latest research and publications' }, {
{ title: 'Join Community', description: 'Connect with other members in our forums' }, title: "Explore Research",
{ title: 'Upcoming Events', description: 'Register for community events and workshops' }, description: "Access our latest research and publications",
{ title: 'Innovation Labs', description: 'Participate in cutting-edge research projects' } },
{
title: "Join Community",
description: "Connect with other members in our forums",
},
{
title: "Upcoming Events",
description: "Register for community events and workshops",
},
{
title: "Innovation Labs",
description: "Participate in cutting-edge research projects",
},
]; ];
case 'customer': case "customer":
return [ return [
{ title: 'Browse Products', description: 'Explore our games, tools, and digital products' }, {
{ title: 'Join Beta Programs', description: 'Get early access to new releases and features' }, title: "Browse Products",
{ title: 'Community Hub', description: 'Connect with other users and share feedback' }, description: "Explore our games, tools, and digital products",
{ title: 'Support Center', description: 'Access documentation and customer support' } },
{
title: "Join Beta Programs",
description: "Get early access to new releases and features",
},
{
title: "Community Hub",
description: "Connect with other users and share feedback",
},
{
title: "Support Center",
description: "Access documentation and customer support",
},
]; ];
default: default:
return []; return [];
@ -64,13 +124,14 @@ export default function Welcome({ data }: WelcomeProps) {
<CheckCircle className="h-12 w-12 text-white" /> <CheckCircle className="h-12 w-12 text-white" />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<h2 className="text-2xl font-bold text-gradient-purple"> <h2 className="text-2xl font-bold text-gradient-purple">
Welcome to AeThex, {data.personalInfo.firstName}! Welcome to AeThex, {data.personalInfo.firstName}!
</h2> </h2>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Your {getUserTypeLabel().toLowerCase()} account has been successfully set up Your {getUserTypeLabel().toLowerCase()} account has been
successfully set up
</p> </p>
</div> </div>
</div> </div>
@ -91,15 +152,22 @@ export default function Welcome({ data }: WelcomeProps) {
</div> </div>
<div> <div>
<strong className="text-foreground">Experience:</strong> <strong className="text-foreground">Experience:</strong>
<p className="text-muted-foreground capitalize">{data.experience.level}</p> <p className="text-muted-foreground capitalize">
{data.experience.level}
</p>
</div> </div>
<div> <div>
<strong className="text-foreground">Skills:</strong> <strong className="text-foreground">Skills:</strong>
<p className="text-muted-foreground">{data.experience.skills.slice(0, 3).join(', ')}{data.experience.skills.length > 3 ? '...' : ''}</p> <p className="text-muted-foreground">
{data.experience.skills.slice(0, 3).join(", ")}
{data.experience.skills.length > 3 ? "..." : ""}
</p>
</div> </div>
<div> <div>
<strong className="text-foreground">Primary Goals:</strong> <strong className="text-foreground">Primary Goals:</strong>
<p className="text-muted-foreground">{data.interests.primaryGoals.length} selected</p> <p className="text-muted-foreground">
{data.interests.primaryGoals.length} selected
</p>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@ -110,7 +178,10 @@ export default function Welcome({ data }: WelcomeProps) {
<h3 className="text-lg font-semibold text-center">What's Next?</h3> <h3 className="text-lg font-semibold text-center">What's Next?</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{nextSteps.map((step, index) => ( {nextSteps.map((step, index) => (
<Card key={index} className="bg-background/30 border-border/50 hover:border-aethex-400/50 transition-all duration-200"> <Card
key={index}
className="bg-background/30 border-border/50 hover:border-aethex-400/50 transition-all duration-200"
>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-sm">{step.title}</CardTitle> <CardTitle className="text-sm">{step.title}</CardTitle>
</CardHeader> </CardHeader>
@ -129,7 +200,10 @@ export default function Welcome({ data }: WelcomeProps) {
<Button asChild variant="outline" className="border-border/50"> <Button asChild variant="outline" className="border-border/50">
<Link to="/dashboard">Go to Dashboard</Link> <Link to="/dashboard">Go to Dashboard</Link>
</Button> </Button>
<Button asChild className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"> <Button
asChild
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"
>
<Link to="/get-started" className="flex items-center space-x-2"> <Link to="/get-started" className="flex items-center space-x-2">
<span>Get Started</span> <span>Get Started</span>
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
@ -139,7 +213,10 @@ export default function Welcome({ data }: WelcomeProps) {
<div className="text-center pt-4"> <div className="text-center pt-4">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Need help getting started? <Link to="/support" className="text-aethex-400 hover:underline">Contact our support team</Link> Need help getting started?{" "}
<Link to="/support" className="text-aethex-400 hover:underline">
Contact our support team
</Link>
</p> </p>
</div> </div>
</div> </div>

21
client/components/ui/button.tsx
View file

@ -9,7 +9,8 @@ const buttonVariants = cva(
{ {
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25", default:
"bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25",
destructive: destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:shadow-lg hover:shadow-destructive/25", "bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:shadow-lg hover:shadow-destructive/25",
outline: outline:
@ -50,17 +51,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
const x = e.clientX - rect.left; const x = e.clientX - rect.left;
const y = e.clientY - rect.top; const y = e.clientY - rect.top;
const ripple = document.createElement('span'); const ripple = document.createElement("span");
ripple.style.position = 'absolute'; ripple.style.position = "absolute";
ripple.style.borderRadius = '50%'; ripple.style.borderRadius = "50%";
ripple.style.transform = 'scale(0)'; ripple.style.transform = "scale(0)";
ripple.style.animation = 'ripple 0.6s linear'; ripple.style.animation = "ripple 0.6s linear";
ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; ripple.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
const size = Math.max(rect.width, rect.height); const size = Math.max(rect.width, rect.height);
ripple.style.width = ripple.style.height = size + 'px'; ripple.style.width = ripple.style.height = size + "px";
ripple.style.left = x - size / 2 + 'px'; ripple.style.left = x - size / 2 + "px";
ripple.style.top = y - size / 2 + 'px'; ripple.style.top = y - size / 2 + "px";
button.appendChild(ripple); button.appendChild(ripple);

3
client/components/ui/toast.tsx
View file

@ -34,8 +34,7 @@ const toastVariants = cva(
"border-green-500/50 bg-green-500/10 text-green-400 shadow-2xl shadow-green-500/20", "border-green-500/50 bg-green-500/10 text-green-400 shadow-2xl shadow-green-500/20",
warning: warning:
"border-yellow-500/50 bg-yellow-500/10 text-yellow-400 shadow-2xl shadow-yellow-500/20", "border-yellow-500/50 bg-yellow-500/10 text-yellow-400 shadow-2xl shadow-yellow-500/20",
info: info: "border-aethex-400/50 bg-aethex-500/10 text-aethex-300 shadow-2xl shadow-aethex-500/20 glow-blue",
"border-aethex-400/50 bg-aethex-500/10 text-aethex-300 shadow-2xl shadow-aethex-500/20 glow-blue",
aethex: aethex:
"border-aethex-400/50 bg-gradient-to-r from-aethex-500/20 via-neon-blue/20 to-aethex-600/20 text-aethex-300 shadow-2xl shadow-aethex-500/30 glow-purple animate-pulse-glow", "border-aethex-400/50 bg-gradient-to-r from-aethex-500/20 via-neon-blue/20 to-aethex-600/20 text-aethex-300 shadow-2xl shadow-aethex-500/30 glow-purple animate-pulse-glow",
}, },

191
client/global.css
View file

@ -67,7 +67,6 @@
--neon-green: 120 100% 70%; --neon-green: 120 100% 70%;
--neon-yellow: 50 100% 70%; --neon-yellow: 50 100% 70%;
} }
} }
@layer base { @layer base {
@ -77,7 +76,7 @@
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
font-family: 'Courier New', 'Courier', monospace; font-family: "Courier New", "Courier", monospace;
letter-spacing: 0.025em; letter-spacing: 0.025em;
} }
@ -108,39 +107,53 @@
} }
.border-gradient::before { .border-gradient::before {
content: ''; content: "";
@apply absolute inset-0 rounded-[inherit] p-[1px] bg-gradient-to-r from-aethex-400 via-neon-blue to-aethex-600; @apply absolute inset-0 rounded-[inherit] p-[1px] bg-gradient-to-r from-aethex-400 via-neon-blue to-aethex-600;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: xor; mask-composite: xor;
background-size: 200% 200%; background-size: 200% 200%;
animation: gradient-shift 2s ease-in-out infinite; animation: gradient-shift 2s ease-in-out infinite;
} }
.glow-purple { .glow-purple {
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.2); box-shadow:
0 0 20px rgba(139, 92, 246, 0.3),
0 0 40px rgba(139, 92, 246, 0.2);
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
} }
.glow-purple:hover { .glow-purple:hover {
box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 0 0 60px rgba(139, 92, 246, 0.3); box-shadow:
0 0 30px rgba(139, 92, 246, 0.5),
0 0 60px rgba(139, 92, 246, 0.3);
} }
.glow-blue { .glow-blue {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(59, 130, 246, 0.2); box-shadow:
0 0 20px rgba(59, 130, 246, 0.3),
0 0 40px rgba(59, 130, 246, 0.2);
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
} }
.glow-blue:hover { .glow-blue:hover {
box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), 0 0 60px rgba(59, 130, 246, 0.3); box-shadow:
0 0 30px rgba(59, 130, 246, 0.5),
0 0 60px rgba(59, 130, 246, 0.3);
} }
.glow-green { .glow-green {
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 0 40px rgba(34, 197, 94, 0.2); box-shadow:
0 0 20px rgba(34, 197, 94, 0.3),
0 0 40px rgba(34, 197, 94, 0.2);
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
} }
.glow-yellow { .glow-yellow {
box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 40px rgba(251, 191, 36, 0.2); box-shadow:
0 0 20px rgba(251, 191, 36, 0.3),
0 0 40px rgba(251, 191, 36, 0.2);
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
} }
@ -181,7 +194,9 @@
} }
.animate-typing { .animate-typing {
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite; animation:
typing 3s steps(40, end),
blink-caret 0.75s step-end infinite;
overflow: hidden; overflow: hidden;
border-right: 3px solid; border-right: 3px solid;
white-space: nowrap; white-space: nowrap;
@ -189,7 +204,9 @@
} }
.hover-lift { .hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease; transition:
transform 0.3s ease,
box-shadow 0.3s ease;
} }
.hover-lift:hover { .hover-lift:hover {
@ -217,86 +234,170 @@
} }
.loading-dots::after { .loading-dots::after {
content: ''; content: "";
animation: loading-dots 1.5s infinite; animation: loading-dots 1.5s infinite;
} }
.skeleton { .skeleton {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
background-size: 200% 100%; background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite; animation: skeleton-loading 1.5s infinite;
} }
} }
@keyframes gradient-shift { @keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; } 0%,
50% { background-position: 100% 50%; } 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
} }
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes slide-up { @keyframes slide-up {
from { opacity: 0; transform: translateY(30px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
@keyframes slide-down { @keyframes slide-down {
from { opacity: 0; transform: translateY(-30px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
@keyframes slide-left { @keyframes slide-left {
from { opacity: 0; transform: translateX(30px); } from {
to { opacity: 1; transform: translateX(0); } opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
} }
@keyframes slide-right { @keyframes slide-right {
from { opacity: 0; transform: translateX(-30px); } from {
to { opacity: 1; transform: translateX(0); } opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
} }
@keyframes scale-in { @keyframes scale-in {
from { opacity: 0; transform: scale(0.9); } from {
to { opacity: 1; transform: scale(1); } opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
} }
@keyframes bounce-gentle { @keyframes bounce-gentle {
0%, 100% { transform: translateY(0); } 0%,
50% { transform: translateY(-10px); } 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
} }
@keyframes float { @keyframes float {
0%, 100% { transform: translateY(0px); } 0%,
50% { transform: translateY(-20px); } 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
} }
@keyframes pulse-glow { @keyframes pulse-glow {
0%, 100% { opacity: 1; transform: scale(1); } 0%,
50% { opacity: 0.8; transform: scale(1.05); } 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
} }
@keyframes typing { @keyframes typing {
from { width: 0; } from {
to { width: 100%; } width: 0;
}
to {
width: 100%;
}
} }
@keyframes blink-caret { @keyframes blink-caret {
from, to { border-color: transparent; } from,
50% { border-color: currentColor; } to {
border-color: transparent;
}
50% {
border-color: currentColor;
}
} }
@keyframes loading-dots { @keyframes loading-dots {
0% { content: ''; } 0% {
25% { content: '.'; } content: "";
50% { content: '..'; } }
75% { content: '...'; } 25% {
100% { content: ''; } content: ".";
}
50% {
content: "..";
}
75% {
content: "...";
}
100% {
content: "";
}
} }
@keyframes skeleton-loading { @keyframes skeleton-loading {
0% { background-position: -200% 0; } 0% {
100% { background-position: 200% 0; } background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
} }

136
client/pages/Blog.tsx
View file

@ -1,15 +1,21 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast"; import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
PenTool, PenTool,
Calendar, Calendar,
User, User,
ArrowRight, ArrowRight,
Search, Search,
Filter, Filter,
@ -17,7 +23,7 @@ import {
Share, Share,
ThumbsUp, ThumbsUp,
MessageCircle, MessageCircle,
TrendingUp TrendingUp,
} from "lucide-react"; } from "lucide-react";
export default function Blog() { export default function Blog() {
@ -42,96 +48,113 @@ export default function Blog() {
{ id: "technology", name: "Technology", count: 18 }, { id: "technology", name: "Technology", count: 18 },
{ id: "tutorials", name: "Tutorials", count: 12 }, { id: "tutorials", name: "Tutorials", count: 12 },
{ id: "research", name: "Research", count: 8 }, { id: "research", name: "Research", count: 8 },
{ id: "company", name: "Company News", count: 7 } { id: "company", name: "Company News", count: 7 },
]; ];
const featuredPost = { const featuredPost = {
title: "The Future of Quantum Game Development", title: "The Future of Quantum Game Development",
excerpt: "Exploring how quantum computing will revolutionize game AI, physics simulations, and procedural generation in the next decade.", excerpt:
"Exploring how quantum computing will revolutionize game AI, physics simulations, and procedural generation in the next decade.",
author: "Dr. Sarah Chen", author: "Dr. Sarah Chen",
date: "December 15, 2024", date: "December 15, 2024",
readTime: "8 min read", readTime: "8 min read",
category: "Research", category: "Research",
likes: 124, likes: 124,
comments: 23, comments: 23,
image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=600&h=300&fit=crop" image:
"https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=600&h=300&fit=crop",
}; };
const posts = [ const posts = [
{ {
title: "Building Scalable Game Architecture with Microservices", title: "Building Scalable Game Architecture with Microservices",
excerpt: "Learn how to design game backends that can handle millions of concurrent players using modern microservices patterns.", excerpt:
"Learn how to design game backends that can handle millions of concurrent players using modern microservices patterns.",
author: "Marcus Rodriguez", author: "Marcus Rodriguez",
date: "December 12, 2024", date: "December 12, 2024",
readTime: "6 min read", readTime: "6 min read",
category: "Technology", category: "Technology",
likes: 89, likes: 89,
comments: 15, comments: 15,
trending: true trending: true,
}, },
{ {
title: "Advanced Unity Optimization Techniques", title: "Advanced Unity Optimization Techniques",
excerpt: "Performance optimization strategies that can boost your Unity game's frame rate by up to 300%.", excerpt:
"Performance optimization strategies that can boost your Unity game's frame rate by up to 300%.",
author: "Alex Thompson", author: "Alex Thompson",
date: "December 10, 2024", date: "December 10, 2024",
readTime: "12 min read", readTime: "12 min read",
category: "Tutorials", category: "Tutorials",
likes: 156, likes: 156,
comments: 34, comments: 34,
trending: false trending: false,
}, },
{ {
title: "AeThex Labs: Breakthrough in Neural Network Compression", title: "AeThex Labs: Breakthrough in Neural Network Compression",
excerpt: "Our research team achieves 90% model size reduction while maintaining accuracy for mobile game AI.", excerpt:
"Our research team achieves 90% model size reduction while maintaining accuracy for mobile game AI.",
author: "Dr. Aisha Patel", author: "Dr. Aisha Patel",
date: "December 8, 2024", date: "December 8, 2024",
readTime: "5 min read", readTime: "5 min read",
category: "Research", category: "Research",
likes: 203, likes: 203,
comments: 41, comments: 41,
trending: true trending: true,
}, },
{ {
title: "Introducing AeThex Cloud Gaming Platform", title: "Introducing AeThex Cloud Gaming Platform",
excerpt: "Launch games instantly across any device with our new cloud gaming infrastructure and global CDN.", excerpt:
"Launch games instantly across any device with our new cloud gaming infrastructure and global CDN.",
author: "AeThex Team", author: "AeThex Team",
date: "December 5, 2024", date: "December 5, 2024",
readTime: "4 min read", readTime: "4 min read",
category: "Company News", category: "Company News",
likes: 278, likes: 278,
comments: 52, comments: 52,
trending: false trending: false,
}, },
{ {
title: "Real-time Ray Tracing in Web Games", title: "Real-time Ray Tracing in Web Games",
excerpt: "Tutorial: Implementing hardware-accelerated ray tracing in browser-based games using WebGPU.", excerpt:
"Tutorial: Implementing hardware-accelerated ray tracing in browser-based games using WebGPU.",
author: "Jordan Kim", author: "Jordan Kim",
date: "December 3, 2024", date: "December 3, 2024",
readTime: "15 min read", readTime: "15 min read",
category: "Tutorials", category: "Tutorials",
likes: 94, likes: 94,
comments: 18, comments: 18,
trending: false trending: false,
}, },
{ {
title: "The Evolution of Game AI: From Scripts to Neural Networks", title: "The Evolution of Game AI: From Scripts to Neural Networks",
excerpt: "A comprehensive look at how artificial intelligence in games has evolved and where it's heading next.", excerpt:
"A comprehensive look at how artificial intelligence in games has evolved and where it's heading next.",
author: "Dr. Michael Chen", author: "Dr. Michael Chen",
date: "December 1, 2024", date: "December 1, 2024",
readTime: "10 min read", readTime: "10 min read",
category: "Technology", category: "Technology",
likes: 167, likes: 167,
comments: 29, comments: 29,
trending: false trending: false,
} },
]; ];
const filteredPosts = selectedCategory === "all" const filteredPosts =
? posts selectedCategory === "all"
: posts.filter(post => post.category.toLowerCase() === selectedCategory); ? posts
: posts.filter(
(post) => post.category.toLowerCase() === selectedCategory,
);
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Loading AeThex Blog..." showProgress={true} duration={1000} />; return (
<LoadingScreen
message="Loading AeThex Blog..."
showProgress={true}
duration={1000}
/>
);
} }
return ( return (
@ -141,18 +164,23 @@ export default function Blog() {
<section className="relative py-20 lg:py-32"> <section className="relative py-20 lg:py-32">
<div className="container mx-auto px-4 text-center relative z-10"> <div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-4xl mx-auto space-y-8">
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"> <Badge
variant="outline"
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
>
<PenTool className="h-3 w-3 mr-1" /> <PenTool className="h-3 w-3 mr-1" />
AeThex Blog AeThex Blog
</Badge> </Badge>
<h1 className="text-4xl lg:text-6xl font-bold leading-tight"> <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
<span className="text-gradient-purple">Insights & Innovation</span> <span className="text-gradient-purple">
Insights & Innovation
</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Stay updated with the latest developments in game technology, AI research, Stay updated with the latest developments in game technology, AI
and industry insights from the AeThex team. research, and industry insights from the AeThex team.
</p> </p>
{/* Search and Filter */} {/* Search and Filter */}
@ -165,7 +193,10 @@ export default function Blog() {
className="w-full pl-10 pr-4 py-3 rounded-lg border border-border/50 bg-background/50 backdrop-blur-sm focus:border-aethex-400 focus:outline-none" className="w-full pl-10 pr-4 py-3 rounded-lg border border-border/50 bg-background/50 backdrop-blur-sm focus:border-aethex-400 focus:outline-none"
/> />
</div> </div>
<Button variant="outline" className="flex items-center space-x-2"> <Button
variant="outline"
className="flex items-center space-x-2"
>
<Filter className="h-4 w-4" /> <Filter className="h-4 w-4" />
<span>Filter</span> <span>Filter</span>
</Button> </Button>
@ -181,13 +212,15 @@ export default function Blog() {
{categories.map((category, index) => ( {categories.map((category, index) => (
<Button <Button
key={category.id} key={category.id}
variant={selectedCategory === category.id ? "default" : "outline"} variant={
selectedCategory === category.id ? "default" : "outline"
}
size="sm" size="sm"
onClick={() => setSelectedCategory(category.id)} onClick={() => setSelectedCategory(category.id)}
className={`animate-scale-in ${ className={`animate-scale-in ${
selectedCategory === category.id selectedCategory === category.id
? 'bg-gradient-to-r from-aethex-500 to-neon-blue' ? "bg-gradient-to-r from-aethex-500 to-neon-blue"
: '' : ""
}`} }`}
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
@ -204,7 +237,7 @@ export default function Blog() {
<Card className="max-w-4xl mx-auto overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-scale-in"> <Card className="max-w-4xl mx-auto overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-scale-in">
<div className="md:flex"> <div className="md:flex">
<div className="md:w-1/2"> <div className="md:w-1/2">
<img <img
src={featuredPost.image} src={featuredPost.image}
alt={featuredPost.title} alt={featuredPost.title}
className="w-full h-64 md:h-full object-cover" className="w-full h-64 md:h-full object-cover"
@ -220,7 +253,7 @@ export default function Blog() {
<CardDescription className="text-base mb-6"> <CardDescription className="text-base mb-6">
{featuredPost.excerpt} {featuredPost.excerpt}
</CardDescription> </CardDescription>
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<div className="flex items-center space-x-4 text-sm text-muted-foreground"> <div className="flex items-center space-x-4 text-sm text-muted-foreground">
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
@ -234,7 +267,7 @@ export default function Blog() {
</div> </div>
<Badge variant="outline">{featuredPost.readTime}</Badge> <Badge variant="outline">{featuredPost.readTime}</Badge>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Button asChild> <Button asChild>
<Link to="/blog/quantum-game-development"> <Link to="/blog/quantum-game-development">
@ -273,7 +306,7 @@ export default function Blog() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
{filteredPosts.map((post, index) => ( {filteredPosts.map((post, index) => (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up" className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
@ -297,7 +330,7 @@ export default function Blog() {
{post.excerpt} {post.excerpt}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="flex items-center justify-between text-xs text-muted-foreground"> <div className="flex items-center justify-between text-xs text-muted-foreground">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -309,7 +342,7 @@ export default function Blog() {
<span>{post.date}</span> <span>{post.date}</span>
</div> </div>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs">
{post.readTime} {post.readTime}
@ -323,7 +356,7 @@ export default function Blog() {
</Button> </Button>
</div> </div>
</div> </div>
<div className="flex items-center justify-between pt-2 border-t border-border/30"> <div className="flex items-center justify-between pt-2 border-t border-border/30">
<div className="flex items-center space-x-4 text-xs text-muted-foreground"> <div className="flex items-center space-x-4 text-xs text-muted-foreground">
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
@ -336,7 +369,9 @@ export default function Blog() {
</div> </div>
</div> </div>
<Button size="sm" asChild> <Button size="sm" asChild>
<Link to={`/blog/${post.title.toLowerCase().replace(/\s+/g, '-')}`}> <Link
to={`/blog/${post.title.toLowerCase().replace(/\s+/g, "-")}`}
>
Read More Read More
</Link> </Link>
</Button> </Button>
@ -356,10 +391,10 @@ export default function Blog() {
Stay in the Loop Stay in the Loop
</h2> </h2>
<p className="text-xl text-muted-foreground"> <p className="text-xl text-muted-foreground">
Subscribe to our newsletter for the latest articles, tutorials, and technology insights Subscribe to our newsletter for the latest articles, tutorials,
delivered directly to your inbox. and technology insights delivered directly to your inbox.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"> <div className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
<input <input
type="email" type="email"
@ -370,9 +405,10 @@ export default function Blog() {
Subscribe Subscribe
</Button> </Button>
</div> </div>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Join 10,000+ developers getting weekly insights. Unsubscribe anytime. Join 10,000+ developers getting weekly insights. Unsubscribe
anytime.
</p> </p>
</div> </div>
</div> </div>

207
client/pages/Community.tsx
View file

@ -1,17 +1,23 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast"; import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
Users, Users,
MessageCircle, MessageCircle,
Github, Github,
MessageSquare, MessageSquare,
Twitter, Twitter,
ArrowRight, ArrowRight,
Star, Star,
Calendar, Calendar,
@ -21,7 +27,7 @@ import {
Heart, Heart,
Coffee, Coffee,
Code, Code,
Gamepad2 Gamepad2,
} from "lucide-react"; } from "lucide-react";
export default function Community() { export default function Community() {
@ -48,7 +54,7 @@ export default function Community() {
members: "15K+ members", members: "15K+ members",
activity: "500+ daily active", activity: "500+ daily active",
link: "/discord", link: "/discord",
color: "from-purple-500 to-indigo-600" color: "from-purple-500 to-indigo-600",
}, },
{ {
name: "GitHub Community", name: "GitHub Community",
@ -57,7 +63,7 @@ export default function Community() {
members: "8K+ contributors", members: "8K+ contributors",
activity: "200+ repositories", activity: "200+ repositories",
link: "/github", link: "/github",
color: "from-gray-700 to-gray-900" color: "from-gray-700 to-gray-900",
}, },
{ {
name: "Twitter Community", name: "Twitter Community",
@ -66,8 +72,8 @@ export default function Community() {
members: "25K+ followers", members: "25K+ followers",
activity: "Daily updates", activity: "Daily updates",
link: "/twitter", link: "/twitter",
color: "from-blue-400 to-blue-600" color: "from-blue-400 to-blue-600",
} },
]; ];
const events = [ const events = [
@ -78,7 +84,7 @@ export default function Community() {
type: "Competition", type: "Competition",
participants: 500, participants: 500,
prize: "$10,000", prize: "$10,000",
status: "Registration Open" status: "Registration Open",
}, },
{ {
title: "Weekly Developer Meetup", title: "Weekly Developer Meetup",
@ -87,7 +93,7 @@ export default function Community() {
type: "Meetup", type: "Meetup",
participants: 50, participants: 50,
prize: null, prize: null,
status: "Recurring" status: "Recurring",
}, },
{ {
title: "AI in Games Workshop", title: "AI in Games Workshop",
@ -96,46 +102,55 @@ export default function Community() {
type: "Workshop", type: "Workshop",
participants: 100, participants: 100,
prize: null, prize: null,
status: "Upcoming" status: "Upcoming",
} },
]; ];
const contributors = [ const contributors = [
{ {
name: "Alex Developer", name: "Alex Developer",
avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", avatar:
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
title: "Community Leader", title: "Community Leader",
contributions: 156, contributions: 156,
badge: "🏆 Top Contributor", badge: "🏆 Top Contributor",
speciality: "Game Development" speciality: "Game Development",
}, },
{ {
name: "Sarah Coder", name: "Sarah Coder",
avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b029?w=100&h=100&fit=crop&crop=face", avatar:
"https://images.unsplash.com/photo-1494790108755-2616b612b029?w=100&h=100&fit=crop&crop=face",
title: "Documentation Expert", title: "Documentation Expert",
contributions: 89, contributions: 89,
badge: "📚 Knowledge Hero", badge: "📚 Knowledge Hero",
speciality: "Technical Writing" speciality: "Technical Writing",
}, },
{ {
name: "Jordan AI", name: "Jordan AI",
avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", avatar:
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
title: "AI Researcher", title: "AI Researcher",
contributions: 134, contributions: 134,
badge: "🧠 AI Pioneer", badge: "🧠 AI Pioneer",
speciality: "Machine Learning" speciality: "Machine Learning",
} },
]; ];
const stats = [ const stats = [
{ label: "Community Members", value: "50K+", icon: Users }, { label: "Community Members", value: "50K+", icon: Users },
{ label: "Daily Messages", value: "2K+", icon: MessageCircle }, { label: "Daily Messages", value: "2K+", icon: MessageCircle },
{ label: "Open Source Projects", value: "200+", icon: Code }, { label: "Open Source Projects", value: "200+", icon: Code },
{ label: "Games Created", value: "1K+", icon: Gamepad2 } { label: "Games Created", value: "1K+", icon: Gamepad2 },
]; ];
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Connecting to Community..." showProgress={true} duration={1000} />; return (
<LoadingScreen
message="Connecting to Community..."
showProgress={true}
duration={1000}
/>
);
} }
return ( return (
@ -145,29 +160,44 @@ export default function Community() {
<section className="relative py-20 lg:py-32"> <section className="relative py-20 lg:py-32">
<div className="container mx-auto px-4 text-center relative z-10"> <div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-4xl mx-auto space-y-8">
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"> <Badge
variant="outline"
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
>
<Users className="h-3 w-3 mr-1" /> <Users className="h-3 w-3 mr-1" />
AeThex Community AeThex Community
</Badge> </Badge>
<h1 className="text-4xl lg:text-6xl font-bold leading-tight"> <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
<span className="text-gradient-purple">Join the Innovation Network</span> <span className="text-gradient-purple">
Join the Innovation Network
</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Connect with developers, creators, and innovators from around the world. Connect with developers, creators, and innovators from around
Share knowledge, collaborate on projects, and grow together. the world. Share knowledge, collaborate on projects, and grow
together.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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"> <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="/discord" className="flex items-center space-x-2"> <Link to="/discord" className="flex items-center space-x-2">
<MessageSquare className="h-5 w-5" /> <MessageSquare className="h-5 w-5" />
<span>Join Discord</span> <span>Join Discord</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-border/50 hover-lift"> <Button
asChild
variant="outline"
size="lg"
className="border-border/50 hover-lift"
>
<Link to="/github">View Projects</Link> <Link to="/github">View Projects</Link>
</Button> </Button>
</div> </div>
@ -182,7 +212,7 @@ export default function Community() {
{stats.map((stat, index) => { {stats.map((stat, index) => {
const Icon = stat.icon; const Icon = stat.icon;
return ( return (
<div <div
key={index} key={index}
className="text-center space-y-3 animate-scale-in" className="text-center space-y-3 animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
@ -193,8 +223,12 @@ export default function Community() {
</div> </div>
</div> </div>
<div> <div>
<div className="text-3xl font-bold text-gradient">{stat.value}</div> <div className="text-3xl font-bold text-gradient">
<p className="text-sm text-muted-foreground uppercase tracking-wide">{stat.label}</p> {stat.value}
</div>
<p className="text-sm text-muted-foreground uppercase tracking-wide">
{stat.label}
</p>
</div> </div>
</div> </div>
); );
@ -219,13 +253,15 @@ export default function Community() {
{platforms.map((platform, index) => { {platforms.map((platform, index) => {
const Icon = platform.icon; const Icon = platform.icon;
return ( return (
<Card <Card
key={index} key={index}
className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in" className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.2}s` }} style={{ animationDelay: `${index * 0.2}s` }}
> >
<CardHeader> <CardHeader>
<div className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${platform.color} flex items-center justify-center mb-4`}> <div
className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${platform.color} flex items-center justify-center mb-4`}
>
<Icon className="h-8 w-8 text-white" /> <Icon className="h-8 w-8 text-white" />
</div> </div>
<CardTitle className="text-xl">{platform.name}</CardTitle> <CardTitle className="text-xl">{platform.name}</CardTitle>
@ -235,14 +271,18 @@ export default function Community() {
<div className="grid grid-cols-1 gap-2 text-sm"> <div className="grid grid-cols-1 gap-2 text-sm">
<div className="flex justify-between"> <div className="flex justify-between">
<span>Members:</span> <span>Members:</span>
<span className="font-semibold text-aethex-400">{platform.members}</span> <span className="font-semibold text-aethex-400">
{platform.members}
</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span>Activity:</span> <span>Activity:</span>
<span className="font-semibold text-aethex-400">{platform.activity}</span> <span className="font-semibold text-aethex-400">
{platform.activity}
</span>
</div> </div>
</div> </div>
<Button asChild className="w-full"> <Button asChild className="w-full">
<Link to={platform.link}> <Link to={platform.link}>
Join Now Join Now
@ -271,7 +311,7 @@ export default function Community() {
<div className="max-w-4xl mx-auto space-y-6"> <div className="max-w-4xl mx-auto space-y-6">
{events.map((event, index) => ( {events.map((event, index) => (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right" className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
@ -280,15 +320,25 @@ export default function Community() {
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<h3 className="text-xl font-semibold text-gradient">{event.title}</h3> <h3 className="text-xl font-semibold text-gradient">
<Badge {event.title}
variant={event.status === 'Registration Open' ? 'default' : 'outline'} </h3>
className={event.status === 'Registration Open' ? 'animate-pulse' : ''} <Badge
variant={
event.status === "Registration Open"
? "default"
: "outline"
}
className={
event.status === "Registration Open"
? "animate-pulse"
: ""
}
> >
{event.status} {event.status}
</Badge> </Badge>
</div> </div>
<div className="flex flex-wrap gap-4 text-sm text-muted-foreground"> <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
<Calendar className="h-4 w-4" /> <Calendar className="h-4 w-4" />
@ -310,11 +360,13 @@ export default function Community() {
)} )}
</div> </div>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Badge variant="outline">{event.type}</Badge> <Badge variant="outline">{event.type}</Badge>
<Button size="sm"> <Button size="sm">
{event.status === 'Registration Open' ? 'Register' : 'Learn More'} {event.status === "Registration Open"
? "Register"
: "Learn More"}
</Button> </Button>
</div> </div>
</div> </div>
@ -339,25 +391,37 @@ export default function Community() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
{contributors.map((contributor, index) => ( {contributors.map((contributor, index) => (
<Card <Card
key={index} key={index}
className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in" className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.2}s` }} style={{ animationDelay: `${index * 0.2}s` }}
> >
<CardContent className="p-6"> <CardContent className="p-6">
<img <img
src={contributor.avatar} src={contributor.avatar}
alt={contributor.name} alt={contributor.name}
className="w-20 h-20 rounded-full mx-auto mb-4 ring-4 ring-aethex-400/20" className="w-20 h-20 rounded-full mx-auto mb-4 ring-4 ring-aethex-400/20"
/> />
<h3 className="font-semibold text-lg text-gradient">{contributor.name}</h3> <h3 className="font-semibold text-lg text-gradient">
<p className="text-sm text-muted-foreground mb-2">{contributor.title}</p> {contributor.name}
<Badge variant="outline" className="mb-4">{contributor.speciality}</Badge> </h3>
<p className="text-sm text-muted-foreground mb-2">
{contributor.title}
</p>
<Badge variant="outline" className="mb-4">
{contributor.speciality}
</Badge>
<div className="space-y-2"> <div className="space-y-2">
<div className="text-2xl font-bold text-aethex-400">{contributor.contributions}</div> <div className="text-2xl font-bold text-aethex-400">
<div className="text-sm text-muted-foreground">Contributions</div> {contributor.contributions}
<div className="text-sm font-medium">{contributor.badge}</div> </div>
<div className="text-sm text-muted-foreground">
Contributions
</div>
<div className="text-sm font-medium">
{contributor.badge}
</div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -374,19 +438,28 @@ export default function Community() {
Ready to Join Our Community? Ready to Join Our Community?
</h2> </h2>
<p className="text-xl text-muted-foreground"> <p className="text-xl text-muted-foreground">
Connect with thousands of developers, share your projects, and grow your skills Connect with thousands of developers, share your projects, and
in our supportive and innovative community. grow your skills in our supportive and innovative community.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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 text-lg px-8 py-6"> <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-lg px-8 py-6"
>
<Link to="/discord" className="flex items-center space-x-2"> <Link to="/discord" className="flex items-center space-x-2">
<Heart className="h-5 w-5" /> <Heart className="h-5 w-5" />
<span>Join Community</span> <span>Join Community</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"> <Button
asChild
variant="outline"
size="lg"
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
>
<Link to="/events">View All Events</Link> <Link to="/events">View All Events</Link>
</Button> </Button>
</div> </div>
@ -395,17 +468,23 @@ export default function Community() {
<div className="text-center"> <div className="text-center">
<Coffee className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Coffee className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Weekly Meetups</h3> <h3 className="font-semibold">Weekly Meetups</h3>
<p className="text-sm text-muted-foreground">Virtual coffee chats</p> <p className="text-sm text-muted-foreground">
Virtual coffee chats
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Star className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Star className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Recognition</h3> <h3 className="font-semibold">Recognition</h3>
<p className="text-sm text-muted-foreground">Contributor rewards</p> <p className="text-sm text-muted-foreground">
Contributor rewards
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<TrendingUp className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <TrendingUp className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Growth</h3> <h3 className="font-semibold">Growth</h3>
<p className="text-sm text-muted-foreground">Learn & advance</p> <p className="text-sm text-muted-foreground">
Learn & advance
</p>
</div> </div>
</div> </div>
</div> </div>

222
client/pages/Dashboard.tsx
View file

@ -1,18 +1,24 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
User, User,
Settings, Settings,
Activity, Activity,
TrendingUp, TrendingUp,
Zap, Zap,
Target, Target,
Users, Users,
Calendar, Calendar,
Bell, Bell,
Star, Star,
@ -25,7 +31,7 @@ import {
MoreHorizontal, MoreHorizontal,
Play, Play,
Pause, Pause,
BarChart3 BarChart3,
} from "lucide-react"; } from "lucide-react";
export default function Dashboard() { export default function Dashboard() {
@ -47,16 +53,37 @@ export default function Dashboard() {
level: 15, level: 15,
xp: 2450, xp: 2450,
nextLevelXp: 3000, nextLevelXp: 3000,
avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", avatar:
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
joinDate: "March 2024", joinDate: "March 2024",
streak: 12 streak: 12,
}; };
const stats = [ const stats = [
{ label: "Active Projects", value: activeProjects, icon: Rocket, color: "from-blue-500 to-purple-600" }, {
{ label: "Completed Tasks", value: 47, icon: Trophy, color: "from-green-500 to-blue-600" }, label: "Active Projects",
{ label: "Team Members", value: 8, icon: Users, color: "from-purple-500 to-pink-600" }, value: activeProjects,
{ label: "Performance Score", value: "94%", icon: TrendingUp, color: "from-orange-500 to-red-600" } icon: Rocket,
color: "from-blue-500 to-purple-600",
},
{
label: "Completed Tasks",
value: 47,
icon: Trophy,
color: "from-green-500 to-blue-600",
},
{
label: "Team Members",
value: 8,
icon: Users,
color: "from-purple-500 to-pink-600",
},
{
label: "Performance Score",
value: "94%",
icon: TrendingUp,
color: "from-orange-500 to-red-600",
},
]; ];
const recentProjects = [ const recentProjects = [
@ -66,7 +93,7 @@ export default function Dashboard() {
status: "In Progress", status: "In Progress",
dueDate: "Dec 15", dueDate: "Dec 15",
team: 4, team: 4,
priority: "High" priority: "High",
}, },
{ {
name: "Blockchain Integration", name: "Blockchain Integration",
@ -74,7 +101,7 @@ export default function Dashboard() {
status: "Development", status: "Development",
dueDate: "Dec 20", dueDate: "Dec 20",
team: 3, team: 3,
priority: "Medium" priority: "Medium",
}, },
{ {
name: "Cloud Infrastructure", name: "Cloud Infrastructure",
@ -82,26 +109,60 @@ export default function Dashboard() {
status: "Testing", status: "Testing",
dueDate: "Dec 10", dueDate: "Dec 10",
team: 6, team: 6,
priority: "High" priority: "High",
} },
]; ];
const achievements = [ const achievements = [
{ title: "Code Master", description: "Completed 50+ coding challenges", icon: Code, earned: true }, {
{ title: "Team Player", description: "Collaborated on 10+ projects", icon: Users, earned: true }, title: "Code Master",
{ title: "Innovation Leader", description: "Led 5+ innovative projects", icon: Rocket, earned: false }, description: "Completed 50+ coding challenges",
{ title: "Database Wizard", description: "Optimized 20+ databases", icon: Database, earned: false } icon: Code,
earned: true,
},
{
title: "Team Player",
description: "Collaborated on 10+ projects",
icon: Users,
earned: true,
},
{
title: "Innovation Leader",
description: "Led 5+ innovative projects",
icon: Rocket,
earned: false,
},
{
title: "Database Wizard",
description: "Optimized 20+ databases",
icon: Database,
earned: false,
},
]; ];
const quickActions = [ const quickActions = [
{ title: "Start New Project", icon: Rocket, color: "from-blue-500 to-purple-600" }, {
title: "Start New Project",
icon: Rocket,
color: "from-blue-500 to-purple-600",
},
{ title: "Join Team", icon: Users, color: "from-green-500 to-blue-600" }, { title: "Join Team", icon: Users, color: "from-green-500 to-blue-600" },
{ title: "Access Labs", icon: Zap, color: "from-yellow-500 to-orange-600" }, { title: "Access Labs", icon: Zap, color: "from-yellow-500 to-orange-600" },
{ title: "View Analytics", icon: BarChart3, color: "from-purple-500 to-pink-600" } {
title: "View Analytics",
icon: BarChart3,
color: "from-purple-500 to-pink-600",
},
]; ];
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Loading your dashboard..." showProgress={true} duration={1000} />; return (
<LoadingScreen
message="Loading your dashboard..."
showProgress={true}
duration={1000}
/>
);
} }
return ( return (
@ -140,7 +201,7 @@ export default function Dashboard() {
<CardContent className="p-6"> <CardContent className="p-6">
<div className="text-center space-y-4"> <div className="text-center space-y-4">
<div className="relative"> <div className="relative">
<img <img
src={user.avatar} src={user.avatar}
alt="User Avatar" alt="User Avatar"
className="w-20 h-20 rounded-full mx-auto ring-4 ring-aethex-400/20 hover:ring-aethex-400/50 transition-all duration-300" className="w-20 h-20 rounded-full mx-auto ring-4 ring-aethex-400/20 hover:ring-aethex-400/50 transition-all duration-300"
@ -148,23 +209,34 @@ export default function Dashboard() {
<div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-background animate-pulse" /> <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-background animate-pulse" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gradient">{user.name}</h3> <h3 className="font-semibold text-gradient">
<p className="text-sm text-muted-foreground">{user.role}</p> {user.name}
<Badge variant="outline" className="mt-2 border-aethex-400/50 text-aethex-400"> </h3>
<p className="text-sm text-muted-foreground">
{user.role}
</p>
<Badge
variant="outline"
className="mt-2 border-aethex-400/50 text-aethex-400"
>
Level {user.level} Level {user.level}
</Badge> </Badge>
</div> </div>
{/* XP Progress */} {/* XP Progress */}
<div className="space-y-2"> <div className="space-y-2">
<div className="flex justify-between text-sm"> <div className="flex justify-between text-sm">
<span>XP Progress</span> <span>XP Progress</span>
<span>{user.xp} / {user.nextLevelXp}</span> <span>
{user.xp} / {user.nextLevelXp}
</span>
</div> </div>
<div className="w-full bg-muted rounded-full h-2"> <div className="w-full bg-muted rounded-full h-2">
<div <div
className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full transition-all duration-500 glow-blue" className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full transition-all duration-500 glow-blue"
style={{ width: `${(user.xp / user.nextLevelXp) * 100}%` }} style={{
width: `${(user.xp / user.nextLevelXp) * 100}%`,
}}
/> />
</div> </div>
</div> </div>
@ -187,7 +259,9 @@ export default function Dashboard() {
className="w-full justify-start hover-lift interactive-scale" className="w-full justify-start hover-lift interactive-scale"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
<div className={`p-1 rounded bg-gradient-to-r ${action.color} mr-3`}> <div
className={`p-1 rounded bg-gradient-to-r ${action.color} mr-3`}
>
<Icon className="h-4 w-4 text-white" /> <Icon className="h-4 w-4 text-white" />
</div> </div>
{action.title} {action.title}
@ -205,7 +279,7 @@ export default function Dashboard() {
{stats.map((stat, index) => { {stats.map((stat, index) => {
const Icon = stat.icon; const Icon = stat.icon;
return ( return (
<Card <Card
key={index} key={index}
className="bg-card/50 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in" className="bg-card/50 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
@ -213,10 +287,16 @@ export default function Dashboard() {
<CardContent className="p-6"> <CardContent className="p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm text-muted-foreground">{stat.label}</p> <p className="text-sm text-muted-foreground">
<p className="text-2xl font-bold text-gradient">{stat.value}</p> {stat.label}
</p>
<p className="text-2xl font-bold text-gradient">
{stat.value}
</p>
</div> </div>
<div className={`p-3 rounded-lg bg-gradient-to-r ${stat.color}`}> <div
className={`p-3 rounded-lg bg-gradient-to-r ${stat.color}`}
>
<Icon className="h-6 w-6 text-white" /> <Icon className="h-6 w-6 text-white" />
</div> </div>
</div> </div>
@ -231,8 +311,12 @@ export default function Dashboard() {
<CardHeader> <CardHeader>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<CardTitle className="text-gradient">Recent Projects</CardTitle> <CardTitle className="text-gradient">
<CardDescription>Your active development projects</CardDescription> Recent Projects
</CardTitle>
<CardDescription>
Your active development projects
</CardDescription>
</div> </div>
<Button variant="outline" size="sm" className="hover-lift"> <Button variant="outline" size="sm" className="hover-lift">
View All View All
@ -242,7 +326,7 @@ export default function Dashboard() {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
{recentProjects.map((project, index) => ( {recentProjects.map((project, index) => (
<div <div
key={index} key={index}
className="flex items-center justify-between p-4 rounded-lg border border-border/30 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right" className="flex items-center justify-between p-4 rounded-lg border border-border/30 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
@ -260,21 +344,31 @@ export default function Dashboard() {
</div> </div>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="text-right"> <div className="text-right">
<p className="text-sm font-medium">{project.progress}%</p> <p className="text-sm font-medium">
{project.progress}%
</p>
<div className="w-20 bg-muted rounded-full h-2 mt-1"> <div className="w-20 bg-muted rounded-full h-2 mt-1">
<div <div
className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full" className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full"
style={{ width: `${project.progress}%` }} style={{ width: `${project.progress}%` }}
/> />
</div> </div>
</div> </div>
<Badge <Badge
variant={project.priority === 'High' ? 'destructive' : 'secondary'} variant={
project.priority === "High"
? "destructive"
: "secondary"
}
className="animate-pulse" className="animate-pulse"
> >
{project.priority} {project.priority}
</Badge> </Badge>
<Button variant="ghost" size="sm" className="hover-lift"> <Button
variant="ghost"
size="sm"
className="hover-lift"
>
<MoreHorizontal className="h-4 w-4" /> <MoreHorizontal className="h-4 w-4" />
</Button> </Button>
</div> </div>
@ -287,32 +381,40 @@ export default function Dashboard() {
<Card className="bg-card/50 border-border/50 animate-slide-up"> <Card className="bg-card/50 border-border/50 animate-slide-up">
<CardHeader> <CardHeader>
<CardTitle className="text-gradient">Achievements</CardTitle> <CardTitle className="text-gradient">Achievements</CardTitle>
<CardDescription>Your progress and accomplishments</CardDescription> <CardDescription>
Your progress and accomplishments
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{achievements.map((achievement, index) => { {achievements.map((achievement, index) => {
const Icon = achievement.icon; const Icon = achievement.icon;
return ( return (
<div <div
key={index} key={index}
className={`p-4 rounded-lg border transition-all duration-300 hover-lift animate-scale-in ${ className={`p-4 rounded-lg border transition-all duration-300 hover-lift animate-scale-in ${
achievement.earned achievement.earned
? 'border-aethex-400/50 bg-aethex-500/10' ? "border-aethex-400/50 bg-aethex-500/10"
: 'border-border/30 opacity-60' : "border-border/30 opacity-60"
}`} }`}
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className={`p-2 rounded-lg ${ <div
achievement.earned className={`p-2 rounded-lg ${
? 'bg-gradient-to-r from-aethex-500 to-neon-blue' achievement.earned
: 'bg-muted' ? "bg-gradient-to-r from-aethex-500 to-neon-blue"
}`}> : "bg-muted"
<Icon className={`h-5 w-5 ${achievement.earned ? 'text-white' : 'text-muted-foreground'}`} /> }`}
>
<Icon
className={`h-5 w-5 ${achievement.earned ? "text-white" : "text-muted-foreground"}`}
/>
</div> </div>
<div> <div>
<h4 className={`font-semibold ${achievement.earned ? 'text-gradient' : ''}`}> <h4
className={`font-semibold ${achievement.earned ? "text-gradient" : ""}`}
>
{achievement.title} {achievement.title}
</h4> </h4>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">

296
client/pages/DevelopmentConsulting.tsx
View file

@ -1,18 +1,24 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast"; import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
BriefcaseIcon, BriefcaseIcon,
Code, Code,
Sparkles, Sparkles,
Zap, Zap,
Users, Users,
Trophy, Trophy,
Target, Target,
ArrowRight, ArrowRight,
CheckCircle, CheckCircle,
@ -27,7 +33,7 @@ import {
Lightbulb, Lightbulb,
Puzzle, Puzzle,
Rocket, Rocket,
Globe Globe,
} from "lucide-react"; } from "lucide-react";
export default function DevelopmentConsulting() { export default function DevelopmentConsulting() {
@ -51,48 +57,50 @@ export default function DevelopmentConsulting() {
const consultingServices = [ const consultingServices = [
{ {
title: "Technical Architecture Review", title: "Technical Architecture Review",
description: "Comprehensive analysis of your system architecture and scalability", description:
"Comprehensive analysis of your system architecture and scalability",
icon: Database, icon: Database,
duration: "2-4 weeks", duration: "2-4 weeks",
price: "Starting at $8,000", price: "Starting at $8,000",
features: [ features: [
"System architecture audit", "System architecture audit",
"Performance bottleneck analysis", "Performance bottleneck analysis",
"Scalability recommendations", "Scalability recommendations",
"Security assessment", "Security assessment",
"Technology stack evaluation" "Technology stack evaluation",
], ],
color: "from-blue-500 to-cyan-600" color: "from-blue-500 to-cyan-600",
}, },
{ {
title: "DevOps & Infrastructure", title: "DevOps & Infrastructure",
description: "Streamline your development pipeline and cloud infrastructure", description:
"Streamline your development pipeline and cloud infrastructure",
icon: Cloud, icon: Cloud,
duration: "3-6 weeks", duration: "3-6 weeks",
price: "Starting at $12,000", price: "Starting at $12,000",
features: [ features: [
"CI/CD pipeline setup", "CI/CD pipeline setup",
"Cloud migration strategy", "Cloud migration strategy",
"Monitoring & alerting", "Monitoring & alerting",
"Container orchestration", "Container orchestration",
"Infrastructure as code" "Infrastructure as code",
], ],
color: "from-green-500 to-emerald-600" color: "from-green-500 to-emerald-600",
}, },
{ {
title: "Code Quality & Optimization", title: "Code Quality & Optimization",
description: "Improve code quality, performance, and maintainability", description: "Improve code quality, performance, and maintainability",
icon: Code, icon: Code,
duration: "2-8 weeks", duration: "2-8 weeks",
price: "Starting at $6,000", price: "Starting at $6,000",
features: [ features: [
"Code review & refactoring", "Code review & refactoring",
"Performance optimization", "Performance optimization",
"Testing strategy", "Testing strategy",
"Documentation improvement", "Documentation improvement",
"Best practices implementation" "Best practices implementation",
], ],
color: "from-purple-500 to-indigo-600" color: "from-purple-500 to-indigo-600",
}, },
{ {
title: "Team & Process Consulting", title: "Team & Process Consulting",
@ -105,37 +113,57 @@ export default function DevelopmentConsulting() {
"Team structure optimization", "Team structure optimization",
"Workflow automation", "Workflow automation",
"Knowledge transfer", "Knowledge transfer",
"Leadership coaching" "Leadership coaching",
], ],
color: "from-orange-500 to-red-600" color: "from-orange-500 to-red-600",
} },
]; ];
const expertise = [ const expertise = [
{ {
category: "Frontend Technologies", category: "Frontend Technologies",
technologies: ["React", "Vue.js", "Angular", "TypeScript", "Next.js", "Tailwind CSS"], technologies: [
"React",
"Vue.js",
"Angular",
"TypeScript",
"Next.js",
"Tailwind CSS",
],
icon: Puzzle, icon: Puzzle,
projects: "200+ projects" projects: "200+ projects",
}, },
{ {
category: "Backend & APIs", category: "Backend & APIs",
technologies: ["Node.js", "Python", "Java", "Go", "GraphQL", "REST APIs"], technologies: ["Node.js", "Python", "Java", "Go", "GraphQL", "REST APIs"],
icon: Settings, icon: Settings,
projects: "150+ systems" projects: "150+ systems",
}, },
{ {
category: "Cloud & Infrastructure", category: "Cloud & Infrastructure",
technologies: ["AWS", "Azure", "GCP", "Docker", "Kubernetes", "Terraform"], technologies: [
"AWS",
"Azure",
"GCP",
"Docker",
"Kubernetes",
"Terraform",
],
icon: Cloud, icon: Cloud,
projects: "100+ deployments" projects: "100+ deployments",
}, },
{ {
category: "Databases & Analytics", category: "Databases & Analytics",
technologies: ["PostgreSQL", "MongoDB", "Redis", "Elasticsearch", "BigQuery"], technologies: [
"PostgreSQL",
"MongoDB",
"Redis",
"Elasticsearch",
"BigQuery",
],
icon: Database, icon: Database,
projects: "80+ implementations" projects: "80+ implementations",
} },
]; ];
const packages = [ const packages = [
@ -149,10 +177,10 @@ export default function DevelopmentConsulting() {
"Key recommendations", "Key recommendations",
"Priority action items", "Priority action items",
"Executive summary", "Executive summary",
"30-min follow-up call" "30-min follow-up call",
], ],
popular: false, popular: false,
color: "from-gray-500 to-gray-600" color: "from-gray-500 to-gray-600",
}, },
{ {
name: "Comprehensive Audit", name: "Comprehensive Audit",
@ -165,10 +193,10 @@ export default function DevelopmentConsulting() {
"Implementation roadmap", "Implementation roadmap",
"Risk assessment", "Risk assessment",
"Team presentation", "Team presentation",
"3 months email support" "3 months email support",
], ],
popular: true, popular: true,
color: "from-aethex-500 to-neon-blue" color: "from-aethex-500 to-neon-blue",
}, },
{ {
name: "Strategic Partnership", name: "Strategic Partnership",
@ -181,11 +209,11 @@ export default function DevelopmentConsulting() {
"Implementation support", "Implementation support",
"Team training", "Team training",
"Priority support", "Priority support",
"Quarterly reviews" "Quarterly reviews",
], ],
popular: false, popular: false,
color: "from-purple-500 to-pink-600" color: "from-purple-500 to-pink-600",
} },
]; ];
const caseStudies = [ const caseStudies = [
@ -194,8 +222,12 @@ export default function DevelopmentConsulting() {
client: "Fortune 500 Retailer", client: "Fortune 500 Retailer",
challenge: "10x traffic growth causing system failures", challenge: "10x traffic growth causing system failures",
solution: "Microservices architecture with auto-scaling", solution: "Microservices architecture with auto-scaling",
results: ["99.99% uptime achieved", "50% cost reduction", "3x faster load times"], results: [
tech: ["Kubernetes", "Redis", "CDN"] "99.99% uptime achieved",
"50% cost reduction",
"3x faster load times",
],
tech: ["Kubernetes", "Redis", "CDN"],
}, },
{ {
title: "FinTech Security Overhaul", title: "FinTech Security Overhaul",
@ -203,20 +235,30 @@ export default function DevelopmentConsulting() {
challenge: "Security compliance for banking regulations", challenge: "Security compliance for banking regulations",
solution: "Zero-trust architecture with enhanced monitoring", solution: "Zero-trust architecture with enhanced monitoring",
results: ["SOC 2 compliance", "Zero breaches", "40% faster audits"], results: ["SOC 2 compliance", "Zero breaches", "40% faster audits"],
tech: ["OAuth 2.0", "Vault", "Istio"] tech: ["OAuth 2.0", "Vault", "Istio"],
}, },
{ {
title: "Legacy System Modernization", title: "Legacy System Modernization",
client: "Healthcare Provider", client: "Healthcare Provider",
challenge: "20-year-old system blocking innovation", challenge: "20-year-old system blocking innovation",
solution: "Gradual migration to cloud-native architecture", solution: "Gradual migration to cloud-native architecture",
results: ["6 months migration", "60% performance boost", "Modern API ecosystem"], results: [
tech: ["Docker", "GraphQL", "Postgres"] "6 months migration",
} "60% performance boost",
"Modern API ecosystem",
],
tech: ["Docker", "GraphQL", "Postgres"],
},
]; ];
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Loading Development Consulting..." showProgress={true} duration={1000} />; return (
<LoadingScreen
message="Loading Development Consulting..."
showProgress={true}
duration={1000}
/>
);
} }
return ( return (
@ -234,39 +276,54 @@ export default function DevelopmentConsulting() {
top: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`, animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s`, animationDuration: `${3 + Math.random() * 2}s`,
fontSize: `${8 + Math.random() * 6}px` fontSize: `${8 + Math.random() * 6}px`,
}} }}
> >
{'⚡🔧📊💡'.charAt(Math.floor(Math.random() * 4))} {"⚡🔧📊💡".charAt(Math.floor(Math.random() * 4))}
</div> </div>
))} ))}
</div> </div>
<div className="container mx-auto px-4 text-center relative z-10"> <div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-4xl mx-auto space-y-8">
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"> <Badge
variant="outline"
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
>
<BriefcaseIcon className="h-3 w-3 mr-1" /> <BriefcaseIcon className="h-3 w-3 mr-1" />
Development Consulting Division Development Consulting Division
</Badge> </Badge>
<h1 className="text-4xl lg:text-6xl font-bold leading-tight"> <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
<span className="text-gradient-purple">Strategic Technology Consulting</span> <span className="text-gradient-purple">
Strategic Technology Consulting
</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Expert guidance to optimize your development processes, scale your systems, Expert guidance to optimize your development processes, scale
and accelerate your digital transformation journey. your systems, and accelerate your digital transformation
journey.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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"> <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="/contact" className="flex items-center space-x-2"> <Link to="/contact" className="flex items-center space-x-2">
<Target className="h-5 w-5" /> <Target className="h-5 w-5" />
<span>Get Free Assessment</span> <span>Get Free Assessment</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-border/50 hover-lift"> <Button
asChild
variant="outline"
size="lg"
className="border-border/50 hover-lift"
>
<Link to="/docs">Case Studies</Link> <Link to="/docs">Case Studies</Link>
</Button> </Button>
</div> </div>
@ -290,18 +347,22 @@ export default function DevelopmentConsulting() {
{consultingServices.map((service, index) => { {consultingServices.map((service, index) => {
const Icon = service.icon; const Icon = service.icon;
return ( return (
<Card <Card
key={index} key={index}
className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in" className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
<CardHeader> <CardHeader>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className={`p-3 rounded-lg bg-gradient-to-r ${service.color}`}> <div
className={`p-3 rounded-lg bg-gradient-to-r ${service.color}`}
>
<Icon className="h-6 w-6 text-white" /> <Icon className="h-6 w-6 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<CardTitle className="text-xl">{service.title}</CardTitle> <CardTitle className="text-xl">
{service.title}
</CardTitle>
<CardDescription className="mt-1"> <CardDescription className="mt-1">
{service.description} {service.description}
</CardDescription> </CardDescription>
@ -311,13 +372,16 @@ export default function DevelopmentConsulting() {
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-1 gap-2"> <div className="grid grid-cols-1 gap-2">
{service.features.map((feature, featureIndex) => ( {service.features.map((feature, featureIndex) => (
<div key={featureIndex} className="flex items-center space-x-2 text-sm"> <div
key={featureIndex}
className="flex items-center space-x-2 text-sm"
>
<CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" /> <CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" />
<span>{feature}</span> <span>{feature}</span>
</div> </div>
))} ))}
</div> </div>
<div className="flex justify-between items-center pt-4 border-t border-border/30"> <div className="flex justify-between items-center pt-4 border-t border-border/30">
<div className="flex items-center space-x-2 text-sm text-muted-foreground"> <div className="flex items-center space-x-2 text-sm text-muted-foreground">
<Clock className="h-4 w-4" /> <Clock className="h-4 w-4" />
@ -352,7 +416,7 @@ export default function DevelopmentConsulting() {
{expertise.map((area, index) => { {expertise.map((area, index) => {
const Icon = area.icon; const Icon = area.icon;
return ( return (
<Card <Card
key={index} key={index}
className="bg-card/30 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in" className="bg-card/30 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
@ -360,12 +424,18 @@ export default function DevelopmentConsulting() {
<CardHeader className="text-center"> <CardHeader className="text-center">
<Icon className="h-12 w-12 text-aethex-400 mx-auto mb-3" /> <Icon className="h-12 w-12 text-aethex-400 mx-auto mb-3" />
<CardTitle className="text-lg">{area.category}</CardTitle> <CardTitle className="text-lg">{area.category}</CardTitle>
<Badge variant="outline" className="text-xs">{area.projects}</Badge> <Badge variant="outline" className="text-xs">
{area.projects}
</Badge>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{area.technologies.map((tech, techIndex) => ( {area.technologies.map((tech, techIndex) => (
<Badge key={techIndex} variant="secondary" className="text-xs"> <Badge
key={techIndex}
variant="secondary"
className="text-xs"
>
{tech} {tech}
</Badge> </Badge>
))} ))}
@ -392,12 +462,12 @@ export default function DevelopmentConsulting() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
{packages.map((pkg, index) => ( {packages.map((pkg, index) => (
<Card <Card
key={index} key={index}
className={`relative overflow-hidden transition-all duration-500 hover-lift animate-scale-in ${ className={`relative overflow-hidden transition-all duration-500 hover-lift animate-scale-in ${
pkg.popular pkg.popular
? 'border-aethex-500 glow-blue scale-105' ? "border-aethex-500 glow-blue scale-105"
: 'border-border/50 hover:border-aethex-400/50' : "border-border/50 hover:border-aethex-400/50"
}`} }`}
style={{ animationDelay: `${index * 0.2}s` }} style={{ animationDelay: `${index * 0.2}s` }}
onClick={() => setActivePackage(index)} onClick={() => setActivePackage(index)}
@ -407,36 +477,45 @@ export default function DevelopmentConsulting() {
MOST POPULAR MOST POPULAR
</div> </div>
)} )}
<CardHeader className="text-center"> <CardHeader className="text-center">
<CardTitle className="text-2xl">{pkg.name}</CardTitle> <CardTitle className="text-2xl">{pkg.name}</CardTitle>
<CardDescription className="mt-2">{pkg.description}</CardDescription> <CardDescription className="mt-2">
{pkg.description}
</CardDescription>
<div className="mt-4"> <div className="mt-4">
<div className={`text-3xl font-bold bg-gradient-to-r ${pkg.color} bg-clip-text text-transparent`}> <div
className={`text-3xl font-bold bg-gradient-to-r ${pkg.color} bg-clip-text text-transparent`}
>
{pkg.price} {pkg.price}
</div> </div>
<div className="text-sm text-muted-foreground">{pkg.duration}</div> <div className="text-sm text-muted-foreground">
{pkg.duration}
</div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
{pkg.features.map((feature, featureIndex) => ( {pkg.features.map((feature, featureIndex) => (
<div key={featureIndex} className="flex items-center space-x-2 text-sm"> <div
key={featureIndex}
className="flex items-center space-x-2 text-sm"
>
<CheckCircle className="h-4 w-4 text-aethex-400 flex-shrink-0" /> <CheckCircle className="h-4 w-4 text-aethex-400 flex-shrink-0" />
<span>{feature}</span> <span>{feature}</span>
</div> </div>
))} ))}
</div> </div>
<Button <Button
asChild asChild
className={`w-full ${ className={`w-full ${
pkg.popular pkg.popular
? 'bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90' ? "bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"
: '' : ""
}`} }`}
variant={pkg.popular ? 'default' : 'outline'} variant={pkg.popular ? "default" : "outline"}
> >
<Link to="/contact">Get Started</Link> <Link to="/contact">Get Started</Link>
</Button> </Button>
@ -461,40 +540,51 @@ export default function DevelopmentConsulting() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-6xl mx-auto"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
{caseStudies.map((study, index) => ( {caseStudies.map((study, index) => (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up" className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
style={{ animationDelay: `${index * 0.2}s` }} style={{ animationDelay: `${index * 0.2}s` }}
> >
<CardHeader> <CardHeader>
<Badge variant="outline" className="w-fit mb-2">{study.client}</Badge> <Badge variant="outline" className="w-fit mb-2">
{study.client}
</Badge>
<CardTitle className="text-lg">{study.title}</CardTitle> <CardTitle className="text-lg">{study.title}</CardTitle>
<CardDescription className="text-sm"> <CardDescription className="text-sm">
<strong>Challenge:</strong> {study.challenge} <strong>Challenge:</strong> {study.challenge}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <div>
<h4 className="font-semibold text-sm mb-2">Solution:</h4> <h4 className="font-semibold text-sm mb-2">Solution:</h4>
<p className="text-sm text-muted-foreground">{study.solution}</p> <p className="text-sm text-muted-foreground">
{study.solution}
</p>
</div> </div>
<div> <div>
<h4 className="font-semibold text-sm mb-2">Results:</h4> <h4 className="font-semibold text-sm mb-2">Results:</h4>
<ul className="space-y-1"> <ul className="space-y-1">
{study.results.map((result, resultIndex) => ( {study.results.map((result, resultIndex) => (
<li key={resultIndex} className="flex items-center space-x-2 text-sm"> <li
key={resultIndex}
className="flex items-center space-x-2 text-sm"
>
<TrendingUp className="h-3 w-3 text-green-400 flex-shrink-0" /> <TrendingUp className="h-3 w-3 text-green-400 flex-shrink-0" />
<span>{result}</span> <span>{result}</span>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{study.tech.map((tech, techIndex) => ( {study.tech.map((tech, techIndex) => (
<Badge key={techIndex} variant="secondary" className="text-xs"> <Badge
key={techIndex}
variant="secondary"
className="text-xs"
>
{tech} {tech}
</Badge> </Badge>
))} ))}
@ -514,18 +604,28 @@ export default function DevelopmentConsulting() {
Ready to Accelerate Your Development? Ready to Accelerate Your Development?
</h2> </h2>
<p className="text-xl text-muted-foreground"> <p className="text-xl text-muted-foreground">
Let our experts analyze your current setup and provide a roadmap for optimal performance and scalability. Let our experts analyze your current setup and provide a roadmap
for optimal performance and scalability.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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 text-lg px-8 py-6"> <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-lg px-8 py-6"
>
<Link to="/contact" className="flex items-center space-x-2"> <Link to="/contact" className="flex items-center space-x-2">
<Lightbulb className="h-5 w-5" /> <Lightbulb className="h-5 w-5" />
<span>Get Free Consultation</span> <span>Get Free Consultation</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"> <Button
asChild
variant="outline"
size="lg"
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
>
<Link to="/docs">Download Case Studies</Link> <Link to="/docs">Download Case Studies</Link>
</Button> </Button>
</div> </div>
@ -534,17 +634,23 @@ export default function DevelopmentConsulting() {
<div className="text-center"> <div className="text-center">
<Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Confidential</h3> <h3 className="font-semibold">Confidential</h3>
<p className="text-sm text-muted-foreground">NDAs & security first</p> <p className="text-sm text-muted-foreground">
NDAs & security first
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Globe className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Globe className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Global Expertise</h3> <h3 className="font-semibold">Global Expertise</h3>
<p className="text-sm text-muted-foreground">World-class consultants</p> <p className="text-sm text-muted-foreground">
World-class consultants
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Trophy className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Trophy className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Proven Results</h3> <h3 className="font-semibold">Proven Results</h3>
<p className="text-sm text-muted-foreground">500+ successful projects</p> <p className="text-sm text-muted-foreground">
500+ successful projects
</p>
</div> </div>
</div> </div>
</div> </div>

150
client/pages/Documentation.tsx
View file

@ -1,16 +1,22 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast"; import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
BookOpen, BookOpen,
Code, Code,
Terminal, Terminal,
Download, Download,
ExternalLink, ExternalLink,
ArrowRight, ArrowRight,
Search, Search,
@ -18,7 +24,7 @@ import {
Video, Video,
Headphones, Headphones,
Github, Github,
Play Play,
} from "lucide-react"; } from "lucide-react";
export default function Documentation() { export default function Documentation() {
@ -45,7 +51,12 @@ export default function Documentation() {
icon: Play, icon: Play,
docs: 12, docs: 12,
color: "from-green-500 to-emerald-600", color: "from-green-500 to-emerald-600",
sections: ["Installation", "First Steps", "Basic Concepts", "Hello World"] sections: [
"Installation",
"First Steps",
"Basic Concepts",
"Hello World",
],
}, },
{ {
title: "API Reference", title: "API Reference",
@ -53,7 +64,7 @@ export default function Documentation() {
icon: Code, icon: Code,
docs: 45, docs: 45,
color: "from-blue-500 to-cyan-600", color: "from-blue-500 to-cyan-600",
sections: ["Authentication", "Endpoints", "SDKs", "Rate Limits"] sections: ["Authentication", "Endpoints", "SDKs", "Rate Limits"],
}, },
{ {
title: "Tutorials", title: "Tutorials",
@ -61,7 +72,12 @@ export default function Documentation() {
icon: BookOpen, icon: BookOpen,
docs: 28, docs: 28,
color: "from-purple-500 to-indigo-600", color: "from-purple-500 to-indigo-600",
sections: ["Game Development", "Web Apps", "Mobile Apps", "AI Integration"] sections: [
"Game Development",
"Web Apps",
"Mobile Apps",
"AI Integration",
],
}, },
{ {
title: "CLI Tools", title: "CLI Tools",
@ -69,26 +85,26 @@ export default function Documentation() {
icon: Terminal, icon: Terminal,
docs: 15, docs: 15,
color: "from-orange-500 to-red-600", color: "from-orange-500 to-red-600",
sections: ["Installation", "Commands", "Configuration", "Scripts"] sections: ["Installation", "Commands", "Configuration", "Scripts"],
} },
]; ];
const quickStart = [ const quickStart = [
{ {
title: "Install AeThex SDK", title: "Install AeThex SDK",
command: "npm install @aethex/sdk", command: "npm install @aethex/sdk",
description: "Get started with our JavaScript SDK" description: "Get started with our JavaScript SDK",
}, },
{ {
title: "Initialize Project", title: "Initialize Project",
command: "aethex init my-project", command: "aethex init my-project",
description: "Create a new AeThex project" description: "Create a new AeThex project",
}, },
{ {
title: "Deploy to Cloud", title: "Deploy to Cloud",
command: "aethex deploy --env production", command: "aethex deploy --env production",
description: "Deploy your application to AeThex Cloud" description: "Deploy your application to AeThex Cloud",
} },
]; ];
const resources = [ const resources = [
@ -98,7 +114,7 @@ export default function Documentation() {
icon: Video, icon: Video,
count: "50+ videos", count: "50+ videos",
link: "/tutorials", link: "/tutorials",
color: "from-red-500 to-pink-600" color: "from-red-500 to-pink-600",
}, },
{ {
title: "Podcast Series", title: "Podcast Series",
@ -106,7 +122,7 @@ export default function Documentation() {
icon: Headphones, icon: Headphones,
count: "20+ episodes", count: "20+ episodes",
link: "/podcast", link: "/podcast",
color: "from-purple-500 to-indigo-600" color: "from-purple-500 to-indigo-600",
}, },
{ {
title: "Code Examples", title: "Code Examples",
@ -114,7 +130,7 @@ export default function Documentation() {
icon: Github, icon: Github,
count: "100+ repos", count: "100+ repos",
link: "/examples", link: "/examples",
color: "from-green-500 to-emerald-600" color: "from-green-500 to-emerald-600",
}, },
{ {
title: "Downloads", title: "Downloads",
@ -122,12 +138,18 @@ export default function Documentation() {
icon: Download, icon: Download,
count: "Latest releases", count: "Latest releases",
link: "/downloads", link: "/downloads",
color: "from-blue-500 to-cyan-600" color: "from-blue-500 to-cyan-600",
} },
]; ];
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Loading Documentation..." showProgress={true} duration={1000} />; return (
<LoadingScreen
message="Loading Documentation..."
showProgress={true}
duration={1000}
/>
);
} }
return ( return (
@ -137,18 +159,23 @@ export default function Documentation() {
<section className="relative py-20 lg:py-32"> <section className="relative py-20 lg:py-32">
<div className="container mx-auto px-4 text-center relative z-10"> <div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-4xl mx-auto space-y-8">
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"> <Badge
variant="outline"
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
>
<FileText className="h-3 w-3 mr-1" /> <FileText className="h-3 w-3 mr-1" />
Documentation Center Documentation Center
</Badge> </Badge>
<h1 className="text-4xl lg:text-6xl font-bold leading-tight"> <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
<span className="text-gradient-purple">Developer Documentation</span> <span className="text-gradient-purple">
Developer Documentation
</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Comprehensive guides, API references, and tutorials to help you build Comprehensive guides, API references, and tutorials to help you
amazing applications with AeThex technologies. build amazing applications with AeThex technologies.
</p> </p>
{/* Search Bar */} {/* Search Bar */}
@ -182,20 +209,26 @@ export default function Documentation() {
{docCategories.map((category, index) => { {docCategories.map((category, index) => {
const Icon = category.icon; const Icon = category.icon;
return ( return (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in" className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
<CardHeader> <CardHeader>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className={`p-3 rounded-lg bg-gradient-to-r ${category.color}`}> <div
className={`p-3 rounded-lg bg-gradient-to-r ${category.color}`}
>
<Icon className="h-6 w-6 text-white" /> <Icon className="h-6 w-6 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-xl">{category.title}</CardTitle> <CardTitle className="text-xl">
<Badge variant="outline">{category.docs} docs</Badge> {category.title}
</CardTitle>
<Badge variant="outline">
{category.docs} docs
</Badge>
</div> </div>
<CardDescription className="mt-1"> <CardDescription className="mt-1">
{category.description} {category.description}
@ -216,9 +249,11 @@ export default function Documentation() {
</Button> </Button>
))} ))}
</div> </div>
<Button asChild className="w-full"> <Button asChild className="w-full">
<Link to={`/docs/${category.title.toLowerCase().replace(' ', '-')}`}> <Link
to={`/docs/${category.title.toLowerCase().replace(" ", "-")}`}
>
View {category.title} View {category.title}
<ArrowRight className="h-4 w-4 ml-2" /> <ArrowRight className="h-4 w-4 ml-2" />
</Link> </Link>
@ -245,7 +280,7 @@ export default function Documentation() {
<div className="max-w-3xl mx-auto space-y-6"> <div className="max-w-3xl mx-auto space-y-6">
{quickStart.map((step, index) => ( {quickStart.map((step, index) => (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right" className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right"
style={{ animationDelay: `${index * 0.2}s` }} style={{ animationDelay: `${index * 0.2}s` }}
@ -256,11 +291,17 @@ export default function Documentation() {
{index + 1} {index + 1}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h3 className="font-semibold text-lg text-gradient mb-2">{step.title}</h3> <h3 className="font-semibold text-lg text-gradient mb-2">
<p className="text-sm text-muted-foreground mb-3">{step.description}</p> {step.title}
</h3>
<p className="text-sm text-muted-foreground mb-3">
{step.description}
</p>
<div className="bg-background/50 border border-border/30 rounded-lg p-3 font-mono text-sm"> <div className="bg-background/50 border border-border/30 rounded-lg p-3 font-mono text-sm">
<span className="text-muted-foreground">$ </span> <span className="text-muted-foreground">$ </span>
<span className="text-aethex-400">{step.command}</span> <span className="text-aethex-400">
{step.command}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -287,20 +328,26 @@ export default function Documentation() {
{resources.map((resource, index) => { {resources.map((resource, index) => {
const Icon = resource.icon; const Icon = resource.icon;
return ( return (
<Card <Card
key={index} key={index}
className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in" className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
<CardHeader> <CardHeader>
<div className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}> <div
className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}
>
<Icon className="h-8 w-8 text-white" /> <Icon className="h-8 w-8 text-white" />
</div> </div>
<CardTitle className="text-lg">{resource.title}</CardTitle> <CardTitle className="text-lg">
{resource.title}
</CardTitle>
<CardDescription>{resource.description}</CardDescription> <CardDescription>{resource.description}</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Badge variant="outline" className="mb-4">{resource.count}</Badge> <Badge variant="outline" className="mb-4">
{resource.count}
</Badge>
<Button asChild size="sm" className="w-full"> <Button asChild size="sm" className="w-full">
<Link to={resource.link}> <Link to={resource.link}>
Explore Explore
@ -323,19 +370,28 @@ export default function Documentation() {
Need Help Getting Started? Need Help Getting Started?
</h2> </h2>
<p className="text-xl text-muted-foreground"> <p className="text-xl text-muted-foreground">
Our documentation is continuously updated. Can't find what you're looking for? Our documentation is continuously updated. Can't find what
Our support team is here to help. you're looking for? Our support team is here to help.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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 text-lg px-8 py-6"> <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-lg px-8 py-6"
>
<Link to="/support" className="flex items-center space-x-2"> <Link to="/support" className="flex items-center space-x-2">
<BookOpen className="h-5 w-5" /> <BookOpen className="h-5 w-5" />
<span>Get Support</span> <span>Get Support</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"> <Button
asChild
variant="outline"
size="lg"
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
>
<Link to="/community">Join Community</Link> <Link to="/community">Join Community</Link>
</Button> </Button>
</div> </div>

241
client/pages/GameDevelopment.tsx
View file

@ -1,18 +1,24 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast"; import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
Gamepad2, Gamepad2,
Code, Code,
Sparkles, Sparkles,
Zap, Zap,
Users, Users,
Trophy, Trophy,
Rocket, Rocket,
Target, Target,
Star, Star,
@ -26,7 +32,7 @@ import {
Palette, Palette,
Volume2, Volume2,
Globe, Globe,
Smartphone Smartphone,
} from "lucide-react"; } from "lucide-react";
export default function GameDevelopment() { export default function GameDevelopment() {
@ -52,38 +58,58 @@ export default function GameDevelopment() {
title: "Custom Game Development", title: "Custom Game Development",
description: "End-to-end game creation from concept to deployment", description: "End-to-end game creation from concept to deployment",
icon: Gamepad2, icon: Gamepad2,
features: ["Full-stack development", "Multi-platform support", "Performance optimization", "Live deployment"], features: [
"Full-stack development",
"Multi-platform support",
"Performance optimization",
"Live deployment",
],
timeline: "3-12 months", timeline: "3-12 months",
price: "Custom pricing", price: "Custom pricing",
color: "from-blue-500 to-purple-600" color: "from-blue-500 to-purple-600",
}, },
{ {
title: "Roblox Development", title: "Roblox Development",
description: "Specialized Roblox game creation and scripting", description: "Specialized Roblox game creation and scripting",
icon: Code, icon: Code,
features: ["Lua scripting", "UI/UX design", "Monetization setup", "Analytics integration"], features: [
"Lua scripting",
"UI/UX design",
"Monetization setup",
"Analytics integration",
],
timeline: "2-8 weeks", timeline: "2-8 weeks",
price: "Starting at $2,500", price: "Starting at $2,500",
color: "from-green-500 to-blue-600" color: "from-green-500 to-blue-600",
}, },
{ {
title: "Game Porting", title: "Game Porting",
description: "Adapt existing games to new platforms and devices", description: "Adapt existing games to new platforms and devices",
icon: Smartphone, icon: Smartphone,
features: ["Cross-platform compatibility", "Performance tuning", "Platform-specific features", "Quality assurance"], features: [
"Cross-platform compatibility",
"Performance tuning",
"Platform-specific features",
"Quality assurance",
],
timeline: "4-16 weeks", timeline: "4-16 weeks",
price: "Starting at $5,000", price: "Starting at $5,000",
color: "from-orange-500 to-red-600" color: "from-orange-500 to-red-600",
}, },
{ {
title: "Game Optimization", title: "Game Optimization",
description: "Enhance performance and user experience of existing games", description: "Enhance performance and user experience of existing games",
icon: Zap, icon: Zap,
features: ["Performance profiling", "Memory optimization", "Load time reduction", "Frame rate improvement"], features: [
"Performance profiling",
"Memory optimization",
"Load time reduction",
"Frame rate improvement",
],
timeline: "2-6 weeks", timeline: "2-6 weeks",
price: "Starting at $1,500", price: "Starting at $1,500",
color: "from-purple-500 to-pink-600" color: "from-purple-500 to-pink-600",
} },
]; ];
const technologies = [ const technologies = [
@ -101,11 +127,12 @@ export default function GameDevelopment() {
const portfolio = [ const portfolio = [
{ {
title: "Neural Combat Arena", title: "Neural Combat Arena",
description: "AI-powered multiplayer battle arena with dynamic environments", description:
"AI-powered multiplayer battle arena with dynamic environments",
tech: ["Unity", "C#", "Photon"], tech: ["Unity", "C#", "Photon"],
players: "10K+ active", players: "10K+ active",
rating: 4.8, rating: 4.8,
category: "Action" category: "Action",
}, },
{ {
title: "Quantum Puzzle Lab", title: "Quantum Puzzle Lab",
@ -113,7 +140,7 @@ export default function GameDevelopment() {
tech: ["Custom Engine", "C++", "OpenGL"], tech: ["Custom Engine", "C++", "OpenGL"],
players: "25K+ downloads", players: "25K+ downloads",
rating: 4.9, rating: 4.9,
category: "Puzzle" category: "Puzzle",
}, },
{ {
title: "Roblox Tycoon Empire", title: "Roblox Tycoon Empire",
@ -121,43 +148,63 @@ export default function GameDevelopment() {
tech: ["Roblox Studio", "Lua", "DataStore"], tech: ["Roblox Studio", "Lua", "DataStore"],
players: "100K+ visits", players: "100K+ visits",
rating: 4.7, rating: 4.7,
category: "Simulation" category: "Simulation",
} },
]; ];
const process = [ const process = [
{ {
step: 1, step: 1,
title: "Discovery & Planning", title: "Discovery & Planning",
description: "We analyze your vision, target audience, and technical requirements", description:
"We analyze your vision, target audience, and technical requirements",
duration: "1-2 weeks", duration: "1-2 weeks",
deliverables: ["Project roadmap", "Technical specifications", "Art direction"] deliverables: [
"Project roadmap",
"Technical specifications",
"Art direction",
],
}, },
{ {
step: 2, step: 2,
title: "Prototyping", title: "Prototyping",
description: "Create playable prototypes to validate core mechanics", description: "Create playable prototypes to validate core mechanics",
duration: "2-4 weeks", duration: "2-4 weeks",
deliverables: ["Playable prototype", "Mechanics validation", "User feedback analysis"] deliverables: [
"Playable prototype",
"Mechanics validation",
"User feedback analysis",
],
}, },
{ {
step: 3, step: 3,
title: "Production", title: "Production",
description: "Full development with regular milestones and client reviews", description:
"Full development with regular milestones and client reviews",
duration: "8-40 weeks", duration: "8-40 weeks",
deliverables: ["Weekly builds", "Progress reports", "Quality assurance"] deliverables: ["Weekly builds", "Progress reports", "Quality assurance"],
}, },
{ {
step: 4, step: 4,
title: "Launch & Support", title: "Launch & Support",
description: "Deployment, marketing support, and ongoing maintenance", description: "Deployment, marketing support, and ongoing maintenance",
duration: "Ongoing", duration: "Ongoing",
deliverables: ["Live deployment", "Performance monitoring", "Update releases"] deliverables: [
} "Live deployment",
"Performance monitoring",
"Update releases",
],
},
]; ];
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Loading Game Development services..." showProgress={true} duration={1000} />; return (
<LoadingScreen
message="Loading Game Development services..."
showProgress={true}
duration={1000}
/>
);
} }
return ( return (
@ -175,39 +222,54 @@ export default function GameDevelopment() {
top: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`, animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s`, animationDuration: `${3 + Math.random() * 2}s`,
fontSize: `${8 + Math.random() * 6}px` fontSize: `${8 + Math.random() * 6}px`,
}} }}
> >
{'🎮🕹️🎯🏆'.charAt(Math.floor(Math.random() * 4))} {"🎮🕹️🎯🏆".charAt(Math.floor(Math.random() * 4))}
</div> </div>
))} ))}
</div> </div>
<div className="container mx-auto px-4 text-center relative z-10"> <div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-4xl mx-auto space-y-8">
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"> <Badge
variant="outline"
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
>
<Gamepad2 className="h-3 w-3 mr-1" /> <Gamepad2 className="h-3 w-3 mr-1" />
Game Development Division Game Development Division
</Badge> </Badge>
<h1 className="text-4xl lg:text-6xl font-bold leading-tight"> <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
<span className="text-gradient-purple">Crafting Digital Worlds</span> <span className="text-gradient-purple">
Crafting Digital Worlds
</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
From concept to launch, we create immersive gaming experiences that captivate players From concept to launch, we create immersive gaming experiences
and push the boundaries of interactive entertainment. that captivate players and push the boundaries of interactive
entertainment.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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"> <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="/contact" className="flex items-center space-x-2"> <Link to="/contact" className="flex items-center space-x-2">
<Rocket className="h-5 w-5" /> <Rocket className="h-5 w-5" />
<span>Start Your Project</span> <span>Start Your Project</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-border/50 hover-lift"> <Button
asChild
variant="outline"
size="lg"
className="border-border/50 hover-lift"
>
<Link to="/docs">View Portfolio</Link> <Link to="/docs">View Portfolio</Link>
</Button> </Button>
</div> </div>
@ -232,10 +294,12 @@ export default function GameDevelopment() {
const Icon = service.icon; const Icon = service.icon;
const isActive = activeService === index; const isActive = activeService === index;
return ( return (
<Card <Card
key={index} key={index}
className={`relative overflow-hidden transition-all duration-500 hover-lift cursor-pointer animate-scale-in ${ className={`relative overflow-hidden transition-all duration-500 hover-lift cursor-pointer animate-scale-in ${
isActive ? 'border-aethex-500 glow-blue scale-105' : 'border-border/50 hover:border-aethex-400/50' isActive
? "border-aethex-500 glow-blue scale-105"
: "border-border/50 hover:border-aethex-400/50"
}`} }`}
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
onClick={() => setActiveService(index)} onClick={() => setActiveService(index)}
@ -243,11 +307,15 @@ export default function GameDevelopment() {
<CardHeader> <CardHeader>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className={`p-3 rounded-lg bg-gradient-to-r ${service.color} transition-all duration-300 hover:scale-110`}> <div
className={`p-3 rounded-lg bg-gradient-to-r ${service.color} transition-all duration-300 hover:scale-110`}
>
<Icon className="h-6 w-6 text-white" /> <Icon className="h-6 w-6 text-white" />
</div> </div>
<div> <div>
<CardTitle className={`text-xl ${isActive ? 'text-gradient' : ''}`}> <CardTitle
className={`text-xl ${isActive ? "text-gradient" : ""}`}
>
{service.title} {service.title}
</CardTitle> </CardTitle>
<CardDescription className="mt-1"> <CardDescription className="mt-1">
@ -260,13 +328,16 @@ export default function GameDevelopment() {
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{service.features.map((feature, featureIndex) => ( {service.features.map((feature, featureIndex) => (
<div key={featureIndex} className="flex items-center space-x-2 text-sm"> <div
key={featureIndex}
className="flex items-center space-x-2 text-sm"
>
<CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" /> <CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" />
<span>{feature}</span> <span>{feature}</span>
</div> </div>
))} ))}
</div> </div>
<div className="flex justify-between items-center pt-4 border-t border-border/30"> <div className="flex justify-between items-center pt-4 border-t border-border/30">
<div className="flex items-center space-x-2 text-sm text-muted-foreground"> <div className="flex items-center space-x-2 text-sm text-muted-foreground">
<Clock className="h-4 w-4" /> <Clock className="h-4 w-4" />
@ -301,7 +372,7 @@ export default function GameDevelopment() {
{technologies.map((tech, index) => { {technologies.map((tech, index) => {
const Icon = tech.icon; const Icon = tech.icon;
return ( return (
<Card <Card
key={index} key={index}
className="bg-card/30 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in" className="bg-card/30 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.05}s` }} style={{ animationDelay: `${index * 0.05}s` }}
@ -334,7 +405,7 @@ export default function GameDevelopment() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
{portfolio.map((project, index) => ( {portfolio.map((project, index) => (
<Card <Card
key={index} key={index}
className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up" className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
@ -344,31 +415,39 @@ export default function GameDevelopment() {
{project.category} {project.category}
</Badge> </Badge>
</div> </div>
<CardHeader> <CardHeader>
<div className="space-y-2"> <div className="space-y-2">
<CardTitle className="text-lg">{project.title}</CardTitle> <CardTitle className="text-lg">{project.title}</CardTitle>
<CardDescription>{project.description}</CardDescription> <CardDescription>{project.description}</CardDescription>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{project.tech.map((tech, techIndex) => ( {project.tech.map((tech, techIndex) => (
<Badge key={techIndex} variant="secondary" className="text-xs"> <Badge
key={techIndex}
variant="secondary"
className="text-xs"
>
{tech} {tech}
</Badge> </Badge>
))} ))}
</div> </div>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Users className="h-4 w-4 text-muted-foreground" /> <Users className="h-4 w-4 text-muted-foreground" />
<span className="text-sm text-muted-foreground">{project.players}</span> <span className="text-sm text-muted-foreground">
{project.players}
</span>
</div> </div>
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
<Star className="h-4 w-4 text-yellow-500" /> <Star className="h-4 w-4 text-yellow-500" />
<span className="text-sm font-semibold">{project.rating}</span> <span className="text-sm font-semibold">
{project.rating}
</span>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@ -392,7 +471,7 @@ export default function GameDevelopment() {
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
{process.map((phase, index) => ( {process.map((phase, index) => (
<div <div
key={index} key={index}
className="relative flex items-start mb-12 animate-slide-right" className="relative flex items-start mb-12 animate-slide-right"
style={{ animationDelay: `${index * 0.2}s` }} style={{ animationDelay: `${index * 0.2}s` }}
@ -401,7 +480,7 @@ export default function GameDevelopment() {
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue flex items-center justify-center text-white font-bold mr-6 glow-blue"> <div className="flex-shrink-0 w-12 h-12 rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue flex items-center justify-center text-white font-bold mr-6 glow-blue">
{phase.step} {phase.step}
</div> </div>
{/* Content */} {/* Content */}
<div className="flex-1"> <div className="flex-1">
<Card className="bg-card/50 border-border/50 hover:border-aethex-400/50 transition-all duration-300"> <Card className="bg-card/50 border-border/50 hover:border-aethex-400/50 transition-all duration-300">
@ -415,11 +494,17 @@ export default function GameDevelopment() {
{phase.description} {phase.description}
</p> </p>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{phase.deliverables.map((deliverable, delIndex) => ( {phase.deliverables.map(
<Badge key={delIndex} variant="outline" className="text-xs"> (deliverable, delIndex) => (
{deliverable} <Badge
</Badge> key={delIndex}
))} variant="outline"
className="text-xs"
>
{deliverable}
</Badge>
),
)}
</div> </div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
@ -432,7 +517,7 @@ export default function GameDevelopment() {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* Connector Line */} {/* Connector Line */}
{index < process.length - 1 && ( {index < process.length - 1 && (
<div className="absolute left-6 top-12 w-0.5 h-12 bg-gradient-to-b from-aethex-400 to-transparent" /> <div className="absolute left-6 top-12 w-0.5 h-12 bg-gradient-to-b from-aethex-400 to-transparent" />
@ -451,18 +536,28 @@ export default function GameDevelopment() {
Ready to Build Your Game? Ready to Build Your Game?
</h2> </h2>
<p className="text-xl text-muted-foreground"> <p className="text-xl text-muted-foreground">
Let's transform your vision into an engaging gaming experience that players will love. Let's transform your vision into an engaging gaming experience
that players will love.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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 text-lg px-8 py-6"> <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-lg px-8 py-6"
>
<Link to="/contact" className="flex items-center space-x-2"> <Link to="/contact" className="flex items-center space-x-2">
<Play className="h-5 w-5" /> <Play className="h-5 w-5" />
<span>Start Your Project</span> <span>Start Your Project</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"> <Button
asChild
variant="outline"
size="lg"
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
>
<Link to="/onboarding">Join Our Team</Link> <Link to="/onboarding">Join Our Team</Link>
</Button> </Button>
</div> </div>
@ -471,17 +566,23 @@ export default function GameDevelopment() {
<div className="text-center"> <div className="text-center">
<Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Enterprise Security</h3> <h3 className="font-semibold">Enterprise Security</h3>
<p className="text-sm text-muted-foreground">Your IP is protected</p> <p className="text-sm text-muted-foreground">
Your IP is protected
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Globe className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Globe className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Global Reach</h3> <h3 className="font-semibold">Global Reach</h3>
<p className="text-sm text-muted-foreground">Worldwide deployment</p> <p className="text-sm text-muted-foreground">
Worldwide deployment
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Trophy className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Trophy className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Award Winning</h3> <h3 className="font-semibold">Award Winning</h3>
<p className="text-sm text-muted-foreground">Industry recognition</p> <p className="text-sm text-muted-foreground">
Industry recognition
</p>
</div> </div>
</div> </div>
</div> </div>

130
client/pages/Index.tsx
View file

@ -1,7 +1,13 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { SkeletonStats, SkeletonUserPath } from "@/components/Skeleton"; import { SkeletonStats, SkeletonUserPath } from "@/components/Skeleton";
@ -17,7 +23,7 @@ import {
Zap, Zap,
Target, Target,
Users, Users,
TrendingUp TrendingUp,
} from "lucide-react"; } from "lucide-react";
export default function Index() { export default function Index() {
@ -34,7 +40,7 @@ export default function Index() {
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
setActiveSection(prev => (prev + 1) % 4); setActiveSection((prev) => (prev + 1) % 4);
}, 4000); }, 4000);
return () => clearInterval(interval); return () => clearInterval(interval);
@ -45,37 +51,43 @@ export default function Index() {
title: "Neural Networks", title: "Neural Networks",
description: "Advanced AI-powered development tools", description: "Advanced AI-powered development tools",
icon: Zap, icon: Zap,
color: "from-blue-500 to-purple-600" color: "from-blue-500 to-purple-600",
}, },
{ {
title: "Quantum Computing", title: "Quantum Computing",
description: "Next-generation processing capabilities", description: "Next-generation processing capabilities",
icon: Target, icon: Target,
color: "from-purple-500 to-pink-600" color: "from-purple-500 to-pink-600",
}, },
{ {
title: "Blockchain Integration", title: "Blockchain Integration",
description: "Secure, decentralized solutions", description: "Secure, decentralized solutions",
icon: Users, icon: Users,
color: "from-green-500 to-blue-600" color: "from-green-500 to-blue-600",
}, },
{ {
title: "Cloud Infrastructure", title: "Cloud Infrastructure",
description: "Scalable, global deployment systems", description: "Scalable, global deployment systems",
icon: TrendingUp, icon: TrendingUp,
color: "from-orange-500 to-red-600" color: "from-orange-500 to-red-600",
} },
]; ];
const achievements = [ const achievements = [
{ metric: "10K+", label: "Active Developers" }, { metric: "10K+", label: "Active Developers" },
{ metric: "500+", label: "Projects Deployed" }, { metric: "500+", label: "Projects Deployed" },
{ metric: "99.99%", label: "System Uptime" }, { metric: "99.99%", label: "System Uptime" },
{ metric: "24/7", label: "Global Support" } { metric: "24/7", label: "Global Support" },
]; ];
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Initializing AeThex OS..." showProgress={true} duration={1200} />; return (
<LoadingScreen
message="Initializing AeThex OS..."
showProgress={true}
duration={1200}
/>
);
} }
return ( return (
@ -109,7 +121,7 @@ export default function Index() {
top: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 5}s`, animationDelay: `${Math.random() * 5}s`,
animationDuration: `${4 + Math.random() * 3}s`, animationDuration: `${4 + Math.random() * 3}s`,
clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
}} }}
/> />
))} ))}
@ -129,8 +141,9 @@ export default function Index() {
Crafting Digital Realities Crafting Digital Realities
</h2> </h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto animate-slide-up"> <p className="text-lg text-muted-foreground max-w-2xl mx-auto animate-slide-up">
Where innovation meets execution. We build the future through advanced Where innovation meets execution. We build the future through
technology, creative solutions, and limitless possibilities. advanced technology, creative solutions, and limitless
possibilities.
</p> </p>
</div> </div>
</div> </div>
@ -145,13 +158,15 @@ export default function Index() {
key={index} key={index}
className={`relative overflow-hidden border-2 transition-all duration-500 hover-lift cursor-pointer group ${ className={`relative overflow-hidden border-2 transition-all duration-500 hover-lift cursor-pointer group ${
isActive isActive
? 'border-aethex-500 glow-blue scale-105' ? "border-aethex-500 glow-blue scale-105"
: 'border-border/30 hover:border-aethex-400/50' : "border-border/30 hover:border-aethex-400/50"
}`} }`}
onClick={() => setActiveSection(index)} onClick={() => setActiveSection(index)}
> >
<CardContent className="p-6 text-center space-y-3"> <CardContent className="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`}> <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" /> <Icon className="h-6 w-6 text-white" />
</div> </div>
<h3 className="font-semibold text-sm">{feature.title}</h3> <h3 className="font-semibold text-sm">{feature.title}</h3>
@ -166,14 +181,26 @@ export default function Index() {
{/* Action Buttons */} {/* Action Buttons */}
<div className="flex flex-col sm:flex-row justify-center gap-6 animate-slide-up"> <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-lg px-8 py-6"> <Button
<Link to="/onboarding" className="flex items-center space-x-2 group"> 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-lg px-8 py-6"
>
<Link
to="/onboarding"
className="flex items-center space-x-2 group"
>
<Sparkles className="h-5 w-5" /> <Sparkles className="h-5 w-5" />
<span>Start Your Journey</span> <span>Start Your Journey</span>
<ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-2" /> <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-2" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"> <Button
asChild
variant="outline"
size="lg"
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
>
<Link to="/dashboard">Explore Dashboard</Link> <Link to="/dashboard">Explore Dashboard</Link>
</Button> </Button>
</div> </div>
@ -228,19 +255,44 @@ export default function Index() {
Next-Generation Technology Stack Next-Generation Technology Stack
</h2> </h2>
<p className="text-lg text-muted-foreground"> <p className="text-lg text-muted-foreground">
Built on cutting-edge frameworks and powered by advanced algorithms Built on cutting-edge frameworks and powered by advanced
algorithms
</p> </p>
</div> </div>
{/* Interactive Technology Grid */} {/* Interactive Technology Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
{[ {[
{ name: "Quantum AI", status: "Active", color: "from-purple-500 to-blue-600" }, {
{ name: "Neural Networks", status: "Optimizing", color: "from-blue-500 to-green-600" }, name: "Quantum AI",
{ name: "Blockchain Core", status: "Secure", color: "from-green-500 to-yellow-600" }, status: "Active",
{ name: "Cloud Matrix", status: "Scaling", color: "from-yellow-500 to-red-600" }, color: "from-purple-500 to-blue-600",
{ name: "Data Fusion", status: "Processing", color: "from-red-500 to-purple-600" }, },
{ name: "Edge Computing", status: "Deployed", color: "from-purple-500 to-pink-600" } {
name: "Neural Networks",
status: "Optimizing",
color: "from-blue-500 to-green-600",
},
{
name: "Blockchain Core",
status: "Secure",
color: "from-green-500 to-yellow-600",
},
{
name: "Cloud Matrix",
status: "Scaling",
color: "from-yellow-500 to-red-600",
},
{
name: "Data Fusion",
status: "Processing",
color: "from-red-500 to-purple-600",
},
{
name: "Edge Computing",
status: "Deployed",
color: "from-purple-500 to-pink-600",
},
].map((tech, index) => ( ].map((tech, index) => (
<Card <Card
key={index} key={index}
@ -252,9 +304,13 @@ export default function Index() {
<h3 className="font-semibold text-gradient group-hover:animate-pulse"> <h3 className="font-semibold text-gradient group-hover:animate-pulse">
{tech.name} {tech.name}
</h3> </h3>
<div className={`w-3 h-3 rounded-full bg-gradient-to-r ${tech.color} animate-pulse`} /> <div
className={`w-3 h-3 rounded-full bg-gradient-to-r ${tech.color} animate-pulse`}
/>
</div> </div>
<p className="text-sm text-muted-foreground">{tech.status}</p> <p className="text-sm text-muted-foreground">
{tech.status}
</p>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-aethex-400/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" /> <div className="absolute inset-0 bg-gradient-to-r from-transparent via-aethex-400/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
</CardContent> </CardContent>
</Card> </Card>
@ -267,14 +323,26 @@ export default function Index() {
Ready to Build the Future? Ready to Build the Future?
</h3> </h3>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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"> <Button
<Link to="/onboarding" className="flex items-center space-x-2 group"> 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" /> <Sparkles className="h-5 w-5" />
<span>Join AeThex</span> <span>Join AeThex</span>
<ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" /> <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift interactive-scale"> <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> <Link to="/dashboard">Explore Platform</Link>
</Button> </Button>
</div> </div>

73
client/pages/Login.tsx
View file

@ -2,20 +2,26 @@ import { useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { import {
LogIn, LogIn,
ArrowRight, ArrowRight,
Shield, Shield,
Sparkles, Sparkles,
Github, Github,
Mail, Mail,
Lock, Lock,
User User,
} from "lucide-react"; } from "lucide-react";
export default function Login() { export default function Login() {
@ -27,7 +33,7 @@ export default function Login() {
const handleLogin = async (e: React.FormEvent) => { const handleLogin = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setIsLoading(true); setIsLoading(true);
// Simulate login process // Simulate login process
setTimeout(() => { setTimeout(() => {
setIsLoading(false); setIsLoading(false);
@ -45,7 +51,13 @@ export default function Login() {
}; };
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Authenticating your account..." showProgress={true} duration={2000} />; return (
<LoadingScreen
message="Authenticating your account..."
showProgress={true}
duration={2000}
/>
);
} }
return ( return (
@ -62,7 +74,7 @@ export default function Login() {
left: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`, animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s` animationDuration: `${3 + Math.random() * 2}s`,
}} }}
/> />
))} ))}
@ -76,30 +88,35 @@ export default function Login() {
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<CardTitle className="text-2xl text-gradient-purple">Welcome Back</CardTitle> <CardTitle className="text-2xl text-gradient-purple">
Welcome Back
</CardTitle>
<CardDescription> <CardDescription>
Sign in to your AeThex account to access the dashboard Sign in to your AeThex account to access the dashboard
</CardDescription> </CardDescription>
</div> </div>
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400"> <Badge
variant="outline"
className="border-aethex-400/50 text-aethex-400"
>
<Sparkles className="h-3 w-3 mr-1" /> <Sparkles className="h-3 w-3 mr-1" />
Secure Login Secure Login
</Badge> </Badge>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{/* Social Login Buttons */} {/* Social Login Buttons */}
<div className="space-y-3"> <div className="space-y-3">
<Button <Button
variant="outline" variant="outline"
className="w-full hover-lift interactive-scale" className="w-full hover-lift interactive-scale"
onClick={() => handleSocialLogin("github")} onClick={() => handleSocialLogin("github")}
> >
<Github className="h-4 w-4 mr-2" /> <Github className="h-4 w-4 mr-2" />
Continue with GitHub Continue with GitHub
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
className="w-full hover-lift interactive-scale" className="w-full hover-lift interactive-scale"
onClick={() => handleSocialLogin("google")} onClick={() => handleSocialLogin("google")}
> >
@ -113,7 +130,9 @@ export default function Login() {
<div className="w-full border-t border-border/50" /> <div className="w-full border-t border-border/50" />
</div> </div>
<div className="relative flex justify-center text-xs uppercase"> <div className="relative flex justify-center text-xs uppercase">
<span className="bg-background px-2 text-muted-foreground">Or continue with email</span> <span className="bg-background px-2 text-muted-foreground">
Or continue with email
</span>
</div> </div>
</div> </div>
@ -157,16 +176,22 @@ export default function Login() {
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm">
<label className="flex items-center space-x-2 cursor-pointer"> <label className="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" className="rounded border-border/50" /> <input
type="checkbox"
className="rounded border-border/50"
/>
<span className="text-muted-foreground">Remember me</span> <span className="text-muted-foreground">Remember me</span>
</label> </label>
<button type="button" className="text-aethex-400 hover:underline"> <button
type="button"
className="text-aethex-400 hover:underline"
>
Forgot password? Forgot password?
</button> </button>
</div> </div>
<Button <Button
type="submit" type="submit"
className="w-full bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue" className="w-full bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale glow-blue"
disabled={!email || !password} disabled={!email || !password}
> >
@ -179,7 +204,7 @@ export default function Login() {
<div className="text-center pt-4"> <div className="text-center pt-4">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Don't have an account?{" "} Don't have an account?{" "}
<button <button
onClick={() => navigate("/onboarding")} onClick={() => navigate("/onboarding")}
className="text-aethex-400 hover:underline font-medium" className="text-aethex-400 hover:underline font-medium"
> >

291
client/pages/MentorshipPrograms.tsx
View file

@ -1,16 +1,22 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast"; import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
Users, Users,
BookOpen, BookOpen,
Star, Star,
Trophy, Trophy,
Target, Target,
ArrowRight, ArrowRight,
CheckCircle, CheckCircle,
@ -25,7 +31,7 @@ import {
Calendar, Calendar,
MessageCircle, MessageCircle,
Video, Video,
GraduationCap GraduationCap,
} from "lucide-react"; } from "lucide-react";
export default function MentorshipPrograms() { export default function MentorshipPrograms() {
@ -49,7 +55,8 @@ export default function MentorshipPrograms() {
const programs = [ const programs = [
{ {
title: "Individual Mentorship", title: "Individual Mentorship",
description: "One-on-one guidance tailored to your specific goals and challenges", description:
"One-on-one guidance tailored to your specific goals and challenges",
icon: User, icon: User,
duration: "3-12 months", duration: "3-12 months",
commitment: "2 hours/week", commitment: "2 hours/week",
@ -60,14 +67,15 @@ export default function MentorshipPrograms() {
"Code reviews & feedback", "Code reviews & feedback",
"Career guidance", "Career guidance",
"Portfolio development", "Portfolio development",
"24/7 chat support" "24/7 chat support",
], ],
color: "from-blue-500 to-purple-600", color: "from-blue-500 to-purple-600",
participants: "1:1" participants: "1:1",
}, },
{ {
title: "Group Workshops", title: "Group Workshops",
description: "Collaborative learning with peers in structured group sessions", description:
"Collaborative learning with peers in structured group sessions",
icon: Users, icon: Users,
duration: "8-16 weeks", duration: "8-16 weeks",
commitment: "4 hours/week", commitment: "4 hours/week",
@ -78,14 +86,15 @@ export default function MentorshipPrograms() {
"Project-based learning", "Project-based learning",
"Industry guest speakers", "Industry guest speakers",
"Team challenges", "Team challenges",
"Group portfolio projects" "Group portfolio projects",
], ],
color: "from-green-500 to-blue-600", color: "from-green-500 to-blue-600",
participants: "6-12 people" participants: "6-12 people",
}, },
{ {
title: "Intensive Boot Camps", title: "Intensive Boot Camps",
description: "Fast-track your skills with immersive, intensive training programs", description:
"Fast-track your skills with immersive, intensive training programs",
icon: Rocket, icon: Rocket,
duration: "12-24 weeks", duration: "12-24 weeks",
commitment: "20+ hours/week", commitment: "20+ hours/week",
@ -96,10 +105,10 @@ export default function MentorshipPrograms() {
"Job placement assistance", "Job placement assistance",
"Capstone project", "Capstone project",
"Certification", "Certification",
"Alumni network access" "Alumni network access",
], ],
color: "from-orange-500 to-red-600", color: "from-orange-500 to-red-600",
participants: "15-25 people" participants: "15-25 people",
}, },
{ {
title: "Corporate Training", title: "Corporate Training",
@ -114,11 +123,11 @@ export default function MentorshipPrograms() {
"Team assessments", "Team assessments",
"Progress tracking", "Progress tracking",
"Certification programs", "Certification programs",
"Ongoing support" "Ongoing support",
], ],
color: "from-purple-500 to-pink-600", color: "from-purple-500 to-pink-600",
participants: "10-100+ people" participants: "10-100+ people",
} },
]; ];
const tracks = [ const tracks = [
@ -126,38 +135,67 @@ export default function MentorshipPrograms() {
name: "Game Development", name: "Game Development",
description: "Master game development from concept to publishing", description: "Master game development from concept to publishing",
icon: Code, icon: Code,
skills: ["Unity/Unreal", "C#/C++", "Game Design", "3D Modeling", "Audio", "Publishing"], skills: [
"Unity/Unreal",
"C#/C++",
"Game Design",
"3D Modeling",
"Audio",
"Publishing",
],
level: "Beginner to Advanced", level: "Beginner to Advanced",
duration: "6-12 months", duration: "6-12 months",
projects: 5 projects: 5,
}, },
{ {
name: "Web Development", name: "Web Development",
description: "Build modern web applications with cutting-edge technologies", description:
"Build modern web applications with cutting-edge technologies",
icon: Globe, icon: Globe,
skills: ["React/Vue", "Node.js", "Databases", "Cloud Deploy", "Testing", "DevOps"], skills: [
"React/Vue",
"Node.js",
"Databases",
"Cloud Deploy",
"Testing",
"DevOps",
],
level: "Beginner to Expert", level: "Beginner to Expert",
duration: "4-8 months", duration: "4-8 months",
projects: 8 projects: 8,
}, },
{ {
name: "Mobile Development", name: "Mobile Development",
description: "Create native and cross-platform mobile applications", description: "Create native and cross-platform mobile applications",
icon: Rocket, icon: Rocket,
skills: ["React Native", "Flutter", "iOS/Android", "API Integration", "Publishing", "Analytics"], skills: [
"React Native",
"Flutter",
"iOS/Android",
"API Integration",
"Publishing",
"Analytics",
],
level: "Intermediate to Advanced", level: "Intermediate to Advanced",
duration: "5-10 months", duration: "5-10 months",
projects: 6 projects: 6,
}, },
{ {
name: "Data Science & AI", name: "Data Science & AI",
description: "Harness the power of data and artificial intelligence", description: "Harness the power of data and artificial intelligence",
icon: Lightbulb, icon: Lightbulb,
skills: ["Python", "Machine Learning", "Data Analysis", "Neural Networks", "Big Data", "Visualization"], skills: [
"Python",
"Machine Learning",
"Data Analysis",
"Neural Networks",
"Big Data",
"Visualization",
],
level: "Beginner to Expert", level: "Beginner to Expert",
duration: "8-16 months", duration: "8-16 months",
projects: 10 projects: 10,
} },
]; ];
const mentors = [ const mentors = [
@ -169,28 +207,31 @@ export default function MentorshipPrograms() {
specialty: "Unreal Engine, C++", specialty: "Unreal Engine, C++",
students: 85, students: 85,
rating: 4.9, rating: 4.9,
avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b029?w=150&h=150&fit=crop&crop=face" avatar:
"https://images.unsplash.com/photo-1494790108755-2616b612b029?w=150&h=150&fit=crop&crop=face",
}, },
{ {
name: "Marcus Rodriguez", name: "Marcus Rodriguez",
title: "Full Stack Architect", title: "Full Stack Architect",
company: "Netflix", company: "Netflix",
experience: "15 years", experience: "15 years",
specialty: "React, Node.js, AWS", specialty: "React, Node.js, AWS",
students: 120, students: 120,
rating: 4.8, rating: 4.8,
avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face" avatar:
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
}, },
{ {
name: "Dr. Aisha Patel", name: "Dr. Aisha Patel",
title: "AI Research Scientist", title: "AI Research Scientist",
company: "Google DeepMind", company: "Google DeepMind",
experience: "10 years", experience: "10 years",
specialty: "Machine Learning, Python", specialty: "Machine Learning, Python",
students: 95, students: 95,
rating: 5.0, rating: 5.0,
avatar: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=150&h=150&fit=crop&crop=face" avatar:
} "https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=150&h=150&fit=crop&crop=face",
},
]; ];
const testimonials = [ const testimonials = [
@ -198,30 +239,39 @@ export default function MentorshipPrograms() {
name: "Alex Thompson", name: "Alex Thompson",
role: "Junior Developer → Senior Developer", role: "Junior Developer → Senior Developer",
company: "Stripe", company: "Stripe",
content: "The mentorship program completely transformed my career. Within 8 months, I went from struggling with basic concepts to landing a senior role at a top tech company.", content:
"The mentorship program completely transformed my career. Within 8 months, I went from struggling with basic concepts to landing a senior role at a top tech company.",
program: "Individual Mentorship", program: "Individual Mentorship",
mentor: "Marcus Rodriguez" mentor: "Marcus Rodriguez",
}, },
{ {
name: "Jamie Wu", name: "Jamie Wu",
role: "Career Changer → Game Developer", role: "Career Changer → Game Developer",
company: "Indie Studio", company: "Indie Studio",
content: "Coming from a marketing background, I never thought I could become a game developer. The boot camp gave me the skills and confidence to launch my own indie studio.", content:
"Coming from a marketing background, I never thought I could become a game developer. The boot camp gave me the skills and confidence to launch my own indie studio.",
program: "Intensive Boot Camp", program: "Intensive Boot Camp",
mentor: "Sarah Chen" mentor: "Sarah Chen",
}, },
{ {
name: "Taylor Davis", name: "Taylor Davis",
role: "Student → ML Engineer", role: "Student → ML Engineer",
company: "OpenAI", company: "OpenAI",
content: "The AI track mentorship opened doors I never knew existed. The hands-on projects and expert guidance helped me land my dream job in machine learning.", content:
"The AI track mentorship opened doors I never knew existed. The hands-on projects and expert guidance helped me land my dream job in machine learning.",
program: "Group Workshop", program: "Group Workshop",
mentor: "Dr. Aisha Patel" mentor: "Dr. Aisha Patel",
} },
]; ];
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Loading Mentorship Programs..." showProgress={true} duration={1000} />; return (
<LoadingScreen
message="Loading Mentorship Programs..."
showProgress={true}
duration={1000}
/>
);
} }
return ( return (
@ -239,39 +289,54 @@ export default function MentorshipPrograms() {
top: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`, animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s`, animationDuration: `${3 + Math.random() * 2}s`,
fontSize: `${8 + Math.random() * 6}px` fontSize: `${8 + Math.random() * 6}px`,
}} }}
> >
{'🎓📚💡🚀'.charAt(Math.floor(Math.random() * 4))} {"🎓📚💡🚀".charAt(Math.floor(Math.random() * 4))}
</div> </div>
))} ))}
</div> </div>
<div className="container mx-auto px-4 text-center relative z-10"> <div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-4xl mx-auto space-y-8">
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"> <Badge
variant="outline"
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
>
<GraduationCap className="h-3 w-3 mr-1" /> <GraduationCap className="h-3 w-3 mr-1" />
Mentorship & Education Division Mentorship & Education Division
</Badge> </Badge>
<h1 className="text-4xl lg:text-6xl font-bold leading-tight"> <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
<span className="text-gradient-purple">Accelerate Your Tech Journey</span> <span className="text-gradient-purple">
Accelerate Your Tech Journey
</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Learn from industry experts through personalized mentorship, hands-on workshops, Learn from industry experts through personalized mentorship,
and intensive boot camps designed to fast-track your technology career. hands-on workshops, and intensive boot camps designed to
fast-track your technology career.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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"> <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="/contact" className="flex items-center space-x-2"> <Link to="/contact" className="flex items-center space-x-2">
<BookOpen className="h-5 w-5" /> <BookOpen className="h-5 w-5" />
<span>Apply Now</span> <span>Apply Now</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-border/50 hover-lift"> <Button
asChild
variant="outline"
size="lg"
className="border-border/50 hover-lift"
>
<Link to="/docs">Program Details</Link> <Link to="/docs">Program Details</Link>
</Button> </Button>
</div> </div>
@ -287,7 +352,8 @@ export default function MentorshipPrograms() {
Mentorship Programs Mentorship Programs
</h2> </h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto"> <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Choose the learning format that best fits your schedule and goals Choose the learning format that best fits your schedule and
goals
</p> </p>
</div> </div>
@ -295,7 +361,7 @@ export default function MentorshipPrograms() {
{programs.map((program, index) => { {programs.map((program, index) => {
const Icon = program.icon; const Icon = program.icon;
return ( return (
<Card <Card
key={index} key={index}
className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in" className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
@ -303,11 +369,15 @@ export default function MentorshipPrograms() {
<CardHeader> <CardHeader>
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className={`p-3 rounded-lg bg-gradient-to-r ${program.color}`}> <div
className={`p-3 rounded-lg bg-gradient-to-r ${program.color}`}
>
<Icon className="h-6 w-6 text-white" /> <Icon className="h-6 w-6 text-white" />
</div> </div>
<div> <div>
<CardTitle className="text-xl">{program.title}</CardTitle> <CardTitle className="text-xl">
{program.title}
</CardTitle>
<CardDescription className="mt-1"> <CardDescription className="mt-1">
{program.description} {program.description}
</CardDescription> </CardDescription>
@ -321,24 +391,33 @@ export default function MentorshipPrograms() {
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{program.features.map((feature, featureIndex) => ( {program.features.map((feature, featureIndex) => (
<div key={featureIndex} className="flex items-center space-x-2 text-sm"> <div
key={featureIndex}
className="flex items-center space-x-2 text-sm"
>
<CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" /> <CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" />
<span>{feature}</span> <span>{feature}</span>
</div> </div>
))} ))}
</div> </div>
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-border/30"> <div className="grid grid-cols-3 gap-4 pt-4 border-t border-border/30">
<div className="text-center"> <div className="text-center">
<Clock className="h-4 w-4 text-muted-foreground mx-auto mb-1" /> <Clock className="h-4 w-4 text-muted-foreground mx-auto mb-1" />
<div className="text-xs text-muted-foreground">{program.duration}</div> <div className="text-xs text-muted-foreground">
{program.duration}
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<Calendar className="h-4 w-4 text-muted-foreground mx-auto mb-1" /> <Calendar className="h-4 w-4 text-muted-foreground mx-auto mb-1" />
<div className="text-xs text-muted-foreground">{program.commitment}</div> <div className="text-xs text-muted-foreground">
{program.commitment}
</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<span className="text-sm font-semibold text-aethex-400">{program.price}</span> <span className="text-sm font-semibold text-aethex-400">
{program.price}
</span>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@ -366,19 +445,21 @@ export default function MentorshipPrograms() {
const Icon = track.icon; const Icon = track.icon;
const isSelected = selectedTrack === index; const isSelected = selectedTrack === index;
return ( return (
<Card <Card
key={index} key={index}
className={`cursor-pointer transition-all duration-300 hover-lift animate-scale-in ${ className={`cursor-pointer transition-all duration-300 hover-lift animate-scale-in ${
isSelected isSelected
? 'border-aethex-500 glow-blue scale-105' ? "border-aethex-500 glow-blue scale-105"
: 'border-border/50 hover:border-aethex-400/50' : "border-border/50 hover:border-aethex-400/50"
}`} }`}
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
onClick={() => setSelectedTrack(index)} onClick={() => setSelectedTrack(index)}
> >
<CardHeader className="text-center"> <CardHeader className="text-center">
<Icon className="h-12 w-12 text-aethex-400 mx-auto mb-3" /> <Icon className="h-12 w-12 text-aethex-400 mx-auto mb-3" />
<CardTitle className={`text-lg ${isSelected ? 'text-gradient' : ''}`}> <CardTitle
className={`text-lg ${isSelected ? "text-gradient" : ""}`}
>
{track.name} {track.name}
</CardTitle> </CardTitle>
<CardDescription className="text-sm"> <CardDescription className="text-sm">
@ -388,14 +469,20 @@ export default function MentorshipPrograms() {
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{track.skills.slice(0, 4).map((skill, skillIndex) => ( {track.skills.slice(0, 4).map((skill, skillIndex) => (
<Badge key={skillIndex} variant="secondary" className="text-xs"> <Badge
key={skillIndex}
variant="secondary"
className="text-xs"
>
{skill} {skill}
</Badge> </Badge>
))} ))}
</div> </div>
<div className="text-center space-y-1"> <div className="text-center space-y-1">
<div className="text-sm text-muted-foreground">{track.level}</div> <div className="text-sm text-muted-foreground">
{track.level}
</div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
{track.duration} • {track.projects} projects {track.duration} • {track.projects} projects
</div> </div>
@ -422,21 +509,27 @@ export default function MentorshipPrograms() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
{mentors.map((mentor, index) => ( {mentors.map((mentor, index) => (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in" className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.2}s` }} style={{ animationDelay: `${index * 0.2}s` }}
> >
<CardContent className="p-6 text-center"> <CardContent className="p-6 text-center">
<img <img
src={mentor.avatar} src={mentor.avatar}
alt={mentor.name} alt={mentor.name}
className="w-24 h-24 rounded-full mx-auto mb-4 ring-4 ring-aethex-400/20" className="w-24 h-24 rounded-full mx-auto mb-4 ring-4 ring-aethex-400/20"
/> />
<h3 className="font-semibold text-lg text-gradient">{mentor.name}</h3> <h3 className="font-semibold text-lg text-gradient">
<p className="text-sm text-muted-foreground">{mentor.title}</p> {mentor.name}
<p className="text-sm font-medium text-aethex-400">{mentor.company}</p> </h3>
<p className="text-sm text-muted-foreground">
{mentor.title}
</p>
<p className="text-sm font-medium text-aethex-400">
{mentor.company}
</p>
<div className="mt-4 space-y-2"> <div className="mt-4 space-y-2">
<div className="flex justify-between text-sm"> <div className="flex justify-between text-sm">
<span>Experience:</span> <span>Experience:</span>
@ -454,7 +547,7 @@ export default function MentorshipPrograms() {
</div> </div>
</div> </div>
</div> </div>
<Badge variant="outline" className="mt-3 text-xs"> <Badge variant="outline" className="mt-3 text-xs">
{mentor.specialty} {mentor.specialty}
</Badge> </Badge>
@ -479,7 +572,7 @@ export default function MentorshipPrograms() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-6xl mx-auto"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
{testimonials.map((testimonial, index) => ( {testimonials.map((testimonial, index) => (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up" className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
style={{ animationDelay: `${index * 0.2}s` }} style={{ animationDelay: `${index * 0.2}s` }}
@ -491,8 +584,12 @@ export default function MentorshipPrograms() {
</div> </div>
<div> <div>
<h3 className="font-semibold">{testimonial.name}</h3> <h3 className="font-semibold">{testimonial.name}</h3>
<p className="text-sm text-muted-foreground">{testimonial.role}</p> <p className="text-sm text-muted-foreground">
<Badge variant="outline" className="text-xs">{testimonial.company}</Badge> {testimonial.role}
</p>
<Badge variant="outline" className="text-xs">
{testimonial.company}
</Badge>
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
@ -519,18 +616,28 @@ export default function MentorshipPrograms() {
Start Your Learning Journey Today Start Your Learning Journey Today
</h2> </h2>
<p className="text-xl text-muted-foreground"> <p className="text-xl text-muted-foreground">
Join thousands of developers who have accelerated their careers through our mentorship programs. Join thousands of developers who have accelerated their careers
through our mentorship programs.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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 text-lg px-8 py-6"> <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-lg px-8 py-6"
>
<Link to="/contact" className="flex items-center space-x-2"> <Link to="/contact" className="flex items-center space-x-2">
<Heart className="h-5 w-5" /> <Heart className="h-5 w-5" />
<span>Apply for Mentorship</span> <span>Apply for Mentorship</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"> <Button
asChild
variant="outline"
size="lg"
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
>
<Link to="/docs">View Curriculum</Link> <Link to="/docs">View Curriculum</Link>
</Button> </Button>
</div> </div>
@ -539,17 +646,23 @@ export default function MentorshipPrograms() {
<div className="text-center"> <div className="text-center">
<MessageCircle className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <MessageCircle className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">24/7 Support</h3> <h3 className="font-semibold">24/7 Support</h3>
<p className="text-sm text-muted-foreground">Always available</p> <p className="text-sm text-muted-foreground">
Always available
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Video className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Video className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Live Sessions</h3> <h3 className="font-semibold">Live Sessions</h3>
<p className="text-sm text-muted-foreground">Interactive learning</p> <p className="text-sm text-muted-foreground">
Interactive learning
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Award className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Award className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Certification</h3> <h3 className="font-semibold">Certification</h3>
<p className="text-sm text-muted-foreground">Industry recognized</p> <p className="text-sm text-muted-foreground">
Industry recognized
</p>
</div> </div>
</div> </div>
</div> </div>

134
client/pages/NotFound.tsx
View file

@ -2,7 +2,13 @@ import { useState, useEffect, useCallback } from "react";
import { useNavigate, useLocation } from "react-router-dom"; import { useNavigate, useLocation } from "react-router-dom";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { import {
Home, Home,
@ -19,7 +25,7 @@ import {
ChevronUp, ChevronUp,
ChevronDown, ChevronDown,
ChevronLeft, ChevronLeft,
ChevronRight ChevronRight,
} from "lucide-react"; } from "lucide-react";
interface GameState { interface GameState {
@ -52,10 +58,19 @@ const NotFound = () => {
"Error 404: This page is in another castle.", "Error 404: This page is in another castle.",
"404: The page you seek is in another universe.", "404: The page you seek is in another universe.",
"404: Lost in cyberspace? We'll guide you home.", "404: Lost in cyberspace? We'll guide you home.",
"404: Page not found, but great adventures await." "404: Page not found, but great adventures await.",
]; ];
const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight']; const konamiCode = [
"ArrowUp",
"ArrowUp",
"ArrowDown",
"ArrowDown",
"ArrowLeft",
"ArrowRight",
"ArrowLeft",
"ArrowRight",
];
// Game state // Game state
const [gameState, setGameState] = useState<GameState>({ const [gameState, setGameState] = useState<GameState>({
@ -65,7 +80,7 @@ const NotFound = () => {
playerPosition: { x: 5, y: 5 }, playerPosition: { x: 5, y: 5 },
collectibles: [], collectibles: [],
gameActive: false, gameActive: false,
gameWon: false gameWon: false,
}); });
// Initialize collectibles // Initialize collectibles
@ -76,28 +91,28 @@ const NotFound = () => {
x: Math.floor(Math.random() * 10), x: Math.floor(Math.random() * 10),
y: Math.floor(Math.random() * 10), y: Math.floor(Math.random() * 10),
id: i, id: i,
collected: false collected: false,
}); });
} }
setGameState(prev => ({ setGameState((prev) => ({
...prev, ...prev,
collectibles: newCollectibles, collectibles: newCollectibles,
gameActive: true, gameActive: true,
score: 0, score: 0,
lives: 3, lives: 3,
playerPosition: { x: 5, y: 5 }, playerPosition: { x: 5, y: 5 },
gameWon: false gameWon: false,
})); }));
}, []); }, []);
// Timer and quote rotation // Timer and quote rotation
useEffect(() => { useEffect(() => {
const timer = setInterval(() => { const timer = setInterval(() => {
setTimeSpent(prev => prev + 1); setTimeSpent((prev) => prev + 1);
}, 1000); }, 1000);
const quoteTimer = setInterval(() => { const quoteTimer = setInterval(() => {
setCurrentQuote(prev => (prev + 1) % quotes.length); setCurrentQuote((prev) => (prev + 1) % quotes.length);
}, 3000); }, 3000);
return () => { return () => {
@ -118,8 +133,8 @@ const NotFound = () => {
} }
}; };
window.addEventListener('keydown', handleKeyPress); window.addEventListener("keydown", handleKeyPress);
return () => window.removeEventListener('keydown', handleKeyPress); return () => window.removeEventListener("keydown", handleKeyPress);
}, [konami, konamiCode]); }, [konami, konamiCode]);
// Game controls // Game controls
@ -132,37 +147,42 @@ const NotFound = () => {
let newY = gameState.playerPosition.y; let newY = gameState.playerPosition.y;
switch (e.key) { switch (e.key) {
case 'ArrowUp': case "ArrowUp":
case 'w': case "w":
newY = Math.max(0, newY - 1); newY = Math.max(0, newY - 1);
break; break;
case 'ArrowDown': case "ArrowDown":
case 's': case "s":
newY = Math.min(9, newY + 1); newY = Math.min(9, newY + 1);
break; break;
case 'ArrowLeft': case "ArrowLeft":
case 'a': case "a":
newX = Math.max(0, newX - 1); newX = Math.max(0, newX - 1);
break; break;
case 'ArrowRight': case "ArrowRight":
case 'd': case "d":
newX = Math.min(9, newX + 1); newX = Math.min(9, newX + 1);
break; break;
default: default:
return; return;
} }
setGameState(prev => { setGameState((prev) => {
const newPosition = { x: newX, y: newY }; const newPosition = { x: newX, y: newY };
const updatedCollectibles = prev.collectibles.map(collectible => { const updatedCollectibles = prev.collectibles.map((collectible) => {
if (collectible.x === newX && collectible.y === newY && !collectible.collected) { if (
collectible.x === newX &&
collectible.y === newY &&
!collectible.collected
) {
return { ...collectible, collected: true }; return { ...collectible, collected: true };
} }
return collectible; return collectible;
}); });
const newScore = updatedCollectibles.filter(c => c.collected).length * 10; const newScore =
const gameWon = updatedCollectibles.every(c => c.collected); updatedCollectibles.filter((c) => c.collected).length * 10;
const gameWon = updatedCollectibles.every((c) => c.collected);
return { return {
...prev, ...prev,
@ -170,14 +190,14 @@ const NotFound = () => {
collectibles: updatedCollectibles, collectibles: updatedCollectibles,
score: newScore, score: newScore,
gameWon: gameWon, gameWon: gameWon,
gameActive: !gameWon gameActive: !gameWon,
}; };
}); });
}; };
if (gameState.gameActive) { if (gameState.gameActive) {
window.addEventListener('keydown', handleGameControls); window.addEventListener("keydown", handleGameControls);
return () => window.removeEventListener('keydown', handleGameControls); return () => window.removeEventListener("keydown", handleGameControls);
} }
}, [gameState.gameActive, gameState.playerPosition]); }, [gameState.gameActive, gameState.playerPosition]);
@ -185,19 +205,26 @@ const NotFound = () => {
const grid = []; const grid = [];
for (let y = 0; y < 10; y++) { for (let y = 0; y < 10; y++) {
for (let x = 0; x < 10; x++) { for (let x = 0; x < 10; x++) {
const isPlayer = gameState.playerPosition.x === x && gameState.playerPosition.y === y; const isPlayer =
const collectible = gameState.collectibles.find(c => c.x === x && c.y === y && !c.collected); gameState.playerPosition.x === x && gameState.playerPosition.y === y;
const collectible = gameState.collectibles.find(
(c) => c.x === x && c.y === y && !c.collected,
);
grid.push( grid.push(
<div <div
key={`${x}-${y}`} key={`${x}-${y}`}
className={`w-6 h-6 border border-border/20 flex items-center justify-center text-xs transition-all duration-200 ${ className={`w-6 h-6 border border-border/20 flex items-center justify-center text-xs transition-all duration-200 ${
isPlayer ? 'bg-aethex-500 animate-pulse' : collectible ? 'bg-yellow-500/50 animate-bounce' : 'bg-background/30' isPlayer
? "bg-aethex-500 animate-pulse"
: collectible
? "bg-yellow-500/50 animate-bounce"
: "bg-background/30"
}`} }`}
> >
{isPlayer && '🚀'} {isPlayer && "🚀"}
{collectible && '⭐'} {collectible && "⭐"}
</div> </div>,
); );
} }
} }
@ -219,7 +246,7 @@ const NotFound = () => {
top: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`, animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s`, animationDuration: `${3 + Math.random() * 2}s`,
fontSize: `${12 + Math.random() * 8}px` fontSize: `${12 + Math.random() * 8}px`,
}} }}
> >
404 404
@ -253,11 +280,17 @@ const NotFound = () => {
</div> </div>
<div className="flex justify-center space-x-4"> <div className="flex justify-center space-x-4">
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-pulse"> <Badge
variant="outline"
className="border-aethex-400/50 text-aethex-400 animate-pulse"
>
<Zap className="h-3 w-3 mr-1" /> <Zap className="h-3 w-3 mr-1" />
Time Lost: {timeSpent}s Time Lost: {timeSpent}s
</Badge> </Badge>
<Badge variant="outline" className="border-neon-blue/50 text-neon-blue animate-bounce-gentle"> <Badge
variant="outline"
className="border-neon-blue/50 text-neon-blue animate-bounce-gentle"
>
<Target className="h-3 w-3 mr-1" /> <Target className="h-3 w-3 mr-1" />
Location: {location.pathname} Location: {location.pathname}
</Badge> </Badge>
@ -272,7 +305,8 @@ const NotFound = () => {
<span>404 Rescue Mission</span> <span>404 Rescue Mission</span>
</CardTitle> </CardTitle>
<CardDescription> <CardDescription>
Help the rocket collect all stars to unlock the way home! Use WASD or arrow keys. Help the rocket collect all stars to unlock the way home! Use
WASD or arrow keys.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
@ -290,10 +324,16 @@ const NotFound = () => {
<div className="space-y-4"> <div className="space-y-4">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="text-sm"> <div className="text-sm">
Score: <span className="text-gradient font-bold">{gameState.score}</span> Score:{" "}
<span className="text-gradient font-bold">
{gameState.score}
</span>
</div> </div>
<div className="text-sm"> <div className="text-sm">
Lives: <span className="text-red-400">{'❤️'.repeat(gameState.lives)}</span> Lives:{" "}
<span className="text-red-400">
{"❤️".repeat(gameState.lives)}
</span>
</div> </div>
</div> </div>
@ -302,7 +342,9 @@ const NotFound = () => {
</div> </div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Collected: {gameState.collectibles.filter(c => c.collected).length} / {gameState.collectibles.length} Collected:{" "}
{gameState.collectibles.filter((c) => c.collected).length}{" "}
/ {gameState.collectibles.length}
</div> </div>
</div> </div>
)} )}
@ -311,9 +353,12 @@ const NotFound = () => {
<div className="space-y-4 animate-scale-in"> <div className="space-y-4 animate-scale-in">
<div className="text-center space-y-2"> <div className="text-center space-y-2">
<Trophy className="h-12 w-12 text-yellow-500 mx-auto animate-bounce" /> <Trophy className="h-12 w-12 text-yellow-500 mx-auto animate-bounce" />
<h3 className="text-xl font-bold text-gradient">Mission Complete!</h3> <h3 className="text-xl font-bold text-gradient">
Mission Complete!
</h3>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
You've rescued the lost page! Final Score: {gameState.score} You've rescued the lost page! Final Score:{" "}
{gameState.score}
</p> </p>
</div> </div>
<Button <Button
@ -337,7 +382,8 @@ const NotFound = () => {
🎉 Konami Code Activated! 🎉 🎉 Konami Code Activated! 🎉
</h3> </h3>
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">
You've unlocked the secret developer mode! You're clearly a person of culture. You've unlocked the secret developer mode! You're clearly a
person of culture.
</p> </p>
<Button <Button
onClick={() => navigate("/dashboard")} onClick={() => navigate("/dashboard")}

42
client/pages/Onboarding.tsx
View file

@ -8,7 +8,7 @@ import Experience from "@/components/onboarding/Experience";
import Interests from "@/components/onboarding/Interests"; import Interests from "@/components/onboarding/Interests";
import Welcome from "@/components/onboarding/Welcome"; import Welcome from "@/components/onboarding/Welcome";
export type UserType = 'game-developer' | 'client' | 'member' | 'customer'; export type UserType = "game-developer" | "client" | "member" | "customer";
export interface OnboardingData { export interface OnboardingData {
userType: UserType | null; userType: UserType | null;
@ -32,15 +32,15 @@ export interface OnboardingData {
const initialData: OnboardingData = { const initialData: OnboardingData = {
userType: null, userType: null,
personalInfo: { personalInfo: {
firstName: '', firstName: "",
lastName: '', lastName: "",
email: '', email: "",
company: '', company: "",
}, },
experience: { experience: {
level: '', level: "",
skills: [], skills: [],
previousProjects: '', previousProjects: "",
}, },
interests: { interests: {
primaryGoals: [], primaryGoals: [],
@ -71,14 +71,14 @@ export default function Onboarding() {
}, []); }, []);
const updateData = (newData: Partial<OnboardingData>) => { const updateData = (newData: Partial<OnboardingData>) => {
setData(prev => ({ ...prev, ...newData })); setData((prev) => ({ ...prev, ...newData }));
}; };
const nextStep = () => { const nextStep = () => {
if (currentStep < steps.length - 1) { if (currentStep < steps.length - 1) {
setIsTransitioning(true); setIsTransitioning(true);
setTimeout(() => { setTimeout(() => {
setCurrentStep(prev => prev + 1); setCurrentStep((prev) => prev + 1);
setIsTransitioning(false); setIsTransitioning(false);
}, 300); }, 300);
} }
@ -88,7 +88,7 @@ export default function Onboarding() {
if (currentStep > 0) { if (currentStep > 0) {
setIsTransitioning(true); setIsTransitioning(true);
setTimeout(() => { setTimeout(() => {
setCurrentStep(prev => prev - 1); setCurrentStep((prev) => prev - 1);
setIsTransitioning(false); setIsTransitioning(false);
}, 300); }, 300);
} }
@ -97,7 +97,13 @@ export default function Onboarding() {
const CurrentStepComponent = steps[currentStep].component; const CurrentStepComponent = steps[currentStep].component;
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Preparing your onboarding experience..." showProgress={true} duration={1200} />; return (
<LoadingScreen
message="Preparing your onboarding experience..."
showProgress={true}
duration={1200}
/>
);
} }
return ( return (
@ -107,7 +113,9 @@ export default function Onboarding() {
{/* Progress Bar */} {/* Progress Bar */}
<div className="mb-8 animate-slide-down"> <div className="mb-8 animate-slide-down">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h1 className="text-2xl font-bold text-gradient animate-pulse-glow">Join AeThex</h1> <h1 className="text-2xl font-bold text-gradient animate-pulse-glow">
Join AeThex
</h1>
<span className="text-sm text-muted-foreground animate-fade-in"> <span className="text-sm text-muted-foreground animate-fade-in">
Step {currentStep + 1} of {steps.length} Step {currentStep + 1} of {steps.length}
</span> </span>
@ -115,7 +123,9 @@ export default function Onboarding() {
<div className="w-full bg-muted rounded-full h-2 overflow-hidden"> <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
<div <div
className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full transition-all duration-700 ease-out glow-blue" className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full transition-all duration-700 ease-out glow-blue"
style={{ width: `${((currentStep + 1) / steps.length) * 100}%` }} style={{
width: `${((currentStep + 1) / steps.length) * 100}%`,
}}
/> />
</div> </div>
{/* Step Indicators */} {/* Step Indicators */}
@ -125,8 +135,8 @@ export default function Onboarding() {
key={index} key={index}
className={`w-2 h-2 rounded-full transition-all duration-300 ${ className={`w-2 h-2 rounded-full transition-all duration-300 ${
index <= currentStep index <= currentStep
? 'bg-aethex-400 glow-blue animate-pulse' ? "bg-aethex-400 glow-blue animate-pulse"
: 'bg-muted' : "bg-muted"
}`} }`}
/> />
))} ))}
@ -167,7 +177,7 @@ export default function Onboarding() {
left: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`, animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s` animationDuration: `${3 + Math.random() * 2}s`,
}} }}
/> />
))} ))}

52
client/pages/Placeholder.tsx
View file

@ -1,6 +1,12 @@
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Construction, ArrowLeft, MessageCircle } from "lucide-react"; import { Construction, ArrowLeft, MessageCircle } from "lucide-react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@ -22,37 +28,47 @@ export default function Placeholder({ title, description }: PlaceholderProps) {
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<CardTitle className="text-2xl text-gradient">{title}</CardTitle> <CardTitle className="text-2xl text-gradient">
{title}
</CardTitle>
<CardDescription className="text-lg"> <CardDescription className="text-lg">
{description} {description}
</CardDescription> </CardDescription>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
<div className="text-center space-y-4"> <div className="text-center space-y-4">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
This page is currently under development. We're working hard to bring you This page is currently under development. We're working hard
amazing features and content. Check back soon! to bring you amazing features and content. Check back soon!
</p> </p>
<div className="bg-background/30 rounded-lg p-4 border border-border/30"> <div className="bg-background/30 rounded-lg p-4 border border-border/30">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
💡 <strong>Want to help us prioritize?</strong> Let us know what you'd like to see 💡 <strong>Want to help us prioritize?</strong> Let us know
on this page by contacting our team. Your feedback helps shape our development roadmap. what you'd like to see on this page by contacting our team.
Your feedback helps shape our development roadmap.
</p> </p>
</div> </div>
</div> </div>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button asChild variant="outline" className="flex items-center space-x-2"> <Button
asChild
variant="outline"
className="flex items-center space-x-2"
>
<Link to="/"> <Link to="/">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
<span>Back to Home</span> <span>Back to Home</span>
</Link> </Link>
</Button> </Button>
<Button asChild className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 flex items-center space-x-2"> <Button
asChild
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 flex items-center space-x-2"
>
<Link to="/contact"> <Link to="/contact">
<MessageCircle className="h-4 w-4" /> <MessageCircle className="h-4 w-4" />
<span>Contact Us</span> <span>Contact Us</span>
@ -62,8 +78,18 @@ export default function Placeholder({ title, description }: PlaceholderProps) {
<div className="text-center pt-4"> <div className="text-center pt-4">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
In the meantime, explore our <Link to="/onboarding" className="text-aethex-400 hover:underline">onboarding process</Link> or In the meantime, explore our{" "}
visit our <Link to="/" className="text-aethex-400 hover:underline">homepage</Link> to learn more about AeThex. <Link
to="/onboarding"
className="text-aethex-400 hover:underline"
>
onboarding process
</Link>{" "}
or visit our{" "}
<Link to="/" className="text-aethex-400 hover:underline">
homepage
</Link>{" "}
to learn more about AeThex.
</p> </p>
</div> </div>
</CardContent> </CardContent>

214
client/pages/ResearchLabs.tsx
View file

@ -1,18 +1,24 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast"; import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
Zap, Zap,
Brain, Brain,
Atom, Atom,
Cpu, Cpu,
Database, Database,
Shield, Shield,
Rocket, Rocket,
ArrowRight, ArrowRight,
CheckCircle, CheckCircle,
@ -20,7 +26,7 @@ import {
Download, Download,
ExternalLink, ExternalLink,
Beaker, Beaker,
Microscope Microscope,
} from "lucide-react"; } from "lucide-react";
export default function ResearchLabs() { export default function ResearchLabs() {
@ -49,7 +55,7 @@ export default function ResearchLabs() {
papers: 12, papers: 12,
breakthrough: "Quantum ML optimization algorithm", breakthrough: "Quantum ML optimization algorithm",
impact: "50% faster training", impact: "50% faster training",
color: "from-purple-500 to-indigo-600" color: "from-purple-500 to-indigo-600",
}, },
{ {
title: "Neural Architecture Search", title: "Neural Architecture Search",
@ -59,7 +65,7 @@ export default function ResearchLabs() {
papers: 8, papers: 8,
breakthrough: "AutoML framework", breakthrough: "AutoML framework",
impact: "90% accuracy improvement", impact: "90% accuracy improvement",
color: "from-blue-500 to-cyan-600" color: "from-blue-500 to-cyan-600",
}, },
{ {
title: "Edge AI Systems", title: "Edge AI Systems",
@ -69,18 +75,19 @@ export default function ResearchLabs() {
papers: 6, papers: 6,
breakthrough: "Model compression technique", breakthrough: "Model compression technique",
impact: "10x smaller models", impact: "10x smaller models",
color: "from-green-500 to-emerald-600" color: "from-green-500 to-emerald-600",
}, },
{ {
title: "Blockchain Security", title: "Blockchain Security",
description: "Next-generation consensus algorithms and smart contract security", description:
"Next-generation consensus algorithms and smart contract security",
icon: Shield, icon: Shield,
status: "Research Phase", status: "Research Phase",
papers: 4, papers: 4,
breakthrough: "Zero-knowledge protocols", breakthrough: "Zero-knowledge protocols",
impact: "Enhanced privacy", impact: "Enhanced privacy",
color: "from-orange-500 to-red-600" color: "from-orange-500 to-red-600",
} },
]; ];
const publications = [ const publications = [
@ -91,16 +98,17 @@ export default function ResearchLabs() {
year: "2024", year: "2024",
citations: 127, citations: 127,
type: "Peer Reviewed", type: "Peer Reviewed",
impact: "High" impact: "High",
}, },
{ {
title: "Efficient Neural Architecture Search Using Evolutionary Algorithms", title:
"Efficient Neural Architecture Search Using Evolutionary Algorithms",
authors: "Dr. Aisha Patel, Dr. John Liu", authors: "Dr. Aisha Patel, Dr. John Liu",
journal: "International Conference on Machine Learning", journal: "International Conference on Machine Learning",
year: "2024", year: "2024",
citations: 89, citations: 89,
type: "Conference", type: "Conference",
impact: "Medium" impact: "Medium",
}, },
{ {
title: "Edge Computing Framework for Real-time Game Analytics", title: "Edge Computing Framework for Real-time Game Analytics",
@ -109,36 +117,50 @@ export default function ResearchLabs() {
year: "2023", year: "2023",
citations: 156, citations: 156,
type: "Peer Reviewed", type: "Peer Reviewed",
impact: "High" impact: "High",
} },
]; ];
const labs = [ const labs = [
{ {
name: "Quantum AI Lab", name: "Quantum AI Lab",
location: "Building A, Floor 3", location: "Building A, Floor 3",
equipment: ["IBM Quantum System", "Superconducting Qubits", "Cryogenic Systems"], equipment: [
"IBM Quantum System",
"Superconducting Qubits",
"Cryogenic Systems",
],
capacity: "12 researchers", capacity: "12 researchers",
status: "Operational" status: "Operational",
}, },
{ {
name: "Neural Networks Lab", name: "Neural Networks Lab",
location: "Building B, Floor 2", location: "Building B, Floor 2",
equipment: ["GPU Clusters", "TPU Arrays", "High-Memory Systems"], equipment: ["GPU Clusters", "TPU Arrays", "High-Memory Systems"],
capacity: "20 researchers", capacity: "20 researchers",
status: "Operational" status: "Operational",
}, },
{ {
name: "Blockchain Security Lab", name: "Blockchain Security Lab",
location: "Building C, Floor 1", location: "Building C, Floor 1",
equipment: ["Security Testing Rigs", "Network Simulators", "Hardware Wallets"], equipment: [
"Security Testing Rigs",
"Network Simulators",
"Hardware Wallets",
],
capacity: "8 researchers", capacity: "8 researchers",
status: "Expanding" status: "Expanding",
} },
]; ];
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Accessing Research Division..." showProgress={true} duration={1000} />; return (
<LoadingScreen
message="Accessing Research Division..."
showProgress={true}
duration={1000}
/>
);
} }
return ( return (
@ -156,39 +178,52 @@ export default function ResearchLabs() {
top: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`, animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s`, animationDuration: `${3 + Math.random() * 2}s`,
fontSize: `${8 + Math.random() * 6}px` fontSize: `${8 + Math.random() * 6}px`,
}} }}
> >
{'⚛️🧠🔬⚡'.charAt(Math.floor(Math.random() * 4))} {"⚛️🧠🔬⚡".charAt(Math.floor(Math.random() * 4))}
</div> </div>
))} ))}
</div> </div>
<div className="container mx-auto px-4 text-center relative z-10"> <div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-4xl mx-auto space-y-8">
<Badge variant="outline" className="border-neon-yellow/50 text-neon-yellow animate-bounce-gentle"> <Badge
variant="outline"
className="border-neon-yellow/50 text-neon-yellow animate-bounce-gentle"
>
<Beaker className="h-3 w-3 mr-1" /> <Beaker className="h-3 w-3 mr-1" />
Research & Experimental Division Research & Experimental Division
</Badge> </Badge>
<h1 className="text-4xl lg:text-6xl font-bold leading-tight"> <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
<span className="text-gradient">AeThex | L.A.B.S.</span> <span className="text-gradient">AeThex | L.A.B.S.</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Pushing the boundaries of technology through cutting-edge research Pushing the boundaries of technology through cutting-edge
and breakthrough discoveries that shape the future of digital innovation. research and breakthrough discoveries that shape the future of
digital innovation.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <div className="flex flex-col sm:flex-row justify-center gap-4">
<Button asChild size="lg" className="bg-gradient-to-r from-neon-yellow to-aethex-600 hover:from-neon-yellow/90 hover:to-aethex-700 glow-yellow hover-lift"> <Button
asChild
size="lg"
className="bg-gradient-to-r from-neon-yellow to-aethex-600 hover:from-neon-yellow/90 hover:to-aethex-700 glow-yellow hover-lift"
>
<Link to="/contact" className="flex items-center space-x-2"> <Link to="/contact" className="flex items-center space-x-2">
<Microscope className="h-5 w-5" /> <Microscope className="h-5 w-5" />
<span>Collaborate With Us</span> <span>Collaborate With Us</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-border/50 hover-lift"> <Button
asChild
variant="outline"
size="lg"
className="border-border/50 hover-lift"
>
<Link to="/docs">Research Papers</Link> <Link to="/docs">Research Papers</Link>
</Button> </Button>
</div> </div>
@ -204,7 +239,8 @@ export default function ResearchLabs() {
Active Research Areas Active Research Areas
</h2> </h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto"> <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Exploring frontiers in quantum computing, AI, and emerging technologies Exploring frontiers in quantum computing, AI, and emerging
technologies
</p> </p>
</div> </div>
@ -212,19 +248,23 @@ export default function ResearchLabs() {
{researchAreas.map((area, index) => { {researchAreas.map((area, index) => {
const Icon = area.icon; const Icon = area.icon;
return ( return (
<Card <Card
key={index} key={index}
className="relative overflow-hidden border-border/50 hover:border-neon-yellow/50 transition-all duration-500 hover-lift animate-scale-in" className="relative overflow-hidden border-border/50 hover:border-neon-yellow/50 transition-all duration-500 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
<CardHeader> <CardHeader>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className={`p-3 rounded-lg bg-gradient-to-r ${area.color}`}> <div
className={`p-3 rounded-lg bg-gradient-to-r ${area.color}`}
>
<Icon className="h-6 w-6 text-white" /> <Icon className="h-6 w-6 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-xl">{area.title}</CardTitle> <CardTitle className="text-xl">
{area.title}
</CardTitle>
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs">
{area.status} {area.status}
</Badge> </Badge>
@ -238,12 +278,20 @@ export default function ResearchLabs() {
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-3 gap-4 text-center"> <div className="grid grid-cols-3 gap-4 text-center">
<div> <div>
<div className="text-lg font-bold text-gradient">{area.papers}</div> <div className="text-lg font-bold text-gradient">
<div className="text-xs text-muted-foreground">Publications</div> {area.papers}
</div>
<div className="text-xs text-muted-foreground">
Publications
</div>
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<div className="text-sm font-semibold">{area.breakthrough}</div> <div className="text-sm font-semibold">
<div className="text-xs text-muted-foreground">{area.impact}</div> {area.breakthrough}
</div>
<div className="text-xs text-muted-foreground">
{area.impact}
</div>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@ -268,7 +316,7 @@ export default function ResearchLabs() {
<div className="max-w-4xl mx-auto space-y-6"> <div className="max-w-4xl mx-auto space-y-6">
{publications.map((pub, index) => ( {publications.map((pub, index) => (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right" className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
@ -276,12 +324,22 @@ export default function ResearchLabs() {
<CardContent className="p-6"> <CardContent className="p-6">
<div className="flex justify-between items-start mb-4"> <div className="flex justify-between items-start mb-4">
<div className="flex-1"> <div className="flex-1">
<h3 className="text-lg font-semibold text-gradient mb-2">{pub.title}</h3> <h3 className="text-lg font-semibold text-gradient mb-2">
<p className="text-sm text-muted-foreground mb-2">{pub.authors}</p> {pub.title}
<p className="text-sm font-medium">{pub.journal} • {pub.year}</p> </h3>
<p className="text-sm text-muted-foreground mb-2">
{pub.authors}
</p>
<p className="text-sm font-medium">
{pub.journal} • {pub.year}
</p>
</div> </div>
<div className="flex space-x-2"> <div className="flex space-x-2">
<Badge variant={pub.impact === 'High' ? 'default' : 'secondary'}> <Badge
variant={
pub.impact === "High" ? "default" : "secondary"
}
>
{pub.impact} Impact {pub.impact} Impact
</Badge> </Badge>
<Badge variant="outline">{pub.type}</Badge> <Badge variant="outline">{pub.type}</Badge>
@ -289,7 +347,10 @@ export default function ResearchLabs() {
</div> </div>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
Citations: <span className="font-semibold text-aethex-400">{pub.citations}</span> Citations:{" "}
<span className="font-semibold text-aethex-400">
{pub.citations}
</span>
</div> </div>
<div className="flex space-x-2"> <div className="flex space-x-2">
<Button size="sm" variant="outline"> <Button size="sm" variant="outline">
@ -317,13 +378,14 @@ export default function ResearchLabs() {
Research Facilities Research Facilities
</h2> </h2>
<p className="text-lg text-muted-foreground"> <p className="text-lg text-muted-foreground">
State-of-the-art laboratories equipped with cutting-edge technology State-of-the-art laboratories equipped with cutting-edge
technology
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
{labs.map((lab, index) => ( {labs.map((lab, index) => (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-neon-yellow/50 transition-all duration-300 hover-lift animate-scale-in" className="border-border/50 hover:border-neon-yellow/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.2}s` }} style={{ animationDelay: `${index * 0.2}s` }}
@ -331,8 +393,10 @@ export default function ResearchLabs() {
<CardHeader> <CardHeader>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-lg">{lab.name}</CardTitle> <CardTitle className="text-lg">{lab.name}</CardTitle>
<Badge <Badge
variant={lab.status === 'Operational' ? 'default' : 'secondary'} variant={
lab.status === "Operational" ? "default" : "secondary"
}
className="text-xs" className="text-xs"
> >
{lab.status} {lab.status}
@ -345,7 +409,10 @@ export default function ResearchLabs() {
<h4 className="font-semibold text-sm mb-2">Equipment:</h4> <h4 className="font-semibold text-sm mb-2">Equipment:</h4>
<div className="space-y-1"> <div className="space-y-1">
{lab.equipment.map((item, itemIndex) => ( {lab.equipment.map((item, itemIndex) => (
<div key={itemIndex} className="flex items-center space-x-2 text-sm"> <div
key={itemIndex}
className="flex items-center space-x-2 text-sm"
>
<CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" /> <CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" />
<span>{item}</span> <span>{item}</span>
</div> </div>
@ -353,7 +420,8 @@ export default function ResearchLabs() {
</div> </div>
</div> </div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
Capacity: <span className="font-medium">{lab.capacity}</span> Capacity:{" "}
<span className="font-medium">{lab.capacity}</span>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -370,19 +438,29 @@ export default function ResearchLabs() {
Join Our Research Community Join Our Research Community
</h2> </h2>
<p className="text-xl text-muted-foreground"> <p className="text-xl text-muted-foreground">
Collaborate with world-class researchers and contribute to breakthrough discoveries Collaborate with world-class researchers and contribute to
that will shape the future of technology. breakthrough discoveries that will shape the future of
technology.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <div className="flex flex-col sm:flex-row justify-center gap-4">
<Button asChild size="lg" className="bg-gradient-to-r from-neon-yellow to-aethex-600 hover:from-neon-yellow/90 hover:to-aethex-700 glow-yellow hover-lift text-lg px-8 py-6"> <Button
asChild
size="lg"
className="bg-gradient-to-r from-neon-yellow to-aethex-600 hover:from-neon-yellow/90 hover:to-aethex-700 glow-yellow hover-lift text-lg px-8 py-6"
>
<Link to="/contact" className="flex items-center space-x-2"> <Link to="/contact" className="flex items-center space-x-2">
<Beaker className="h-5 w-5" /> <Beaker className="h-5 w-5" />
<span>Research Partnership</span> <span>Research Partnership</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-neon-yellow/50 hover:border-neon-yellow hover-lift text-lg px-8 py-6"> <Button
asChild
variant="outline"
size="lg"
className="border-neon-yellow/50 hover:border-neon-yellow hover-lift text-lg px-8 py-6"
>
<Link to="/docs">Access Publications</Link> <Link to="/docs">Access Publications</Link>
</Button> </Button>
</div> </div>
@ -391,17 +469,23 @@ export default function ResearchLabs() {
<div className="text-center"> <div className="text-center">
<Database className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Database className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Open Data</h3> <h3 className="font-semibold">Open Data</h3>
<p className="text-sm text-muted-foreground">Research datasets</p> <p className="text-sm text-muted-foreground">
Research datasets
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<ExternalLink className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <ExternalLink className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Collaborations</h3> <h3 className="font-semibold">Collaborations</h3>
<p className="text-sm text-muted-foreground">University partnerships</p> <p className="text-sm text-muted-foreground">
University partnerships
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Rocket className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Rocket className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Innovation</h3> <h3 className="font-semibold">Innovation</h3>
<p className="text-sm text-muted-foreground">Breakthrough research</p> <p className="text-sm text-muted-foreground">
Breakthrough research
</p>
</div> </div>
</div> </div>
</div> </div>

242
client/pages/Support.tsx
View file

@ -1,15 +1,21 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen"; import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast"; import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
Headphones, Headphones,
MessageCircle, MessageCircle,
Clock, Clock,
CheckCircle, CheckCircle,
ArrowRight, ArrowRight,
Search, Search,
@ -23,7 +29,7 @@ import {
Bug, Bug,
Lightbulb, Lightbulb,
Shield, Shield,
Zap Zap,
} from "lucide-react"; } from "lucide-react";
export default function Support() { export default function Support() {
@ -51,7 +57,7 @@ export default function Support() {
availability: "24/7", availability: "24/7",
responseTime: "< 5 minutes", responseTime: "< 5 minutes",
bestFor: "Urgent issues, quick questions", bestFor: "Urgent issues, quick questions",
color: "from-green-500 to-emerald-600" color: "from-green-500 to-emerald-600",
}, },
{ {
title: "Email Support", title: "Email Support",
@ -60,7 +66,7 @@ export default function Support() {
availability: "Business hours", availability: "Business hours",
responseTime: "< 4 hours", responseTime: "< 4 hours",
bestFor: "Technical issues, account problems", bestFor: "Technical issues, account problems",
color: "from-blue-500 to-cyan-600" color: "from-blue-500 to-cyan-600",
}, },
{ {
title: "Phone Support", title: "Phone Support",
@ -69,7 +75,7 @@ export default function Support() {
availability: "Mon-Fri 9AM-6PM PST", availability: "Mon-Fri 9AM-6PM PST",
responseTime: "Immediate", responseTime: "Immediate",
bestFor: "Enterprise customers, urgent issues", bestFor: "Enterprise customers, urgent issues",
color: "from-purple-500 to-indigo-600" color: "from-purple-500 to-indigo-600",
}, },
{ {
title: "Community Forum", title: "Community Forum",
@ -78,8 +84,8 @@ export default function Support() {
availability: "24/7", availability: "24/7",
responseTime: "< 2 hours", responseTime: "< 2 hours",
bestFor: "General questions, discussions", bestFor: "General questions, discussions",
color: "from-orange-500 to-red-600" color: "from-orange-500 to-red-600",
} },
]; ];
const faqs = [ const faqs = [
@ -88,46 +94,52 @@ export default function Support() {
questions: [ questions: [
{ {
question: "How do I create my first AeThex project?", question: "How do I create my first AeThex project?",
answer: "Install the AeThex CLI with 'npm install -g @aethex/cli', then run 'aethex create my-project' to get started.", answer:
helpful: 89 "Install the AeThex CLI with 'npm install -g @aethex/cli', then run 'aethex create my-project' to get started.",
helpful: 89,
}, },
{ {
question: "What are the system requirements?", question: "What are the system requirements?",
answer: "AeThex works on Windows 10+, macOS 10.15+, and Ubuntu 18.04+. You'll need Node.js 16+ and 4GB RAM minimum.", answer:
helpful: 76 "AeThex works on Windows 10+, macOS 10.15+, and Ubuntu 18.04+. You'll need Node.js 16+ and 4GB RAM minimum.",
} helpful: 76,
] },
],
}, },
{ {
category: "Technical Issues", category: "Technical Issues",
questions: [ questions: [
{ {
question: "My game is running slowly, how can I optimize it?", question: "My game is running slowly, how can I optimize it?",
answer: "Check our performance optimization guide. Common fixes include reducing texture sizes, optimizing scripts, and using object pooling.", answer:
helpful: 94 "Check our performance optimization guide. Common fixes include reducing texture sizes, optimizing scripts, and using object pooling.",
helpful: 94,
}, },
{ {
question: "How do I fix deployment errors?", question: "How do I fix deployment errors?",
answer: "Most deployment errors are due to configuration issues. Check your environment variables and API keys in the AeThex dashboard.", answer:
helpful: 82 "Most deployment errors are due to configuration issues. Check your environment variables and API keys in the AeThex dashboard.",
} helpful: 82,
] },
],
}, },
{ {
category: "Billing & Account", category: "Billing & Account",
questions: [ questions: [
{ {
question: "How do I upgrade my plan?", question: "How do I upgrade my plan?",
answer: "Visit your account dashboard and click 'Upgrade Plan'. Changes take effect immediately with prorated billing.", answer:
helpful: 91 "Visit your account dashboard and click 'Upgrade Plan'. Changes take effect immediately with prorated billing.",
helpful: 91,
}, },
{ {
question: "Can I cancel my subscription anytime?", question: "Can I cancel my subscription anytime?",
answer: "Yes, you can cancel anytime from your account settings. You'll retain access until the end of your billing period.", answer:
helpful: 88 "Yes, you can cancel anytime from your account settings. You'll retain access until the end of your billing period.",
} helpful: 88,
] },
} ],
},
]; ];
const resources = [ const resources = [
@ -136,39 +148,57 @@ export default function Support() {
description: "Comprehensive guides and API references", description: "Comprehensive guides and API references",
icon: Book, icon: Book,
link: "/docs", link: "/docs",
color: "from-blue-500 to-cyan-600" color: "from-blue-500 to-cyan-600",
}, },
{ {
title: "Video Tutorials", title: "Video Tutorials",
description: "Step-by-step visual learning", description: "Step-by-step visual learning",
icon: Video, icon: Video,
link: "/tutorials", link: "/tutorials",
color: "from-red-500 to-pink-600" color: "from-red-500 to-pink-600",
}, },
{ {
title: "System Status", title: "System Status",
description: "Real-time service status and updates", description: "Real-time service status and updates",
icon: Settings, icon: Settings,
link: "/status", link: "/status",
color: "from-green-500 to-emerald-600" color: "from-green-500 to-emerald-600",
}, },
{ {
title: "Feature Requests", title: "Feature Requests",
description: "Suggest new features and improvements", description: "Suggest new features and improvements",
icon: Lightbulb, icon: Lightbulb,
link: "/feedback", link: "/feedback",
color: "from-yellow-500 to-orange-600" color: "from-yellow-500 to-orange-600",
} },
]; ];
const categories = ["all", "getting-started", "technical", "billing", "account"]; const categories = [
"all",
"getting-started",
"technical",
"billing",
"account",
];
const filteredFaqs = selectedCategory === "all" const filteredFaqs =
? faqs selectedCategory === "all"
: faqs.filter(faq => faq.category.toLowerCase().replace(/\s+/g, '-').includes(selectedCategory.replace('-', ' '))); ? faqs
: faqs.filter((faq) =>
faq.category
.toLowerCase()
.replace(/\s+/g, "-")
.includes(selectedCategory.replace("-", " ")),
);
if (isLoading) { if (isLoading) {
return <LoadingScreen message="Loading Support Center..." showProgress={true} duration={1000} />; return (
<LoadingScreen
message="Loading Support Center..."
showProgress={true}
duration={1000}
/>
);
} }
return ( return (
@ -178,18 +208,21 @@ export default function Support() {
<section className="relative py-20 lg:py-32"> <section className="relative py-20 lg:py-32">
<div className="container mx-auto px-4 text-center relative z-10"> <div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-4xl mx-auto space-y-8">
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"> <Badge
variant="outline"
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
>
<Headphones className="h-3 w-3 mr-1" /> <Headphones className="h-3 w-3 mr-1" />
Support Center Support Center
</Badge> </Badge>
<h1 className="text-4xl lg:text-6xl font-bold leading-tight"> <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
<span className="text-gradient-purple">We're Here to Help</span> <span className="text-gradient-purple">We're Here to Help</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Get the support you need to succeed with AeThex. Our team of experts Get the support you need to succeed with AeThex. Our team of
is ready to help you overcome any challenge. experts is ready to help you overcome any challenge.
</p> </p>
{/* Search Bar */} {/* Search Bar */}
@ -221,18 +254,22 @@ export default function Support() {
{supportOptions.map((option, index) => { {supportOptions.map((option, index) => {
const Icon = option.icon; const Icon = option.icon;
return ( return (
<Card <Card
key={index} key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in" className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
<CardHeader> <CardHeader>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className={`p-3 rounded-lg bg-gradient-to-r ${option.color}`}> <div
className={`p-3 rounded-lg bg-gradient-to-r ${option.color}`}
>
<Icon className="h-6 w-6 text-white" /> <Icon className="h-6 w-6 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<CardTitle className="text-xl">{option.title}</CardTitle> <CardTitle className="text-xl">
{option.title}
</CardTitle>
<CardDescription className="mt-1"> <CardDescription className="mt-1">
{option.description} {option.description}
</CardDescription> </CardDescription>
@ -242,19 +279,31 @@ export default function Support() {
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-1 gap-3 text-sm"> <div className="grid grid-cols-1 gap-3 text-sm">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground">Availability:</span> <span className="text-muted-foreground">
<span className="font-semibold text-aethex-400">{option.availability}</span> Availability:
</span>
<span className="font-semibold text-aethex-400">
{option.availability}
</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground">Response Time:</span> <span className="text-muted-foreground">
<span className="font-semibold text-aethex-400">{option.responseTime}</span> Response Time:
</span>
<span className="font-semibold text-aethex-400">
{option.responseTime}
</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground">Best For:</span> <span className="text-muted-foreground">
<span className="font-semibold">{option.bestFor}</span> Best For:
</span>
<span className="font-semibold">
{option.bestFor}
</span>
</div> </div>
</div> </div>
<Button asChild className="w-full"> <Button asChild className="w-full">
<Link to="/contact"> <Link to="/contact">
Get Support Get Support
@ -287,17 +336,20 @@ export default function Support() {
{categories.map((category, index) => ( {categories.map((category, index) => (
<Button <Button
key={category} key={category}
variant={selectedCategory === category ? "default" : "outline"} variant={
selectedCategory === category ? "default" : "outline"
}
size="sm" size="sm"
onClick={() => setSelectedCategory(category)} onClick={() => setSelectedCategory(category)}
className={`animate-scale-in ${ className={`animate-scale-in ${
selectedCategory === category selectedCategory === category
? 'bg-gradient-to-r from-aethex-500 to-neon-blue' ? "bg-gradient-to-r from-aethex-500 to-neon-blue"
: '' : ""
}`} }`}
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
{category.charAt(0).toUpperCase() + category.slice(1).replace('-', ' ')} {category.charAt(0).toUpperCase() +
category.slice(1).replace("-", " ")}
</Button> </Button>
))} ))}
</div> </div>
@ -306,10 +358,12 @@ export default function Support() {
<div className="space-y-8"> <div className="space-y-8">
{filteredFaqs.map((category, categoryIndex) => ( {filteredFaqs.map((category, categoryIndex) => (
<div key={categoryIndex}> <div key={categoryIndex}>
<h3 className="text-xl font-semibold text-gradient mb-4">{category.category}</h3> <h3 className="text-xl font-semibold text-gradient mb-4">
{category.category}
</h3>
<div className="space-y-4"> <div className="space-y-4">
{category.questions.map((faq, faqIndex) => ( {category.questions.map((faq, faqIndex) => (
<Card <Card
key={faqIndex} key={faqIndex}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right" className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right"
style={{ animationDelay: `${faqIndex * 0.1}s` }} style={{ animationDelay: `${faqIndex * 0.1}s` }}
@ -317,10 +371,14 @@ export default function Support() {
<CardContent className="p-6"> <CardContent className="p-6">
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<h4 className="font-semibold text-lg">{faq.question}</h4> <h4 className="font-semibold text-lg">
{faq.question}
</h4>
<HelpCircle className="h-5 w-5 text-aethex-400 flex-shrink-0 mt-0.5" /> <HelpCircle className="h-5 w-5 text-aethex-400 flex-shrink-0 mt-0.5" />
</div> </div>
<p className="text-muted-foreground">{faq.answer}</p> <p className="text-muted-foreground">
{faq.answer}
</p>
<div className="flex items-center justify-between pt-3 border-t border-border/30"> <div className="flex items-center justify-between pt-3 border-t border-border/30">
<div className="flex items-center space-x-2 text-sm text-muted-foreground"> <div className="flex items-center space-x-2 text-sm text-muted-foreground">
<CheckCircle className="h-4 w-4 text-green-400" /> <CheckCircle className="h-4 w-4 text-green-400" />
@ -363,16 +421,20 @@ export default function Support() {
{resources.map((resource, index) => { {resources.map((resource, index) => {
const Icon = resource.icon; const Icon = resource.icon;
return ( return (
<Card <Card
key={index} key={index}
className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in" className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.1}s` }} style={{ animationDelay: `${index * 0.1}s` }}
> >
<CardHeader> <CardHeader>
<div className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}> <div
className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}
>
<Icon className="h-8 w-8 text-white" /> <Icon className="h-8 w-8 text-white" />
</div> </div>
<CardTitle className="text-lg">{resource.title}</CardTitle> <CardTitle className="text-lg">
{resource.title}
</CardTitle>
<CardDescription>{resource.description}</CardDescription> <CardDescription>{resource.description}</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@ -400,17 +462,24 @@ export default function Support() {
<Zap className="h-8 w-8 text-red-400" /> <Zap className="h-8 w-8 text-red-400" />
</div> </div>
</div> </div>
<h3 className="text-2xl font-bold text-gradient mb-4">Critical Issue?</h3> <h3 className="text-2xl font-bold text-gradient mb-4">
Critical Issue?
</h3>
<p className="text-muted-foreground mb-6"> <p className="text-muted-foreground mb-6">
If you're experiencing a critical production issue that's affecting your users, If you're experiencing a critical production issue that's
contact our emergency support line for immediate assistance. affecting your users, contact our emergency support line for
immediate assistance.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <div className="flex flex-col sm:flex-row justify-center gap-4">
<Button size="lg" className="bg-red-500 hover:bg-red-600"> <Button size="lg" className="bg-red-500 hover:bg-red-600">
<Phone className="h-5 w-5 mr-2" /> <Phone className="h-5 w-5 mr-2" />
Emergency Hotline Emergency Hotline
</Button> </Button>
<Button size="lg" variant="outline" className="border-red-500/50 text-red-400 hover:bg-red-500/10"> <Button
size="lg"
variant="outline"
className="border-red-500/50 text-red-400 hover:bg-red-500/10"
>
<Bug className="h-5 w-5 mr-2" /> <Bug className="h-5 w-5 mr-2" />
Report Critical Bug Report Critical Bug
</Button> </Button>
@ -428,19 +497,28 @@ export default function Support() {
Still Need Help? Still Need Help?
</h2> </h2>
<p className="text-xl text-muted-foreground"> <p className="text-xl text-muted-foreground">
Our support team is standing by to help you succeed. Don't hesitate to reach out Our support team is standing by to help you succeed. Don't
with any questions or concerns. hesitate to reach out with any questions or concerns.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <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 text-lg px-8 py-6"> <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-lg px-8 py-6"
>
<Link to="/contact" className="flex items-center space-x-2"> <Link to="/contact" className="flex items-center space-x-2">
<MessageCircle className="h-5 w-5" /> <MessageCircle className="h-5 w-5" />
<span>Contact Support</span> <span>Contact Support</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"> <Button
asChild
variant="outline"
size="lg"
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
>
<Link to="/community">Join Community</Link> <Link to="/community">Join Community</Link>
</Button> </Button>
</div> </div>
@ -449,17 +527,23 @@ export default function Support() {
<div className="text-center"> <div className="text-center">
<Clock className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Clock className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">24/7 Availability</h3> <h3 className="font-semibold">24/7 Availability</h3>
<p className="text-sm text-muted-foreground">Always here for you</p> <p className="text-sm text-muted-foreground">
Always here for you
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Expert Team</h3> <h3 className="font-semibold">Expert Team</h3>
<p className="text-sm text-muted-foreground">Technical specialists</p> <p className="text-sm text-muted-foreground">
Technical specialists
</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<FileText className="h-8 w-8 text-aethex-400 mx-auto mb-2" /> <FileText className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<h3 className="font-semibold">Comprehensive Docs</h3> <h3 className="font-semibold">Comprehensive Docs</h3>
<p className="text-sm text-muted-foreground">Detailed guides</p> <p className="text-sm text-muted-foreground">
Detailed guides
</p>
</div> </div>
</div> </div>
</div> </div>