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

style: make business cards + index and deals page more responsive

Browse Source
This commit is contained in:
sirin 2024-10-05 14:30:10 +07:00
parent 0b7a973643
commit e4c3275102
3 changed files with 211 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/deals/page.tsx
View File

@ -18,6 +18,7 @@ export default function Deals() {
joinDate: "December 2021", joinDate: "December 2021",
location: "Bangkok, Thailand", location: "Bangkok, Thailand",
tags: ["AI", "Technology"], tags: ["AI", "Technology"],
imageUri: "/login.png",
minInvestment: 10000, minInvestment: 10000,
totalInvestor: 58400, totalInvestor: 58400,
totalRaised: 9000000, totalRaised: 9000000,
@ -29,6 +30,7 @@ export default function Deals() {
joinDate: "February 2020", joinDate: "February 2020",
location: "Cupertino, California, USA", location: "Cupertino, California, USA",
tags: ["Consumer Electronics", "Software"], tags: ["Consumer Electronics", "Software"],
imageUri: "/money.png",
minInvestment: 10000, minInvestment: 10000,
totalInvestor: 58400, totalInvestor: 58400,
totalRaised: 9000000, totalRaised: 9000000,
@ -40,6 +42,7 @@ export default function Deals() {
joinDate: "April 2019", joinDate: "April 2019",
location: "Mountain View, California, USA", location: "Mountain View, California, USA",
tags: ["Internet", "Search Engine"], tags: ["Internet", "Search Engine"],
imageUri: "/money.png",
minInvestment: 10000, minInvestment: 10000,
totalInvestor: 5000, totalInvestor: 5000,
totalRaised: 1500000000, totalRaised: 1500000000,
@ -50,6 +53,7 @@ export default function Deals() {
joinDate: "January 2018", joinDate: "January 2018",
location: "California, USA", location: "California, USA",
tags: ["Technology", "Software"], tags: ["Technology", "Software"],
imageUri: null,
minInvestment: 250, minInvestment: 250,
totalInvestor: 5000, totalInvestor: 5000,
totalRaised: 1500000, totalRaised: 1500000,
@ -59,18 +63,19 @@ export default function Deals() {
const filteredData = selectedTag ? data.filter((item) => item.tags.includes(selectedTag)) : data; const filteredData = selectedTag ? data.filter((item) => item.tags.includes(selectedTag)) : data;
return ( return (
<div> <div className="container max-w-screen-xl mx-auto px-4">
<div className=" w-1/2 h-[250px] mt-10 ml-[15%]"> <div className="h-auto mt-10">
<h1 className="text-4xl font-bold">Investment Opportunities</h1> <h1 className="text-4xl font-bold">Investment Opportunities</h1>
<br /> <br />
<p>Browse current investment opportunities on B2DVenture.</p> <p>Browse current investment opportunities on B2DVenture.</p>
<p> <p>
All companies are <u>vetted & pass due diligence.</u> All companies are <u>vetted & pass due diligence.</u>
</p> </p>
{/* filters */}
<div className="flex mt-10 gap-3"> {/* Filters */}
<div className="flex flex-wrap mt-10 gap-3">
<Select onValueChange={(value) => setPostAtFilter(value)}> <Select onValueChange={(value) => setPostAtFilter(value)}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-full sm:w-[180px]">
<Clock3Icon className="ml-2" /> <Clock3Icon className="ml-2" />
<SelectValue placeholder="Posted at" /> <SelectValue placeholder="Posted at" />
</SelectTrigger> </SelectTrigger>
@ -79,15 +84,14 @@ export default function Deals() {
<SelectItem value="Yesterday">Yesterday</SelectItem> <SelectItem value="Yesterday">Yesterday</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<Select onValueChange={(value) => setSelectedTag(value)}> <Select onValueChange={(value) => setSelectedTag(value)}>
{" "} <SelectTrigger className="w-full sm:w-[180px]">
{/* Tag filtering */}
<SelectTrigger className="w-[180px]">
<MessageSquareIcon className="ml-2" /> <MessageSquareIcon className="ml-2" />
<SelectValue placeholder="Tags" /> <SelectValue placeholder="Tags" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="_">All Tags</SelectItem> {/* Reset filter */} <SelectItem value="_">All Tags</SelectItem>
<SelectItem value="AI">AI</SelectItem> <SelectItem value="AI">AI</SelectItem>
<SelectItem value="Technology">Technology</SelectItem> <SelectItem value="Technology">Technology</SelectItem>
<SelectItem value="Consumer Electronics">Consumer Electronics</SelectItem> <SelectItem value="Consumer Electronics">Consumer Electronics</SelectItem>
@ -99,18 +103,20 @@ export default function Deals() {
<Separator className="mt-10" /> <Separator className="mt-10" />
</div> </div>
<div className="ml-[15%]"> <div className="mt-10">
<h2 className="text-2xl">Deals</h2> <h2 className="text-2xl">Deals</h2>
<p className="mt-3">The deals attracting the most interest right now</p> <p className="mt-3">The deals attracting the most interest right now</p>
</div> </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) => ( {filteredData.map((item, index) => (
<ExtendableCard <ExtendableCard
key={index} key={index}
name={item.name} name={item.name}
description={item.description} description={item.description}
joinDate={item.joinDate} joinDate={item.joinDate}
imageUri={item.imageUri}
location={item.location} location={item.location}
minInvestment={item.minInvestment} minInvestment={item.minInvestment}
totalInvestor={item.totalInvestor} totalInvestor={item.totalInvestor}

17
src/app/page.tsx
View File

@ -8,11 +8,13 @@ import { ExtendableCard } from "@/components/extendableCard";
export default function Home() { export default function Home() {
return ( return (
<main> <main>
<div className="relative mx-auto">
{/* Expanded div */}
<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"> <div className="container max-w-screen-xl flex flex-col">
<span className="px-10 md:px-28 py-10 md:py-20"> <span className="mx-20 px-10 py-10">
<p className="text-lg md:text-4xl font-bold">Explore the world of ventures</p> <p className="text-4xl font-bold">Explore the world of ventures</p>
<span className="text-sm md:text-lg"> <span className="text-lg">
<p>Unlock opportunities and connect with a community of passionate</p> <p>Unlock opportunities and connect with a community of passionate</p>
<p>investors and innovators.</p> <p>investors and innovators.</p>
<p>Together, we turn ideas into impact.</p> <p>Together, we turn ideas into impact.</p>
@ -33,8 +35,10 @@ export default function Home() {
/> />
</div> </div>
</div> </div>
</div>
<div className="flex flex-row gap-0 md:gap-10 justify-start md:justify-center mt-3 md:mt-5"> <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"> <Card className="border-0 shadow-none">
<CardHeader> <CardHeader>
<CardTitle className="text-lg md:text-2xl">100M+</CardTitle> <CardTitle className="text-lg md:text-2xl">100M+</CardTitle>
@ -72,7 +76,7 @@ export default function Home() {
<Separator className="mb-6" /> <Separator className="mb-6" />
<div className="flex flex-col px-10 md:px-28"> <div className="flex flex-col px-10">
<span className="pb-5"> <span className="pb-5">
<p className="text-xl md:text-2xl font-bold">Hottest Deals</p> <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> <p className="text-md md:text-lg">The deals attracting the most interest right now</p>
@ -131,6 +135,7 @@ export default function Home() {
</Button> </Button>
</div> </div>
</div> </div>
</div>
</main> </main>
); );
} }

67
src/components/extendableCard.tsx
View File

@ -1,6 +1,7 @@
"use client"; "use client";
import { CalendarDaysIcon } from "lucide-react"; import { CalendarDaysIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import Image from "next/image"; import Image from "next/image";
interface XMap { interface XMap {
@ -13,49 +14,74 @@ interface ExtendableCardProps {
joinDate: string; joinDate: string;
location: string; location: string;
tags: XMap | null | never[] | string[]; tags: XMap | null | never[] | string[];
imageUri: string | null;
minInvestment: number; minInvestment: number;
totalInvestor: number; totalInvestor: number;
totalRaised: number; totalRaised: number;
className?: string;
} }
export function ExtendableCard(props: ExtendableCardProps) { export function ExtendableCard(props: ExtendableCardProps) {
return ( return (
<div className="flex flex-col h-full group"> <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 */} {/* Image */}
<div className="relative"> <div className="relative h-3/4 w-full">
<Image src="/money.png" alt="Card image" width={400} height={300} layout="responsive" objectFit="cover" /> {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 */} {/* 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="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"> <div className="font-semibold text-card-foreground transition-colors duration-1000 group-hover:text-primary">
{props.name} {props.name}
</div> </div>
<p className="text-sm text-muted-foreground">{props.description}</p> <p className="text-sm text-muted-foreground line-clamp-3">{props.description}</p>
</div> </div>
</div>
{/* Info 1 (Hidden on hover) */} {/* Info 1 */}
<div className="transition-opacity duration-300 group-hover:opacity-0"> <div>
<div className="mt-2 flex items-center text-muted-foreground"> <div className="transition-transform duration-500 transform opacity-100 group-hover:opacity-0 p-4">
<span className="flex items-center pt-2 gap-1"> <div className="flex items-center text-muted-foreground">
<span className="flex items-center gap-1">
<CalendarDaysIcon width={20} /> <CalendarDaysIcon width={20} />
<div className="text-xs md:text-lg">Joined {props.joinDate}</div> <div className="text-xs">Joined {props.joinDate}</div>
</span> </span>
</div> </div>
<div className="mt-2 flex items-center text-muted-foreground"> <div className="flex items-center text-muted-foreground">
<span className="text-xs md:text-sm">{props.location}</span> <span className="text-xs">{props.location}</span>
</div> </div>
<div className="mt-2 flex flex-wrap items-center text-muted-foreground"> <div className="flex flex-wrap mt-1 items-center text-muted-foreground">
{props.tags.map((tag) => ( {props.tags.map((tag) => (
<span <span id="tag" key={tag} className="text-[10px] rounded-md bg-slate-200 dark:bg-slate-700 p-1 mr-1">
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} {tag}
</span> </span>
))} ))}
</div> </div>
</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) */} {/* 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"> <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" /> <hr className="-ml-4 mb-2" />
<p className="text-base"> <p className="text-base">
<strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved <strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved
@ -70,5 +96,8 @@ export function ExtendableCard(props: ExtendableCardProps) {
</p> </p>
</div> </div>
</div> </div>
</div>
</div>
</div>
); );
} }