Reusable Glassmorphism "Cloud" Card Component

[Rutjake]

✨ Enhancement Description

Implement a reusable card component featuring an organic, cloud-like background blur. The effect must blur the underlying page background (brick wall) while maintaining text legibility. The background blur should not be a rigid rectangle; instead, it must fade out very softly towards the edges.

---

🌟 Benefits of the Enhancement

• User Experience: Enhances readability by providing a high-contrast, blurred backdrop for text while maintaining a seamless visual flow. The organic shape feels less intrusive and more integrated into the artwork.
• Project Impact: Provides a flexible, reusable component for "Hero" sections or character descriptions. It leverages modern CSS capabilities like backdrop-filter and mask-image for high-end visuals without the performance overhead of large transparent PNG assets.

---

🛠️ Proposed Implementation

• Technical Details:
  • Backdrop Blur: Use backdrop-filter: blur(40px) for the frosted glass effect on the page background.
  • Color & Opacity: Base color #172936 applied with varied alpha channels (e.g., rgba(23, 41, 54, 0.8)).
  • Organic Shaping: Implementation of multiple overlapping radial-gradient layers within a ::before pseudo-element to create a "lumpy" cloud shape.
  • Edge Softening: Use of mask-image: radial-gradient(...) to fade the entire effect to transparent toward the edges.
• Implementation Plan:
  1. Define the base component structure to accept image, title, description, and children (for buttons).
  2. Create the SCSS module utilizing ::before for the blur/color layer and ::after for a deep diffused glow.
  3. Apply backdrop-filter with necessary -webkit- prefixes for Safari compatibility.
  4. Fine-tune the radial mask percentages to ensure the blur disappears completely before hitting the element's bounding box.
  5. Placement: Add the newly created component to the Main Page in the location specified in the Figma design.

---

📎 Additional Information

• Responsiveness: Even though a dedicated mobile design may not be available yet, the component must be fully responsive and adapt gracefully to different screen sizes.

🔗 Links & References:

• Figma Designs
• MDN Web Docs: backdrop-filter
• MDN Web Docs: mask-image

📷 Preview: