Product Detail Page - Copy this Html, Bootstrap Component to your project

Yum Yum Rank is a food product review website where users can explore and compare food items based on health scores. The platform will feature a variety of food products, highlighting their nutritional value, and offering users an engaging way to discover healthier food options. Key Pages: Home Page: A clean, welcoming design. A navigation bar with links to Home, Products, Feedback, and About. An eye catching hero section introducing the site’s purpose, possibly with a search bar to start exploring products. A category section that allows users to explore different product types (e.g., snacks, beverages). A “Recently Added Products” section to showcase new food items. A footer with contact information, social links, and terms & conditions. Product Page: A category panel for filtering products by category. A product list view showing product images, names, brief descriptions, and health scores. Feature interactive elements (e.g., hover effects, sorting options by score, price, or date). Include a second page that highlights the top 5 healthiest products. Feedback Page: A section for users to view and submit feedback. Display top user feedback prominently. A simple form where users can submit feedback, with fields for name, product reviewed, and comments. About Page: A section to describe the purpose of Yum Yum Rank and the benefits of using the platform. Clean, easy to read typography with engaging imagery. Design Elements: Color Scheme: Fresh and modern, think greens, whites, and light neutrals to evoke health and cleanliness. Typography: Clean, sans serif fonts that are easy to read. Imagery: High quality images of food products, with emphasis on vibrant, healthy visuals. Animations: Subtle animations for user interactions, such as product hover effects and smooth scrolling using GSAP and Locomotive Scroll. Design Tone: Friendly and Trustworthy: The site should feel approachable, guiding users to make informed, health conscious decisions. Modern and Minimal: Avoid clutter while maintaining an inviting, clean look. Interactive and Engaging: Use animations and effects to keep the user experience dynamic but not overwhelming. Additional Considerations: Ensure that the design is responsive and works well across desktop, tablet, and mobile devices. Maintain consistency in design components (buttons, typography, color usage) throughout the pages. Design a system for health scores that is visually distinct and easily scannable by users (e.g., badge system, star ratings, etc.).