Skip to content
Browse themes

Creator Course Landing Page

One person selling one course: a student testimonial as the hero because a course cannot demo, a long instructor section, one price and a refund policy on the page.

10 blocks243 lineslucide-reactAdded 2 Sept 2026

What's included

  • app/creator-course-landing-page.tsx
  • 10 blocks it is built from, installed with it
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add creator-course-landing-page

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Preview

Deep Practice
Nine weeks · next cohort 9 March

Learn to read a codebase you did not write

The skill nobody teaches and every job assumes: getting oriented in fifty thousand lines of someone else's decisions, quickly, without reading all of it.

Join the March cohortSee the curriculum
I had been a developer for six years and had quietly assumed everyone else found new codebases as slow as I did. Week three broke that. I onboarded onto a new team in September and was shipping in four days.
Nadia OseiSenior engineer, Northwind — cohort 4

Past students now work at

  • Northwind
  • Contoso
  • Lumon
  • Initech
  • Globex
  • Vandelay

What you will be able to do in nine weeks

Written as capabilities rather than topics, because “covers dependency graphs” tells you nothing about whether you could use one on Monday.

  • Find the load-bearing 5% of a codebase in an afternoon

    Most of any repository is leaves. There is a small core that everything else hangs off, and there are repeatable ways to find it that do not involve reading files in alphabetical order. You will do this on four real open-source projects, timed.

  • Reconstruct the decisions nobody wrote down

    Why is there a second cache here? Why does this module import nothing? Git history, issue threads and the shape of the code itself are evidence, and reading them is a learnable skill rather than seniority.

  • Change something safely on day two

    The goal of orientation is not understanding — it is a correct change. You will practise identifying the smallest safe edit and the blast radius around it, which is a different question from “how does this work”.

  • Say “I do not know yet” with a plan attached

    The professional version of being lost is a specific list of what you have ruled out and what you would look at next. Half the cohort says this is the part that changed how they are perceived at work.

Nine weeks, one repository a fortnight

Two hours of recorded material a week and a live session on Thursdays. Everything is recorded, and nobody has ever been penalised for watching it late.

Reviews that start themselves

  • Reviewers assigned by file ownership, not by whoever is online
  • Stale approvals dismissed automatically when the diff changes
  • Merge unblocks the moment the last required check goes green

Who is actually teaching it

Not a faceless academy. One person, who answers the forum posts and runs the Thursday sessions live rather than shipping a recording from 2023.

  • Marcus Okafor

    Instructor — and the person who replies to your posts

    Fourteen years across four companies, most of it inherited code. Spent three years as the person a large payments company sent into failing projects, which is where this material came from — it is the checklist I built for myself and then found I could teach. I have run this cohort eleven times and rewritten a third of it since the first one.

One price, one payment

No upsell tier, no “community edition”, and no separate charge for the live sessions.

Deep Practice — March cohort

£480one payment, no subscription

£640£160 off until 20 February

Join the March cohort

Full refund up to the end of week three, no reason needed, no form to fill in — reply to any email from me. 11 of 340 students have taken it. Access does not expire and there is no subscription to cancel.

What is included

  • Nine weeks of material, yours to keep permanently
  • Nine live Thursday sessions, recorded if you miss one
  • Four real codebases with worked solutions
  • Written feedback on three submitted exercises
  • A private forum where I answer, not a moderator
  • Company invoice on request — most employers pay for this

Before you enrol

Everything people ask before getting started.

How much time does it actually take?

Two hours of recorded material and roughly three hours of exercises a week, plus a 90-minute live session on Thursdays at 18:00 UK. Call it six hours. People who treat it as three hours get noticeably less out of it, and I would rather say that than have you find out in week five.

What do I need to know already?

Comfort in at least one language and some experience of a codebase you did not start. Roughly two years in. It is not a beginner course and it is deliberately not an advanced one — the material is about a skill senior developers usually acquired by accident.

Which languages are the codebases in?

TypeScript, Python, Go and one Rust project. You do not need to know all four — that is somewhat the point, since orienting in an unfamiliar language is the harder version of the same skill. Every exercise has a worked solution.

What if I miss the live sessions?

They are recorded and posted the same evening, and the forum is where most of the actual discussion happens anyway. About a third of each cohort is in a timezone that makes 18:00 UK impossible and they do fine.

Will my employer pay for it?

