diff --git a/components/common/NavBar.tsx b/components/common/NavBar.tsx index 01a3d52..89f6f4f 100644 --- a/components/common/NavBar.tsx +++ b/components/common/NavBar.tsx @@ -40,7 +40,7 @@ function NavBar({ options }: NavProps) { const [isActive, setActive] = useState(false); return ( <m.div - className="pointer-events-none fixed inline-grid w-screen grid-cols-2 font-plusJakarta text-2xl lg:grid-cols-3" + className="pointer-events-none fixed inline-grid w-screen grid-cols-2 bg-zinc-900 font-plusJakarta text-2xl lg:grid-cols-3" initial="initial" animate="animate" variants={containerAnimation} diff --git a/layouts/NavTemplates.tsx b/layouts/NavTemplates.tsx index 63e888c..612c26c 100644 --- a/layouts/NavTemplates.tsx +++ b/layouts/NavTemplates.tsx @@ -42,9 +42,9 @@ interface NavTemplate { const homeMain: NavTemplate[] = [ { content: <DefaultNavOption label="Home" href="/" /> }, - { content: <DefaultNavOption label="About" href="/about" /> }, + // { content: <DefaultNavOption label="About" href="/about" /> }, { content: <DefaultNavOption label="Team" href="/team" /> }, - { content: <DefaultNavOption label="Contact" href="/contact" /> }, + // { content: <DefaultNavOption label="Contact" href="/contact" /> }, ]; export { type NavTemplate, homeMain }; diff --git a/pages/team.tsx b/pages/team.tsx index 686ad63..d65c784 100644 --- a/pages/team.tsx +++ b/pages/team.tsx @@ -1,4 +1,6 @@ +import { m, Variants } from "framer-motion"; import Head from "next/head"; +import Image from "next/image"; import { ReactElement } from "react"; import HomeLayout from "../layouts/HomeLayout"; import { homeMain } from "../layouts/NavTemplates"; @@ -10,12 +12,124 @@ function Team() { <title>Team - InvestBot</title> </Head> <div className="flex min-h-screen flex-col items-center justify-center py-2"> - <p>Team</p> + <m.div + className="grid w-[90vw] grid-cols-1 py-2 sm:grid-cols-2 md:grid-cols-4 lg:w-[75vw]" + initial="initial" + animate="animate" + variants={containerVariants} + transition={{ + delay: 0.5, + duration: 1.0, + staggerChildren: 0.25, + type: "spring", + bounce: 0.5, + stiffness: 80, + }} + > + <m.div + className="col-span-1 flex w-full items-center justify-center bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text pt-[200px] pb-[100px] font-plusJakarta text-transparent sm:col-span-2 md:col-span-4" + initial={{ opacity: 0, y: 100 }} + animate={{ opacity: 1, y: 0 }} + transition={{ + delay: 0.5, + duration: 1.0, + type: "spring", + bounce: 0.5, + stiffness: 80, + }} + > + <m.h1 className="text-6xl">people</m.h1> + </m.div> + {/* Person 1 */} + <PersonLeftCard name="ModulatingForce" img="/img/team/force.webp" /> + <PersonRightCard>TBW</PersonRightCard> + + {/* Person 2 */} + <PersonLeftCard name="Second Sock" img="/img/team/sock.webp" /> + <PersonRightCard>TBW</PersonRightCard> + {/* Person 3 */} + <PersonLeftCard name="Ente" img="/img/team/ente.webp" /> + <PersonRightCard>TBW</PersonRightCard> + {/* Person 4 */} + <PersonLeftCard name="notohh" img="/img/team/oh.webp" /> + <PersonRightCard>TBW</PersonRightCard> + {/* Person 5 */} + <PersonLeftCard name="3zachm" img="/img/team/zach.webp" /> + <PersonRightCard>TBW</PersonRightCard> + </m.div> </div> </> ); } +const PersonLeftCard = (props: { name: string; img: string }) => { + return ( + <m.div + className="mb-5 flex flex-col items-center justify-center" + variants={leftCardVariants} + > + <Image + className="rounded-full p-3" + src={props.img} + width={200} + height={200} + alt={"Picture of " + props.name} + /> + <m.h1 className="font-plusJakarta text-2xl font-semibold"> + {props.name} + </m.h1> + </m.div> + ); +}; + +// takes in children +const PersonRightCard = (props: { children: React.ReactNode }) => { + return ( + <m.div + variants={rightCardVariants} + className="mb-5 flex flex-col items-center justify-center" + > + {props.children} + </m.div> + ); +}; + +const containerVariants: Variants = { + initial: { + opacity: 1, + }, + animate: { + opacity: 1, + transition: { + duration: 2, + delayChildren: 0.5, + staggerChildren: 0.25, + }, + }, +}; + +const leftCardVariants: Variants = { + initial: { + opacity: 0, + x: 100, + }, + animate: { + opacity: 1, + x: 0, + }, +}; + +const rightCardVariants: Variants = { + initial: { + opacity: 0, + x: -100, + }, + animate: { + opacity: 1, + x: 0, + }, +}; + Team.getLayout = function getLayout(page: ReactElement) { return <HomeLayout navOptions={homeMain}>{page}</HomeLayout>; }; diff --git a/public/img/team/ente.webp b/public/img/team/ente.webp new file mode 100644 index 0000000..b61610a Binary files /dev/null and b/public/img/team/ente.webp differ diff --git a/public/img/team/force.webp b/public/img/team/force.webp new file mode 100644 index 0000000..72495ad Binary files /dev/null and b/public/img/team/force.webp differ diff --git a/public/img/team/oh.webp b/public/img/team/oh.webp new file mode 100644 index 0000000..4f944ee Binary files /dev/null and b/public/img/team/oh.webp differ diff --git a/public/img/team/sock.webp b/public/img/team/sock.webp new file mode 100644 index 0000000..1594ac2 Binary files /dev/null and b/public/img/team/sock.webp differ diff --git a/public/img/team/zach.webp b/public/img/team/zach.webp new file mode 100644 index 0000000..4998b09 Binary files /dev/null and b/public/img/team/zach.webp differ