Merge pull request #21 from codeXsit/codex-10-heading

Codex 10 heading

Author: Achyut-0705

package.json

@@ -13,11 +13,14 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@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",
     "react-toastify": "^10.0.4",
-    "@vitejs/plugin-react": "^4.2.1",
     "vite": "^5.1.0"
   },
   "devDependencies": {

src/assets/styles/index.css

@@ -1,15 +1,24 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@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,20 @@
+import PropTypes from "prop-types";
+
+function Heading({ text }) {
+  return (
+    <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-6xl text-text-light absolute w-full leading-none bottom-[-20%]">
+        {text}
+      </div>
+    </div>
+  );
+}
+
+Heading.propTypes = {
+  text: PropTypes.string.isRequired,
+};
+
+export default Heading;

src/pages/Home/index.jsx

@@ -1,5 +1,21 @@
+import Heading from "@/components/Heading";
+
 function Home() {
-  return <div>Home</div>;
+  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;

tailwind.config.js

@@ -4,12 +4,36 @@ export default {
   theme: {
     extend: {
       colors: {
-        background: '#232323',
-        primary: '#F24E3F',
-        text: '#F7F7F7',
+        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",
+        sm: "600px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
       },
       fontFamily: {
-        sans: ['Roboto', 'sans-serif'],
+        poppins: ["Poppins", "sans-serif"],
+        gothic: ["League Gothic", "sans-serif"]
       },
     },
   },