feat: added heading element

Author: Miran-Firdausi

package.json

@@ -16,6 +16,7 @@
     "@fontsource/league-gothic": "^5.0.18",
     "@fontsource/poppins": "^5.0.8",
     "@vitejs/plugin-react": "^4.2.1",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",

src/assets/styles/index.css

@@ -10,7 +10,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: 'poppins', 'sans-serif';
+  font-family: "poppins", "sans-serif";
 }
 
 a {

src/components/Heading/index.jsx

@@ -1,11 +1,20 @@
-function Heading({headingText}) {
+import PropTypes from "prop-types";
+
+function Heading({ headingText }) {
   return (
     <div className="relative text-center font-black uppercase tracking-tighter">
-        <div className="xs:text-5xl text-[6.5rem] text-outlined text-transparent  ">{headingText}</div>
-        <div className="xs:text-2xl text-[3.75rem] text-foreground absolute w-full bottom-0">{headingText}</div>
+      <div className="xs:text-4xl sm:text-6xl lg:text-[6.5rem] text-outlined text-transparent  ">
+        {headingText}
+      </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>
     </div>
   );
 }
-  
+
+Heading.propTypes = {
+  headingText: PropTypes.string.isRequired,
+};
+
 export default Heading;
-  

src/pages/Home/Hero.jsx

@@ -1,10 +1,14 @@
 function Hero() {
   return (
-    <div className='bg-background h-screen flex'>
-        <div className='m-auto'>
-            <div className="text-7xl md:text-[10rem] text-primary text-center font-gothic uppercase">Codex, SIT</div>
-            <div className="text-lg md:text-2xl pt-4 text-foreground text-center">Coding Club</div>
+    <div className="bg-background h-screen flex">
+      <div className="m-auto">
+        <div className="text-7xl md:text-[10rem] text-primary text-center font-gothic uppercase">
+          Codex, SIT
         </div>
+        <div className="text-lg md:text-2xl pt-4 text-foreground text-center">
+          Coding Club
+        </div>
+      </div>
     </div>
   );
 }

src/pages/Home/index.jsx

@@ -1,11 +1,7 @@
-import Hero from './Hero';
+import Hero from "./Hero";
 
 function Home() {
-  return (
-    <>
-      <Hero/>
-    </>
-  );
+  return <Hero />;
 }
 
 export default Home;