Improved the footer responsiveness

Author: D-K-P

app/assets/images/td-triangle.png

@@ -10,6 +10,7 @@ import { IndentPreference } from "~/components/IndentPreference";
 import { ArrowRightIcon } from "@heroicons/react/outline";
 import TriggerDevLogoImageDark from "~/assets/images/trigger-dev-logo-dark.png";
 import TriggerDevLogoImage from "~/assets/images/trigger-dev-logo.png";
+import TriggerDevLogoTriangleImage from "~/assets/images/td-triangle.png";
 
 export function Footer() {
   const { minimal } = useJsonDoc();
@@ -69,19 +70,21 @@ function WorkflowFooterBanner() {
     <a
       href="https://trigger.dev"
       target="_blank"
-      className="group  text-lg lg:text-lg whitespace-nowrap flex group hover:cursor-pointer transition items-center  px-2 h-full rounded-full"
+      className="group md:text-base lg:text-lg whitespace-nowrap flex group hover:cursor-pointer transition items-center justify-center px-2 h-full rounded-full"
     >
-      <div className="dark:hidden">
-        <TriggerDevLogoDark className="w-24 mr-2 mt-0.5" />
+      <div className="dark:hidden pt-0.5">
+        <TriggerDevLogoDark className="lg:flex hidden w-24 mr-2 mt-0.5" />
       </div>
       <div className="dark:block hidden">
-        <TriggerDevLogo className="w-24 mr-2 mt-0.5" />
+        <TriggerDevLogo className="lg:flex hidden w-24 mr-2 mt-0.5" />
       </div>
+      <TriggerDevLogoTriangle className="lg:hidden w-4 h-4 flex mr-2 mt-0.5 " />
+
       <span className="items-center lg:flex sm:flex hidden underline underline-offset-2 text-slate-700 group-hover:text-slate-900 dark:text-slate-300 dark:group-hover:text-slate-100 transition">
-        <span className="lg:block hidden">- the &nbsp;</span> background jobs
+        <span className="lg:block hidden">the&nbsp;</span>background jobs
         <span className="lg:block hidden">&nbsp;framework&nbsp;</span> for
         Next.js
-        <ArrowRightIcon className="flex ml-1 h-3 w-3 text-base text-green-900 dark:text-green-500 whitespace-nowrap group-hover:text-green-900 dark:group-hover:text-green-400 transition" />
+        <ArrowRightIcon className="ml-1 h-3 w-3  text-base text-green-900 dark:text-green-500 whitespace-nowrap group-hover:text-green-900 dark:group-hover:text-green-400 transition" />
       </span>
     </a>
   );
@@ -94,3 +97,7 @@ function TriggerDevLogoDark({ className }: { className: string }) {
 function TriggerDevLogo({ className }: { className: string }) {
   return <img src={TriggerDevLogoImage} className={className} />;
 }
+
+function TriggerDevLogoTriangle({ className }: { className: string }) {
+  return <img src={TriggerDevLogoTriangleImage} className={className} />;
+}