Add new sample ImageCard-HTML-React-Search-FAQs

[ahmad-jad-alhak]

By submitting this pull request, you agree to the contribution guidelines

If you aren't familiar with how to contribute to open-source repositories using GitHub, or if you find the instructions on this page confusing, sign up for one of our Sharing is Caring events. It's completely free, and we'll guide you through the process.

Q	A
Bug fix?	no
New feature?	no
New sample?	yes
Related issues?	fixes #X, partially #Y, mentioned in #Z

What's in this Pull Request?

A## This PR introduces a new SharePoint Framework (SPFx) sample: ImageCard-HTML-React-Search-FAQs

Purpose

This sample demonstrates how to build an FAQ search component using SPFx, HTML, and React, with a focus on visual presentation through image cards. It aims to improve the user experience for FAQ searches by combining images with question and answer content.

Key Features

• Image Cards: Displays FAQs in an image card format for a visually engaging experience.
• Search Functionality: Includes a responsive search bar that filters FAQs based on user input.
• React Components: Built with React for reusable components and efficient state management.
• HTML and CSS Styling: Custom HTML and CSS to enhance the look and feel of the FAQ cards.

Components

• ImageCard: Displays each FAQ as a card with an image, title, and short description.
• SearchBar: A search input component that allows users to filter FAQs dynamically.
• FAQList: Manages the list of FAQs and integrates the search functionality to display relevant results.

Documentation

A README.md file has been included in the sample folder with:

• Setup Instructions: Guidance on installing and running the sample.
• Usage Details: Explanation of the components and how to integrate the sample.
• Screenshots: Visuals demonstrating the sample in action.

Intended Audience

This sample is intended for developers and site administrators looking to implement a visually appealing, searchable FAQ solution in their SharePoint environment.