mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-18 13:34:06 +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,191 +1,144 @@
|
||||
"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-40 my-10">
|
||||
<h1 className="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-2xl">Investment Amount</h2>
|
||||
<Input type="number" placeholder="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-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>
|
||||
);
|
||||
}
|
||||
}
|
||||
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>
|
||||
</span>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link href={"/invest"}>
|
||||
<Link href={"/overview"}>
|
||||
<ExtendableCard
|
||||
name={"NVDA"}
|
||||
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 }) => {
|
||||
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();
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user