Usually, yes. There is a one-page justification you can forward and I will invoice a company directly, with a PO number if procurement needs one. Roughly 60% of students go this route.

Does access expire?

No. The material, the recordings and the forum stay available, including the updates I make for later cohorts. There is no subscription and nothing to cancel.

What if it is not for me?

Full refund any time up to the end of week three — reply to an email and say so. No form, no exit interview, no attempt to talk you out of it. 11 people out of 340 have done it and I would rather that number were higher than have anyone stay resentful.

…which is why the migration queues behind the reporting job rather than failing outright. The lock is held for as long as the report runs, and on a large table that can be several minutes.

The safe version is to set a lock timeout and accept that the migration may need a second pass, rather than letting it wait indefinitely and block every write behind it.

The real page, rendered in your current theme — every section below is a live block, not a screenshot.

Built from

All blocks
  1. Responsive NavbarBrand, links and CTAs with a mobile panel that unmounts when closed — so its links are never tabbable while invisible — plus escape-to-close and focus return.
  2. Hero Anchored by a Customer QuotePitch on the left, a marked-up figure and blockquote on the right, so the claim and the evidence for it share the fold instead of sitting a scroll apart.
  3. Under-Hero Logo StripOne unbordered line of wordmarks beside a claim you can actually be wrong about, sized to sit under a hero without pushing the CTA down or moving while the headline is being read.
  4. Icon Feature GridUniform cells, no spans, no state — the grid for nine things that matter equally, where a bento would be a wall and tabs would be a filing cabinet.
  5. Tabbed Feature ShowcaseFeatures as a real tablist — arrow keys, roving focus and a drawn product panel per tab — for the section where four features would otherwise fight for one scroll.
  6. Team GridAn about-page team section on initials avatars rather than photos, so shipping it never waits on headshots and there is no broken-image state to design.
  7. Single-Plan Price CardOne price given a whole card, with the objection a one-time price raises answered under the button rather than in a FAQ further down.
  8. No-JS FAQ AccordionExclusive accordion behaviour from named <details> elements — no state, no hooks, no JavaScript, full keyboard support for free.
  9. In-article CTA CardThe offer that sits inside the column instead of interrupting it — a labelled aside a screen reader can skip in one keystroke, tied to the paragraph above it, with the friction admitted before the click.
  10. Minimal Footer BarOne row — brand, a handful of links, socials, copyright — for a site where a five-column footer would be whitespace pretending to be structure.

Only want one section? Open it and copy that block instead — browse Navigation.

Shipped in these templates

Want the whole project rather than this one screen? A template ships every route, the theme tokens and the layout.

Source

app/creator-course-landing-page.tsx
/**
 * A creator's course landing page, assembled from blocks.
 *
 * One person selling one thing. That is a different sale from every other
 * page in this catalog, and the difference is that the product and the
 * person are the same object — nobody buys a course from an organisation:
 *
 *   navbar          two links, one price, no account
 *   hero            the result someone got, in their words, above the pitch
 *   logo strip      where past students work now — the outcome, not the brand
 *   outcomes        what you will be able to do, not what is covered
 *   curriculum      the modules, tabbed, so the length is visible not scary
 *   instructor      who is teaching it, at length, because that is the product
 *   pricing         one number, one payment, a real refund policy
 *   faq             time commitment, prerequisites, refunds, does it expire
 *   cta             the ask, with the cohort date attached
 *   footer          minimal, because there are three other pages at most
 *
 * WHY A TESTIMONIAL IS THE HERO. A course cannot demo. Screenshots of
 * lecture slides sell nothing, and the headline claim is unfalsifiable by
 * definition. The nearest thing to a demo is somebody who finished it
 * saying what changed, which is why `<HeroTestimonial>` is here and not
 * three sections down where testimonials usually live.
 *
 * WHY THE INSTRUCTOR SECTION IS AS LONG AS IT IS. `<TeamGrid>` with one
 * member reads oddly on a company site and is exactly right here: the
 * decision being made is whether to spend nine weeks listening to this
 * particular person. A two-line bio under a headshot is the most common
 * reason a good course does not sell.
 *
 * WHY THE REFUND POLICY IS ON THE PAGE RATHER THAN IN THE TERMS. It is the
 * single biggest objection to a several-hundred-pound purchase from an
 * individual with no brand behind them. A specific, generous, checkable
 * policy stated in the pricing block does more work than any amount of
 * testimonial.
 *
 * Every section takes props, so this file is a running order rather than a
 * wall of copy — swap the content without touching the layout.
 */

