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
| Route | Page | Purpose | Priority |
|---|---|---|---|
/ | Home | Hero + problem + solution + proof + pricing + FAQ + CTA | P0 |
/pricing | Pricing | 3 tiers deep + ROI calculator + FAQ | P1 |
/contact | Contact | Booking form + newsletter signup | P0 |
/blog | Blog index | Berley content hub | P2 |
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.
| # | Section | Component | Import Path |
|---|---|---|---|
| 1 | Hero | HeroWithImage | @stackmates/ui-marketing |
| 2 | Stats | StatsCounter | @stackmates/ui-marketing |
| 3 | Problem | BenefitSection | @stackmates/ui-marketing |
| 4 | Solution | FeatureGrid | @stackmates/ui-marketing |
| 5 | Differentiator | BenefitSection | @stackmates/ui-marketing |
| 6 | Social Proof | LogoWall + TestimonialCard | @stackmates/ui-marketing |
| 7 | Pricing | PricingTable | @stackmates/ui-marketing |
| 8 | FAQ | FAQSection | @stackmates/ui-marketing |
| 9 | Footer CTA | CTABanner | @stackmates/ui-marketing |
| 10 | Newsletter | NewsletterSection | @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):
- High CAC — You spend more acquiring clients than delivering value
- Pipeline anxiety — Revenue is unpredictable because outbound is unpredictable
- 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
featuresarray above
Differentiator Section
- Title: Ecosystems Beat Campaigns
- Layout:
list - Benefits: See
differentiatorsarray above
Social Proof
- Title: The Fish-Ball Effect in Action
- Testimonial: See
testimonialobject 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
pricingTiersarray above - Billing toggle: Not needed (no annual option yet)
FAQ Section
- Headline: Questions About Berley
- Items: See
faqItemsarray above - allowMultiple:
true
Footer CTA
- 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.
| Token | Value | Usage |
|---|---|---|
--background | Deep navy (#0A1628) | Page backgrounds |
--foreground | Warm white (#F5F0EB) | Body text |
--primary | Teal (#2DD4BF) | CTAs, active states, links |
--primary-foreground | Dark navy (#0A1628) | Text on teal buttons |
--muted | Slate blue (#1E293B) | Card backgrounds, sections |
--muted-foreground | Light slate (#94A3B8) | Secondary text |
--accent | Ocean 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-berleytrailsadapted 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
| Integration | Solution | Spec |
|---|---|---|
| Booking CTA | Calendly (interim) → in-house BOOK-001 | All "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. |
| Analytics | Platform provider-agnostic tracking (L2) | Events: page_view, cta_click, pricing_tier_viewed, newsletter_subscribed already defined in platform. Wire to existing analytics adapter. |
| Newsletter | Platform newsletter capture endpoint (L2) | POST /api/intents/marketing/newsletter creates marketing contact via existing Resend adapter. Wire NewsletterSection onSubmit to this endpoint. |
| CRM | Platform 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 Distribution | Platform LinkedIn/Instagram adapters (L2) | Use existing adapters for berley content posting. Scheduling and analytics already built. |
| Platform Resend adapter + React Email (L2) | Use existing email sending for client communications. Campaign automation not yet built. | |
| Domain | berleytrails.com | Vercel 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
| Breakpoint | Behavior |
|---|---|
| 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.
| Shared | Venture-Specific |
|---|---|
@stackmates/ui-marketing (25 components) | Theme variant (ocean palette) |
@stackmates/tailwind-preset | Copy deck (this document) |
@stackmates/design-tokens | Hero illustration |
| Analytics library | Calendly integration |
| Vercel deployment pipeline | Domain configuration |
Platform Dependencies
Features this venture requires from the Feature Matrix.
Built and Reusable (L2-L3)
| Feature ID | Feature | State | Integration Strategy |
|---|---|---|---|
| MKTG-004 | Analytics tracking | L2 | Provider-agnostic tracking. Events already defined. Wire to existing adapter. |
| — | Newsletter capture | L2 | POST /api/intents/marketing/newsletter endpoint + Resend adapter. Ready to use. |
| — | Email sending | L2 | Resend adapter + React Email templates. Ready for client comms. |
| — | CRM contacts | L3 | Full CRUD, batch ops, search, summary views. Track prospects and clients. |
| — | CRM deals | L3 | Pipeline stages, probability, batch ops. Track client deals. |
| — | Social posting | L2 | LinkedIn/Instagram adapters with scheduling and analytics. Berley distribution. |
| — | Design system | L2 | 8 theme variants, 25 marketing components. Add ocean as 9th variant. |
| — | Auth | L3 | Better Auth ready when client portal needed. |
| — | Payments | L1 | Stripe integration ready when billing needed. |
Needs Building (L0)
| Feature ID | Feature | State | Strategy |
|---|---|---|---|
| MKTG-001 | Landing pages | L0 | This build — first venture site from shared components |
| BOOK-001 | Resource booking | L0 | Build in-house (Time-Mind appointment block type exists). Interim: Calendly. |
| MKTG-002 | Email campaigns | L0 | Campaign builder not yet built. Can send individual emails via Resend adapter. |
Architected but Incomplete (blocks full CRM tracking)
| Capability | What Exists | Missing |
|---|---|---|
| CRM Activities | Entity, schema, server actions, UI page | Repository implementation |
| CRM Tasks | Entity, schema, server actions | Repository implementation |
| CRM Notes | Entity, schema, server actions | Repository 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?