Is your feature request related to a problem? Please describe.
Yes.
On standard screen sizes (e.g., 768px width), the "Smart Solution" section with the four feature cards and CTA button at the bottom does not fit entirely in one viewport, requiring users to scroll slightly to view the full content. This affects visual polish and user experience, especially during first impressions.
🎯 Describe the solution you'd like
Rework the layout so that:
All 4 feature cards (AI-Powered Automation, Personalized Learning, Instant Feedback, and Engaging Experience) fit within a single screen height, along with the CTA block (Start Your Transformation Today).
Adjust spacing, padding, and font scaling to achieve this without compromising readability.
Suggestions:
Reduce vertical margins/padding between blocks.
Compress the grid layout (maybe a tighter 2x2 grid).
Use min-h-[100vh] and overflow-hidden where appropriate.
Use responsive text (text-sm, text-base, sm:text-lg) to shrink long descriptions gracefully.
🔄 Describe alternatives you've considered
Making the CTA sticky or floating (but this may disrupt visual flow).
Splitting the section into two: feature cards first, CTA in next section (but this adds vertical scroll).
Adding animation to scroll into view automatically (not preferred).
🖼️ Additional Context
📷 Current layout (768px width and below):
✅ Expected Result:
Cleaner UI
Enhanced first-glance impact
No scroll required to see features + CTA
Feels like a complete unit in one screen
@k0msenapati Assign this issue to me under SSOC
Is your feature request related to a problem? Please describe.
Yes.
On standard screen sizes (e.g., 768px width), the "Smart Solution" section with the four feature cards and CTA button at the bottom does not fit entirely in one viewport, requiring users to scroll slightly to view the full content. This affects visual polish and user experience, especially during first impressions.
🎯 Describe the solution you'd like
Rework the layout so that:
All 4 feature cards (AI-Powered Automation, Personalized Learning, Instant Feedback, and Engaging Experience) fit within a single screen height, along with the CTA block (Start Your Transformation Today).
Adjust spacing, padding, and font scaling to achieve this without compromising readability.
Suggestions:
Reduce vertical margins/padding between blocks.
Compress the grid layout (maybe a tighter 2x2 grid).
Use min-h-[100vh] and overflow-hidden where appropriate.
Use responsive text (text-sm, text-base, sm:text-lg) to shrink long descriptions gracefully.
🔄 Describe alternatives you've considered
Making the CTA sticky or floating (but this may disrupt visual flow).
Splitting the section into two: feature cards first, CTA in next section (but this adds vertical scroll).
Adding animation to scroll into view automatically (not preferred).
🖼️ Additional Context
📷 Current layout (768px width and below):
✅ Expected Result:
Cleaner UI
Enhanced first-glance impact
No scroll required to see features + CTA
Feels like a complete unit in one screen
@k0msenapati Assign this issue to me under SSOC