Improved the Trigger.dev messaging

Author: D-K-P

app/assets/images/trigger-dev-laptop.png

@@ -8,6 +8,8 @@ import { ThemeModeToggler } from "./ThemeModeToggle";
 import { GithubStarSmall } from "./UI/GithubStarSmall";
 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";
 
 export function Footer() {
   const { minimal } = useJsonDoc();
@@ -67,14 +69,29 @@ function WorkflowFooterBanner() {
     <a
       href="https://trigger.dev"
       target="_blank"
-      className="hover:underline text-sm lg:text-md whitespace-nowrap flex group hover:cursor-pointer text-slate-900 dark:text-white transition items-center"
+      className="group  text-md  lg:text-md whitespace-nowrap flex group hover:cursor-pointer transition items-center"
     >
-      <span className="hidden lg:flex"> Trigger.dev -&nbsp;</span> Effortless
-      automation built for developers.
-      <span className="pl-0.5 font-extrabold text-transparent whitespace-nowrap bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500">
-        Sign up now
+      <div className="dark:hidden">
+        <TriggerDevLogoDark className="flex w-24 mr-2 mt-0.5" />
+      </div>
+      <div className="dark:block hidden">
+        <TriggerDevLogo className="flex w-24 mr-2 mt-0.5" />
+      </div>
+      <span className="lg:block hidden  text-slate-700 group-hover:text-slate-900 dark:text-slate-200 dark:group-hover:text-slate-100 transition">
+        Create reliable workflows in code:
       </span>
-      <ArrowRightIcon className="ml-1 h-2 w-2 text-base text-slate-900 dark:text-white transition" />
+      <span className="flex  items-center underline underline-offset-2 pl-0.5 font-extrabold text-purple-500 whitespace-nowrap transition group-hover:text-purple-600 dark:group-hover:text-purple-400">
+        Check it out
+      </span>
+      <ArrowRightIcon className="ml-1 h-3 w-3 text-base text-purple-500 whitespace-nowrap group-hover:text-purple-600 dark:group-hover:text-purple-400 transition" />
     </a>
   );
 }
+
+function TriggerDevLogoDark({ className }: { className: string }) {
+  return <img src={TriggerDevLogoImageDark} className={className} />;
+}
+
+function TriggerDevLogo({ className }: { className: string }) {
+  return <img src={TriggerDevLogoImage} className={className} />;
+}

app/assets/images/trigger-dev-logo-dark.png

@@ -1,33 +1,49 @@
-import { ArrowSmRightIcon } from "@heroicons/react/outline";
+import {
+  ArrowSmRightIcon,
+  CalendarIcon,
+  CheckCircleIcon,
+  CodeIcon,
+} from "@heroicons/react/outline";
 import TriggerDevLogoImage from "~/assets/images/trigger-dev-logo.png";
-import TriggerDevLaptopImage from "~/assets/images/trigger-dev-laptop.png";
 
 export function HomeTriggerDevBanner() {
   return (
-    <div className="flex items-center justify-start md:justify-center w-full h-40 bg-gradient-to-r from-purple-600 via-[#485cec] to-purple-600 hover:backdrop-filter hover:backdrop-brightness-75 transition">
-      <div className="relative flex justify-center items-center w-1/2 md:w-full pl-6 md:px-6">
-        <div className="flex flex-col items-start justify-start">
+    <div className="flex items-center justify-start sm:justify-center w-full py-4 bg-gradient-to-r from-purple-600 via-[#485cec] to-purple-600 hover:backdrop-filter hover:backdrop-brightness-75 transition">
+      <div className="w-full relative flex flex-col sm:flex-row justify-center items-center sm:px-6 px-4 gap-y-4">
+        <div className="flex flex-col">
           <a href="https://trigger.dev" target="_blank" className="mb-1">
-            <TriggerDevLogo className="w-64"></TriggerDevLogo>
+            <TriggerDevLogo className="w-48"></TriggerDevLogo>
           </a>
-          <p className="text-white md:text-xl text-sm">
-            Effortless automation built for developers.
+          <p className="text-white sm:text-lg text-lg">
+            We're building something new!
           </p>
           <a
             href="https://trigger.dev"
             target="_blank"
-            className="flex items-center justify-center w-full px-3 py-2 mt-2 text-center text-md md:text-xl text-slate-800 font-bold bg-lime-500 rounded shadow-md hover:bg-lime-400 transition"
+            className="flex items-center justify-center w-full px-3 py-2 mt-2 text-center text-xl sm:text-xl text-slate-800 font-bold bg-lime-500 rounded shadow-sm hover:bg-lime-400 transition"
           >
-            Sign up <ArrowSmRightIcon className="w-6 h-6 ml-1" />
+            Check it out <ArrowSmRightIcon className="w-6 h-6 ml-1" />
           </a>
         </div>
-        <a
-          href="https://trigger.dev"
-          target="_blank"
-          className="absolute md:relative -top-10 md:top-auto -right-[20rem] md:right-auto"
-        >
-          <TriggerDevLaptop className="w-80 md:w-80 mb-2"></TriggerDevLaptop>
-        </a>
+        <div className="text-white sm:text-lg text-lg pl-8">
+          <p className="font-bold ">
+            Create reliable workflows in your codebase:
+          </p>
+          <p className="sm:text-md text-lg">
+            <li className="flex items-center gap-2">
+              <CodeIcon className="w-6 h-6 text-lime-400" /> Version controlled,
+              keep your own data secure.
+            </li>
+            <li className="flex items-center gap-2">
+              <CheckCircleIcon className="w-6 h-6 text-lime-400" />
+              Popular integrations with easy authentication.
+            </li>
+            <li className="flex items-center gap-2">
+              <CalendarIcon className="w-6 h-6 text-lime-400" />
+              Easy CRON jobs, webhooks and custom events.
+            </li>
+          </p>
+        </div>
       </div>
     </div>
   );
@@ -36,7 +52,3 @@ export function HomeTriggerDevBanner() {
 function TriggerDevLogo({ className }: { className: string }) {
   return <img src={TriggerDevLogoImage} className={className} />;
 }
-
-function TriggerDevLaptop({ className }: { className: string }) {
-  return <img src={TriggerDevLaptopImage} className={className} />;
-}