Create a Modular and Interactive `modularCard` Component

[Skoivumaki]

✨ Feature Description

Provide a brief description of the feature you would like to propose:

• What is it?: A new shared UI component named modularCard that is versatile and modular. It will support two primary types:

  1. Type 1: A card with a title (heading) and an image. Figma example
  2. Type 2: A news card-style layout with a title (heading), description (body), footnotes, and an image. Figma example

• Interactive Functionality: The card can act as a button or link, allowing users to navigate or be redirected to other pages.

• Who does it benefit?:

  • Developers adhering to Feature-Sliced Design principles.
  • End-users who experience a modular, versatile, and interactive UI.

---

🌟 Benefits of the Feature

Explain how this feature will enhance the project or improve user experience:

• User Experience: This feature will provide a cohesive and reusable card design that improves visual consistency and supports diverse use cases across the application or serving as call-to-action buttons.
• Project Impact: It encourages modularity and reusability, reducing development time and ensuring design standardization.

---

🛠️ Proposed Implementation

Outline how the feature could be implemented, including any relevant technical details or considerations:

• Technical Requirements:

  • Follow Feature-Sliced Design principles:
    • Place the component within the shared/ui layer as it is a reusable UI element.
    • Ensure props provide flexibility for integration into features or pages layers.
  • Use the existing Card component at shared/ui/Card as a reference for functionality.
  • Strictly follow the style and design for the component using Figma examples.

• Implementation Steps:

  1. Design Phase:
     • Define the component interface and props structure to allow for modular configurations like (title, description, footnotes, image, and link).
  2. Development Phase:
     • Create the modularCard component in the shared/ui layer.
     • Implement two variations (both should have ability for link):
       • Type 1: Title (heading) and image.
       • Type 2: Title (heading), description (body), footnotes, and image.
     • Interactive Functionality: Add button and link behavior based on props. (entire card is the clickable link)
  3. Testing Phase:
     • Test all variations (static and interactive) using placeholder text and hero images from shared/assets/images/heros. (atleast Hero images must fit nicely)
     • Validate proper navigation or redirection functionality for the button and link props.
     • Validate responsiveness and accessibility.
  4. Integration:
     • Ensure the component integrates seamlessly into the features and pages layers where needed.

---

📎 Additional Information

Include any extra context, examples, or resources that could help in understanding or implementing the feature:

• Relevant Links:

  • Feature-Sliced Design Documentation
  • Existing Card Component Reference (shared\ui\Card)
  • Hero Images Directory (shared\assets\images\heros)
  • Type 1 Figma example
  • Type 2 Figma example

• As always, if anything is unclear, please reach out to me on Discord for clarification.