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

Add loading screen and enhance hero section animations

Browse source 
cgen-7e67706b910b4a459d395a24037290f1
This commit is contained in:
Builder.io 2025-08-05 22:56:35 +00:00
parent 775b50b1c9
commit 2083f34586
1 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
client/pages/Index.tsx
View file

@ -91,34 +91,54 @@ export default function Index() {
} }
]; ];
if (isLoading) {
return <LoadingScreen message="Initializing AeThex Corporation..." showProgress={true} duration={1500} />;
}
return ( return (
<Layout> <Layout>
{/* Hero Section */} {/* Hero Section */}
<section className="relative py-20 lg:py-32"> <section className="relative py-20 lg:py-32 overflow-hidden">
<div className="container mx-auto px-4 text-center"> {/* Animated Background */}
<div className="absolute inset-0 opacity-10">
{[...Array(50)].map((_, i) => (
<div
key={i}
className="absolute w-1 h-1 bg-aethex-400 rounded-full animate-float"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random() * 2}s`
}}
/>
))}
</div>
<div className="container mx-auto px-4 text-center relative z-10">
<div className="max-w-4xl mx-auto space-y-8"> <div className="max-w-4xl mx-auto space-y-8">
<div className="space-y-4"> <div className="space-y-4 animate-slide-down">
<Badge variant="outline" className="border-aethex-400/50 text-aethex-400"> <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 hover-glow animate-bounce-gentle">
<Sparkles className="h-3 w-3 mr-1" /> <Sparkles className="h-3 w-3 mr-1 animate-pulse" />
Innovation & Technology Innovation & Technology
</Badge> </Badge>
<h1 className="text-4xl lg:text-6xl font-bold leading-tight"> <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
<span className="text-gradient-purple">The Home of Innovation</span> <span className="text-gradient-purple animate-typing">The Home of Innovation</span>
</h1> </h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto animate-fade-in">
Welcome to AeThex Corporation, the central hub for our family of companies Welcome to AeThex Corporation, the central hub for our family of companies
dedicated to pushing the boundaries of development, automation, and technology. dedicated to pushing the boundaries of development, automation, and technology.
</p> </p>
</div> </div>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <div className="flex flex-col sm:flex-row justify-center gap-4 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"> <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"> <Link to="/onboarding" className="flex items-center space-x-2">
<span>Join AeThex</span> <span>Join AeThex</span>
<ArrowRight className="h-5 w-5" /> <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
</Link> </Link>
</Button> </Button>
<Button asChild variant="outline" size="lg" className="border-border/50"> <Button asChild variant="outline" size="lg" className="border-border/50 hover-lift interactive-scale">
<Link to="/about">Learn More About Us</Link> <Link to="/about">Learn More About Us</Link>
</Button> </Button>
</div> </div>