Update styles of navbar and home screen

src/components/Button.tsx

@@ -32,7 +32,7 @@ export const Button: React.FC<ButtonProps> = ({
       className={cb(
         className,
         colorSchemas[color],
-        "cursor-pointer flex items-center relative justify-center font-semibold tracking-wide px-5 py-1 rounded-xl focus:outline-none"
+        "cursor-pointer flex items-center relative justify-center font-semibold tracking-wide px-5 py-1 rounded-full focus:outline-none hover:opacity-70"
       )}
       {...props}
     >

src/components/Card.tsx

@@ -3,7 +3,7 @@ import cb from "classnames";
 
 const Card: React.FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...props }) => {
   return (
-    <div className={cb(className, "bg-white border border-b-4 px-3 py-2 bg-opacity-10")} {...props}>
+    <div className={cb(className, "bg-white border border-b-4 rounded-lg px-3 py-2 bg-opacity-10")} {...props}>
       {children}
     </div>
   );

src/components/Navbar/Navbar.tsx

@@ -7,6 +7,7 @@ import {
   NavDropItems,
   NavItem,
   NavItems,
+  NavLogo,
   UserImage,
   UserImageContainer,
 } from "./Styles";
@@ -34,10 +35,8 @@ const Navbar = (): JSX.Element => {
       <div>
         <Link href="/">
           <a href="/">
-            <Image
+            <NavLogo
               src="https://cdn.discordapp.com/avatars/501089409379205161/b8120683fca41a13895f9d6c5a31d01a.png?size=2048"
-              width={80}
-              height={80}
               alt="brand"
             />
           </a>

src/components/Navbar/Styles.tsx

@@ -1,5 +1,15 @@
 import styled, { keyframes } from "styled-components";
 
+export const NavLogo = styled.img`
+  width: 70px;
+  height: 70px;
+
+  @media screen and (max-width: 768px) {
+    width: 50px;
+    height: 50px;
+  }
+`;
+
 export const NavBrand = styled.img`
   width: 80px;
   height: 80px;
@@ -233,18 +243,24 @@ export const Close = styled.div`
 `;
 
 export const Nav = styled.nav`
-  margin: 35px 50px;
+  padding: 15px 50px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 998;
+  box-shadow: 0 5px 10px rgba(0.1, 0.1, 0.1, 0.5);
+  position: fixed;
+  width: 100%;
+  top: 0;
+  background-color: #21232c;
 
   div:first-child {
     display: flex;
     align-items: center;
   }
 
   @media screen and (max-width: 900px) {
+    padding: 10px 15px;
     .user {
       position: fixed;
       bottom: 25px;

src/components/PageContainer.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const PageContainer: React.FC = ({ children }) => {
   return (
-    <div className="container myb-5 mt-16 flex flex-col gap-24 md:max-w-4xl lg:max-w-7xl">
+    <div className="container px-3 myb-5 mt-32 flex flex-col gap-24 md:max-w-4xl lg:max-w-7xl">
       {children}
     </div>
   );

src/pages/index.tsx

@@ -8,11 +8,11 @@ export default function HomePage(): JSX.Element {
   return (
     <>
       <div className="flex items-center justify-between flex-col md:flex-row gap-7">
-        <div className="uppercase font-bold tracking-widest text-center md:text-left">
+        <div className="uppercase font-bold tracking-widest text-left">
           <h3 className="text-2xl">Welcome to</h3>
-          <h1 className="text-4xl text-primary">Tech With Tim</h1>
+					<h1 className="font-secondary text-5xl text-primary">Tech With Tim</h1>
           <h5 className="text-lg text-secondary">Programming &#38; Tech Tutorials</h5>
-          <div className="flex md:justify-between gap-5 tracking-wide mt-2 text-sm justify-center">
+          <div className="flex w-full md:justify-between gap-3 tracking-wide mt-3 text-sm justify-start flex-row md:flex-row">
             <a target="_black" className="flex items-center gap-2" href="https://discord.gg/twt">
               <DiscordIcon fill="#FA9722" width={50} height={50} />
               <span className="hidden sm:inline-block">Join Our Server</span>
@@ -38,7 +38,7 @@ export default function HomePage(): JSX.Element {
         <div className="text-center md:text-left flex flex-col items-center md:items-start">
           <div className="uppercase tracking-widest font-bold">
             <h3 className="text-2xl">Timathon</h3>
-            <h1 className="text-5xl text-primary">Code Jam</h1>
+            <h1 className="font-secondary text-4xl text-primary">Code Jam</h1>
           </div>
           <p className="text-light-gray font-semibold max-w-xs lg:max-w-lg">
             Hosted every 2 months, consisting of a different theme and allowing yourself to put your
@@ -66,7 +66,7 @@ export default function HomePage(): JSX.Element {
       <div className="flex flex-col gap-7 items-center justify-between md:flex-row-reverse">
         <div className="flex flex-col items-center md:items-end uppercase tracking-widest font-bold">
           <h3 className="text-2xl">Weekly</h3>
-          <h1 className="text-5xl text-primary">Challenges</h1>
+          <h1 className="font-secondary text-4xl text-primary">Challenges</h1>
           <p className="text-light-gray tracking-normal normal-case font-semibold">
             Submit your solutions and earn badges!
           </p>
@@ -86,7 +86,7 @@ export default function HomePage(): JSX.Element {
       <div className="flex justify-between items-center flex-col md:flex-row gap-7">
         <div className="flex flex-col uppercase tracking-widest font-bold items-center text-center md:text-left md:items-start">
           <h3 className="text-2xl">Discord</h3>
-          <h1 className="text-5xl text-primary">Commmunity</h1>
+          <h1 className="font-secondary text-4xl text-primary">Commmunity</h1>
           <p className="text-light-gray tracking-normal normal-case font-semibold max-w-sm md:max-w-lg">
             Become a part of one of the most active programming communities. Check out all of our
             help channels!

src/styles/index.scss

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
 
 * {
   margin: 0;

tailwind.config.js

@@ -3,7 +3,8 @@ module.exports = {
   darkMode: false,
   theme: {
     fontFamily: {
-      body: ['"Poppins"', "sans-serif"],
+      body: ["Poppins", "sans-serif"],
+      secondary: ["Acme", "sans-serif"]
     },
     container: {
       center: true,