Add AI coding agent CTA to Quickstarts page (#5066)

- Link to Develop with AI from the Quickstarts page via a CallToAction banner
- Add a theme-aware light-mode style to the shared CallToAction component (previously dark-only)
- Add optional analyticsId support to CallToAction for click tracking

Author: Duncanma

docs/quickstarts.mdx

@@ -6,7 +6,7 @@ description: Start building with Temporal using language-specific quickstarts.
 hide_table_of_contents: true
 ---
 
-import { QuickstartCards } from '@site/src/components';
+import { QuickstartCards, CallToAction } from '@site/src/components';
 
 # Quickstarts
 
@@ -25,3 +25,8 @@ Choose your language to get started locally. If you're using Temporal Cloud, che
   ]}
 />
 
+<CallToAction href="/with-ai" analyticsId="quickstarts-pair-with-ai-cta">
+  <h3>Pair with an AI coding agent</h3>
+  <p>Give Claude Code, Cursor, or Codex Temporal expertise with Skills and real-time documentation access.</p>
+</CallToAction>
+

src/components/Quickstart/CallToAction/CallToAction.js

@@ -1,9 +1,13 @@
 import React from 'react';
 import styles from './call-to-action.module.css';
 
- export const CallToAction = ({ href, children }) => {
+ export const CallToAction = ({ href, children, analyticsId }) => {
+   const analyticsProps = analyticsId
+     ? { 'data-analytics-id': analyticsId, 'data-analytics-action': 'click' }
+     : {};
+
    return (
-     <a href={href} className={styles.cta}>
+     <a href={href} className={styles.cta} {...analyticsProps}>
        <div className={styles.content}>
          {children}
        </div>

src/components/Quickstart/CallToAction/call-to-action.module.css

@@ -2,41 +2,64 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: linear-gradient(to right, #2e2e60, #1e1e40);
-    border: 1px solid #3b3b7c;
+    background: linear-gradient(to right, #eef0fd, #e4e7fc);
+    border: 1px solid rgba(68, 76, 231, 0.3);
     border-radius: 8px;
     padding: 1.5rem;
     margin: 2rem 0;
-    color: #e6e6fa;
+    color: var(--ifm-color-emphasis-900);
     text-decoration: none;
     transition: all 0.3s ease;
   }
-  
+
   .cta:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     text-decoration: none;
-    color: #e6e6fa;
+    color: var(--ifm-color-emphasis-900);
   }
-  
+
   .content {
     flex: 1;
   }
-  
+
   .content h3 {
     margin: 0;
     font-size: 1.2rem;
-    color: #e6e6fa;
+    color: var(--ifm-color-emphasis-900);
   }
-  
+
   .content p {
     margin: 0.5rem 0 0 0;
-    color: #b4b4d4;
+    color: var(--ifm-color-emphasis-700);
     font-size: 0.95rem;
   }
-  
+
   .arrow {
     font-size: 1.5rem;
     margin-left: 1rem;
+    color: #444CE7;
+  }
+
+  :global([data-theme='dark']) .cta {
+    background: linear-gradient(to right, #2e2e60, #1e1e40);
+    border-color: #3b3b7c;
+    color: #e6e6fa;
+  }
+
+  :global([data-theme='dark']) .cta:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    color: #e6e6fa;
+  }
+
+  :global([data-theme='dark']) .content h3 {
+    color: #e6e6fa;
+  }
+
+  :global([data-theme='dark']) .content p {
+    color: #b4b4d4;
+  }
+
+  :global([data-theme='dark']) .arrow {
     color: #8585ff;
   }