Jan landing page updates (#1050)

* AI landing page. Update contact forms

* Clone durable workflows page

* Adjust pricing breakpoint

.gitignore

@@ -35,3 +35,5 @@
 # Nix
 /.direnv/
 .env*.local
+
+cdn

app/ai/page.tsx

@@ -28,13 +28,25 @@ export const metadata: Metadata = generateMetadata({
 const ref = "ai-landing-page";
 
 export default function Page() {
+  return <AIPage />;
+}
+
+export function AIPage({
+  heroCTAs,
+  heroFeature,
+  showCTAs = true,
+}: {
+  heroCTAs?: { href: string; text: string }[];
+  heroFeature?: React.ReactNode;
+  showCTAs?: boolean;
+}) {
   return (
     <div className="relative text-basis">
       {/* The background needs to be here with negative position to bleed under the header nav */}
       <div className="absolute z-0 top-[-84px] w-full h-[200vw] sm:h-[calc(100vw/1728*1219)] bg-[url(/assets/ai/2024-11-27-hero-background.png)] bg-cover bg-no-repeat bg-top"></div>
 
       <div className="relative z-10">
-        <Hero />
+        <Hero ctas={heroCTAs} featured={heroFeature} />
 
         <div className="my-12 flex flex-col gap-6 items-center sm:pb-8">
           <p className="mx-8 text-sm text-balance text-subtle">
@@ -168,12 +180,16 @@ export default function Page() {
           <Feature
             heading="Simplified orchestration"
             text="Define complex AI workflows in code, including agentic orchestration, and let the AgentKit handle the heavy lifting of managing dependencies, retries, and failures with ease."
-            ctas={[
-              {
-                href: `https://agentkit.inngest.com/?ref=${ref}`,
-                text: "Get started",
-              },
-            ]}
+            ctas={
+              showCTAs
+                ? [
+                    {
+                      href: `https://agentkit.inngest.com/?ref=${ref}`,
+                      text: "Get started",
+                    },
+                  ]
+                : []
+            }
             content={{
               code: {
                 snippet: `// Define simple agents
@@ -346,36 +362,59 @@ export default inngest.createFunction(
           />
         </section>
 
-        <section>
-          <div className="mt-12 px-6 flex items-center justify-center tracking-tight text-basis text-center">
-            <div className="max-w-xl mx-auto mt-4 flex flex-col gap-6">
-              <H2>AI early access program</H2>
-              <p className="text-lg md:text-xl">
-                Be the first to get access to and stay in the loop about our
-                latest AI features, including <code>step.ai</code>,{" "}
-                <strong>AgentKit</strong> and more.
-              </p>
-              <CTA
-                href={`ai/early-access?ref=${ref}`}
-                text="Sign up for early access"
-              />
+        {showCTAs && (
+          <section>
+            <div className="mt-12 px-6 flex items-center justify-center tracking-tight text-basis text-center">
+              <div className="max-w-xl mx-auto mt-4 flex flex-col gap-6">
+                <H2>AI early access program</H2>
+                <p className="text-lg md:text-xl text-balance">
+                  Be the first to get access to and stay in the loop about our
+                  latest AI features, including <code>step.ai</code>,{" "}
+                  <strong>AgentKit</strong> and more.
+                </p>
+                <CTA
+                  href={`ai/early-access?ref=${ref}`}
+                  text="Sign up for early access"
+                />
+              </div>
             </div>
-          </div>
-          <img
-            className="max-w-6xl w-full mx-auto"
-            src="/assets/ai/early-access-isometric-ui-image.png"
-          />
-        </section>
+            <img
+              className="max-w-6xl w-full mx-auto"
+              src="/assets/ai/early-access-isometric-ui-image.png"
+            />
+          </section>
+        )}
       </div>
     </div>
   );
 }
 
-function Hero() {
+function Hero({
+  ctas = [
+    {
+      href: `/ai/early-access?ref=${ref}`,
+      text: "Sign up for early access",
+      variant: "primary",
+    },
+    {
+      href: `/docs/features/inngest-functions/steps-workflows/step-ai-orchestration?ref=${ref}`,
+      text: "Explore the docs",
+      variant: "link",
+    },
+  ],
+  featured,
+}: {
+  ctas?: {
+    href: string;
+    text: string | React.ReactNode;
+    variant?: "primary" | "link";
+  }[];
+  featured?: React.ReactNode;
+}) {
   return (
     <div className="py-8 px-4 sm:px-auto mx-auto max-w-[1728px] grid md:grid-cols-2 gap-12">
       <div className="flex flex-row items-center justify-end text-center md:text-left">
-        <div className="flex flex-col gap-8 md:pl-4 lg:max-w-[580px] shrink">
+        <div className="flex flex-col gap-8 md:pl-4 md:py-8 lg:max-w-[580px] shrink">
           <H1 variant="contrast">
             Ship AI workflows and Agents to production faster
           </H1>
@@ -386,25 +425,25 @@ function Hero() {
             backend complexity.
           </p>
           <div className="flex flex-row flex-wrap gap-4 justify-center md:justify-start">
-            <Button variant="primary" href={`/ai/early-access?ref=${ref}`}>
-              Sign up for early access
-            </Button>
-            <Button
-              variant="link"
-              href={`/docs/features/inngest-functions/steps-workflows/step-ai-orchestration?ref=${ref}`}
-            >
-              Explore the docs <RiArrowRightLine className="h-4 w-4" />
-            </Button>
+            {ctas.map((cta) => (
+              <Button variant={cta.variant} href={cta.href}>
+                {cta.text}
+              </Button>
+            ))}
           </div>
         </div>
       </div>
-      <Image
-        className="px-4 sm:px-0"
-        src="/assets/ai/2024-11-27-hero-image.png"
-        alt="Mosaic screenshot of the Inngest dashboard showing a trace view for an AI workflow"
-        width={941}
-        height={621}
-      />
+      {featured ? (
+        featured
+      ) : (
+        <Image
+          className="px-4 sm:px-0"
+          src="/assets/ai/2024-11-27-hero-image.png"
+          alt="Mosaic screenshot of the Inngest dashboard showing a trace view for an AI workflow"
+          width={941}
+          height={621}
+        />
+      )}
     </div>
   );
 }

pages/contact.tsx → app/contact/page.tsx

@@ -1,25 +1,20 @@
-import Header from "src/shared/Header";
+import { type Metadata } from "next";
+
 import Container from "src/shared/layout/Container";
-import Footer from "src/shared/Footer";
-import Quote from "src/shared/Home/Quote";
+import Quote from "src/components/Quote";
 import ContactForm from "src/components/ContactForm";
 import { RiLifebuoyLine } from "@remixicon/react";
+import { generateMetadata } from "src/utils/social";
 
-export async function getStaticProps() {
-  return {
-    props: {
-      meta: {
-        title: "Chat with solutions engineering",
-      },
-      designVersion: "2",
-    },
-  };
-}
+export const metadata: Metadata = generateMetadata({
+  title: "Schedule a demo",
+  description:
+    "Schedule a demo with a solutions expert to learn more about Inngest.",
+});
 
-export default function Contact() {
+export default function Page() {
   return (
     <div className="font-sans text-basis">
-      <Header />
       <Container>
         <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">
@@ -68,18 +63,18 @@ export default function Contact() {
                   title: "CEO @ Ocoya",
                   avatar: "/assets/customers/ocoya-aivaras-tumas.png",
                 }}
-                variant="vertical"
-                className="p-0 md:p-0 pb-4 md:px-0 md:pt-4 md:pr-2"
+                variant="no-padding"
+                className="pb-8 rounded-none border-b border-subtle"
               />
-              <div className="flex flex-row gap-4 items-center my-8 text-lg text-indigo-50/80">
+              <div className="flex flex-row gap-4 items-center my-8 text-lg text-subtle">
                 <img
                   src="/assets/compliance/soc2.webp"
                   alt="SOC 2"
                   className="h-16 w-16"
                 />
                 <p>Inngest is SOC 2 Type II compliant.</p>
               </div>
-              <p className="mt-8 mb-6 text-lg font-semibold text-indigo-50/80">
+              <p className="mt-12 mb-6 text-lg font-semibold text-subtle">
                 Trusted by
               </p>
               <div className="flex flex-row flex-wrap gap-8">
@@ -103,7 +98,6 @@ export default function Contact() {
           </div>
         </main>
       </Container>
-      <Footer />
     </div>
   );
 }

app/landing/ai/page.tsx

@@ -0,0 +1,60 @@
+import type { Metadata } from "next";
+import { AIPage } from "src/app/ai/page";
+import ContactForm from "src/components/ContactForm";
+import { generateMetadata } from "src/utils/social";
+import { H2 } from "src/components/LandingPage/Heading";
+
+export const metadata: Metadata = generateMetadata({
+  // Prevent Google from indexing landing pages which may have
+  // duplicate and/or temporary content
+  robots: "noindex",
+  title: "AI",
+  description:
+    "Orchestration for AI workflows and AI agents. Build, iterate and ship to production with confidence.",
+});
+
+export default function Page() {
+  return (
+    <>
+      <AIPage
+        heroCTAs={[]}
+        heroFeature={
+          <ContactForm
+            className="max-w-md w-full mx-auto"
+            eventName="contact.form.sent"
+            eventVersion="2023-12-12.1"
+            gtmEvent="Sales Lead Form Submitted"
+            button="Schedule a call"
+            redirectTo="https://savvycal.com/inngest/demo"
+          />
+        }
+        showCTAs={false}
+      />
+      <section>
+        <div className="mt-12 px-6 flex items-center justify-center tracking-tight text-basis text-center">
+          <div className="max-w-xl mx-auto mt-4 flex flex-col gap-6">
+            <H2>Schedule a call</H2>
+            <p className="text-lg md:text-xl text-balance">
+              We're here to help you with any questions you have about Inngest
+              and AI.
+            </p>
+            <div className="text-left">
+              <ContactForm
+                className="max-w-md w-full mx-auto"
+                eventName="contact.form.sent"
+                eventVersion="2023-12-12.1"
+                gtmEvent="Sales Lead Form Submitted"
+                button="Schedule a call"
+                redirectTo="https://savvycal.com/inngest/demo"
+              />
+            </div>
+          </div>
+        </div>
+        <img
+          className="max-w-6xl w-full mx-auto"
+          src="/assets/ai/early-access-isometric-ui-image.png"
+        />
+      </section>
+    </>
+  );
+}

app/landing/durable-workflows/page.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import { DurableWorkflowsPage } from "src/app/uses/durable-workflows/page";
+import { generateMetadata } from "src/utils/social";
+import ContactForm from "src/components/ContactForm";
+
+export const metadata: Metadata = generateMetadata({
+  // Prevent Google from indexing landing pages which may have
+  // duplicate and/or temporary content
+  robots: "noindex",
+  title: "Durable Workflows",
+  description:
+    "Write complex workflows as code and let Inngest handle the rest. Inngest manages state, retries, logging and observability for you.",
+});
+
+const baseCTA = "landing-durable-workflows";
+
+export default function Page() {
+  return (
+    <>
+      <DurableWorkflowsPage
+        cta={{
+          href: `/contact?ref=${baseCTA}`,
+          text: "Schedule a demo",
+        }}
+      />
+    </>
+  );
+}

app/layout.tsx

@@ -62,7 +62,7 @@ export default function RootLayout({
 
         <Nav />
 
-        <main>{children}</main>
+        <main className="text-basis">{children}</main>
 
         <Footer disableCta={true} />
 

app/pricing/PlanCard.tsx

@@ -66,9 +66,10 @@ export default function PlanCard({
           `h-full py-8 px-6 border bg-canvasBase`,
           content.recommended ? "border-matcha-400" : "border-muted",
           `rounded-2xl`,
-          idx === 0 && "xl:rounded-r-none",
-          idx > 0 && idx < total - 1 && "xl:rounded-none",
-          idx === total - 1 && "xl:rounded-l-none"
+          // Match the flexbox changes in the parent
+          idx === 0 && "lg:rounded-r-none",
+          idx > 0 && idx < total - 1 && "lg:rounded-none",
+          idx === total - 1 && "lg:rounded-l-none"
         )}
       >
         {content.recommended && (
@@ -81,7 +82,9 @@ export default function PlanCard({
         {/* Prevent weird button wrap on enterprise from mis-aligning rows */}
         <div className="sm:min-h-[272px] min-[933px]:min-h-[252px] min-[1272px]:min-h-0">
           <h2 className="text-3xl font-semibold">{content.name}</h2>
-          <p className="text-sm pt-2">{content.description}</p>
+          <p className="text-sm pt-2 md:min-h-[4.4rem]">
+            {content.description}
+          </p>
           {content.cost.between ? (
             <p className="uppercase font-bold text-xs bg-gradient-to-b from-matcha-400 to-breeze-400 bg-clip-text text-transparent pt-4">
               Between

app/pricing/page.tsx

@@ -44,7 +44,7 @@ export default function Pricing() {
           From early-stage startups to scaling enterprises, Inngest has you
           covered. Get started for free today.
         </p>
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-2 xl:gap-4 xl:gap-x-0 text-center mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-4 lg:gap-x-0 text-center mb-8">
           {PLANS.filter((p) => p.hideFromCards !== true).map((p, idx) => (
             <PlanCard key={p.name} content={p} idx={idx} total={PLANS.length} />
           ))}