Products - Copy this React, Tailwind Component to your project

Use-this-Figma-file-as-the-design-reference-for-the-web-application.-Each-image-in-the-file-corresponds-to-a-different-screen.-Build-the-project-using-React,-Tailwind-CSS,-Lucide-react-for-icons,-and-Framer-Motion-for-animations.-Organize-the-project-with-the-following-structure:-Components:-Reusable-UI-components-like-buttons,-cards,-headers,-etc.-Screens:-Correspond-to-the-screens-shown-in-the-Figma-file-(e.g.,-Home,-About,-Contact).-Assets:-Store-images,-logos,-and-other-media-used-in-the-project.-Utils:-Any-helper-functions-or-utility-files.-Styles:-Add-global-styles-or-Tailwind-configurations-if-needed.-Requirements:-TypeScript-and-Next.js-are-strictly-prohibited.-Use-only-JavaScript-and-React-for-the-project.-Responsive-design-is-mandatory.-The-application-must-adapt-seamlessly-to-both-desktop-and-mobile-layouts.-Use-the-following-Tailwind-CSS-color-palette:-css-Copy-code---primary-100:-#FFD700;---primary-200:-#ddb900;---primary-300:-#917800;---accent-100:-#8B4513;---accent-200:-#ffd299;---text-100:-#FFFFFF;---text-200:-#e0e0e0;---bg-100:-#1A1A1A;---bg-200:-#292929;---bg-300:-#404040;-This-color-palette-must-be-strictly-implemented-across-the-project.-Use-Framer-Motion-for-animations,-ensuring-smooth-transitions-and-interactive-elements.-The-filters-(e.g.,-by-category,-price,-etc.)-must-be-fully-functional.-The-shopping-cart-must-work-correctly,-including-adding/removing-items,-and-displaying-the-total.-Use-Lucide-react-icons-consistently-for-all-icons-in-the-design.-Follow-best-coding-practices-for-React,-including-functional-components-and-hooks-where-applicable.-Use-Tailwind-CSS-classes-to-style-the-components-according-to-the-Figma-design.-Avoid-inline-styles-unless-absolutely-necessary.-Once-the-project-is-generated,-verify-that:-The-design-matches-the-Figma-layout.-The-app-is-responsive-and-functional-(filters-and-cart-work-properly).-The-code-is-clean,-maintainable,-and-adheres-to-the-specified-requirements.