feat: added search bar and cards in support

app/src/components/support/Card.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+const Card = ({ cardName, description }) => {
+  return (
+    <div class="dark:text-cyan-100 dark:border-2 dark:border-cyan-100  mx-auto max-w-xs rounded-xl px-6 py-10 text-slate-900 shadow flex flex-col justify-between h-64">
+      <div>
+        <p class="mb-2 text-2xl">{cardName}</p>
+        <p class="dark:text-cyan-400 mb-6 text-slate-500">{description}</p>
+      </div>
+      <button class="dark:text-cyan-100 dark:border-cyan-100 flex items-center space-x-2 rounded-md border-2 border-slate-900 px-4 py-2 font-medium text-slate-900 transition hover:bg-slate-900 hover:text-white dark:hover:bg-cyan-100 dark:hover:text-slate-900 w-fit">
+        <span> Learn more </span>
+        <span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="h-6 w-6"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default Card;

app/src/main.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);

app/src/pages/Support.jsx

@@ -1,16 +1,92 @@
+import React, { useState } from "react";
+import Card from "../components/support/Card";
 
 const Support = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [originalCards] = useState([
+    {
+      cardName: "Stocks",
+      description:
+        "Explore frequently asked questions related to stock trading.",
+    },
+    {
+      cardName: "Cryptocurrencies",
+      description:
+        "Discover frequently asked questions about cryptocurrencies.",
+    },
+    {
+      cardName: "News",
+      description:
+        "Stay updated with frequently asked questions about the latest news.",
+    },
+    {
+      cardName: "NFT",
+      description:
+        "Learn about frequently asked questions regarding Non-Fungible Tokens (NFTs).",
+    },
+    {
+      cardName: "Trade",
+      description:
+        "Get answers to frequently asked questions about trading strategies.",
+    },
+    {
+      cardName: "Institutional",
+      description:
+        "Find information on frequently asked questions related to institutional investments.",
+    },
+  ]);
+
+  const [filteredCards, setFilteredCards] = useState(originalCards);
+
+  const handleSearchChange = (query) => {
+    setSearchQuery(query);
+
+    // Search query ke basis par cards ko filter karein
+    const filtered = originalCards.filter((card) =>
+      card.cardName.toLowerCase().includes(query.toLowerCase())
+    );
+    setFilteredCards(filtered);
+  };
+
   return (
     <div className="dark:bg-slate-900 flex justify-center flex-col items-center">
-      <h1 className="text-5xl text-center p-14 m-8  dark:text-cyan-100 ">Support</h1>
-      <p className="dark:text-cyan-100 text-center w-[1100px]">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate,
-        placeat blanditiis, est non atque cum aut ratione pariatur quas eligendi
-        iure earum illo quos aspernatur beatae nesciunt expedita. Quidem nam ad
-        illo blanditiis optio consequuntur quis veritatis laudantium cum
-        consectetur animi magni nemo eveniet, reiciendis expedita, aperiam
-        laborum ut quaerat?
-      </p>
+      <div className="mx-auto mt-20 w-screen max-w-[90%] py-14 leading-6 ">
+        <form className="relative mx-auto flex w-full max-w-2xl items-center justify-between rounded-md border shadow-lg">
+          <svg
+            className="absolute left-2 block h-5 w-5 text-gray-400"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="11" cy="11" r="8" className=""></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65" className=""></line>
+          </svg>
+          <input
+            value={searchQuery}
+            type="name"
+            name="search"
+            onChange={(e) => handleSearchChange(e.target.value)}
+            className="dark:bg-slate-800 dark:text-white h-14 w-full rounded-md py-4 pr-40 pl-12 outline-none focus:ring-2 ring-slate-900/[.50] dark:ring-0 "
+            placeholder="Search here"
+          />
+        </form>
+      </div>
+
+      <div className="max-w-[80%] grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-20 mt-10 mb-20">
+        {filteredCards.map((card, index) => (
+          <Card
+            key={index}
+            cardName={card.cardName}
+            description={card.description}
+          />
+        ))}
+      </div>
     </div>
   );
 };