feat: Enhance UI to display all user stories

[joshua-jinu]

Refactor User Stories Section into Reusable Component

Summary

Enhanced the Jenkins User Stories section by extracting the story card markup into a separate reusable component (UserStoryCard). This improves code maintainability and reusability while preserving all existing functionality.

Changes

• Created new component UserStoryCard to encapsulate the user story display logic
• Created associated stylesheet UserStoryCard.module.js for component-specific styles
• Replaced inline story card markup in main component with the new UserStoryCard component
• Maintained all existing functionality including:
  • Image display with Gatsby Image
  • Story title and metadata display
  • Link handling
  • Responsive layout

Before:

Desktop:

Mobile:

After:

Desktop:

Mobile:

Implementation Details

New Files:

• UserStoryCard.js: Component that renders individual user story cards
• UserStoryCard.module.js: Component-specific styles

Props Passed to UserStoryCard:

• slug: Story URL identifier
• image: Story featured image
• title: Story title
• date: Publication date
• tag_line: Story summary/tagline

Testing Completed

• Verified all links work correctly and navigate to appropriate story pages
• Tested responsive layout across different screen sizes
• Confirmed images load and display properly
• Verified date and tagline display correctly
• Tested with and without images to ensure graceful handling
• Verified component styling matches original design

[joshua-jinu]

Hey @krisstern , could you please have a look at this PR

[krisstern]

Sure @joshua-jinu thanks for the PR! And I will take a look shortly.