mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-19 05:54:06 +01:00
Refactor Invest page UI components, adjust grid layout and add pack section
This commit is contained in:
Pattadon
parent
d30f69b4c0
commit
cfb72bbba4
@ -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} />
|
||||
<h1 className="mt-3 font-bold text-3xl">NVIDIA</h1>
|
||||
<Image
|
||||
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,20 +122,48 @@ export default function Invest() {
|
||||
</div>
|
||||
<div className="grid grid-cols-2">
|
||||
{/* image carousel */}
|
||||
<Carousel className="w-full mt-4">
|
||||
<CarouselContent className="h-[450px]">
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<div>
|
||||
<Carousel className="w-full -mt-20 md:mt-0">
|
||||
<CarouselContent className="h-[400px]">
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<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>
|
||||
<Carousel className="w-2/3 md:w-full ml-10 md:ml-0 -mt-24 md:mt-0">
|
||||
<CarouselContent>
|
||||
{/* boiler plate for an actual pictures */}
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>{" "}
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
<div className=" w-2/3 mt-4 h-[400px] m-auto grid-rows-5 ">
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
<div className=" w-2/3 mt-4 m-auto grid-rows-5">
|
||||
<div className="pl-5">
|
||||
<h1 className="font-semibold text-4xl mt-8">
|
||||
<h1 className="font-semibold text-xl md:text-4xl mt-8">
|
||||
<CountUp
|
||||
start={0}
|
||||
end={100000}
|
||||
@ -135,43 +172,36 @@ export default function Invest() {
|
||||
className=""
|
||||
/>
|
||||
</h1>
|
||||
<p className=""> 5% raised of $5M max goal</p>
|
||||
<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 mt-8">
|
||||
<h1 className="font-semibold text-4xl md:mt-8">
|
||||
{" "}
|
||||
<CountUp start={0} end={1000} duration={2} className="" />
|
||||
<CountUp
|
||||
start={0}
|
||||
end={1000}
|
||||
duration={2}
|
||||
className="text-xl md:text-4xl"
|
||||
/>
|
||||
</h1>
|
||||
<p className=""> Investors</p>
|
||||
<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-4xl mt-8 ml-5">
|
||||
<CountUp start={0} end={5800} duration={2} className="" /> hours
|
||||
<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-10 ml-[25%]">Invest in NVIDIA</Button>
|
||||
<Button className="mt-5 md:mt-10 ml-0 md:ml-[25%] scale-75 md:scale-100">
|
||||
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">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
{/* menu */}
|
||||
<div className="flex w-[90%] mt-24 m-auto ml-32">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user