diff --git a/components/common/NavBar.tsx b/components/common/NavBar.tsx
index 04afd73..65ee3a1 100644
--- a/components/common/NavBar.tsx
+++ b/components/common/NavBar.tsx
@@ -13,7 +13,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 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}
initial="initial"
animate="animate"
@@ -24,13 +24,13 @@ function NavBar({ options }: NavProps) {
>
<m.div className="ml-4 mr-4 sm:m-0" variants={logoContainerVariants}>
<Link
- key="InvestBotImg"
+ key="toffeeImg"
href="/"
className="pointer-events-auto flex flex-row items-center justify-center"
>
<Image
src="/img/logo.webp"
- alt="InvestBot Logo"
+ alt="toffee logo"
width={64}
height={64}
className="mr-8 rounded-b-full"
@@ -39,26 +39,26 @@ function NavBar({ options }: NavProps) {
</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">
<Link
- key="InvestBot"
+ key="toffee"
href="/"
className="hidden flex-row items-center justify-center sm:flex"
>
- InvestBot
+ toffee
</Link>
<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={() => {
setActive(!isActive);
}}
>
- InvestBot
+ toffee
</h1>
<p className="hidden text-xs text-gray-400 sm:block">
Serving anny's community est. 2022
</p>
</div>
<m.svg
- className="pointer-events-auto cursor-pointer lg:hidden"
+ className="pointer-events-auto mt-2 cursor-pointer lg:hidden"
origin="center"
width="25"
height="26"
@@ -98,7 +98,7 @@ function NavBar({ options }: NavProps) {
{isActive && (
<m.div
// 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
variants={mobileContainerVariants}
initial="initial"
@@ -159,11 +159,11 @@ const itemVariants: Variants = {
const logoContainerVariants: Variants = {
initial: {
scale: 1,
- rotate: 0,
+ rotate: -90,
},
animate: {
scale: 1,
- rotate: 360,
+ rotate: 0,
transition: {
duration: 4,
type: "spring",
diff --git a/layouts/DashLayout.tsx b/layouts/DashLayout.tsx
index 3d6536f..9235338 100644
--- a/layouts/DashLayout.tsx
+++ b/layouts/DashLayout.tsx
@@ -19,25 +19,25 @@ function DashLayout(props: DashLayoutProps) {
const router = useRouter();
return (
<m.div
- className="bg-gradient-to-t from-zinc-900 to-[#202737b6]"
+ className="bg-gradient-to-t from-zinc-900 to-[#3015457b]"
initial="initial"
animate="animate"
exit="exit"
variants={containerVariants}
>
<Head>
- <title>Dashboard - InvestBot</title>
- <meta name="description" content="Dashboard statistics for InvestBot" />
+ <title>Dashboard - toffee</title>
+ <meta name="description" content="Dashboard statistics for toffee" />
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#c084fc" />
- <meta property="og:title" content="InvestBot" />
+ <meta property="og:title" content="toffee" />
<meta
property="og:description"
content="Serving anny's community est. 2022"
/>
<meta property="og:image" content="/img/logo.webp" />
<meta property="og:type" content="website" />
- <meta property="og:site_name" content="InvestBot" />
+ <meta property="og:site_name" content="toffee" />
</Head>
<div className="flex h-screen w-screen flex-col overflow-hidden lg:flex-row">
diff --git a/layouts/HomeLayout.tsx b/layouts/HomeLayout.tsx
index da130f1..3606082 100644
--- a/layouts/HomeLayout.tsx
+++ b/layouts/HomeLayout.tsx
@@ -30,18 +30,18 @@ function HomeLayout(props: HomeLayoutProps) {
variants={containerVariants}
>
<Head>
- <title>InvestBot</title>
+ <title>toffee</title>
<meta name="description" content="Serving anny's community est. 2022" />
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#c084fc" />
- <meta property="og:title" content="InvestBot" />
+ <meta property="og:title" content="toffee" />
<meta
property="og:description"
content="Serving anny's community est. 2022"
/>
<meta property="og:image" content="/img/logo.webp" />
<meta property="og:type" content="website" />
- <meta property="og:site_name" content="InvestBot" />
+ <meta property="og:site_name" content="toffee" />
</Head>
<LazyMotion features={domAnimation}>
diff --git a/pages/about.tsx b/pages/about.tsx
index 31ac4db..c3cc05e 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -7,7 +7,7 @@ function About() {
return (
<>
<Head>
- <title>About - InvestBot</title>
+ <title>About - toffee</title>
</Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2">
<p>about</p>
diff --git a/pages/contact.tsx b/pages/contact.tsx
index 1440cf4..24a1fe9 100644
--- a/pages/contact.tsx
+++ b/pages/contact.tsx
@@ -7,7 +7,7 @@ function About() {
return (
<>
<Head>
- <title>Contact - InvestBot</title>
+ <title>Contact - toffee</title>
</Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2">
<p>contact</p>
diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
index 8ad0a5a..92e64e3 100644
--- a/pages/dashboard/index.tsx
+++ b/pages/dashboard/index.tsx
@@ -8,7 +8,7 @@ function Dashboard() {
return (
<>
<Head>
- <title>Dashboard - InvestBot</title>
+ <title>Dashboard - toffee</title>
</Head>
<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"
diff --git a/pages/dashboard/ranking.tsx b/pages/dashboard/ranking.tsx
index 6428f23..832718d 100644
--- a/pages/dashboard/ranking.tsx
+++ b/pages/dashboard/ranking.tsx
@@ -75,7 +75,7 @@ function Ranking() {
return (
<>
<Head>
- <title>Ranking - InvestBot</title>
+ <title>Ranking - toffee</title>
</Head>
<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">
@@ -146,10 +146,13 @@ function Ranking() {
{
// if data is not loaded, loading div
!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 />
<h1 className="my-5">This is fake delay :)</h1>
- </div>
+ </m.div>
) : (
<m.div
initial="initial"
diff --git a/pages/index.tsx b/pages/index.tsx
index bb4c830..197ffd0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -54,7 +54,7 @@ const Home: NextPageWithLayout = () => {
let slideShow = (
<Image
src="/img/logo.webp"
- alt="InvestBot Logo"
+ alt="toffee Logo"
width={128}
height={128}
className="ml-4 mr-6"
@@ -76,34 +76,52 @@ const Home: NextPageWithLayout = () => {
return (
<>
<Head>
- <title>Home - InvestBot</title>
+ <title>Home - toffee</title>
</Head>
<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">
<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}
initial="initial"
animate="animate"
>
<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}
>
- <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
- 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}
>
- <h1>Sell low</h1>
+ <h1 className="bg-gradient-to-tl bg-clip-text text-transparent">
+ off
+ </h1>
+ <h1>line</h1>
</m.div>
- <m.h2
- className="pt-2 text-sm font-medium text-gray-200"
- variants={sloganSecondaryVariants}
+ <m.div
+ className="flex flex-row items-center"
+ variants={sloganHeaderVariants}
>
- ...or something like that
- </m.h2>
+ <h1 className="bg-gradient-to-l bg-clip-text text-transparent">
+ 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
className="flex items-center justify-center"
@@ -112,6 +130,17 @@ const Home: NextPageWithLayout = () => {
animate="animate"
>
{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>
</div>
</div>
@@ -133,8 +162,8 @@ const sloganContainerVariants = {
type: "spring",
bounce: 0.5,
stiffness: 150,
- delayChildren: 0.5,
- staggerChildren: 1.0,
+ delayChildren: 1.0,
+ staggerChildren: 0.45,
},
},
};
@@ -148,14 +177,27 @@ const sloganHeaderVariants = {
},
};
-const sloganSecondaryVariants = {
+const sloganSecondaryContainerVariants = {
initial: {
opacity: 0,
+ rotate: 0,
},
animate: {
opacity: 1,
+ rotate: -15,
transition: {
delay: 3.5,
+ duration: 1.0,
+ },
+ },
+};
+
+const sloganSecondaryVariants = {
+ animate: {
+ fontSize: ["1.5rem", "1.575rem", "1.5rem"],
+ transition: {
+ duration: 0.5,
+ repeat: Infinity,
},
},
};
diff --git a/pages/team.tsx b/pages/team.tsx
index 17b023f..935bb55 100644
--- a/pages/team.tsx
+++ b/pages/team.tsx
@@ -9,7 +9,7 @@ function Team() {
return (
<>
<Head>
- <title>Team - InvestBot</title>
+ <title>Team - toffee</title>
</Head>
<div className="flex min-h-screen flex-col items-center justify-center py-2">
<m.div
@@ -87,7 +87,7 @@ const containerVariants: Variants = {
transition: {
duration: 2,
delayChildren: 0.5,
- staggerChildren: 0.25,
+ staggerChildren: 0.2,
type: "spring",
bounce: 0.5,
stiffness: 80,
diff --git a/public/favicon.ico b/public/favicon.ico
index 3ceb202..0cf083f 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/img/logo.webp b/public/img/logo.webp
index 740f4d7..65899c5 100644
Binary files a/public/img/logo.webp and b/public/img/logo.webp differ
diff --git a/styles/globals.css b/styles/globals.css
index 3f3f1af..6333c3b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -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+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.cdnfonts.com/css/minecraft-3");
@tailwind base;
@tailwind components;
@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
index 6f239a7..325ade7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
roboto: ["Roboto", "sans-serif"],
plusJakarta: ["Plus Jakarta Sans", "sans-serif"],
robotoMono: ["Roboto Mono", "monospace"],
+ minecraft: ["Minecraft", "Roboto", "sans-serif"],
},
},
},