Added hero with temp placeholder

src/components/hero/WhatIMakeBanner.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { Flex, HStack, Text, VStack } from "@chakra-ui/react";
+import BrandText from "../../theme/components/BrandText";
+import { Icon } from "@iconify/react";
+
+const WhatIMakeBanner = (): JSX.Element => {
+  return (
+    <VStack
+      bgColor="brand.cosmic"
+      w="100%"
+      alignContent="center"
+      justifyContent="center"
+      py="10"
+      px={{ base: "0", lg: "5vw", "2xl": "10vw" }}
+    >
+      <VStack w="100%" alignContent="center" pb={{ base: "10", md: "6" }}>
+        <BrandText type="Heading" headerLevel="h2" text={"What I Make"} />
+      </VStack>
+      <Flex
+        w="100%"
+        justifyContent="space-around"
+        alignContent="center"
+        direction={{ base: "column", md: "row" }}
+        gap="5rem"
+      >
+        <VStack spacing="4" w="100%">
+          <BrandText type="Heading" headerLevel="h3" text={"Communities"} />
+          <VStack spacing="4" alignContent="start" justifyContent="center">
+            <HStack spacing="4">
+              <Text fontSize="5xl">
+                <Icon icon="ic:baseline-discord" />
+              </Text>
+              <BrandText type="Text" size="xl" text={"Lucid's Cove"} />
+            </HStack>
+            <HStack spacing="4">
+              <Text fontSize="5xl">
+                <Icon icon="ic:baseline-telegram" />
+              </Text>
+              <BrandText type="Text" size="xl" text={"Lucid's Cove"} />
+            </HStack>
+          </VStack>
+        </VStack>
+        <VStack spacing="4" w="100%">
+          <BrandText type="Heading" headerLevel="h3" text={"Content"} />
+          <VStack spacing="4" alignContent="start" justifyContent="center">
+            <HStack spacing="4" w="100%">
+              <Text fontSize="5xl">
+                <Icon icon="heroicons-solid:pencil" />
+              </Text>
+              <BrandText type="Text" size="xl" text={"Erotic Stories"} />
+            </HStack>
+            <HStack spacing="4" w="100%">
+              <Text fontSize="5xl">
+                <Icon icon="ic:baseline-telegram" />
+              </Text>
+              <BrandText type="Text" size="xl" text={"Hypno Audio Files"} />
+            </HStack>
+          </VStack>
+        </VStack>
+        <VStack spacing="4" w="100%">
+          <BrandText type="Heading" headerLevel="h3" text={"Streams"} />
+          <VStack spacing="4" alignContent="start" justifyContent="center">
+            <HStack spacing="4">
+              <Text fontSize="5xl">
+                <Icon icon="mdi:twitch" />
+              </Text>
+              <BrandText type="Text" size="xl" text={"LucidKobold"} />
+            </HStack>
+            <HStack spacing="4">
+              <Text fontSize="5xl">
+                <Icon icon="ic:baseline-telegram" />
+              </Text>
+              <BrandText type="Text" size="xl" text={"LucidKobold"} />
+            </HStack>
+          </VStack>
+        </VStack>
+      </Flex>
+    </VStack>
+  );
+};
+
+export default WhatIMakeBanner;

src/components/hero/index.tsx

@@ -0,0 +1,30 @@
+import { Heading, VStack } from "@chakra-ui/react";
+import React from "react";
+import WhatIMakeBanner from "./WhatIMakeBanner";
+
+const TempHero = (): JSX.Element => {
+  return (
+    <VStack
+      bg="brand.content"
+      h="100%"
+      w="100%"
+      spacing="0"
+      justifyContent="center"
+      alignContent="center"
+    >
+      <WhatIMakeBanner />
+      <VStack
+        w="100%"
+        h="57.2vh"
+        justifyContent="space-around"
+        alignContent="center"
+      >
+        <Heading size="3xl" as="h2">
+          {"Placeholder section"}
+        </Heading>
+      </VStack>
+    </VStack>
+  );
+};
+
+export default TempHero;

src/pages/index.tsx

@@ -2,14 +2,13 @@ import React from "react";
 import { Provider } from "react-redux";
 import { store } from "../redux/store";
 import { Box } from "@chakra-ui/react";
-
+import TempHero from "../components/hero";
 
 const IndexPage = (): JSX.Element => {
-
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" minWidth="min-content">
       <Provider store={store}>
-
+        <TempHero />
       </Provider>
     </Box>
   );

src/theme/components/BrandText.tsx

@@ -0,0 +1,29 @@
+import { Heading, Text } from "@chakra-ui/react";
+import React from "react";
+import { fonts } from "../AppTheme";
+
+interface BrandTextProps {
+  type: "Heading" | "Text";
+  text: string;
+  headerLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  size?: string;
+}
+
+const BrandText = ({
+  type,
+  text,
+  headerLevel,
+  size
+}: BrandTextProps): JSX.Element => {
+  return type === "Heading" ? (
+    <Heading fontFamily={fonts.brand} fontSize={size} as={headerLevel}>
+      {text}
+    </Heading>
+  ) : (
+    <Text fontFamily={fonts.brand} fontSize={size}>
+      {text}
+    </Text>
+  );
+};
+
+export default BrandText;