Refactor Invest page UI components, adjust grid layout and carousel styling

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-09-16 19:40:19 +07:00
parent 381f837e37
commit a048845e32

View File

@ -123,24 +123,22 @@ export default function Invest() {
<div className="grid grid-cols-2"> <div className="grid grid-cols-2">
{/* image carousel */} {/* image carousel */}
<div> <div>
<Carousel className="w-full -mt-20 md:mt-0"> <Carousel className="w-full mt-20 md:mt-0">
<CarouselContent className="h-[400px]"> <CarouselContent className="h-[400px] flex h-full">
{Array.from({ length: 5 }).map((_, index) => ( {Array.from({ length: 5 }).map((_, index) => (
<CarouselItem key={index}> <CarouselItem key={index}>
<div className="flex h-full items-center justify-center"> <img
<img src="./boiler1.jpg"
src="./boiler1.jpg" alt=""
alt="" className="rounded-lg self-center"
className="rounded-lg self-center" />
/>
</div>
</CarouselItem> </CarouselItem>
))} ))}
</CarouselContent>{" "} </CarouselContent>{" "}
<CarouselPrevious /> <CarouselPrevious />
<CarouselNext /> <CarouselNext />
</Carousel> </Carousel>
<Carousel className="w-2/3 md:w-full ml-10 md:ml-0 -mt-24 md:mt-0"> <Carousel className="w-2/3 md:w-full ml-10 md:ml-0 mt-5 md:mt-10 ">
<CarouselContent> <CarouselContent>
{/* boiler plate for an actual pictures */} {/* boiler plate for an actual pictures */}
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3"> <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">