Skip to content

Conversation

@devvaansh
Copy link

@devvaansh devvaansh commented Oct 7, 2025

Overview
This PR completely modernizes the Keploy Writers Program website, transforming it from basic static sections into professional, reusable UI components that match the polish of the Keploy ecosystem.

What's Changed

Redesigned Sections:
Hero Section: Modern glassmorphism header with improved CTA buttons and proper click functionality
What Program Offers: Card-based layout with hover effects and visual icons
How Program Works: Elegant 6-step timeline with visual indicators and connecting lines
Evaluation Criteria: Accessible card components with FontAwesome icons
Guidelines Section: 4-card grid covering blog writing, social media, SEO, and quality standards

Design Improvements:

  • Applied consistent Keploy brand colors (#F89559 primary, #00163D secondary)
  • Implemented modern CSS Grid/Flexbox layouts
  • Added subtle animations and hover effects
  • Enhanced typography using Inter font family
  • Integrated dot-background patterns for community/footer sections

Accessibility Enhancements:

  • Added proper ARIA labels and semantic HTML structure
  • Implemented keyboard navigation support
  • Enhanced focus states with 2px outlines
  • Ensured proper color contrast ratios
  • Added screen reader friendly content

Responsive Design:

  • Mobile-first approach with proper breakpoints
  • Grid layouts adapt from multi-column to single column
  • Typography scales appropriately across devices
  • Navigation optimized for mobile experience

Functionality Improvements:

  • Fixed all external button links (Register Now, Join Community)
  • Added smooth scrolling for internal navigation
  • Implemented scroll progress indicator
  • Enhanced community section with large Slack image
  • Direct links to Keploy SEO Guidelines

Technical Implementation:

  • Modern CSS custom properties for maintainable theming
  • Intersection Observer for performant scroll animations
  • Optimized JavaScript with proper event handling
  • Clean, semantic HTML5 structure
  • CDN integration for FontAwesome and Google Fonts

Key Features:

  • Professional hero section with working CTA buttons
  • Modern card-based layouts with hover effects
  • Timeline design for process visualization
  • Comprehensive guidelines section with SEO best practices
  • Enhanced community engagement with visual elements
  • Consistent Keploy branding throughout

Acceptance Criteria Met:

  • All sections reimplemented with modern, reusable components
  • Components follow accessibility best practices (ARIA, keyboard navigation)
  • Styling consistent with Keploy's main website aesthetic
  • Guidelines section includes direct reference to SEO Guidelines
  • Responsive design across all device sizes
  • Working external links with proper security attributes

References:

Testing:

  • All buttons and links functional
  • Responsive design tested across devices
  • Accessibility validated with keyboard navigation
  • Cross-browser compatibility verified
  • Performance optimized with modern CSS
Screenshot 2025-10-07 at 12 48 39 PM Screenshot 2025-10-07 at 12 49 38 PM Screenshot 2025-10-07 at 12 49 06 PM Screenshot 2025-10-07 at 12 49 21 PM Screenshot 2025-10-07 at 12 49 50 PM

This modernization brings the Writers Program website up to professional standards while maintaining excellent usability and accessibility.#3071

…hat don’t match the professional polish of the Keploy ecosystem. These need to be redesigned into modern, reusable UI components.

Expectations:

Redesign the following sections with modern UI practices:

What this program offers you?
Here’s how the Program works
Evaluation Criteria
Guidelines for creating blogs and social media carousels (reference: Keploy SEO Guidelines
)
Use modern UI libraries (shadcn/ui, Aceternity, Radix UI, Magic UI, etc.) for consistency.
Ensure components are responsive, accessible, and reusable.
Match the visual style and theme of keploy.io pillar pages.
Acceptance Criteria:

All listed sections are reimplemented with modern, reusable components.
Components follow accessibility best practices (keyboard navigation, ARIA, etc.).
Styling consistent with Keploy’s main website.
Guidelines section includes direct reference and links to SEO/blog rules.
Links:

Writers Program Website: https://www.writers.keploy.io/
Keploy SEO Guidelines: https://github.com/keploy/keploy/wiki/Keploy-SEO-Guidelines
Example Pillar Page: https://keploy.io/unit-test-generator
Activity

Signed-off-by: devansh vashisht <[email protected]>"
Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you and congratulations 🎉 for opening your very first pull request in writers-program

@devvaansh
Copy link
Author

@amaan-bhati plz review its been 2 weeks

@amaan-bhati amaan-bhati self-requested a review October 23, 2025 06:47
@amaan-bhati
Copy link
Member

Hey @devvaansh Thanks for raising this pr, this pr cant be merged directly until the migration to nextjs is completed, also the ui is breaking in the hero section the image that you have used needs to blend in with the hero bg. You can make the changes to this again after the migration.

@devvaansh
Copy link
Author

thanks for the review @amaan-bhati

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants