mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-19 05:54:06 +01:00
style: make business cards + index and deals page more responsive
This commit is contained in:
parent
0b7a973643
commit
e4c3275102
@ -18,6 +18,7 @@ export default function Deals() {
|
||||
joinDate: "December 2021",
|
||||
location: "Bangkok, Thailand",
|
||||
tags: ["AI", "Technology"],
|
||||
imageUri: "/login.png",
|
||||
minInvestment: 10000,
|
||||
totalInvestor: 58400,
|
||||
totalRaised: 9000000,
|
||||
@ -29,6 +30,7 @@ export default function Deals() {
|
||||
joinDate: "February 2020",
|
||||
location: "Cupertino, California, USA",
|
||||
tags: ["Consumer Electronics", "Software"],
|
||||
imageUri: "/money.png",
|
||||
minInvestment: 10000,
|
||||
totalInvestor: 58400,
|
||||
totalRaised: 9000000,
|
||||
@ -40,6 +42,7 @@ export default function Deals() {
|
||||
joinDate: "April 2019",
|
||||
location: "Mountain View, California, USA",
|
||||
tags: ["Internet", "Search Engine"],
|
||||
imageUri: "/money.png",
|
||||
minInvestment: 10000,
|
||||
totalInvestor: 5000,
|
||||
totalRaised: 1500000000,
|
||||
@ -50,6 +53,7 @@ export default function Deals() {
|
||||
joinDate: "January 2018",
|
||||
location: "California, USA",
|
||||
tags: ["Technology", "Software"],
|
||||
imageUri: null,
|
||||
minInvestment: 250,
|
||||
totalInvestor: 5000,
|
||||
totalRaised: 1500000,
|
||||
@ -59,18 +63,19 @@ export default function Deals() {
|
||||
const filteredData = selectedTag ? data.filter((item) => item.tags.includes(selectedTag)) : data;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className=" w-1/2 h-[250px] mt-10 ml-[15%]">
|
||||
<div className="container max-w-screen-xl mx-auto px-4">
|
||||
<div className="h-auto mt-10">
|
||||
<h1 className="text-4xl font-bold">Investment Opportunities</h1>
|
||||
<br />
|
||||
<p>Browse current investment opportunities on B2DVenture.</p>
|
||||
<p>
|
||||
All companies are <u>vetted & pass due diligence.</u>
|
||||
</p>
|
||||
{/* filters */}
|
||||
<div className="flex mt-10 gap-3">
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap mt-10 gap-3">
|
||||
<Select onValueChange={(value) => setPostAtFilter(value)}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<Clock3Icon className="ml-2" />
|
||||
<SelectValue placeholder="Posted at" />
|
||||
</SelectTrigger>
|
||||
@ -79,15 +84,14 @@ export default function Deals() {
|
||||
<SelectItem value="Yesterday">Yesterday</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select onValueChange={(value) => setSelectedTag(value)}>
|
||||
{" "}
|
||||
{/* Tag filtering */}
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<MessageSquareIcon className="ml-2" />
|
||||
<SelectValue placeholder="Tags" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="_">All Tags</SelectItem> {/* Reset filter */}
|
||||
<SelectItem value="_">All Tags</SelectItem>
|
||||
<SelectItem value="AI">AI</SelectItem>
|
||||
<SelectItem value="Technology">Technology</SelectItem>
|
||||
<SelectItem value="Consumer Electronics">Consumer Electronics</SelectItem>
|
||||
@ -99,18 +103,20 @@ export default function Deals() {
|
||||
<Separator className="mt-10" />
|
||||
</div>
|
||||
|
||||
<div className="ml-[15%]">
|
||||
<div className="mt-10">
|
||||
<h2 className="text-2xl">Deals</h2>
|
||||
<p className="mt-3">The deals attracting the most interest right now</p>
|
||||
</div>
|
||||
{/* block for all the deals */}
|
||||
<div className="mx-[15%] mt-10 grid grid-cols-3">
|
||||
|
||||
{/* Block for all the deals */}
|
||||
<div className="mt-10 grid grid-cols-3 gap-4">
|
||||
{filteredData.map((item, index) => (
|
||||
<ExtendableCard
|
||||
key={index}
|
||||
name={item.name}
|
||||
description={item.description}
|
||||
joinDate={item.joinDate}
|
||||
imageUri={item.imageUri}
|
||||
location={item.location}
|
||||
minInvestment={item.minInvestment}
|
||||
totalInvestor={item.totalInvestor}
|
||||
|
||||
231
src/app/page.tsx
231
src/app/page.tsx
@ -8,127 +8,132 @@ import { ExtendableCard } from "@/components/extendableCard";
|
||||
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">
|
||||
<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>Unlock opportunities and connect with a community of passionate</p>
|
||||
<p>investors and innovators.</p>
|
||||
<p>Together, we turn ideas into impact.</p>
|
||||
<div className="relative mx-auto">
|
||||
{/* Expanded div */}
|
||||
<div className="flex flex-row bg-slate-100 dark:bg-gray-800">
|
||||
<div className="container max-w-screen-xl flex flex-col">
|
||||
<span className="mx-20 px-10 py-10">
|
||||
<p className="text-4xl font-bold">Explore the world of ventures</p>
|
||||
<span className="text-lg">
|
||||
<p>Unlock opportunities and connect with a community of passionate</p>
|
||||
<p>investors and innovators.</p>
|
||||
<p>Together, we turn ideas into impact.</p>
|
||||
</span>
|
||||
<Button className="scale-75 md:scale-100 font-bold mt-4">
|
||||
<Link href="/deals">Start Investing</Link>
|
||||
</Button>
|
||||
</span>
|
||||
<Button className="scale-75 md:scale-100 font-bold mt-4">
|
||||
<Link href="/deals">Start Investing</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex justify-center items-center mt-2">
|
||||
<Image
|
||||
src="/money.png"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "50%", height: "auto" }}
|
||||
alt="Money"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container max-w-screen-xl">
|
||||
<div className="flex flex-row gap-12 justify-start md:justify-center mt-3 md:mt-5">
|
||||
<Card className="border-0 shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg md:text-2xl">100M+</CardTitle>
|
||||
<CardDescription>Global investor community</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="border-0 shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg md:text-2xl">2,500+</CardTitle>
|
||||
<CardDescription>Ventures supported</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="border-0 shadow-none">
|
||||
<CardHeader>
|
||||
<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 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 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 scale-75 md:scale-100">
|
||||
<Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100" />
|
||||
Github
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Separator className="mb-6" />
|
||||
|
||||
<div className="flex flex-col px-10">
|
||||
<span className="pb-5">
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex justify-center items-center mt-2">
|
||||
<Image
|
||||
src="/money.png"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "50%", height: "auto" }}
|
||||
alt="Money"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 className="text-lg md:text-2xl">100M+</CardTitle>
|
||||
<CardDescription>Global investor community</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="border-0 shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg md:text-2xl">2,500+</CardTitle>
|
||||
<CardDescription>Ventures supported</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="border-0 shadow-none">
|
||||
<CardHeader>
|
||||
<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 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 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 scale-75 md:scale-100">
|
||||
<Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100" />
|
||||
Github
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Separator className="mb-6" />
|
||||
|
||||
<div className="flex flex-col px-10 md:px-28">
|
||||
<span className="pb-5">
|
||||
<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>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link href={"/overview"}>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link href={"/overview"}>
|
||||
<ExtendableCard
|
||||
name={"NVDA"}
|
||||
description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
|
||||
joinDate={"December 2021"}
|
||||
location={"Bangkok, Thailand"}
|
||||
tags={[]}
|
||||
minInvestment={10000}
|
||||
totalInvestor={58400}
|
||||
totalRaised={9000000}
|
||||
/>
|
||||
</Link>
|
||||
<ExtendableCard
|
||||
name={"NVDA"}
|
||||
description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
|
||||
joinDate={"December 2021"}
|
||||
location={"Bangkok, Thailand"}
|
||||
name={"Apple Inc."}
|
||||
description={
|
||||
"Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store."
|
||||
}
|
||||
joinDate={"February 2020"}
|
||||
location={"Cupertino, California, USA"}
|
||||
tags={[]}
|
||||
minInvestment={10000}
|
||||
totalInvestor={58400}
|
||||
totalRaised={9000000}
|
||||
/>
|
||||
</Link>
|
||||
<ExtendableCard
|
||||
name={"Apple Inc."}
|
||||
description={
|
||||
"Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store."
|
||||
}
|
||||
joinDate={"February 2020"}
|
||||
location={"Cupertino, California, USA"}
|
||||
tags={[]}
|
||||
minInvestment={10000}
|
||||
totalInvestor={58400}
|
||||
totalRaised={9000000}
|
||||
/>
|
||||
<ExtendableCard
|
||||
name={"Google LLC"}
|
||||
description={
|
||||
"Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system."
|
||||
}
|
||||
joinDate={"April 2019"}
|
||||
location={"Mountain View, California, USA"}
|
||||
tags={[]}
|
||||
minInvestment={10000}
|
||||
totalInvestor={5000}
|
||||
totalRaised={1500000000}
|
||||
/>
|
||||
<ExtendableCard
|
||||
name={"Microsoft Corporation"}
|
||||
description={"Microsoft Corporation is a multinational technology company."}
|
||||
joinDate={"January 2018"}
|
||||
location={"California, USA"}
|
||||
tags={[]}
|
||||
minInvestment={250}
|
||||
totalInvestor={5000}
|
||||
totalRaised={1500000}
|
||||
/>
|
||||
</div>
|
||||
<div className="self-center py-5 scale-75 md:scale-100">
|
||||
<Button>
|
||||
<Link href={"/deals"}>View all</Link>
|
||||
</Button>
|
||||
<ExtendableCard
|
||||
name={"Google LLC"}
|
||||
description={
|
||||
"Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system."
|
||||
}
|
||||
joinDate={"April 2019"}
|
||||
location={"Mountain View, California, USA"}
|
||||
tags={[]}
|
||||
minInvestment={10000}
|
||||
totalInvestor={5000}
|
||||
totalRaised={1500000000}
|
||||
/>
|
||||
<ExtendableCard
|
||||
name={"Microsoft Corporation"}
|
||||
description={"Microsoft Corporation is a multinational technology company."}
|
||||
joinDate={"January 2018"}
|
||||
location={"California, USA"}
|
||||
tags={[]}
|
||||
minInvestment={250}
|
||||
totalInvestor={5000}
|
||||
totalRaised={1500000}
|
||||
/>
|
||||
</div>
|
||||
<div className="self-center py-5 scale-75 md:scale-100">
|
||||
<Button>
|
||||
<Link href={"/deals"}>View all</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { CalendarDaysIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Image from "next/image";
|
||||
|
||||
interface XMap {
|
||||
@ -13,62 +14,90 @@ interface ExtendableCardProps {
|
||||
joinDate: string;
|
||||
location: string;
|
||||
tags: XMap | null | never[] | string[];
|
||||
imageUri: string | null;
|
||||
minInvestment: number;
|
||||
totalInvestor: number;
|
||||
totalRaised: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ExtendableCard(props: ExtendableCardProps) {
|
||||
return (
|
||||
<div className="flex flex-col h-full group">
|
||||
{/* Image */}
|
||||
<div className="relative">
|
||||
<Image src="/money.png" alt="Card image" width={400} height={300} layout="responsive" objectFit="cover" />
|
||||
{/* Info 0 overlaps Image */}
|
||||
<div className="group-hover:absolute group-hover:bottom-0 group-hover:left-0 group-hover:right-0 p-4 bg-opacity-75 bg-white transition-all duration-300 group-hover:bg-opacity-100 z-10">
|
||||
<div className="font-semibold text-card-foreground transition-colors duration-1000 group-hover:text-primary">
|
||||
{props.name}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col group border-[1px] border-border relative hover:shadow-md rounded-xl h-[450px]",
|
||||
props.className
|
||||
)}>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Image */}
|
||||
<div className="relative h-3/4 w-full">
|
||||
{props.imageUri ? (
|
||||
<Image
|
||||
src={props.imageUri}
|
||||
alt="Card image"
|
||||
layout="fill"
|
||||
className="rounded-t-xl bg-background dark:bg-background h-full"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src="/money.png"
|
||||
alt="Card image"
|
||||
layout="fill"
|
||||
className="rounded-t-xl bg-background dark:bg-background h-full"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col h-full justify-between">
|
||||
{/* Info 0 overlaps Image */}
|
||||
<div className="bg-background dark:bg-background transition-all ease-out transform group-hover:-translate-y-24 duration-1000 group-hover:bg-opacity-100 z-10 p-4">
|
||||
<div className="font-semibold text-card-foreground transition-colors duration-1000 group-hover:text-primary">
|
||||
{props.name}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground line-clamp-3">{props.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Info 1 */}
|
||||
<div>
|
||||
<div className="transition-transform duration-500 transform opacity-100 group-hover:opacity-0 p-4">
|
||||
<div className="flex items-center text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<CalendarDaysIcon width={20} />
|
||||
<div className="text-xs">Joined {props.joinDate}</div>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center text-muted-foreground">
|
||||
<span className="text-xs">{props.location}</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap mt-1 items-center text-muted-foreground">
|
||||
{props.tags.map((tag) => (
|
||||
<span id="tag" key={tag} className="text-[10px] rounded-md bg-slate-200 dark:bg-slate-700 p-1 mr-1">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info 2 */}
|
||||
<div className="hidden group-hover:flex group-hover:absolute group-hover:bottom-4 p-4">
|
||||
{/* Info 2 (Visible on hover) */}
|
||||
<div className="transition-transform duration-500 transform translate-y-6 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
|
||||
<hr className="-ml-4 mb-2" />
|
||||
<p className="text-base">
|
||||
<strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved
|
||||
</p>
|
||||
<hr className="-ml-4 mb-2 mt-2" />
|
||||
<p className="mb-2 text-base">
|
||||
<strong>{props.totalInvestor.toLocaleString()}</strong> investors
|
||||
</p>
|
||||
<hr className="-ml-4 mb-2" />
|
||||
<p className="text-base">
|
||||
<strong>${props.minInvestment.toLocaleString()}</strong> min. investment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{props.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Info 1 (Hidden on hover) */}
|
||||
<div className="transition-opacity duration-300 group-hover:opacity-0">
|
||||
<div className="mt-2 flex items-center text-muted-foreground">
|
||||
<span className="flex items-center pt-2 gap-1">
|
||||
<CalendarDaysIcon width={20} />
|
||||
<div className="text-xs md:text-lg">Joined {props.joinDate}</div>
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center text-muted-foreground">
|
||||
<span className="text-xs md:text-sm">{props.location}</span>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap items-center text-muted-foreground">
|
||||
{props.tags.map((tag) => (
|
||||
<span
|
||||
id="tag"
|
||||
key={tag}
|
||||
className="text-[10px] md:text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Info 2 (Visible on hover) */}
|
||||
<div className="transition-transform duration-300 transform translate-y-6 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
|
||||
<hr className="-ml-4 mb-2" />
|
||||
<p className="text-base">
|
||||
<strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved
|
||||
</p>
|
||||
<hr className="-ml-4 mb-2 mt-2" />
|
||||
<p className="mb-2 text-base">
|
||||
<strong>{props.totalInvestor.toLocaleString()}</strong> investors
|
||||
</p>
|
||||
<hr className="-ml-4 mb-2" />
|
||||
<p className="text-base">
|
||||
<strong>${props.minInvestment.toLocaleString()}</strong> min. investment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user