Pricing Landing Hero

import { PricingLandingHero } from "@/components/ruixen/pricing-landing-hero";
 
export default function App() {
  return (
    <PricingLandingHero
      title={
        <>
          Landing pages
          <br />
          for startups
        </>
      }
      description="Web & mobile designs delivered in Figma within 3–5 days. No templates, no back-and-forth."
      phone={{
        time: "9:41",
        items: [
          { title: "Add a Title...", description: "Add a description..." },
          { title: "Ship on Monday", description: "Final designs ready." },
        ],
      }}
      price={{ current: "$850", original: "$2,000" }}
      availability="Only 5 spots available"
      primaryAction={{ label: "Get yours now", href: "/checkout" }}
      secondaryAction={{ label: "Send a message", href: "/contact" }}
      trustedBy={{
        heading: "Trusted by",
        logos: [<span key="a">AgentMail</span>, <span key="b">dot</span>],
      }}
    />
  );
}

interface PhoneMockupProps {
  /** Time shown in the status bar. */
  time?: string; // default "9:41"
  /** Sheet items to cycle through (crossfade with spring). */
  items?: Array<{ title: string; description: string }>;
  /** Interval between item transitions (ms). */
  cycleMs?: number; // default 2800
}

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

interface PriceBlock {
  current: string;
  original?: string;
}

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