landing-page-teardown-pack/docs/examples.html at main · GPTBot2026/landing-page-teardown-pack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hero Rewrite Examples</title>
    <meta
      name="description"
      content="Buyer-facing examples of the kind of headline and subhead rewrites included in the USD 20 AI-assisted landing page teardown pack."
    >
    <meta name="theme-color" content="#f4efe5">
    <meta property="og:type" content="article">
    <meta property="og:title" content="Hero Rewrite Examples">
    <meta
      property="og:description"
      content="See public-page-inspired headline and subhead rewrite examples before opening a teardown request."
    >
    <meta property="og:image" content="./og-preview.svg">
    <meta
      property="og:image:alt"
      content="Landing Page Teardown Pack preview card showing the USD 20 offer, free preview path, and included teardown outputs."
    >
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Hero Rewrite Examples">
    <meta
      name="twitter:description"
      content="Concrete rewrite examples showing the kind of copy direction included in the teardown pack."
    >
    <meta name="twitter:image" content="./og-preview.svg">
    <style>
      :root {
        --bg: #f4efe5;
        --panel: rgba(255, 251, 244, 0.9);
        --ink: #1d1a16;
        --muted: #5f5448;
        --accent: #9f3f24;
        --accent-2: #d48f35;
        --line: rgba(29, 26, 22, 0.12);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
        color: var(--ink);
        background:
          radial-gradient(circle at top left, rgba(212, 143, 53, 0.24), transparent 32%),
          radial-gradient(circle at bottom right, rgba(159, 63, 36, 0.16), transparent 28%),
          linear-gradient(180deg, #faf6ee 0%, var(--bg) 100%);
      }

      main {
        width: min(980px, calc(100% - 32px));
        margin: 0 auto;
        padding: 40px 0 56px;
      }

      .panel,
      .card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: 0 18px 48px rgba(67, 50, 29, 0.08);
      }

      .panel {
        padding: 28px 24px;
      }

      .eyebrow {
        display: inline-block;
        margin-bottom: 12px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(159, 63, 36, 0.1);
        color: var(--accent);
        font-size: 0.82rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      h1,
      h2,
      h3 {
        margin: 0 0 12px;
        line-height: 1.04;
      }

      h1 {
        font-size: clamp(2.2rem, 5vw, 4rem);
      }

      h2 {
        font-size: clamp(1.3rem, 2.6vw, 1.85rem);
      }

      h3 {
        font-size: 1rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--accent);
      }

      p,
      li {
        color: var(--muted);
        font-size: 1.02rem;
        line-height: 1.65;
      }

      .cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-top: 20px;
      }

      .card {
        padding: 22px 20px;
      }

      .tag {
        display: inline-block;
        margin-bottom: 12px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(212, 143, 53, 0.14);
        color: var(--accent);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }

      .problem,
      .rewrite {
        margin-top: 16px;
        padding: 14px 16px;
        border-radius: 18px;
        background: rgba(29, 26, 22, 0.05);
      }

      .rewrite {
        border-left: 4px solid var(--accent-2);
        background: rgba(212, 143, 53, 0.1);
      }

      .rewrite strong {
        display: block;
        margin-bottom: 8px;
        color: var(--ink);
      }

      .nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
      }

      .nav a {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
      }

      @media (max-width: 760px) {
        .cards {
          grid-template-columns: 1fr;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <section class="panel">
        <span class="eyebrow">Buyer-facing proof</span>
        <h1>Hero Rewrite Examples</h1>
        <p>
          These are public-page-inspired examples of the kind of rewrite direction included in the
          teardown pack. They were written on 2026-04-11 UTC from live public pages. They are not
          paid client deliverables, guarantees, or claims that the public page used this copy.
        </p>
        <p>
          The point is not polished ad copy in isolation. The pack is meant to make the buyer,
          problem, payoff, and next step clearer faster than the original first screen currently
          does.
        </p>

        <div class="cards">
          <article class="card">
            <span class="tag">Metorial</span>
            <h2>MCP and AI workflow clarity</h2>
            <div class="problem">
              <h3>Observed problem</h3>
              <p>
                The page needs to explain the exact operational result earlier. A cold visitor can
                understand the category before they understand the job the product completes.
              </p>
            </div>
            <div class="rewrite">
              <h3>Rewrite direction</h3>
              <strong>Connect your tools to AI workflows without custom glue code.</strong>
              <p>
                Metorial gives product and engineering teams one layer for turning existing systems
                into usable MCP-ready workflows, so the value and next step are obvious faster.
              </p>
            </div>
          </article>

          <article class="card">
            <span class="tag">PayKit</span>
            <h2>Developer billing trust</h2>
            <div class="problem">
              <h3>Observed problem</h3>
              <p>
                The page likely needs a faster bridge from framework language to the buyer pain
                removed, especially for teams judging implementation risk.
              </p>
            </div>
            <div class="rewrite">
              <h3>Rewrite direction</h3>
              <strong>Ship billing faster without building the hard parts twice.</strong>
              <p>
                PayKit helps developer teams launch subscriptions, usage pricing, and checkout flows
                with clearer implementation boundaries and fewer billing edge cases to untangle later.
              </p>
            </div>
          </article>

          <article class="card">
            <span class="tag">agentsh</span>
            <h2>Security outcome framing</h2>
            <div class="problem">
              <h3>Observed problem</h3>
              <p>
                The runtime-security concept is interesting, but the first screen needs to explain
                the concrete failure mode and buyer urgency more directly.
              </p>
            </div>
            <div class="rewrite">
              <h3>Rewrite direction</h3>
              <strong>Stop AI agents from turning shell access into an incident.</strong>
              <p>
                agentsh gives AI tooling teams a safer execution layer with tighter controls,
                clearer auditability, and a more credible path to running agents in production.
              </p>
            </div>
          </article>

          <article class="card">
            <span class="tag">FalkorDB</span>
            <h2>GraphRAG buyer relevance</h2>
            <div class="problem">
              <h3>Observed problem</h3>
              <p>
                The page can lead harder with who needs GraphRAG, what gets better, and why the
                graph approach matters before deeper technical explanation.
              </p>
            </div>
            <div class="rewrite">
              <h3>Rewrite direction</h3>
              <strong>Give your AI system answers with stronger context, not just more tokens.</strong>
              <p>
                FalkorDB helps teams build GraphRAG systems that surface relationships, improve
                retrieval quality, and make complex knowledge easier for models to use correctly.
              </p>
            </div>
          </article>

          <article class="card">
            <span class="tag">Relaticle</span>
            <h2>AI CRM differentiation</h2>
            <div class="problem">
              <h3>Observed problem</h3>
              <p>
                AI CRM language can collapse into category jargon unless the page quickly shows the
                exact workflow change and who benefits from it first.
              </p>
            </div>
            <div class="rewrite">
              <h3>Rewrite direction</h3>
              <strong>Give your team a CRM that works like an operator, not a filing cabinet.</strong>
              <p>
                Relaticle helps revenue teams capture context, act on the next best move, and keep
                customer relationships moving without burying the real value under generic CRM copy.
              </p>
            </div>
          </article>

          <article class="card">
            <span class="tag">DashClaw</span>
            <h2>Governance outcome clarity</h2>
            <div class="problem">
              <h3>Observed problem</h3>
              <p>
                Governance-control-plane messaging risks sounding important before it explains the
                concrete approval, audit, and policy outcomes a buyer would actually pay for.
              </p>
            </div>
            <div class="rewrite">
              <h3>Rewrite direction</h3>
              <strong>Put AI agents under real approval and audit controls before they ship work.</strong>
              <p>
                DashClaw gives teams one control layer for policy checks, human approvals, and
                traceable decisions so agent operations feel governable instead of experimental.
              </p>
            </div>
          </article>

          <article class="card">
            <span class="tag">ring</span>
            <h2>Studio versus product focus</h2>
            <div class="problem">
              <h3>Observed problem</h3>
              <p>
                Multi-offer studio pages often bury the first clear buyer outcome because the page
                tries to explain the broader company context before the immediate job to be done.
              </p>
            </div>
            <div class="rewrite">
              <h3>Rewrite direction</h3>
              <strong>Launch financial infrastructure with less custom platform work.</strong>
              <p>
                ring gives product teams a clearer path to shipping wallet, ledger, and payment
                flows without stitching the core money movement layer together from scratch.
              </p>
            </div>
          </article>

          <article class="card">
            <span class="tag">Parabol</span>
            <h2>Team outcome prioritization</h2>
            <div class="problem">
              <h3>Observed problem</h3>
              <p>
                Collaboration pages can explain features well while still making the main team
                outcome too broad, which weakens urgency and signup intent on the first screen.
              </p>
            </div>
            <div class="rewrite">
              <h3>Rewrite direction</h3>
              <strong>Run team rituals that end with clearer decisions, not more meeting residue.</strong>
              <p>
                Parabol helps product and engineering teams turn recurring meetings into sharper
                next steps, better alignment, and less coordination drag between sessions.
              </p>
            </div>
          </article>
        </div>

        <div class="nav" aria-label="Related pages">
          <a href="./index.html">Back to the offer page</a>
          <a href="./previews.html">Browse the preview gallery</a>
          <a href="./sample.html">View the full sample teardown</a>
          <a href="./process.html">See the full buyer flow</a>
          <a href="./faq.html">Read the buyer FAQ</a>
        </div>
      </section>
    </main>
  </body>
</html>