Issue

[Aryan-Agarwal-creator]

Description

Fixes #3301

This PR significantly improves the onboarding and badge generation experience by making the landing page more interactive, intuitive, and engaging for first-time users.

Key Improvements

Interactive Empty State

• Added a default sample badge preview using @torvalds
• Added a clear "Sample Preview" indicator
• Automatically switches to the user's badge after input

Improved Badge Generation Flow

• Introduced a stronger primary CTA: Generate My Badge
• Improved visual hierarchy and call-to-action visibility
• Added subtle micro-interactions and feedback states

Username Experience

• Added real-time username validation
• Added GitHub avatar preview inside the input field
• Added loading, success, and error states
• Implemented debounced validation requests

Demo Username Chips

• Added quick-start usernames:

  • @torvalds
  • @gaearon
  • @vercel
  • @sindresorhus

Animated Statistics Preview

• Added animated statistic cards showing:

  • Current Streak
  • Longest Streak
  • Total Contributions
  • Public Repositories

Enhanced Recent Searches

• Added GitHub avatars to recent searches
• Added quick regenerate functionality
• Improved visual clarity and usability

How It Works Section

Added a clear onboarding flow:

1. Enter Username
2. Generate Badge
3. Copy Snippet
4. Add to README

Accessibility Improvements

• Added ARIA labels
• Added screen-reader support
• Improved keyboard navigation
• Improved semantic structure

Responsive Design

• Improved mobile layouts
• Optimized spacing and wrapping
• Maintained responsiveness across devices

---

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement
• 🕐 Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

Attached screenshots/GIFs demonstrating:

• Sample badge preview
• Username validation
• Demo username chips
• Animated statistics section
• Enhanced onboarding flow
• Mobile responsiveness

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• I have run npm run format and npm run lint locally and resolved all errors.
• My commits follow the Conventional Commits format.
• I have updated README.md if I added a new theme or URL parameter. (Not applicable)
• I have starred the repo.
• I have made sure that I have only one commit to merge in this PR.
• The changes maintain the CommitPulse premium-quality experience and design language.
• I joined the CommitPulse Discord community for contributor discussions.

[vercel]

@Aryan-Agarwal-creator is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Hey @Aryan-Agarwal-creator, welcome to CommitPulse! 🎉

Thanks for opening your first pull request — this is a big deal and we appreciate the effort!

While you wait for a review, please double-check:

• ✅ You've read the CONTRIBUTING.md checklist
• ✅ npm run lint, npm run format, and npm run test all pass locally
• ✅ Your PR has a visual preview if it touches any SVG output
• 💬 You've joined our Discord for faster PR feedback

A maintainer will review your PR shortly. Hang tight! 🚀

[Aryan-Agarwal-creator]

@Aamod007 Why is the PR not merging ?

[Aamod007]

@Aryan-Agarwal-creator it will be merged soon

[github-actions]

⚠️ Hey @Aryan-Agarwal-creator, this PR has merge conflicts with the main branch.

Please pull the latest changes and resolve the conflicts so we can review it!

git fetch origin
git rebase origin/main
# resolve any conflicts, then:
git push --force-with-lease

Once resolved, the needs-rebase label will be removed automatically on the next check. 🙌