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

completionId: cgen-c17e40c15a0f4d9f802c6a4f5a3ff68b

Browse source 
cgen-c17e40c15a0f4d9f802c6a4f5a3ff68b
This commit is contained in:
Builder.io 2025-11-13 06:04:57 +00:00
parent 51516559ba
commit 4bf03c8481
1 changed files with 44 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
client/pages/Onboarding.tsx
View file

@ -466,45 +466,55 @@ export default function Onboarding() {
<div className="container mx-auto px-4 max-w-4xl"> <div className="container mx-auto px-4 max-w-4xl">
{/* Progress Bar */} {/* Progress Bar */}
<div className="mb-8 animate-slide-down"> <div className="mb-8 animate-slide-down">
<div className="flex items-center justify-between mb-4"> <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 mb-6">
<h1 className="text-2xl font-bold text-gradient animate-pulse-glow"> <div className="space-y-2">
Join AeThex <h1 className="text-4xl font-bold bg-gradient-to-r from-aethex-300 via-neon-blue to-aethex-400 bg-clip-text text-transparent animate-pulse-glow">
</h1> Welcome to AeThex
<div className="flex items-center gap-4"> </h1>
<span className="text-sm text-muted-foreground animate-fade-in"> <p className="text-muted-foreground">
Step {currentStep + 1} of {steps.length} Complete your profile setup and unlock your potential
</span> </p>
<div className="text-sm text-muted-foreground"> </div>
Already have an account?{" "} <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 text-sm">
<Link <div className="px-4 py-2 rounded-full bg-aethex-500/10 border border-aethex-400/40">
to="/login?next=/onboarding" <p className="text-aethex-300 font-semibold">
className="text-aethex-400 hover:text-aethex-300 underline transition-colors" Step <span className="text-lg">{currentStep + 1}</span> of <span className="text-lg">{steps.length}</span>
> </p>
Sign In
</Link>
</div> </div>
<Link
to="/login?next=/onboarding"
className="text-aethex-400 hover:text-aethex-300 underline transition-colors font-medium"
>
Already have an account? Sign In
</Link>
</div> </div>
</div> </div>
<div className="w-full bg-muted rounded-full h-2 overflow-hidden"> <div className="w-full space-y-3">
<div <div className="w-full bg-muted/40 rounded-full h-2 overflow-hidden border border-border/40">
className="bg-gradient-to-r from-aethex-500 to-neon-blue h-2 rounded-full transition-all duration-700 ease-out glow-blue motion-reduce:transition-none"
style={{
width: `${((currentStep + 1) / steps.length) * 100}%`,
}}
/>
</div>
{/* Step Indicators */}
<div className="flex justify-between mt-2">
{steps.map((_, index) => (
<div <div
key={index} className="bg-gradient-to-r from-aethex-500 via-neon-blue to-aethex-400 h-2 rounded-full transition-all duration-700 ease-out glow-blue shadow-lg shadow-aethex-500/50 motion-reduce:transition-none"
className={`w-2 h-2 rounded-full transition-all duration-300 motion-reduce:transition-none ${ style={{
index <= currentStep width: `${((currentStep + 1) / steps.length) * 100}%`,
? "bg-aethex-400 glow-blue animate-pulse motion-reduce:animate-none" }}
: "bg-muted"
}`}
/> />
))} </div>
{/* Step Indicators */}
<div className="flex justify-between gap-1">
{steps.map((step, index) => (
<div
key={index}
className="flex-1 h-1 rounded-full transition-all duration-300 motion-reduce:transition-none overflow-hidden"
>
<div
className={`h-full transition-all duration-300 ${
index <= currentStep
? "bg-gradient-to-r from-aethex-500 to-neon-blue glow-blue"
: "bg-border/40"
}`}
/>
</div>
))}
</div>
</div> </div>
</div> </div>