import * as React from 'react'
import { Gauge, KeyRound, Puzzle, ShieldCheck } from 'lucide-react'

import { NavbarSimple } from '@/components/navbar-simple'
import { HeroTestimonial } from '@/components/hero-testimonial'
import { LogoStrip } from '@/components/logo-strip'
import { FeatureIconGrid } from '@/components/feature-icon-grid'
import { FeatureTabs } from '@/components/feature-tabs'
import { TeamGrid } from '@/components/team-grid'
import { PricingSingle } from '@/components/pricing-single'
import { FaqAccordion } from '@/components/faq-accordion'
import { CtaInlineCard } from '@/components/cta-inline-card'
import { FooterMinimal } from '@/components/footer-minimal'

export default function CreatorCourseLandingPage() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <NavbarSimple
        brand="Deep Practice"
        links={[
          { label: 'Curriculum', href: '#curriculum' },
          { label: 'Who teaches it', href: '#instructor' },
        ]}
        activeLabel="Curriculum"
        signInLabel="Student login"
        signInHref="/login"
        ctaLabel="Join the March cohort"
        ctaHref="#enrol"
      />

      <main>
        {/* A course cannot demo. The nearest thing is somebody who finished
            it saying what changed. See the header note. */}
        <HeroTestimonial
          eyebrow="Nine weeks · next cohort 9 March"
          heading="Learn to read a codebase you did not write"
          subheading="The skill nobody teaches and every job assumes: getting oriented in fifty thousand lines of someone else's decisions, quickly, without reading all of it."
          primaryLabel="Join the March cohort"
          primaryHref="#enrol"
          secondaryLabel="See the curriculum"
          secondaryHref="#curriculum"
          quote="I had been a developer for six years and had quietly assumed everyone else found new codebases as slow as I did. Week three broke that. I onboarded onto a new team in September and was shipping in four days."
          authorName="Nadia Osei"
          authorTitle="Senior engineer, Northwind — cohort 4"
        />

        {/* Where students ended up, not who sponsors the course. */}
        <LogoStrip
          claim="Past students now work at"
          logos={['Northwind', 'Contoso', 'Lumon', 'Initech', 'Globex', 'Vandelay']}
        />

        <FeatureIconGrid
          heading="What you will be able to do in nine weeks"
          subheading="Written as capabilities rather than topics, because “covers dependency graphs” tells you nothing about whether you could use one on Monday."
          columns={2}
          features={[
            {
              icon: Gauge,
              title: 'Find the load-bearing 5% of a codebase in an afternoon',
              body: 'Most of any repository is leaves. There is a small core that everything else hangs off, and there are repeatable ways to find it that do not involve reading files in alphabetical order. You will do this on four real open-source projects, timed.',
            },
            {
              icon: Puzzle,
              title: 'Reconstruct the decisions nobody wrote down',
              body: 'Why is there a second cache here? Why does this module import nothing? Git history, issue threads and the shape of the code itself are evidence, and reading them is a learnable skill rather than seniority.',
            },
            {
              icon: KeyRound,
              title: 'Change something safely on day two',
              body: 'The goal of orientation is not understanding — it is a correct change. You will practise identifying the smallest safe edit and the blast radius around it, which is a different question from “how does this work”.',
            },
            {
              icon: ShieldCheck,
              title: 'Say “I do not know yet” with a plan attached',
              body: 'The professional version of being lost is a specific list of what you have ruled out and what you would look at next. Half the cohort says this is the part that changed how they are perceived at work.',
            },
          ]}
        />

        {/* Tabbed, so nine weeks reads as navigable rather than as a wall. */}
        <div id="curriculum">
          <FeatureTabs
            heading="Nine weeks, one repository a fortnight"
            subheading="Two hours of recorded material a week and a live session on Thursdays. Everything is recorded, and nobody has ever been penalised for watching it late."
          />
        </div>

        {/* One person, at length. `<TeamGrid>` with a single member would be
            odd on a company site and is exactly right here — the decision is
            whether to spend nine weeks listening to this particular person. */}
        <div id="instructor">
          <TeamGrid
            heading="Who is actually teaching it"
            intro="Not a faceless academy. One person, who answers the forum posts and runs the Thursday sessions live rather than shipping a recording from 2023."
            members={[
              {
                name: 'Marcus Okafor',
                role: 'Instructor — and the person who replies to your posts',
                bio: 'Fourteen years across four companies, most of it inherited code. Spent three years as the person a large payments company sent into failing projects, which is where this material came from — it is the checklist I built for myself and then found I could teach. I have run this cohort eleven times and rewritten a third of it since the first one.',
                initials: 'MO',
                twitter: '#',
                github: '#',
                linkedin: '#',
              },
            ]}
          />
        </div>

        <div id="enrol">
          <PricingSingle
            heading="One price, one payment"
            subheading="No upsell tier, no “community edition”, and no separate charge for the live sessions."
            planName="Deep Practice — March cohort"
            price="£480"
            cadence="one payment, no subscription"
            compareAtPrice="£640"
            savingLabel="£160 off until 20 February"
            features={[
              'Nine weeks of material, yours to keep permanently',
              'Nine live Thursday sessions, recorded if you miss one',
              'Four real codebases with worked solutions',
              'Written feedback on three submitted exercises',
              'A private forum where I answer, not a moderator',
              'Company invoice on request — most employers pay for this',
            ]}
            ctaLabel="Join the March cohort"
            ctaHref="#"
            // The single biggest objection to buying from an individual. It
            // is here rather than in the terms because this is where it is
            // being weighed.
            note="Full refund up to the end of week three, no reason needed, no form to fill in — reply to any email from me. 11 of 340 students have taken it. Access does not expire and there is no subscription to cancel."
          />
        </div>

        <FaqAccordion
          heading="Before you enrol"
          items={[
            {
              question: 'How much time does it actually take?',
              answer:
                'Two hours of recorded material and roughly three hours of exercises a week, plus a 90-minute live session on Thursdays at 18:00 UK. Call it six hours. People who treat it as three hours get noticeably less out of it, and I would rather say that than have you find out in week five.',
            },
            {
              question: 'What do I need to know already?',
              answer:
                'Comfort in at least one language and some experience of a codebase you did not start. Roughly two years in. It is not a beginner course and it is deliberately not an advanced one — the material is about a skill senior developers usually acquired by accident.',
            },
            {
              question: 'Which languages are the codebases in?',
              answer:
                'TypeScript, Python, Go and one Rust project. You do not need to know all four — that is somewhat the point, since orienting in an unfamiliar language is the harder version of the same skill. Every exercise has a worked solution.',
            },
            {
              question: 'What if I miss the live sessions?',
              answer:
                'They are recorded and posted the same evening, and the forum is where most of the actual discussion happens anyway. About a third of each cohort is in a timezone that makes 18:00 UK impossible and they do fine.',
            },
            {
              question: 'Will my employer pay for it?',
              answer:
                'Usually, yes. There is a one-page justification you can forward and I will invoice a company directly, with a PO number if procurement needs one. Roughly 60% of students go this route.',
            },
            {
              question: 'Does access expire?',
              answer:
                'No. The material, the recordings and the forum stay available, including the updates I make for later cohorts. There is no subscription and nothing to cancel.',
            },
            {
              question: 'What if it is not for me?',
              answer:
                'Full refund any time up to the end of week three — reply to an email and say so. No form, no exit interview, no attempt to talk you out of it. 11 people out of 340 have done it and I would rather that number were higher than have anyone stay resentful.',
            },
          ]}
        />

        <CtaInlineCard
          contextLabel="Next cohort — 9 March"
          heading="Thirty places, and they have gone early twice"
          body="Nine weeks, one payment, refundable to the end of week three. If March is wrong for you, the list will tell you when June opens and nothing else."
          actionLabel="Join the March cohort"
          href="#enrol"
          fineprint="£480 until 20 February, then £640. Company invoicing available."
        />
      </main>

      <FooterMinimal
        brand="Deep Practice"
        links={[
          { label: 'Curriculum', href: '#curriculum' },
          { label: 'Journal', href: '/blog' },
          { label: 'marcus@deeppractice.example', href: 'mailto:marcus@deeppractice.example' },
          { label: 'Terms', href: '#' },
        ]}
        socials={[
          { label: 'Marcus on X', href: '#', icon: 'twitter' },
          { label: 'Marcus on GitHub', href: '#', icon: 'github' },
        ]}
      />
    </div>
  )
}

