diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index 85a375b..6aff49f 100644 --- a/src/app/deals/page.tsx +++ b/src/app/deals/page.tsx @@ -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 ( -
-
+
+

Investment Opportunities


Browse current investment opportunities on B2DVenture.

All companies are vetted & pass due diligence.

- {/* filters */} -
+ + {/* Filters */} +
+ -
- - -
-

Payment Information

- -
- - -
-

Terms and Services

- - - - Select - Term - Description - - - - {term_data.map((item, index) => ( - - - handleCheckboxChange(index)} /> - - {item.term} - {item.description} - - ))} - -
-
- - - - - - - - Are you absolutely sure? - This action cannot be undone. This will permanently! - - - - - - - - {error &&

{error}

} - - -
-
- ); -} diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index 7df681b..9f72caa 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -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 ( -
+
+

Invest on NVIDIA

+ +
- -
-
-
- {/* Name, star and share button packed */} -
-
- logo -
NVIDIA
-
-
-
- - - - - - -

Follow NIVIDIA

- - - -
-
- -
-
-
- {/* end of pack */} -

World's first non-metal sustainable battery

-
- {["Technology", "Gaming"].map((tag) => ( - - {tag} - - ))} -
-
- {/* image carousel */} -
- - - {Array.from({ length: 5 }).map((_, index) => ( - - - - ))} - {" "} - - - - - - {/* boiler plate for an actual pictures */} - - - - - - - - - - - - - - - - - -
-
-
-

- -

-

5% raised of $5M max goal

- -

- {" "} - -

-

Investors

-
- -

- hours -

-

Left to invest

- -
-
+
+

Investment Amount

+
-
- {/* menu */} - -
- {/* Card section */} -
- {/* Cards */} - - - - {tab} - - - + + +
+

Payment Information

+ +
+ + +
+

Terms and Services

+ + + + Select + Term + Description + + + + {term_data.map((item, index) => ( + + + handleCheckboxChange(index)} + /> + + {item.term} + {item.description} + + ))} + +
+
+ + + + + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently! + + + + + + + + + {error && ( +

{error}

+ )} + +
); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7d71037..b257865 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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) {
{children}
+ diff --git a/src/app/overview/page.tsx b/src/app/overview/page.tsx new file mode 100644 index 0000000..cd07319 --- /dev/null +++ b/src/app/overview/page.tsx @@ -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 ( +
+
+ +
+
+
+ {/* Name, star and share button packed */} +
+
+ logo +
NVIDIA
+
+
+
+ + + + + + +

Follow NIVIDIA

+ + + +
+
+ +
+
+
+ {/* end of pack */} +

World's first non-metal sustainable battery

+
+ {["Technology", "Gaming"].map((tag) => ( + + {tag} + + ))} +
+
+ {/* image carousel */} +
+ + + {Array.from({ length: 5 }).map((_, index) => ( + + + + ))} + {" "} + + + + + + {/* boiler plate for an actual pictures */} + + + + + + + + + + + + + + + + + +
+
+
+

+ +

+

5% raised of $5M max goal

+ +

+ {" "} + +

+

Investors

+
+ +

+ hours +

+

Left to invest

+ +
+
+
+
+ {/* menu */} + +
+ {/* Card section */} +
+ {/* Cards */} + + + + {tab} + + + +
+
+ ); +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 8650999..d0faf93 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -8,127 +8,132 @@ import { ExtendableCard } from "@/components/extendableCard"; export default function Home() { return (
-
-
- -

Explore the world of ventures

- -

Unlock opportunities and connect with a community of passionate

-

investors and innovators.

-

Together, we turn ideas into impact.

+
+ {/* Expanded div */} +
+
+ +

Explore the world of ventures

+ +

Unlock opportunities and connect with a community of passionate

+

investors and innovators.

+

Together, we turn ideas into impact.

+ + - +
+
+ Money +
+
+
+ +
+
+ + + 100M+ + Global investor community + + + + + 2,500+ + Ventures supported + + + + + $2.6B+ + Capital raised + + + + + Follow Us + + + + + + +
+ + + +
+ +

Hottest Deals

+

The deals attracting the most interest right now

 -
-
- Money -
-
- -
- - - 100M+ - Global investor community - - - - - 2,500+ - Ventures supported - - - - - $2.6B+ - Capital raised - - - - - Follow Us - - - - - - -
- - - -
- -

Hottest Deals

-

The deals attracting the most interest right now

- -
- +
+ + + - - - - -
-
- + + +
+
+ +
diff --git a/src/components/extendableCard.tsx b/src/components/extendableCard.tsx index f14665b..7af4377 100644 --- a/src/components/extendableCard.tsx +++ b/src/components/extendableCard.tsx @@ -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 ( -
-
- Card image -
-
-
- {props.name} +
+
+ {/* Image */} +
+ {props.imageUri ? ( + Card image + ) : ( + Card image + )}
+
+ {/* Info 0 overlaps Image */} +
+
+ {props.name} +
+

{props.description}

+
- {/* Default content (visible when not hovered) */} -
- - -
Joined {props.joinDate}
- -
-
- {props.location} -
-
- {props.tags.map((tag) => ( - - {tag} - - ))} -
- - {/* Hover content (appears when hovered) */} -
-

{props.description}

-
-
-
-
-

- ${props.totalRaised.toLocaleString()} committed and reserved -

-
-

- {props.totalInvestor.toLocaleString()} investors -

-
-

- ${props.minInvestment.toLocaleString()} min. investment -

+ {/* Info 1 */} +
+
+
+ + +
Joined {props.joinDate}
+
+
+ {props.location} +
+
+ {props.tags.map((tag) => ( + + {tag} + + ))} +
+
+
+ + {/* Info 2 */} +
+ {/* Info 2 (Visible on hover) */} +
+
+

+ ${props.totalRaised.toLocaleString()} committed and reserved +

+
+

+ {props.totalInvestor.toLocaleString()} investors +

+
+

+ ${props.minInvestment.toLocaleString()} min. investment +

diff --git a/src/components/navigationBar/nav.tsx b/src/components/navigationBar/nav.tsx index 9b6bed0..92f83d1 100644 --- a/src/components/navigationBar/nav.tsx +++ b/src/components/navigationBar/nav.tsx @@ -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 ( -
  • - - -
    {title}
    -
    -

    - {children} -

    -     -     -
    • - ); -}); +const ListItem = React.forwardRef, React.ComponentPropsWithoutRef<"a">>( + ({ className, title, children, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +
    +

    {children}

    +     +     +
    • + ); + } +); ListItem.displayName = "ListItem"; const unAuthenticatedComponents = () => { @@ -104,11 +100,7 @@ const authenticatedComponents = () => { -