Update signup page default plan to 'pro', adjust annual pricing state, and refine button focus ring color for improved UI consistency across components.

Author: goldflag

client/src/app/signup/page.tsx

@@ -50,7 +50,7 @@ function SignupPageContent() {
   // Plan selection (cloud step 2)
   const [eventLimitIndex, setEventLimitIndex] = useState(0);
   const [isAnnual, setIsAnnual] = useState(true);
-  const [selectedPlan, setSelectedPlan] = useState<"basic" | "standard" | "pro">("standard");
+  const [selectedPlan, setSelectedPlan] = useState<"basic" | "standard" | "pro">("pro");
   const [checkoutClientSecret, setCheckoutClientSecret] = useState<string | null>(null);
 
   // Setup: Organization + website

docs/src/components/CTASection.tsx

@@ -66,7 +66,7 @@ export function CTASection({
                 href={primaryButtonHref}
                 eventName="signup"
                 eventProps={{ location: eventLocation, button_text: resolvedPrimaryButtonText }}
-                className="w-full whitespace-nowrap sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white font-medium px-6 py-3 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 cursor-pointer"
+                className="w-full whitespace-nowrap sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white font-medium px-6 py-3 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-200 focus:ring-opacity-50 cursor-pointer"
               >
                 {resolvedPrimaryButtonText}
               </TrackedButton>

docs/src/components/CustomHeader.tsx

@@ -111,7 +111,7 @@ export function CustomHeader() {
             <AppLink href="https://app.rybbit.io/signup" target="_blank">
               <button
                 onClick={() => trackAdEvent("signup", { location: "header" })}
-                className="bg-emerald-600 hover:bg-emerald-500 text-neutral-900 dark:text-white text-sm font-medium px-3 py-1.5 rounded-md transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-opacity-50"
+                className="bg-emerald-600 hover:bg-emerald-500 text-neutral-900 dark:text-white text-sm font-medium px-3 py-1.5 rounded-md transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-200 focus:ring-opacity-50"
               >
                 {t("Sign up")}
               </button>

docs/src/components/HeroSection.tsx

@@ -66,7 +66,7 @@ export function HeroSection({
               href="https://app.rybbit.io/signup"
               eventName="signup"
               eventProps={{ location: "hero", button_text: "get started" }}
-              className="w-full whitespace-nowrap sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white font-medium px-6 py-3 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 cursor-pointer"
+              className="w-full whitespace-nowrap sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white font-medium px-6 py-3 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-200 focus:ring-opacity-50 cursor-pointer"
             >
               {t("Start for $0")}
             </TrackedButton>

docs/src/components/LandingPricing.tsx

@@ -4,6 +4,6 @@ import { useState } from "react";
 import { PricingSection } from "./PricingSection";
 
 export function LandingPricing() {
-  const [isAnnual, setIsAnnual] = useState(false);
+  const [isAnnual, setIsAnnual] = useState(true);
   return <PricingSection isAnnual={isAnnual} setIsAnnual={setIsAnnual} />;
 }

docs/src/components/PricingCard.tsx

@@ -96,7 +96,7 @@ export function PricingCard({
                   className={cn(
                     "w-full font-medium px-5 py-3 rounded-lg transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-opacity-50 cursor-pointer",
                     isPrimary
-                      ? "bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-900/20 focus:ring-emerald-500 disabled:opacity-50 disabled:pointer-events-none"
+                      ? "bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-900/20 focus:ring-emerald-200 disabled:opacity-50 disabled:pointer-events-none"
                       : "bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 text-neutral-900 dark:text-white"
                   )}
                 >