fixing footer padding

packages/web/components/footer/index.tsx

@@ -1,10 +1,26 @@
 import FullMottoLogo from "../../../components/logo/fullMotto";
+import toast from "react-hot-toast";
+import { useCallback } from "react";
+
+const contactEmailAddress = "[email protected]";
+
 export default function Footer() {
+  const copyToClipboard = useCallback(() => {
+    navigator.clipboard.writeText(contactEmailAddress);
+
+    toast.success("copied to clipboard");
+  }, []);
+
   return (
-    <div className="container mx-auto flex md:flex-row flex-col justify-between mt-auto items-center">
+    <div className="container mx-auto max-w-screen-lg flex md:flex-row flex-col justify-between mt-auto items-center">
       <span className="ml-20">
         <span className="text-zinc-400 text-sm">Wanna chat? </span>
-        <span className="font-bold text-white">arjunpatel@berkeley.edu</span>
+        <span
+          className="font-bold text-white cursor-pointer"
+          onClick={copyToClipboard}
+        >
+          {contactEmailAddress}
+        </span>
       </span>
       <FullMottoLogo className="text-center scale-50" />
     </div>

packages/web/components/header/index.tsx

@@ -3,7 +3,7 @@ import { LogoType } from "@nirvana/components/logo/full";
 
 export default function Header() {
   return (
-    <div className="container mx-auto md:px-20 px-10 pt-5 flex flex-row justify-center md:justify-start">
+    <div className="container mx-auto max-w-screen-lg px-10 pt-5 flex flex-row justify-center md:justify-start">
       <HorizontalLogo type={LogoType.small} />
     </div>
   );

packages/web/package.json

@@ -13,6 +13,7 @@
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0",
+    "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1"
   },
   "devDependencies": {

packages/web/pages/_app.tsx

@@ -2,6 +2,8 @@ import "../styles/globals.css";
 
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import React from "react";
+import { Toaster } from "react-hot-toast";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -12,7 +14,11 @@ function MyApp({ Component, pageProps }: AppProps) {
         <link rel="icon" href="/logos/1024x1024.ico" />
 
         <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin={"true"}
+        />
         <link
           href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;600&display=swap"
           rel="stylesheet"

packages/web/pages/index.tsx

@@ -2,15 +2,9 @@ import { BsApple, BsWindows } from "react-icons/bs";
 import { FaPeopleCarry, FaRunning } from "react-icons/fa";
 
 import Footer from "../components/footer";
-import FullMottoLogo from "../../components/logo/fullMotto";
-import Head from "next/head";
 import Header from "../components/header";
-import HorizontalLogo from "../../components/logo/horizontal";
-import Image from "next/image";
-import { LogoType } from "../../components/logo/full";
 import { MdOutlineNaturePeople } from "react-icons/md";
 import type { NextPage } from "next";
-import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
   return (
@@ -19,7 +13,7 @@ const Home: NextPage = () => {
       <Header />
 
       {/* above fold experience */}
-      <div className="container mx-auto md:px-20 px-10">
+      <div className="container mx-auto max-w-screen-lg px-10">
         <div className="flex md:flex-row flex-col items-center my-10">
           <div className="flex flex-col items-start">
             <span className="text-white text-5xl md:text-6xl leading-[1.2] font-extrabold text-center md:text-left">
@@ -53,7 +47,7 @@ const Home: NextPage = () => {
 
           <img
             src="/illustrations/undraw_co-working_re_w93t.svg"
-            className="h-[30em] ml-auto md:block hidden"
+            className="h-[25em] ml-auto md:block hidden"
           />
         </div>
       </div>
@@ -102,6 +96,7 @@ const Home: NextPage = () => {
       </div>
 
       {/* footer */}
+
       <Footer />
     </>
   );