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

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 />} />
{/* Placeholder routes for navigation links */}
<Route path="/about" 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." />} />
<Route
path="/about"
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 */}
<Route 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." />} />
<Route
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 */}
<Route path="*" element={<NotFound />} />

162
client/components/Layout.tsx
View file

@ -17,7 +17,7 @@ export default function Layout({ children }: LayoutProps) {
];
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
window.scrollTo({ top: 0, behavior: "smooth" });
};
return (
@ -32,7 +32,9 @@ export default function Layout({ children }: LayoutProps) {
alt="AeThex Logo"
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>
</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",
location.pathname === item.href
? "text-aethex-500 animate-pulse-glow"
: "text-muted-foreground"
: "text-muted-foreground",
)}
style={{ animationDelay: `${index * 0.1}s` }}
>
@ -60,10 +62,17 @@ export default function Layout({ children }: LayoutProps) {
{/* CTA */}
<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>
</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>
</Button>
</div>
@ -83,55 +92,154 @@ export default function Layout({ children }: LayoutProps) {
alt="AeThex Logo"
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>
<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>
</div>
{/* Services */}
<div 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>
<div
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">
<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><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>
<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>
<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>
</div>
{/* Resources */}
<div 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>
<div
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">
<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><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>
<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>
<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>
</div>
{/* Contact */}
<div 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>
<div
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">
<li className="hover:text-aethex-400 transition-colors">Queen Creek, Arizona</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>
<li className="hover:text-aethex-400 transition-colors">
Queen Creek, Arizona
</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>
</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">
© 2024 AeThex Corporation. All rights reserved.
</p>
<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
</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
</Link>
</div>

53
client/components/LoadingScreen.tsx
View file

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

53
client/components/Skeleton.tsx
View file

@ -2,29 +2,30 @@ import { cn } from "@/lib/utils";
interface SkeletonProps {
className?: string;
variant?: 'text' | 'avatar' | 'card' | 'button' | 'image';
variant?: "text" | "avatar" | "card" | "button" | "image";
lines?: number;
animate?: boolean;
}
export function Skeleton({ className, variant = 'text', lines = 1, animate = true }: SkeletonProps) {
const baseClasses = cn(
"bg-muted rounded",
animate && "skeleton",
className
);
export function Skeleton({
className,
variant = "text",
lines = 1,
animate = true,
}: SkeletonProps) {
const baseClasses = cn("bg-muted rounded", animate && "skeleton", className);
switch (variant) {
case 'avatar':
case "avatar":
return <div className={cn(baseClasses, "h-12 w-12 rounded-full")} />;
case 'button':
case "button":
return <div className={cn(baseClasses, "h-10 w-24")} />;
case 'image':
case "image":
return <div className={cn(baseClasses, "h-48 w-full")} />;
case 'card':
case "card":
return (
<div className={cn("space-y-3 p-4 border rounded-lg", className)}>
<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>
);
case 'text':
case "text":
default:
return (
<div className="space-y-2">
@ -43,7 +44,7 @@ export function Skeleton({ className, variant = 'text', lines = 1, animate = tru
className={cn(
baseClasses,
"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 (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{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">
<Skeleton className="h-12 w-12 rounded-lg" />
<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-4 w-96 mx-auto" />
</div>
<div className="max-w-2xl mx-auto space-y-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{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-4 w-full" />
</div>
))}
</div>
</div>
<div className="flex justify-between pt-6">
<Skeleton variant="button" className="w-20" />
<Skeleton variant="button" className="w-24" />
@ -161,7 +168,7 @@ export function SkeletonLayout() {
</div>
</div>
</div>
{/* Content Skeleton */}
<div className="py-20">
<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" />
</div>
</div>
<SkeletonStats />
<SkeletonUserPath />
</div>

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

@ -14,40 +14,77 @@ interface ExperienceProps {
}
const experienceLevels = [
{ 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: 'expert', label: 'Expert', description: '7+ years experience' },
{ 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: "expert", label: "Expert", description: "7+ years experience" },
];
const skillSuggestions = {
'game-developer': [
'Unity', 'Unreal Engine', 'C#', 'C++', 'JavaScript', 'Python', 'Blender', '3D Modeling',
'Game Design', 'Level Design', 'Animation', 'Shader Programming', 'Roblox Development'
"game-developer": [
"Unity",
"Unreal Engine",
"C#",
"C++",
"JavaScript",
"Python",
"Blender",
"3D Modeling",
"Game Design",
"Level Design",
"Animation",
"Shader Programming",
"Roblox Development",
],
'client': [
'Project Management', 'Business Strategy', 'Product Development', 'Marketing',
'Team Leadership', 'Budget Management', 'Quality Assurance', 'User Experience'
client: [
"Project Management",
"Business Strategy",
"Product Development",
"Marketing",
"Team Leadership",
"Budget Management",
"Quality Assurance",
"User Experience",
],
'member': [
'Research', 'Innovation', 'Technology Trends', 'Community Building', 'Networking',
'Content Creation', 'Documentation', 'Knowledge Sharing'
member: [
"Research",
"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) {
const [newSkill, setNewSkill] = useState('');
export default function Experience({
data,
updateData,
nextStep,
prevStep,
}: ExperienceProps) {
const [newSkill, setNewSkill] = useState("");
const handleLevelChange = (level: string) => {
updateData({
experience: {
...data.experience,
level
}
level,
},
});
};
@ -56,19 +93,21 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
updateData({
experience: {
...data.experience,
skills: [...data.experience.skills, skill]
}
skills: [...data.experience.skills, skill],
},
});
}
setNewSkill('');
setNewSkill("");
};
const handleSkillRemove = (skillToRemove: string) => {
updateData({
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({
experience: {
...data.experience,
previousProjects: projects
}
previousProjects: projects,
},
});
};
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 (
<div className="space-y-6">
@ -103,12 +144,14 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
onClick={() => handleLevelChange(level.id)}
className={`p-4 rounded-lg border-2 text-left transition-all duration-200 ${
data.experience.level === level.id
? 'border-aethex-500 bg-aethex-500/10 glow-purple'
: 'border-border/50 hover:border-aethex-400/50 bg-background/50'
? "border-aethex-500 bg-aethex-500/10 glow-purple"
: "border-border/50 hover:border-aethex-400/50 bg-background/50"
}`}
>
<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>
))}
</div>
@ -117,7 +160,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
{/* Skills */}
<div className="space-y-3">
<Label className="text-sm font-medium">Skills & Technologies *</Label>
{/* Current Skills */}
{data.experience.skills.length > 0 && (
<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)}
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"
onKeyPress={(e) => e.key === 'Enter' && handleSkillAdd(newSkill)}
onKeyPress={(e) => e.key === "Enter" && handleSkillAdd(newSkill)}
/>
<Button
size="sm"
@ -160,10 +203,12 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
{/* Skill Suggestions */}
{suggestions.length > 0 && (
<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">
{suggestions
.filter(skill => !data.experience.skills.includes(skill))
.filter((skill) => !data.experience.skills.includes(skill))
.slice(0, 8)
.map((skill) => (
<button
@ -180,7 +225,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
</div>
{/* 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">
<Label htmlFor="projects" className="text-sm font-medium">
Previous Projects or Experience
@ -188,7 +233,7 @@ export default function Experience({ data, updateData, nextStep, prevStep }: Exp
</Label>
<Textarea
id="projects"
value={data.experience.previousProjects || ''}
value={data.experience.previousProjects || ""}
onChange={(e) => handleProjectsChange(e.target.value)}
placeholder="Tell us about your previous projects, experiences, or achievements..."
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 className="flex justify-between pt-6">
<Button
variant="outline"
<Button
variant="outline"
onClick={prevStep}
className="flex items-center space-x-2"
>
<ArrowLeft className="h-4 w-4" />
<span>Back</span>
</Button>
<Button
<Button
onClick={nextStep}
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"

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

@ -11,130 +11,138 @@ interface InterestsProps {
}
const goalOptions = {
'game-developer': [
'Learn new game development technologies',
'Get mentorship from industry experts',
'Collaborate on innovative projects',
'Build a portfolio of game projects',
'Join a development team',
'Start freelancing in game development',
'Improve programming skills',
'Learn game design principles'
"game-developer": [
"Learn new game development technologies",
"Get mentorship from industry experts",
"Collaborate on innovative projects",
"Build a portfolio of game projects",
"Join a development team",
"Start freelancing in game development",
"Improve programming skills",
"Learn game design principles",
],
'client': [
'Develop a custom game or application',
'Get technical consulting for my project',
'Find reliable development partners',
'Scale my existing game/platform',
'Implement new features or technologies',
'Optimize performance and user experience',
'Launch a new digital product',
'Build a development team'
client: [
"Develop a custom game or application",
"Get technical consulting for my project",
"Find reliable development partners",
"Scale my existing game/platform",
"Implement new features or technologies",
"Optimize performance and user experience",
"Launch a new digital product",
"Build a development team",
],
'member': [
'Stay updated on industry trends',
'Network with tech professionals',
'Access research and insights',
'Participate in innovation projects',
'Share knowledge with the community',
'Explore new technologies',
'Contribute to open source projects',
'Attend workshops and events'
member: [
"Stay updated on industry trends",
"Network with tech professionals",
"Access research and insights",
"Participate in innovation projects",
"Share knowledge with the community",
"Explore new technologies",
"Contribute to open source projects",
"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 = {
'game-developer': [
'Mentorship Programs',
'Development Tools Access',
'Collaborative Projects',
'Technical Workshops',
'Code Review Services',
'Career Guidance',
'Networking Events',
'Skill Assessments'
"game-developer": [
"Mentorship Programs",
"Development Tools Access",
"Collaborative Projects",
"Technical Workshops",
"Code Review Services",
"Career Guidance",
"Networking Events",
"Skill Assessments",
],
'client': [
'Custom Game Development',
'Technical Consulting',
'Project Management',
'Quality Assurance',
'Performance Optimization',
'Team Augmentation',
'Technology Integration',
'Ongoing Support'
client: [
"Custom Game Development",
"Technical Consulting",
"Project Management",
"Quality Assurance",
"Performance Optimization",
"Team Augmentation",
"Technology Integration",
"Ongoing Support",
],
'member': [
'Research Access',
'Community Forums',
'Expert Insights',
'Innovation Labs',
'Knowledge Base',
'Networking Platform',
'Event Participation',
'Content Library'
member: [
"Research Access",
"Community Forums",
"Expert Insights",
"Innovation Labs",
"Knowledge Base",
"Networking Platform",
"Event Participation",
"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 services = data.userType ? serviceOptions[data.userType] || [] : [];
const handleGoalToggle = (goal: string) => {
const currentGoals = data.interests.primaryGoals;
const updatedGoals = currentGoals.includes(goal)
? currentGoals.filter(g => g !== goal)
? currentGoals.filter((g) => g !== goal)
: [...currentGoals, goal];
updateData({
interests: {
...data.interests,
primaryGoals: updatedGoals
}
primaryGoals: updatedGoals,
},
});
};
const handleServiceToggle = (service: string) => {
const currentServices = data.interests.preferredServices;
const updatedServices = currentServices.includes(service)
? currentServices.filter(s => s !== service)
? currentServices.filter((s) => s !== service)
: [...currentServices, service];
updateData({
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 (
<div className="space-y-6">
<div className="text-center space-y-2">
<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>
</div>
@ -152,8 +160,8 @@ export default function Interests({ data, updateData, nextStep, prevStep }: Inte
onClick={() => handleGoalToggle(goal)}
className={`p-3 rounded-lg border-2 text-left text-sm transition-all duration-200 ${
isSelected
? '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-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"
}`}
>
{goal}
@ -166,18 +174,21 @@ export default function Interests({ data, updateData, nextStep, prevStep }: Inte
{/* Preferred Services */}
<div className="space-y-3">
<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">
{services.map((service) => {
const isSelected = data.interests.preferredServices.includes(service);
const isSelected =
data.interests.preferredServices.includes(service);
return (
<button
key={service}
onClick={() => handleServiceToggle(service)}
className={`p-3 rounded-lg border-2 text-left text-sm transition-all duration-200 ${
isSelected
? '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-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"
}`}
>
{service}
@ -189,16 +200,16 @@ export default function Interests({ data, updateData, nextStep, prevStep }: Inte
</div>
<div className="flex justify-between pt-6">
<Button
variant="outline"
<Button
variant="outline"
onClick={prevStep}
className="flex items-center space-x-2"
>
<ArrowLeft className="h-4 w-4" />
<span>Back</span>
</Button>
<Button
<Button
onClick={nextStep}
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"

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

@ -11,25 +11,38 @@ interface PersonalInfoProps {
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) => {
updateData({
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 = () => {
switch (data.userType) {
case 'game-developer': return 'Game Developer';
case 'client': return 'Client';
case 'member': return 'Community Member';
case 'customer': return 'Customer';
default: return 'User';
case "game-developer":
return "Game Developer";
case "client":
return "Client";
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
id="firstName"
value={data.personalInfo.firstName}
onChange={(e) => handleInputChange('firstName', e.target.value)}
onChange={(e) => handleInputChange("firstName", e.target.value)}
placeholder="Enter your first name"
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
id="lastName"
value={data.personalInfo.lastName}
onChange={(e) => handleInputChange('lastName', e.target.value)}
onChange={(e) => handleInputChange("lastName", e.target.value)}
placeholder="Enter your last name"
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"
type="email"
value={data.personalInfo.email}
onChange={(e) => handleInputChange('email', e.target.value)}
onChange={(e) => handleInputChange("email", e.target.value)}
placeholder="Enter your email address"
className="bg-background/50 border-border/50 focus:border-aethex-400"
/>
</div>
{(data.userType === 'client' || data.userType === 'game-developer') && (
{(data.userType === "client" || data.userType === "game-developer") && (
<div className="space-y-2">
<Label htmlFor="company" className="text-sm font-medium">
Company / Organization
{data.userType === 'client' && ' *'}
{data.userType === "client" && " *"}
</Label>
<Input
id="company"
value={data.personalInfo.company || ''}
onChange={(e) => handleInputChange('company', e.target.value)}
value={data.personalInfo.company || ""}
onChange={(e) => handleInputChange("company", e.target.value)}
placeholder={
data.userType === 'client'
? "Enter your company name"
data.userType === "client"
? "Enter your company name"
: "Enter your company/organization (optional)"
}
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
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"
>
<span>Continue</span>
@ -125,9 +141,7 @@ export default function PersonalInfo({ data, updateData, nextStep, prevStep }: P
</div>
<div className="text-center">
<p className="text-xs text-muted-foreground">
* Required fields
</p>
<p className="text-xs text-muted-foreground">* Required fields</p>
</div>
</div>
);

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

@ -1,7 +1,18 @@
import { UserType, OnboardingData } from "@/pages/Onboarding";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { GamepadIcon, BriefcaseIcon, UsersIcon, ShoppingCartIcon } from "lucide-react";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
GamepadIcon,
BriefcaseIcon,
UsersIcon,
ShoppingCartIcon,
} from "lucide-react";
interface UserTypeSelectionProps {
data: OnboardingData;
@ -11,60 +22,68 @@ interface UserTypeSelectionProps {
const userTypes = [
{
id: 'game-developer' as UserType,
title: 'Game Developer',
description: 'Join our development community, access tools, mentorship, and collaborate on cutting-edge game projects.',
id: "game-developer" as UserType,
title: "Game Developer",
description:
"Join our development community, access tools, mentorship, and collaborate on cutting-edge game projects.",
icon: GamepadIcon,
benefits: [
'Access to development tools and frameworks',
'Mentorship from industry veterans',
'Collaborative project opportunities',
'Technical workshops and boot camps'
"Access to development tools and frameworks",
"Mentorship from industry veterans",
"Collaborative project opportunities",
"Technical workshops and boot camps",
],
color: 'from-neon-purple to-aethex-500'
color: "from-neon-purple to-aethex-500",
},
{
id: 'client' as UserType,
title: 'Client',
description: 'Partner with us for custom game development, consulting services, and technical solutions.',
id: "client" as UserType,
title: "Client",
description:
"Partner with us for custom game development, consulting services, and technical solutions.",
icon: BriefcaseIcon,
benefits: [
'Custom game development services',
'Technical consulting and strategy',
'Project management expertise',
'End-to-end solution delivery'
"Custom game development services",
"Technical consulting and strategy",
"Project management expertise",
"End-to-end solution delivery",
],
color: 'from-neon-blue to-aethex-400'
color: "from-neon-blue to-aethex-400",
},
{
id: 'member' as UserType,
title: 'Community Member',
description: 'Be part of our innovation community with access to research, networking, and exclusive content.',
id: "member" as UserType,
title: "Community Member",
description:
"Be part of our innovation community with access to research, networking, and exclusive content.",
icon: UsersIcon,
benefits: [
'Access to research and publications',
'Networking with industry professionals',
'Exclusive community events',
'Early access to new technologies'
"Access to research and publications",
"Networking with industry professionals",
"Exclusive community events",
"Early access to new technologies",
],
color: 'from-neon-green to-aethex-600'
color: "from-neon-green to-aethex-600",
},
{
id: 'customer' as UserType,
title: 'Customer',
description: 'Explore our games, tools, and products designed to enhance your gaming and development experience.',
id: "customer" as UserType,
title: "Customer",
description:
"Explore our games, tools, and products designed to enhance your gaming and development experience.",
icon: ShoppingCartIcon,
benefits: [
'Access to premium games and tools',
'Customer support and documentation',
'Regular updates and new releases',
'Community forums and discussions'
"Access to premium games and tools",
"Customer support and documentation",
"Regular updates and new releases",
"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) => {
updateData({ userType });
setTimeout(() => {
@ -90,19 +109,23 @@ export default function UserTypeSelection({ data, updateData, nextStep }: UserTy
key={type.id}
className={`cursor-pointer transition-all duration-500 hover-lift interactive-scale border-2 animate-scale-in ${
isSelected
? 'border-aethex-500 glow-purple animate-pulse-glow'
: 'border-border/50 hover:border-aethex-400/50'
? "border-aethex-500 glow-purple animate-pulse-glow"
: "border-border/50 hover:border-aethex-400/50"
}`}
style={{ animationDelay: `${index * 0.1}s` }}
onClick={() => handleSelectType(type.id)}
>
<CardHeader className="pb-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" />
</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}
</CardTitle>
</div>
@ -117,11 +140,17 @@ export default function UserTypeSelection({ data, updateData, nextStep }: UserTy
<li
key={benefitIndex}
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}
</li>
))}
@ -132,9 +161,13 @@ export default function UserTypeSelection({ data, updateData, nextStep }: UserTy
})}
</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">
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>
</div>
</div>

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

@ -1,6 +1,12 @@
import { OnboardingData } from "@/pages/Onboarding";
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 { Link } from "react-router-dom";
@ -11,43 +17,97 @@ interface WelcomeProps {
export default function Welcome({ data }: WelcomeProps) {
const getUserTypeLabel = () => {
switch (data.userType) {
case 'game-developer': return 'Game Developer';
case 'client': return 'Client';
case 'member': return 'Community Member';
case 'customer': return 'Customer';
default: return 'User';
case "game-developer":
return "Game Developer";
case "client":
return "Client";
case "member":
return "Community Member";
case "customer":
return "Customer";
default:
return "User";
}
};
const getNextSteps = () => {
switch (data.userType) {
case 'game-developer':
case "game-developer":
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: 'Explore Projects', description: 'Browse collaborative projects and opportunities' },
{ title: 'Attend Workshops', description: 'Join our next technical workshop or boot camp' }
{
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: "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 [
{ 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: 'Get Project Quote', description: 'Receive a detailed quote for your development needs' },
{ title: 'Meet Your Team', description: 'Connect with our development specialists' }
{
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: "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 [
{ title: 'Explore Research', description: 'Access our latest research and publications' },
{ 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' }
{
title: "Explore Research",
description: "Access our latest research and publications",
},
{
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 [
{ 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: 'Community Hub', description: 'Connect with other users and share feedback' },
{ title: 'Support Center', description: 'Access documentation and customer support' }
{
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: "Community Hub",
description: "Connect with other users and share feedback",
},
{
title: "Support Center",
description: "Access documentation and customer support",
},
];
default:
return [];
@ -64,13 +124,14 @@ export default function Welcome({ data }: WelcomeProps) {
<CheckCircle className="h-12 w-12 text-white" />
</div>
</div>
<div className="space-y-2">
<h2 className="text-2xl font-bold text-gradient-purple">
Welcome to AeThex, {data.personalInfo.firstName}!
</h2>
<p className="text-muted-foreground">
Your {getUserTypeLabel().toLowerCase()} account has been successfully set up
Your {getUserTypeLabel().toLowerCase()} account has been
successfully set up
</p>
</div>
</div>
@ -91,15 +152,22 @@ export default function Welcome({ data }: WelcomeProps) {
</div>
<div>
<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>
<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>
<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>
</CardContent>
@ -110,7 +178,10 @@ export default function Welcome({ data }: WelcomeProps) {
<h3 className="text-lg font-semibold text-center">What's Next?</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{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">
<CardTitle className="text-sm">{step.title}</CardTitle>
</CardHeader>
@ -129,7 +200,10 @@ export default function Welcome({ data }: WelcomeProps) {
<Button asChild variant="outline" className="border-border/50">
<Link to="/dashboard">Go to Dashboard</Link>
</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">
<span>Get Started</span>
<ArrowRight className="h-4 w-4" />
@ -139,7 +213,10 @@ export default function Welcome({ data }: WelcomeProps) {
<div className="text-center pt-4">
<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>
</div>
</div>

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

@ -9,7 +9,8 @@ const buttonVariants = cva(
{
variants: {
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:
"bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:shadow-lg hover:shadow-destructive/25",
outline:
@ -50,17 +51,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const ripple = document.createElement('span');
ripple.style.position = 'absolute';
ripple.style.borderRadius = '50%';
ripple.style.transform = 'scale(0)';
ripple.style.animation = 'ripple 0.6s linear';
ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
const ripple = document.createElement("span");
ripple.style.position = "absolute";
ripple.style.borderRadius = "50%";
ripple.style.transform = "scale(0)";
ripple.style.animation = "ripple 0.6s linear";
ripple.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
const size = Math.max(rect.width, rect.height);
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x - size / 2 + 'px';
ripple.style.top = y - size / 2 + 'px';
ripple.style.width = ripple.style.height = size + "px";
ripple.style.left = x - size / 2 + "px";
ripple.style.top = y - size / 2 + "px";
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",
warning:
"border-yellow-500/50 bg-yellow-500/10 text-yellow-400 shadow-2xl shadow-yellow-500/20",
info:
"border-aethex-400/50 bg-aethex-500/10 text-aethex-300 shadow-2xl shadow-aethex-500/20 glow-blue",
info: "border-aethex-400/50 bg-aethex-500/10 text-aethex-300 shadow-2xl shadow-aethex-500/20 glow-blue",
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",
},

191
client/global.css
View file

@ -67,7 +67,6 @@
--neon-green: 120 100% 70%;
--neon-yellow: 50 100% 70%;
}
}
@layer base {
@ -77,7 +76,7 @@
body {
@apply bg-background text-foreground;
font-family: 'Courier New', 'Courier', monospace;
font-family: "Courier New", "Courier", monospace;
letter-spacing: 0.025em;
}
@ -108,39 +107,53 @@
}
.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;
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;
background-size: 200% 200%;
animation: gradient-shift 2s ease-in-out infinite;
}
.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;
}
.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 {
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;
}
.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 {
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;
}
.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;
}
@ -181,7 +194,9 @@
}
.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;
border-right: 3px solid;
white-space: nowrap;
@ -189,7 +204,9 @@
}
.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 {
@ -217,86 +234,170 @@
}
.loading-dots::after {
content: '';
content: "";
animation: loading-dots 1.5s infinite;
}
.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%;
animation: skeleton-loading 1.5s infinite;
}
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slide-up {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slide-down {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slide-left {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slide-right {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scale-in {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bounce-gentle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@keyframes pulse-glow {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: currentColor; }
from,
to {
border-color: transparent;
}
50% {
border-color: currentColor;
}
}
@keyframes loading-dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
0% {
content: "";
}
25% {
content: ".";
}
50% {
content: "..";
}
75% {
content: "...";
}
100% {
content: "";
}
}
@keyframes skeleton-loading {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
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 Layout from "@/components/Layout";
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 LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom";
import {
PenTool,
Calendar,
User,
import {
PenTool,
Calendar,
User,
ArrowRight,
Search,
Filter,
@ -17,7 +23,7 @@ import {
Share,
ThumbsUp,
MessageCircle,
TrendingUp
TrendingUp,
} from "lucide-react";
export default function Blog() {
@ -42,96 +48,113 @@ export default function Blog() {
{ id: "technology", name: "Technology", count: 18 },
{ id: "tutorials", name: "Tutorials", count: 12 },
{ id: "research", name: "Research", count: 8 },
{ id: "company", name: "Company News", count: 7 }
{ id: "company", name: "Company News", count: 7 },
];
const featuredPost = {
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",
date: "December 15, 2024",
readTime: "8 min read",
category: "Research",
likes: 124,
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 = [
{
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",
date: "December 12, 2024",
readTime: "6 min read",
category: "Technology",
likes: 89,
comments: 15,
trending: true
trending: true,
},
{
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",
date: "December 10, 2024",
readTime: "12 min read",
category: "Tutorials",
likes: 156,
comments: 34,
trending: false
trending: false,
},
{
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",
date: "December 8, 2024",
readTime: "5 min read",
category: "Research",
likes: 203,
comments: 41,
trending: true
trending: true,
},
{
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",
date: "December 5, 2024",
readTime: "4 min read",
category: "Company News",
likes: 278,
comments: 52,
trending: false
trending: false,
},
{
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",
date: "December 3, 2024",
readTime: "15 min read",
category: "Tutorials",
likes: 94,
comments: 18,
trending: false
trending: false,
},
{
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",
date: "December 1, 2024",
readTime: "10 min read",
category: "Technology",
likes: 167,
comments: 29,
trending: false
}
trending: false,
},
];
const filteredPosts = selectedCategory === "all"
? posts
: posts.filter(post => post.category.toLowerCase() === selectedCategory);
const filteredPosts =
selectedCategory === "all"
? posts
: posts.filter(
(post) => post.category.toLowerCase() === selectedCategory,
);
if (isLoading) {
return <LoadingScreen message="Loading AeThex Blog..." showProgress={true} duration={1000} />;
return (
<LoadingScreen
message="Loading AeThex Blog..."
showProgress={true}
duration={1000}
/>
);
}
return (
@ -141,18 +164,23 @@ export default function Blog() {
<section className="relative py-20 lg:py-32">
<div className="container mx-auto px-4 text-center relative z-10">
<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" />
AeThex Blog
</Badge>
<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>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Stay updated with the latest developments in game technology, AI research,
and industry insights from the AeThex team.
Stay updated with the latest developments in game technology, AI
research, and industry insights from the AeThex team.
</p>
{/* 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"
/>
</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" />
<span>Filter</span>
</Button>
@ -181,13 +212,15 @@ export default function Blog() {
{categories.map((category, index) => (
<Button
key={category.id}
variant={selectedCategory === category.id ? "default" : "outline"}
variant={
selectedCategory === category.id ? "default" : "outline"
}
size="sm"
onClick={() => setSelectedCategory(category.id)}
className={`animate-scale-in ${
selectedCategory === category.id
? 'bg-gradient-to-r from-aethex-500 to-neon-blue'
: ''
selectedCategory === category.id
? "bg-gradient-to-r from-aethex-500 to-neon-blue"
: ""
}`}
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">
<div className="md:flex">
<div className="md:w-1/2">
<img
<img
src={featuredPost.image}
alt={featuredPost.title}
className="w-full h-64 md:h-full object-cover"
@ -220,7 +253,7 @@ export default function Blog() {
<CardDescription className="text-base mb-6">
{featuredPost.excerpt}
</CardDescription>
<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-1">
@ -234,7 +267,7 @@ export default function Blog() {
</div>
<Badge variant="outline">{featuredPost.readTime}</Badge>
</div>
<div className="flex items-center justify-between">
<Button asChild>
<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">
{filteredPosts.map((post, index) => (
<Card
<Card
key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
style={{ animationDelay: `${index * 0.1}s` }}
@ -297,7 +330,7 @@ export default function Blog() {
{post.excerpt}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between text-xs text-muted-foreground">
<div className="flex items-center space-x-2">
@ -309,7 +342,7 @@ export default function Blog() {
<span>{post.date}</span>
</div>
</div>
<div className="flex items-center justify-between">
<Badge variant="outline" className="text-xs">
{post.readTime}
@ -323,7 +356,7 @@ export default function Blog() {
</Button>
</div>
</div>
<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-1">
@ -336,7 +369,9 @@ export default function Blog() {
</div>
</div>
<Button size="sm" asChild>
<Link to={`/blog/${post.title.toLowerCase().replace(/\s+/g, '-')}`}>
<Link
to={`/blog/${post.title.toLowerCase().replace(/\s+/g, "-")}`}
>
Read More
</Link>
</Button>
@ -356,10 +391,10 @@ export default function Blog() {
Stay in the Loop
</h2>
<p className="text-xl text-muted-foreground">
Subscribe to our newsletter for the latest articles, tutorials, and technology insights
delivered directly to your inbox.
Subscribe to our newsletter for the latest articles, tutorials,
and technology insights delivered directly to your inbox.
</p>
<div className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
<input
type="email"
@ -370,9 +405,10 @@ export default function Blog() {
Subscribe
</Button>
</div>
<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>
</div>
</div>

207
client/pages/Community.tsx
View file

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

222
client/pages/Dashboard.tsx
View file

@ -1,18 +1,24 @@
import { useState, useEffect } from "react";
import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen";
import { Link } from "react-router-dom";
import {
User,
Settings,
Activity,
TrendingUp,
Zap,
Target,
Users,
import {
User,
Settings,
Activity,
TrendingUp,
Zap,
Target,
Users,
Calendar,
Bell,
Star,
@ -25,7 +31,7 @@ import {
MoreHorizontal,
Play,
Pause,
BarChart3
BarChart3,
} from "lucide-react";
export default function Dashboard() {
@ -47,16 +53,37 @@ export default function Dashboard() {
level: 15,
xp: 2450,
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",
streak: 12
streak: 12,
};
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: "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" }
{
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: "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 = [
@ -66,7 +93,7 @@ export default function Dashboard() {
status: "In Progress",
dueDate: "Dec 15",
team: 4,
priority: "High"
priority: "High",
},
{
name: "Blockchain Integration",
@ -74,7 +101,7 @@ export default function Dashboard() {
status: "Development",
dueDate: "Dec 20",
team: 3,
priority: "Medium"
priority: "Medium",
},
{
name: "Cloud Infrastructure",
@ -82,26 +109,60 @@ export default function Dashboard() {
status: "Testing",
dueDate: "Dec 10",
team: 6,
priority: "High"
}
priority: "High",
},
];
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: "Innovation Leader", description: "Led 5+ innovative projects", icon: Rocket, earned: false },
{ title: "Database Wizard", description: "Optimized 20+ databases", icon: Database, earned: false }
{
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: "Innovation Leader",
description: "Led 5+ innovative projects",
icon: Rocket,
earned: false,
},
{
title: "Database Wizard",
description: "Optimized 20+ databases",
icon: Database,
earned: false,
},
];
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: "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) {
return <LoadingScreen message="Loading your dashboard..." showProgress={true} duration={1000} />;
return (
<LoadingScreen
message="Loading your dashboard..."
showProgress={true}
duration={1000}
/>
);
}
return (
@ -140,7 +201,7 @@ export default function Dashboard() {
<CardContent className="p-6">
<div className="text-center space-y-4">
<div className="relative">
<img
<img
src={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"
@ -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>
<div>
<h3 className="font-semibold text-gradient">{user.name}</h3>
<p className="text-sm text-muted-foreground">{user.role}</p>
<Badge variant="outline" className="mt-2 border-aethex-400/50 text-aethex-400">
<h3 className="font-semibold text-gradient">
{user.name}
</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}
</Badge>
</div>
{/* XP Progress */}
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>XP Progress</span>
<span>{user.xp} / {user.nextLevelXp}</span>
<span>
{user.xp} / {user.nextLevelXp}
</span>
</div>
<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"
style={{ width: `${(user.xp / user.nextLevelXp) * 100}%` }}
style={{
width: `${(user.xp / user.nextLevelXp) * 100}%`,
}}
/>
</div>
</div>
@ -187,7 +259,9 @@ export default function Dashboard() {
className="w-full justify-start hover-lift interactive-scale"
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" />
</div>
{action.title}
@ -205,7 +279,7 @@ export default function Dashboard() {
{stats.map((stat, index) => {
const Icon = stat.icon;
return (
<Card
<Card
key={index}
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` }}
@ -213,10 +287,16 @@ export default function Dashboard() {
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-muted-foreground">{stat.label}</p>
<p className="text-2xl font-bold text-gradient">{stat.value}</p>
<p className="text-sm text-muted-foreground">
{stat.label}
</p>
<p className="text-2xl font-bold text-gradient">
{stat.value}
</p>
</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" />
</div>
</div>
@ -231,8 +311,12 @@ export default function Dashboard() {
<CardHeader>
<div className="flex justify-between items-center">
<div>
<CardTitle className="text-gradient">Recent Projects</CardTitle>
<CardDescription>Your active development projects</CardDescription>
<CardTitle className="text-gradient">
Recent Projects
</CardTitle>
<CardDescription>
Your active development projects
</CardDescription>
</div>
<Button variant="outline" size="sm" className="hover-lift">
View All
@ -242,7 +326,7 @@ export default function Dashboard() {
</CardHeader>
<CardContent className="space-y-4">
{recentProjects.map((project, index) => (
<div
<div
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"
style={{ animationDelay: `${index * 0.1}s` }}
@ -260,21 +344,31 @@ export default function Dashboard() {
</div>
<div className="flex items-center space-x-4">
<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
<div
className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full"
style={{ width: `${project.progress}%` }}
/>
</div>
</div>
<Badge
variant={project.priority === 'High' ? 'destructive' : 'secondary'}
<Badge
variant={
project.priority === "High"
? "destructive"
: "secondary"
}
className="animate-pulse"
>
{project.priority}
</Badge>
<Button variant="ghost" size="sm" className="hover-lift">
<Button
variant="ghost"
size="sm"
className="hover-lift"
>
<MoreHorizontal className="h-4 w-4" />
</Button>
</div>
@ -287,32 +381,40 @@ export default function Dashboard() {
<Card className="bg-card/50 border-border/50 animate-slide-up">
<CardHeader>
<CardTitle className="text-gradient">Achievements</CardTitle>
<CardDescription>Your progress and accomplishments</CardDescription>
<CardDescription>
Your progress and accomplishments
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{achievements.map((achievement, index) => {
const Icon = achievement.icon;
return (
<div
<div
key={index}
className={`p-4 rounded-lg border transition-all duration-300 hover-lift animate-scale-in ${
achievement.earned
? 'border-aethex-400/50 bg-aethex-500/10'
: 'border-border/30 opacity-60'
achievement.earned
? "border-aethex-400/50 bg-aethex-500/10"
: "border-border/30 opacity-60"
}`}
style={{ animationDelay: `${index * 0.1}s` }}
>
<div className="flex items-center space-x-3">
<div className={`p-2 rounded-lg ${
achievement.earned
? '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'}`} />
<div
className={`p-2 rounded-lg ${
achievement.earned
? "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"}`}
/>
</div>
<div>
<h4 className={`font-semibold ${achievement.earned ? 'text-gradient' : ''}`}>
<h4
className={`font-semibold ${achievement.earned ? "text-gradient" : ""}`}
>
{achievement.title}
</h4>
<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 Layout from "@/components/Layout";
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 LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom";
import {
BriefcaseIcon,
Code,
Sparkles,
Zap,
Users,
Trophy,
import {
BriefcaseIcon,
Code,
Sparkles,
Zap,
Users,
Trophy,
Target,
ArrowRight,
CheckCircle,
@ -27,7 +33,7 @@ import {
Lightbulb,
Puzzle,
Rocket,
Globe
Globe,
} from "lucide-react";
export default function DevelopmentConsulting() {
@ -51,48 +57,50 @@ export default function DevelopmentConsulting() {
const consultingServices = [
{
title: "Technical Architecture Review",
description: "Comprehensive analysis of your system architecture and scalability",
description:
"Comprehensive analysis of your system architecture and scalability",
icon: Database,
duration: "2-4 weeks",
price: "Starting at $8,000",
features: [
"System architecture audit",
"Performance bottleneck analysis",
"Performance bottleneck analysis",
"Scalability recommendations",
"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",
description: "Streamline your development pipeline and cloud infrastructure",
description:
"Streamline your development pipeline and cloud infrastructure",
icon: Cloud,
duration: "3-6 weeks",
duration: "3-6 weeks",
price: "Starting at $12,000",
features: [
"CI/CD pipeline setup",
"Cloud migration strategy",
"Monitoring & alerting",
"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",
description: "Improve code quality, performance, and maintainability",
icon: Code,
duration: "2-8 weeks",
price: "Starting at $6,000",
price: "Starting at $6,000",
features: [
"Code review & refactoring",
"Performance optimization",
"Testing strategy",
"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",
@ -105,37 +113,57 @@ export default function DevelopmentConsulting() {
"Team structure optimization",
"Workflow automation",
"Knowledge transfer",
"Leadership coaching"
"Leadership coaching",
],
color: "from-orange-500 to-red-600"
}
color: "from-orange-500 to-red-600",
},
];
const expertise = [
{
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,
projects: "200+ projects"
projects: "200+ projects",
},
{
category: "Backend & APIs",
technologies: ["Node.js", "Python", "Java", "Go", "GraphQL", "REST APIs"],
icon: Settings,
projects: "150+ systems"
projects: "150+ systems",
},
{
category: "Cloud & Infrastructure",
technologies: ["AWS", "Azure", "GCP", "Docker", "Kubernetes", "Terraform"],
technologies: [
"AWS",
"Azure",
"GCP",
"Docker",
"Kubernetes",
"Terraform",
],
icon: Cloud,
projects: "100+ deployments"
projects: "100+ deployments",
},
{
category: "Databases & Analytics",
technologies: ["PostgreSQL", "MongoDB", "Redis", "Elasticsearch", "BigQuery"],
technologies: [
"PostgreSQL",
"MongoDB",
"Redis",
"Elasticsearch",
"BigQuery",
],
icon: Database,
projects: "80+ implementations"
}
projects: "80+ implementations",
},
];
const packages = [
@ -149,10 +177,10 @@ export default function DevelopmentConsulting() {
"Key recommendations",
"Priority action items",
"Executive summary",
"30-min follow-up call"
"30-min follow-up call",
],
popular: false,
color: "from-gray-500 to-gray-600"
color: "from-gray-500 to-gray-600",
},
{
name: "Comprehensive Audit",
@ -165,10 +193,10 @@ export default function DevelopmentConsulting() {
"Implementation roadmap",
"Risk assessment",
"Team presentation",
"3 months email support"
"3 months email support",
],
popular: true,
color: "from-aethex-500 to-neon-blue"
color: "from-aethex-500 to-neon-blue",
},
{
name: "Strategic Partnership",
@ -181,11 +209,11 @@ export default function DevelopmentConsulting() {
"Implementation support",
"Team training",
"Priority support",
"Quarterly reviews"
"Quarterly reviews",
],
popular: false,
color: "from-purple-500 to-pink-600"
}
color: "from-purple-500 to-pink-600",
},
];
const caseStudies = [
@ -194,8 +222,12 @@ export default function DevelopmentConsulting() {
client: "Fortune 500 Retailer",
challenge: "10x traffic growth causing system failures",
solution: "Microservices architecture with auto-scaling",
results: ["99.99% uptime achieved", "50% cost reduction", "3x faster load times"],
tech: ["Kubernetes", "Redis", "CDN"]
results: [
"99.99% uptime achieved",
"50% cost reduction",
"3x faster load times",
],
tech: ["Kubernetes", "Redis", "CDN"],
},
{
title: "FinTech Security Overhaul",
@ -203,20 +235,30 @@ export default function DevelopmentConsulting() {
challenge: "Security compliance for banking regulations",
solution: "Zero-trust architecture with enhanced monitoring",
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",
client: "Healthcare Provider",
challenge: "20-year-old system blocking innovation",
solution: "Gradual migration to cloud-native architecture",
results: ["6 months migration", "60% performance boost", "Modern API ecosystem"],
tech: ["Docker", "GraphQL", "Postgres"]
}
results: [
"6 months migration",
"60% performance boost",
"Modern API ecosystem",
],
tech: ["Docker", "GraphQL", "Postgres"],
},
];
if (isLoading) {
return <LoadingScreen message="Loading Development Consulting..." showProgress={true} duration={1000} />;
return (
<LoadingScreen
message="Loading Development Consulting..."
showProgress={true}
duration={1000}
/>
);
}
return (
@ -234,39 +276,54 @@ export default function DevelopmentConsulting() {
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}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 className="container mx-auto px-4 text-center relative z-10">
<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" />
Development Consulting Division
</Badge>
<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>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Expert guidance to optimize your development processes, scale your systems,
and accelerate your digital transformation journey.
Expert guidance to optimize your development processes, scale
your systems, and accelerate your digital transformation
journey.
</p>
<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">
<Target className="h-5 w-5" />
<span>Get Free Assessment</span>
<ArrowRight className="h-5 w-5" />
</Link>
</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>
</Button>
</div>
@ -290,18 +347,22 @@ export default function DevelopmentConsulting() {
{consultingServices.map((service, index) => {
const Icon = service.icon;
return (
<Card
<Card
key={index}
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` }}
>
<CardHeader>
<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" />
</div>
<div className="flex-1">
<CardTitle className="text-xl">{service.title}</CardTitle>
<CardTitle className="text-xl">
{service.title}
</CardTitle>
<CardDescription className="mt-1">
{service.description}
</CardDescription>
@ -311,13 +372,16 @@ export default function DevelopmentConsulting() {
<CardContent className="space-y-4">
<div className="grid grid-cols-1 gap-2">
{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" />
<span>{feature}</span>
</div>
))}
</div>
<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">
<Clock className="h-4 w-4" />
@ -352,7 +416,7 @@ export default function DevelopmentConsulting() {
{expertise.map((area, index) => {
const Icon = area.icon;
return (
<Card
<Card
key={index}
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` }}
@ -360,12 +424,18 @@ export default function DevelopmentConsulting() {
<CardHeader className="text-center">
<Icon className="h-12 w-12 text-aethex-400 mx-auto mb-3" />
<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>
<CardContent>
<div className="flex flex-wrap gap-1">
{area.technologies.map((tech, techIndex) => (
<Badge key={techIndex} variant="secondary" className="text-xs">
<Badge
key={techIndex}
variant="secondary"
className="text-xs"
>
{tech}
</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">
{packages.map((pkg, index) => (
<Card
<Card
key={index}
className={`relative overflow-hidden transition-all duration-500 hover-lift animate-scale-in ${
pkg.popular
? 'border-aethex-500 glow-blue scale-105'
: 'border-border/50 hover:border-aethex-400/50'
pkg.popular
? "border-aethex-500 glow-blue scale-105"
: "border-border/50 hover:border-aethex-400/50"
}`}
style={{ animationDelay: `${index * 0.2}s` }}
onClick={() => setActivePackage(index)}
@ -407,36 +477,45 @@ export default function DevelopmentConsulting() {
MOST POPULAR
</div>
)}
<CardHeader className="text-center">
<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={`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}
</div>
<div className="text-sm text-muted-foreground">{pkg.duration}</div>
<div className="text-sm text-muted-foreground">
{pkg.duration}
</div>
</div>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
{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" />
<span>{feature}</span>
</div>
))}
</div>
<Button
asChild
<Button
asChild
className={`w-full ${
pkg.popular
? 'bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90'
: ''
pkg.popular
? "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>
</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">
{caseStudies.map((study, index) => (
<Card
<Card
key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
style={{ animationDelay: `${index * 0.2}s` }}
>
<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>
<CardDescription className="text-sm">
<strong>Challenge:</strong> {study.challenge}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div>
<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>
<h4 className="font-semibold text-sm mb-2">Results:</h4>
<ul className="space-y-1">
{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" />
<span>{result}</span>
</li>
))}
</ul>
</div>
<div className="flex flex-wrap gap-1">
{study.tech.map((tech, techIndex) => (
<Badge key={techIndex} variant="secondary" className="text-xs">
<Badge
key={techIndex}
variant="secondary"
className="text-xs"
>
{tech}
</Badge>
))}
@ -514,18 +604,28 @@ export default function DevelopmentConsulting() {
Ready to Accelerate Your Development?
</h2>
<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>
<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">
<Lightbulb className="h-5 w-5" />
<span>Get Free Consultation</span>
<ArrowRight className="h-5 w-5" />
</Link>
</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>
</Button>
</div>
@ -534,17 +634,23 @@ export default function DevelopmentConsulting() {
<div className="text-center">
<Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<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 className="text-center">
<Globe className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<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 className="text-center">
<Trophy className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<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>

150
client/pages/Documentation.tsx
View file

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

241
client/pages/GameDevelopment.tsx
View file

@ -1,18 +1,24 @@
import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout";
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 LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom";
import {
Gamepad2,
Code,
Sparkles,
Zap,
Users,
Trophy,
import {
Gamepad2,
Code,
Sparkles,
Zap,
Users,
Trophy,
Rocket,
Target,
Star,
@ -26,7 +32,7 @@ import {
Palette,
Volume2,
Globe,
Smartphone
Smartphone,
} from "lucide-react";
export default function GameDevelopment() {
@ -52,38 +58,58 @@ export default function GameDevelopment() {
title: "Custom Game Development",
description: "End-to-end game creation from concept to deployment",
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",
price: "Custom pricing",
color: "from-blue-500 to-purple-600"
color: "from-blue-500 to-purple-600",
},
{
title: "Roblox Development",
description: "Specialized Roblox game creation and scripting",
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",
price: "Starting at $2,500",
color: "from-green-500 to-blue-600"
color: "from-green-500 to-blue-600",
},
{
title: "Game Porting",
description: "Adapt existing games to new platforms and devices",
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",
price: "Starting at $5,000",
color: "from-orange-500 to-red-600"
color: "from-orange-500 to-red-600",
},
{
title: "Game Optimization",
description: "Enhance performance and user experience of existing games",
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",
price: "Starting at $1,500",
color: "from-purple-500 to-pink-600"
}
color: "from-purple-500 to-pink-600",
},
];
const technologies = [
@ -101,11 +127,12 @@ export default function GameDevelopment() {
const portfolio = [
{
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"],
players: "10K+ active",
rating: 4.8,
category: "Action"
category: "Action",
},
{
title: "Quantum Puzzle Lab",
@ -113,7 +140,7 @@ export default function GameDevelopment() {
tech: ["Custom Engine", "C++", "OpenGL"],
players: "25K+ downloads",
rating: 4.9,
category: "Puzzle"
category: "Puzzle",
},
{
title: "Roblox Tycoon Empire",
@ -121,43 +148,63 @@ export default function GameDevelopment() {
tech: ["Roblox Studio", "Lua", "DataStore"],
players: "100K+ visits",
rating: 4.7,
category: "Simulation"
}
category: "Simulation",
},
];
const process = [
{
step: 1,
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",
deliverables: ["Project roadmap", "Technical specifications", "Art direction"]
deliverables: [
"Project roadmap",
"Technical specifications",
"Art direction",
],
},
{
step: 2,
title: "Prototyping",
description: "Create playable prototypes to validate core mechanics",
duration: "2-4 weeks",
deliverables: ["Playable prototype", "Mechanics validation", "User feedback analysis"]
deliverables: [
"Playable prototype",
"Mechanics validation",
"User feedback analysis",
],
},
{
step: 3,
title: "Production",
description: "Full development with regular milestones and client reviews",
description:
"Full development with regular milestones and client reviews",
duration: "8-40 weeks",
deliverables: ["Weekly builds", "Progress reports", "Quality assurance"]
deliverables: ["Weekly builds", "Progress reports", "Quality assurance"],
},
{
step: 4,
title: "Launch & Support",
description: "Deployment, marketing support, and ongoing maintenance",
duration: "Ongoing",
deliverables: ["Live deployment", "Performance monitoring", "Update releases"]
}
deliverables: [
"Live deployment",
"Performance monitoring",
"Update releases",
],
},
];
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 (
@ -175,39 +222,54 @@ export default function GameDevelopment() {
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}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 className="container mx-auto px-4 text-center relative z-10">
<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" />
Game Development Division
</Badge>
<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>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
From concept to launch, we create immersive gaming experiences that captivate players
and push the boundaries of interactive entertainment.
From concept to launch, we create immersive gaming experiences
that captivate players and push the boundaries of interactive
entertainment.
</p>
<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">
<Rocket className="h-5 w-5" />
<span>Start Your Project</span>
<ArrowRight className="h-5 w-5" />
</Link>
</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>
</Button>
</div>
@ -232,10 +294,12 @@ export default function GameDevelopment() {
const Icon = service.icon;
const isActive = activeService === index;
return (
<Card
<Card
key={index}
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` }}
onClick={() => setActiveService(index)}
@ -243,11 +307,15 @@ export default function GameDevelopment() {
<CardHeader>
<div className="flex items-center justify-between">
<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" />
</div>
<div>
<CardTitle className={`text-xl ${isActive ? 'text-gradient' : ''}`}>
<CardTitle
className={`text-xl ${isActive ? "text-gradient" : ""}`}
>
{service.title}
</CardTitle>
<CardDescription className="mt-1">
@ -260,13 +328,16 @@ export default function GameDevelopment() {
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-2">
{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" />
<span>{feature}</span>
</div>
))}
</div>
<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">
<Clock className="h-4 w-4" />
@ -301,7 +372,7 @@ export default function GameDevelopment() {
{technologies.map((tech, index) => {
const Icon = tech.icon;
return (
<Card
<Card
key={index}
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` }}
@ -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">
{portfolio.map((project, index) => (
<Card
<Card
key={index}
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` }}
@ -344,31 +415,39 @@ export default function GameDevelopment() {
{project.category}
</Badge>
</div>
<CardHeader>
<div className="space-y-2">
<CardTitle className="text-lg">{project.title}</CardTitle>
<CardDescription>{project.description}</CardDescription>
</div>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex flex-wrap gap-1">
{project.tech.map((tech, techIndex) => (
<Badge key={techIndex} variant="secondary" className="text-xs">
<Badge
key={techIndex}
variant="secondary"
className="text-xs"
>
{tech}
</Badge>
))}
</div>
<div className="flex justify-between items-center">
<div className="flex items-center space-x-2">
<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 className="flex items-center space-x-1">
<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>
</CardContent>
@ -392,7 +471,7 @@ export default function GameDevelopment() {
<div className="max-w-4xl mx-auto">
{process.map((phase, index) => (
<div
<div
key={index}
className="relative flex items-start mb-12 animate-slide-right"
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">
{phase.step}
</div>
{/* Content */}
<div className="flex-1">
<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}
</p>
<div className="flex flex-wrap gap-1">
{phase.deliverables.map((deliverable, delIndex) => (
<Badge key={delIndex} variant="outline" className="text-xs">
{deliverable}
</Badge>
))}
{phase.deliverables.map(
(deliverable, delIndex) => (
<Badge
key={delIndex}
variant="outline"
className="text-xs"
>
{deliverable}
</Badge>
),
)}
</div>
</div>
<div className="flex items-center">
@ -432,7 +517,7 @@ export default function GameDevelopment() {
</CardContent>
</Card>
</div>
{/* Connector Line */}
{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" />
@ -451,18 +536,28 @@ export default function GameDevelopment() {
Ready to Build Your Game?
</h2>
<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>
<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">
<Play className="h-5 w-5" />
<span>Start Your Project</span>
<ArrowRight className="h-5 w-5" />
</Link>
</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>
</Button>
</div>
@ -471,17 +566,23 @@ export default function GameDevelopment() {
<div className="text-center">
<Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<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 className="text-center">
<Globe className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<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 className="text-center">
<Trophy className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<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>

130
client/pages/Index.tsx
View file

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

73
client/pages/Login.tsx
View file

@ -2,20 +2,26 @@ import { useState } from "react";
import { useNavigate } from "react-router-dom";
import Layout from "@/components/Layout";
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 { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen";
import {
LogIn,
ArrowRight,
Shield,
Sparkles,
Github,
import {
LogIn,
ArrowRight,
Shield,
Sparkles,
Github,
Mail,
Lock,
User
User,
} from "lucide-react";
export default function Login() {
@ -27,7 +33,7 @@ export default function Login() {
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
setIsLoading(true);
// Simulate login process
setTimeout(() => {
setIsLoading(false);
@ -45,7 +51,13 @@ export default function Login() {
};
if (isLoading) {
return <LoadingScreen message="Authenticating your account..." showProgress={true} duration={2000} />;
return (
<LoadingScreen
message="Authenticating your account..."
showProgress={true}
duration={2000}
/>
);
}
return (
@ -62,7 +74,7 @@ export default function Login() {
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
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 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>
Sign in to your AeThex account to access the dashboard
</CardDescription>
</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" />
Secure Login
</Badge>
</CardHeader>
<CardContent className="space-y-6">
{/* Social Login Buttons */}
<div className="space-y-3">
<Button
variant="outline"
<Button
variant="outline"
className="w-full hover-lift interactive-scale"
onClick={() => handleSocialLogin("github")}
>
<Github className="h-4 w-4 mr-2" />
Continue with GitHub
</Button>
<Button
variant="outline"
<Button
variant="outline"
className="w-full hover-lift interactive-scale"
onClick={() => handleSocialLogin("google")}
>
@ -113,7 +130,9 @@ export default function Login() {
<div className="w-full border-t border-border/50" />
</div>
<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>
@ -157,16 +176,22 @@ export default function Login() {
<div className="flex items-center justify-between text-sm">
<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>
</label>
<button type="button" className="text-aethex-400 hover:underline">
<button
type="button"
className="text-aethex-400 hover:underline"
>
Forgot password?
</button>
</div>
<Button
type="submit"
<Button
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"
disabled={!email || !password}
>
@ -179,7 +204,7 @@ export default function Login() {
<div className="text-center pt-4">
<p className="text-sm text-muted-foreground">
Don't have an account?{" "}
<button
<button
onClick={() => navigate("/onboarding")}
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 Layout from "@/components/Layout";
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 LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom";
import {
Users,
BookOpen,
Star,
Trophy,
import {
Users,
BookOpen,
Star,
Trophy,
Target,
ArrowRight,
CheckCircle,
@ -25,7 +31,7 @@ import {
Calendar,
MessageCircle,
Video,
GraduationCap
GraduationCap,
} from "lucide-react";
export default function MentorshipPrograms() {
@ -49,7 +55,8 @@ export default function MentorshipPrograms() {
const programs = [
{
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,
duration: "3-12 months",
commitment: "2 hours/week",
@ -60,14 +67,15 @@ export default function MentorshipPrograms() {
"Code reviews & feedback",
"Career guidance",
"Portfolio development",
"24/7 chat support"
"24/7 chat support",
],
color: "from-blue-500 to-purple-600",
participants: "1:1"
participants: "1:1",
},
{
title: "Group Workshops",
description: "Collaborative learning with peers in structured group sessions",
description:
"Collaborative learning with peers in structured group sessions",
icon: Users,
duration: "8-16 weeks",
commitment: "4 hours/week",
@ -78,14 +86,15 @@ export default function MentorshipPrograms() {
"Project-based learning",
"Industry guest speakers",
"Team challenges",
"Group portfolio projects"
"Group portfolio projects",
],
color: "from-green-500 to-blue-600",
participants: "6-12 people"
participants: "6-12 people",
},
{
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,
duration: "12-24 weeks",
commitment: "20+ hours/week",
@ -96,10 +105,10 @@ export default function MentorshipPrograms() {
"Job placement assistance",
"Capstone project",
"Certification",
"Alumni network access"
"Alumni network access",
],
color: "from-orange-500 to-red-600",
participants: "15-25 people"
participants: "15-25 people",
},
{
title: "Corporate Training",
@ -114,11 +123,11 @@ export default function MentorshipPrograms() {
"Team assessments",
"Progress tracking",
"Certification programs",
"Ongoing support"
"Ongoing support",
],
color: "from-purple-500 to-pink-600",
participants: "10-100+ people"
}
participants: "10-100+ people",
},
];
const tracks = [
@ -126,38 +135,67 @@ export default function MentorshipPrograms() {
name: "Game Development",
description: "Master game development from concept to publishing",
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",
duration: "6-12 months",
projects: 5
projects: 5,
},
{
name: "Web Development",
description: "Build modern web applications with cutting-edge technologies",
description:
"Build modern web applications with cutting-edge technologies",
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",
duration: "4-8 months",
projects: 8
projects: 8,
},
{
name: "Mobile Development",
description: "Create native and cross-platform mobile applications",
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",
duration: "5-10 months",
projects: 6
duration: "5-10 months",
projects: 6,
},
{
name: "Data Science & AI",
description: "Harness the power of data and artificial intelligence",
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",
duration: "8-16 months",
projects: 10
}
projects: 10,
},
];
const mentors = [
@ -169,28 +207,31 @@ export default function MentorshipPrograms() {
specialty: "Unreal Engine, C++",
students: 85,
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",
title: "Full Stack Architect",
company: "Netflix",
experience: "15 years",
experience: "15 years",
specialty: "React, Node.js, AWS",
students: 120,
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",
title: "AI Research Scientist",
company: "Google DeepMind",
company: "Google DeepMind",
experience: "10 years",
specialty: "Machine Learning, Python",
students: 95,
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 = [
@ -198,30 +239,39 @@ export default function MentorshipPrograms() {
name: "Alex Thompson",
role: "Junior Developer → Senior Developer",
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",
mentor: "Marcus Rodriguez"
mentor: "Marcus Rodriguez",
},
{
name: "Jamie Wu",
role: "Career Changer → Game Developer",
role: "Career Changer → Game Developer",
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",
mentor: "Sarah Chen"
mentor: "Sarah Chen",
},
{
name: "Taylor Davis",
role: "Student → ML Engineer",
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",
mentor: "Dr. Aisha Patel"
}
mentor: "Dr. Aisha Patel",
},
];
if (isLoading) {
return <LoadingScreen message="Loading Mentorship Programs..." showProgress={true} duration={1000} />;
return (
<LoadingScreen
message="Loading Mentorship Programs..."
showProgress={true}
duration={1000}
/>
);
}
return (
@ -239,39 +289,54 @@ export default function MentorshipPrograms() {
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}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 className="container mx-auto px-4 text-center relative z-10">
<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" />
Mentorship & Education Division
</Badge>
<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>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Learn from industry experts through personalized mentorship, hands-on workshops,
and intensive boot camps designed to fast-track your technology career.
Learn from industry experts through personalized mentorship,
hands-on workshops, and intensive boot camps designed to
fast-track your technology career.
</p>
<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">
<BookOpen className="h-5 w-5" />
<span>Apply Now</span>
<ArrowRight className="h-5 w-5" />
</Link>
</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>
</Button>
</div>
@ -287,7 +352,8 @@ export default function MentorshipPrograms() {
Mentorship Programs
</h2>
<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>
</div>
@ -295,7 +361,7 @@ export default function MentorshipPrograms() {
{programs.map((program, index) => {
const Icon = program.icon;
return (
<Card
<Card
key={index}
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` }}
@ -303,11 +369,15 @@ export default function MentorshipPrograms() {
<CardHeader>
<div className="flex items-start justify-between">
<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" />
</div>
<div>
<CardTitle className="text-xl">{program.title}</CardTitle>
<CardTitle className="text-xl">
{program.title}
</CardTitle>
<CardDescription className="mt-1">
{program.description}
</CardDescription>
@ -321,24 +391,33 @@ export default function MentorshipPrograms() {
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-2">
{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" />
<span>{feature}</span>
</div>
))}
</div>
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-border/30">
<div className="text-center">
<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 className="text-center">
<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 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>
</CardContent>
@ -366,19 +445,21 @@ export default function MentorshipPrograms() {
const Icon = track.icon;
const isSelected = selectedTrack === index;
return (
<Card
<Card
key={index}
className={`cursor-pointer transition-all duration-300 hover-lift animate-scale-in ${
isSelected
? 'border-aethex-500 glow-blue scale-105'
: 'border-border/50 hover:border-aethex-400/50'
isSelected
? "border-aethex-500 glow-blue scale-105"
: "border-border/50 hover:border-aethex-400/50"
}`}
style={{ animationDelay: `${index * 0.1}s` }}
onClick={() => setSelectedTrack(index)}
>
<CardHeader className="text-center">
<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}
</CardTitle>
<CardDescription className="text-sm">
@ -388,14 +469,20 @@ export default function MentorshipPrograms() {
<CardContent className="space-y-3">
<div className="flex flex-wrap gap-1">
{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}
</Badge>
))}
</div>
<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">
{track.duration} • {track.projects} projects
</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">
{mentors.map((mentor, index) => (
<Card
<Card
key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
style={{ animationDelay: `${index * 0.2}s` }}
>
<CardContent className="p-6 text-center">
<img
<img
src={mentor.avatar}
alt={mentor.name}
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>
<p className="text-sm text-muted-foreground">{mentor.title}</p>
<p className="text-sm font-medium text-aethex-400">{mentor.company}</p>
<h3 className="font-semibold text-lg text-gradient">
{mentor.name}
</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="flex justify-between text-sm">
<span>Experience:</span>
@ -454,7 +547,7 @@ export default function MentorshipPrograms() {
</div>
</div>
</div>
<Badge variant="outline" className="mt-3 text-xs">
{mentor.specialty}
</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">
{testimonials.map((testimonial, index) => (
<Card
<Card
key={index}
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
style={{ animationDelay: `${index * 0.2}s` }}
@ -491,8 +584,12 @@ export default function MentorshipPrograms() {
</div>
<div>
<h3 className="font-semibold">{testimonial.name}</h3>
<p className="text-sm text-muted-foreground">{testimonial.role}</p>
<Badge variant="outline" className="text-xs">{testimonial.company}</Badge>
<p className="text-sm text-muted-foreground">
{testimonial.role}
</p>
<Badge variant="outline" className="text-xs">
{testimonial.company}
</Badge>
</div>
</div>
</CardHeader>
@ -519,18 +616,28 @@ export default function MentorshipPrograms() {
Start Your Learning Journey Today
</h2>
<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>
<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">
<Heart className="h-5 w-5" />
<span>Apply for Mentorship</span>
<ArrowRight className="h-5 w-5" />
</Link>
</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>
</Button>
</div>
@ -539,17 +646,23 @@ export default function MentorshipPrograms() {
<div className="text-center">
<MessageCircle className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<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 className="text-center">
<Video className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<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 className="text-center">
<Award className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
<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>

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 Layout from "@/components/Layout";
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 {
Home,
@ -19,7 +25,7 @@ import {
ChevronUp,
ChevronDown,
ChevronLeft,
ChevronRight
ChevronRight,
} from "lucide-react";
interface GameState {
@ -52,10 +58,19 @@ const NotFound = () => {
"Error 404: This page is in another castle.",
"404: The page you seek is in another universe.",
"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
const [gameState, setGameState] = useState<GameState>({
@ -65,7 +80,7 @@ const NotFound = () => {
playerPosition: { x: 5, y: 5 },
collectibles: [],
gameActive: false,
gameWon: false
gameWon: false,
});
// Initialize collectibles
@ -76,28 +91,28 @@ const NotFound = () => {
x: Math.floor(Math.random() * 10),
y: Math.floor(Math.random() * 10),
id: i,
collected: false
collected: false,
});
}
setGameState(prev => ({
setGameState((prev) => ({
...prev,
collectibles: newCollectibles,
gameActive: true,
score: 0,
lives: 3,
playerPosition: { x: 5, y: 5 },
gameWon: false
gameWon: false,
}));
}, []);
// Timer and quote rotation
useEffect(() => {
const timer = setInterval(() => {
setTimeSpent(prev => prev + 1);
setTimeSpent((prev) => prev + 1);
}, 1000);
const quoteTimer = setInterval(() => {
setCurrentQuote(prev => (prev + 1) % quotes.length);
setCurrentQuote((prev) => (prev + 1) % quotes.length);
}, 3000);
return () => {
@ -118,8 +133,8 @@ const NotFound = () => {
}
};
window.addEventListener('keydown', handleKeyPress);
return () => window.removeEventListener('keydown', handleKeyPress);
window.addEventListener("keydown", handleKeyPress);
return () => window.removeEventListener("keydown", handleKeyPress);
}, [konami, konamiCode]);
// Game controls
@ -132,37 +147,42 @@ const NotFound = () => {
let newY = gameState.playerPosition.y;
switch (e.key) {
case 'ArrowUp':
case 'w':
case "ArrowUp":
case "w":
newY = Math.max(0, newY - 1);
break;
case 'ArrowDown':
case 's':
case "ArrowDown":
case "s":
newY = Math.min(9, newY + 1);
break;
case 'ArrowLeft':
case 'a':
case "ArrowLeft":
case "a":
newX = Math.max(0, newX - 1);
break;
case 'ArrowRight':
case 'd':
case "ArrowRight":
case "d":
newX = Math.min(9, newX + 1);
break;
default:
return;
}
setGameState(prev => {
setGameState((prev) => {
const newPosition = { x: newX, y: newY };
const updatedCollectibles = prev.collectibles.map(collectible => {
if (collectible.x === newX && collectible.y === newY && !collectible.collected) {
const updatedCollectibles = prev.collectibles.map((collectible) => {
if (
collectible.x === newX &&
collectible.y === newY &&
!collectible.collected
) {
return { ...collectible, collected: true };
}
return collectible;
});
const newScore = updatedCollectibles.filter(c => c.collected).length * 10;
const gameWon = updatedCollectibles.every(c => c.collected);
const newScore =
updatedCollectibles.filter((c) => c.collected).length * 10;
const gameWon = updatedCollectibles.every((c) => c.collected);
return {
...prev,
@ -170,14 +190,14 @@ const NotFound = () => {
collectibles: updatedCollectibles,
score: newScore,
gameWon: gameWon,
gameActive: !gameWon
gameActive: !gameWon,
};
});
};
if (gameState.gameActive) {
window.addEventListener('keydown', handleGameControls);
return () => window.removeEventListener('keydown', handleGameControls);
window.addEventListener("keydown", handleGameControls);
return () => window.removeEventListener("keydown", handleGameControls);
}
}, [gameState.gameActive, gameState.playerPosition]);
@ -185,19 +205,26 @@ const NotFound = () => {
const grid = [];
for (let y = 0; y < 10; y++) {
for (let x = 0; x < 10; x++) {
const isPlayer = gameState.playerPosition.x === x && gameState.playerPosition.y === y;
const collectible = gameState.collectibles.find(c => c.x === x && c.y === y && !c.collected);
const isPlayer =
gameState.playerPosition.x === x && gameState.playerPosition.y === y;
const collectible = gameState.collectibles.find(
(c) => c.x === x && c.y === y && !c.collected,
);
grid.push(
<div
key={`${x}-${y}`}
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 && '🚀'}
{collectible && '⭐'}
</div>
{isPlayer && "🚀"}
{collectible && "⭐"}
</div>,
);
}
}
@ -219,7 +246,7 @@ const NotFound = () => {
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s`,
fontSize: `${12 + Math.random() * 8}px`
fontSize: `${12 + Math.random() * 8}px`,
}}
>
404
@ -253,11 +280,17 @@ const NotFound = () => {
</div>
<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" />
Time Lost: {timeSpent}s
</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" />
Location: {location.pathname}
</Badge>
@ -272,7 +305,8 @@ const NotFound = () => {
<span>404 Rescue Mission</span>
</CardTitle>
<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>
</CardHeader>
<CardContent className="space-y-4">
@ -290,10 +324,16 @@ const NotFound = () => {
<div className="space-y-4">
<div className="flex justify-between items-center">
<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 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>
@ -302,7 +342,9 @@ const NotFound = () => {
</div>
<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>
)}
@ -311,9 +353,12 @@ const NotFound = () => {
<div className="space-y-4 animate-scale-in">
<div className="text-center space-y-2">
<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">
You've rescued the lost page! Final Score: {gameState.score}
You've rescued the lost page! Final Score:{" "}
{gameState.score}
</p>
</div>
<Button
@ -337,7 +382,8 @@ const NotFound = () => {
🎉 Konami Code Activated! 🎉
</h3>
<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>
<Button
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 Welcome from "@/components/onboarding/Welcome";
export type UserType = 'game-developer' | 'client' | 'member' | 'customer';
export type UserType = "game-developer" | "client" | "member" | "customer";
export interface OnboardingData {
userType: UserType | null;
@ -32,15 +32,15 @@ export interface OnboardingData {
const initialData: OnboardingData = {
userType: null,
personalInfo: {
firstName: '',
lastName: '',
email: '',
company: '',
firstName: "",
lastName: "",
email: "",
company: "",
},
experience: {
level: '',
level: "",
skills: [],
previousProjects: '',
previousProjects: "",
},
interests: {
primaryGoals: [],
@ -71,14 +71,14 @@ export default function Onboarding() {
}, []);
const updateData = (newData: Partial<OnboardingData>) => {
setData(prev => ({ ...prev, ...newData }));
setData((prev) => ({ ...prev, ...newData }));
};
const nextStep = () => {
if (currentStep < steps.length - 1) {
setIsTransitioning(true);
setTimeout(() => {
setCurrentStep(prev => prev + 1);
setCurrentStep((prev) => prev + 1);
setIsTransitioning(false);
}, 300);
}
@ -88,7 +88,7 @@ export default function Onboarding() {
if (currentStep > 0) {
setIsTransitioning(true);
setTimeout(() => {
setCurrentStep(prev => prev - 1);
setCurrentStep((prev) => prev - 1);
setIsTransitioning(false);
}, 300);
}
@ -97,7 +97,13 @@ export default function Onboarding() {
const CurrentStepComponent = steps[currentStep].component;
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 (
@ -107,7 +113,9 @@ export default function Onboarding() {
{/* Progress Bar */}
<div className="mb-8 animate-slide-down">
<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">
Step {currentStep + 1} of {steps.length}
</span>
@ -115,7 +123,9 @@ export default function Onboarding() {
<div className="w-full bg-muted rounded-full h-2 overflow-hidden">
<div
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>
{/* Step Indicators */}
@ -125,8 +135,8 @@ export default function Onboarding() {
key={index}
className={`w-2 h-2 rounded-full transition-all duration-300 ${
index <= currentStep
? 'bg-aethex-400 glow-blue animate-pulse'
: 'bg-muted'
? "bg-aethex-400 glow-blue animate-pulse"
: "bg-muted"
}`}
/>
))}
@ -167,7 +177,7 @@ export default function Onboarding() {
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
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 { 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 { Link } from "react-router-dom";
@ -22,37 +28,47 @@ export default function Placeholder({ title, description }: PlaceholderProps) {
</div>
</div>
<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">
{description}
</CardDescription>
</div>
</CardHeader>
<CardContent className="space-y-6">
<div className="text-center space-y-4">
<p className="text-muted-foreground">
This page is currently under development. We're working hard to bring you
amazing features and content. Check back soon!
This page is currently under development. We're working hard
to bring you amazing features and content. Check back soon!
</p>
<div className="bg-background/30 rounded-lg p-4 border border-border/30">
<p className="text-sm text-muted-foreground">
💡 <strong>Want to help us prioritize?</strong> Let us know what you'd like to see
on this page by contacting our team. Your feedback helps shape our development roadmap.
💡 <strong>Want to help us prioritize?</strong> Let us know
what you'd like to see on this page by contacting our team.
Your feedback helps shape our development roadmap.
</p>
</div>
</div>
<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="/">
<ArrowLeft className="h-4 w-4" />
<span>Back to Home</span>
</Link>
</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">
<MessageCircle className="h-4 w-4" />
<span>Contact Us</span>
@ -62,8 +78,18 @@ export default function Placeholder({ title, description }: PlaceholderProps) {
<div className="text-center pt-4">
<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
visit our <Link to="/" className="text-aethex-400 hover:underline">homepage</Link> to learn more about AeThex.
In the meantime, explore our{" "}
<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>
</div>
</CardContent>

214
client/pages/ResearchLabs.tsx
View file

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

242
client/pages/Support.tsx
View file

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