Update NewsCard component layout based on new Figma designs

[Rutjake]

✨ Enhancement Description

• Update the NewsCard component to match the new layout specified in the updated Figma designs. The card layout will change to a single-card-per-row format, featuring the image on the left side, with the description text, publication date, and author/publisher name.
• The current NewsCard component uses an outdated design. Updating it ensures visual consistency with the new project branding and improves readability for news content on various screen sizes.

---

🌟 Benefits of the Enhancement

• User Experience: The list-style layout (one card per row) makes scanning and reading news articles much easier for users. A clear hierarchy between the image, metadata, and description enhances the overall readability.
• Project Impact: Modernizes the UI components according to the latest design specs and ensures robust, fluid responsiveness across mobile, tablet, and desktop views.

---

🛠️ Proposed Implementation

• Technical Details:
  • Update the CSS/styling of the NewsCard component.
  • Implement a mobile-first responsive approach: stack the content vertically on small screens and switch to the horizontal (image-left, text-right) layout on larger viewports.
  • Ensure props for image, description, date, and publisher are correctly passed and rendered.
• Implementation Plan:
  1. Review the exact dimensions, spacing, and typography details from the Figma file.
  2. Refactor the NewsCard component layout and styling.
  3. Apply responsiveness breakpoints.
  4. Verify the implementation against the original design mockups.

---

📎 Additional Information

• Scope Note: Since hover states are not separately defined in the Figma design, they do not need to be modified in this task.

🔗Figma Designs

• Mockups/Examples:

  • Desktop: 1 card per row (Image on the left, details on the right).

  📷Preview:
  

  • Mobile: Content stacked vertically as per Figma responsive guidelines.

  📷Preview: