Add toaster into layout and link invest button to project invest page

src/app/invest/page.tsx

@@ -2,13 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import {
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel";
 import { Card, CardContent } from "@/components/ui/card";
 import CountUp from "react-countup";
 import { Progress } from "@/components/ui/progress";
@@ -18,12 +12,8 @@ import { ShareIcon, StarIcon } from "lucide-react";
 import { Toaster, toast } from "react-hot-toast";
 import useSession from "@/lib/supabase/useSession";
 import { redirect } from "next/navigation";
-import {
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-  Tooltip,
+import Link from "next/link";
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 
 export default function Invest() {
   const [progress, setProgress] = useState(0);
@@ -74,13 +64,7 @@ export default function Invest() {
           {/* Name, star and share button packed */}
           <div className="grid grid-cols-4">
             <div className="flex col-span-2">
-              <Image
+              <Image src="./logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
-                src="./logo.svg"
-                alt="logo"
-                width={50}
-                height={50}
-                className="sm:scale-75"
-              />
               <div className="mt-3 font-bold  text-lg md:text-3xl">NVIDIA</div>
             </div>
             <div className="grid grid-cols-2 gap-5 justify-self-end ">
@@ -88,11 +72,7 @@ export default function Invest() {
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <StarIcon
+                      <StarIcon id="follow" fill={isFollow ? "#FFFF00" : "#fff"} strokeWidth={2} />
-                        id="follow"
-                        fill={isFollow ? "#FFFF00" : "#fff"}
-                        strokeWidth={2}
-                      />
                     </TooltipTrigger>
                     <TooltipContent>
                       <p>Follow NIVIDIA</p>
@@ -106,16 +86,10 @@ export default function Invest() {
             </div>
           </div>
           {/* end of pack */}
-          <p className="mt-2 sm:text-sm">
+          <p className="mt-2 sm:text-sm"> World's first non-metal sustainable battery</p>
-            {" "}
-            World's first non-metal sustainable battery
-          </p>
           <div className="flex flex-wrap mt-3">
             {["Technology", "Gaming"].map((tag) => (
-              <span
+              <span key={tag} className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1">
-                key={tag}
-                className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
-              >
                 {tag}
               </span>
             ))}
@@ -127,11 +101,7 @@ export default function Invest() {
                 <CarouselContent className="h-[400px] flex h-full">
                   {Array.from({ length: 5 }).map((_, index) => (
                     <CarouselItem key={index}>
-                      <img
+                      <img src="./boiler1.jpg" alt="" className="rounded-lg self-center" />
-                        src="./boiler1.jpg"
-                        alt=""
-                        className="rounded-lg self-center"
-                      />
                     </CarouselItem>
                   ))}
                 </CarouselContent>{" "}
@@ -162,40 +132,23 @@ export default function Invest() {
             <div className=" w-2/3 mt-4  m-auto grid-rows-5">
               <div className="pl-5">
                 <h1 className="font-semibold text-xl md:text-4xl mt-8">
-                  <CountUp
+                  <CountUp start={0} end={100000} duration={2} prefix="$" className="" />
-                    start={0}
-                    end={100000}
-                    duration={2}
-                    prefix="$"
-                    className=""
-                  />
                 </h1>
                 <p className="text-sm md:text-lg"> 5% raised of $5M max goal</p>
                 <Progress value={progress} className="w-[60%] h-3 mt-3" />
                 <h1 className="font-semibold text-4xl md:mt-8">
                   {" "}
-                  <CountUp
+                  <CountUp start={0} end={1000} duration={2} className="text-xl md:text-4xl" />
-                    start={0}
-                    end={1000}
-                    duration={2}
-                    className="text-xl md:text-4xl"
-                  />
                 </h1>
                 <p className="text-sm md:text-lg"> Investors</p>
               </div>
               <Separator decorative className="mt-3 w-3/4 ml-5" />
               <h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5">
-                <CountUp
+                <CountUp start={0} end={5800} duration={2} className="text-xl md:text-4xl" /> hours
-                  start={0}
-                  end={5800}
-                  duration={2}
-                  className="text-xl md:text-4xl"
-                />{" "}
-                hours
               </h1>
               <p className="ml-5"> Left to invest</p>
               <Button className="mt-5 md:mt-10 ml-0 md:ml-[25%] scale-75 md:scale-100">
-                Invest in NVIDIA
+                <Link href="/invest/1">Invest in NVIDIA</Link>
               </Button>
             </div>
           </div>
@@ -205,26 +158,17 @@ export default function Invest() {
       <div className="flex w-[90%] mt-24 m-auto ml-10 md:ml-32">
         <ul className="list-none flex gap-10 text-lg md:text-xl ">
           <li>
-            <a
+            <a onClick={() => handleClick("Pitch")} className={tab === "Pitch" ? "text-blue-600" : ""}>
-              onClick={() => handleClick("Pitch")}
-              className={tab === "Pitch" ? "text-blue-600" : ""}
-            >
               Pitch
             </a>
           </li>
           <li>
-            <a
+            <a onClick={() => handleClick("General Data")} className={tab === "General Data" ? "text-blue-600" : ""}>
-              onClick={() => handleClick("General Data")}
-              className={tab === "General Data" ? "text-blue-600" : ""}
-            >
               General Data
             </a>
           </li>
           <li>
-            <a
+            <a onClick={() => handleClick("Updates")} className={tab === "Updates" ? "text-blue-600" : ""}>
-              onClick={() => handleClick("Updates")}
-              className={tab === "Updates" ? "text-blue-600" : ""}
-            >
               Updates
             </a>
           </li>

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { ReactQueryClientProvider } from "@/components/ReactQueryClientProvider"
 import "@/app/globals.css";
 
 import { NavigationBar } from "@/components/navigationBar/nav";
+import { Toaster } from "react-hot-toast";
 
 const montserrat = Montserrat({
   subsets: ["latin"],
@@ -31,6 +32,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
         <body className={`${montserrat.className}`}>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
             <div className="relative flex min-h-screen flex-col">
+              <div>
+                <Toaster position="top-center" reverseOrder={false} toastOptions={{ duration: 1000 }} />
+              </div>
               <NavigationBar />
               <div className="flex-1 bg-background">{children}</div>
             </div>