feat: feature/mvp-sprint-1 Added investment links

remix/app/components/Icon/Icon.tsx

@@ -155,6 +155,13 @@ export const Icon = (props) => {
     if (["trash", "bin", "delete", "remove"]?.includes(name)) {
       return "🗑️"
     }
+    if (["cash", "money"]?.includes(name)) {
+      // return "💰"
+      return "💵"
+    }
+    if (["money bag"]?.includes(name)) {
+      return "💰"
+    }
     if (["thingtime"]?.includes(name)) {
       if (Math.random() > 0.5) {
         return "🌳"

remix/app/components/Layout/Main.tsx

@@ -1,20 +1,25 @@
-import { Flex } from '@chakra-ui/react'
-import { Nav } from '../Nav/Nav'
-import { ProfileDrawer } from '../Nav/ProfileDrawer'
+import { Box, Flex } from "@chakra-ui/react"
 
-export const Main = props => {
+import { Footer } from "../Nav/Footer"
+import { Nav } from "../Nav/Nav"
+import { ProfileDrawer } from "../Nav/ProfileDrawer"
+
+export const Main = (props) => {
   return (
     <Flex
-      position={'relative'}
-      alignItems='center'
-      justifyContent='center'
-      flexDir={'column'}
-      overflow='hidden'
-      maxW='100vw'
+      position="relative"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      overflow="hidden"
+      maxWidth="100vw"
     >
       {/* <ProfileDrawer></ProfileDrawer> */}
       <Nav />
-      {props.children}
+      <Box width="100%" minHeight="100vh">
+        {props.children}
+      </Box>
+      <Footer></Footer>
     </Flex>
   )
 }

remix/app/components/Nav/Footer.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { Box, Center, Flex, Text } from "@chakra-ui/react"
+import { Link, useLocation, useNavigate } from "@remix-run/react"
+
+import { Commander } from "../Commander/Commander"
+import { CommanderV1 } from "../Commander/CommanderV1"
+import { Icon } from "../Icon/Icon"
+import { RainbowSkeleton } from "../Skeleton/RainbowSkeleton"
+import { ProfileDrawer } from "./ProfileDrawer"
+
+export const Footer = (props) => {
+  const investmentEmail = "investment@thingtime.com"
+
+  return (
+    <Center
+      width="100%"
+      paddingTop="900px"
+      paddingBottom={[5, 12]}
+      paddingX={4}
+    >
+      <Flex width={["500px", "500px"]} maxWidth="100%">
+        <Flex flexDirection="column" rowGap={3}>
+          <Flex flexDirection="column">
+            <Flex flexDirection="row" fontSize="xs">
+              <Icon name="cash" size="12px" chakras={{ pr: 1 }}></Icon>
+              To invest, please contact:
+              {/* <Icon name="money bag" size="10px" chakras={{ pl: 1 }}></Icon> */}
+            </Flex>
+            <Link to={`mailto:${investmentEmail}`}>
+              <Flex flexDirection="row">
+                <Text color="green">{investmentEmail}</Text>
+              </Flex>
+            </Link>
+          </Flex>
+
+          <Flex flexDirection="column" fontSize="xs">
+            {/* copyright message */}© 2023 Thingtime
+          </Flex>
+        </Flex>
+      </Flex>
+    </Center>
+  )
+}

remix/app/components/Splash/Splash.tsx

@@ -1,11 +1,16 @@
-import { TextAnimation1 } from '~/components/textAnimation1'
-import { Flex } from '@chakra-ui/react'
+import { Flex } from "@chakra-ui/react"
 
-export const Splash = props => {
+import { TextAnimation1 } from "~/components/textAnimation1"
 
-  return <Flex w='100vw' h='100vh' alignItems='center' justifyContent='center'>
-
-    <TextAnimation1></TextAnimation1>
+export const Splash = (props) => {
+  return (
+    <Flex
+      alignItems="center"
+      justifyContent="center"
+      width="100vw"
+      height="100vh"
+    >
+      <TextAnimation1></TextAnimation1>
     </Flex>
-  
-}
+  )
+}

remix/app/components/textAnimation1.tsx

@@ -1,18 +1,19 @@
-import { Box } from '@chakra-ui/react'
-import { RainbowText } from './rainbowText'
-import React from 'react'
+import React from "react"
+import { Box } from "@chakra-ui/react"
 
-export const TextAnimation1 = props => {
+import { RainbowText } from "./rainbowText"
+
+export const TextAnimation1 = (props) => {
   const texts = React.useMemo(() => {
     return [
-      'thingtime',
-      'vibrant',
-      'infinite',
-      'creative',
-      'powerful',
-      'magical',
-      'inspiring',
-      'love',
+      "thingtime",
+      "vibrant",
+      "infinite",
+      "creative",
+      "powerful",
+      "magical",
+      "inspiring",
+      "love",
       // 'tt'
     ]
   }, [])
@@ -26,15 +27,15 @@ export const TextAnimation1 = props => {
   React.useEffect(() => {
     state.current = { titleText, texts, usedTexts }
   }, [titleText, texts, usedTexts])
-  
 
   React.useEffect(() => {
-    const newTimeout = Math.random() * 1500 + 2500 + (titleText === "thingtime" ? 750 : 0)
+    const newTimeout =
+      Math.random() * 1500 + 2500 + (titleText === "thingtime" ? 750 : 0)
 
     setTimeout(() => {
       // choose an unused text or pick texts[0]
       const usedTexts = state.current.usedTexts
-      const unusedTexts = texts.filter(text => !usedTexts.includes(text))
+      const unusedTexts = texts.filter((text) => !usedTexts.includes(text))
       // pick a random unused text
       const randomIdx = Math.floor(Math.random() * unusedTexts.length)
       const newText = unusedTexts.length > 0 ? unusedTexts[randomIdx] : texts[0]
@@ -45,7 +46,6 @@ export const TextAnimation1 = props => {
       }
       setTitleText(newText)
     }, newTimeout)
-
   }, [titleText])
 
   return <RainbowText>{titleText}</RainbowText>