implemented onboarding feature

[AfreenInnovates]

---

name: Pull Request
about: Submit changes to the Sugar Labs website for review

📝 Description

This pull request improves the onboarding tour experience on the Sugar Labs website. It ensures that the onboarding progress is saved to localStorage whenever the user closes or reloads the page, allowing users to resume the tour from where they left off. It adjusts the placement of onboarding popups so that each step is clearly visible above or below the relevant section, improving usability and clarity.

🔗 Related Issue

Fixes #465
#465

🔄 Type of Change

• 📱 New Feature (new page, component, or functionality)
• 🎨 UI/UX Update (visual changes, styling improvements)
• 📖 Content Update (text changes, documentation)
• 🐛 Bug Fix
• ⚡ Performance Improvement
• ♿ Accessibility Enhancement
• 🔒 Security Update
• 📦 Dependency Update
• 🧹 Code Refactoring
• 🧪 Test Updates

📷 Visual Changes

Screenshots / GIFs

🧪 Testing Performed

📱 Browser Compatibility

• Chrome (Version: )
• Firefox (Version: )
• Safari (Version: )
• Edge (Version: )
• Mobile Chrome (Device: )
• Mobile Safari (Device: )

🖥️ Responsive Design

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

✅ Test Cases

1. Onboarding resumes from last step after abrupt close/reload.
2. Onboarding popups are clearly visible for each step.
3. Progress is correctly saved and restored across sessions.

♿ Accessibility

• Proper heading hierarchy maintained
• ARIA labels added where needed
• Color contrast requirements met
• Keyboard navigation works correctly
• Screen reader testing performed

📋 PR Checklist

• My code follows the project's coding style guidelines
• I have tested these changes locally
• I have updated the documentation accordingly
• My changes generate no new warnings or console errors
• I have added tests that prove my fix/feature works
• All existing tests pass successfully
• I have checked for and resolved any merge conflicts
• I have optimized images/assets (if applicable)
• I have validated all links are working correctly

💭 Additional Notes

• Please verify onboarding step placements on all major pages.
• Let me know if further adjustments to popup placement are needed.

---

📚 Reviewer Resources

• Contributing Guide
• Style Guide
• Community Chat

Thank you for contributing to the Sugar Labs website! 🎉

[sa-fw-an]

Please fix the issues so that I can review your PR.

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[AfreenInnovates]

@sa-fw-an Tried fixing the errors, I think the checks have passed! Thanks for checking the PR.

[FirePheonix]

I feel like this is not important as of now. I suggest you attend sugar labs meets from the matrix channel and discuss issues that are much required.