feat: replaced <a /> with <Link />, used tailwind config colour schemes, added padding to images

Author: GenDelta

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-2">
+      <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/components/SkewButton.jsx

@@ -7,7 +7,7 @@ function SkewButton({ text, link }) {
       <Link to={link}>
         <button
           type="button"
-          className="transform hover:-translate-y-1 transition motion-reduce:transition-none motion-reduce:hover:transform-none bg-white text-background font-sans font-extrabold px-4 py-2 -skew-x-12"
+          className="transform hover:-translate-y-1 transition motion-reduce:transition-none motion-reduce:hover:transform-none bg-background-light text-text-dark font-poppins font-extrabold px-4 py-2 -skew-x-12"
         >
           {text}
         </button>

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;

src/pages/Teams/TeamMember.jsx

@@ -9,20 +9,20 @@ function TeamMember({ member }) {
     member;
 
   return (
-    <div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 cursor-pointer bg-zinc-700 rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 space-y-4 align-middle aspect-ratio aspect-ratio-1/1">
-      <div className="border-8xl border-4 bg-zinc-700 rounded-3xl overflow-hidden p-3 space-y-4 align-middle aspect-ratio aspect-ratio-1/1">
+    <div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 space-y-4 align-middle aspect-ratio aspect-ratio-1/1">
+      <div className="border-8xl border-4 border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 space-y-4 align-middle aspect-ratio aspect-ratio-1/1">
         <img
           src={image}
           alt={name}
-          className="w-40 h-40 rounded-full mx-auto"
+          className="w-40 h-40 p-2 rounded-full mx-auto"
         />
-        <h2 className="text-3xl font-sans font-semi-bold text-center text-white">
+        <h2 className="text-3xl font-poppins font-semi-bold text-center text-text-light">
           {name}
         </h2>
-        <p className="text-l font-sans text-center font-bold text-white">
+        <p className="text-l font-poppins text-center font-bold text-text-light">
           {position}
         </p>
-        <p className="font-sans text-center text-wrap text-white">
+        <p className="font-poppins text-center text-wrap text-text-light">
           {description}
         </p>
         <div className="flex justify-center space-x-4">
@@ -68,4 +68,4 @@ TeamMember.propTypes = {
   }).isRequired,
 };
 
-export default TeamMember;
+export default TeamMember;

src/pages/Teams/index.jsx

@@ -1,5 +1,6 @@
 import TeamMember from "@/pages/Teams/TeamMember";
 import SkewButton from "@/components/SkewButton";
+import Heading from "@/components/Heading/index"
 import teamMembersData from "./teamsdata.json";
 
 function Teams() {
@@ -8,15 +9,18 @@ function Teams() {
   ));
 
   return (
-    <div className="bg-zinc-800 min-h-screen">
-      <div className="flex-grow container mx-auto pr-20 pl-20 space-x-30 py-8">
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 grid grid-rows-auto">
-          {teamMembers}
+    <div className="bg-background-dark min-h-screen">
+      <div className="flex justify-center items-center">
+        <div className="flex-grow container mx-auto pr-20 pl-20 space-x-30 py-8">
+          <Heading text = "MEET OUR TEAM" className="text-center absolute top-0 left-0 right-0 mb-24" />
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 grid grid-rows-auto mt-12">
+            {teamMembers}
+          </div>
+          <SkewButton text="SEE ALL" link="/all-members" className="mt-16" />
         </div>
-        <SkewButton text="SEE ALL" link="/all-members" />
       </div>
     </div>
   );
 }
 
-export default Teams;
+export default Teams;

tailwind.config.js

@@ -4,12 +4,40 @@ 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: "#222222",
+        },
+        background: {
+          dark: "#232323",
+          light: "#F7F7F7",
+        },
+        text: {
+          light: "#F7F7F7",
+          dark: "#232323",
+        },   
+        gradient: {
+          light: "#383838",
+          dark: "#222222 ",
+        }
+      },
+      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"]
       },
     },
   },