feat(client): added basic pages

client/src/App.tsx

@@ -1,16 +1,36 @@
 import React, { lazy, Suspense, useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
-import { Box, Flex } from "@chakra-ui/react";
+import {
+  Box,
+  Drawer,
+  DrawerContent,
+  Flex,
+  useColorModeValue,
+  useDisclosure,
+} from "@chakra-ui/react";
 
 import PublicRoute from "~shared/PublicRoute";
 import useAuthStore from "~shared/store/AuthStore";
 
-const DashboardPage = lazy(() => import("~features/dashboard/Dashboard"));
-const LandingPage = lazy(() => import("~features/landing/Landing"));
+import { useAuth } from "~features/auth";
+
+// Private Component
+const DashboardPage = lazy(() => import("~features/pages/dashboard/Dashboard"));
+
+// Public Component
+const LandingPage = lazy(() => import("~features/pages/landing/Landing"));
+const LoginPage = lazy(() => import("~features/pages/login/Login"));
+const RegisterPage = lazy(() => import("~features/pages/register/Register"));
+
+// Shared Component
+const Sidebar = lazy(() => import("~shared/components/sidebar/Sidebar"));
 const Navbar = lazy(() => import("~shared/components/navbar/Navbar"));
 const Footer = lazy(() => import("~shared/components/footer/Footer"));
 
 const App: React.FC = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isAuthenticated } = useAuth();
