{
  "id": "tool-landing",
  "name": "AI tool landing page",
  "description": "A complete, quietly confident product page. Introduce your tool, show its workflow, explain the plans, and answer the questions that matter.",
  "category": "Marketing",
  "blockIds": [
    "navigation-01",
    "hero-01",
    "logo-cloud-01",
    "features-01",
    "pricing-01",
    "faq-01",
    "footer-01"
  ],
  "style": "clean-saas",
  "registryId": "recipe-tool-landing",
  "componentName": "ToolLandingRecipe",
  "componentSource": "content/recipe-components/tool-landing.tsx",
  "installUsage": "import ToolLandingRecipe from \"@/components/uiblocks/recipe-tool-landing/recipe-tool-landing\";\n\nexport default function ProductPage() {\n  return (\n    <ToolLandingRecipe\n      brand=\"Your product\"\n      primaryHref=\"/app\"\n      primaryLabel=\"Open workspace\"\n      hero={{ title: \"A clearer starting point for your next project.\", description: \"Replace this with your actual product description.\" }}\n    />\n  );\n}",
  "propsContract": [
    {
      "name": "brand, homeHref, primaryHref, primaryLabel",
      "description": "Set the shared product identity and primary action across navigation, hero, plans, FAQ, and footer; ordinary anchors use the host's URLs."
    },
    {
      "name": "navigation, hero, formats, features, pricing, faq, footer",
      "description": "Pass each section's typed props for real copy, links, capabilities, plan prices, and FAQs. Pricing plans without an actionHref inherit primaryHref."
    },
    {
      "name": "theme, className",
      "description": "Inherit the host theme by default, or set theme='dark' to enable a class-based dark variant. Use the host Tailwind 4 theme and className to customize the visual system."
    }
  ],
  "contentGuidelines": [
    "Keep the hero title around 8–12 English words or 14–24 Chinese characters; choose a shorter title if it wraps beyond three lines.",
    "Use one primary action across the navigation and hero. Connect the action to your real workspace or onboarding route.",
    "Keep the 1152px content width, violet accent, neutral borders, and shared section spacing throughout the page.",
    "The format strip describes supported formats, not customer endorsements. Replace it with verified capabilities only.",
    "Use three concise feature stories, three plans, and around four FAQs. Check longer content on mobile.",
    "Frame is a fictional demonstration product. Replace all plan details, demo notices, and claims with your own verified product information before launch."
  ],
  "prompt": "Build a product landing page using the UIBlocks tool-landing recipe in the clean-saas style. Install the complete recipe-tool-landing registry item in one command and import its ToolLandingRecipe entry. Inspect the complete page preview before adapting typed section props. Keep the content width, typography, borders, violet accent, and section spacing consistent. Replace the fictional Frame content, sample prices and capability claims with my actual product information, and connect primaryHref to my workspace. Do not invent customer logos or reviews. Check the final page with real English and Chinese content at desktop and mobile sizes.",
  "preview": "/preview/recipes/tool-landing",
  "screenshot": "/previews/recipe-tool-landing.png",
  "screenshotMetadata": {
    "renderer": "Chromium",
    "id": "recipe-tool-landing",
    "image": "recipe-tool-landing.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/dialog.tsx",
      "components/ui/sonner.tsx",
      "components/ui/tooltip.tsx",
      "config.ts",
      "content/blocks-metadata.ts",
      "content/catalog.ts",
      "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/recipe-components/tool-landing.tsx",
      "content/recipe-components/tool-workspace.tsx",
      "content/recipes.ts",
      "hooks/use-registry-origin.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": "1f69a4a7ff8fd903f87a60e88eeb9d6bfb5ad6ec446871ef4128e9e789ae5be9",
    "imageHash": "5f43e2c3a35538bdcd70ecf1e667c4e89a042e8a25ff51aabfdfb01032b97508",
    "capturedAt": "2026-10-30T04:06:22.145Z",
    "viewport": {
      "width": 1200,
      "height": 800
    },
    "dimensions": {
      "width": 1200,
      "height": 3236
    },
    "state": "default"
  },
  "url": "/recipes/tool-landing",
  "registry": "/r/recipe-tool-landing.json",
  "install": {
    "direct": "npx shadcn@latest add https://uiblocks.org/r/recipe-tool-landing.json",
    "namespaced": "npx shadcn@latest add @uiblocks/recipe-tool-landing",
    "registryConfig": {
      "registries": {
        "@uiblocks": "https://uiblocks.org/r/{name}.json"
      }
    },
    "entry": "@components/uiblocks/recipe-tool-landing/recipe-tool-landing.tsx",
    "exportName": "default",
    "dependencies": [
      "lucide-react@0.577.0"
    ],
    "requirements": {
      "react": ">=19",
      "tailwind": ">=4"
    },
    "usage": "import ToolLandingRecipe from \"@/components/uiblocks/recipe-tool-landing/recipe-tool-landing\";\n\nexport default function ProductPage() {\n  return (\n    <ToolLandingRecipe\n      brand=\"Your product\"\n      primaryHref=\"/app\"\n      primaryLabel=\"Open workspace\"\n      hero={{ title: \"A clearer starting point for your next project.\", description: \"Replace this with your actual product description.\" }}\n    />\n  );\n}"
  },
  "compositionSource": {
    "language": "tsx",
    "componentName": "ToolLandingRecipe",
    "referenceOnly": false,
    "installedEntry": "@components/uiblocks/recipe-tool-landing/recipe-tool-landing.tsx",
    "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport Faq01 from \"./shared/content/components/marketing/faq-01\";\nimport Features01 from \"./shared/content/components/marketing/features-01\";\nimport Footer01 from \"./shared/content/components/marketing/footer-01\";\nimport Hero01 from \"./shared/content/components/marketing/hero-01\";\nimport LogoCloud01 from \"./shared/content/components/marketing/logo-cloud-01\";\nimport Navigation01 from \"./shared/content/components/marketing/navigation-01\";\nimport Pricing01, {\n  type PricingPlan,\n} from \"./shared/content/components/marketing/pricing-01\";\n\nconst samplePlans: PricingPlan[] = [\n  {\n    name: \"Personal\",\n    description: \"For the occasional good idea.\",\n    monthlyPrice: 0,\n    annualMonthlyPrice: 0,\n    features: [\n      \"3 projects\",\n      \"Single-file workflow\",\n      \"Standard exports\",\n      \"Local demo workspace\",\n    ],\n    actionLabel: \"Explore the demo\",\n  },\n  {\n    name: \"Creator\",\n    description: \"For a workflow that keeps moving.\",\n    monthlyPrice: 19,\n    annualMonthlyPrice: 15,\n    features: [\n      \"Unlimited projects\",\n      \"Batch file workflows\",\n      \"Reusable presets\",\n      \"Export history\",\n    ],\n    highlighted: true,\n    actionLabel: \"Explore Creator\",\n  },\n  {\n    name: \"Studio\",\n    description: \"For a little more room to make.\",\n    monthlyPrice: 39,\n    annualMonthlyPrice: 32,\n    features: [\n      \"Everything in Creator\",\n      \"Shared project folders\",\n      \"Team-ready layouts\",\n      \"Usage overview\",\n    ],\n    actionLabel: \"Explore Studio\",\n  },\n];\n\nconst sectionLinks = [\n  { label: \"Features\", href: \"#features\" },\n  { label: \"Pricing\", href: \"#pricing\" },\n  { label: \"Questions\", href: \"#faq\" },\n];\n\nexport type ToolLandingRecipeProps = {\n  /** Inherit the host theme, or enable its class-based dark variant for this page. */\n  theme?: \"inherit\" | \"dark\";\n  className?: string;\n  brand?: string;\n  homeHref?: string;\n  primaryHref?: string;\n  primaryLabel?: string;\n  navigation?: ComponentProps<typeof Navigation01>;\n  hero?: ComponentProps<typeof Hero01>;\n  formats?: ComponentProps<typeof LogoCloud01>;\n  features?: ComponentProps<typeof Features01>;\n  pricing?: ComponentProps<typeof Pricing01>;\n  faq?: ComponentProps<typeof Faq01>;\n  footer?: ComponentProps<typeof Footer01>;\n};\n\n/**\n * An installable seven-section page, independent of the host router.\n * Replace the fictional Frame copy, sample prices, and capability claims through\n * the section props before publishing. Anchors are ordinary host-owned URLs.\n */\nexport default function ToolLandingRecipe({\n  theme = \"inherit\",\n  className = \"\",\n  brand = \"Frame\",\n  homeHref = \"#frame-top\",\n  primaryHref = \"#pricing\",\n  primaryLabel = \"Get started\",\n  navigation,\n  hero,\n  formats,\n  features,\n  pricing,\n  faq,\n  footer,\n}: ToolLandingRecipeProps) {\n  return (\n    <div\n      className={`${theme === \"inherit\" ? \"\" : theme} min-h-screen bg-white dark:bg-zinc-950 ${className}`}\n    >\n      <Navigation01\n        actionHref={primaryHref}\n        actionLabel={primaryLabel}\n        brand={brand}\n        homeHref={homeHref}\n        links={sectionLinks}\n        {...navigation}\n      />\n      <main>\n        <Hero01\n          primaryHref={primaryHref}\n          primaryLabel={primaryLabel}\n          secondaryHref=\"#features\"\n          {...hero}\n        />\n        <LogoCloud01 {...formats} />\n        <Features01 {...features} />\n        <Pricing01\n          {...pricing}\n          plans={(pricing?.plans ?? samplePlans).map((plan) => ({\n            ...plan,\n            actionHref: plan.actionHref ?? primaryHref,\n          }))}\n        />\n        <Faq01 actionHref={primaryHref} actionLabel={primaryLabel} {...faq} />\n      </main>\n      <Footer01\n        brand={brand}\n        homeHref={homeHref}\n        links={[...sectionLinks, { label: \"Workspace\", href: primaryHref }]}\n        {...footer}\n      />\n    </div>\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, and callbacks through the published props. Workspace simulation requires explicit demo mode; controlled mode delegates processing to your application."
  }
}