Created Button styling + homepage formatting updates

components/button.jsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function Button({ href, text }) {
+  return (
+    <Link
+      className="rounded-lg xl:p-4 p-3 lg:text-lg text-base hover:-translate-y-1 bg-translucent transition drop-shadow-md"
+      href={href}
+    >
+      {text}
+    </Link>
+  );
+}

pages/index.jsx

@@ -3,6 +3,8 @@ import Wave from "@/components/wave";
 import Wave180 from "@/components/wave180";
 import Hero from "@/components/hero";
 import Link from "next/link";
+import Button from "@/components/button";
+
 import fs from "fs";
 import path from "path";
 // import Markdown from 'markdown-to-jsx';
@@ -18,17 +20,19 @@ export default function Home({ sponsors, projects }) {
   return (
     <Layout>
       <Hero>
-        <div className="flex gap-8 items-center md:flex-row flex-col-reverse">
+        <div className="flex gap-8 items-center md:flex-row flex-col-reverse p-8">
           <div className="md:w-1/2 w-full">
-            <h1
-              className={`mb-2 md:mb-5 lg:text-5xl md:text-4xl text-3xl font-bold font-sans tracking-tight`}
-            >
+            <h1 className="mb-2 md:mb-5 lg:text-5xl md:text-4xl text-3xl font-bold font-sans tracking-tight">
               U of M&apos;s Premier Data Science Club
             </h1>
-            <p className="mb-10 lg:text-xl md:text-lg text-base font-light lg:tracking-wider tracking-normal">
+            <p className="mb-5 xl:text-xl lg:text-lg text-base font-light lg:tracking-wider tracking-normal">
               We empower the next generation of data scientists at the
               University of Michigan through education and exploration.
             </p>
+            <div className="flex md:justify-start justify-center gap-5">
+              <Button href="/join" text="Join Us" />
+              <Button href="/sponsors" text="Work with Us" />
+            </div>
           </div>
           <Image
             className="md:w-1/2 w-full"
@@ -42,21 +46,6 @@ export default function Home({ sponsors, projects }) {
             alt="Image of a dataframe"
           />
         </div>
-
-        <div className="flex justify-center gap-5">
-          <Link
-            className="border-2 rounded-full p-3 hover:-translate-y-1"
-            href="/join"
-          >
-            Join Us
-          </Link>
-          <Link
-            className="border-2 rounded-full p-3 hover:-translate-y-1"
-            href="/sponsors"
-          >
-            Work With Us
-          </Link>
-        </div>
       </Hero>
       <div className="container mx-auto px-2">
         <div className="grid bullets items-center gap-x-8 gap-y-2 grid-flow-col">
@@ -103,12 +92,7 @@ export default function Home({ sponsors, projects }) {
           All UM Ann Arbor students can join for free!
         </h2>
         <div className="flex mt-4 justify-center">
-          <Link
-            className="border-2 rounded-full p-3 hover:-translate-y-1"
-            href=""
-          >
-            Join Us
-          </Link>
+          <Button href="/join" text="Join Us" />
         </div>
       </div>
 

pages/team.jsx

@@ -2,7 +2,7 @@ import Layout from "@/components/layout";
 import Hero from "@/components/hero";
 import Link from "next/link";
 import Image from "next/image";
-import { IoLogoGithub, IoLogoLinkedin } from "react-icons/io";
+import Icon from "@/components/icon";
 import fs from "fs";
 import path from "path";
 import { useRouter } from "next/router";
@@ -63,14 +63,14 @@ function MemberCard({ json, basePath }) {
         {json.linkedin ? (
           <li>
             <Link href={json.linkedin} className="hover:text-gray">
-              <IoLogoLinkedin className="w-6 h-6" />
+              <Icon name="linkedin" className="text-3xl" />
             </Link>
           </li>
         ) : null}
         {json.github ? (
           <li>
             <Link href={json.github} className="hover:text-gray">
-              <IoLogoGithub className="w-6 h-6" />
+              <Icon name="github" className="text-3xl" />
             </Link>
           </li>
         ) : null}

tailwind.config.js

@@ -19,6 +19,7 @@ module.exports = {
     },
     colors: {
       transparent: "transparent",
+      translucent: "#F3F5F744",
       current: "currentColor",
       black: colors.black,
       white: colors.white,