+
   useEffect(() => {
     const handleStorageChange = (event: StorageEvent) => {
       if (event.key === "auth-storage" && !event.newValue) {
@@ -28,15 +48,39 @@ const App: React.FC = () => {
   }, []);
 
   return (
-    <Flex direction="column" minH="100vh">
+    <Flex
+      direction="column"
+      minH="100vh"
+      bg={useColorModeValue("gray.100", "gray.900")}
+    >
       <Suspense fallback={"Loading"}>
-        <Navbar />
-        <Box flex="1">
+        {isAuthenticated ? (
+          <Sidebar
+            onClose={() => onClose}
+            display={{ base: "none", md: "block" }}
+          />
+        ) : null}
+        <Drawer
+          isOpen={isOpen}
+          placement="left"
+          onClose={onClose}
+          returnFocusOnClose={false}
+          onOverlayClick={onClose}
+          size="full"
+        >
+          <DrawerContent>
+            <Sidebar onClose={onClose} />
+          </DrawerContent>
+        </Drawer>
+        <Navbar onOpen={onOpen} />
+        <Box flex="1" ml={isAuthenticated ? { base: 0, md: 60 } : 0} py="4">
           <Routes>
             {/* This is public route, later can add check to redirect authenticated user back to dashboard */}
             Can move this Route and public route checking
             <Route element={<PublicRoute strict={true} />}>
               <Route path="/" element={<LandingPage />} />
+              <Route path="/signin" element={<LoginPage />} />
+              <Route path="/signup" element={<RegisterPage />} />
             </Route>
             {/* This is private route, only authenticated user can access this route */}
             {/* /dashboard/* means that all paths starting with /dashboard/ will be handled by DashboardPage. */}

client/src/features/dashboard/Dashboard.tsx → client/src/features/pages/dashboard/Dashboard.tsx

@@ -3,7 +3,7 @@ import { Route, Routes } from "react-router-dom";
 
 import PrivateRoute from "~shared/PrivateRoute";
 
-import { useHead } from "~features/page-header/title/TitleContext";
+import { useHead } from "~features/title/TitleContext";
 
 import ViewDashboard from "./ViewDashboard";
 import ViewUserList from "./ViewUserList";

client/src/features/pages/landing/Landing.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { Box } from "@chakra-ui/react";
+
+import { useHead } from "~features/title/TitleContext";
+
+import Cards from "./cards/Cards";
+import Contact from "./contact/Contact";
+import Features from "./features/Features";
+import Hero from "./hero/Hero";
+
+const Landing = () => {
+  const updateHead = useHead();
+  useEffect(() => {
+    updateHead("Home", {
+      description: "Home",
+      keywords: "Home",
+    });
+  }, []);
+
+  return (
+    <Box width="100%">
+      <Hero />
+      <Features />
+      <Cards />
+      <Contact />
+    </Box>
+  );
+};
+
+export default Landing;

client/src/features/pages/landing/cards/Cards.tsx

@@ -0,0 +1,129 @@
+import { ReactElement } from "react";
+import {
+  FcAbout,
+  FcAssistant,
+  FcCollaboration,
+  FcDonate,
+  FcManager,
+} from "react-icons/fc";
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Icon,
+  Stack,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+
+interface CardProps {
+  heading: string;
+  description: string;
+  icon: ReactElement;
+  href: string;
+}
+
+const Card = ({ heading, description, icon, href }: CardProps) => {
+  return (
+    <Box
+      maxW={{ base: "full", md: "275px" }}
+      w={"full"}
+      borderWidth="1px"
+      borderRadius="lg"
+      overflow="hidden"
+      p={5}
+    >
+      <Stack align={"start"} spacing={2}>
+        <Flex
+          w={16}
+          h={16}
+          align={"center"}
+          justify={"center"}
+          color={"white"}
+          rounded={"full"}
+          bg={useColorModeValue("gray.100", "gray.700")}
+        >
+          {icon}
+        </Flex>
+        <Box mt={2}>
+          <Heading size="md">{heading}</Heading>
+          <Text mt={1} fontSize={"sm"}>
+            {description}
+          </Text>
+        </Box>
+        <Button
+          variant={"link"}
+          colorScheme={"blue"}
+          size={"sm"}
+          as="a"
+          href={href}
+        >
+          Learn more
+        </Button>
+      </Stack>
+    </Box>
+  );
+};
+
+export default function gridListWith() {
+  return (
+    <Box p={8} py={20} pt={20}>
+      <Stack spacing={4} as={Container} maxW={"3xl"} textAlign={"center"}>
+        <Heading fontSize={{ base: "2xl", sm: "4xl" }} fontWeight={"bold"}>
+          Short heading
+        </Heading>
+        <Text color={"gray.600"} fontSize={{ base: "sm", sm: "lg" }}>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
+          obcaecati ut cupiditate pariatur, dignissimos, placeat amet officiis.
+        </Text>
+      </Stack>
+
+      <Container maxW={"5xl"} mt={12}>
+        <Flex flexWrap="wrap" gridGap={6} justify="center">
+          <Card
+            heading={"Heading"}
+            icon={<Icon as={FcAssistant} w={10} h={10} />}
+            description={
+              "Lorem ipsum dolor sit amet catetur, adipisicing elit."
+            }
+            href={"#"}
+          />
+          <Card
+            heading={"Heading"}
+            icon={<Icon as={FcCollaboration} w={10} h={10} />}
+            description={
+              "Lorem ipsum dolor sit amet catetur, adipisicing elit."
+            }
+            href={"#"}
+          />
+          <Card
+            heading={"Heading"}
+            icon={<Icon as={FcDonate} w={10} h={10} />}
+            description={
+              "Lorem ipsum dolor sit amet catetur, adipisicing elit."
+            }
+            href={"#"}
+          />
+          <Card
+            heading={"Heading"}
+            icon={<Icon as={FcManager} w={10} h={10} />}
+            description={
+              "Lorem ipsum dolor sit amet catetur, adipisicing elit."
+            }
+            href={"#"}
+          />
+          <Card
+            heading={"Heading"}
+            icon={<Icon as={FcAbout} w={10} h={10} />}
+            description={
+              "Lorem ipsum dolor sit amet catetur, adipisicing elit."
+            }
+            href={"#"}
+          />
+        </Flex>
+      </Container>
+    </Box>
+  );
+}