chore: Update Invest page with additional carousel and tab functionality

src/app/invest/page.tsx

@@ -17,13 +17,18 @@ import { Button } from "@/components/ui/button";
 
 export default function Invest() {
   const [progress, setProgress] = useState(0);
+  const [tab, setTab] = useState("");
+  const handleClick = (item: string) => {
+    setTab(item);
+  };
   useEffect(() => {
     // percent success
     const timer = setTimeout(() => setProgress(66), 500);
     return () => clearTimeout(timer);
   }, []);
   return (
-    <div className="w-[90%] h-[500px]-500 ml-32 mt-12">
+    <div>
+      <div className="w-[90%] h-[500px]-500 m-auto mt-12 bg-red-500">
         <div>
           <div className="flex">
             <Image src="./logo.svg" alt="logo" width={50} height={50} />
@@ -103,5 +108,38 @@ export default function Invest() {
           </CarouselContent>
         </Carousel>
       </div>
+      <div className="flex w-[90%]  mt-5 m-auto">
+        <ul className="list-none flex gap-10">
+          <li>
+            <a
+              onClick={() => handleClick("Pitch")}
+              className={tab === "Pitch" ? "text-blue-600" : ""}
+            >
+              Pitch
+            </a>
+          </li>
+          <li>
+            <a
+              onClick={() => handleClick("General Data")}
+              className={
+                tab === "General Data" ? "text-blue-600" : ""
+              }
+            >
+              General Data
+            </a>
+          </li>
+          <li>
+            <a
+              onClick={() => handleClick("Updates")}
+              className={
+                tab === "Updates" ? "text-blue-600" : ""
+              }
+            >
+              Updates
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
   );
 }