Refactor Invest page UI components, adjust grid layout and add pack section

src/app/invest/page.tsx

@@ -69,13 +69,19 @@ export default function Invest() {
       <div>
         <Toaster position="top-right" reverseOrder={false} />
       </div>
-      <div className="w-[90%] h-[45w0px]-500 m-auto mt-12  pl-24">
+      <div className="w-[90%] h-[450px]-500 md:m-auto mt-12 md:mt-12 pl-14 md:pl-24">
         <div>
           {/* Name, star and share button packed */}
           <div className="grid grid-cols-4">
             <div className="flex col-span-2">
-              <Image src="./logo.svg" alt="logo" width={50} height={50} />
+              <Image
-              <h1 className="mt-3 font-bold text-3xl">NVIDIA</h1>
+                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 ">
               <div className="mt-2 cursor-pointer" onClick={handleFollow}>
@@ -100,7 +106,10 @@ export default function Invest() {
             </div>
           </div>
           {/* end of pack */}
-          <p className="mt-2"> World's first non-metal sustainable battery</p>
+          <p className="mt-2 sm:text-sm">
+            {" "}
+            World's first non-metal sustainable battery
+          </p>
           <div className="flex flex-wrap mt-3">
             {["Technology", "Gaming"].map((tag) => (
               <span
@@ -113,46 +122,25 @@ export default function Invest() {
           </div>
           <div className="grid grid-cols-2">
             {/* image carousel */}
-            <Carousel className="w-full mt-4">
+            <div>
-              <CarouselContent className="h-[450px]">
+              <Carousel className="w-full -mt-20 md:mt-0">
+                <CarouselContent className="h-[400px]">
                   {Array.from({ length: 5 }).map((_, index) => (
                     <CarouselItem key={index}>
-                    <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+                      <div className="flex h-full items-center justify-center">
+                        <img
+                          src="./boiler1.jpg"
+                          alt=""
+                          className="rounded-lg self-center"
+                        />
+                      </div>
                     </CarouselItem>
                   ))}
                 </CarouselContent>{" "}
                 <CarouselPrevious />
                 <CarouselNext />
               </Carousel>
-            <div className=" w-2/3 mt-4 h-[400px] m-auto grid-rows-5 ">
+              <Carousel className="w-2/3 md:w-full ml-10 md:ml-0 -mt-24 md:mt-0">
-              <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={5800} duration={2} className="" /> hours
-              </h1>
-              <p className="ml-5"> Left to invest</p>
-              <Button className="mt-10 ml-[25%]">Invest in NVIDIA</Button>
-            </div>
-          </div>
-        </div>
-        <Carousel className="w-1/2 ml-10">
                 <CarouselContent>
                   {/* boiler plate for an actual pictures */}
                   <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
@@ -173,6 +161,48 @@ export default function Invest() {
                 </CarouselContent>
               </Carousel>
             </div>
+            <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
+                    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
+                    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
+                  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
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
       {/* menu */}
       <div className="flex w-[90%]  mt-24 m-auto ml-32">
         <ul className="list-none flex gap-10 text-xl ">