Merge pull request #16 from Sosokker/front-end

Finish up detail page.

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("Pitch");
+  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">
         <div>
           <div className="flex">
             <Image src="./logo.svg" alt="logo" width={50} height={50} />
@@ -45,7 +50,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,6 +87,68 @@ export default function Invest() {
             </div>
           </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>
+      {/* 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")}
+              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>
+      <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>
   );
 }

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">