fix: fix naming to better describe buttons

Author: hyperupcall

src/App.tsx

@@ -1,9 +1,14 @@
 import { Box } from '@chakra-ui/core'
 import React, { FunctionComponent } from 'react'
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import {
+  BrowserRouter as Router,
+  Redirect,
+  Route,
+  Switch,
+} from 'react-router-dom'
 
 import ThemeX from './components/theme'
-import Home from './pages'
+import Chat from './pages/Chat'
 import Explore from './pages/Explore'
 import Globe from './pages/Globe'
 import Users from './pages/Users'
@@ -25,8 +30,11 @@ const App: FunctionComponent = () => {
                 <Route path="/explore">
                   <Explore />
                 </Route>
+                <Route path="/chat">
+                  <Chat />
+                </Route>
                 <Route path="/">
-                  <Home />
+                  <Redirect to="/explore" />
                 </Route>
               </Switch>
             </div>

src/components/organisms/NavSidebar.tsx

@@ -85,7 +85,7 @@ export default function Sidebar() {
         justify="space-between"
         paddingY="75px"
       >
-        <Link to="/">
+        <Link to="/chat">
           <FontAwesomeIcon
             color="#979797"
             size="lg"

src/pages/Chat.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import DisplayNavAndPage from '../components/organisms/DisplayNavAndPage'
+
+export default function Chat(): JSX.Element {
+  return (
+    <DisplayNavAndPage>
+      <h1>Chat</h1>
+    </DisplayNavAndPage>
+  )
+}

src/pages/Explore.tsx

@@ -1,12 +1,36 @@
+import { Stack, Text } from '@chakra-ui/core'
 import React from 'react'
 
+import GroupHeading from '../components/atoms/GroupHeading'
+import DropsList from '../components/molecules/DropsList'
 import DisplayNavAndPage from '../components/organisms/DisplayNavAndPage'
+import FindInterface from '../components/organisms/FindInterface'
+import Recommended from '../components/organisms/Recommended'
+import Trending from '../components/organisms/Trending'
 
 interface IExplorePage {}
 export default function ExplorePage({}: IExplorePage) {
   return (
     <DisplayNavAndPage>
-      <h1>Explore</h1>
+      <FindInterface />
+      <GroupHeading>
+        <Text>Drops</Text>
+      </GroupHeading>
+      <DropsList />
+      <Stack spacing={4} marginTop="15px" direction="row">
+        <Stack spacing={4}>
+          <GroupHeading>
+            <Text>Trending</Text>
+          </GroupHeading>
+          <Trending />
+        </Stack>
+        <Stack spacing={4}>
+          <GroupHeading>
+            <Text>Recommended For You</Text>
+          </GroupHeading>
+          <Recommended />
+        </Stack>
+      </Stack>
     </DisplayNavAndPage>
   )
 }