Skip to main content

BerleyTrails — Engineering Handoff

This page is the spec that engineering reads and builds from. All copy is final. All components are mapped to @stackmates/ui-marketing. Build apps/berleytrails/ from this document without asking questions.


Site Architecture

RoutePagePurposePriority
/HomeHero + problem + solution + proof + pricing + FAQ + CTAP0
/pricingPricing3 tiers deep + ROI calculator + FAQP1
/contactContactBooking form + newsletter signupP0
/blogBlog indexBerley content hubP2

Stack: Next.js 15 App Router, @stackmates/ui-marketing components, @stackmates/tailwind-preset, Vercel deployment.

Pattern to copy: apps/dreamineering/drmg-design-system/src/app/(marketing)/ — use the same route group structure.


Section-to-Component Mapping (Home Page)

Sections render top-to-bottom in this order. Each maps to a specific @stackmates/ui-marketing component.

#SectionComponentImport Path
1HeroHeroWithImage@stackmates/ui-marketing
2StatsStatsCounter@stackmates/ui-marketing
3ProblemBenefitSection@stackmates/ui-marketing
4SolutionFeatureGrid@stackmates/ui-marketing
5DifferentiatorBenefitSection@stackmates/ui-marketing
6Social ProofLogoWall + TestimonialCard@stackmates/ui-marketing
7PricingPricingTable@stackmates/ui-marketing
8FAQFAQSection@stackmates/ui-marketing
9Footer CTACTABanner@stackmates/ui-marketing
10NewsletterNewsletterSection@stackmates/ui-marketing

Data Structures

Engineering copies these typed objects verbatim into the page component.

Stats

const stats: Stat[] = [
{
id: 'time-freed',
value: '40',
label: 'Time freed from outbound',
suffix: '%',
},
{
id: 'ltv-cac',
value: '30:1',
label: 'LTV:CAC on referral clients',
},
{
id: 'target-cac',
value: '0',
label: 'Target CAC after ecosystem',
prefix: '$',
},
];

Features (How It Works)

import { Search, PenTool, Route, BarChart3, Repeat } from 'lucide-react';

const features: Feature[] = [
{
id: 'map-fish',
title: 'Map Your Fish',
description: 'ICP research using fish psychology — what they want, where they gather, what makes them bite. Not demographics.',
icon: 'Search',
},
{
id: 'design-berley',
title: 'Design Your Berley',
description: 'Strategic content that targets the right fish, not the most fish. One targeted piece beats 20 generic articles.',
icon: 'PenTool',
},
{
id: 'lay-trail',
title: 'Lay the Trail',
description: 'Distribution sequencing and timing. The right bait, in the right water, at the right time.',
icon: 'Route',
},
{
id: 'measure-catch',
title: 'Measure the Catch',
description: 'Inbound leads tracked, not impressions counted. If it does not produce conversations, it is not working.',
icon: 'BarChart3',
},
{
id: 'compound',
title: 'Compound',
description: 'Each case study becomes berley for the next client. Your CAC approaches zero over time. The fish-ball forms itself.',
icon: 'Repeat',
},
];

Pricing Tiers

const pricingTiers: PricingTier[] = [
{
name: 'Berley Audit',
price: 1500,
period: 'one-time',
description: 'Map your fish. Find the gaps. Get the strategy.',
features: [
{ text: 'Fish psychology analysis', included: true },
{ text: 'ICP mapping', included: true },
{ text: 'Content gap audit', included: true },
{ text: 'Written berley strategy document', included: true },
{ text: 'Content creation', included: false },
{ text: 'Ongoing execution', included: false },
],
cta: {
label: 'Book a Berley Audit',
href: 'https://calendly.com/berleytrails/audit',
},
},
{
name: 'Trail Builder',
price: 2500,
period: '/month',
description: 'Monthly strategy + execution. The berley runs for you.',
features: [
{ text: 'Monthly strategy session', included: true },
{ text: 'Content calendar', included: true },
{ text: '4 berley pieces per month', included: true },
{ text: 'Performance review', included: true },
{ text: 'Fish-ball tracking', included: true },
{ text: 'Network effect optimization', included: false },
],
cta: {
label: 'Start Building Trails',
href: 'https://calendly.com/berleytrails/trail-builder',
},
highlighted: true,
badge: 'Most Popular',
},
{
name: 'Ecosystem Architect',
price: 5000,
period: '/month',
description: 'Full ecosystem design. The fish-ball effect at scale.',
features: [
{ text: 'Weekly strategy + execution', included: true },
{ text: 'Full content ecosystem design', included: true },
{ text: 'Weekly berley production', included: true },
{ text: 'Fish-ball formation tracking', included: true },
{ text: 'Network effect optimization', included: true },
{ text: 'Quarterly ecosystem review', included: true },
],
cta: {
label: 'Build Your Ecosystem',
href: 'https://calendly.com/berleytrails/ecosystem',
},
},
];

