Add Challenge of the Day feature on homepage

[shreyaB7134]

This PR adds a "Challenge of the Day" section to the homepage (index.html).
✅ It shows one LeetCode challenge per day using a client-side algorithm based on the current date.
✅ It includes challenge titles, difficulty, and links to LeetCode.
✅ Enhances user engagement by encouraging daily problem-solving.

Fixes #214

CodeClip.-.Personal.-.Microsoft.Edge.2025-07-31.22-27-07.mp4

🔗 Part of GSSoC 2025 ✨

[greptile-apps]

Greptile Summary

This PR adds a "Challenge of the Day" feature to the CodeClip homepage, introducing three new files: a CSS stylesheet (styles/challengeOfTheDay.css), a JSON data file (challenges.json), and modifications to the main homepage (index.html). The feature is designed to enhance user engagement by providing daily coding challenges from LeetCode.

The implementation includes a modern, responsive UI component with difficulty-based color coding (Easy/Medium/Hard), loading states, and hover effects that integrate with the existing design system using the established primary color (#4f46e5). The challenges.json file contains 51 curated LeetCode problems ranging from Easy to Hard difficulty levels, providing the data source for the feature.

However, there's a significant discrepancy between the PR description and actual implementation. While the description promises "one LeetCode challenge per day using a client-side algorithm based on the current date," the actual implementation generates random challenges when users click a button, rather than displaying a consistent daily challenge that all users would see on the same date.

The feature integrates into the homepage by adding a new section with a Bootstrap-based layout, maintaining consistency with the existing CodeClip design patterns. The CSS provides comprehensive styling for various states and responsive breakpoints, though it primarily focuses on mobile responsiveness.

Confidence score: 2/5

• This PR has critical structural issues that will likely cause problems in production
• The HTML contains duplicate navigation elements creating invalid markup, and the feature doesn't match the specified requirements
• Files needing attention: index.html (duplicate navigation), challenges.json (unused data source), and the overall feature implementation logic

_{3 files reviewed, 3 comments}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

style: This fadeIn animation is defined but never used in the CSS. Consider removing it or applying it to relevant elements.