mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-20 14:34:05 +01:00
change folder name and hierachy
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB
parent
b811e714bd
commit
dec781498e
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,190 +1,143 @@
|
|||||||
"use client";
|
"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 { 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 { Button } from "@/components/ui/button";
|
||||||
import { ShareIcon, StarIcon } from "lucide-react";
|
import { useState } from "react";
|
||||||
import { Toaster, toast } from "react-hot-toast";
|
import {
|
||||||
import useSession from "@/lib/supabase/useSession";
|
Dialog,
|
||||||
import { redirect } from "next/navigation";
|
DialogContent,
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
DialogDescription,
|
||||||
import Link from "next/link";
|
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() {
|
export default function Invest() {
|
||||||
const [progress, setProgress] = useState(0);
|
const [checkedTerms, setCheckedTerms] = useState(Array(term_data.length).fill(false));
|
||||||
const [tab, setTab] = useState("Pitch");
|
const [error, setError] = useState("");
|
||||||
const { session, loading } = useSession();
|
const router = useRouter(); // Initialize the router
|
||||||
const user = session?.user;
|
|
||||||
const [sessionLoaded, setSessionLoaded] = useState(false);
|
|
||||||
const [isFollow, setIsFollow] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
const handleCheckboxChange = (index: number) => {
|
||||||
// set sessionLoaded to true once session is confirmed
|
const updatedCheckedTerms = [...checkedTerms];
|
||||||
if (!loading) {
|
updatedCheckedTerms[index] = !updatedCheckedTerms[index];
|
||||||
setSessionLoaded(true);
|
setCheckedTerms(updatedCheckedTerms);
|
||||||
}
|
|
||||||
}, [loading]);
|
|
||||||
const handleClick = (item: string) => {
|
|
||||||
setTab(item);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleShare = () => {
|
const handleTermServiceClick = () => {
|
||||||
const currentUrl = window.location.href;
|
if (checkedTerms.some((checked) => !checked)) {
|
||||||
if (document.hasFocus()) {
|
setError("Please accept all terms before proceeding with the investment.");
|
||||||
navigator.clipboard.writeText(currentUrl).then(() => {
|
|
||||||
toast.success("URL copied to clipboard!");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const handleFollow = () => {
|
|
||||||
if (user) {
|
|
||||||
setIsFollow((prevState) => !prevState);
|
|
||||||
// save follow to database
|
|
||||||
} else {
|
} else {
|
||||||
redirect("/login");
|
setError("");
|
||||||
|
handleInvestmentSuccess();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
useEffect(() => {
|
|
||||||
// percent success
|
const handleInvestmentSuccess = () => {
|
||||||
const timer = setTimeout(() => setProgress(66), 500);
|
toast.success("You successfully invested!");
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, []);
|
setTimeout(() => {
|
||||||
|
router.push("/");
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="mx-40 my-10">
|
||||||
|
<h1 className="text-4xl font-bold">Invest on NVIDIA</h1>
|
||||||
|
<Separator className="my-4" />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Toaster position="top-right" reverseOrder={false} />
|
<div className="w-1/2 space-y-2">
|
||||||
</div>
|
<h2 className="text-2xl">Investment Amount</h2>
|
||||||
<div className="w-[90%] h-[450px]-500 md:m-auto mt-12 md:mt-12 pl-14 md:pl-24">
|
<Input type="number" placeholder="min $500" />
|
||||||
<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>
|
</div>
|
||||||
</div>
|
<Separator className="my-4" />
|
||||||
{/* menu */}
|
|
||||||
<div className="flex w-[90%] mt-24 m-auto ml-10 md:ml-32">
|
<div className="w-1/2 space-y-2">
|
||||||
<ul className="list-none flex gap-10 text-lg md:text-xl ">
|
<h2 className="text-2xl">Payment Information</h2>
|
||||||
<li>
|
<CardsPaymentMethod />
|
||||||
<a onClick={() => handleClick("Pitch")} className={tab === "Pitch" ? "text-blue-600" : ""}>
|
</div>
|
||||||
Pitch
|
<Separator className="my-4" />
|
||||||
</a>
|
|
||||||
</li>
|
<div className="w-2/3 space-y-2">
|
||||||
<li>
|
<h2 className="text-2xl">Terms and Services</h2>
|
||||||
<a onClick={() => handleClick("General Data")} className={tab === "General Data" ? "text-blue-600" : ""}>
|
<Table>
|
||||||
General Data
|
<TableHeader>
|
||||||
</a>
|
<TableRow>
|
||||||
</li>
|
<TableHead>Select</TableHead>
|
||||||
<li>
|
<TableHead>Term</TableHead>
|
||||||
<a onClick={() => handleClick("Updates")} className={tab === "Updates" ? "text-blue-600" : ""}>
|
<TableHead>Description</TableHead>
|
||||||
Updates
|
</TableRow>
|
||||||
</a>
|
</TableHeader>
|
||||||
</li>
|
<TableBody>
|
||||||
</ul>
|
{term_data.map((item, index) => (
|
||||||
</div>
|
<TableRow key={index}>
|
||||||
<hr className="mt-2" />
|
<TableCell>
|
||||||
{/* Card section */}
|
<input type="checkbox" checked={checkedTerms[index]} onChange={() => handleCheckboxChange(index)} />
|
||||||
<div className="flex w-full mt-10">
|
</TableCell>
|
||||||
{/* Cards */}
|
<TableCell>{item.term}</TableCell>
|
||||||
<Card className="m-auto border-slate-800 w-3/4 p-6">
|
<TableCell>{item.description}</TableCell>
|
||||||
<CardContent>
|
</TableRow>
|
||||||
<Card>
|
))}
|
||||||
<CardContent>{tab}</CardContent>
|
</TableBody>
|
||||||
</Card>
|
</Table>
|
||||||
</CardContent>
|
</div>
|
||||||
</Card>
|
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
191
src/app/overview/page.tsx
Normal file
191
src/app/overview/page.tsx
Normal 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/1">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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -78,7 +78,7 @@ export default function Home() {
|
|||||||
<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>
|
||||||
</span>
|
</span>
|
||||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
<Link href={"/invest"}>
|
<Link href={"/overview"}>
|
||||||
<ExtendableCard
|
<ExtendableCard
|
||||||
name={"NVDA"}
|
name={"NVDA"}
|
||||||
description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
|
description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
|
||||||
|
|||||||
@ -6,25 +6,37 @@ test.use({
|
|||||||
|
|
||||||
test('Test filter with tags', async ({ page }) => {
|
test('Test filter with tags', async ({ page }) => {
|
||||||
await page.goto('http://127.0.0.1:3000/');
|
await page.goto('http://127.0.0.1:3000/');
|
||||||
|
|
||||||
|
// Start Investing
|
||||||
await page.getByRole('button', { name: 'Start Investing' }).click();
|
await page.getByRole('button', { name: 'Start Investing' }).click();
|
||||||
|
|
||||||
|
// Filter by AI tag
|
||||||
await page.locator('button').filter({ hasText: 'Tags' }).click();
|
await page.locator('button').filter({ hasText: 'Tags' }).click();
|
||||||
await page.getByLabel('AI', { exact: true }).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.locator('button').filter({ hasText: 'AI' }).click();
|
||||||
await page.getByLabel('Technology').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.locator('button').filter({ hasText: 'Technology' }).click();
|
||||||
await page.getByText('Consumer Electronics').click();
|
await page.getByLabel('Consumer Electronics').click();
|
||||||
await page.locator('span#tag', { hasText: 'Consumer Electronics' });
|
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.locator('button').filter({ hasText: 'Consumer Electronics' }).click();
|
||||||
await page.getByLabel('Software').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.locator('button').filter({ hasText: 'Software' }).click();
|
||||||
await page.getByLabel('Internet').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();
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue
Block a user