Price Trackr Landing - Copy this Html, Bootstrap Component to your project
New page for the site: Design a product listing section for a price tracking web application. The section should display products in individual cards with a clean, modern, and visually appealing layout. The design must be responsive and optimized for both desktop and mobile views. Card Layout Details: Image Section (Top): A high-quality product image. Ensure the image is contained within a fixed aspect ratio (e.g., 16:9) to maintain uniformity. Product Information Section (Middle): Product Name: Display prominently with bold, modern typography. Ensure it supports long names by truncating them with '...' if necessary. Current Price: Display the price in a larger, standout font, e.g., '$199.99'. Price History: Show the previous price (e.g., '$249.99') crossed out if a discount is active. Use smaller, lighter text for this detail. Discount Indicator: If the product is discounted, include a badge (e.g., '20% OFF' in vibrant colors like green or orange). Action Buttons (Bottom): 'Track Price': A primary button with a bold and vibrant color (e.g., neon blue or green) that stands out. 'View Details': A secondary button styled with an outlined design for contrast. Additional Features (Optional): A small 'Last Updated' timestamp (e.g., 'Updated 2 hours ago') in subtle text. A visual indicator (e.g., a small graph icon) to suggest that users can view the price history graph. Section Design Details: Display the cards in a grid layout for desktop (e.g., 3-4 cards per row) and a single-column layout for mobile. Use consistent spacing between cards for a clean and organized appearance. Background: Dark-themed background for the section with subtle gradients or patterns to add depth. Hover Effect: Add a smooth hover effect on the cards (e.g., subtle scaling or shadow) to enhance interactivity. Notes: Focus on clarity and readability for all elements. Ensure the design is modern and matches the aesthetic of the overall landing page. The section should look professional, lightweight, and user-friendly.
