Fix/nykaa clone

[Arhanabdullah]

📝 Pull Request Description

Related Issue

Closes #10722

Summary

This PR redesigns the Day 112: Nykaa Clone homepage to provide a UI/UX experience that more closely resembles the original Nykaa website. The update focuses on improving the overall layout, visual hierarchy, responsiveness, and user experience while modernizing the project structure and frontend components.

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• 🚀 New feature or UI/UX enhancement

---

🛠️ Changes Made

• Redesigned the homepage layout with a cleaner and more modern structure.

• Rebuilt the navigation bar with improved spacing, typography, and search functionality.

• Added a top utility bar similar to the original Nykaa website.

• Improved the hero banner section and promotional layouts.

• Redesigned the category section with modern cards and hover effects.

• Implemented responsive product cards displaying:

  • Brand name
  • Product title
  • Rating
  • Reviews
  • Current price
  • Original price
  • Discount badge
  • "Add to Bag" button

• Redesigned the Top Brands and Hard To Resist Deals sections.

• Added smooth hover animations and subtle transitions throughout the UI.

• Improved overall spacing, typography, and color consistency.

• Implemented responsive layouts for desktop, tablet, and mobile devices.

• Refactored the JavaScript into reusable rendering functions for products, brands, and deals.

• Updated product, brand, and deal data structures to support richer UI components.

• Improved footer styling and overall visual consistency.

---

🧪 Testing and Verification

Local Validation

• I have run node scripts/validateProjects.js locally and it passed with zero errors.

Browser Compatibility Check

• Tested and verified in Google Chrome
• Tested and verified in Mozilla Firefox
• Tested and verified in Safari / Microsoft Edge

Responsive & Accessibility Checks

• Verified responsive layout on Mobile viewports (using DevTools)
• Verified responsive layout on Tablet viewports
• Keyboard navigation and focus outlines checked
• Semantic HTML and ARIA labels checked

---

Before

• Homepage layout appeared largely unstyled and did not closely resemble the original Nykaa website.
• Navigation, spacing, product cards, and promotional sections lacked visual consistency.

After

• Redesigned homepage with an improved Nykaa-inspired interface.
• Modern navigation bar with search functionality.
• Enhanced hero banner and promotional sections.
• Responsive product cards with pricing, ratings, discounts, and action buttons.
• Improved responsiveness across desktop, tablet, and mobile devices.

---

🤝 Contributor Checklist

• My code follows the code style guidelines of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have updated the documentation / README files accordingly.
• My changes generate no new warnings or console errors.
• There are no unrelated changes or formatter noise in this PR.

[vercel]

@Arhanabdullah is attempting to deploy a commit to the Dhairya Gothi 's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[github-actions]

🎉 Your pull request has been successfully merged! 🎉 Thank you for your valuable contribution to our project. Your efforts are greatly appreciated. Feel free to reach out if you have any more contributions or if there's anything else we can assist you with. Keep up the fantastic work! 🚀