Added an about the project section and env files.

src/components/hero/AboutProject.tsx

@@ -0,0 +1,27 @@
+import { Button, Heading, Text, Link, VStack } from "@chakra-ui/react";
+import React from "react";
+
+const AboutProject = (): JSX.Element => {
+  const description = `This project and website is a replacement for the current Lucid Creations Media Website. It is going to being designed to be faster, more user friendly, and better accessible compared to Wordpress. This platform is being built on React and Next.js`;
+
+  return (
+    <VStack
+      justifyContent="center"
+      alignContent="center"
+      w="100%"
+      my="10"
+      px={{ base: "5vw", md: "15vw", lg: "20vw", xl: "30vw" }}
+      spacing="4"
+    >
+      <Heading w="100%">{"About This Website"}</Heading>
+      <Text w="100%">{description}</Text>
+      <Link href="htps://lucidcreations.media" target="_blank" rel="noopener">
+        <Button type="button" variant="secondary">
+          <Text>{"Visit the current website"}</Text>
+        </Button>
+      </Link>
+    </VStack>
+  );
+};
+
+export default AboutProject;

src/components/hero/index.tsx

@@ -1,6 +1,7 @@
 import { Heading, VStack } from "@chakra-ui/react";
 import React from "react";
 import WhatIMakeBanner from "./WhatIMakeBanner";
+import AboutProject from "./AboutProject";
 
 const TempHero = (): JSX.Element => {
   return (
@@ -13,9 +14,10 @@ const TempHero = (): JSX.Element => {
       alignContent="center"
     >
       <WhatIMakeBanner />
+      <AboutProject />
       <VStack
         w="100%"
-        h="57.2vh"
+        h="36.3vh"
         justifyContent="space-around"
         alignContent="center"
       >