enhance: improve About SafeVoice section

[Heemadhawala-R]

🛠️ Pull Request Template

🏷️ PR Type

Select the type of PR (check one):

• 🐞 Bug Fix
• ✨ Feature
• 🛠️ Improvement / Refactor
• 📚 Documentation

---

🔗 Related Issue

Link the GitHub issue this PR closes (if applicable).
Example: Closes #123

• Closes Improvement Request: Enhance "About SafeVoice" Section #37

---

📝 Rationale / Motivation

This PR improves the “About SafeVoice” section to create a more engaging, clean, and user-friendly experience.
The previous page contained duplicated sections and repetitive content, which affected readability and overall UI consistency.

The updated version focuses on:

• creating a more human-centered experience
• improving responsiveness
• enhancing visual interactions
• making the content feel more supportive and welcoming

---

✨ Description of Changes

Frontend

• Improved the About SafeVoice section with a cleaner and more responsive layout
• Updated heading sizes for better responsiveness across different screen sizes
• Rewrote the subtitle and mission statement to make the content feel more humanized and engaging
• Added smoother hover animations to the Core Values cards
• Introduced a new “Why SafeVoice Matters” section to create a stronger emotional connection with users
• Improved dark mode consistency and overall UI readability
• Removed duplicated sections and cleaned up the page structure for better maintainability

UI / UX

• Enhanced spacing and visual hierarchy
• Improved user interaction with smoother transitions and hover effects
• Made the About page feel more welcoming and community-focused

Refactoring / Cleanup

• Cleaned repetitive code and improved component readability
• Simplified the About page structure for easier future maintenance

---

🧪 Testing Instructions

1. Install dependencies using:

   npm install

2. Start the development server:

   npm run dev

3. Open the local development URL shown in the terminal

4. Navigate to the “About SafeVoice” page

5. Verify the following:

   • The page loads without errors
   • Responsive heading sizes work properly on different screen sizes
   • Hover animations work smoothly on the Core Values cards
   • The updated mission statement and subtitle display correctly
   • The new “Why SafeVoice Matters” section appears properly
   • Dark mode styling remains consistent across all sections
   • Duplicate sections are removed and the page structure looks clean

6. Test responsiveness on:

   • Mobile view
   • Tablet view
   • Desktop view

7. Automated Tests

   • No automated tests were added for this UI enhancement PR

8. Edge Case Verification

   • Checked layout consistency in dark/light mode
   • Verified spacing and readability on smaller screens
   • Ensured animations do not affect layout stability

---

👀 Impact Assessment

User-facing Changes (UI / UX)

• Improved the overall appearance and readability of the About SafeVoice page
• Added a more engaging and human-centered user experience
• Enhanced responsiveness across mobile, tablet, and desktop devices
• Added smoother hover animations and better visual interactions
• Improved dark mode consistency and spacing across sections

Backend / API Changes

• No backend or API changes were made in this PR

Performance Considerations

• Minimal performance impact
• Changes are primarily UI-focused with lightweight styling and animation improvements
• Removed duplicate sections, resulting in cleaner and more maintainable code

Security Implications

• No security-related changes introduced
• No authentication, API, or database logic was modified

Cross-browser / Device Impact

• Verified responsive behavior across different screen sizes
• Compatible with modern browsers including Chrome, Edge, Firefox, and Safari
• Improved mobile responsiveness and layout consistency

---

🖼️ Screenshots / GIFs (if applicable)

Add screenshots or GIFs demonstrating user-facing changes

---

⚡ Checklist

• Code follows project’s coding style and guidelines
• Changes are tested locally
• Automated tests added/updated
• Documentation updated (if applicable)
• User-facing changes are documented
• Related issue linked
• No new warnings/errors introduced
• All reviewers guidance addressed

---

🔖 Reviewer Notes

Please focus on the following areas during review:

• Responsiveness and layout consistency across different screen sizes
• UI improvements made to the About SafeVoice section
• Hover animations and visual interaction enhancements
• Updated humanized content for the subtitle and mission statement
• Removal of duplicate sections and overall code cleanup
• Dark mode consistency across cards, text, and sections

Known Limitations

• This PR focuses only on frontend/UI improvements
• No backend functionality or API logic was modified
• Automated tests were not added since the changes are mainly visual enhancements

Optional Testing Scenarios

• Test responsiveness on mobile, tablet, and desktop devices
• Verify dark/light mode appearance
• Check hover animations and spacing consistency
• Ensure all About page sections render correctly without duplication

---

⚠️ Breaking Changes

• No breaking changes introduced in this PR
• No public APIs were modified
• No configuration or environment variables were changed
• Existing workflows and application functionality remain unaffected

---

🏆 Optional Enhancements / Future Work

• Add advanced animations and transitions using Framer Motion
• Introduce contributor or community member cards
• Improve accessibility support for better user experience
• Add testimonials or real community stories section
• Implement dynamic statistics for the “Our Impact” section
• Add multilingual support for wider accessibility
• Further optimize responsiveness for smaller devices
• Enhance visual storytelling with illustrations or interactive elements

---

🎯 Priority / Impact Level

Indicate the priority and expected impact:

• Low / Medium / High
• Helps maintainers understand urgency and importance
• Priority: Medium
• Impact: Medium
  This PR mainly focuses on improving the user experience and overall readability of the About SafeVoice section.
  While it does not introduce backend or functional changes, it significantly enhances UI consistency, responsiveness, and user engagement across the page.

[netlify]

✅ Deploy Preview for safevoiceforwomen ready!

Name	Link
🔨 Latest commit	7403d3f
🔍 Latest deploy log	https://app.netlify.com/projects/safevoiceforwomen/deploys/6a1af3b8e2f6f30008067853
😎 Deploy Preview	https://deploy-preview-155--safevoiceforwomen.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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