From d30f69b4c0e943a995dbae43287b0887dbefd028 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 15 Sep 2024 21:07:49 +0700
Subject: [PATCH] Refactor Invest page UI components, add pack section and
 adjust grid layout

---
 src/app/invest/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx
index 6d60822..98e39d2 100644
--- a/src/app/invest/page.tsx
+++ b/src/app/invest/page.tsx
@@ -99,6 +99,7 @@ export default function Invest() {
               </div>
             </div>
           </div>
+          {/* end of pack */}
           <p className="mt-2"> World's first non-metal sustainable battery</p>
           <div className="flex flex-wrap mt-3">
             {["Technology", "Gaming"].map((tag) => (
@@ -110,9 +111,9 @@ export default function Invest() {
               </span>
             ))}
           </div>
-          <div className="flex">
+          <div className="grid grid-cols-2">
             {/* image carousel */}
-            <Carousel className="w-[55%] mt-4">
+            <Carousel className="w-full mt-4">
               <CarouselContent className="h-[450px]">
                 {Array.from({ length: 5 }).map((_, index) => (
                   <CarouselItem key={index}>
@@ -123,7 +124,7 @@ export default function Invest() {
               <CarouselPrevious />
               <CarouselNext />
             </Carousel>
-            <div className=" w-1/3 mt-4 h-[400px] ml-[8%] ">
+            <div className=" w-2/3 mt-4 h-[400px] m-auto grid-rows-5 ">
               <div className="pl-5">
                 <h1 className="font-semibold text-4xl mt-8">
                   <CountUp
@@ -144,7 +145,6 @@ export default function Invest() {
               </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>