sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-19 05:54:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pattadon 2024-09-16 14:27:43 +07:00
parent d30f69b4c0
commit cfb72bbba4
1 changed files with 72 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/app/invest/page.tsx
View File

@ -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,46 +122,25 @@ export default function Invest() {
</div>
<div className="grid grid-cols-2">
{/* image carousel */}
<Carousel className="w-full mt-4">
<CarouselContent className="h-[450px]">
<div>
<Carousel className="w-full -mt-20 md:mt-0">
<CarouselContent className="h-[400px]">
{Array.from({ length: 5 }).map((_, index) => (
<CarouselItem key={index}>
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
<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>
<div className=" w-2/3 mt-4 h-[400px] m-auto grid-rows-5 ">
<div className="pl-5">
<h1 className="font-semibold text-4xl mt-8">
<CountUp
start={0}
end={100000}
duration={2}
prefix="$"
className=""
/>
</h1>
<p className=""> 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">
{" "}
<CountUp start={0} end={1000} duration={2} className="" />
</h1>
<p className=""> 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>
<p className="ml-5"> Left to invest</p>
<Button className="mt-10 ml-[25%]">Invest in NVIDIA</Button>
</div>
</div>
</div>
<Carousel className="w-1/2 ml-10">
<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">
@ -173,6 +161,48 @@ export default function Invest() {
</CarouselContent>
</Carousel>
</div>
<div className=" w-2/3 mt-4 m-auto grid-rows-5">
<div className="pl-5">
<h1 className="font-semibold text-xl md:text-4xl mt-8">
<CountUp
start={0}
end={100000}
duration={2}
prefix="$"
className=""
/>
</h1>
<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 md:mt-8">
{" "}
<CountUp
start={0}
end={1000}
duration={2}
className="text-xl md:text-4xl"
/>
</h1>
<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-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-5 md:mt-10 ml-0 md:ml-[25%] scale-75 md:scale-100">
Invest in NVIDIA
</Button>
</div>
</div>
</div>
</div>
{/* menu */}
<div className="flex w-[90%] mt-24 m-auto ml-32">
<ul className="list-none flex gap-10 text-xl ">