From a08d63e218fe901b6174793a9536e689effe0827 Mon Sep 17 00:00:00 2001
From: joshborseth <joshuaborseth@gmail.com>
Date: Fri, 8 Dec 2023 09:20:33 -0800
Subject: [PATCH] adjusted styles to fix mobile issue

---
 apps/marketing/src/pages/index.tsx | 36 +++++++-----------------------
 1 file changed, 8 insertions(+), 28 deletions(-)
diff --git a/apps/marketing/src/pages/index.tsx b/apps/marketing/src/pages/index.tsx
index e4ef233..bba19f8 100644
--- a/apps/marketing/src/pages/index.tsx
+++ b/apps/marketing/src/pages/index.tsx
@@ -30,34 +30,21 @@ const Home: NextPage = () => {
     <>
       <Head>
         <title>{`webhookthing`}</title>
-        <meta
-          name="description"
-          content="an easier way to develop with webhooks locally"
-        />
+        <meta name="description" content="an easier way to develop with webhooks locally" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link rel="icon" type="image/png" href="/favicon.png" />
       </Head>
-      <main
-        className={classNames(
-          "relative z-10 flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-indigo-800/40 transition-all duration-1000 ease-in-out"
-        )}
-      >
+      <main className={classNames("relative z-10 flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-indigo-800/40 transition-all duration-1000 ease-in-out")}>
         <div className="container flex h-full w-full flex-col items-center justify-center gap-12 px-4 py-16">
           <div className="flex animate-fade-in flex-col items-center justify-center">
-            <h1 className="text-[3.5rem] font-medium tracking-tighter text-white sm:text-[5rem]">
+            <h1 className="text-[3rem] font-medium tracking-tighter text-white sm:text-[5rem]">
               {`webhook`}
               <span className="font-extrabold text-indigo-600 ">{`thing`}</span>
             </h1>
-            <div className="flex w-96 max-w-sm flex-col items-center text-center text-white">
+            <div className="flex w-full max-w-sm flex-col items-center text-center text-white">
               <div className="flex flex-col items-center gap-4">
-                <div className="flex items-center gap-2 text-xl">
-                  {`Run webhooks locally with 1 click.`}
-                </div>
-                <div
-                  className={classNames(
-                    "flex animate-fade-in items-center gap-2"
-                  )}
-                >
+                <div className="flex items-center gap-2 text-lg sm:text-xl">{`Run webhooks locally with 1 click.`}</div>
+                <div className={classNames("flex animate-fade-in items-center gap-2")}>
                   <div className="w-fullrounded-md bg-gray-900 p-2 text-white">
                     <div className="flex items-center justify-between px-2 py-1">
                       <pre>{`npx webhookthing@latest`}</pre>
@@ -65,9 +52,7 @@ const Home: NextPage = () => {
                         <button
                           className="group"
                           onClick={() => {
-                            void navigator.clipboard.writeText(
-                              "npx webhookthing@latest"
-                            );
+                            void navigator.clipboard.writeText("npx webhookthing@latest");
                             setCopied();
                           }}
                         >
@@ -94,12 +79,7 @@ const Home: NextPage = () => {
             {"Docs"}
           </a>
           {"|"}
-          <a
-            className="gh-link group relative hover:underline"
-            target="_blank"
-            href="https://github.com/pingdotgg/webhookthing"
-            rel="noreferrer"
-          >
+          <a className="gh-link group relative hover:underline" target="_blank" href="https://github.com/pingdotgg/webhookthing" rel="noreferrer">
             <span className="invisible absolute -top-8 left-1/2 -translate-x-1/2 scale-[0.2] whitespace-nowrap rounded bg-indigo-500/10 px-4 py-2 text-sm font-bold delay-150 duration-150 ease-[cubic-bezier(0.95,0.05,0.795,0.035)] hover:transition-all group-hover:visible group-hover:-top-16 group-hover:scale-100 motion-reduce:transition-none">
               {"Now Open Source!"}
               <br />
