{ "id": "studio-agency", "name": "Studio agency", "description": "A complete editorial agency homepage with an oversized serif hero, selected case studies, a service ledger, studio story, approved testimonial and host-owned contact action.", "category": "Marketing", "blockIds": [], "style": "clean-saas", "registryId": "recipe-studio-agency", "componentName": "StudioAgencyRecipe", "componentSource": "content/recipe-components/studio-agency.tsx", "featured": true, "searchCategories": [ "marketing" ], "tags": [ "agency", "studio", "portfolio", "creative agency", "services", "complete landing page", "工作室", "设计机构", "作品集", "服务介绍", "完整页面" ], "source": { "name": "Foundry", "url": "https://github.com/tailthemes/foundry", "author": "WISE IT LLC", "license": "MIT", "revision": "cfdc5a64ab378122124d8e2ffc039f60109de3e4", "files": [ "src/app/home.tsx", "src/components/site-header.tsx", "src/components/hero.tsx", "src/components/client-band.tsx", "src/components/selected-work.tsx", "src/components/services-ledger.tsx", "src/components/manifesto.tsx", "src/components/testimonial.tsx", "src/components/cta.tsx", "src/components/site-footer.tsx", "src/fixtures/foundry.ts", "src/theme.css", "src/assets/README.md", "src/components/ui/container.tsx", "src/components/ui/badge.tsx", "src/components/ui/plate.tsx", "src/components/ui/icons.tsx", "src/components/ui/button.tsx", "src/components/ui/section-heading.tsx", "src/assets/case-halcyon.jpg", "src/assets/case-marlow.jpg", "src/assets/case-verity.jpg", "src/assets/case-northbank.jpg" ], "licenseFile": "licenses/third-party/foundry-MIT.txt", "modifications": [ "Adapted the complete homepage composition and original section order to portable React with typed host content, controlled empty defaults and explicitly labelled fictional demo fixtures.", "Replaced next/font and StaticImageData with system serif/sans/mono fonts and native images. Scoped palette/type styles to the recipe root and retained optional local theme controls.", "Embedded four original MIT-generated JPEG case plates as unchanged data URIs in a local TypeScript module; actual projects use host images or a layout-preserving placeholder. No fonts are redistributed.", "Replaced upstream application routes, mailto/phone/legal claims and simulated contact behaviour with valid local section anchors, optional host URLs and a host callback requiring explicit status:\"sent\" confirmation. Business contact actions are disabled in demo mode while local section anchors and native case disclosures remain usable." ] }, "installUsage": "import StudioAgencyRecipe from \"@/components/uiblocks/recipe-studio-agency/recipe-studio-agency\";\n\nexport default function StudioPage() {\n return (\n \n );\n}", "demoUsage": "import StudioAgencyRecipe from \"@/components/uiblocks/recipe-studio-agency/recipe-studio-agency\";\n\nexport default function StudioDemo() {\n return ;\n}", "propsContract": [ { "name": "mode, brand, brandMark, brandHref, availability, navigation", "description": "Controlled by default: no sample projects, claims or testimonials. The host owns real brand and destinations. Local default navigation targets existing section IDs; explicit mode=\"demo\" opts into labelled fictional Foundry content." }, { "name": "hero, primaryAction, secondaryAction, facts, clientIntro, clients", "description": "Supply the actual positioning, primary links, facts and approved client names. Pass null to either hero action to hide it. Empty arrays stay empty in demo mode." }, { "name": "workHeading, work, servicesHeading, services, servicesNote", "description": "Real projects support an optional host href, a local native detail disclosure, image {src,alt,width,height}, disciplines/year/outcome. Missing images preserve a visible placeholder; no customer picture is fabricated. Services support verified prices/durations/deliverables and optional approved proof." }, { "name": "studioHeading, studioParagraphs, studioFacts, testimonialEyebrow, testimonial", "description": "Host-owned studio story, verified figures and approved quote. Set testimonial=null to suppress the fictional demo quote." }, { "name": "contact, contactDetails, onContact", "description": "Controlled mode only: set contact.href to a real host destination, or provide onContact. The handler may return a promise and must explicitly return {status:\"sent\",message?}; pending, rejection, missing confirmation and retry are represented. No handler/href leaves the action disabled. Demo mode always disables the contact business action, labels it as local/no-send and never invokes onContact, even if supplied; section anchors and case disclosures remain available." }, { "name": "footerDescription, footerColumns, legalText, legalLink, theme, className", "description": "Set footer content and genuine legal/host links. Theme inherits the host dark class by default; its optional local toggle changes only the recipe wrapper. Explicit light/dark props lock the recipe theme. Scoped CSS and system fonts do not change the host theme or stylesheet." } ], "contentGuidelines": [ "Retain the oversized serif hero, cool paper canvas, coral accent, 1152px measure, thin rules and full section order when adapting the layout.", "Replace all fictional Foundry clients, figures, prices, booking availability and testimonials with verified host content before publication. Controlled mode starts with empty collections.", "Original case JPEG bytes are embedded in a local TypeScript demo module under the upstream MIT grant, and each demo image is labelled as AI-generated. Supply your own image props for real projects; missing controlled images display placeholders.", "System serif, sans and monospace replace the original Fraunces/Archivo/IBM Plex Mono webfonts. No upstream fonts are redistributed, and no Next or router runtime is required.", "In controlled mode, connect contact.href or an authenticated onContact host action. A promise resolution without {status:\"sent\"} is unconfirmed, and rejected requests can be retried. Demo contact actions are disabled and never call business handlers.", "Native project disclosures, menu Escape/focus return, theme controls and long Chinese copy must be checked at desktop and 390px mobile widths." ], "prompt": "Build an agency or studio website using UIBlocks studio-agency, adapted from the MIT Foundry complete homepage. Inspect get_recipe and get_preview, install recipe-studio-agency once, and import StudioAgencyRecipe through the host components alias. Preserve the editorial serif hierarchy, cool blue paper, coral accent, selected-work ledger, services, studio story, testimonial and closing contact section. Default to controlled mode with actual brand, copy, verified work/services/facts, approved testimonials, host image URLs and real navigation. Set contact.href or provide onContact that explicitly returns {status:\"sent\"} only after the authenticated host service confirms success. Keep empty, pending, rejected, unconfirmed and retry states honest. Explicit mode=\"demo\" shows labelled fictional fixtures and MIT AI-generated case plates. Preserve upstream MIT notice, host routes and aliases; check keyboard, reduced motion, long Chinese copy and mobile layout.", "origin": "external", "preview": "/preview/recipes/studio-agency", "screenshot": "/previews/recipe-studio-agency.png", "screenshotMetadata": { "renderer": "Chromium", "id": "recipe-studio-agency", "image": "recipe-studio-agency.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": "dc70e606353c852d8a960ab8430bcd474e219cbfe5494466123598393e7604ba", "imageHash": "4f5e73de40a35118017b61592f638f7b6ac53324ada9e0ed8d04d7fb279996f5", "capturedAt": "2026-10-30T09:46:24.928Z", "viewport": { "width": 1200, "height": 800 }, "dimensions": { "width": 1200, "height": 7981 }, "state": "demo" }, "url": "/recipes/studio-agency", "registry": "/r/recipe-studio-agency.json", "install": { "direct": "npx shadcn@latest add https://uiblocks.org/r/recipe-studio-agency.json", "namespaced": "npx shadcn@latest add @uiblocks/recipe-studio-agency", "registryConfig": { "registries": { "@uiblocks": "https://uiblocks.org/r/{name}.json" } }, "entry": "@components/uiblocks/recipe-studio-agency/recipe-studio-agency.tsx", "exportName": "default", "dependencies": [ "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 StudioAgencyRecipe from \"@/components/uiblocks/recipe-studio-agency/recipe-studio-agency\";\n\nexport default function StudioPage() {\n return (\n \n );\n}", "demoUsage": "import StudioAgencyRecipe from \"@/components/uiblocks/recipe-studio-agency/recipe-studio-agency\";\n\nexport default function StudioDemo() {\n return ;\n}" }, "compositionSource": { "language": "tsx", "componentName": "StudioAgencyRecipe", "referenceOnly": false, "installedEntry": "@components/uiblocks/recipe-studio-agency/recipe-studio-agency.tsx", "content": "\"use client\";\n\n/**\n * Studio Agency: adapted from the complete Foundry homepage by TailThemes.\n * Copyright (c) 2026 WISE IT LLC. MIT License; see foundry-MIT.txt in the bundle.\n * Upstream: https://github.com/tailthemes/foundry/blob/cfdc5a64ab378122124d8e2ffc039f60109de3e4/src/app/home.tsx\n * Sections: src/components/{site-header,hero,client-band,selected-work,\n * services-ledger,manifesto,testimonial,cta,site-footer}.tsx at the same revision.\n * Adaptations: portable React/native elements and scoped theme; system serif,\n * sans and mono instead of next/font and bundled OFL fonts; host-owned content,\n * links and explicit contact confirmation; fictional fixtures only in demo mode;\n * original MIT-generated case plates embedded as data URIs for registry portability.\n */\nimport { ArrowRight, ArrowUpRight, Menu, Moon, Sun, X } from \"lucide-react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport {\n demoClients,\n demoContactDetails,\n demoFacts,\n demoServices,\n demoStudioFacts,\n demoStudioParagraphs,\n demoTestimonial,\n demoWork,\n} from \"./shared/content/recipe-components/studio-agency/demo\";\nimport { studioAgencyStyles } from \"./shared/content/recipe-components/studio-agency/styles\";\nimport type {\n StudioAgencyContactResult,\n StudioAgencyFact,\n StudioAgencyHeading,\n StudioAgencyLink,\n StudioAgencyRecipeProps,\n StudioAgencyTestimonial,\n} from \"./shared/content/recipe-components/studio-agency/types\";\n\nexport type * from \"./shared/content/recipe-components/studio-agency/types\";\n\nconst container = \"mx-auto w-full max-w-6xl px-5 sm:px-8 lg:px-10\";\nconst sectionSpace = \"py-20 sm:py-28 lg:py-32\";\nconst emptyStyle =\n \"sa-rule sa-muted-text border border-dashed p-8 text-sm leading-7\";\n\n/** A successful contact UI requires an explicit result from the host service. */\nexport async function confirmStudioAgencyContact(\n onContact: NonNullable\n): Promise {\n const result = await onContact();\n if (result?.status !== \"sent\")\n throw new Error(\"The host did not confirm the contact request. Try again.\");\n return result;\n}\n\nfunction Action({\n link,\n secondary = false,\n}: {\n link: StudioAgencyLink;\n secondary?: boolean;\n}) {\n return (\n \n {link.label}\n {!secondary && (\n \n )}\n \n );\n}\n\nfunction BrandMark() {\n return (\n \n \n \n );\n}\n\nfunction Heading({ heading }: { heading: StudioAgencyHeading }) {\n return (\n
\n
\n {heading.eyebrow && (\n

{heading.eyebrow}

\n )}\n

{heading.title}

\n {heading.description && (\n

\n {heading.description}\n

\n )}\n
\n {heading.action && (\n \n {heading.action.label}\n \n \n )}\n
\n );\n}\n\nfunction Facts({\n facts,\n compact = false,\n}: {\n facts: readonly StudioAgencyFact[];\n compact?: boolean;\n}) {\n if (!facts.length) return null;\n return (\n \n {facts.map((fact, index) => (\n \n
{fact.label}
\n \n {fact.value}\n \n {fact.note && (\n
{fact.note}
\n )}\n \n ))}\n \n );\n}\n\nfunction Proof({\n proof,\n large = false,\n}: {\n proof: StudioAgencyTestimonial;\n large?: boolean;\n}) {\n return (\n
\n
\n

“{proof.quote}”

\n
\n \n {large && (\n \n {proof.name\n .split(/\\s+/)\n .filter(Boolean)\n .slice(0, 2)\n .map((word) => word[0])\n .join(\"\")}\n \n )}\n \n {proof.name}\n {proof.role && (\n {proof.role}\n )}\n \n \n
\n );\n}\n\nexport default function StudioAgencyRecipe({\n mode = \"controlled\",\n brand,\n brandMark,\n brandHref,\n availability,\n navigation,\n hero,\n primaryAction,\n secondaryAction,\n facts,\n clientIntro,\n clients,\n workHeading,\n work,\n servicesHeading,\n services,\n servicesNote,\n studioHeading,\n studioParagraphs,\n studioFacts,\n testimonialEyebrow = \"In their words\",\n testimonial,\n contact,\n contactDetails,\n onContact,\n footerDescription,\n footerColumns,\n legalText,\n legalLink,\n theme = \"inherit\",\n className,\n}: StudioAgencyRecipeProps) {\n const demo = mode === \"demo\";\n const prefix = `studio-${useId().replaceAll(\":\", \"\")}`;\n const id = (section: string) => `${prefix}-${section}`;\n const anchor = (section: string) => `#${id(section)}`;\n const root = useRef(null);\n const menu = useRef(null);\n const menuButton = useRef(null);\n const [localTheme, setLocalTheme] = useState<\"inherit\" | \"light\" | \"dark\">(\n \"inherit\"\n );\n const [dark, setDark] = useState(false);\n const [contactState, setContactState] = useState<\n \"idle\" | \"pending\" | \"sent\" | \"error\"\n >(\"idle\");\n const [contactMessage, setContactMessage] = useState(\"\");\n const activeTheme = theme === \"inherit\" ? localTheme : theme;\n useEffect(() => {\n const update = () => {\n if (root.current)\n setDark(\n getComputedStyle(root.current)\n .getPropertyValue(\"--sa-scheme\")\n .trim() === \"dark\"\n );\n };\n update();\n const observer = new MutationObserver(update);\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"class\"],\n });\n return () => observer.disconnect();\n }, [activeTheme]);\n\n const studioBrand = brand ?? (demo ? \"Foundry\" : \"Your studio\");\n const heroCopy =\n hero ??\n (demo\n ? {\n eyebrow: \"Brand & digital studio\",\n title: \"Brands that\",\n accent: \"carry weight.\",\n description:\n \"We make identities, design systems and websites for companies that have outgrown the logo a founder drew in a hurry.\",\n }\n : {\n eyebrow: \"Independent studio\",\n title: \"Your studio,\",\n accent: \"clearly presented.\",\n description:\n \"Supply your studio's positioning, selected work and services through the page props.\",\n });\n const shownFacts = facts ?? (demo ? demoFacts : []);\n const shownClients = clients ?? (demo ? demoClients : []);\n const shownWork = work ?? (demo ? demoWork : []);\n const shownServices = services ?? (demo ? demoServices : []);\n const paragraphs = studioParagraphs ?? (demo ? demoStudioParagraphs : []);\n const shownStudioFacts = studioFacts ?? (demo ? demoStudioFacts : []);\n const quote =\n testimonial === undefined ? (demo ? demoTestimonial : null) : testimonial;\n const shownContactDetails =\n contactDetails ?? (demo ? demoContactDetails : []);\n const workCopy = workHeading ?? {\n eyebrow: \"Selected work\",\n title: demo\n ? \"Four projects that explain the studio.\"\n : \"Your selected work.\",\n description: demo\n ? \"Every case names the client, the year, and the number the work moved.\"\n : \"Present approved project summaries and the outcomes your team can verify.\",\n };\n const servicesCopy = servicesHeading ?? {\n eyebrow: \"Services\",\n title: demo\n ? \"Six things we do, and what they cost.\"\n : \"Your services, clearly set out.\",\n description: demo\n ? \"Illustrative starting prices, fixed after a paid discovery.\"\n : \"Describe scope, deliverables and verified pricing in your own words.\",\n };\n const studioCopy = studioHeading ?? {\n eyebrow: \"The studio\",\n title: demo\n ? \"We sell the twenty minutes after the reveal.\"\n : \"The people and principles behind the work.\",\n };\n const contactCopy = contact ?? {\n eyebrow: \"New business\",\n title: \"Tell us what you're building.\",\n description: demo\n ? \"Bring the messy version — the half-finished deck, the name you are not sure about, the site you have stopped showing people. We will tell you honestly whether we are the right studio for it.\"\n : \"Provide your contact destination or connect an explicit host action to start a conversation.\",\n };\n const nav = navigation ?? [\n { label: \"Work\", href: anchor(\"work\") },\n { label: \"Services\", href: anchor(\"services\") },\n { label: \"Studio\", href: anchor(\"studio\") },\n { label: \"Contact\", href: anchor(\"contact\") },\n ];\n const primary =\n primaryAction === undefined\n ? { label: \"Start a project\", href: anchor(\"contact\") }\n : primaryAction;\n const secondary =\n secondaryAction === undefined\n ? { label: \"See the ledger\", href: anchor(\"services\") }\n : secondaryAction;\n const columns = footerColumns ?? [\n { title: \"Studio\", links: nav },\n {\n title: \"Services\",\n links: shownServices.map((service) => ({\n label: service.name,\n href: anchor(`service-${service.id}`),\n })),\n },\n {\n title: \"Contact\",\n links: contactCopy.href\n ? [\n {\n label: contactCopy.actionLabel ?? \"Contact the studio\",\n href: contactCopy.href,\n },\n ]\n : [{ label: \"Project enquiries\", href: anchor(\"contact\") }],\n },\n ];\n async function requestContact() {\n if (demo || !onContact || contactState === \"pending\") return;\n setContactState(\"pending\");\n setContactMessage(\"\");\n try {\n const result = await confirmStudioAgencyContact(onContact);\n setContactState(\"sent\");\n setContactMessage(\n result.message ?? \"The host confirmed your contact request.\"\n );\n } catch (failure) {\n setContactState(\"error\");\n setContactMessage(\n failure instanceof Error\n ? failure.message\n : \"The contact request could not be completed. Try again.\"\n );\n }\n }\n function closeMenu() {\n if (menu.current) menu.current.open = false;\n }\n const closeWithEscape = (event: {\n key: string;\n preventDefault: () => void;\n }) => {\n if (event.key === \"Escape\" && menu.current?.open) {\n event.preventDefault();\n closeMenu();\n menuButton.current?.focus();\n }\n };\n\n return (\n \n \n \n Skip to studio content\n \n
\n \n \n \n {brandMark ?? }\n \n {studioBrand}\n \n \n
    \n {nav.map((link, index) => (\n
  • \n \n {link.label}\n \n
    • \n ))}\n
\n \n
\n {(availability ?? (demo ? \"Booking from November\" : \"\")) && (\n \n )}\n {theme === \"inherit\" && (\n setLocalTheme(dark ? \"light\" : \"dark\")}\n >\n {dark ? (\n \n ) : (\n \n )}\n \n )}\n {primary && (\n
\n \n
\n )}\n \n \n \n \n \n \n
    \n {nav.map((link, index) => (\n
  • \n \n {link.label}\n \n
    • \n ))}\n
\n {primary && (\n \n {primary.label}\n \n \n )}\n \n \n
\n \n
\n {demo && (\n

\n Demo content · Fictional studio, clients, prices, outcomes and\n testimonials. Case artwork is AI-generated.\n

\n )}\n
\n \n \n {heroCopy.eyebrow && (\n

{heroCopy.eyebrow}

\n )}\n

\n {heroCopy.title}\n {heroCopy.accent && (\n <>\n {\" \"}\n \n {heroCopy.accent}\n \n \n )}\n

\n
\n

\n {heroCopy.description}\n

\n
\n {primary && }\n {secondary && }\n
\n
\n \n \n \n \n
\n
\n

\n {clientIntro ??\n (demo\n ? \"Thirty-one companies since 2016, eight of them twice\"\n : \"Host-approved clients and collaborators\")}\n

\n {shownClients.length ? (\n
    \n {shownClients.map((client, index) => (\n \n {client}\n \n ))}\n
\n ) : (\n

\n No client names supplied.\n

\n )}\n
\n
\n \n \n
\n \n {shownWork.length ? (\n
    \n {shownWork.map((project, index) => (\n
  1. \n
    \n \n {String(index + 1).padStart(2, \"0\")}\n \n
    \n

    \n {project.href ? (\n \n {project.title}\n \n ) : (\n project.title\n )}\n

    \n

    \n {project.summary}\n

    \n {!!project.disciplines?.length && (\n
      \n {project.disciplines.map((discipline, tag) => (\n \n {discipline}\n \n ))}\n
    \n )}\n {!project.href && project.detail && (\n
    \n \n {project.actionLabel ?? \"Read the case\"}\n \n

    \n {project.detail}\n

    \n
    \n )}\n
    \n
    \n {project.image ? (\n
    \n \n
    \n ) : (\n
    \n Host project image\n
    \n )}\n {project.year && (\n

    \n {project.year}\n

    \n )}\n {project.outcome && (\n

    {project.outcome}

    \n )}\n {project.href && (\n \n {project.actionLabel ?? \"Read the case\"}\n \n \n )}\n
    \n
    \n
    2. \n ))}\n
\n ) : (\n

\n No projects supplied. Add approved work and images through the\n work prop.\n

\n )}\n
\n \n \n
\n \n
\n {shownServices.length ? (\n
    \n {shownServices.map((service, index) => (\n \n \n \n {String(index + 1).padStart(2, \"0\")}\n \n
    \n
    \n

    {service.name}

    \n {service.featured && (\n \n {service.featuredLabel ?? \"Featured service\"}\n \n )}\n
    \n

    \n {service.summary}\n

    \n {!!service.deliverables?.length && (\n
      \n {service.deliverables.map((deliverable, tag) => (\n
    • {deliverable}
      • \n ))}\n
    \n )}\n {service.proof && (\n
    \n \n
    \n )}\n
    \n
    \n {service.price && (\n

    \n {service.price}\n

    \n )}\n {service.duration && (\n

    \n {service.duration}\n

    \n )}\n
    \n \n \n ))}\n
\n ) : (\n
\n

\n No services supplied. Add your scope, deliverables and verified\n prices.\n

\n
\n )}\n {(servicesNote ??\n (demo\n ? \"Illustrative prices exclude taxes, print and third-party licences. Replace the example amounts and policies with your verified terms.\"\n : \"\")) && (\n
\n

\n {servicesNote ??\n \"Illustrative prices exclude taxes, print and third-party licences. Replace the example amounts and policies with your verified terms.\"}\n

\n
\n )}\n \n \n
\n
\n
\n {studioCopy.eyebrow && (\n

{studioCopy.eyebrow}

\n )}\n

{studioCopy.title}

\n {studioCopy.description && (\n

\n {studioCopy.description}\n

\n )}\n
\n
\n {paragraphs.length ? (\n paragraphs.map((paragraph, index) => (\n \n {paragraph}\n

\n ))\n ) : (\n

\n No studio story supplied. Describe your team and working\n principles.\n

\n )}\n \n
\n
\n
\n \n \n
\n

{testimonialEyebrow}

\n {quote ? (\n
\n \n
\n ) : (\n

\n No testimonial supplied. Add a quote approved for publication.\n

\n )}\n
\n \n \n
\n
\n
\n
\n {contactCopy.eyebrow && (\n

{contactCopy.eyebrow}

\n )}\n

{contactCopy.title}

\n {contactCopy.description && (\n

\n {contactCopy.description}\n

\n )}\n
\n {demo ? (\n \n Demo contact · Not sent\n \n \n ) : onContact ? (\n {\n void requestContact();\n }}\n >\n {contactState === \"pending\"\n ? \"Awaiting host confirmation…\"\n : (contactCopy.actionLabel ??\n \"Request a conversation\")}\n \n \n ) : contactCopy.href ? (\n \n ) : (\n \n {contactCopy.actionLabel ?? \"Contact the studio\"}\n \n \n )}\n \n
\n {demo && (\n

\n Local demo only. This page does not send contact requests.\n

\n )}\n {!demo && contactState === \"error\" && (\n \n {contactMessage}\n

\n )}\n {!demo && contactState === \"sent\" && (\n \n {contactMessage}\n

\n )}\n
\n {shownContactDetails.length > 0 && (\n
\n {shownContactDetails.map((detail, index) => (\n
\n
\n {detail.label}\n
\n
{detail.value}
\n {detail.note && (\n
\n {detail.note}\n
\n )}\n
\n ))}\n
\n )}\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." } }