Use Next Image instead of img + reinstall radix-ui/react-hover-card

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/react-avatar": "^1.1.0",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
+        "@radix-ui/react-hover-card": "^1.1.1",
         "@radix-ui/react-navigation-menu": "^1.2.0",
         "@radix-ui/react-progress": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
@@ -666,6 +667,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.1.tgz",
+      "integrity": "sha512-IwzAOP97hQpDADYVKrEEHUH/b2LA+9MgB0LgdmnbFO2u/3M5hmEofjjr2M6CyzUblaAqJdFm6B7oFtU72DPXrA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",

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";
@@ -34,13 +28,10 @@ export default function Invest() {
             <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>
+          <p className="mt-2"> Worlds 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>
             ))}
@@ -48,10 +39,18 @@ export default function Invest() {
           <div className="flex">
             {/* image carousel */}
             <Carousel className="w-[55%] mt-4">
-              <CarouselContent className="h-[450px]">
+              <CarouselContent>
                 {Array.from({ length: 5 }).map((_, index) => (
                   <CarouselItem key={index}>
-                    <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+                    <Image
+                      src="/boiler1.jpg"
+                      alt=""
+                      className="rounded-lg"
+                      width={0}
+                      height={0}
+                      sizes="100vw"
+                      style={{ width: "100%", height: "auto" }}
+                    />
                   </CarouselItem>
                 ))}
               </CarouselContent>{" "}
@@ -61,13 +60,7 @@ 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
+                  <CountUp start={0} end={100000} duration={2} prefix="$" className="" />
-                    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" />
@@ -87,23 +80,63 @@ export default function Invest() {
             </div>
           </div>
         </div>
-        <Carousel className="w-1/2 mt-5 ml-10">
+        <Carousel className="w-1/2">
           <CarouselContent>
             {/* boiler plate for an actual pictures */}
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+              <Image
+                src="/boiler1.jpg"
+                alt=""
+                className="rounded-lg"
+                width={0}
+                height={0}
+                sizes="100vw"
+                style={{ width: "100%", height: "auto" }}
+              />
             </CarouselItem>
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+              <Image
+                src="/boiler1.jpg"
+                alt=""
+                className="rounded-lg"
+                width={0}
+                height={0}
+                sizes="100vw"
+                style={{ width: "100%", height: "auto" }}
+              />
             </CarouselItem>
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+              <Image
+                src="/boiler1.jpg"
+                alt=""
+                className="rounded-lg"
+                width={0}
+                height={0}
+                sizes="100vw"
+                style={{ width: "100%", height: "auto" }}
+              />
             </CarouselItem>
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+              <Image
+                src="/boiler1.jpg"
+                alt=""
+                className="rounded-lg"
+                width={0}
+                height={0}
+                sizes="100vw"
+                style={{ width: "100%", height: "auto" }}
+              />
             </CarouselItem>
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <CarouselItem className="md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+              <Image
+                src="/boiler1.jpg"
+                alt=""
+                className="rounded-lg"
+                width={0}
+                height={0}
+                sizes="100vw"
+                style={{ width: "100%", height: "auto" }}
+              />
             </CarouselItem>
           </CarouselContent>
         </Carousel>
@@ -112,26 +145,17 @@ 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
+            <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>