Added GiftCard page with full features and modular components

[IkkiOcean]

Description

This PR adds a new GiftCard page to the application. The page has been divided into individual, modular components for clarity, each representing a specific feature. The GiftCard page is designed with a user-friendly layout and includes features such as a form for purchasing gift cards, promotional banners, gift ideas, and featured products.

Changes Made

1. GiftCard Page Layout and Structure

   • Created a dedicated GiftCard.js page to serve as the main layout for the gift card functionality.
   • Organized the page using modular components for maintainability and a clear, intuitive layout for end-users.

2. Modular Components Added

   • Header:
     • Displays a prominent header introducing the gift card section.
     • Provides an engaging first impression and encourages users to explore gift card options.
   • HeroSection:
     • Features an eye-catching hero banner with a headline and introductory text.
     • Sets the tone for the page and highlights the main purpose of the gift card section.
   • SaleBanner:
     • Displays dynamic promotional messages, e.g., special discounts or limited-time offers.
     • Enhances the user’s motivation to purchase gift cards through visible, compelling deals.
   • GiftCardForm:
     • Provides a form with fields for:
       • Gift Card Amount: Users can select or input a custom amount.
       • Recipient Name and Email: Fields for recipient information.
       • Submission Button: Allows users to submit or proceed with gift card purchases.
     • Form Validation:
       • Implements basic validation to ensure users fill in all required fields accurately.
   • GiftCardBenefits:
     • Highlights key benefits of using gift cards to encourage user engagement.
     • Features visually organized benefit points that are easy to read and impactful.
   • FeaturedProducts:
     • Displays a curated list of top products as recommendations for gift recipients.
     • Enhances user experience by providing inspiration for gift ideas alongside gift card options.
   • GiftIdeas:
     • Offers creative and thoughtful gift suggestions to help users choose the perfect gift.
     • Displays a variety of ideas, keeping the user experience dynamic and helpful.

3. Styling and Responsiveness

   • Utilized Tailwind CSS for consistent styling and rapid customization.
   • Ensured all components adapt seamlessly across different screen sizes, providing a fully responsive experience.
   • Styled components to maintain aesthetic coherence with the existing application design.

4. Functional Enhancements

   • Form Submission Logic:
     • Included logic for basic form validation, ensuring all inputs (amount, recipient name, and email) are filled before submission.
     • Set up placeholder functionality for eventual backend integration for processing purchases.
   • Dynamic Content in SaleBanner:
     • The SaleBanner component updates dynamically to reflect current promotions, ensuring timely and relevant offers are displayed.
   • User-Friendly Input Options:
     • Fields in GiftCardForm offer both predefined and customizable options for gift card amounts, catering to diverse user preferences.

• Closes Create Gift Card Entry Page for Users #924

VIDEO

dd.mp4

Checklist

• Code follows the project's style guidelines
• Components are modular and reusable
• All existing tests passed
• No console errors or warnings in the browser

[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:55pm

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