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

Merge pull request #41 from Sosokker/front-end

Browse Source 
style: improve responsiveness of business card and pages
This commit is contained in:
Sirin Puenggun 2024-10-05 14:35:45 +07:00 committed by GitHub
commit f5a979d7da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 701 additions and 589 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",
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="ml-[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}

144
src/app/invest/1/page.tsx
View File

@ -1,144 +0,0 @@
"use client";
import { Separator } from "@/components/ui/separator";
import { Input } from "@/components/ui/input";
import { CardsPaymentMethod } from "@/components/paymentMethod";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
DialogFooter,
DialogClose,
} from "@/components/ui/dialog";
import { useRouter } from "next/navigation";
import { toast } from "react-hot-toast";
const term_data = [
{
term: "Minimum Investment",
description: "The minimum investment amount is $500.",
},
{
term: "Investment Horizon",
description: "Investments are typically locked for a minimum of 12 months.",
},
{
term: "Fees",
description: "A management fee of 2% will be applied annually.",
},
{
term: "Returns",
description: "Expected annual returns are between 8% and 12%.",
},
{
term: "Risk Disclosure",
description: "Investments carry risks, including the loss of principal.",
},
{
term: "Withdrawal Policy",
description: "Withdrawals can be made after the lock-in period.",
},
];
export default function Invest() {
const [checkedTerms, setCheckedTerms] = useState(Array(term_data.length).fill(false));
const [error, setError] = useState("");
const router = useRouter(); // Initialize the router
const handleCheckboxChange = (index) => {
const updatedCheckedTerms = [...checkedTerms];
updatedCheckedTerms[index] = !updatedCheckedTerms[index];
setCheckedTerms(updatedCheckedTerms);
};
const handleTermServiceClick = () => {
if (checkedTerms.some((checked) => !checked)) {
setError("Please accept all terms before proceeding with the investment.");
} else {
setError("");
handleInvestmentSuccess();
}
};
const handleInvestmentSuccess = () => {
toast.success("You successfully invested!");
setTimeout(() => {
router.push("/");
}, 1000);
};
return (
<div className="mx-40 my-10">
<h1 className="text-4xl font-bold">Invest on NVIDIA</h1>
<Separator className="my-4" />
<div>
<div className="w-1/2 space-y-2">
<h2 className="text-2xl">Investment Amount</h2>
<Input type="number" placeholder="min $500" />
</div>
<Separator className="my-4" />
<div className="w-1/2 space-y-2">
<h2 className="text-2xl">Payment Information</h2>
<CardsPaymentMethod />
</div>
<Separator className="my-4" />
<div className="w-2/3 space-y-2">
<h2 className="text-2xl">Terms and Services</h2>
<Table>
<TableHeader>
<TableRow>
<TableHead>Select</TableHead>
<TableHead>Term</TableHead>
<TableHead>Description</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{term_data.map((item, index) => (
<TableRow key={index}>
<TableCell>
<input type="checkbox" checked={checkedTerms[index]} onChange={() => handleCheckboxChange(index)} />
</TableCell>
<TableCell>{item.term}</TableCell>
<TableCell>{item.description}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
<Dialog>
<DialogTrigger asChild>
<Button className="mt-4">Invest</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>This action cannot be undone. This will permanently!</DialogDescription>
</DialogHeader>
<DialogFooter className="sm:justify-start">
<Button type="submit" onClick={handleTermServiceClick}>
Confirm
</Button>
<DialogClose asChild>
<Button type="button" variant="secondary">
Close
</Button>
</DialogClose>
</DialogFooter>
{error && <p className="text-red-500 mt-2 text-lg font-bold">{error}</p>}
</DialogContent>
</Dialog>
</div>
</div>
);
}

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

@ -1,190 +1,167 @@
"use client";
import React, { useState, useEffect } from "react";
import Image from "next/image";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Card, CardContent } from "@/components/ui/card";
import CountUp from "react-countup";
import { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import { Input } from "@/components/ui/input";
import { CardsPaymentMethod } from "@/components/paymentMethod";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { ShareIcon, StarIcon } from "lucide-react";
import { Toaster, toast } from "react-hot-toast";
import useSession from "@/lib/supabase/useSession";
import { redirect } from "next/navigation";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import Link from "next/link";
import { useState } from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
DialogFooter,
DialogClose,
} from "@/components/ui/dialog";
import { useRouter } from "next/navigation";
import { toast } from "react-hot-toast";
const term_data = [
{
term: "Minimum Investment",
description: "The minimum investment amount is $500.",
},
{
term: "Investment Horizon",
description: "Investments are typically locked for a minimum of 12 months.",
},
{
term: "Fees",
description: "A management fee of 2% will be applied annually.",
},
{
term: "Returns",
description: "Expected annual returns are between 8% and 12%.",
},
{
term: "Risk Disclosure",
description: "Investments carry risks, including the loss of principal.",
},
{
term: "Withdrawal Policy",
description: "Withdrawals can be made after the lock-in period.",
},
];
export default function Invest() {
const [progress, setProgress] = useState(0);
const [tab, setTab] = useState("Pitch");
const { session, loading } = useSession();
const user = session?.user;
const [sessionLoaded, setSessionLoaded] = useState(false);
const [isFollow, setIsFollow] = useState(false);
const [checkedTerms, setCheckedTerms] = useState(
Array(term_data.length).fill(false)
);
const [error, setError] = useState("");
const router = useRouter(); // Initialize the router
useEffect(() => {
// set sessionLoaded to true once session is confirmed
if (!loading) {
setSessionLoaded(true);
}
}, [loading]);
const handleClick = (item: string) => {
setTab(item);
const handleCheckboxChange = (index: number) => {
const updatedCheckedTerms = [...checkedTerms];
updatedCheckedTerms[index] = !updatedCheckedTerms[index];
setCheckedTerms(updatedCheckedTerms);
};
const handleShare = () => {
const currentUrl = window.location.href;
if (document.hasFocus()) {
navigator.clipboard.writeText(currentUrl).then(() => {
toast.success("URL copied to clipboard!");
});
}
};
const handleFollow = () => {
if (user) {
setIsFollow((prevState) => !prevState);
// save follow to database
const handleTermServiceClick = () => {
if (checkedTerms.some((checked) => !checked)) {
setError(
"Please accept all terms before proceeding with the investment."
);
} else {
redirect("/login");
setError("");
handleInvestmentSuccess();
}
};
useEffect(() => {
// percent success
const timer = setTimeout(() => setProgress(66), 500);
return () => clearTimeout(timer);
}, []);
const handleInvestmentSuccess = () => {
toast.success("You successfully invested!");
setTimeout(() => {
router.push("/");
}, 1000);
};
return (
<div>
<div className="mx-10 md:mx-40 my-10">
<h1 className="text-2xl md:text-4xl font-bold">Invest on NVIDIA</h1>
<Separator className="my-4" />
<div>
<Toaster position="top-right" reverseOrder={false} />
</div>
<div className="w-[90%] h-[450px]-500 md:m-auto mt-12 md:mt-12 pl-14 md:pl-24">
<div>
{/* Name, star and share button packed */}
<div className="grid grid-cols-4">
<div className="flex col-span-2">
<Image src="./logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
<div className="mt-3 font-bold text-lg md:text-3xl">NVIDIA</div>
</div>
<div className="grid grid-cols-2 gap-5 justify-self-end ">
<div className="mt-2 cursor-pointer" onClick={handleFollow}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<StarIcon id="follow" fill={isFollow ? "#FFFF00" : "#fff"} strokeWidth={2} />
</TooltipTrigger>
<TooltipContent>
<p>Follow NIVIDIA</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<div onClick={handleShare} className=" cursor-pointer mt-2">
<ShareIcon />
</div>
</div>
</div>
{/* end of pack */}
<p className="mt-2 sm:text-sm"> World's first non-metal sustainable battery</p>
<div className="flex flex-wrap mt-3">
{["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">
{tag}
</span>
))}
</div>
<div className="grid grid-cols-2 mt-5">
{/* image carousel */}
<div>
<Carousel className="w-full mt-20 md:mt-0">
<CarouselContent className="h-[400px] flex h-full">
{Array.from({ length: 5 }).map((_, index) => (
<CarouselItem key={index}>
<img src="./boiler1.jpg" alt="" className="rounded-lg self-center" />
</CarouselItem>
))}
</CarouselContent>{" "}
<CarouselPrevious />
<CarouselNext />
</Carousel>
<Carousel className="w-2/3 md:w-full ml-10 md:ml-0 mt-5 md:mt-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>
<div className=" w-2/3 mt-4 m-auto grid-rows-5">
<div className="pl-5">
<h1 className="font-semibold text-xl md:text-4xl mt-8">
<CountUp start={0} end={100000} duration={2} prefix="$" className="" />
</h1>
<p className="text-sm md:text-lg"> 5% raised of $5M max goal</p>
<Progress value={progress} className="w-[60%] h-3 mt-3" />
<h1 className="font-semibold text-4xl md:mt-8">
{" "}
<CountUp start={0} end={1000} duration={2} className="text-xl md:text-4xl" />
</h1>
<p className="text-sm md:text-lg"> Investors</p>
</div>
<Separator decorative className="mt-3 w-3/4 ml-5" />
<h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5">
<CountUp start={0} end={5800} duration={2} className="text-xl md:text-4xl" /> hours
</h1>
<p className="ml-5"> Left to invest</p>
<Button className="mt-5 md:mt-10 ml-0 md:ml-[25%] scale-75 md:scale-100">
<Link href="/invest/1">Invest in NVIDIA</Link>
</Button>
</div>
</div>
<div className="w-1/2 space-y-2">
<h2 className="text:base md:text-2xl">Investment Amount</h2>
<Input
className="w-52"
type="number"
placeholder="min $500"
min={500}
/>
</div>
</div>
{/* menu */}
<div className="flex w-[90%] mt-24 m-auto ml-10 md:ml-32">
<ul className="list-none flex gap-10 text-lg md: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>
<Separator className="my-4" />
<div className="w-full space-y-2">
<h2 className="text:base md:text-2xl">Payment Information</h2>
<CardsPaymentMethod />
</div>
<Separator className="my-4" />
<div className=" md:w-2/3 space-y-2">
<h2 className="text-2xl">Terms and Services</h2>
<Table>
<TableHeader>
<TableRow>
<TableHead>Select</TableHead>
<TableHead>Term</TableHead>
<TableHead>Description</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{term_data.map((item, index) => (
<TableRow key={index}>
<TableCell>
<input
type="checkbox"
checked={checkedTerms[index]}
onChange={() => handleCheckboxChange(index)}
/>
</TableCell>
<TableCell>{item.term}</TableCell>
<TableCell>{item.description}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
<Dialog>
<DialogTrigger asChild>
<Button className="mt-4">Invest</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently!
</DialogDescription>
</DialogHeader>
<DialogFooter className="sm:justify-start">
<Button type="submit" onClick={handleTermServiceClick}>
Confirm
</Button>
<DialogClose asChild>
<Button type="button" variant="secondary">
Close
</Button>
</DialogClose>
</DialogFooter>
{error && (
<p className="text-red-500 mt-2 text-lg font-bold">{error}</p>
)}
</DialogContent>
</Dialog>
</div>
</div>
);

2
src/app/layout.tsx
View File

@ -6,6 +6,7 @@ import "@/app/globals.css";
import { NavigationBar } from "@/components/navigationBar/nav";
import { Toaster } from "react-hot-toast";
import { SiteFooter } from "@/components/siteFooter";
const montserrat = Montserrat({
subsets: ["latin"],
@ -39,6 +40,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
<div className="flex-1 bg-background">{children}</div>
</div>
</ThemeProvider>
<SiteFooter />
</body>
</html>
</ReactQueryClientProvider>

191
src/app/overview/page.tsx Normal file
View File

@ -0,0 +1,191 @@
"use client";
import React, { useState, useEffect } from "react";
import Image from "next/image";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Card, CardContent } from "@/components/ui/card";
import CountUp from "react-countup";
import { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";
import { ShareIcon, StarIcon } from "lucide-react";
import { Toaster, toast } from "react-hot-toast";
import useSession from "@/lib/supabase/useSession";
import { redirect } from "next/navigation";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import Link from "next/link";
export default function Invest() {
const [progress, setProgress] = useState(0);
const [tab, setTab] = useState("Pitch");
const { session, loading } = useSession();
const user = session?.user;
const [sessionLoaded, setSessionLoaded] = useState(false);
const [isFollow, setIsFollow] = useState(false);
useEffect(() => {
// set sessionLoaded to true once session is confirmed
if (!loading) {
setSessionLoaded(true);
}
}, [loading]);
const handleClick = (item: string) => {
setTab(item);
};
const handleShare = () => {
const currentUrl = window.location.href;
if (document.hasFocus()) {
navigator.clipboard.writeText(currentUrl).then(() => {
toast.success("URL copied to clipboard!");
});
}
};
const handleFollow = () => {
if (user) {
setIsFollow((prevState) => !prevState);
// save follow to database
} else {
redirect("/login");
}
};
useEffect(() => {
// percent success
const timer = setTimeout(() => setProgress(66), 500);
return () => clearTimeout(timer);
}, []);
return (
<div>
<div>
<Toaster position="top-right" reverseOrder={false} />
</div>
<div className="w-[90%] h-[450px]-500 md:m-auto mt-12 md:mt-12 pl-14 md:pl-24">
<div>
{/* Name, star and share button packed */}
<div className="grid grid-cols-4">
<div className="flex col-span-2">
<Image src="./logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
<div className="mt-3 font-bold text-lg md:text-3xl">NVIDIA</div>
</div>
<div className="grid grid-cols-2 gap-5 justify-self-end ">
<div className="mt-2 cursor-pointer" onClick={handleFollow}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<StarIcon id="follow" fill={isFollow ? "#FFFF00" : "#fff"} strokeWidth={2} />
</TooltipTrigger>
<TooltipContent>
<p>Follow NIVIDIA</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<div onClick={handleShare} className=" cursor-pointer mt-2">
<ShareIcon />
</div>
</div>
</div>
{/* end of pack */}
<p className="mt-2 sm:text-sm"> World's first non-metal sustainable battery</p>
<div className="flex flex-wrap mt-3">
{["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">
{tag}
</span>
))}
</div>
<div className="grid grid-cols-2 mt-5">
{/* image carousel */}
<div>
<Carousel className="w-full mt-20 md:mt-0">
<CarouselContent className="h-[400px] flex h-full">
{Array.from({ length: 5 }).map((_, index) => (
<CarouselItem key={index}>
<img src="./boiler1.jpg" alt="" className="rounded-lg self-center" />
</CarouselItem>
))}
</CarouselContent>{" "}
<CarouselPrevious />
<CarouselNext />
</Carousel>
<Carousel className="w-2/3 md:w-full ml-10 md:ml-0 mt-5 md:mt-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>
<div className=" w-2/3 mt-4 m-auto grid-rows-5">
<div className="pl-5">
<h1 className="font-semibold text-xl md:text-4xl mt-8">
<CountUp start={0} end={100000} duration={2} prefix="$" className="" />
</h1>
<p className="text-sm md:text-lg"> 5% raised of $5M max goal</p>
<Progress value={progress} className="w-[60%] h-3 mt-3" />
<h1 className="font-semibold text-4xl md:mt-8">
{" "}
<CountUp start={0} end={1000} duration={2} className="text-xl md:text-4xl" />
</h1>
<p className="text-sm md:text-lg"> Investors</p>
</div>
<Separator decorative className="mt-3 w-3/4 ml-5" />
<h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5">
<CountUp start={0} end={5800} duration={2} className="text-xl md:text-4xl" /> hours
</h1>
<p className="ml-5"> Left to invest</p>
<Button className="mt-5 md:mt-10 ml-0 md:ml-[25%] scale-75 md:scale-100">
<Link href="/invest">Invest in NVIDIA</Link>
</Button>
</div>
</div>
</div>
</div>
{/* menu */}
<div className="flex w-[90%] mt-24 m-auto ml-10 md:ml-32">
<ul className="list-none flex gap-10 text-lg md: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>
);
}

231
src/app/page.tsx
View File

@ -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={"/invest"}>
<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>

127
src/components/extendableCard.tsx
View File

@ -1,8 +1,10 @@
"use client";
import { CalendarDaysIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import Image from "next/image";
interface XMap {
// tagName: colorCode
[tag: string]: string;
}
@ -12,69 +14,86 @@ 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="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"
alt="Card image"
width="400"
height="300"
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
style={{ aspectRatio: "400/300", objectFit: "cover" }}
/>
</div>
<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}
<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>
{/* 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} />
<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-xs md:text-sm">{props.location}</span>
</div>
<div className="mt-2 flex flex-wrap items-center text-muted-foreground group-hover:hidden">
{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>
{/* 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-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 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 text-xs md:text-base">
<strong>{props.totalInvestor.toLocaleString()}</strong> investors
</p>
<hr className="w-screen -ml-4 mb-2" />
<p className="text-xs md:text-base">
<strong>${props.minInvestment.toLocaleString()}</strong> min. investment
</p>
{/* 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>
</div>

101
src/components/navigationBar/nav.tsx
View File

@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
import { Separator } from "@/components/ui/separator";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import { useRouter } from 'next/navigation';
import { useRouter } from "next/navigation";
import {
NavigationMenu,
NavigationMenuContent,
@ -46,31 +46,27 @@ const landings = [
route: "/crm-landing",
},
];
const ListItem = React.forwardRef<
React.ElementRef<"a">,
React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
return (
<li>
<NavigationMenuLink asChild>
<a
ref={ref}
className={cn(
"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
className
)}
{...props}
>
<div className="text-sm font-medium leading-none">{title}</div>
<hr />
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
{children}
</p>
</a>
</NavigationMenuLink>
</li>
);
});
const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
({ className, title, children, ...props }, ref) => {
return (
<li>
<NavigationMenuLink asChild>
<a
ref={ref}
className={cn(
"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
className
)}
{...props}>
<div className="text-sm font-medium leading-none">{title}</div>
<hr />
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
</a>
</NavigationMenuLink>
</li>
);
}
);
ListItem.displayName = "ListItem";
const unAuthenticatedComponents = () => {
@ -104,11 +100,7 @@ const authenticatedComponents = () => {
<Wallet />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="icon"
className="overflow-hidden rounded-full"
>
<Button variant="outline" size="icon" className="overflow-hidden rounded-full">
<Avatar>
<AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
<AvatarFallback>1</AvatarFallback>
@ -144,7 +136,7 @@ export function NavigationBar() {
}, [loading]);
const handleKeyDown = async (k: React.KeyboardEvent<HTMLInputElement>) => {
if (k.key === 'Enter') {
if (k.key === "Enter") {
const query = (k.target as HTMLInputElement).value.trim();
if (query) {
router.push(`/find?query=${encodeURIComponent(query)}`);
@ -177,14 +169,13 @@ export function NavigationBar() {
];
return (
<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-screen-xl w-full mx-auto px-4">
<div className="flex items-center justify-between">
<div className="flex flex-col">
<Link
className="flex-none text-xl font-semibold dark:text-white focus:outline-none focus:opacity-80"
href="/"
aria-label="Brand"
>
aria-label="Brand">
<span className="inline-flex items-center gap-x-2 text-xl font-semibold dark:text-white">
<Image src="./logo.svg" alt="logo" width={50} height={50} />
B2DVentures
@ -196,17 +187,11 @@ export function NavigationBar() {
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger className="text-base">
Businesses
</NavigationMenuTrigger>
<NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] ">
{businessComponents.map((component) => (
<ListItem
key={component.title}
title={component.title}
href={component.href}
>
<ListItem key={component.title} title={component.title} href={component.href}>
{component.description}
</ListItem>
))}
@ -215,17 +200,11 @@ export function NavigationBar() {
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger className="text-base font-medium ">
Projects
</NavigationMenuTrigger>
<NavigationMenuTrigger className="text-base font-medium ">Projects</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] ">
{projectComponents.map((component) => (
<ListItem
key={component.title}
title={component.title}
href={component.href}
>
<ListItem key={component.title} title={component.title} href={component.href}>
{component.description}
</ListItem>
))}
@ -234,17 +213,11 @@ export function NavigationBar() {
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger className="text-base">
Blogs
</NavigationMenuTrigger>
<NavigationMenuTrigger className="text-base">Blogs</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] ">
{blogComponents.map((component) => (
<ListItem
key={component.title}
title={component.title}
href={component.href}
>
<ListItem key={component.title} title={component.title} href={component.href}>
{component.description}
</ListItem>
))}
@ -253,19 +226,13 @@ export function NavigationBar() {
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink
className="text-base font-medium"
href="docs"
>
<NavigationMenuLink className="text-base font-medium" href="docs">
Docs
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem className="pl-5 flex">
<Search
onClick={() => setSearchActive(!searchActive)}
className="cursor-pointer"
/>
<Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
{/* search bar's input */}
<input
type="text"

79
src/components/paymentMethod.tsx
View File

@ -2,26 +2,47 @@
import { Icons } from "./ui/icons";
import { Button } from "./ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "./ui/card";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "./ui/select";
export function CardsPaymentMethod() {
return (
<Card>
<Card className="lg:w-2/3 ">
<CardHeader>
<CardTitle>Payment Method</CardTitle>
<CardDescription>Add a new payment method to your account.</CardDescription>
<CardTitle className="text-xl md:text-2xl">Payment Method</CardTitle>
<CardDescription className="font-normal md:font-semibold">
Add a new payment method to your account.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6">
<RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
<div>
<RadioGroupItem value="card" id="card" className="peer sr-only" aria-label="Card" />
<RadioGroup defaultValue="card" className="flex w-full justify-center gap-1 md:gap-3">
<div className="w-[100px] lg:w-[130px]">
<RadioGroupItem
value="card"
id="card"
className="peer sr-only"
aria-label="Card"
/>
<Label
htmlFor="card"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary">
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
@ -30,7 +51,8 @@ export function CardsPaymentMethod() {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="mb-3 h-6 w-6">
className="mb-3 h-6 w-6"
>
<rect width="20" height="14" x="2" y="5" rx="2" />
<path d="M2 10h20" />
</svg>
@ -38,29 +60,48 @@ export function CardsPaymentMethod() {
</Label>
</div>
<div>
<RadioGroupItem value="paypal" id="paypal" className="peer sr-only" aria-label="Paypal" />
<div className="w-[100px] lg:w-[130px]">
<RadioGroupItem
value="paypal"
id="paypal"
className="peer sr-only"
aria-label="Paypal"
/>
<Label
htmlFor="paypal"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary">
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
>
<Icons.paypal className="mb-3 h-6 w-6" />
Paypal
</Label>
</div>
<div>
<RadioGroupItem value="apple" id="apple" className="peer sr-only" aria-label="Apple" />
<div className="w-[100px] lg:w-[130px]">
<RadioGroupItem
value="apple"
id="apple"
className="peer sr-only"
aria-label="Apple"
/>
<Label
htmlFor="apple"
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary">
className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
>
<Icons.apple className="mb-3 h-6 w-6" />
Apple
</Label>
</div>
</RadioGroup>
<div className="grid gap-2">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="First Last" />
<div className="grid grid-cols-2">
<div className="grid gap-2">
<Label htmlFor="firstname">First Name</Label>
<Input id="firstname" placeholder="Your firstname..." />
</div>
<div className="grid gap-2">
<Label htmlFor="lastname">Last Name</Label>
<Input id="lastname" placeholder="Your lastname..." />
</div>
</div>
<div className="grid gap-2">
<Label htmlFor="city">City</Label>

36
src/components/siteFooter.tsx Normal file
View File

@ -0,0 +1,36 @@
import Link from "next/link";
export function SiteFooter() {
return (
<footer className="pt-6">
<div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row bg-foreground text-background">
<div className="container max-w-screen-xl flex flex-col md:flex-row justify-between items-center py-6">
{/* Logo or Brand */}
<div className="flex items-center space-x-4">
<div className="text-xl font-bold">B2DVentures</div>
</div>
{/* Navigation Links */}
<div className="flex space-x-6">
<Link href="/" className="hover:underline">
Home
</Link>
<Link href="/about" className="hover:underline">
About Us
</Link>
<Link href="/services" className="hover:underline">
Services
</Link>
<Link href="/contact" className="hover:underline">
Contact
</Link>
</div>
{/* Copyright */}
<div className="text-sm text-center mt-4 md:mt-0 md:ml-6">
&copy; {new Date().getFullYear()} B2DVentures. All rights reserved.
</div>
</div>
</div>
</footer>
);
}

24
tests/test-2.spec.ts
View File

@ -6,25 +6,37 @@ test.use({
test('Test filter with tags', async ({ page }) => {
await page.goto('http://127.0.0.1:3000/');
// Start Investing
await page.getByRole('button', { name: 'Start Investing' }).click();
// Filter by AI tag
await page.locator('button').filter({ hasText: 'Tags' }).click();
await page.getByLabel('AI', { exact: true }).click();
await page.locator('span#tag', { hasText: 'AI' });
const aiTag = page.locator('span#tag', { hasText: 'AI' });
await expect(aiTag).toBeVisible();
// Filter by Technology tag
await page.locator('button').filter({ hasText: 'AI' }).click();
await page.getByLabel('Technology').click();
await page.locator('span#tag', { hasText: 'Technology' });
const techTag = page.locator('span#tag', { hasText: 'Technology' });
await expect(techTag).toBeVisible();
// Filter by Consumer Electronics tag
await page.locator('button').filter({ hasText: 'Technology' }).click();
await page.getByText('Consumer Electronics').click();
await page.locator('span#tag', { hasText: 'Consumer Electronics' });
await page.getByLabel('Consumer Electronics').click();
const consumerElectronicsTag = page.locator('span#tag', { hasText: 'Consumer Electronics' });
await expect(consumerElectronicsTag).toBeVisible();
// Filter by Software tag
await page.locator('button').filter({ hasText: 'Consumer Electronics' }).click();
await page.getByLabel('Software').click();
await page.locator('span#tag', { hasText: 'Software' });
const softwareTag = page.locator('span#tag', { hasText: 'Software' });
await expect(softwareTag).toBeVisible();
// Filter by Internet tag
await page.locator('button').filter({ hasText: 'Software' }).click();
await page.getByLabel('Internet').click();
await page.locator('span#tag', { hasText: 'Internet' });
const internetTag = page.locator('span#tag', { hasText: 'Internet' });
await expect(internetTag).toBeVisible();
});