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

24
src/components/extendableCard.tsx
View File

@ -19,7 +19,7 @@ interface ExtendableCardProps {
export function ExtendableCard(props: ExtendableCardProps) {
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">
<img
src="/money.png"
@ -30,26 +30,26 @@ export function ExtendableCard(props: ExtendableCardProps) {
style={{ aspectRatio: "400/300", objectFit: "cover" }}
/>
</div>
<div className="p-4">
<h3 className="text-lg font-semibold text-card-foreground transition-colors duration-500 group-hover:text-primary">
<div className="p-1 md:p-4">
<div className="text-sm md:text-lg font-semibold text-card-foreground transition-colors duration-500 group-hover:text-primary">
{props.name}
</h3>
</div>
{/* Default content (visible when not hovered) */}
<div className="mt-2 flex items-center text-muted-foreground group-hover:hidden">
<span className="flex items-center pt-2 gap-1">
<CalendarDaysIcon width={20} />
Joined {props.joinDate}
<div className="text-xs md:text-lg">Joined {props.joinDate}</div>
</span>
</div>
<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 className="mt-2 flex flex-wrap items-center text-muted-foreground group-hover:hidden">
{["Technology", "Gaming"].map((tag) => (
<span
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}
</span>
@ -58,22 +58,24 @@ export function ExtendableCard(props: ExtendableCardProps) {
{/* 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">
<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="flex items-center space-x-2">
<div>
<hr className="w-screen -ml-4 mb-2" />
<p>
<p className="text-xs md:text-base">
<strong>${props.totalRaised.toLocaleString()}</strong>{" "}
committed and reserved
</p>
<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>{" "}
investors
</p>
<hr className="w-screen -ml-4 mb-2" />
<p>
<p className="text-xs md:text-base">
<strong>${props.minInvestment.toLocaleString()}</strong> min.
investment
</p>