🚀 Feature: Add Cards Around "How It Works" Steps for Better UI

[pari-dubey1]

🔖 Feature description

Description

The "How It Works" section currently displays the steps (Search Users, Monitor Activity, Analyze Insights) without dedicated card containers. Adding cards around each step would improve spacing, visual hierarchy, and overall UI appearance.

Proposed Enhancement

Wrap each step inside a modern card component with:

• Padding
• Border radius
• Shadow/elevation
• Better spacing and alignment

Expected Benefits

• Cleaner and more organized layout
• Improved readability
• Better visual separation between steps
• More modern UI appearance

Suggested Implementation

Possible styling improvements:

.step-card {
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

Optional enhancements:

• Add hover effects
• Add subtle animations
• Improve responsiveness on smaller screens

Additional Context

This enhancement would improve the landing page aesthetics and make the workflow steps more visually engaging.

Labels

enhancement frontend ui-ux good first issue

🎤 Screenshot

Currently how it looks:

🔄️ Additional Information

No response

[SiddhiMohite20]

I would like to work on this enhancement under GSSoC 2026. Please assign it to me if available.