fix: required changes

Author: Miran-Firdausi

src/components/Heading/index.jsx

@@ -1,20 +1,20 @@
 import PropTypes from "prop-types";
 
-function Heading({ headingText }) {
+function Heading({ text }) {
   return (
-    <div className="relative text-center font-black uppercase tracking-tighter">
-      <div className="xs:text-4xl sm:text-6xl lg:text-[6.5rem] text-outlined text-transparent  ">
-        {headingText}
+    <div className="relative text-center font-black uppercase tracking-tighter m-4">
+      <div className="xs:text-4xl sm:text-6xl lg:text-8xl text-outlined text-transparent leading-[145%]">
+        {text}
       </div>
-      <div className="xs:text-2xl sm:text-4xl lg:text-[3.75rem] text-foreground absolute w-full xs:bottom-[-10px] sm:bottom-[-18px] lg:bottom-[-12px]">
-        {headingText}
+      <div className="xs:text-2xl sm:text-4xl lg:text-6xl text-text-light absolute w-full leading-none bottom-[-20%]">
+        {text}
       </div>
     </div>
   );
 }
 
 Heading.propTypes = {
-  headingText: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
 };
 
 export default Heading;

src/pages/Home/Hero.jsx

@@ -1,7 +1,21 @@
-import Hero from "./Hero";
+import Heading from "@/components/Heading";
 
 function Home() {
-  return <Hero />;
+  return (
+    <>
+      <div className="bg-background-dark h-screen flex">
+        <div className="m-auto">
+          <div className="text-7xl md:text-9xl lg:text-[11rem] text-primary text-center font-gothic uppercase">
+            Codex, SIT
+          </div>
+          <div className="text-lg md:text-2xl lg:text-3xl mt-4 text-text-light text-center">
+            Coding Club
+          </div>
+        </div>
+      </div>
+      <Heading text="What do we do?" />
+    </>
+  );
 }
 
 export default Home;

src/pages/Home/index.jsx

@@ -4,10 +4,25 @@ export default {
   theme: {
     extend: {
       colors: {
-        background: "#232323",
-        primary: "#E76941",
-        foreground: "#F7F7F7",
-        gray: "737373",
+        primary: {
+          DEFAULT: "#E76941",
+          light: "#FFA06D",
+          dark: "#B54B1E",
+          contrastText: "#F7F7F7",
+        },
+        secondary: {
+          DEFAULT: "#737373",
+          light: "#A3A3A3",
+          dark: "#494949",
+        },
+        background: {
+          dark: "#232323",
+          light: "#F7F7F7",
+        },
+        text: {
+          light: "#F7F7F7",
+          dark: "#232323",
+        }   
       },
       screens: {
         xs: "0px",