From 1c4551e15dc741bca813b43fe9f7e854b901b3e7 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Fri, 30 Aug 2024 11:23:05 +0700
Subject: [PATCH 1/5] feat: Add second carousel

---
 src/app/invest/page.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx
index af9232e..c880fca 100644
--- a/src/app/invest/page.tsx
+++ b/src/app/invest/page.tsx
@@ -23,7 +23,7 @@ export default function Invest() {
     return () => clearTimeout(timer);
   }, []);
   return (
-    <div className=" w-[90%] h-[500px]-500 ml-32 mt-12">
+    <div className="w-[90%] h-[500px]-500 ml-32 mt-12">
       <div>
         <div className="flex">
           <Image src="./logo.svg" alt="logo" width={50} height={50} />
@@ -82,6 +82,17 @@ export default function Invest() {
           </div>
         </div>
       </div>
+      <Carousel className="w-1/2 ml-5 -mt-10">
+        <CarouselContent className="-ml-1">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+            </CarouselItem>
+          ))}
+          <CarouselPrevious />
+          <CarouselNext />
+        </CarouselContent>
+      </Carousel>
     </div>
   );
 }

From 612d99a23609b8c7fe77c44ce4c8b8ffad56d072 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 31 Aug 2024 15:53:22 +0700
Subject: [PATCH 2/5] chore: Fix the carousel's type error bug

---
 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 c880fca..d214b01 100644
--- a/src/app/invest/page.tsx
+++ b/src/app/invest/page.tsx
@@ -45,7 +45,7 @@ export default function Invest() {
           <Carousel className="w-[55%] mt-4">
             <CarouselContent className="h-[450px]">
               {Array.from({ length: 5 }).map((_, index) => (
-                <CarouselItem>
+                <CarouselItem key={index}>
                   <img src="./boiler1.jpg" alt="" className="rounded-lg" />
                 </CarouselItem>
               ))}
@@ -82,15 +82,24 @@ export default function Invest() {
           </div>
         </div>
       </div>
-      <Carousel className="w-1/2 ml-5 -mt-10">
-        <CarouselContent className="-ml-1">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-            </CarouselItem>
-          ))}
-          <CarouselPrevious />
-          <CarouselNext />
+      <Carousel className="w-1/2 mt-5 ml-10">
+        <CarouselContent>
+          {/* boiler plate for an actual pictures */}
+          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+          </CarouselItem>
+          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+          </CarouselItem>
+          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+          </CarouselItem>
+          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+          </CarouselItem>
+          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+          </CarouselItem>
         </CarouselContent>
       </Carousel>
     </div>

From dfe72a55f0a60e06cb23dbdcb90178d7091eac0f 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:10:19 +0700
Subject: [PATCH 3/5] chore: Update Invest page with additional carousel and
 tab functionality

---
 src/app/invest/page.tsx | 184 ++++++++++++++++++++++++----------------
 1 file changed, 111 insertions(+), 73 deletions(-)

diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx
index d214b01..4386a4b 100644
--- a/src/app/invest/page.tsx
+++ b/src/app/invest/page.tsx
@@ -17,91 +17,129 @@ 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="flex">
-          <Image src="./logo.svg" alt="logo" width={50} height={50} />
-          <h1 className="mt-3 font-bold text-3xl">NVIDIA</h1>
-        </div>
-        <p className="mt-2"> World's first non-metal sustainable battery</p>
-        <div className="flex mt-3">
-          {["Technology", "Gaming"].map((tag) => (
-            <span
-              key={tag}
-              className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1"
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
-        <div className="flex">
-          {/* image carousel */}
-          <Carousel className="w-[55%] mt-4">
-            <CarouselContent className="h-[450px]">
-              {Array.from({ length: 5 }).map((_, index) => (
-                <CarouselItem key={index}>
-                  <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-                </CarouselItem>
-              ))}
-            </CarouselContent>{" "}
-            <CarouselPrevious />
-            <CarouselNext />
-          </Carousel>
-          <div className=" w-1/3 mt-4 h-[400px] ml-[8%] ">
-            <div className="pl-5">
-              <h1 className="font-semibold text-4xl mt-8">
-                <CountUp
-                  start={0}
-                  end={100000}
-                  duration={2}
-                  prefix="$"
-                  className=""
-                />
-              </h1>
-              <p className=""> 5% raised of $5M max goal</p>
-              <Progress value={progress} className="w-[60%] h-3 mt-3" />
-              <h1 className="font-semibold text-4xl mt-8">
+    <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} />
+            <h1 className="mt-3 font-bold text-3xl">NVIDIA</h1>
+          </div>
+          <p className="mt-2"> World's first non-metal sustainable battery</p>
+          <div className="flex mt-3">
+            {["Technology", "Gaming"].map((tag) => (
+              <span
+                key={tag}
+                className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+          <div className="flex">
+            {/* image carousel */}
+            <Carousel className="w-[55%] mt-4">
+              <CarouselContent className="h-[450px]">
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <CarouselItem key={index}>
+                    <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>{" "}
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+            <div className=" w-1/3 mt-4 h-[400px] ml-[8%] ">
+              <div className="pl-5">
+                <h1 className="font-semibold text-4xl mt-8">
+                  <CountUp
+                    start={0}
+                    end={100000}
+                    duration={2}
+                    prefix="$"
+                    className=""
+                  />
+                </h1>
+                <p className=""> 5% raised of $5M max goal</p>
+                <Progress value={progress} className="w-[60%] h-3 mt-3" />
+                <h1 className="font-semibold text-4xl mt-8">
+                  {" "}
+                  <CountUp start={0} end={1000} duration={2} className="" />
+                </h1>
+                <p className=""> Investors</p>
+              </div>
+              <Separator decorative className="mt-3 w-3/4 ml-5" />
+              <h1 className="font-semibold text-4xl mt-8 ml-5">
                 {" "}
-                <CountUp start={0} end={1000} duration={2} className="" />
+                <CountUp start={0} end={5800} duration={2} className="" /> hours
               </h1>
-              <p className=""> Investors</p>
+              <p className="ml-5"> Left to invest</p>
+              <Button className="mt-10 ml-[25%]">Invest</Button>
             </div>
-            <Separator decorative className="mt-3 w-3/4 ml-5" />
-            <h1 className="font-semibold text-4xl mt-8 ml-5">
-              {" "}
-              <CountUp start={0} end={5800} duration={2} className="" /> hours
-            </h1>
-            <p className="ml-5"> Left to invest</p>
-            <Button className="mt-10 ml-[25%]">Invest</Button>
           </div>
         </div>
+        <Carousel className="w-1/2 mt-5 ml-10">
+          <CarouselContent>
+            {/* boiler plate for an actual pictures */}
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+            </CarouselItem>
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+            </CarouselItem>
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+            </CarouselItem>
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+            </CarouselItem>
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+            </CarouselItem>
+          </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>
-      <Carousel className="w-1/2 mt-5 ml-10">
-        <CarouselContent>
-          {/* boiler plate for an actual pictures */}
-          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-          </CarouselItem>
-          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-          </CarouselItem>
-          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-          </CarouselItem>
-          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-          </CarouselItem>
-          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-            <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-          </CarouselItem>
-        </CarouselContent>
-      </Carousel>
     </div>
   );
 }

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 4/5] 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>
   );
 }

From aaa531107fb0d95ceed2ef7d1a16e57ea075d894 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:57:53 +0700
Subject: [PATCH 5/5] chore: Update navigation bar styling to include z-index
 for better stacking order

---
 src/components/navigationBar/Unsigned.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navigationBar/Unsigned.tsx b/src/components/navigationBar/Unsigned.tsx
index 0ea7c24..a641179 100644
--- a/src/components/navigationBar/Unsigned.tsx
+++ b/src/components/navigationBar/Unsigned.tsx
@@ -83,7 +83,7 @@ export function UnsignedNav() {
     },
   ];
   return (
-    <header className="sticky top-0 flex flex-wrap w-full bg-card text-sm py-3 border-b-2 border-border">
+    <header className="sticky top-0 flex flex-wrap w-full bg-card text-sm py-3 border-b-2 border-border z-50">
       <nav className="max-w-[85rem] w-full mx-auto px-4">
         <div className="flex items-center justify-between">
           <div className="flex flex-col">