mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-18 21:44:06 +01:00
Refactor UI components, update links in Home page
This commit is contained in:
Pattadon
parent
b0a0903fdb
commit
6342d3293a
32
package-lock.json
generated
32
package-lock.json
generated
@ -18,6 +18,7 @@
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@supabase/ssr": "^0.4.1",
|
||||
"@supabase/supabase-js": "^2.45.2",
|
||||
"b2d-ventures": "file:",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.2.0",
|
||||
@ -27,6 +28,7 @@
|
||||
"react": "^18",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^18",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
@ -1761,6 +1763,10 @@
|
||||
"deep-equal": "^2.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/b2d-ventures": {
|
||||
"resolved": "",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@ -2016,8 +2022,7 @@
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"devOptional": true
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
"version": "1.0.8",
|
||||
@ -3204,6 +3209,14 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/goober": {
|
||||
"version": "2.1.14",
|
||||
"resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
|
||||
"integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
|
||||
"peerDependencies": {
|
||||
"csstype": "^3.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
|
||||
@ -4677,6 +4690,21 @@
|
||||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hot-toast": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
|
||||
"integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
|
||||
"dependencies": {
|
||||
"goober": "^2.1.10"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16",
|
||||
"react-dom": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@supabase/ssr": "^0.4.1",
|
||||
"@supabase/supabase-js": "^2.45.2",
|
||||
"b2d-ventures": "file:",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.2.0",
|
||||
@ -28,6 +29,7 @@
|
||||
"react": "^18",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^18",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
|
||||
@ -2,19 +2,55 @@
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
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 { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
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] = React.useState(false);
|
||||
const handleClick = (item: string) => {
|
||||
setTab(item);
|
||||
};
|
||||
const currentUrl = window.location.href;
|
||||
const handleShare = () => {
|
||||
if (document.hasFocus()) {
|
||||
navigator.clipboard.writeText(currentUrl).then(() => {
|
||||
toast.success("URL copied to clipboard!");
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleFollow = () =>{
|
||||
{sessionLoaded ? (
|
||||
user ? (
|
||||
// if login, save follow
|
||||
null
|
||||
) : (
|
||||
redirect('/login')
|
||||
)
|
||||
) : (
|
||||
<div>
|
||||
<Skeleton className="rounded-lg h-full w-[160px]" />
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
useEffect(() => {
|
||||
// percent success
|
||||
const timer = setTimeout(() => setProgress(66), 500);
|
||||
@ -22,16 +58,33 @@ export default function Invest() {
|
||||
}, []);
|
||||
return (
|
||||
<div>
|
||||
<div className="w-[90%] h-[500px]-500 m-auto mt-12 pl-24">
|
||||
<div>
|
||||
<Toaster position="top-right" reverseOrder={false} />
|
||||
</div>
|
||||
<div className="w-[90%] h-[45w0px]-500 m-auto mt-12 pl-24">
|
||||
<div>
|
||||
<div className="flex">
|
||||
<div className="flex ">
|
||||
<Image src="./logo.svg" alt="logo" width={50} height={50} />
|
||||
<h1 className="mt-3 font-bold text-3xl">NVIDIA</h1>
|
||||
<div className="grid grid-cols-2 gap-5 ml-[850px] ">
|
||||
<div className="mt-2 cursor-pointer bg-red-500" onClick={handleFollow}>
|
||||
<StarIcon />
|
||||
</div>
|
||||
<div
|
||||
onClick={handleShare}
|
||||
className=" cursor-pointer mt-2 bg-green-500"
|
||||
>
|
||||
<ShareIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2"> Worlds first non-metal sustainable battery</p>
|
||||
<p className="mt-2"> 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">
|
||||
<span
|
||||
key={tag}
|
||||
className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
@ -39,18 +92,10 @@ export default function Invest() {
|
||||
<div className="flex">
|
||||
{/* image carousel */}
|
||||
<Carousel className="w-[55%] mt-4">
|
||||
<CarouselContent>
|
||||
<CarouselContent className="h-[450px]">
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<Image
|
||||
src="/boiler1.jpg"
|
||||
alt=""
|
||||
className="rounded-lg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
/>
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>{" "}
|
||||
@ -60,7 +105,13 @@ export default function Invest() {
|
||||
<div className=" w-1/3 mt-4 h-[400px] ml-[8%] ">
|
||||
<div className="pl-5">
|
||||
<h1 className="font-semibold text-4xl mt-8">
|
||||
<CountUp start={0} end={100000} duration={2} prefix="$" className="" />
|
||||
<CountUp
|
||||
start={0}
|
||||
end={100000}
|
||||
duration={2}
|
||||
prefix="$"
|
||||
className=""
|
||||
/>
|
||||
</h1>
|
||||
<p className=""> 5% raised of $5M max goal</p>
|
||||
<Progress value={progress} className="w-[60%] h-3 mt-3" />
|
||||
@ -76,67 +127,27 @@ export default function Invest() {
|
||||
<CountUp start={0} end={5800} duration={2} className="" /> hours
|
||||
</h1>
|
||||
<p className="ml-5"> Left to invest</p>
|
||||
<Button className="mt-10 ml-[25%]">Invest</Button>
|
||||
<Button className="mt-10 ml-[25%]">Invest in NVIDIA</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Carousel className="w-1/2">
|
||||
<Carousel className="w-1/2 ml-10">
|
||||
<CarouselContent>
|
||||
{/* boiler plate for an actual pictures */}
|
||||
<CarouselItem className="md:basis-1/2 lg:basis-1/3">
|
||||
<Image
|
||||
src="/boiler1.jpg"
|
||||
alt=""
|
||||
className="rounded-lg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
/>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="md:basis-1/2 lg:basis-1/3">
|
||||
<Image
|
||||
src="/boiler1.jpg"
|
||||
alt=""
|
||||
className="rounded-lg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
/>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="md:basis-1/2 lg:basis-1/3">
|
||||
<Image
|
||||
src="/boiler1.jpg"
|
||||
alt=""
|
||||
className="rounded-lg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
/>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="md:basis-1/2 lg:basis-1/3">
|
||||
<Image
|
||||
src="/boiler1.jpg"
|
||||
alt=""
|
||||
className="rounded-lg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
/>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
<CarouselItem className="md:basis-1/2 lg:basis-1/3">
|
||||
<Image
|
||||
src="/boiler1.jpg"
|
||||
alt=""
|
||||
className="rounded-lg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
/>
|
||||
<CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<img src="./boiler1.jpg" alt="" className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
@ -145,17 +156,26 @@ export default function Invest() {
|
||||
<div className="flex w-[90%] mt-24 m-auto ml-32">
|
||||
<ul className="list-none flex gap-10 text-xl ">
|
||||
<li>
|
||||
<a onClick={() => handleClick("Pitch")} className={tab === "Pitch" ? "text-blue-600" : ""}>
|
||||
<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" : ""}>
|
||||
<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" : ""}>
|
||||
<a
|
||||
onClick={() => handleClick("Updates")}
|
||||
className={tab === "Updates" ? "text-blue-600" : ""}
|
||||
>
|
||||
Updates
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user