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

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-09-15 21:07:49 +07:00
parent 504dace8d8
commit d30f69b4c0

View File

@ -99,6 +99,7 @@ export default function Invest() {
</div> </div>
</div> </div>
</div> </div>
{/* end of pack */}
<p className="mt-2"> World's first non-metal sustainable battery</p> <p className="mt-2"> World's first non-metal sustainable battery</p>
<div className="flex flex-wrap mt-3"> <div className="flex flex-wrap mt-3">
{["Technology", "Gaming"].map((tag) => ( {["Technology", "Gaming"].map((tag) => (
@ -110,9 +111,9 @@ export default function Invest() {
</span> </span>
))} ))}
</div> </div>
<div className="flex"> <div className="grid grid-cols-2">
{/* image carousel */} {/* image carousel */}
<Carousel className="w-[55%] mt-4"> <Carousel className="w-full mt-4">
<CarouselContent className="h-[450px]"> <CarouselContent className="h-[450px]">
{Array.from({ length: 5 }).map((_, index) => ( {Array.from({ length: 5 }).map((_, index) => (
<CarouselItem key={index}> <CarouselItem key={index}>
@ -123,7 +124,7 @@ export default function Invest() {
<CarouselPrevious /> <CarouselPrevious />
<CarouselNext /> <CarouselNext />
</Carousel> </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"> <div className="pl-5">
<h1 className="font-semibold text-4xl mt-8"> <h1 className="font-semibold text-4xl mt-8">
<CountUp <CountUp
@ -144,7 +145,6 @@ export default function Invest() {
</div> </div>
<Separator decorative className="mt-3 w-3/4 ml-5" /> <Separator decorative className="mt-3 w-3/4 ml-5" />
<h1 className="font-semibold text-4xl mt-8 ml-5"> <h1 className="font-semibold text-4xl mt-8 ml-5">
{" "}
<CountUp start={0} end={5800} duration={2} className="" /> hours <CountUp start={0} end={5800} duration={2} className="" /> hours
</h1> </h1>
<p className="ml-5"> Left to invest</p> <p className="ml-5"> Left to invest</p>