feat: add heading component

Author: Miran-Firdausi

package.json

@@ -13,6 +13,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@fontsource/league-gothic": "^5.0.18",
     "@fontsource/poppins": "^5.0.8",
     "@vitejs/plugin-react": "^4.2.1",
     "react": "^18.2.0",

src/assets/styles/index.css

@@ -1,16 +1,24 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-@import "@fontsource/poppins";
+@import "@fontsource/poppins/400.css";
+@import "@fontsource/poppins/900.css";
+@import "@fontsource/league-gothic";
 
 /* Reset default browser styles */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: 'poppins', 'sans-serif';
 }
 
 a {
   text-decoration: none;
   color: inherit;
 }
+
+.text-outlined {
+  -webkit-text-stroke-width: 2px;
+  -webkit-text-stroke-color: #737373;
+}

src/components/Heading/index.jsx

@@ -0,0 +1,11 @@
+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>
+  );
+}
+  
+export default Heading;
+  

src/pages/Home/Hero.jsx

@@ -0,0 +1,12 @@
+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>
+    </div>
+  );
+}
+
+export default Hero;

src/pages/Home/index.jsx

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

tailwind.config.js

@@ -6,17 +6,19 @@ export default {
       colors: {
         background: "#232323",
         primary: "#E76941",
-        text: "#F7F7F7",
+        foreground: "#F7F7F7",
+        gray: "737373",
       },
       screens: {
         xs: "0px",
         sm: "600px",
-        md: "900px",
-        lg: "1200",
-        xl: "1536px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
       },
       fontFamily: {
-        poppins: ['Poppins', 'sans-serif'],
+        poppins: ["Poppins", "sans-serif"],
+        gothic: ["League Gothic", "sans-serif"]
       },
     },
   },