Add optional floating CTA for blog posts (#1018)

inngest · Dec 5, 2024 · 15cf28d · 15cf28d
1 parent 6adf908
commit 15cf28d
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 18 deletions.
diff --git a/components/Blog/FloatingCTA.tsx b/components/Blog/FloatingCTA.tsx
@@ -0,0 +1,100 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import clsx from "clsx";
+import {
+  RiArrowRightSLine,
+  RiArrowDownSLine,
+  RiChat1Line,
+} from "@remixicon/react";
+
+export default function FloatingCTA({ ctaRef }: { ctaRef: string }) {
+  const [open, setOpen] = useState<boolean>(true);
+  const [mobileOpen, setMobileOpen] = useState<boolean>(false);
+  return (
+    <aside className="fixed bottom-2 right-2">
+      {/* Desktop is default open */}
+      <div
+        className={clsx(
+          "hidden sm:block",
+          "group relative border border-subtle hover:border-muted rounded-lg text-sm text-basis transition-all bg-canvasBase/20 backdrop-blur-sm cursor-default overflow-hidden",
+          open ? "h-[86px] w-[220px] p-3" : "h-[38px] w-[176px] p-2"
+        )}
+      >
+        <div
+          className={clsx(
+            "flex flex-col gap-3 transition-all"
+            // !open && "translate-y-10"
+          )}
+        >
+          <span className="pr-6">Interested in Inngest?</span>
+          <Link
+            href={`/contact?ref=${ctaRef}`}
+            className={clsx(
+              "flex flex-row gap-1 rounded-md items-center pl-4 pr-3 py-1 bg-cta group-hover:bg-ctaHover text-carbon-1000 font-medium text-onContrast transition-all text-nowrap",
+              open ? "opacity-100" : "opacity-0"
+            )}
+          >
+            Talk to a product expert <RiArrowRightSLine className="w-3 h-3" />{" "}
+          </Link>
+        </div>
+        <button
+          className={clsx(
+            "absolute transition-all",
+            open ? "top-3 right-3" : "top-2.5 right-2.5"
+          )}
+          onClick={() => setOpen(!open)}
+        >
+          <RiArrowDownSLine
+            className={clsx("w-4 h-4 transition-all", !open && "rotate-180")}
+          />
+        </button>
+      </div>
+      {/* Mobile is default closed */}
+      <div
+        className={clsx(
+          "sm:hidden",
+          "group relative border border-subtle hover:border-muted rounded-lg text-sm text-basis transition-all bg-canvasBase/20 backdrop-blur-sm cursor-default overflow-hidden",
+          mobileOpen ? "h-[86px] w-[220px] p-3" : "h-[38px] w-[140px] p-2"
+        )}
+      >
+        <div
+          className={clsx(
+            "flex flex-col gap-3 transition-all"
+            // !open && "translate-y-10"
+          )}
+        >
+          <button
+            className="pr-6 flex flex-row items-center gap-1"
+            onClick={() => setMobileOpen(!mobileOpen)}
+          >
+            <RiChat1Line className="w-4 h-4" /> Chat with us
+          </button>
+          <Link
+            href={`/contact?ref=${ctaRef}`}
+            className={clsx(
+              "flex flex-row gap-1 rounded-md items-center pl-4 pr-3 py-1 bg-cta group-hover:bg-ctaHover text-carbon-1000 font-medium text-onContrast transition-all text-nowrap",
+              open ? "opacity-100" : "opacity-0"
+            )}
+          >
+            Talk to a product expert <RiArrowRightSLine className="w-3 h-3" />{" "}
+          </Link>
+        </div>
+        <button
+          className={clsx(
+            "absolute transition-all",
+            mobileOpen ? "top-3 right-3" : "top-2.5 right-2.5"
+          )}
+          onClick={() => setMobileOpen(!mobileOpen)}
+        >
+          <RiArrowDownSLine
+            className={clsx(
+              "w-4 h-4 transition-all",
+              !mobileOpen && "rotate-180"
+            )}
+          />
+        </button>
+      </div>
+    </aside>
+  );
+}
diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx
@@ -59,7 +59,7 @@ export default function ContactForm({
   return (
     <form
       onSubmit={onSubmit}
-      className="p-6 bg-surfaceSubtle flex flex-col items-start gap-4 rounded-lg border border-subtle"
+      className="p-4 sm:p-6 bg-surfaceSubtle flex flex-col items-start gap-4 rounded-lg border border-subtle"
     >
       <label className="w-full flex flex-col gap-2">
         Your name
@@ -102,10 +102,9 @@ export default function ContactForm({
           <option value="" disabled>
             Select an option
           </option>
-          <option value="1">Just Me</option>
           <option value="2-9">2-9</option>
-          <option value="10-30">10-20</option>
-          <option value="20-99">20-99</option>
+          <option value="10-30">10-30</option>
+          <option value="30-99">30-99</option>
           <option value="100+">100+</option>
         </select>
       </label>

diff --git a/data/github.json b/data/github.json
@@ -1,4 +1,4 @@
 {
-  "__generated": "File generated at 2024-11-22T19:48:40.956Z",
-  "stars": 2957
+  "__generated": "File generated at 2024-12-05T19:06:57.597Z",
+  "stars": 3019
 }
diff --git a/package.json b/package.json
@@ -132,9 +132,9 @@
   },
   "engines": {
     "node": "18.x",
-    "pnpm": "8.x"
+    "pnpm": "9.x"
   },
-  "packageManager": "pnpm@8.7.0",
+  "packageManager": "pnpm@9.14.4",
   "private": true,
   "pnpm": {
     "patchedDependencies": {

diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
@@ -23,6 +23,7 @@ import rehypeCodeTitles from "rehype-code-titles";
 import YouTube from "react-youtube-embed";
 import remarkGfm from "remark-gfm";
 import { SectionProvider } from "src/shared/Docs/SectionProvider";
+import FloatingCTA from "src/components/Blog/FloatingCTA";
 // import { LaunchWeekBanner } from "../index";
 
 // @ts-ignore
@@ -85,6 +86,7 @@ type Scope = {
   dateUpdated?: string;
 
   primaryCTA?: "sales" | "docs";
+  floatingCTA?: boolean;
 
   reading: {
     text: string;
@@ -192,7 +194,7 @@ export default function BlogLayout(props) {
         {/* <LaunchWeekBanner urlRef="blog-post-banner" /> */}
         <Container>
           <article>
-            <main className="m-auto max-w-3xl pt-16">
+            <main className="m-auto max-w-3xl pt-16 relative">
               {scope.image && (
                 <figure className="mx-auto flex flex-col items-end max-w-[768px]">
                   <Image
@@ -261,6 +263,7 @@ export default function BlogLayout(props) {
                 </SectionProvider>
                 <CTAs primary={primaryCTA} ctaRef={`blog-${slug}`} />
               </div>
+              {scope.floatingCTA && <FloatingCTA ctaRef={`blog-${slug}`} />}
             </main>
           </article>
         </Container>
@@ -300,7 +303,7 @@ function CTAs({
   const visibleCTAs =
     primary === "sales" ? [ctas.sales, ctas.docs] : [ctas.docs, ctas.sales];
   return (
-    <div className="max-w-[70ch] grid sm:grid-cols-2 gap-16 border-t-[2px] border-slate-800 pt-16 m-auto text-indigo-500">
+    <aside className="max-w-[70ch] grid sm:grid-cols-2 gap-16 border-t-[2px] border-slate-800 pt-16 m-auto text-indigo-500">
       {visibleCTAs.map((c, idx) => (
         <div key={idx} className="flex flex-col items-start">
           <h2 className="text-basis text-xl font-medium mt-6">{c.title}</h2>
@@ -316,7 +319,7 @@ function CTAs({
           </Button>
         </div>
       ))}
-    </div>
+    </aside>
   );
 }
 

diff --git a/pages/blog/_posts/simplifying-queues-modern-kafka-alternative.mdx b/pages/blog/_posts/simplifying-queues-modern-kafka-alternative.mdx
@@ -4,6 +4,8 @@ subtitle: Build reliable event-driven workflows with a streamlined developer exp
 image: /assets/blog/simplifying-queues-modern-kafka-alternative/featured-image.png
 date: 2024-11-26
 author: Cheryl Manalo
+primaryCTA: sales
+floatingCTA: true
 ---
 
 Kafka is a common choice for distributed streaming, powering everything from event-driven architectures to  real-time data pipelines. It's scalable, reliable, and has a massive community. Because of this, teams looking for resilient, scalable messaging often lean into Kafka for their queuing needs, assuming it can seamlessly handle these workloads too. But the truth is—Kafka wasn't really designed for traditional queuing.

diff --git a/pages/blog/_posts/why-your-queue-is-slowing-you-down.mdx b/pages/blog/_posts/why-your-queue-is-slowing-you-down.mdx
@@ -5,6 +5,7 @@ image: /assets/blog/why-your-queue-is-slowing-you-down/featured-image-v2.png
 date: 2024-10-28
 author: Tony Holdstock-Brown
 primaryCTA: sales
+floatingCTA: true
 ---
 
 If you're building complex products, you're probably using some sort of queueing system. Traditional queues help with scale, job scheduling, and managing background jobs — but as products become complex, traditional queuing systems start to fall short.  While they work for basic message delivery and job processing, they often lack the higher-level abstractions required to build complex workflows. Things like workflow orchestration, multi-tenancy, and native throttling are being built into every product.

diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -3,6 +3,7 @@ import Container from "src/shared/layout/Container";
 import Footer from "src/shared/Footer";
 import Quote from "src/shared/Home/Quote";
 import ContactForm from "src/components/ContactForm";
+import { RiLifebuoyLine } from "@remixicon/react";
 
 export async function getStaticProps() {
   return {
@@ -20,19 +21,20 @@ export default function Contact() {
     <div className="font-sans text-basis">
       <Header />
       <Container>
-        <main className="m-auto max-w-5xl pt-16 pb-8">
+        <main className="m-auto max-w-5xl pt-4 sm:pt-16 pb-8">
           <header className="pt-12 lg:pt-24 max-w-4xl m-auto text-center">
             <h1 className="text-white font-bold text-2xl md:text-4xl xl:text-5xl mb-2 md:mb-6 tracking-tight lg:leading-loose">
               Chat with sales engineering
             </h1>
             <p className="text-balance">
-              We'll help you evaluate Inngest and show you how Inngest enables
-              teams to ship more reliable code, faster.
+              Explore and evaluate Inngest and learn about custom Enterprise
+              plans and pricing.
             </p>
 
-            <div className="flex place-content-center">
-              <p className="mt-4 py-4 px-6 rounded-full bg-white/10 flex gap-2 items-center">
-                👋&nbsp;&nbsp; Looking for support?{" "}
+            <div className="hidden sm:flex place-content-center">
+              <p className="mt-4 py-2 px-3 rounded-md bg-white/5 gap-2 items-center">
+                <RiLifebuoyLine className="w-4 h-4 inline -translate-y-px mr-1" />{" "}
+                Looking for support?{" "}
                 <a href="/discord" className="font-medium hover:underline">
                   Chat on Discord
                 </a>{" "}

diff --git a/styles/globals.css b/styles/globals.css
@@ -73,7 +73,7 @@
 
   /* Default to dark theme */
   color: #fff;
-  background-color: #080D19;
+  background-color: rgb(var(--color-background-canvas-base));
 }
 
 /* Legacy base styles */