Refactor UI components, update links in Home page

package-lock.json

@@ -18,6 +18,7 @@
         "@radix-ui/react-slot": "^1.1.0",
         "@supabase/ssr": "^0.4.1",
         "@supabase/supabase-js": "^2.45.2",
+        "b2d-ventures": "file:",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.2.0",
@@ -27,6 +28,7 @@
         "react": "^18",
         "react-countup": "^6.5.3",
         "react-dom": "^18",
+        "react-hot-toast": "^2.4.1",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -1761,6 +1763,10 @@
         "deep-equal": "^2.0.5"
       }
     },
+    "node_modules/b2d-ventures": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2016,8 +2022,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-      "devOptional": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -3204,6 +3209,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -4677,6 +4690,21 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@supabase/ssr": "^0.4.1",
     "@supabase/supabase-js": "^2.45.2",
+    "b2d-ventures": "file:",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.2.0",
@@ -28,6 +29,7 @@
     "react": "^18",
     "react-countup": "^6.5.3",
     "react-dom": "^18",
+    "react-hot-toast": "^2.4.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },

src/app/invest/page.tsx

@@ -2,19 +2,55 @@
 
 import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import {
+  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";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
+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 { Skeleton } from "@/components/ui/skeleton";
 
 export default function Invest() {
   const [progress, setProgress] = useState(0);
   const [tab, setTab] = useState("Pitch");
+  const { session, loading } = useSession();
+  const user = session?.user;
+  const [sessionLoaded, setSessionLoaded] = React.useState(false);
   const handleClick = (item: string) => {
     setTab(item);
   };
+  const currentUrl = window.location.href;
+  const handleShare = () => {
+    if (document.hasFocus()) {
+      navigator.clipboard.writeText(currentUrl).then(() => {
+        toast.success("URL copied to clipboard!");
+      });
+    }
+  };
+  const handleFollow = () =>{
+    {sessionLoaded ? (
+      user ? (
+        // if login, save follow
+         null
+      ) : (
+        redirect('/login')
+      )
+    ) : (
+      <div>
+        <Skeleton className="rounded-lg h-full w-[160px]" />
+      </div>
+    )}
+  }
   useEffect(() => {
     // percent success
     const timer = setTimeout(() => setProgress(66), 500);
@@ -22,16 +58,33 @@ export default function Invest() {
   }, []);
   return (
     <div>
-      <div className="w-[90%] h-[500px]-500 m-auto mt-12  pl-24">
+      <div>
+        <Toaster position="top-right" reverseOrder={false} />
+      </div>
+      <div className="w-[90%] h-[45w0px]-500 m-auto mt-12  pl-24">
         <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 className="grid grid-cols-2 gap-5 ml-[850px] ">
+              <div className="mt-2 cursor-pointer bg-red-500" onClick={handleFollow}>
+                <StarIcon />
               </div>
-          <p className="mt-2"> Worlds first non-metal sustainable battery</p>
+              <div
+                onClick={handleShare}
+                className=" cursor-pointer  mt-2 bg-green-500"
+              >
+                <ShareIcon />
+              </div>
+            </div>
+          </div>
+          <p className="mt-2"> World's first non-metal sustainable battery</p>
           <div className="flex flex-wrap 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 mb-1">
+              <span
+                key={tag}
+                className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
+              >
                 {tag}
               </span>
             ))}
@@ -39,18 +92,10 @@ export default function Invest() {
           <div className="flex">
             {/* image carousel */}
             <Carousel className="w-[55%] mt-4">
-              <CarouselContent>
+              <CarouselContent className="h-[450px]">
                 {Array.from({ length: 5 }).map((_, index) => (
                   <CarouselItem key={index}>
-                    <Image
+                    <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-                      src="/boiler1.jpg"
-                      alt=""
-                      className="rounded-lg"
-                      width={0}
-                      height={0}
-                      sizes="100vw"
-                      style={{ width: "100%", height: "auto" }}
-                    />
                   </CarouselItem>
                 ))}
               </CarouselContent>{" "}
@@ -60,7 +105,13 @@ export default function Invest() {
             <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="" />
+                  <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" />
@@ -76,67 +127,27 @@ export default function Invest() {
                 <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>
+              <Button className="mt-10 ml-[25%]">Invest in NVIDIA</Button>
             </div>
           </div>
         </div>
-        <Carousel className="w-1/2">
+        <Carousel className="w-1/2 ml-10">
           <CarouselContent>
             {/* boiler plate for an actual pictures */}
-            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <Image
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-                src="/boiler1.jpg"
-                alt=""
-                className="rounded-lg"
-                width={0}
-                height={0}
-                sizes="100vw"
-                style={{ width: "100%", height: "auto" }}
-              />
             </CarouselItem>
-            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <Image
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-                src="/boiler1.jpg"
-                alt=""
-                className="rounded-lg"
-                width={0}
-                height={0}
-                sizes="100vw"
-                style={{ width: "100%", height: "auto" }}
-              />
             </CarouselItem>
-            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <Image
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-                src="/boiler1.jpg"
-                alt=""
-                className="rounded-lg"
-                width={0}
-                height={0}
-                sizes="100vw"
-                style={{ width: "100%", height: "auto" }}
-              />
             </CarouselItem>
-            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <Image
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-                src="/boiler1.jpg"
-                alt=""
-                className="rounded-lg"
-                width={0}
-                height={0}
-                sizes="100vw"
-                style={{ width: "100%", height: "auto" }}
-              />
             </CarouselItem>
-            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <Image
+              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-                src="/boiler1.jpg"
-                alt=""
-                className="rounded-lg"
-                width={0}
-                height={0}
-                sizes="100vw"
-                style={{ width: "100%", height: "auto" }}
-              />
             </CarouselItem>
           </CarouselContent>
         </Carousel>
@@ -145,17 +156,26 @@ export default function Invest() {
       <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" : ""}>
+            <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" : ""}>
+            <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" : ""}>
+            <a
+              onClick={() => handleClick("Updates")}
+              className={tab === "Updates" ? "text-blue-600" : ""}
+            >
               Updates
             </a>
           </li>