Split Hero Section

import { SplitHeroSection } from "@/components/ruixen/split-hero-section";
 
export default function App() {
  return (
    <SplitHeroSection
      title="Payments infrastructure for SaaS"
      description="One tool that does it all. Search, generate, analyze, and chat."
      primaryAction={{ href: "/get-started", label: "Start Building" }}
      secondaryAction={{ href: "/demo", label: "Request demo" }}
      stats={[
        {
          value: "99.9",
          unit: "%",
          label: (
            <>
              <strong className="font-medium text-foreground">
                Uptime guarantee
              </strong>{" "}
              for all our services.
            </>
          ),
        },
        {
          value: "12",
          unit: "X",
          label: (
            <>
              <strong className="font-medium text-foreground">12X</strong>{" "}
              faster processing.
            </>
          ),
        },
      ]}
      trustedBy={{
        logos: [
          <span key="stripe">Stripe</span>,
          <span key="openai">OpenAI</span>,
        ],
      }}
    />
  );
}

type Action = {
  href: string;
  label: string;
};

interface Stat {
  value: string;
  unit?: string;
  label: React.ReactNode;
}

interface TrustedBySection {
  logos: React.ReactNode[];
}