Skip to content

Improve initiative card design for better visual appeal#726

Merged
4tal merged 2 commits into4tals:mainfrom
4tala:improve/initiative-card-design-clean
Feb 8, 2026
Merged

Improve initiative card design for better visual appeal#726
4tal merged 2 commits into4tals:mainfrom
4tala:improve/initiative-card-design-clean

Conversation

@4tala
Copy link
Copy Markdown
Contributor

@4tala 4tala commented Feb 8, 2026

This PR enhances the initiative card component with a more modern and elegant design.

Changes made:

  • Improved card styling with modern rounded corners and subtle shadows
  • Enhanced image presentation with a gradient overlay instead of low opacity
  • Added smooth lift hover effect with border color highlight
  • Refined typography with improved contrast, letter spacing, and readability
  • Better spacing and visual hierarchy throughout the card
  • Smooth transitions using cubic-bezier timing

Technical details:

  • Uses Chakra UI color mode values for proper dark/light theme support
  • Maintains all existing functionality and props
  • Responsive design preserved for mobile and desktop
  • No breaking changes to the component API

- Improved card styling with modern rounded corners and subtle shadows
- Enhanced image presentation with gradient overlay instead of low opacity
- Added smooth lift hover effect with border highlight
- Refined typography with better contrast and spacing
- Improved overall visual hierarchy and readability
@netlify
Copy link
Copy Markdown

netlify bot commented Feb 8, 2026

Deploy Preview for linksforisrael ready!

Name Link
🔨 Latest commit 1c83a64
🔍 Latest deploy log https://app.netlify.com/projects/linksforisrael/deploys/69884fcb4f06b400082c23fd
😎 Deploy Preview https://deploy-preview-726--linksforisrael.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Moved all useColorModeValue hook calls to the top of the component
to comply with React's rules of hooks (hooks must be called in the
same order on every render, not conditionally in JSX).
@4tal 4tal merged commit 0aeabc6 into 4tals:main Feb 8, 2026
5 checks passed
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