Skip to content

feat: Build 'How It Works' section with correct 4-step flow (#177)#187

Open
Xuccessor wants to merge 1 commit into
Dfunder:mainfrom
Xuccessor:feature/issue-177-how-it-works
Open

feat: Build 'How It Works' section with correct 4-step flow (#177)#187
Xuccessor wants to merge 1 commit into
Dfunder:mainfrom
Xuccessor:feature/issue-177-how-it-works

Conversation

@Xuccessor
Copy link
Copy Markdown

Summary

Resolves #177

Updates the HowItWorks section on the landing page with the correct 4-step flow and responsive layout toggle.

Changes

  • Steps updated: Connect Wallet → Launch Campaign → Receive Donations → Automated Release
  • Icons: Wallet, Rocket, HeartHandshake, Zap (lucide-react)
  • Layout toggle: Horizontal grid (default) / Vertical list — accessible with aria-pressed
  • Connector lines between steps in horizontal desktop view
  • Fully accessible with aria-label on toggle buttons

Files Changed

  • app/(main)/components/HowItWorks.tsx

…oggle (Dfunder#177)

- Steps: Connect Wallet → Launch Campaign → Receive Donations → Automated Release
- Added icons for each step (Wallet, Rocket, HeartHandshake, Zap)
- Responsive horizontal grid / vertical list layout toggle
- Connector lines between steps in horizontal desktop view
- Accessible toggle buttons with aria-pressed and aria-label
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 29, 2026

@Xuccessor Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

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.

Build "How It Works" section on landing page

1 participant