Improve Index hero responsiveness

cgen-b6b272f897c6436a9341e49b2a148a5d
This commit is contained in:
Builder.io 2025-10-04 00:57:12 +00:00
parent a08c2cbb72
commit fe8eccdbb6

View file

@ -135,7 +135,7 @@ export default function Index() {
{/* Title */} {/* Title */}
<div className="space-y-6 animate-scale-in"> <div className="space-y-6 animate-scale-in">
<div className="space-y-4"> <div className="space-y-4">
<h1 className="text-5xl lg:text-7xl font-bold"> <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold">
<span className="text-gradient-purple">AeThex</span> <span className="text-gradient-purple">AeThex</span>
</h1> </h1>
<h2 className="text-2xl lg:text-3xl text-gradient animate-fade-in"> <h2 className="text-2xl lg:text-3xl text-gradient animate-fade-in">
@ -149,7 +149,7 @@ export default function Index() {
</div> </div>
{/* Interactive Features Grid */} {/* Interactive Features Grid */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 max-w-4xl mx-auto animate-slide-up"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-4xl mx-auto animate-slide-up">
{features.map((feature, index) => { {features.map((feature, index) => {
const Icon = feature.icon; const Icon = feature.icon;
const isActive = activeSection === index; const isActive = activeSection === index;
@ -163,7 +163,7 @@ export default function Index() {
}`} }`}
onClick={() => setActiveSection(index)} onClick={() => setActiveSection(index)}
> >
<CardContent className="p-6 text-center space-y-3"> <CardContent className="p-5 sm:p-6 text-center space-y-3">
<div <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`} 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`}
> >
@ -184,7 +184,7 @@ export default function Index() {
<Button <Button
asChild asChild
size="lg" 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" 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-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
> >
<Link <Link
to="/onboarding" to="/onboarding"
@ -199,7 +199,7 @@ export default function Index() {
asChild asChild
variant="outline" variant="outline"
size="lg" size="lg"
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6" className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
> >
<Link to="/dashboard">Explore Dashboard</Link> <Link to="/dashboard">Explore Dashboard</Link>
</Button> </Button>