Issue #187: [BUG] Add Functionality to VR Accessories Button and Create VR Product Page

[AJ-Athira]

Pull Request Format

PR Title

### Issue #187: [BUG] Add Functionality to VR Accessories Button and Create VR Product Page

Type of PR

• Add X in the box to specify the improvement type.
• [X] Bug fix
• [ ] Feature enhancement
• [ ] Documentation update
• [ ] Other (specify): ___________

Description This pull request aims to fix the bug where the VR Accessories button in the navigation bar was non-functional. It now navigates users to a newly created VR Accessories page, showcasing products such as VR controllers, headsets, and other accessories. Each product displays an image, description, price, and an Add to Cart button for a seamless shopping experience.

Specific changes include: Enabled navigation for the VR Accessories button. Created a new VR Accessories page with a responsive product grid. Added hover effects and dynamic product features, enhancing the user experience. Screenshots / Videos (if applicable)

Before: The VR Accessories button on the navigation bar was non-functional, and there was no dedicated VR accessories page.

After: The button now navigates users to the VR Accessories page. This page displays product details in a grid format with hover effects and an Add to Cart button for each product.

https://github.com/user-attachments/assets/b35ed164-370b-4e40-9770-998c90e64934

Checklist Add X in the box to specify. I have performed a self-review of my code. I have tested the changes thoroughly before submitting this pull request. I have provided relevant issue numbers, screenshots, and videos after making the changes. I have commented my code, particularly in hard-to-understand areas.

Additional Context I have worked on this issue as part of GSSoC-ext 🎮 and made sure the design and functionality adhere to project standards. I would also like to kindly request if you could consider increasing the issue level to level 3 since this task involved both frontend development and improving the overall user experience, which took considerable effort.

Looking forward to your feedback! Thank you for your time and review!

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
collect-your-gaming-tools	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2024 10:20am

[netlify[bot]]

✅ Deploy Preview for collect-your-gamingtools ready!

Name	Link
🔨 Latest commit	fe87144d8411c55d5fc8a3a92e182d8ed1c4bf14
🔍 Latest deploy log	https://app.netlify.com/sites/collect-your-gamingtools/deploys/670e41e83dc6e3000869d0eb
😎 Deploy Preview	https://deploy-preview-364--collect-your-gamingtools.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AJ-Athira]

Hello @swaraj-das ,can you please review my PR & merge

[swaraj-das]

Please remove the button in the attached image. Also, improve the styling of the dropdown list in the navbar to make it look better.

[AJ-Athira]

Sure ...I will make the changes as mentioned.

[AJ-Athira]

Changes implemented. Please review @swaraj-das and merge if there are no other changes required

[AJ-Athira]

Changes implemented. Please review @swaraj-das and merge if there are no other changes required

[AJ-Athira]

Changes implemented. Please review @swaraj-das and merge if there are no other changes required

[AJ-Athira]

i request @swaraj-das to please review my pr, if there are any changes let me know ....