How to use it

  1. 1. Copy each of the 10 blocks above into components/ — each block page has its own copy button.
  2. 2. Drop this file at app/creator-course-landing-page.tsx. The imports already point at @/components/…, so they resolve with no edits.
  3. 3. Delete the sections you do not want. Every block takes props, so the copy changes without the layout moving.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt
More Marketing Pages
Open the full page for this page
SaaS Landing Page
A complete marketing page in the order that actually converts — hook, proof, substance, price, objections, exit. Twelve blocks, navbar and footer included.
Marketing Pages12 blocks89 lines
Open the full page for this page
Pricing Page
Plans, a feature matrix and a pricing-specific FAQ written to remove the last purchase objection rather than answer general questions.
Marketing Pages3 blocks94 lines
Open the full page for this page
Waitlist Landing Page
A pre-launch page for a product you cannot buy yet: one email field, scarcity instead of adoption, and no pricing section to be held to later.
Marketing Pages9 blocks206 lines
Open the full page for this page
Developer Tool Landing Page
Install command first, real code before any prose, and a usage calculator instead of tiers — the order a developer actually scans in.
Marketing Pages9 blocks254 lines
Open the full page for this page
Mobile App Landing Page
Store badges above the fold, the App Store rating as the first proof, and a single price — a page with one job, which is the install.
Marketing Pages9 blocks231 lines
Open the full page for this page
Agency Landing Page
A studio site: full-bleed hero, client list, engagements described as engagements, and the actual team — with no pricing, on purpose.
Marketing Pages9 blocks216 lines
Open the full page for this page
Local Service Landing Page
A booking widget above the fold, every price published including the awkward ones, and a footer carrying the registrations a regulated trade must show.
Marketing Pages9 blocks353 lines
Open the full page for this page
Marketplace Landing Page
Two audiences, one page: a search field and real listings for buyers up top, the seller economics below, and a searchable FAQ because they ask different things.
Marketing Pages9 blocks354 lines
Open the full page for this page
Enterprise Landing Page
Built for a champion assembling an internal case: numbers in the hero, a comparison that concedes two rows, video references, and published prices instead of a sales wall.
Marketing Pages10 blocks336 lines
Open the full page for this page
Integration Platform Landing Page
The connector names in the hero, a catalogue with honest live/beta/planned status, four SDK languages, credit pricing, and a dated roadmap for everyone who is not on the list.
Marketing Pages9 blocks377 lines
Open the full page for this page
Blog Index
The post grid, a subscribe ask that comes after the proof, and a minimal footer — no hero, because the featured post already is one.
Marketing Pages4 blocks39 lines
Open the full page for this page
Article Page
A single post: header, byline and opening prose in one reading column, with the subscribe form after the article — at the only moment it converts.
Marketing Pages4 blocks39 lines
Open the full page for this page
Careers Page
Team first, openings second, then the questions candidates only ask after an offer — answered while they can still change who applies.
Marketing Pages6 blocks72 lines
Open the full page for this page
Documentation Page
The site navbar over the three-column docs frame. In your project this is one catch-all route — the slug picks the article, the frame never changes.
Marketing Pages2 blocks30 lines
Open the full page for this page
Help Centre
Search first, the six answers that absorb the most contact volume under it, and the ticket form in plain sight rather than behind a modal — a support page measured in tickets not filed.
Marketing Pages7 blocks162 lines
Open the full page for this page
Changelog Page
The release timeline with the site chrome kept on, and the one subscribe form on the site that is not a detour — "tell me when this page changes" is exactly what it promises.
Marketing Pages4 blocks39 lines
Open the full page for this page
Security & Trust
The page a security questionnaire arrives from, written to be forwarded rather than to persuade: certifications early, benchmarks with a denominator, objections in a reviewer’s own words, and a route to a human.
Marketing Pages8 blocks60 lines
Open the full page for this page
Switching & Migration
The landing page for a reader whose current tool already works: the migration mechanism second rather than buried, integrations stated at depth, and deliberately no pricing section.
Marketing Pages8 blocks57 lines
Open the full page for this page
Launch Note
A product announcement shaped as writing rather than a landing page — serif headline, real byline, three pieces of evidence, and an endpoint card that doubles as documentation for the week before the docs exist.
Marketing Pages6 blocks53 lines
Open the full page for this page
Single Offer
One thing, one price, named above the fold — for a course, a consultation or a one-time licence, where there is nothing to compare against and hiding the number answers the only question last.
Marketing Pages7 blocks57 lines
Take 1 of 2
Open the full page for this page
About Page
No hero — a reader who clicked "About" has already read the pitch and is checking whether the company is real, so the page opens with numbers and a timeline instead of a headline.
Marketing Pages7 blocks110 lines
Take 1 of 2
Open the full page for this page
Contact Page
The form first, then the four questions that cause most of the messages — answered here, because that is faster for the sender than a reply and leaves the inbox for what needs a person.
Marketing Pages4 blocks77 lines
Take 1 of 2
Open the full page for this page
Team Page
Who we are, as distinct from who we are hiring: faces, the shape of the company in four numbers, and three working commitments that could actually be falsified.
Marketing Pages6 blocks91 lines
Take 1 of 2
Open the full page for this page
FAQ Page
Search and browse, in that order, because the two halves serve opposite visitors — one arrives from a search engine with a phrase, the other from the navbar with none.
Marketing Pages5 blocks170 lines
Take 1 of 2
Open the full page for this page
Case Study
The numbers above the story, which is the opposite of how these are usually written: the colleague this link gets forwarded to needs the result in the first screen.
Marketing Pages7 blocks116 lines
Take 1 of 2
Open the full page for this page
Case Study Index
Excerpts that lead with the outcome rather than the customer’s biography, filterable by industry — because the reader is scanning for a problem that resembles their own.
Marketing Pages6 blocks134 lines
Take 1 of 2
Open the full page for this page
Services Page
For a business that sells work rather than licences: three engagements named by situation, and prices in a comparison table rather than a pricing card with a monthly toggle that does not apply.
Marketing Pages7 blocks173 lines
Take 1 of 2
Open the full page for this page
Integrations Directory
Every connection with its real status on the card — live, beta or planned — because a directory that hides which is which is discovered at exactly the wrong moment.
Marketing Pages6 blocks153 lines
Take 1 of 2
Open the full page for this page
Integration Detail
One connection, answering the four questions an integration page usually leaves to a support ticket: which records move, which way, how often, and what happens on conflict.
Marketing Pages8 blocks189 lines
Take 1 of 2
Open the full page for this page
Comparison / Alternatives
The competitor-name landing page, with a section naming where each rival is the better buy — which is what makes the other forty rows believable.
Marketing Pages7 blocks143 lines
Take 1 of 2
Open the full page for this page
Public Roadmap
Board plus changelog, because a roadmap alone is a promise — the last three releases underneath are what turn the shipped column into something with dates attached.
Marketing Pages6 blocks143 lines
Take 1 of 2
Open the full page for this page
Webinar / Event
Registration at the top and again at the bottom, with an agenda timed by the minute — so the reader knows what they are getting before handing over an address.
Marketing Pages7 blocks139 lines
Take 1 of 2
Open the full page for this page
Coming Soon
The shortest page in the catalog, and it still says what the product does — including what it will not do at launch. No countdown, because a clock at zero is worse than no clock.
Marketing Pages4 blocks88 lines
Take 1 of 2
Open the full page for this page
Community Page
Member counts and reply times on every door, because "join our community" with no number reads as an invitation into an empty room — plus a digest for people who will not install another chat app.
Marketing Pages7 blocks101 lines
Take 1 of 2
Open the full page for this page
Affiliate Programme
Terms before the application, and a calculator so the reader sees a number rather than doing arithmetic with an ARPU they do not know.
Marketing Pages7 blocks128 lines
Take 1 of 2
Open the full page for this page
Testimonials Wall
Third-party scores first, because they are the only part of the page the company does not control — and the four-star quotes stay in, because a wall of nothing but fives reads as filtered.
Marketing Pages7 blocks174 lines
Take 1 of 2
Open the full page for this page
Gallery / Showcase
A switcher rather than an infinite grid: four named views, one visible at a time, so the page weighs one image on load instead of forty.
Marketing Pages7 blocks111 lines
Take 1 of 2
Open the full page for this page
Portfolio Index
A studio’s list of work, with excerpts that name the outcome and the constraint rather than the aesthetic — a contents page, not a landing page.
Marketing Pages7 blocks144 lines
Open the full page for this page
Developer Portfolio
An engineer’s portfolio that opens on a terminal rather than a gradient, and puts thirty legible lines of real code on the page — because a portfolio that only links to repositories asks the reader to go and judge for themselves, and almost nobody does.
Marketing Pages9 blocks304 lines
Open the full page for this page
Résumé
A personal site whose home page is the CV itself, printable, so the document that decides whether you get a reply is the one that is actually maintained. Four blocks, and the restraint is the design.
Marketing Pages4 blocks91 lines
Open the full page for this page
Crypto Exchange Landing
A regulated exchange’s front door: a moving price rail before a word of copy, custody and reserves above the feature grid, and the risk warning as a section rather than as small print.
Marketing Pages10 blocks307 lines
Open the full page for this page
Markets
The public price screen — sparklines instead of a percentage column, because two assets both up 4% got there differently, and that shape is what a trader is scanning for.
Marketing Pages7 blocks200 lines
Open the full page for this page
Conference Landing
A conference home page built around a deadline: the price step-up above the hero, the programme extract above the speakers, and tickets as a comparison rather than a plan picker.
Marketing Pages10 blocks294 lines
Open the full page for this page
Conference Programme
Both days in full, as two grids rather than a day switcher — because this is the page people print, and a tab hides half of it from find-in-page.
Marketing Pages4 blocks263 lines
Open the full page for this page
Restaurant Landing
Hours, address and phone as a first-class section directly under the hero, then the menu — the two jobs a restaurant site has, in the order visitors actually need them.
Marketing Pages9 blocks236 lines
Open the full page for this page
Menu
The full bill of fare, typeset with leaders and dietary marks, split into food and drink because a diner reads the two differently. No photography, deliberately.
Marketing Pages5 blocks335 lines
Open the full page for this page
Table Reservation
Two booking blocks on purpose: four nights with free-slot counts to answer “is there any point”, then the real grid. The cancellation policy is stated before the button, not in the confirmation email.
Marketing Pages6 blocks183 lines
Open the full page for this page
Property Search
An estate agency home page where search owns the first screen and results are already populated, plus the achieved-against-asking figure most agents will not publish.
Marketing Pages7 blocks183 lines
Open the full page for this page
Property Detail
A product detail page with different stakes: tenure, council tax, EPC and chain position above the prose, and a description that names a flaw so the rest is believed.
Marketing Pages8 blocks214 lines
Open the full page for this page
Job Board
A two-sided marketplace where only one side is reading — candidates get the whole page, employers get one section. Every listing carries a real salary range, which is the entire differentiator.
Marketing Pages8 blocks248 lines
Open the full page for this page
Job Listing
One role, with the four facts a candidate needs before the mission statement and the whole interview process published — stages, hours, and whether the take-home is paid.
Marketing Pages8 blocks229 lines
Open the full page for this page
Newsletter Landing
The archive is the argument, so it sits above the testimonials, and the three worries about handing over an address are answered as content rather than as small print.
Marketing Pages8 blocks268 lines
Open the full page for this page
Open Source Project
The install command above the hero, the API in twenty lines, and who funds it said plainly — because “what happens if the sponsors stop” is the question that decides whether a team takes the dependency.
Marketing Pages9 blocks295 lines
Open the full page for this page
Directory Index
Faceted by pricing model and hosting rather than by category, because the reader already knows the category. Publishes its own removal rate, which is a claim that can be checked.
Marketing Pages8 blocks333 lines
Open the full page for this page
Directory Listing
One entry, compared against the two obvious alternatives — against the vendor’s interest and exactly in the reader’s. No buy button and no affiliate link, which is what makes the comparison credible.
Marketing Pages9 blocks251 lines
Open the full page for this page
Streaming Service Landing
The catalogue sells itself: rails second, features far down as objection handling, and a real watch screen on the marketing page instead of a device montage.
Marketing Pages8 blocks257 lines
Open the full page for this page
Watch
The one page in the catalog whose job is to get out of the way — player, chapters, a searchable transcript, and no comments section, because a thread is a moderation commitment rather than a component.
Marketing Pages5 blocks182 lines
Take 2 of 2
Open the full page for this page
About Page 02
The founder’s letter instead of the evidence wall: a byline and a dateline, for a company whose best asset is still conviction rather than a six-year record — and it ends on the job board, because /team is linked from job posts more often than from sales decks.
Marketing Pages7 blocks170 lines
Take 2 of 2
Open the full page for this page
Contact Page 02
Route before you write — three doors, each with the form its sender actually needs: a calendar for a buyer, a structured ticket for a broken import. One textarea costs a round trip.
Marketing Pages6 blocks147 lines
Take 2 of 2
Open the full page for this page
Team Page 02
The team page that is really a recruiting page: it opens on the trade rather than the faces, and puts a salary band on every role — a board with three bands and one “competitive” teaches the reader which is the bad one.
Marketing Pages7 blocks154 lines
Take 2 of 2
Open the full page for this page
FAQ Page 02
Objection-ordered and search-free: the questions that lose deals first, hardest at the top, because a search box over eighteen questions implies a list long enough to get lost in — and its empty state reads as “no refund policy”.
Marketing Pages6 blocks215 lines
Take 2 of 2
Open the full page for this page
Case Study 02
The narrative take, for a study found by search rather than forwarded by a champion: the customer’s sentence first, the numbers last, and the six weeks in the middle where the software was losing to a spreadsheet.
Marketing Pages7 blocks153 lines
Take 2 of 2
Open the full page for this page
Case Study Index 02
A results directory rather than a reading list: search the situation, facet by entity count and ledger, and the aggregate claim sits at the bottom underneath the thirty-four rows it was computed from.
Marketing Pages7 blocks205 lines
Take 2 of 2
Open the full page for this page
Services Page 02
One productised engagement with the price in the first screen and no mandatory call — a fixed price behind a scoping call is consulting with extra steps. Includes the paragraph naming when it is the wrong shape.
Marketing Pages8 blocks185 lines
Take 2 of 2
Open the full page for this page
Integrations Index 02
Search-first, with facet counts including the zeroes — nobody browses an integration directory, and “Payroll (0)” answers the question inside the list the reader is already looking at.
Marketing Pages7 blocks193 lines
Take 2 of 2
Open the full page for this page
Integration Detail 02
The setup guide, not the pitch: what moves and which way, then a five-step wizard — written for the person turning the connector on rather than the one deciding to buy it.
Marketing Pages7 blocks309 lines
Take 2 of 2
Open the full page for this page
Alternatives Page 02
One rival, head to head, for a reader who already owns the competitor — so the argument is what a migration costs, and the page opens by telling roughly a third of its readers to stay where they are.
Marketing Pages8 blocks219 lines
Take 2 of 2
Open the full page for this page
Roadmap Page 02
Themes and refusals, no quarters — four problems stated as problems, plus the four things we have decided never to build, which is the section that takes nerve and the one customers actually need.
Marketing Pages7 blocks180 lines
Take 2 of 2
Open the full page for this page
Webinar Page 02
The replay, ungated, for the traffic that arrives months after the event — the gate moves to the transcript and the template, where it is a trade rather than a toll.
Marketing Pages7 blocks192 lines
Take 2 of 2
Open the full page for this page
Coming Soon 02
A referral queue with a real position: three places per invite, forty admitted a week, and the admission ceiling on the page rather than in the confirmation email — otherwise it is a dark pattern with a progress bar.
Marketing Pages5 blocks116 lines
Take 2 of 2
Open the full page for this page
Community Page 02
The calendar is the community: the next session bookable in the first screen, the month underneath, and the chat links demoted to a strip — an idle Slack is a worse first impression than a half-full calendar.
Marketing Pages6 blocks137 lines
Take 2 of 2
Open the full page for this page
Affiliate Page 02
Proof before arithmetic — what four named partners actually earned last quarter, including the one for whom it is not working, and no calculator anywhere. A slider shows what you could earn from numbers you picked yourself.
Marketing Pages7 blocks212 lines
Take 2 of 2
Open the full page for this page
Testimonials Wall 02
Segmented by who is talking rather than sorted by score, because a wall of forty quotes is uniformly impressive and uniformly irrelevant — with the full rating spread underneath, ones included.
Marketing Pages8 blocks229 lines
Take 2 of 2
Open the full page for this page
Gallery Page 02
The whole catalogue at once, filterable, with the total stated up front — the opposite trade to the switcher, and it honestly costs ninety images on load rather than one.
Marketing Pages7 blocks209 lines
Take 2 of 2
Open the full page for this page
Portfolio Index 02
One project per screen, four in total, each naming the constraint it worked around — nobody reads four case studies, and the constraint is the only sentence a competitor cannot copy.
Marketing Pages7 blocks169 lines