Create Comment and discussion Section

[Varsha-1605]

Fixes: #625

Description:

1. Stylish Design:

   • Uses a gradient background with animated color transitions
   • Implements a modern, card-based layout for comments
   • Utilizes custom fonts and a carefully crafted color scheme

2. Comment Submission:

   • Provides a form for users to submit new comments
   • Includes fields for the commenter's name and comment text
   • Features floating labels for input fields
   • Offers a visually appealing submit button with hover effects

3. Nested Comments:

   • Supports replies to existing comments
   • Displays replies indented under their parent comments

4. Dynamic Comment Rendering:

   • Renders comments and replies dynamically using JavaScript
   • Updates the comment list in real-time when new comments are added

5. Like Functionality:

   • Allows users to like comments
   • Displays the number of likes for each comment
   • Updates like count in real-time when clicked

6. Reply Functionality:

   • Provides a reply button for each comment
   • When clicked, focuses the comment form and sets it up for replying

7. Unique User Avatars:

   • Generates a unique color-based avatar for each commenter
   • Uses the first letter of the commenter's name in the avatar

8. Responsive Design:

   • Utilizes Tailwind CSS classes for responsive layout
   • Adapts to different screen sizes

9. Smooth Scrolling:

   • Implements smooth scrolling when navigating to different sections of the page

10. Interactive Elements:

    • Adds hover effects to comments, like buttons, and reply buttons
    • Provides visual feedback for user interactions

11. Custom Scrollbar:

    • Implements a custom-styled scrollbar for a more polished look

12. Data Structure:

    • Uses a JavaScript object to store and manage comment data
    • Supports nested data structure for replies

13. Error Prevention:

    • Includes required fields in the comment form to prevent empty submissions

Screenshots:

Pull Request Checklist

• I have added screenshots and videos to show before and after the working of my code.
• I have synced the latest fork with my local repository and resolved any conflicts.
• I have mentioned the issue number which I created before making this PR .(format to mention issue number is : fixes #(issue number) )
• I understand that if any the above conditions are not met , my PR will not be MERGED .

[netlify]

✅ Deploy Preview for aquamarine-duckanoo-d86f1a ready!

Name	Link
🔨 Latest commit	c156724
🔍 Latest deploy log	https://app.netlify.com/sites/aquamarine-duckanoo-d86f1a/deploys/670e84859066bc00080b1af7
😎 Deploy Preview	https://deploy-preview-999--aquamarine-duckanoo-d86f1a.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.

[github-actions]

🎉🎉 Thank you for your contribution! Your PR #999 has been merged! 🎉🎉