FAQ Items

const faqItems: FAQItem[] = [
{
question: "What's berley?",
answer: "Fisherman's term for chum — bait thrown in the water to attract fish before you cast. Your content is your berley. We make sure it attracts the right fish.",
},
{
question: 'How is this different from a marketing agency?',
answer: "Agencies sell campaigns. We build ecosystems. Campaigns end when you stop paying. Ecosystems compound — each client success attracts the next client at zero cost.",
},
{
question: 'How long before I see results?',
answer: 'First inbound signal within 30-60 days of trail launch. First client conversion typically within 90 days. The system compounds from there.',
},
{
question: "What if the fishing metaphor doesn't resonate with my clients?",
answer: "The metaphor is our thinking tool, not yours. Your berley trail uses YOUR language for YOUR fish. We translate the framework into your market.",
},
{
question: 'Do you do the content creation or just the strategy?',
answer: 'Both, depending on tier. Trail Builder includes 4 berley pieces per month. Ecosystem Architect includes weekly execution. The Audit is strategy only.',
},
];

Testimonial (Client Zero placeholder)

const testimonial: Testimonial = {
id: 'client-zero',
quote: 'We used the BerleyTrails method on ourselves first. Three months of strategic content. Zero ad spend. The results speak for themselves.',
author: 'Dreamineering',
role: 'Client Zero',
company: 'BerleyTrails',
};

Differentiator (Benefits — inverted comparison)

const differentiators: Benefit[] = [
{ id: 'diff-1', text: 'Systems that compound — not campaigns that end' },
{ id: 'diff-2', text: 'Fit metrics — not volume metrics' },
{ id: 'diff-3', text: 'Berley for your fish — not content for everyone' },
{ id: 'diff-4', text: 'Self-sustaining ecosystems — not agency dependency' },
];

Copy Deck

All final copy. Engineering copies verbatim. No writing required.

Hero

  • Headline: Stop Chasing Clients. Start Attracting Them.
  • Subheadline: Content strategy that builds attraction systems for service businesses. Your best clients should find you — not the other way around.
  • CTA label: Book a Free Fish Psychology Call
  • CTA href: https://calendly.com/berleytrails/fish-psychology
  • Background: gradient

Problem Section

  • Title: The Outbound Trap
  • Description: You spend 40% of your week finding clients. Cold emails, networking, social media posting. Every month the pipeline resets. And the leads you chase hardest are the worst fit.
  • Layout: split
  • Benefits (inverted pain points):
    1. High CAC — You spend more acquiring clients than delivering value
    2. Pipeline anxiety — Revenue is unpredictable because outbound is unpredictable
    3. Wrong fish — Volume-first marketing attracts consumers, not practitioners

Solution Section

  • Title: Berley Trails — Content That Fishes For You
  • Description: Like a fisherman who throws berley in the water before casting, we build content systems that attract qualified prospects before you make a pitch.
  • Columns: 3
  • Card variant: bordered
  • Features: See features array above

Differentiator Section

  • Title: Ecosystems Beat Campaigns
  • Layout: list
  • Benefits: See differentiators array above

Social Proof

  • Title: The Fish-Ball Effect in Action
  • Testimonial: See testimonial object above
  • Note: Placeholder until pilot case studies complete (Q1 2026). Use variant: 'featured' for Client Zero.

Pricing Section

  • Headline: Start Small. Stay If It Works.
  • Subheadline: No retainer commitment until the audit proves value.
  • Tiers: See pricingTiers array above
  • Billing toggle: Not needed (no annual option yet)

FAQ Section

  • Headline: Questions About Berley
  • Items: See faqItems array above
  • allowMultiple: true
  • Headline: Your Best Clients Are Already Swimming Past You.
  • CTA label: Book a 15-Minute Call
  • CTA href: https://calendly.com/berleytrails/fish-psychology
  • Background: gradient

Newsletter

  • Headline: Get the Berley
  • Submit label: Subscribe
  • Success message: You are on the trail.

Visual Direction

Color Palette

Ocean-inspired. The fishing metaphor should feel like water, not corporate.

