chore: Add image carousel to Invest page

This commit is contained in:
Pattadon 2024-08-29 16:04:01 +07:00
parent f27c3a19b9
commit b321f04354
2 changed files with 23 additions and 7 deletions

BIN
public/boiler1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

View File

@ -3,16 +3,17 @@
import React from "react";
import Image from "next/image";
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";
export default function Invest() {
return (
<div className=" w-[90%] h-[500px] bg-red-500 ml-20 mt-12">
<div className=" w-[90%] h-[500px]-500 ml-20 mt-12">
<div>
<div className="flex">
<Image src="./logo.svg" alt="logo" width={50} height={50} />
@ -29,6 +30,21 @@ export default function Invest() {
</span>
))}
</div>
<div className="flex">
{/* image carousel */}
<Carousel className="w-[55%] mt-4">
<CarouselContent className="h-[450px]">
{Array.from({ length: 5 }).map((_, index) => (
<CarouselItem>
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
</CarouselItem>
))}
</CarouselContent>{" "}
<CarouselPrevious />
<CarouselNext />
</Carousel>
<div className="bg-emerald-800 w-1/3 h-[400px] ml-[5%]"></div>
</div>
</div>
</div>
);