Implemented Flash Sale Page with Filter and Quick Buy features

[IkkiOcean]

Overview:

This PR introduces the implementation of a Flash Sale Page that showcases limited-time discounted products. The page is designed to display products that are on sale with their original price, discounted price, brand, image, and countdown timer showing the remaining time for the sale.

Features:

1. Product Listing:

   • The page displays a list of products that are part of the flash sale.
   • Each product includes the following details:
     • Name: Name of the product (e.g., 'Smart Irrigation System').
     • Brand: The brand name of the product (e.g., 'AquaTech').
     • Original Price: The original price before the discount.
     • Discounted Price: The price after the discount is applied.
     • Product Image: A placeholder image for each product.
     • Sale End Time: A countdown timer indicating the remaining time until the sale ends.

2. Countdown Timer:

   • Each product includes a countdown timer that dynamically updates and displays the remaining time for the flash sale.
   • The timer is calculated based on the current date and time and the endTime for each product.
   • The timer automatically updates every second to provide real-time information to users.

3. Responsive Layout:

   • The page is designed to be fully responsive and adapt to different screen sizes.
   • Products are displayed in a grid layout, with each product card containing the necessary details.
   • The layout is mobile-friendly, ensuring the page works seamlessly on both desktops and mobile devices.

4. Sorting by Time:

   • The products are sorted based on their endTime, with the products that have less time remaining displayed first. This helps users focus on the deals that are about to end soonest.

5. Maximum Discount Price Limit:

   • The discounted price for each product is capped at $10,000, ensuring that no product exceeds this limit during the flash sale.

6. Product Image:

   • A placeholder image (/placeholder.svg) is used for each product, with the ability to adjust its size dynamically via query parameters (e.g., height and width) for uniform product images.

Implementation Details:

• Product Data: The product information (e.g., name, brand, prices, sale end time, etc.) is stored in an array of objects. Each product has an id, name, brand, originalPrice, discountedPrice, image, and endTime.

• Dynamic Countdown: The countdown timer for each product is calculated using JavaScript's Date.now() method to compare the current time with the endTime of the product. It is updated every second.

• Product Card Layout: Each product is displayed in a card-like UI element that includes:

  • Product image
  • Product name
  • Original and discounted prices
  • Remaining time for the sale

• Sorting Logic: Products are sorted by the remaining time until their sale ends. This ensures that the products with the least time remaining are shown first, driving urgency.

Screenshot :

flash.mp4

Notes:

• Customization: The flash sale page can be easily customized to include more products or adjust the discount rules.

• Future Enhancements: We can add features like:

  • A “Buy Now” button for each product to redirect users to the checkout page.
  • An automatic refresh o#923 page after a sale ends.
  • More detailed product descriptions or ratings.

• Closes Create Flash Sale Page for Sale  #923

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
agro-tech-ai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 9, 2024 4:44pm

[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! 🚀