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>
|
<div>
|
||||||
<Toaster position="top-right" reverseOrder={false} />
|
<Toaster position="top-right" reverseOrder={false} />
|
||||||
</div>
|
</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>
|
<div>
|
||||||
{/* Name, star and share button packed */}
|
{/* Name, star and share button packed */}
|
||||||
<div className="grid grid-cols-4">
|
<div className="grid grid-cols-4">
|
||||||
<div className="flex col-span-2">
|
<div className="flex col-span-2">
|
||||||
<Image src="./logo.svg" alt="logo" width={50} height={50} />
|
<Image
|
||||||
<h1 className="mt-3 font-bold text-3xl">NVIDIA</h1>
|
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>
|
||||||
<div className="grid grid-cols-2 gap-5 justify-self-end ">
|
<div className="grid grid-cols-2 gap-5 justify-self-end ">
|
||||||
<div className="mt-2 cursor-pointer" onClick={handleFollow}>
|
<div className="mt-2 cursor-pointer" onClick={handleFollow}>
|
||||||
@ -100,7 +106,10 @@ export default function Invest() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* end of pack */}
|
{/* 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">
|
<div className="flex flex-wrap mt-3">
|
||||||
{["Technology", "Gaming"].map((tag) => (
|
{["Technology", "Gaming"].map((tag) => (
|
||||||
<span
|
<span
|
||||||
@ -113,20 +122,48 @@ export default function Invest() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2">
|
<div className="grid grid-cols-2">
|
||||||
{/* image carousel */}
|
{/* image carousel */}
|
||||||
<Carousel className="w-full mt-4">
|
<div>
|
||||||
<CarouselContent className="h-[450px]">
|
<Carousel className="w-full -mt-20 md:mt-0">
|
||||||
{Array.from({ length: 5 }).map((_, index) => (
|
<CarouselContent className="h-[400px]">
|
||||||
<CarouselItem key={index}>
|
{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" />
|
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||||
</CarouselItem>
|
</CarouselItem>
|
||||||
))}
|
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||||
</CarouselContent>{" "}
|
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||||
<CarouselPrevious />
|
</CarouselItem>
|
||||||
<CarouselNext />
|
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||||
</Carousel>
|
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||||
<div className=" w-2/3 mt-4 h-[400px] m-auto grid-rows-5 ">
|
</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">
|
<div className="pl-5">
|
||||||
<h1 className="font-semibold text-4xl mt-8">
|
<h1 className="font-semibold text-xl md:text-4xl mt-8">
|
||||||
<CountUp
|
<CountUp
|
||||||
start={0}
|
start={0}
|
||||||
end={100000}
|
end={100000}
|
||||||
@ -135,43 +172,36 @@ export default function Invest() {
|
|||||||
className=""
|
className=""
|
||||||
/>
|
/>
|
||||||
</h1>
|
</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" />
|
<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>
|
</h1>
|
||||||
<p className=""> Investors</p>
|
<p className="text-sm md:text-lg"> Investors</p>
|
||||||
</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-xl md:text-4xl mt-8 ml-5">
|
||||||
<CountUp start={0} end={5800} duration={2} className="" /> hours
|
<CountUp
|
||||||
|
start={0}
|
||||||
|
end={5800}
|
||||||
|
duration={2}
|
||||||
|
className="text-xl md:text-4xl"
|
||||||
|
/>{" "}
|
||||||
|
hours
|
||||||
</h1>
|
</h1>
|
||||||
<p className="ml-5"> Left to invest</p>
|
<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>
|
</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>
|
</div>
|
||||||
{/* menu */}
|
{/* menu */}
|
||||||
<div className="flex w-[90%] mt-24 m-auto ml-32">
|
<div className="flex w-[90%] mt-24 m-auto ml-32">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user