TokenValueUsage
--backgroundDeep navy (#0A1628)Page backgrounds
--foregroundWarm white (#F5F0EB)Body text
--primaryTeal (#2DD4BF)CTAs, active states, links
--primary-foregroundDark navy (#0A1628)Text on teal buttons
--mutedSlate blue (#1E293B)Card backgrounds, sections
--muted-foregroundLight slate (#94A3B8)Secondary text
--accentOcean blue (#0EA5E9)Highlights, badges

Implementation: Create a berleytrails theme variant in @stackmates/theme following the existing variant pattern (zinc, slate, rose, etc.). All values as CSS custom properties.

Typography

  • Headlines: Bold, short. 3 words max per the content standards.
  • Body: Clean sans-serif (Inter from design system). 15px base.
  • Hero H1: text-5xl md:text-6xl lg:text-7xl font-bold text-balance

Imagery

  • Hero image: The berleytrails picture — fisherman, fish, berley trail. Custom illustration, not stock. Source from /docs/journey/pictures/stories/picture-berleytrails adapted for web. If not available, use a placeholder with the ocean gradient and a simple fishing icon.
  • Icons: Lucide icons throughout (Search, PenTool, Route, BarChart3, Repeat for the 5-step process)
  • No stock photos. Illustrations or icons only.

Tone

Confident. Direct. No corporate fluff. Hemingway. Short sentences. The copy sells by showing, not telling.


Integration Specs

IntegrationSolutionSpec
Booking CTACalendly (interim) → in-house BOOK-001All "Book a Call" CTAs open Calendly in new tab. When BOOK-001 ships, swap URLs to self-hosted scheduling. Time-Mind already has appointment block type — booking follows same patterns.
AnalyticsPlatform provider-agnostic tracking (L2)Events: page_view, cta_click, pricing_tier_viewed, newsletter_subscribed already defined in platform. Wire to existing analytics adapter.
NewsletterPlatform newsletter capture endpoint (L2)POST /api/intents/marketing/newsletter creates marketing contact via existing Resend adapter. Wire NewsletterSection onSubmit to this endpoint.
CRMPlatform CRM (L3 contacts, L3 deals)Use existing CRM for prospect and client tracking. Activities/Tasks/Notes repos need completing before meeting outcome tracking works.
Social DistributionPlatform LinkedIn/Instagram adapters (L2)Use existing adapters for berley content posting. Scheduling and analytics already built.
EmailPlatform Resend adapter + React Email (L2)Use existing email sending for client communications. Campaign automation not yet built.
Domainberleytrails.comVercel project. DNS configured separately.

Analytics Events

type AnalyticsEvent =
| { event: 'page_view'; page: string }
| { event: 'cta_click'; cta_id: 'hero' | 'footer' | 'pricing_audit' | 'pricing_trail' | 'pricing_ecosystem' }
| { event: 'pricing_tier_viewed'; tier: 'audit' | 'trail-builder' | 'ecosystem' }
| { event: 'faq_opened'; question: string }
| { event: 'newsletter_submitted'; email: string }
| { event: 'contact_form_submitted' };

Track cta_click on every button. Track pricing_tier_viewed when the pricing section enters the viewport.


Responsive Behavior

BreakpointBehavior
Mobile (375px)Hero stacks vertically — headline, subheadline, CTA, then image below. Pricing cards stack vertically. FAQ full-width accordion. CTAs full-width, 44px+ height.
Tablet (768px)Hero side-by-side. Pricing cards 2-column. Feature grid 2-column.
Desktop (1024px+)Full layout. Pricing 3-column. Feature grid 3-column. Max-width container (1400px).

Critical: Trail Builder (middle tier) must be visually highlighted at all breakpoints — highlighted: true + badge: 'Most Popular' + scale/ring treatment from PricingTable.


SEO Metadata

export const metadata = {
title: 'BerleyTrails — Stop Chasing Clients. Start Attracting Them.',
description: 'Content strategy that builds attraction systems for service businesses. Berley Audit from $1,500.',
keywords: 'content strategy, service business marketing, client attraction, content marketing NZ',
openGraph: {
title: 'BerleyTrails — Stop Chasing Clients. Start Attracting Them.',
description: 'Content strategy that builds attraction systems for service businesses.',
images: [{ url: '/og/berleytrails-hero.png', width: 1200, height: 630 }],
type: 'website',
url: 'https://berleytrails.com',
},
twitter: {
card: 'summary_large_image',
title: 'BerleyTrails — Stop Chasing Clients. Start Attracting Them.',
description: 'Content strategy that builds attraction systems for service businesses.',
images: ['/og/berleytrails-hero.png'],
},
};

Page Composition (Reference)

// apps/berleytrails/src/app/(marketing)/page.tsx
import {
HeroWithImage,
StatsCounter,
BenefitSection,
FeatureGrid,
TestimonialCard,
PricingTable,
FAQSection,
CTABanner,
NewsletterSection,
} from '@stackmates/ui-marketing';

export default function HomePage() {
return (
<>
<HeroWithImage
headline="Stop Chasing Clients. Start Attracting Them."
subheadline="Content strategy that builds attraction systems..."
cta={{ label: 'Book a Free Fish Psychology Call', href: '...' }}
image={{ src: '/hero-berleytrails.png', alt: 'Berley trail illustration' }}
background="gradient"
/>
<StatsCounter stats={stats} layout="row" background="dark" />
<BenefitSection
title="The Outbound Trap"
description="You spend 40% of your week finding clients..."
benefits={problemBenefits}
layout="split"
/>
<FeatureGrid
title="Berley Trails — Content That Fishes For You"
description="Like a fisherman who throws berley..."
features={features}
columns={3}
cardVariant="bordered"
/>
<BenefitSection
title="Ecosystems Beat Campaigns"
benefits={differentiators}
layout="list"
background="muted"
/>
<TestimonialCard testimonial={testimonial} variant="featured" />
<PricingTable
tiers={pricingTiers}
headline="Start Small. Stay If It Works."
subheadline="No retainer commitment until the audit proves value."
/>
<FAQSection
items={faqItems}
headline="Questions About Berley"
allowMultiple
/>
<CTABanner
headline="Your Best Clients Are Already Swimming Past You."
cta={{ label: 'Book a 15-Minute Call', href: '...' }}
background="gradient"
/>
<NewsletterSection
headline="Get the Berley"
submitLabel="Subscribe"
successMessage="You are on the trail."
/>
</>
);
}

Platform Proof

This build validates the platform thesis: build components once (@stackmates/ui-marketing), deploy to many ventures. The same 25 components that power dreamineering.com power berleytrails.com. Future ventures (prettymint, howzus) follow the same pattern.

SharedVenture-Specific
@stackmates/ui-marketing (25 components)Theme variant (ocean palette)
@stackmates/tailwind-presetCopy deck (this document)
@stackmates/design-tokensHero illustration
Analytics libraryCalendly integration
Vercel deployment pipelineDomain configuration

Platform Dependencies

Features this venture requires from the Feature Matrix.

Built and Reusable (L2-L3)

Feature IDFeatureStateIntegration Strategy
MKTG-004Analytics trackingL2Provider-agnostic tracking. Events already defined. Wire to existing adapter.
Newsletter captureL2POST /api/intents/marketing/newsletter endpoint + Resend adapter. Ready to use.
Email sendingL2Resend adapter + React Email templates. Ready for client comms.
CRM contactsL3Full CRUD, batch ops, search, summary views. Track prospects and clients.
CRM dealsL3Pipeline stages, probability, batch ops. Track client deals.
Social postingL2LinkedIn/Instagram adapters with scheduling and analytics. Berley distribution.
Design systemL28 theme variants, 25 marketing components. Add ocean as 9th variant.
AuthL3Better Auth ready when client portal needed.
PaymentsL1Stripe integration ready when billing needed.

Needs Building (L0)

Feature IDFeatureStateStrategy
MKTG-001Landing pagesL0This build — first venture site from shared components
BOOK-001Resource bookingL0Build in-house (Time-Mind appointment block type exists). Interim: Calendly.
MKTG-002Email campaignsL0Campaign builder not yet built. Can send individual emails via Resend adapter.

Architected but Incomplete (blocks full CRM tracking)

CapabilityWhat ExistsMissing
CRM ActivitiesEntity, schema, server actions, UI pageRepository implementation
CRM TasksEntity, schema, server actionsRepository implementation
CRM NotesEntity, schema, server actionsRepository implementation

Theme: Add ocean as a 9th variant in @stackmates/theme following the existing pattern (zinc, slate, rose, etc.). This proves the platform thesis — each venture gets its own theme from the shared design system.

Newsletter: Use existing POST /api/intents/marketing/newsletter endpoint + Resend adapter. No external service needed.

Booking: Calendly interim. Build BOOK-001 in-house — Time-Mind already has appointment block type. Swap URLs when BOOK-001 ships.

Questions

Does this spec give engineering enough to build berleytrails.com without asking questions?

  • Which venture should be the second test of the protocol — prettymint or howzus?
  • At what point does the ocean theme variant justify its own design token file vs inline overrides?
  • Should the blog route (P2) use the existing Docusaurus content system or a custom MDX setup?