Added an about the project section and env files.

example.env

@@ -0,0 +1,17 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+# This is for local/dev. Make sure to update ./prisma/schema.prisma to use the dev config.
+DATABASE_URL="postgresql://postgres:randompassword@localhost:5432/dbname?schema=public"
+
+# These are values from Vercel. Make sure to update ./prisma/schema.prisma to use the vercel config.
+POSTGRES_DATABASE="dbname"
+POSTGRES_PASSWORD="randompassword"
+POSTGRES_HOST="region.postgres.vercel-storage.com"
+POSTGRES_USER="postgres"
+POSTGRES_PRISMA_URL="postgres://postgres:randompassword@region.postgres.vercel-storage.com/dbname?pgbouncer=true&connect_timeout=15"
+POSTGRES_URL_NON_POOLING="postgres://postgres:randompassword@region.postgres.vercel-storage.com/dbname"
+POSTGRES_URL="postgres://postgres:randompassword@region.postgres.vercel-storage.com/dbname"

example.env.local

@@ -0,0 +1,14 @@
+# This section is only applicable during the beta and will be removed when the app is completed.
+NEXT_PUBLIC_APP_VERSION="0.2.0"
+
+# Auth Secrets
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=""
+# Used when sending emails to users
+EMAIL_SERVER_USER=""
+EMAIL_SERVER_PASSWORD=""
+SMTP_SERVER_HOST=""
+SMTP_SERVER_PORT=""
+EMAIL_FROM=""
+GOOGLE_ID=""
+GOOGLE_SECRET=""

package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@fontsource/anonymous-pro": "^5.0.12",
     "@fontsource/anybody": "^5.0.19",
@@ -26,29 +26,29 @@
     "@fontsource/tilt-neon": "^5.0.4",
     "@iconify/react": "^4.1.1",
     "@reduxjs/toolkit": "^2.2.1",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.5.0",
     "formik": "^2.4.5",
-    "framer-motion": "^11.0.6",
-    "next": "14.1.0",
+    "framer-motion": "^11.0.14",
+    "next": "14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "sharp": "^0.33.2"
   },
   "devDependencies": {
-    "@types/node": "^20.11.20",
-    "@types/react": "^18.2.58",
+    "@types/node": "^20.11.28",
+    "@types/react": "^18.2.66",
     "@types/react-redux": "^7.1.33",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "eslint": "^8.57.0",
     "eslint-config-next": "<13.4.9",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^3.2.5",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.2"
   },
   "packageManager": "yarn@4.1.0"
 }

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"
       >