CHRISTINE Make Your Free Offer Feel Like a $10K Experience
Lead Magnet Page builds a premium opt-in page around anything you give away — a proven seven-section structure, your brand's colors and fonts, and an email form pointed at your tool. Give it the offer's name and one sentence, and it builds the rest.
← Back to the Skills LibraryInstalled in under a minute. No tech skills required.
You don't need to know how to code, and you don't need to set anything up. There are two blocks below. If you can copy and paste, you can install this.
Paste the instruction
Copy the first block and paste it into a brand-new Claude conversation. Don't hit send yet — it's the note that tells Claude what to do.
Paste the skill underneath, then send
Copy the full skill block and paste it right below the instruction. Send it. Claude builds the skill, personalizes it to your business, and confirms when it's ready.
Install the skill below for me. Keep the skill text exactly as written, then personalize its defaults from what you already know about me — my business, my voice, my priorities, and the places I keep my notes and files. Confirm when it's installed and show me exactly how to run it.
---
name: lead-magnet-landing-page
description: Build a branded, cinematic, interactive React landing page for any lead magnet, opt-in, or free offer. On first run the skill interviews you to wire in your brand name, your colors, your fonts, and where opt-ins go, then builds your version every time after. Use whenever you say "build a landing page," "lead magnet page," "opt-in page," "build the page for this," or drop an offer name and want a premium page built around it.
---
# Lead Magnet Landing Page Builder
You build premium, cinematic, interactive React landing pages for lead magnets and opt-in offers. Every page follows a proven seven-section structure and a design system that makes a free offer feel like a $10K experience you are giving away. On first run the skill designs itself into your brand, then builds your version every time after.
## The Ice Cream Test
Someone lands on this page and immediately wants what you are offering. No explanation needed. The design, the copy, and the energy of the page do the selling. If the page needs a sales pitch layered on top of it, it failed.
## First Run: Design Your Version
The first time you run this skill, set it up. Ask me these questions one at a time, save my answers into this skill file as a CONFIG block, and use them on every build after this. If the answers are already saved, skip straight to the build.
1. What is your brand name? It goes in the hero pill at the top and in the footer line.
2. What are your brand colors? Say "use my brand palette" and I pull them from what I know about you. If you have none yet, I use the cinematic gold-on-black defaults below.
3. Do you have brand fonts for headlines and body? If not, I use the default type system below.
4. Where should opt-ins go? Your email tool, a booking link, or an automation. The form and the handleSubmit stub point there.
5. Where should I save the finished file? A folder, a project directory, or back to you in the chat.
Save the answers as a CONFIG block at the top of this file. If I ever say "redesign lead magnet page," run this interview again.
The gold-on-black design system below stays the fallback, so a page still looks premium before you have a brand set.
## Input
The user provides one or more of the following:
- Offer name (a free diagnostic, a starter kit, a mini-course, a template pack)
- What it does in plain language
- Who it is for
- Key stats or proof points (optional and powerful)
- An existing skill file, if the offer maps to a Claude skill
- An opt-in destination, if it differs from your saved setup
If the user gives only a name and a sentence, that is enough. Pull the rest from context, memory, and conversation history. Ask for one clarification at most.
## Page Structure (Seven Sections)
Every landing page follows this exact sequence. Each section has a job. No section is optional.
### 1. Hero (Above the Fold)
The hero holds all of the following in one viewport:
- Brand pill: your brand name from setup, in a bordered capsule at the top.
- Headline: two lines maximum. Line one is white. Line two is your accent color with a shimmer animation. The headline names the offer or states the core promise.
- Subhead: one or two sentences in muted text, written in second person, saying what this does for the reader.
- Opt-in card: a hero stat (a big accent number with a mono label under it), an email input, a CTA button with an accent gradient, and a microcopy line under it (for example "Free access. No spam.").
- Success state: a green confirmation card that replaces the form on submit.
The opt-in card gets a pulseGold glow animation and an id of "opt-in" so the bottom CTA can scroll to it.
The handleSubmit function is stubbed for you to wire to the tool you named in setup:
```javascript
const handleSubmit = () => {
if (email.includes("@")) {
// your email tool, booking link, or automation goes here
setSubmitted(true)
}
}
```
### 2. The Problem
A single card with:
- A red accent (EF4444) for the label and the headline highlight.
- A soft red glow orb behind it.
- Two or three sentences that name the pain the audience feels right now.
- Written so the reader thinks "that is exactly what is happening to me."
### 3. How It Works (Three Steps)
Always exactly three steps, built as expandable accordion cards. Each step has:
- A number badge (01, 02, 03) with an accent that shifts per step.
- A title in the headline font.
- A body paragraph in the body font.
- An expandable detail block (italic, with a colored left border) that reveals on click.
- A chevron that rotates on expand.
Accent progression: step 01 gold (FFE307), step 02 purple (A855F7), step 03 green (22C55E). Map these onto your palette if you set one.
### 4. What It Delivers (Grid)
A two-column responsive grid of cards showing what the reader gets. Each card:
- An emoji icon at 32px.
- A title in the headline font at 22px.
- A description in the body font at 13px, muted.
- Hover: a border glow and a lift of 3px.
Minimum four cards, maximum six. Each card is one tangible deliverable or capability.
### 5. Proof Bar
A horizontal grid of three or four stat cards. Each card:
- A big number in the headline font at 36px in your accent.
- A label under it in the mono font at 11px, muted, uppercase.
- One stat runs red (EF4444) for contrast, the "zero" or pain stat.
### 6. Bottom CTA
A section with:
- A particle field background (around 20 particles).
- A centered glow orb.
- A two-line headline with line two in the shimmer accent.
- A single accent-gradient button that smooth-scrolls to the hero opt-in:
```javascript
onClick={() => document.getElementById("opt-in")?.scrollIntoView({ behavior: "smooth" })}
```
### 7. Footer
Single line: your brand name and your tagline in 11px muted text, set in setup. If you gave no tagline, use your brand name alone.
## Design System (Defaults)
Use these as the fallback whenever you have not set brand colors or fonts. If you set a brand palette in setup, map it onto the same roles: a primary accent, a secondary accent, a dark background, a card surface, and text tones.
### Colors (default gold-on-black)
- Accent Primary FFE307
- Accent Secondary FFA500
- Background 08080A
- Card 0F0F12
- Border rgba(255,255,255,0.04)
- White F4F4F5
- Light Text D4D4D8
- Muted Text 71717A
- Dim 3F3F46
- Green 22C55E
- Purple A855F7
- Red EF4444
### Typography (default)
- Headlines: Bebas Neue, uppercase, letter-spacing 2 to 3px.
- Labels and data: Space Mono, uppercase, 10 to 12px.
- Body: DM Sans, weight 300 to 400, 15 to 17px, line-height 1.65 to 1.75.
- Section tags: DM Sans, 11px, letter-spacing 4px, uppercase, accent at 50 to 60% opacity.
Load Bebas Neue, Space Mono (weights 400 and 700), and DM Sans (weights 300 to 800) from Google Fonts. If you set brand fonts, swap them into the headline and body roles and keep a monospace for the labels.
### Animations (required)
Include these keyframes:
- pFloat: drifts particles up and to the side across their lifetime.
- pulseGold: the opt-in card glow that breathes between a soft and a stronger accent shadow.
- shimmer: moves a background gradient across the gold headline line on a loop.
- fadeUp: fades sections in from a small downward offset as they enter.
### Components (required)
- ParticleField: takes a count prop, generates that many accent particles on the pFloat animation. Used in the hero and the bottom CTA.
- GlowOrb: takes x, y, size, opacity, and color, renders a blurred radial gradient for depth. Place two or three in the hero, one in the problem, one in the bottom CTA.
- Shimmer text: the gold headline line uses a left-to-right accent gradient with WebkitBackgroundClip set to text and a transparent fill, running the shimmer keyframe on a four second loop.
### Spacing and Layout
Max content width 820px, centered. Section padding 48 to 80px vertical and 24px horizontal. Card padding 24 to 36px. Card radius 16 to 20px. Card gap 10 to 12px. Divider lines use a horizontal accent gradient that fades at both ends.
### Interactive States
Cards on hover: an accent border glow and a lift of 2 to 4px. Active buttons and tabs: an accent background or accent border with accent text. Transitions run around 0.3 to 0.4s on an ease-out curve.
## Content Voice
Write landing page copy in this voice:
- Direct. Confident. Free of hedging.
- Second person ("you," "your").
- Short paragraphs, two or three sentences per block at most.
- Specific numbers over vague promises.
- The problem section reads like you are handing the reader their own week back to them.
- The how-it-works section makes the offer feel effortless.
- Rule of Three for examples: exactly three, never more.
- Never use: delve, unlock, craft, foster, tapestry, embarking, unleash, unveil, realm, boasts, revolutionize, tenets.
- No semicolons, no em dashes, no contrastive framing.
## Output
A single-file React JSX artifact saved wherever you set in setup, with a descriptive filename (for example lead-magnet-optin.jsx). The artifact must:
- Be a complete, self-contained React component with a default export.
- Hold all data as const arrays at the top of the file.
- Include the full style block with the fonts and all four animations.
- Include ParticleField and GlowOrb as internal components.
- Include the opt-in form with the handleSubmit stub pointing at your tool.
- Include the success confirmation state.
- Include the scroll-back CTA at the bottom.
- Pass the Ice Cream Test on first render.
## After Delivery
After presenting the artifact, offer:
1. Save the file to wherever you keep your work.
2. Build the deployment prompt to ship the page to your website.
3. Write the promo content for it: captions, an email mention, a social post.
From then on, just name your free offer and say "Build a landing page."
Want to go further than skills?
Skills like this are how Christine runs her own business every day. In the Heart-Led AI Signature Group Coaching, she teaches you the whole system — live, in plain English, at your pace.
Explore Signature CoachingSeven sections. Each one has a job.
Every page follows the same proven sequence — no section optional, no section improvised. This is what gets built, in the order your reader scrolls it:
1 · The Hero + Opt-In Card
Your brand pill up top, a two-line headline with the second line shimmering in your accent color, and an opt-in card with a hero stat, an email field, and a confirmation state that appears on submit.
2 · The Problem
A single card that names the pain your reader feels right now — written so they think "that is exactly what is happening to me."
3 · How It Works
Always exactly three steps, built as expandable cards. Each one opens on click to reveal the detail — and the offer starts to feel effortless.
4 · What It Delivers
A grid of four to six cards, each one a tangible deliverable or capability, so the reader can see exactly what they're getting.
5 · The Proof Bar
Three or four big-number stat cards in your accent color — with one running red as the pain stat, for contrast.
6 · The Bottom CTA + Footer
A particle-field closing section with a two-line headline and a single button that smooth-scrolls the reader straight back up to the opt-in form — then a one-line footer with your brand name and tagline.
The first run is a setup conversation
Before it builds anything, the skill interviews you — one question at a time — for your brand name, your colors, your fonts, where opt-ins should go, and where finished files should land. It saves those answers and builds your version every time after, without asking again. No brand set yet? The cinematic gold-on-black defaults keep the page looking premium until you have one — and "redesign lead magnet page" reruns the interview whenever your brand evolves.
Keep stacking: pairs beautifully with Enrollment Engine
Lead Magnet Page builds the front door — the page that grows your list. Enrollment Engine builds what happens after someone walks through it: the narrative, objection bank, nurture sequence, and warm list that fill a program from your real records.
Get Enrollment Engine →Because a free offer still has to earn the email.
The skill holds every page to what it calls the Ice Cream Test: someone lands and immediately wants what you're offering, no explanation needed. Everything about how these pages get built serves that one moment.
Seven sections, one proven sequence
The hero earns attention, the problem earns recognition, three steps make it feel doable, the deliverables make it concrete, the proof bar makes it credible, and the close sends readers back to the form. Nothing is improvised, and no section is optional.
The design does the selling
If the page needs a sales pitch layered on top of it, it failed — that standard is written into the skill. The look, the copy, and the energy carry the persuasion so you don't have to.
Set up once, on-brand forever
The first-run interview wires in your brand name, palette, fonts, and opt-in destination. Every page after that is built to your setup automatically — consistency without re-briefing.
It only needs a name and a sentence
Give it the offer's name and what it does in plain language. It pulls the rest from what it already knows about you and asks one clarifying question at most — so a page idea at 9am is a finished page by 9:20.
Every path leads to the form
The opt-in card sits in the hero with a glow animation, and the bottom CTA scrolls the reader right back to it. However far someone reads, the next step is always one click away.