Implement FAQ Accordion Section on Homepage

[best2025j]

close #180

Executive Summary

This PR implements the FAQ accordion section on the homepage to address Issue #4. The FAQ is built using Tailwind CSS and an accessible accordion component, providing users with answers to common questions about Bridgelet's payment flow. The component is fully responsive, keyboard accessible, and consistent with the existing design system.

Linked Issues & References

• Issue: Resolves Add Pull Request Template #4
• Related PRs: N/A

Type of Change

Category

• New Feature (Non-breaking change adding functionality)
• Bug Fix (Non-breaking change fixing an issue)
• Performance Optimization (Code change to improve efficiency)
• Refactoring (Code structure change without external API modification)
• Security Patch (Fixing a vulnerability or security concern)
• Documentation (Updates to README, Wiki, or inline docs)
• Infrastructure (CI/CD, build scripts, Docker)

Domain

• Smart Contracts (Rust/Soroban)
• SDK/Backend (NestJS/TypeScript)
• Frontend/UI

Technical Implementation Details

• Added a new FAQ section to the homepage.
• Implemented an accessible accordion using Tailwind CSS and Radix UI Accordion.
• Included the following FAQ items:
  • What is an ephemeral account?
  • Do recipients need a wallet?
  • What happens if the payment is unclaimed?
  • Is it safe?
• Ensured keyboard navigation, focus management, and responsive layout.
• Styled the component to match the existing homepage design.

Breaking Changes

• No - Backward compatibility is maintained.
• Yes - This change requires consumers of the SDK/Contract to update their code.

Verification & Testing Strategy

Automated Tests

• Unit Tests: Added/Updated new unit tests.
• Integration Tests: Verified interaction between modules.
• Linting: Code follows the project's style guide.

Manual Verification

1. Environment:

• Target Environment: Local Development

2. Reproduction Steps:

1. Start the frontend development server.
2. Navigate to the homepage.
3. Scroll to the FAQ section and verify each accordion item expands/collapses correctly using both mouse and keyboard navigation.

3. Proof of Execution:

• Verified all FAQ items render correctly.
• Confirmed keyboard accessibility (Tab, Enter, Space).
• Confirmed responsive behavior across desktop and mobile viewports.
• All tests and lint checks pass successfully.

Quality Assurance Checklist

• I have performed a self-review of my own code.
• I have commented on my code, particularly in hard-to-understand areas.
• I have updated the documentation to reflect these changes.
• My changes do not generate new warnings or errors.
• I have verified that new dependencies are necessary and secure.
• (If Smart Contract) I have verified gas usage and storage footprints are optimized.

---

By submitting this Pull Request, I acknowledge that I have adhered to the Bridgelet contribution guidelines.

[vercel]

@best2025j is attempting to deploy a commit to the aminubabafatima8-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.