BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #8 from Invest-Bot/dev

Browse source 
Merge: Toffee Branding Temp
This commit is contained in:
zach 2022-12-31 02:24:37 -08:00 committed by GitHub
commit f503591c44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 89 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
components/common/NavBar.tsx
View file

@ -13,7 +13,7 @@ function NavBar({ options }: NavProps) {
const [isActive, setActive] = useState(false); const [isActive, setActive] = useState(false);
return ( return (
<m.div <m.div
className="pointer-events-none fixed inline-grid w-screen grid-cols-2 bg-zinc-900 font-plusJakarta text-xl sm:text-2xl lg:grid-cols-3" className="pointer-events-none fixed z-50 inline-grid w-screen grid-cols-2 bg-zinc-900 bg-opacity-90 font-plusJakarta text-2xl lg:grid-cols-3"
variants={containerVariants} variants={containerVariants}
initial="initial" initial="initial"
animate="animate" animate="animate"
@ -24,13 +24,13 @@ function NavBar({ options }: NavProps) {
> >
<m.div className="ml-4 mr-4 sm:m-0" variants={logoContainerVariants}> <m.div className="ml-4 mr-4 sm:m-0" variants={logoContainerVariants}>
<Link <Link
key="InvestBotImg" key="toffeeImg"
href="/" href="/"
className="pointer-events-auto flex flex-row items-center justify-center" className="pointer-events-auto flex flex-row items-center justify-center"
> >
<Image <Image
src="/img/logo.webp" src="/img/logo.webp"
alt="InvestBot Logo" alt="toffee logo"
width={64} width={64}
height={64} height={64}
className="mr-8 rounded-b-full" className="mr-8 rounded-b-full"
@ -39,26 +39,26 @@ function NavBar({ options }: NavProps) {
</m.div> </m.div>
<div className="pointer-events-auto flex select-none flex-col items-start justify-center pr-2 font-plusJakarta text-white sm:pr-5"> <div className="pointer-events-auto flex select-none flex-col items-start justify-center pr-2 font-plusJakarta text-white sm:pr-5">
<Link <Link
key="InvestBot" key="toffee"
href="/" href="/"
className="hidden flex-row items-center justify-center sm:flex" className="hidden flex-row items-center justify-center sm:flex"
> >
InvestBot toffee
</Link> </Link>
<h1 <h1
className="flex cursor-pointer flex-row items-center justify-center sm:hidden" className="mr-3 flex cursor-pointer flex-row items-center justify-center sm:mr-auto sm:hidden"
onClick={() => { onClick={() => {
setActive(!isActive); setActive(!isActive);
}} }}
> >
InvestBot toffee
</h1> </h1>
<p className="hidden text-xs text-gray-400 sm:block"> <p className="hidden text-xs text-gray-400 sm:block">
Serving anny&apos;s community est. 2022 Serving anny&apos;s community est. 2022
</p> </p>
</div> </div>
<m.svg <m.svg
className="pointer-events-auto cursor-pointer lg:hidden" className="pointer-events-auto mt-2 cursor-pointer lg:hidden"
origin="center" origin="center"
width="25" width="25"
height="26" height="26"
@ -98,7 +98,7 @@ function NavBar({ options }: NavProps) {
{isActive && ( {isActive && (
<m.div <m.div
// hiddden by default, when active is true, animate in // hiddden by default, when active is true, animate in
className="pointer-events-auto z-10 flex w-screen flex-col items-center overflow-hidden bg-zinc-800 bg-opacity-70 pt-5 backdrop-blur lg:hidden" className="pointer-events-auto z-10 flex w-screen flex-col items-center overflow-hidden bg-zinc-800 bg-opacity-70 pt-5 lg:hidden"
// have it take up the entire screen, animate in by expanding from the bottom of the nav bar to the bottom of the screen // have it take up the entire screen, animate in by expanding from the bottom of the nav bar to the bottom of the screen
variants={mobileContainerVariants} variants={mobileContainerVariants}
initial="initial" initial="initial"
@ -159,11 +159,11 @@ const itemVariants: Variants = {
const logoContainerVariants: Variants = { const logoContainerVariants: Variants = {
initial: { initial: {
scale: 1, scale: 1,
rotate: 0, rotate: -90,
}, },
animate: { animate: {
scale: 1, scale: 1,
rotate: 360, rotate: 0,
transition: { transition: {
duration: 4, duration: 4,
type: "spring", type: "spring",

10
layouts/DashLayout.tsx
View file

@ -19,25 +19,25 @@ function DashLayout(props: DashLayoutProps) {
const router = useRouter(); const router = useRouter();
return ( return (
<m.div <m.div
className="bg-gradient-to-t from-zinc-900 to-[#202737b6]" className="bg-gradient-to-t from-zinc-900 to-[#3015457b]"
initial="initial" initial="initial"
animate="animate" animate="animate"
exit="exit" exit="exit"
variants={containerVariants} variants={containerVariants}
> >
<Head> <Head>
<title>Dashboard - InvestBot</title> <title>Dashboard - toffee</title>
<meta name="description" content="Dashboard statistics for InvestBot" /> <meta name="description" content="Dashboard statistics for toffee" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#c084fc" /> <meta name="theme-color" content="#c084fc" />
<meta property="og:title" content="InvestBot" /> <meta property="og:title" content="toffee" />
<meta <meta
property="og:description" property="og:description"
content="Serving anny's community est. 2022" content="Serving anny's community est. 2022"
/> />
<meta property="og:image" content="/img/logo.webp" /> <meta property="og:image" content="/img/logo.webp" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:site_name" content="InvestBot" /> <meta property="og:site_name" content="toffee" />
</Head> </Head>
<div className="flex h-screen w-screen flex-col overflow-hidden lg:flex-row"> <div className="flex h-screen w-screen flex-col overflow-hidden lg:flex-row">

6
layouts/HomeLayout.tsx
View file

@ -30,18 +30,18 @@ function HomeLayout(props: HomeLayoutProps) {
variants={containerVariants} variants={containerVariants}
> >
<Head> <Head>
<title>InvestBot</title> <title>toffee</title>
<meta name="description" content="Serving anny's community est. 2022" /> <meta name="description" content="Serving anny's community est. 2022" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#c084fc" /> <meta name="theme-color" content="#c084fc" />
<meta property="og:title" content="InvestBot" /> <meta property="og:title" content="toffee" />
<meta <meta
property="og:description" property="og:description"
content="Serving anny's community est. 2022" content="Serving anny's community est. 2022"
/> />
<meta property="og:image" content="/img/logo.webp" /> <meta property="og:image" content="/img/logo.webp" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:site_name" content="InvestBot" /> <meta property="og:site_name" content="toffee" />
</Head> </Head>
<LazyMotion features={domAnimation}> <LazyMotion features={domAnimation}>

2
pages/about.tsx
View file

@ -7,7 +7,7 @@ function About() {
return ( return (
<> <>
<Head> <Head>
<title>About - InvestBot</title> <title>About - toffee</title>
</Head> </Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2"> <div className="flex min-h-screen flex-col items-center justify-center py-2">
<p>about</p> <p>about</p>

2
pages/contact.tsx
View file

@ -7,7 +7,7 @@ function About() {
return ( return (
<> <>
<Head> <Head>
<title>Contact - InvestBot</title> <title>Contact - toffee</title>
</Head> </Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2"> <div className="flex min-h-screen flex-col items-center justify-center py-2">
<p>contact</p> <p>contact</p>

2
pages/dashboard/index.tsx
View file

@ -8,7 +8,7 @@ function Dashboard() {
return ( return (
<> <>
<Head> <Head>
<title>Dashboard - InvestBot</title> <title>Dashboard - toffee</title>
</Head> </Head>
<m.div <m.div
className="inline-grid w-full grid-cols-1 pt-2 pl-2 lg:h-full lg:grid-cols-5 lg:pl-0 lg:pr-2" className="inline-grid w-full grid-cols-1 pt-2 pl-2 lg:h-full lg:grid-cols-5 lg:pl-0 lg:pr-2"

9
pages/dashboard/ranking.tsx
View file

@ -75,7 +75,7 @@ function Ranking() {
return ( return (
<> <>
<Head> <Head>
<title>Ranking - InvestBot</title> <title>Ranking - toffee</title>
</Head> </Head>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">
<div className="ml-3 flex w-full flex-col items-center justify-start font-robotoMono font-semibold lg:ml-0"> <div className="ml-3 flex w-full flex-col items-center justify-start font-robotoMono font-semibold lg:ml-0">
@ -146,10 +146,13 @@ function Ranking() {
{ {
// if data is not loaded, loading div // if data is not loaded, loading div
!dataLoaded ? ( !dataLoaded ? (
<div className="mt-5 flex h-[100vh] w-full flex-col items-center justify-start"> <m.div
className="mt-5 flex h-[100vh] w-full flex-col items-center justify-start"
variants={rankingDataContainerVariants}
>
<Loading /> <Loading />
<h1 className="my-5">This is fake delay :)</h1> <h1 className="my-5">This is fake delay :)</h1>
</div> </m.div>
) : ( ) : (
<m.div <m.div
initial="initial" initial="initial"

72
pages/index.tsx
View file

@ -54,7 +54,7 @@ const Home: NextPageWithLayout = () => {
let slideShow = ( let slideShow = (
<Image <Image
src="/img/logo.webp" src="/img/logo.webp"
alt="InvestBot Logo" alt="toffee Logo"
width={128} width={128}
height={128} height={128}
className="ml-4 mr-6" className="ml-4 mr-6"
@ -76,34 +76,52 @@ const Home: NextPageWithLayout = () => {
return ( return (
<> <>
<Head> <Head>
<title>Home - InvestBot</title> <title>Home - toffee</title>
</Head> </Head>
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="flex h-full w-full flex-col items-center justify-center">
<div className="inline-grid grid-cols-1 gap-10 text-white md:grid-cols-3"> <div className="inline-grid grid-cols-1 gap-10 text-white md:grid-cols-3">
<m.div <m.div
className="flex flex-col font-plusJakarta text-7xl font-semibold sm:text-8xl md:col-span-2" className="flex flex-col from-purple-400 to-pink-600 font-plusJakarta text-7xl font-semibold sm:text-8xl md:col-span-2"
variants={sloganContainerVariants} variants={sloganContainerVariants}
initial="initial" initial="initial"
animate="animate" animate="animate"
> >
<m.div <m.div
className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text p-3 text-transparent" className="flex flex-row items-center"
variants={sloganHeaderVariants} variants={sloganHeaderVariants}
> >
<h1>Buy high</h1> <h1 className="bg-gradient-to-b bg-clip-text text-transparent">
t
</h1>
<h1>ax-free</h1>
</m.div> </m.div>
<m.div <m.div
className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text p-3 text-transparent" className="flex flex-row items-center"
variants={sloganHeaderVariants} variants={sloganHeaderVariants}
> >
<h1>Sell low</h1> <h1 className="bg-gradient-to-tl bg-clip-text text-transparent">
off
</h1>
<h1>line</h1>
</m.div> </m.div>
<m.h2 <m.div
className="pt-2 text-sm font-medium text-gray-200" className="flex flex-row items-center"
variants={sloganSecondaryVariants} variants={sloganHeaderVariants}
> >
...or something like that <h1 className="bg-gradient-to-l bg-clip-text text-transparent">
</m.h2> e
</h1>
<h1>mote</h1>
</m.div>
<m.div
className="flex flex-row items-center"
variants={sloganHeaderVariants}
>
<h1 className="bg-gradient-to-bl bg-clip-text text-transparent">
e
</h1>
<h1>xchange</h1>
</m.div>
</m.div> </m.div>
<m.div <m.div
className="flex items-center justify-center" className="flex items-center justify-center"
@ -112,6 +130,17 @@ const Home: NextPageWithLayout = () => {
animate="animate" animate="animate"
> >
{slideShow} {slideShow}
<m.div
className="fixed"
variants={sloganSecondaryContainerVariants}
>
<m.h2
className="font-minecraft text-sm font-normal text-yellow-300 drop-shadow-[0_2px_2px_rgba(0,0,0,0.99)]"
variants={sloganSecondaryVariants}
>
currently in development!
</m.h2>
</m.div>
</m.div> </m.div>
</div> </div>
</div> </div>
@ -133,8 +162,8 @@ const sloganContainerVariants = {
type: "spring", type: "spring",
bounce: 0.5, bounce: 0.5,
stiffness: 150, stiffness: 150,
delayChildren: 0.5, delayChildren: 1.0,
staggerChildren: 1.0, staggerChildren: 0.45,
}, },
}, },
}; };
@ -148,14 +177,27 @@ const sloganHeaderVariants = {
}, },
}; };
const sloganSecondaryVariants = { const sloganSecondaryContainerVariants = {
initial: { initial: {
opacity: 0, opacity: 0,
rotate: 0,
}, },
animate: { animate: {
opacity: 1, opacity: 1,
rotate: -15,
transition: { transition: {
delay: 3.5, delay: 3.5,
duration: 1.0,
},
},
};
const sloganSecondaryVariants = {
animate: {
fontSize: ["1.5rem", "1.575rem", "1.5rem"],
transition: {
duration: 0.5,
repeat: Infinity,
}, },
}, },
}; };

4
pages/team.tsx
View file

@ -9,7 +9,7 @@ function Team() {
return ( return (
<> <>
<Head> <Head>
<title>Team - InvestBot</title> <title>Team - toffee</title>
</Head> </Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2"> <div className="flex min-h-screen flex-col items-center justify-center py-2">
<m.div <m.div
@ -87,7 +87,7 @@ const containerVariants: Variants = {
transition: { transition: {
duration: 2, duration: 2,
delayChildren: 0.5, delayChildren: 0.5,
staggerChildren: 0.25, staggerChildren: 0.2,
type: "spring", type: "spring",
bounce: 0.5, bounce: 0.5,
stiffness: 80, stiffness: 80,

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/img/logo.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 68 KiB

1
styles/globals.css
View file

@ -1,6 +1,7 @@
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700&display=swap"); @import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:300,400,500,700&display=swap"); @import url("https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:300,400,500,700&display=swap");
@import url("https://fonts.cdnfonts.com/css/minecraft-3");
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

1
tailwind.config.js
View file

@ -11,6 +11,7 @@ module.exports = {
roboto: ["Roboto", "sans-serif"], roboto: ["Roboto", "sans-serif"],
plusJakarta: ["Plus Jakarta Sans", "sans-serif"], plusJakarta: ["Plus Jakarta Sans", "sans-serif"],
robotoMono: ["Roboto Mono", "monospace"], robotoMono: ["Roboto Mono", "monospace"],
minecraft: ["Minecraft", "Roboto", "sans-serif"],
}, },
}, },
}, },