Guide to install on Mac

[Dakshsharma1108]

📝 Description

1. Added complete steps and images

• Expanded the guide with detailed step-by-step content.
• Included the correct images for each step to improve clarity and usability.

2. Removed unused fields from raspberryLogoCardsData

• Removed description and button-related fields because the Raspberry guide no longer uses them.
• Keeps the data cleaner.

3. Converted ScrollToSteps into a reusable useScroll hook

• Created a new custom hook (useScroll) that handles scrolling to step sections.
• This makes the scrolling behavior reusable across other pages and better aligned with React patterns.

4. Fixed step-switching bug when changing guides

• Previously, switching guides while on a later step could leave the UI blank if the newly selected guide had fewer steps.
• Fixed by resetting the steps UI when the guide changes — the StepsToUse component is remounted using a [key]so its internal [currentStep] resets safely.

🔗 Related Issue

Fixes #444

🔄 Type of Change

• 📱 New Feature (new page, component, or functionality)
• 🎨 UI/UX Update (visual changes, styling improvements)
• 📖 Content Update (text changes, documentation)
• 🐛 Bug Fix

📷 Visual Changes

Visit following url for live preview -
https://www-v2-mac-guide.vercel.app/bootablesoas

🖥️ Responsive Design

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

[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:

• TypeScript linting failed

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]

❌ 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:

• TypeScript linting failed

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. 👏

[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. 👏

[Dakshsharma1108]

please review @sa-fw-an