Merge branch 'dev' into codex-5-teams-page

Author: Achyut-0705

package.json

@@ -13,6 +13,8 @@
     "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",

src/assets/styles/index.css

@@ -1,74 +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 */
-html,
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-address,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-samp,
-small,
-strong,
-sub,
-sup,
-var,
-b,
-i,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section,
-time,
-mark,
-audio,
-video {
+* {
   margin: 0;
   padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
+  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"]
       },
     },
   },