{ "id": "product-launch", "name": "SaaS product launch page", "description": "A complete product launch page adapted from Leopoldo Miranda’s MIT template: layered hero cards, product capabilities, services, workflow, customer perspectives, exact-price billing choices, host-connected updates and native FAQ disclosures.", "category": "Marketing", "blockIds": [], "tags": [ "product launch", "saas landing", "startup", "complete page", "pricing", "newsletter", "产品发布", "SaaS官网", "定价", "完整页面" ], "searchCategories": [ "marketing" ], "featured": true, "style": "clean-saas", "registryId": "recipe-product-launch", "componentName": "ProductLaunchRecipe", "componentSource": "content/recipe-components/product-launch.tsx", "source": { "name": "Shadcn/UI Landing Page Template", "url": "https://github.com/leoMirandaa/shadcn-landing-page", "license": "MIT", "author": "Leopoldo Miranda", "revision": "ae3716dbce5c8a26815222bb743994b5717938f1", "licenseFile": "licenses/third-party/shadcn-landing-MIT.txt", "files": [ "src/App.tsx", "src/components/Navbar.tsx", "src/components/Hero.tsx", "src/components/HeroCards.tsx", "src/components/Sponsors.tsx", "src/components/About.tsx", "src/components/Statistics.tsx", "src/components/HowItWorks.tsx", "src/components/Features.tsx", "src/components/Services.tsx", "src/components/Cta.tsx", "src/components/Testimonials.tsx", "src/components/Pricing.tsx", "src/components/Newsletter.tsx", "src/components/FAQ.tsx", "src/components/Footer.tsx", "src/App.css", "src/index.css" ], "modifications": [ "Adapted the original complete Vite/React page composition and layered hero-card visual structure into one self-contained installable React/Tailwind 4 page.", "Replaced Radix primitives, global CSS and theme provider with native disclosures, scoped Tailwind utilities and a host-inheriting theme; no Next.js imports, fonts or new dependencies.", "Replaced upstream PNG illustrations and hand-drawn Icons.tsx paths because README and assets supplied no separate asset provenance or license; no upstream PNG or SVG paths are redistributed. The new product-launch-art.tsx SVG primitives are original code authored for this adaptation. The hero uses the existing lucide Lightbulb.", "Removed external avatars and customer brands; initials and actual host-supplied testimonials replace them. Fictional business records appear only with explicit mode=\"demo\".", "Added typed live host content, exact monthly/annual display prices, controlled billing period, awaited subscription and plan callbacks, pending/error/retry states and safe disconnected defaults. Demo callbacks never contact host services.", "Changed fixed/absolute hero-card layout to an intrinsically sized staggered grid and added mobile/long-content/reduced-motion handling." ] }, "installUsage": "import ProductLaunchRecipe from \"@/components/uiblocks/recipe-product-launch/recipe-product-launch\";\n\nexport default function ProductPage() {\n return (\n \n );\n}", "demoUsage": "import ProductLaunchRecipe from \"@/components/uiblocks/recipe-product-launch/recipe-product-launch\";\n\nexport default function DemoPage() {\n return ;\n}", "propsContract": [ { "name": "mode, theme, className", "description": "Controlled by default. Explicit mode=\"demo\" enables fictional content and local interactions; demo service callbacks are never called. Theme inherits the host or can be scoped to dark." }, { "name": "brand, copy, primaryHref, secondaryHref, homeHref, navigation, footerLinks, copyright", "description": "Provide actual product copy and ordinary host-owned URLs. Copy is a typed partial object covering every section. Missing primary URLs disable the CTA; executable URL schemes are rejected." }, { "name": "features, services, steps, highlights, metrics, testimonials, faq", "description": "Readonly host-owned collections update directly from props; explicit [] remains empty even in demo mode. Features can choose growth/reflecting/lookingAhead original inline code illustrations; testimonials use initials and contain no inferred endorsements." }, { "name": "plans, billingPeriod, onBillingPeriodChange", "description": "Plans contain id/name/description/benefits and prices.monthly/annual objects with exact amount/period/note strings. Never calculate discounts. A missing period shows Not offered. A single-period offering selects that available period unless the host explicitly controls billingPeriod." }, { "name": "onSelectPlan(planId, period)", "description": "Optional awaited host callback. Missing callback disables selection; rejection keeps an error and retry action. It performs no payment. Demo chooses locally and never calls the callback." }, { "name": "onSubscribe(email), subscriptionSuccessMessage", "description": "Optional awaited real host subscription callback. Missing callback disables the email field and submit. Pending guards duplicate submits, rejection preserves the address and retry, and success appears only after resolution. Demo never sends the address or invokes this callback." } ], "contentGuidelines": [ "Supply verified product capabilities, prices, customer permissions and metrics in controlled mode; empty defaults contain no sample business records.", "Keep the original layered-card hero and complete section progression; adapt section copy through typed props instead of replacing the page with unrelated blocks.", "Wire onSubscribe and onSelectPlan to actual host services before enabling those actions. A resolved callback means the host accepted the request; this page does not provide checkout, billing or subscription infrastructure.", "For each billing period supply the exact display amount and period. Annual values are never calculated from monthly values and no savings badge is invented.", "Original upstream PNGs and hand-drawn SVG paths have unconfirmed asset provenance and are not included. The replacement SVG illustrations are self-contained code; there are no external image/font URLs.", "Verify real long Chinese copy at mobile/desktop sizes and use mode=\"demo\" only for explicitly labelled illustrations." ], "prompt": "Install the complete UIBlocks recipe-product-launch page and use its ProductLaunchRecipe implementation. Preserve the MIT-author-attributed layered hero, emerald/neutral visual system, actual nine-section page and native FAQ/mobile navigation. Supply my real product copy, features, services, workflow, exact billing prices, authorized testimonials, FAQs and routes. Connect subscription and plan callbacks to my real host services with pending/error/retry behavior; leave actions disabled until connected. Keep mode controlled for production and use explicit demo only for labelled fictional examples. Do not add Next.js dependencies, external fonts, unverified customer logos or unsupported original illustrations.", "origin": "external", "preview": "/preview/recipes/product-launch", "screenshot": "/previews/recipe-product-launch.png", "screenshotMetadata": { "renderer": "Chromium", "id": "recipe-product-launch", "image": "recipe-product-launch.png", "sourceFiles": [ "app/globals.css", "components/brand.tsx", "components/copy-button.tsx", "components/footer.tsx", "components/header.tsx", "components/recipes/recipe-preview.tsx", "components/registry-setup.tsx", "components/seo-jsonld.tsx", "components/theme-toggle.tsx", "components/ui/button.tsx", "components/ui/chart.tsx", "components/ui/dialog.tsx", "components/ui/dropdown-menu.tsx", "components/ui/input-group.tsx", "components/ui/input.tsx", "components/ui/separator.tsx", "components/ui/sheet.tsx", "components/ui/sidebar.tsx", "components/ui/skeleton.tsx", "components/ui/sonner.tsx", "components/ui/table.tsx", "components/ui/textarea.tsx", "components/ui/tooltip.tsx", "config.ts", "content/blocks-metadata.ts", "content/catalog.ts", "content/community-blocks.ts", "content/components/dashboard/dashboard-01/customers-table.tsx", "content/components/dashboard/dashboard-01/dashboard-charts.tsx", "content/components/marketing/faq-01.tsx", "content/components/marketing/features-01.tsx", "content/components/marketing/footer-01.tsx", "content/components/marketing/hero-01.tsx", "content/components/marketing/logo-cloud-01.tsx", "content/components/marketing/navigation-01.tsx", "content/components/marketing/pricing-01.tsx", "content/components/workspace/results-gallery-01.tsx", "content/components/workspace/task-queue-01.tsx", "content/components/workspace/upload-workflow-01.tsx", "content/components/workspace/usage-panel-01.tsx", "content/components/workspace/workspace-header-01.tsx", "content/declarations.ts", "content/product-launch-recipe.ts", "content/recipe-components/product-launch-art.tsx", "content/recipe-components/product-launch.tsx", "content/recipe-components/saas-dashboard.tsx", "content/recipe-components/studio-agency.tsx", "content/recipe-components/studio-agency/demo-assets.ts", "content/recipe-components/studio-agency/demo.ts", "content/recipe-components/studio-agency/styles.ts", "content/recipe-components/studio-agency/types.ts", "content/recipe-components/team-inbox.tsx", "content/recipe-components/tool-landing.tsx", "content/recipe-components/tool-workspace.tsx", "content/recipes.ts", "content/studio-agency-recipe.ts", "content/template-recipes.ts", "hooks/use-mobile.ts", "hooks/use-registry-origin.ts", "lib/google-analytics.ts", "lib/utils.ts", "package-lock.json", "package.json", "postcss.config.mjs", "public/icon.svg", "public/opengraph-image.png", "scripts/capture-previews.mjs", "scripts/preview-provenance.mjs", "src/lib/head.ts", "src/routes/__root.tsx", "src/routes/preview.recipes.$recipeId.tsx", "vite.config.ts" ], "sourceHash": "3ad7fecc2d3e9ea08d3b8655c7cabbc1d38f91b9f71a192a08752f93dfb7a102", "imageHash": "a2f1487a511fa735560caafdc223e93a8941cb873f9941ec273507b64720d797", "capturedAt": "2026-10-30T09:46:27.327Z", "viewport": { "width": 1200, "height": 800 }, "dimensions": { "width": 1200, "height": 5303 }, "state": "demo" }, "url": "/recipes/product-launch", "registry": "/r/recipe-product-launch.json", "install": { "direct": "npx shadcn@latest add https://uiblocks.org/r/recipe-product-launch.json", "namespaced": "npx shadcn@latest add @uiblocks/recipe-product-launch", "registryConfig": { "registries": { "@uiblocks": "https://uiblocks.org/r/{name}.json" } }, "entry": "@components/uiblocks/recipe-product-launch/recipe-product-launch.tsx", "exportName": "default", "dependencies": [ "cn@0.2.6", "lucide-react@0.577.0" ], "requirements": { "react": ">=19", "tailwind": ">=4" }, "setup": [ { "id": "project", "title": "Open your existing React project", "description": "Use React 19+, TypeScript/TSX, and a working Tailwind CSS 4 build. Keep the project's existing router, dependencies, and global stylesheet." }, { "id": "shadcn", "title": "Check components.json before installing", "description": "Reuse an existing components.json. Its aliases.components must resolve in TypeScript and the bundler, and tailwind.css must point to the stylesheet your app loads. Do not reinitialize an already configured project.", "command": "npx shadcn@latest init", "when": "Only if components.json is missing; run inside the existing app and follow its framework setup." }, { "id": "styles", "title": "Include the installed sources in Tailwind", "description": "Keep the host's standard shadcn theme variables, Tailwind @theme mappings, and base border styles loaded (background, foreground, border, sidebar, and chart tokens). Ensure Tailwind scans the actual installed components directory. Restricted source(none), ignored paths, and monorepos may need an @source path relative to the stylesheet. For theme='dark', use a class-based dark variant in the host CSS." }, { "id": "import", "title": "Import through your configured components alias", "description": "The @components/ entry is a registry target placeholder, not a JavaScript import. Replace the example's @/components prefix with components.json aliases.components, verify the file printed by the CLI, and mount it in an existing host route." } ], "usage": "import ProductLaunchRecipe from \"@/components/uiblocks/recipe-product-launch/recipe-product-launch\";\n\nexport default function ProductPage() {\n return (\n \n );\n}", "demoUsage": "import ProductLaunchRecipe from \"@/components/uiblocks/recipe-product-launch/recipe-product-launch\";\n\nexport default function DemoPage() {\n return ;\n}" }, "compositionSource": { "language": "tsx", "componentName": "ProductLaunchRecipe", "referenceOnly": false, "installedEntry": "@components/uiblocks/recipe-product-launch/recipe-product-launch.tsx", "content": "\"use client\";\n\n/**\n * Product launch page adapted from leoMirandaa/shadcn-landing-page.\n * MIT License · Copyright (c) 2024 Leopoldo Miranda.\n * Upstream revision: ae3716dbce5c8a26815222bb743994b5717938f1\n * Original composition: src/App.tsx; Navbar, Hero, HeroCards, Sponsors,\n * About, Statistics, HowItWorks, Features, Services, Cta, Testimonials,\n * Pricing, Newsletter, FAQ and Footer under src/components/.\n * Adaptations: self-contained React/Tailwind 4 page, native disclosure controls,\n * host-owned content/actions, explicit demo mode, scoped theme and responsive cards.\n * Complete notice: licenses/third-party/shadcn-landing-MIT.txt\n */\n\nimport {\n ArrowRight,\n Check,\n ChevronDown,\n Layers3,\n Lightbulb,\n Menu,\n MessageSquare,\n MoveUpRight,\n PanelsTopLeft,\n Sparkles,\n Users,\n Workflow,\n} from \"lucide-react\";\nimport {\n useEffect,\n useId,\n useRef,\n useState,\n type FormEvent,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"./shared/lib/utils\";\nimport { ProductLaunchIllustration } from \"./shared/content/recipe-components/product-launch-art\";\n\nexport type ProductLaunchBillingPeriod = \"monthly\" | \"annual\";\nexport type ProductLaunchPrice = {\n /** Exact host-supplied display value; this page never calculates a discount. */\n amount: string;\n period?: string;\n note?: string;\n};\nexport type ProductLaunchPlan = {\n id: string;\n name: string;\n description: string;\n prices: Partial>;\n benefits: readonly string[];\n highlighted?: boolean;\n badge?: string;\n actionLabel?: string;\n};\nexport type ProductLaunchFeature = {\n id: string;\n title: string;\n description: string;\n illustration?: \"growth\" | \"reflecting\" | \"lookingAhead\";\n};\nexport type ProductLaunchTestimonial = {\n id: string;\n name: string;\n role?: string;\n quote: string;\n};\nexport type ProductLaunchLink = { label: string; href: string };\nexport type ProductLaunchCopy = {\n eyebrow: string;\n title: string;\n accent: string;\n description: string;\n primaryLabel: string;\n secondaryLabel: string;\n featuresTitle: string;\n featuresDescription: string;\n servicesTitle: string;\n servicesDescription: string;\n workflowTitle: string;\n workflowDescription: string;\n ctaTitle: string;\n ctaDescription: string;\n testimonialsTitle: string;\n pricingTitle: string;\n pricingDescription: string;\n newsletterTitle: string;\n newsletterDescription: string;\n newsletterLabel: string;\n faqTitle: string;\n footerDescription: string;\n};\nexport type ProductLaunchRecipeProps = {\n /** Controlled is a safe empty starting point. Demo content requires this opt-in. */\n mode?: \"controlled\" | \"demo\";\n theme?: \"inherit\" | \"dark\";\n className?: string;\n brand?: string;\n homeHref?: string;\n copy?: Partial;\n primaryHref?: string;\n secondaryHref?: string;\n navigation?: readonly ProductLaunchLink[];\n highlights?: readonly string[];\n metrics?: readonly { label: string; value: string }[];\n features?: readonly ProductLaunchFeature[];\n services?: readonly ProductLaunchFeature[];\n steps?: readonly ProductLaunchFeature[];\n testimonials?: readonly ProductLaunchTestimonial[];\n plans?: readonly ProductLaunchPlan[];\n faq?: readonly { id: string; question: string; answer: string }[];\n footerLinks?: readonly ProductLaunchLink[];\n copyright?: string;\n /** When supplied, the host owns the selected display period. */\n billingPeriod?: ProductLaunchBillingPeriod;\n onBillingPeriodChange?: (period: ProductLaunchBillingPeriod) => void;\n /** Resolves only after the host accepts the request; no payment is performed here. */\n onSelectPlan?: (\n planId: string,\n period: ProductLaunchBillingPeriod\n ) => void | Promise;\n /** Connect this to the consuming project's actual subscription service. */\n onSubscribe?: (email: string) => void | Promise;\n subscriptionSuccessMessage?: string;\n};\n\nconst emptyItems: readonly never[] = [];\nconst emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\nconst safeCopy: ProductLaunchCopy = {\n eyebrow: \"Product launch\",\n title: \"Introduce your product.\",\n accent: \"Make the next step clear.\",\n description:\n \"Supply your product story, verified capabilities and actual plans through this page's props.\",\n primaryLabel: \"Get started\",\n secondaryLabel: \"Learn more\",\n featuresTitle: \"Product capabilities\",\n featuresDescription: \"Show the capabilities your product actually provides.\",\n servicesTitle: \"A workflow built around your needs\",\n servicesDescription:\n \"Supply your actual services and the problems they address.\",\n workflowTitle: \"How it works\",\n workflowDescription: \"Explain the steps your customers will really take.\",\n ctaTitle: \"A clear next step for your product\",\n ctaDescription:\n \"Connect the primary action to your own onboarding or product page.\",\n testimonialsTitle: \"Customer perspectives\",\n pricingTitle: \"Choose a plan\",\n pricingDescription: \"Prices and billing periods are supplied by the host.\",\n newsletterTitle: \"Stay in the loop\",\n newsletterDescription: \"Subscribe through the product's connected service.\",\n newsletterLabel: \"Subscribe\",\n faqTitle: \"Frequently asked questions\",\n footerDescription: \"Your product story and next steps, in one place.\",\n};\nconst demoCopy: Partial = {\n eyebrow: \"A little more clarity. A lot more possibility.\",\n title: \"Great products start\",\n accent: \"with a clear plan.\",\n description:\n \"Sprout brings your ideas, decisions and next steps together, so your team can focus on the work that matters.\",\n primaryLabel: \"Explore the plans\",\n secondaryLabel: \"See how it works\",\n featuresTitle: \"Small details. Great possibilities.\",\n featuresDescription:\n \"Give every idea the context, care and space it needs to become something useful.\",\n servicesTitle: \"Your ideas, connected.\",\n servicesDescription:\n \"A calm place for the conversations, decisions and handoffs behind every good product.\",\n workflowTitle: \"From a spark to your next chapter\",\n workflowDescription:\n \"A simple rhythm for moving good ideas forward together.\",\n ctaTitle: \"All your ideas & concepts in one place.\",\n ctaDescription:\n \"Make room for the work you care about. Start with a shared plan and build from there.\",\n testimonialsTitle: \"A little perspective from the team\",\n pricingTitle: \"A little room to start. Space to grow.\",\n pricingDescription: \"Illustrative plans for this local page demonstration.\",\n newsletterTitle: \"A fresh perspective, now and then.\",\n newsletterDescription:\n \"Try the form locally. Demo addresses are never sent to a service.\",\n footerDescription: \"A clearer starting point for your next great idea.\",\n};\nconst demoFeatures: readonly ProductLaunchFeature[] = [\n {\n id: \"context\",\n title: \"Keep the whole story\",\n description:\n \"Give every project a home for the context, decisions and details that make it yours.\",\n illustration: \"growth\",\n },\n {\n id: \"collaborate\",\n title: \"Think better, together\",\n description:\n \"Bring different perspectives into the same conversation, with clear ownership along the way.\",\n illustration: \"reflecting\",\n },\n {\n id: \"focus\",\n title: \"Find your next move\",\n description:\n \"Turn the big picture into smaller, thoughtful steps your team can take with confidence.\",\n illustration: \"lookingAhead\",\n },\n];\nconst demoServices: readonly ProductLaunchFeature[] = [\n {\n id: \"planning\",\n title: \"Thoughtful planning\",\n description:\n \"Connect your goals with the decisions and milestones that bring them closer.\",\n },\n {\n id: \"handoffs\",\n title: \"Clearer handoffs\",\n description:\n \"Keep the why alongside the what, so the next person can pick up the thread.\",\n },\n {\n id: \"reflection\",\n title: \"Room to reflect\",\n description:\n \"Capture what you learned and bring a little more clarity to your next chapter.\",\n },\n];\nconst demoSteps: readonly ProductLaunchFeature[] = [\n {\n id: \"capture\",\n title: \"Start with a spark\",\n description: \"Capture your idea and the problem you want to solve.\",\n },\n {\n id: \"shape\",\n title: \"Shape it together\",\n description: \"Invite a new perspective and agree on the next step.\",\n },\n {\n id: \"move\",\n title: \"Keep moving\",\n description: \"Make progress visible and keep the context close.\",\n },\n];\nconst demoPlans: readonly ProductLaunchPlan[] = [\n {\n id: \"starter\",\n name: \"Starter\",\n description: \"A small space for a good idea.\",\n prices: {\n monthly: { amount: \"$0\", period: \"/month\" },\n annual: { amount: \"$0\", period: \"/year\" },\n },\n benefits: [\n \"One shared project\",\n \"Notes and next steps\",\n \"Local demo experience\",\n ],\n actionLabel: \"Explore Starter\",\n },\n {\n id: \"team\",\n name: \"Team\",\n description: \"A little more room to work together.\",\n highlighted: true,\n badge: \"Team pick\",\n prices: {\n monthly: { amount: \"$12\", period: \"/month\" },\n annual: {\n amount: \"$120\",\n period: \"/year\",\n note: \"Illustrative annual total\",\n },\n },\n benefits: [\n \"Shared project spaces\",\n \"Team decisions and handoffs\",\n \"Reusable planning notes\",\n ],\n actionLabel: \"Explore Team\",\n },\n {\n id: \"studio\",\n name: \"Studio\",\n description: \"Space for your next chapter.\",\n prices: {\n monthly: { amount: \"$29\", period: \"/month\" },\n annual: {\n amount: \"$290\",\n period: \"/year\",\n note: \"Illustrative annual total\",\n },\n },\n benefits: [\n \"Multiple team spaces\",\n \"Cross-project planning\",\n \"Workspace review tools\",\n ],\n actionLabel: \"Explore Studio\",\n },\n];\nconst demoTestimonials: readonly ProductLaunchTestimonial[] = [\n {\n id: \"alex\",\n name: \"Alex Morgan\",\n role: \"Fictional product designer\",\n quote:\n \"The most useful thing is having the context next to the decision. Our next step feels a lot clearer.\",\n },\n {\n id: \"sam\",\n name: \"Sam Lee\",\n role: \"Fictional project lead\",\n quote:\n \"A little structure gives our ideas room to breathe. It is easier to pick up where a conversation left off.\",\n },\n {\n id: \"robin\",\n name: \"Robin Chen\",\n role: \"Fictional developer\",\n quote:\n \"I can see the why behind a handoff, then get back to the work in front of me.\",\n },\n];\nconst demoFaq = [\n {\n id: \"demo\",\n question: \"Is this a live product?\",\n answer:\n \"No. Sprout is a fictional product used to demonstrate this complete page. Prices, people and product capabilities are illustrative.\",\n },\n {\n id: \"actions\",\n question: \"Do the demo actions contact a service?\",\n answer:\n \"No. Plan choices and newsletter submissions stay in this local demo. Consuming projects connect their own callbacks in controlled mode.\",\n },\n {\n id: \"content\",\n question: \"Can I use my own product content?\",\n answer:\n \"Yes. Supply your actual capabilities, services, plans, FAQs and links through the page props.\",\n },\n {\n id: \"billing\",\n question: \"How are annual prices displayed?\",\n answer:\n \"Each billing period displays the exact price supplied for that period. The page does not calculate discounts or invent an annual offer.\",\n },\n];\n\n/** Reject executable schemes while retaining ordinary host routes and links. */\nexport function productLaunchHref(\n value: string | undefined\n): string | undefined {\n if (!value || /[\\u0000-\\u0020\\u007f\\\\]/.test(value) || value.startsWith(\"//\"))\n return;\n if (\n /^[a-z][a-z\\d+.-]*:/i.test(value) &&\n !/^(https?:|mailto:|tel:)/i.test(value)\n )\n return;\n return value;\n}\n\nexport function productLaunchPrice(\n plan: ProductLaunchPlan,\n period: ProductLaunchBillingPeriod\n): ProductLaunchPrice | undefined {\n const price = plan.prices[period];\n return price?.amount.trim() ? price : undefined;\n}\n\nexport async function submitProductLaunchSubscription(\n email: string,\n mode: \"controlled\" | \"demo\",\n onSubscribe?: ProductLaunchRecipeProps[\"onSubscribe\"]\n): Promise<\"demo\" | \"accepted\"> {\n const address = email.trim();\n if (address.length > 320 || !emailPattern.test(address))\n throw new Error(\"Enter a valid email address.\");\n if (mode === \"demo\") return \"demo\";\n if (!onSubscribe) throw new Error(\"No subscription service is connected.\");\n await onSubscribe(address);\n return \"accepted\";\n}\n\nexport async function selectProductLaunchPlan(\n plan: ProductLaunchPlan,\n period: ProductLaunchBillingPeriod,\n mode: \"controlled\" | \"demo\",\n onSelectPlan?: ProductLaunchRecipeProps[\"onSelectPlan\"]\n): Promise<\"demo\" | \"accepted\"> {\n if (!productLaunchPrice(plan, period))\n throw new Error(\"This billing period is not offered.\");\n if (mode === \"demo\") return \"demo\";\n if (!onSelectPlan) throw new Error(\"No plan selection service is connected.\");\n await onSelectPlan(plan.id, period);\n return \"accepted\";\n}\n\nconst container = \"mx-auto w-full max-w-6xl px-5 sm:px-8\";\nconst card =\n \"rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-[#1c1917]\";\nconst muted = \"text-zinc-600 dark:text-zinc-400\";\nconst actionClass =\n \"inline-flex min-h-11 max-w-full items-center justify-center gap-2 rounded-lg px-5 py-3 text-center text-sm font-semibold whitespace-normal [overflow-wrap:anywhere] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-45 motion-reduce:transition-none\";\nconst greenAction =\n \"bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-400 dark:text-emerald-950 dark:hover:bg-emerald-300\";\nconst outlineAction =\n \"border border-zinc-300 bg-transparent hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-800\";\n\nfunction PageAction({\n href,\n children,\n secondary = false,\n}: {\n href?: string;\n children: ReactNode;\n secondary?: boolean;\n}) {\n const safeHref = productLaunchHref(href);\n const className = cn(actionClass, secondary ? outlineAction : greenAction);\n return safeHref ? (\n \n {children}\n \n ) : (\n \n );\n}\n\nfunction SectionHeading({\n title,\n description,\n centered = false,\n}: {\n title: string;\n description?: string;\n centered?: boolean;\n}) {\n return (\n
\n

\n {title}\n

\n {description && (\n \n {description}\n

\n )}\n
\n );\n}\n\nfunction Initials({ name, large = false }: { name: string; large?: boolean }) {\n const initials =\n name\n .trim()\n .split(/\\s+/)\n .map((part) => Array.from(part)[0])\n .slice(0, 2)\n .join(\"\")\n .toUpperCase() || \"P\";\n return (\n \n {initials}\n \n );\n}\n\nfunction EmptySection({ children }: { children: ReactNode }) {\n return (\n \n {children}\n

\n );\n}\n\nexport default function ProductLaunchRecipe(props: ProductLaunchRecipeProps) {\n const {\n mode = \"controlled\",\n theme = \"inherit\",\n className,\n onSubscribe,\n onSelectPlan,\n } = props;\n const demo = mode === \"demo\";\n const brand = props.brand ?? (demo ? \"Sprout\" : \"Your product\");\n const copy = { ...safeCopy, ...(demo ? demoCopy : {}), ...props.copy };\n const features = props.features ?? (demo ? demoFeatures : emptyItems);\n const services = props.services ?? (demo ? demoServices : emptyItems);\n const steps = props.steps ?? (demo ? demoSteps : emptyItems);\n const testimonials =\n props.testimonials ?? (demo ? demoTestimonials : emptyItems);\n const plans = props.plans ?? (demo ? demoPlans : emptyItems);\n const faq = props.faq ?? (demo ? demoFaq : emptyItems);\n const metrics =\n props.metrics ??\n (demo\n ? [\n { value: \"3\", label: \"Illustrative plans\" },\n { value: \"4\", label: \"Demo questions\" },\n ]\n : emptyItems);\n const highlights =\n props.highlights ??\n (demo\n ? [\n \"Shared context\",\n \"Clear handoffs\",\n \"Thoughtful planning\",\n \"Room to grow\",\n ]\n : emptyItems);\n const uniqueId = useId().replace(/:/g, \"\");\n const sectionId = (name: string) => `product-launch-${uniqueId}-${name}`;\n const ids = {\n top: sectionId(\"top\"),\n features: sectionId(\"features\"),\n workflow: sectionId(\"workflow\"),\n pricing: sectionId(\"pricing\"),\n faq: sectionId(\"faq\"),\n newsletter: sectionId(\"newsletter\"),\n };\n const primaryHref =\n props.primaryHref ?? (demo ? `#${ids.pricing}` : undefined);\n const secondaryHref = props.secondaryHref ?? `#${ids.features}`;\n const navigation = props.navigation ?? [\n { label: \"Features\", href: `#${ids.features}` },\n { label: \"How it works\", href: `#${ids.workflow}` },\n { label: \"Pricing\", href: `#${ids.pricing}` },\n { label: \"FAQ\", href: `#${ids.faq}` },\n ];\n const footerLinks = props.footerLinks ?? navigation;\n const [localPeriod, setLocalPeriod] =\n useState(\"monthly\");\n const hasMonthly = plans.some((plan) => productLaunchPrice(plan, \"monthly\"));\n const hasAnnual = plans.some((plan) => productLaunchPrice(plan, \"annual\"));\n // A product offering only one period remains usable without inventing the other.\n const localPeriodOffered = localPeriod === \"monthly\" ? hasMonthly : hasAnnual;\n const period =\n props.billingPeriod ??\n (localPeriodOffered\n ? localPeriod\n : hasMonthly\n ? \"monthly\"\n : hasAnnual\n ? \"annual\"\n : localPeriod);\n const [subscription, setSubscription] = useState<{\n status: \"idle\" | \"pending\" | \"error\" | \"accepted\" | \"demo\";\n message: string;\n }>({ status: \"idle\", message: \"\" });\n const [planAction, setPlanAction] = useState<{\n id?: string;\n status: \"idle\" | \"pending\" | \"error\" | \"accepted\" | \"demo\";\n message: string;\n }>({ status: \"idle\", message: \"\" });\n const subscriptionLock = useRef(false);\n const planLock = useRef(false);\n const mounted = useRef(true);\n const menuRef = useRef(null);\n useEffect(() => {\n mounted.current = true;\n return () => {\n mounted.current = false;\n };\n }, []);\n const changePeriod = (next: ProductLaunchBillingPeriod) => {\n if (props.billingPeriod === undefined) setLocalPeriod(next);\n if (!demo) props.onBillingPeriodChange?.(next);\n };\n const subscribe = async (event: FormEvent) => {\n event.preventDefault();\n if (subscriptionLock.current || (!demo && !onSubscribe)) return;\n const email = String(new FormData(event.currentTarget).get(\"email\") ?? \"\");\n subscriptionLock.current = true;\n setSubscription({ status: \"pending\", message: \"\" });\n try {\n const result = await submitProductLaunchSubscription(\n email,\n mode,\n onSubscribe\n );\n if (mounted.current)\n setSubscription({\n status: result,\n message:\n result === \"demo\"\n ? \"Demo only · This address was not sent anywhere.\"\n : (props.subscriptionSuccessMessage ??\n \"Your request was accepted by the connected service.\"),\n });\n } catch (error) {\n if (mounted.current)\n setSubscription({\n status: \"error\",\n message:\n error instanceof Error\n ? error.message\n : \"The subscription request failed. Try again.\",\n });\n } finally {\n subscriptionLock.current = false;\n }\n };\n const choosePlan = async (plan: ProductLaunchPlan) => {\n if (planLock.current || (!demo && !onSelectPlan)) return;\n planLock.current = true;\n setPlanAction({ id: plan.id, status: \"pending\", message: \"\" });\n try {\n const result = await selectProductLaunchPlan(\n plan,\n period,\n mode,\n onSelectPlan\n );\n if (mounted.current)\n setPlanAction({\n id: plan.id,\n status: result,\n message:\n result === \"demo\"\n ? `Demo only · ${plan.name} was selected locally. No service was contacted.`\n : \"Your plan request was accepted by the host. No payment is performed by this page.\",\n });\n } catch (error) {\n if (mounted.current)\n setPlanAction({\n id: plan.id,\n status: \"error\",\n message:\n error instanceof Error\n ? error.message\n : \"The plan request failed. Try again.\",\n });\n } finally {\n planLock.current = false;\n }\n };\n const firstFeature = features[0];\n const firstService = services[0];\n const firstPlan = plans.find((plan) => plan.highlighted) ?? plans[0];\n const heroPrice = firstPlan\n ? productLaunchPrice(firstPlan, period)\n : undefined;\n const heroQuote = testimonials[0];\n\n return (\n \n \n \n Skip to product content\n \n
\n \n \n \n {brand}\n \n \n {navigation.map(\n (link, index) =>\n productLaunchHref(link.href) && (\n \n {link.label}\n \n )\n )}\n \n
\n \n \n \n \n {navigation.map(\n (link, index) =>\n productLaunchHref(link.href) && (\n {\n if (menuRef.current) menuRef.current.open = false;\n }}\n >\n {link.label}\n \n )\n )}\n \n
\n \n
\n\n
\n {demo && (\n

\n Demo data · Fictional product, people, capabilities and prices.\n Actions stay local; no service or payment connection.\n

\n )}\n \n
\n

\n {copy.eyebrow}\n

\n \n {copy.title}{\" \"}\n \n {copy.accent}\n \n \n

\n {copy.description}\n

\n
\n \n {copy.primaryLabel}\n \n \n \n {copy.secondaryLabel}\n \n
\n
\n \n \n
\n \n
\n \n
\n

\n {heroQuote?.name ?? \"Product overview\"}\n

\n

\n {heroQuote?.role ?? \"Host-supplied content\"}\n

\n
\n
\n

\n {heroQuote?.quote ??\n firstFeature?.description ??\n \"Supply your product content to bring this preview to life.\"}\n

\n \n \n \n

{brand}

\n

\n {firstFeature?.title ?? \"Your product story\"}\n

\n

\n {firstFeature?.description ??\n \"No feature details supplied.\"}\n

\n \n \n \n \n
\n \n \n
\n

\n {firstPlan?.name ?? \"Your plans\"}\n

\n {firstPlan?.badge && (\n \n {firstPlan.badge}\n \n )}\n
\n

\n {heroPrice?.amount ?? \"Not supplied\"}\n \n {heroPrice?.period}\n \n

\n

\n {firstPlan?.description ??\n \"Connect your actual plan prices.\"}\n

\n
    \n {firstPlan?.benefits.slice(0, 3).map((benefit, index) => (\n \n \n {benefit}\n \n ))}\n
\n \n \n \n \n \n
\n

\n {firstService?.title ?? \"A clearer next step\"}\n

\n

\n {firstService?.description ??\n \"Supply your actual services and product workflow.\"}\n

\n
\n \n \n \n \n\n {highlights.length > 0 && (\n \n {highlights.map((highlight, index) => (\n \n \n {highlight}\n \n ))}\n \n )}\n\n \n \n {metrics.length > 0 && (\n
\n {metrics.map((metric, index) => (\n
\n
\n {metric.value}\n
\n
\n {metric.label}\n
\n
\n ))}\n
\n )}\n {features.length ? (\n
\n {features.map((feature) => (\n \n

{feature.title}

\n

\n {feature.description}\n

\n {feature.illustration && (\n \n )}\n \n ))}\n
\n ) : (\n No product capabilities supplied.\n )}\n \n\n \n
\n \n {services.length ? (\n
\n {services.map((service, index) => {\n const Icon = [MessageSquare, Workflow, Layers3][index % 3];\n return (\n \n \n \n \n
\n

{service.title}

\n

\n {service.description}\n

\n
\n \n );\n })}\n
\n ) : (\n No services supplied.\n )}\n
\n \n \n\n \n \n {steps.length ? (\n
    \n {steps.map((step, index) => (\n
  1. \n \n {String(index + 1).padStart(2, \"0\")}\n \n

    {step.title}

    \n

    \n {step.description}\n

    \n
    2. \n ))}\n
\n ) : (\n No workflow steps supplied.\n )}\n \n\n
\n \n
\n

\n {copy.ctaTitle}\n

\n

\n {copy.ctaDescription}\n

\n
\n
\n \n {copy.primaryLabel}\n \n \n
\n \n
\n\n
\n \n {testimonials.length ? (\n
\n {testimonials.map((testimonial) => (\n
\n
\n \n \n \n {testimonial.name}\n \n {testimonial.role && (\n \n {testimonial.role}\n \n )}\n \n
\n
\n “{testimonial.quote}”\n
\n
\n ))}\n
\n ) : (\n No customer testimonials supplied.\n )}\n
\n\n \n \n {hasMonthly && hasAnnual && (\n \n {([\"monthly\", \"annual\"] as const).map((value) => (\n changePeriod(value)}\n type=\"button\"\n >\n {value === \"monthly\" ? \"Monthly\" : \"Annual\"}\n \n ))}\n \n )}\n {plans.length ? (\n
\n {plans.map((plan) => {\n const price = productLaunchPrice(plan, period);\n const busy = planAction.status === \"pending\";\n return (\n \n
\n

{plan.name}

\n {plan.badge && (\n \n {plan.badge}\n \n )}\n
\n

\n {plan.description}\n

\n

\n {price?.amount ?? \"Not offered\"}\n {price?.period && (\n \n {price.period}\n \n )}\n

\n {price?.note && (\n

\n {price.note}\n

\n )}\n
    \n {plan.benefits.map((benefit, index) => (\n \n \n {benefit}\n \n ))}\n
\n {\n if (!busy) void choosePlan(plan);\n }}\n type=\"button\"\n >\n {busy && planAction.id === plan.id\n ? \"Waiting for host…\"\n : planAction.status === \"error\" &&\n planAction.id === plan.id\n ? \"Try again\"\n : (plan.actionLabel ?? \"Choose plan\")}\n \n \n );\n })}\n
\n ) : (\n \n No plans supplied. Add your actual prices and billing periods.\n \n )}\n {planAction.message && (\n \n {planAction.message}\n

\n )}\n \n\n \n
\n \n {\n void subscribe(event);\n }}\n >\n \n Email address\n \n
\n \n \n {subscription.status === \"pending\"\n ? \"Waiting for host…\"\n : subscription.status === \"error\"\n ? \"Try again\"\n : copy.newsletterLabel}\n \n
\n \n {subscription.message ||\n (demo\n ? \"Demo only · Email addresses stay in this browser interaction.\"\n : !onSubscribe\n ? \"No subscription service connected.\"\n : \"Your address is submitted only to the connected host service.\")}\n

\n \n
\n \n\n \n \n {faq.length ? (\n
\n {faq.map((item) => (\n
\n \n {item.question}\n \n \n \n {item.answer}\n

\n
\n ))}\n
\n ) : (\n No questions and answers supplied.\n )}\n \n
\n\n \n \n \n );\n}\n", "guidance": "Install this complete recipe with its single shadcn command, then import the component using your configured components alias and meta.entry. Matching blocks, helpers, and MIT notices are bundled. Pass your own copy, navigation, data, and callbacks through the published props. Recipes with meta.demoUsage require explicit demo mode for sample data or simulation; controlled mode delegates service work to your application." } }