docs: add features heading

Author: debater-coder

src/routes/Landing/Features.tsx

@@ -9,6 +9,7 @@ import {
   Badge,
 } from "@chakra-ui/react";
 import { House, Barcode, Megaphone, Calendar, Check } from "phosphor-react";
+import "@fontsource/poppins";
 
 export const Features = () => (
   <SimpleGrid minChildWidth="270px" spacing="40px">
@@ -108,5 +109,12 @@ export const Features = () => (
         reminders for what homework to do and when.
       </CardBody>
     </Card>
+    <Card bg="transparent" shadow="xl">
+      <CardHeader>
+        <Heading fontFamily={"Poppins, sans-serif"} size="md">
+          And plenty more features to come!
+        </Heading>
+      </CardHeader>
+    </Card>
   </SimpleGrid>
 );

src/routes/Landing/Footer.tsx

@@ -0,0 +1,48 @@
+import {
+  Text,
+  Stack,
+  useColorModeValue,
+  ButtonGroup,
+  IconButton,
+  Link,
+} from "@chakra-ui/react";
+import { TimetablLogo } from "../../components/Nav/Nav";
+import { FaGithub } from "react-icons/fa";
+import { Envelope } from "phosphor-react";
+
+export const Footer = () => {
+  return (
+    <Stack spacing={{ base: "4", md: "5" }}>
+      <Stack justify="space-between" direction="row" align="center">
+        <TimetablLogo
+          color={useColorModeValue("primary.700", "primary.200")}
+          loggedIn={false}
+        />
+        <ButtonGroup variant="ghost" colorScheme={"gray"}>
+          <IconButton
+            as="a"
+            href="mailto:[email protected]"
+            aria-label="LinkedIn"
+            icon={<Envelope fontSize="1.25rem" />}
+          />
+          <IconButton
+            as="a"
+            href="https://github.com/debater-coder/timetabl-app"
+            aria-label="GitHub"
+            icon={<FaGithub fontSize="1.25rem" />}
+          />
+        </ButtonGroup>
+      </Stack>
+      <Text fontSize="sm" color="subtle">
+        &copy; {new Date().getFullYear()}, Hamzah Ahmed under{" "}
+        <Link
+          href="https://github.com/debater-coder/timetabl-app/blob/main/LICENSE"
+          color={"primary.500"}
+          isExternal
+        >
+          MIT License.
+        </Link>
+      </Text>
+    </Stack>
+  );
+};

src/routes/Landing/Landing.tsx

@@ -5,22 +5,17 @@ import {
   AlertTitle,
   Container,
   Flex,
-  Text,
-  Stack,
+  Heading,
   useColorModeValue,
-  ButtonGroup,
-  IconButton,
-  Link,
 } from "@chakra-ui/react";
 import { useEffect } from "react";
 import { useAuth } from "../../hooks/useAuth";
 import { useNavigate } from "react-router-dom";
 import "@fontsource/poppins";
 import { Hero } from "./Hero";
 import { Features } from "./Features";
-import { TimetablLogo } from "../../components/Nav/Nav";
-import { FaGithub } from "react-icons/fa";
-import { Envelope } from "phosphor-react";
+import { Footer } from "./Footer";
+import "@fontsource/poppins";
 
 export default () => {
   const navigate = useNavigate();
@@ -50,6 +45,9 @@ export default () => {
         borderTopColor={useColorModeValue("gray.200", "gray.700")}
       >
         <Container maxW={"7xl"} p={10}>
+          <Heading fontFamily={"Poppins, sans-serif"} textAlign="center" mb={5}>
+            Features
+          </Heading>
           <Features />
         </Container>
       </Flex>
@@ -59,38 +57,7 @@ export default () => {
         borderTopColor={useColorModeValue("gray.200", "gray.700")}
       >
         <Container as="footer" role="contentinfo" maxW={"7xl"} py={10}>
-          <Stack spacing={{ base: "4", md: "5" }}>
-            <Stack justify="space-between" direction="row" align="center">
-              <TimetablLogo
-                color={useColorModeValue("primary.700", "primary.200")}
-                loggedIn={false}
-              />
-              <ButtonGroup variant="ghost" colorScheme={"gray"}>
-                <IconButton
-                  as="a"
-                  href="mailto:[email protected]"
-                  aria-label="LinkedIn"
-                  icon={<Envelope fontSize="1.25rem" />}
-                />
-                <IconButton
-                  as="a"
-                  href="https://github.com/debater-coder/timetabl-app"
-                  aria-label="GitHub"
-                  icon={<FaGithub fontSize="1.25rem" />}
-                />
-              </ButtonGroup>
-            </Stack>
-            <Text fontSize="sm" color="subtle">
-              &copy; {new Date().getFullYear()}, Hamzah Ahmed under{" "}
-              <Link
-                href="https://github.com/debater-coder/timetabl-app/blob/main/LICENSE"
-                color={"primary.500"}
-                isExternal
-              >
-                MIT License.
-              </Link>
-            </Text>
-          </Stack>
+          <Footer />
         </Container>
       </Flex>
     </>