From be62c7e8a91d778cc8e1fd5f183d6d7e8f1e4974 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 31 Aug 2024 16:27:54 +0700
Subject: [PATCH] chore: Update Invest page with additional carousel and tab
 functionality

---
 src/app/invest/page.tsx | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx
index 4386a4b..029468b 100644
--- a/src/app/invest/page.tsx
+++ b/src/app/invest/page.tsx
@@ -17,7 +17,7 @@ import { Button } from "@/components/ui/button";
 
 export default function Invest() {
   const [progress, setProgress] = useState(0);
-  const [tab, setTab] = useState("");
+  const [tab, setTab] = useState("Pitch");
   const handleClick = (item: string) => {
     setTab(item);
   };
@@ -28,7 +28,7 @@ export default function Invest() {
   }, []);
   return (
     <div>
-      <div className="w-[90%] h-[500px]-500 m-auto mt-12 bg-red-500">
+      <div className="w-[90%] h-[500px]-500 m-auto mt-12">
         <div>
           <div className="flex">
             <Image src="./logo.svg" alt="logo" width={50} height={50} />
@@ -108,8 +108,9 @@ export default function Invest() {
           </CarouselContent>
         </Carousel>
       </div>
-      <div className="flex w-[90%]  mt-5 m-auto">
-        <ul className="list-none flex gap-10">
+      {/* menu */}
+      <div className="flex w-[90%]  mt-24 m-auto ml-32">
+        <ul className="list-none flex gap-10 text-xl ">
           <li>
             <a
               onClick={() => handleClick("Pitch")}
@@ -121,9 +122,7 @@ export default function Invest() {
           <li>
             <a
               onClick={() => handleClick("General Data")}
-              className={
-                tab === "General Data" ? "text-blue-600" : ""
-              }
+              className={tab === "General Data" ? "text-blue-600" : ""}
             >
               General Data
             </a>
@@ -131,15 +130,25 @@ export default function Invest() {
           <li>
             <a
               onClick={() => handleClick("Updates")}
-              className={
-                tab === "Updates" ? "text-blue-600" : ""
-              }
+              className={tab === "Updates" ? "text-blue-600" : ""}
             >
               Updates
             </a>
           </li>
         </ul>
       </div>
+      <hr className="mt-2" />
+      {/* Card section */}
+      <div className="flex w-full mt-10">
+        {/* Cards */}
+        <Card className="m-auto border-slate-800 w-3/4 p-6">
+          <CardContent>
+            <Card>
+              <CardContent>{tab}</CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+      </div>
     </div>
   );
 }