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

Refactor Invest page UI components, adjust grid layout and font size

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-09-16 22:29:14 +07:00
parent 0728ef8804
commit 329d92fbe7
2 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/page.tsx
View File

@ -15,8 +15,8 @@ export default function Home() {
return ( return (
<main> <main>
<div className="flex flex-row bg-slate-100 dark:bg-gray-800"> <div className="flex flex-row bg-slate-100 dark:bg-gray-800">
<div className="flex flex-col w-3/5 bg-red-500"> <div className="flex flex-col w-3/5">
<span className="px-28 py-20"> <span className="px-10 md:px-28 py-10 md:py-20">
<p className="text-lg md:text-4xl font-bold">Explore the world of ventures</p> <p className="text-lg md:text-4xl font-bold">Explore the world of ventures</p>
<span className="text-sm md:text-lg"> <span className="text-sm md:text-lg">
<p> <p>
@ -42,36 +42,36 @@ export default function Home() {
</div> </div>
</div> </div>
<div className="flex flex-row gap-10 justify-center mt-5"> <div className="flex flex-row gap-0 md:gap-10 justify-start md:justify-center mt-3 md:mt-5">
<Card className="border-0 shadow-none"> <Card className="border-0 shadow-none">
<CardHeader> <CardHeader>
<CardTitle>100M+</CardTitle> <CardTitle className="text-lg md:text-2xl">100M+</CardTitle>
<CardDescription>Global investor community</CardDescription> <CardDescription>Global investor community</CardDescription>
</CardHeader> </CardHeader>
</Card> </Card>
<Card className="border-0 shadow-none"> <Card className="border-0 shadow-none">
<CardHeader> <CardHeader>
<CardTitle>2,500+</CardTitle> <CardTitle className="text-lg md:text-2xl">2,500+</CardTitle>
<CardDescription>Ventures supported</CardDescription> <CardDescription>Ventures supported</CardDescription>
</CardHeader> </CardHeader>
</Card> </Card>
<Card className="border-0 shadow-none"> <Card className="border-0 shadow-none">
<CardHeader> <CardHeader>
<CardTitle>$2.6B+</CardTitle> <CardTitle className="text-lg md:text-2xl">$2.6B+</CardTitle>
<CardDescription>Capital raised</CardDescription> <CardDescription>Capital raised</CardDescription>
</CardHeader> </CardHeader>
</Card> </Card>
<Card className="border-0 shadow-none"> <Card className="border-0 shadow-none">
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle>Follow Us</CardTitle> <CardTitle className="text-lg md:text-2xl">Follow Us</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="flex gap-2"> <CardContent className="flex gap-2">
<Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground"> <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
<Image src={"/github.svg"} width={20} height={20} alt="github" /> <Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100"/>
Github Github
</Button> </Button>
<Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground"> <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
<Image src={"/github.svg"} width={20} height={20} alt="github" /> <Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100"/>
Github Github
</Button> </Button>
</CardContent> </CardContent>
@ -80,10 +80,10 @@ export default function Home() {
<Separator className="mb-6" /> <Separator className="mb-6" />
<div className="flex flex-col px-28"> <div className="flex flex-col px-10 md:px-28">
<span className="pb-5"> <span className="pb-5">
<p className="text-2xl font-bold">Hottest Deals</p> <p className="text-xl md:text-2xl font-bold">Hottest Deals</p>
<p className="text-lg"> <p className="text-md md:text-lg">
The deals attracting the most interest right now The deals attracting the most interest right now
</p> </p>
</span> </span>
@ -139,7 +139,7 @@ export default function Home() {
totalRaised={1500000} totalRaised={1500000}
/> />
</div> </div>
<div className="self-center py-5"> <div className="self-center py-5 scale-75 md:scale-100">
<Button> <Button>
<Link href={"/deals"}>View all</Link> <Link href={"/deals"}>View all</Link>
</Button> </Button>

24
src/components/extendableCard.tsx
View File

@ -19,7 +19,7 @@ interface ExtendableCardProps {
export function ExtendableCard(props: ExtendableCardProps) { export function ExtendableCard(props: ExtendableCardProps) {
return ( return (
<div className="group relative w-full max-w-sm overflow-hidden rounded-lg bg-card shadow-md transition-all duration-500 hover:shadow-lg"> <div className="group relative w-full max-w-sm overflow-hidden rounded-lg bg-card shadow-md transition-all duration-500 hover:shadow-lg ">
<div className="aspect-[4/3] overflow-hidden"> <div className="aspect-[4/3] overflow-hidden">
<img <img
src="/money.png" src="/money.png"
@ -30,26 +30,26 @@ export function ExtendableCard(props: ExtendableCardProps) {
style={{ aspectRatio: "400/300", objectFit: "cover" }} style={{ aspectRatio: "400/300", objectFit: "cover" }}
/> />
</div> </div>
<div className="p-4"> <div className="p-1 md:p-4">
<h3 className="text-lg font-semibold text-card-foreground transition-colors duration-500 group-hover:text-primary"> <div className="text-sm md:text-lg font-semibold text-card-foreground transition-colors duration-500 group-hover:text-primary">
{props.name} {props.name}
</h3> </div>
{/* Default content (visible when not hovered) */} {/* Default content (visible when not hovered) */}
<div className="mt-2 flex items-center text-muted-foreground group-hover:hidden"> <div className="mt-2 flex items-center text-muted-foreground group-hover:hidden">
<span className="flex items-center pt-2 gap-1"> <span className="flex items-center pt-2 gap-1">
<CalendarDaysIcon width={20} /> <CalendarDaysIcon width={20} />
Joined {props.joinDate} <div className="text-xs md:text-lg">Joined {props.joinDate}</div>
</span> </span>
</div> </div>
<div className="mt-2 flex items-center text-muted-foreground group-hover:hidden"> <div className="mt-2 flex items-center text-muted-foreground group-hover:hidden">
<span className="text-sm">{props.location}</span> <span className="text-xs md:text-sm">{props.location}</span>
</div> </div>
<div className="mt-2 flex flex-wrap items-center text-muted-foreground group-hover:hidden"> <div className="mt-2 flex flex-wrap items-center text-muted-foreground group-hover:hidden">
{["Technology", "Gaming"].map((tag) => ( {["Technology", "Gaming"].map((tag) => (
<span <span
key={tag} key={tag}
className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1" className="text-[10px] md:text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
> >
{tag} {tag}
</span> </span>
@ -58,22 +58,24 @@ export function ExtendableCard(props: ExtendableCardProps) {
{/* Hover content (appears when hovered) */} {/* Hover content (appears when hovered) */}
<div className="mt-4 max-h-0 overflow-hidden opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-1000 ease-in-out"> <div className="mt-4 max-h-0 overflow-hidden opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-1000 ease-in-out">
<p className="text-sm text-muted-foreground">{props.description}</p> <p className="text-xs md:text-sm text-muted-foreground">
{props.description}
</p>
<div className="mt-4 flex items-center justify-between"> <div className="mt-4 flex items-center justify-between">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div> <div>
<hr className="w-screen -ml-4 mb-2" /> <hr className="w-screen -ml-4 mb-2" />
<p> <p className="text-xs md:text-base">
<strong>${props.totalRaised.toLocaleString()}</strong>{" "} <strong>${props.totalRaised.toLocaleString()}</strong>{" "}
committed and reserved committed and reserved
</p> </p>
<hr className="w-screen -ml-4 mb-2 mt-2" /> <hr className="w-screen -ml-4 mb-2 mt-2" />
<p className="mb-2"> <p className="mb-2 text-xs md:text-base">
<strong>{props.totalInvestor.toLocaleString()}</strong>{" "} <strong>{props.totalInvestor.toLocaleString()}</strong>{" "}
investors investors
</p> </p>
<hr className="w-screen -ml-4 mb-2" /> <hr className="w-screen -ml-4 mb-2" />
<p> <p className="text-xs md:text-base">
<strong>${props.minInvestment.toLocaleString()}</strong> min. <strong>${props.minInvestment.toLocaleString()}</strong> min.
investment investment
</p> </p>