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

Merge pull request #16 from Sosokker/front-end

Browse Source 
Finish up detail page.
This commit is contained in:
Sirin Puenggun 2024-09-01 17:29:20 +07:00 committed by GitHub
commit 2a3bc85a51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 121 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,70 +17,137 @@ import { Button } from "@/components/ui/button";
export default function Invest() { export default function Invest() {
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const [tab, setTab] = useState("Pitch");
const handleClick = (item: string) => {
setTab(item);
};
useEffect(() => { useEffect(() => {
// percent success // percent success
const timer = setTimeout(() => setProgress(66), 500); const timer = setTimeout(() => setProgress(66), 500);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, []); }, []);
return ( return (
<div className=" w-[90%] h-[500px]-500 ml-32 mt-12"> <div>
<div> <div className="w-[90%] h-[500px]-500 m-auto mt-12">
<div className="flex"> <div>
<Image src="./logo.svg" alt="logo" width={50} height={50} /> <div className="flex">
<h1 className="mt-3 font-bold text-3xl">NVIDIA</h1> <Image src="./logo.svg" alt="logo" width={50} height={50} />
</div> <h1 className="mt-3 font-bold text-3xl">NVIDIA</h1>
<p className="mt-2"> World's first non-metal sustainable battery</p> </div>
<div className="flex mt-3"> <p className="mt-2"> World's first non-metal sustainable battery</p>
{["Technology", "Gaming"].map((tag) => ( <div className="flex mt-3">
<span {["Technology", "Gaming"].map((tag) => (
key={tag} <span
className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1" key={tag}
> className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1"
{tag} >
</span> {tag}
))} </span>
</div> ))}
<div className="flex"> </div>
{/* image carousel */} <div className="flex">
<Carousel className="w-[55%] mt-4"> {/* image carousel */}
<CarouselContent className="h-[450px]"> <Carousel className="w-[55%] mt-4">
{Array.from({ length: 5 }).map((_, index) => ( <CarouselContent className="h-[450px]">
<CarouselItem> {Array.from({ length: 5 }).map((_, index) => (
<img src="./boiler1.jpg" alt="" className="rounded-lg" /> <CarouselItem key={index}>
</CarouselItem> <img src="./boiler1.jpg" alt="" className="rounded-lg" />
))} </CarouselItem>
</CarouselContent>{" "} ))}
<CarouselPrevious /> </CarouselContent>{" "}
<CarouselNext /> <CarouselPrevious />
</Carousel> <CarouselNext />
<div className=" w-1/3 mt-4 h-[400px] ml-[8%] "> </Carousel>
<div className="pl-5"> <div className=" w-1/3 mt-4 h-[400px] ml-[8%] ">
<h1 className="font-semibold text-4xl mt-8"> <div className="pl-5">
<CountUp <h1 className="font-semibold text-4xl mt-8">
start={0} <CountUp
end={100000} start={0}
duration={2} end={100000}
prefix="$" duration={2}
className="" prefix="$"
/> className=""
</h1> />
<p className=""> 5% raised of $5M max goal</p> </h1>
<Progress value={progress} className="w-[60%] h-3 mt-3" /> <p className=""> 5% raised of $5M max goal</p>
<h1 className="font-semibold text-4xl mt-8"> <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={1000} duration={2} className="" /> <CountUp start={0} end={5800} duration={2} className="" /> hours
</h1> </h1>
<p className=""> Investors</p> <p className="ml-5"> Left to invest</p>
<Button className="mt-10 ml-[25%]">Invest</Button>
</div> </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</Button>
</div> </div>
</div> </div>
<Carousel className="w-1/2 mt-5 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">
<ul className="list-none flex gap-10 text-xl ">
<li>
<a
onClick={() => handleClick("Pitch")}
className={tab === "Pitch" ? "text-blue-600" : ""}
>
Pitch
</a>
</li>
<li>
<a
onClick={() => handleClick("General Data")}
className={tab === "General Data" ? "text-blue-600" : ""}
>
General Data
</a>
</li>
<li>
<a
onClick={() => handleClick("Updates")}
className={tab === "Updates" ? "text-blue-600" : ""}
>
Updates
</a>
</li>
</ul>
</div>
<hr className="mt-2" />
{/* Card section */}
<div className="flex w-full mt-10">
{/* Cards */}
<Card className="m-auto border-slate-800 w-3/4 p-6">
<CardContent>
<Card>
<CardContent>{tab}</CardContent>
</Card>
</CardContent>
</Card>
</div> </div>
</div> </div>
); );

2
src/components/navigationBar/Unsigned.tsx
View File

@ -83,7 +83,7 @@ export function UnsignedNav() {
}, },
]; ];
return ( return (
<header className="sticky top-0 flex flex-wrap w-full bg-card text-sm py-3 border-b-2 border-border"> <header className="sticky top-0 flex flex-wrap w-full bg-card text-sm py-3 border-b-2 border-border z-50">
<nav className="max-w-[85rem] w-full mx-auto px-4"> <nav className="max-w-[85rem] w-full mx-auto px-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex flex-col"> <div className="flex flex-col">