toffee branding temp

2022-12-31 02:22:27 -08:00 · 2022-12-31 02:22:27 -08:00 · 2a06d0f2ac
commit 2a06d0f2ac
parent a4fa47eda4
13 changed files with 89 additions and 42 deletions
--- 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&apos;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",
--- 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">
--- 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}>
--- 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>
--- 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>
--- 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"
--- 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"
--- 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,
    },
  },
 };
--- 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,
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/img/logo.webp
+++ b/public/img/logo.webp
--- 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;
--- 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"],
      },
    },
  },