@funnelsgrove/cli 0.1.87 → 0.1.89

package/template_scaffold/src/steps/content/step-01.content.ts

@@ -1,8 +1,7 @@
-import type { LocalizedStepContent, StepImage } from '@funnelsgrove/runtime';
+import type { LocalizedStepContent } from '@funnelsgrove/runtime';
 
 export type StepOneLocaleContent = {
   headline: readonly string[];
-  artwork: StepImage;
 };
 
 export const stepOneContent = {
@@ -10,14 +9,10 @@ export const stepOneContent = {
   locales: {
     en: {
       headline: [
-        'People getting',
-        'free money',
-        'know one secret',
+        'Build a plan',
+        'made for you',
+        'in a few quick steps',
       ],
-      artwork: {
-        src: '/claimbee/steps-sprite-default.png',
-        alt: '',
-      },
     },
   },
 } as const satisfies LocalizedStepContent<StepOneLocaleContent>;

package/template_scaffold/src/steps/content/step-32-paywall.content.ts

@@ -76,8 +76,6 @@ type StepPaywallLocaleContent = {
     subtitle: string;
     assistant: InfoItem;
     quickFeatures: readonly InfoItem[];
-    history: InfoItem;
-    detailedFeatures: readonly InfoItem[];
   };
   stories: {
     title: string;
@@ -106,8 +104,8 @@ export const stepPaywallContent = {
       hero: {
         pills: ['Find hidden money and', "claim what's yours"],
         image: {
-          src: '/paywall/hero.png',
-          alt: 'ClaimBee family illustration',
+          src: '',
+          alt: '',
         },
       },
       promo: {
@@ -118,7 +116,7 @@ export const stepPaywallContent = {
       highlight: {
         title: ['Get money you', 'didn’t know about'],
         description:
-          'Discover settlement payouts you’re owed from past purchases, ClaimBee finds them for you.',
+          'Discover settlement payouts you’re owed from past purchases. The app finds them for you.',
       },
       plans: {
         title: 'Choose your plan',
@@ -178,8 +176,8 @@ export const stepPaywallContent = {
           "You'll be charged {amount} today for your selected plan. Your subscription renews automatically unless cancelled at least 24 hours before renewal date.",
         specialOffer: {
           image: {
-            src: '/paywall/special-offer-gift.png',
-            alt: 'Gift box with offer label',
+            src: 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22120%22 viewBox=%220 0 160 120%22%3E%3Crect x=%2240%22 y=%2242%22 width=%2280%22 height=%2260%22 rx=%2214%22 fill=%22%234361ee%22/%3E%3Cpath d=%22M80 42v60M38 62h84%22 stroke=%22white%22 stroke-width=%228%22/%3E%3Cpath d=%22M78 41c-21 0-30-23-12-23 10 0 14 12 14 23Zm4 0c21 0 30-23 12-23-10 0-14 12-14 23Z%22 fill=%22none%22 stroke=%22%234361ee%22 stroke-width=%228%22/%3E%3C/svg%3E',
+            alt: 'Gift box',
           },
           discountLabel: '-46%',
           title: 'Special Offer',
@@ -195,12 +193,6 @@ export const stepPaywallContent = {
         assistant: {
           id: 'assistant',
           title: 'AI claim assistant',
-          description:
-            'It reviews your info, finds matches, and shows you what to do next',
-          image: {
-            src: '/paywall/ai-claim-assistant.png',
-            alt: 'AI claim assistant illustration',
-          },
         },
         quickFeatures: [
           {
@@ -220,36 +212,6 @@ export const stepPaywallContent = {
             title: 'Unlimited\nclaim checks',
           },
         ],
-        history: {
-          id: 'history',
-          title: 'Claim for your own past\nbuys, bills, or services',
-          image: {
-            src: '/paywall/claim-history.png',
-            alt: 'Past claims illustration',
-          },
-        },
-        detailedFeatures: [
-          {
-            id: 'tracking',
-            title: 'Clear progress\nand tracking',
-            description:
-              'See which claims you started, submitted, and are waiting to be paid.',
-            image: {
-              src: '/paywall/clear-progress.png',
-              alt: 'Claim progress illustration',
-            },
-          },
-          {
-            id: 'alerts',
-            title: 'Personalized\nMoney Alerts',
-            description:
-              'Instant alerts when we find a new settlement you could qualify for.',
-            image: {
-              src: '/paywall/money-alerts.png',
-              alt: 'Money alert illustration',
-            },
-          },
-        ],
       },
       stories: {
         title: 'Stories from our users',
@@ -257,7 +219,7 @@ export const stepPaywallContent = {
           {
             id: 'elizabeth',
             quote:
-              'I realized ClaimBee saves me more money than it costs - this pays for itself',
+              'I realized the app saves me more money than it costs - this pays for itself',
             author: 'Elizabeth L.',
           },
           {
@@ -280,7 +242,7 @@ export const stepPaywallContent = {
           {
             id: 'peter',
             quote:
-              'ClaimBee told me about money I was owed even though my friends and social feeds never mentioned it.',
+              'The app told me about money I was owed even though my friends and social feeds never mentioned it.',
             author: 'Peter P.',
           },
           {
@@ -306,21 +268,21 @@ export const stepPaywallContent = {
             question:
               'What if there’s a settlement for an item I bought years ago and I don’t have the receipt?',
             answer:
-              'Don’t worry, this is very common. Many settlements do not require proof of purchase for smaller claim amounts.\n\nFurthermore, ClaimBee can help you search your connected digital history for records you might have forgotten existed, helping you "restore" a claim you might have otherwise abandoned.',
+              'Don’t worry, this is very common. Many settlements do not require proof of purchase for smaller claim amounts.\n\nThe app can also help you search your connected digital history for records you might have forgotten existed, helping you "restore" a claim you might have otherwise abandoned.',
           },
           {
             id: 'faq-scam',
             question:
               'This sounds too good to be true. Is this a scam or a "free money" scheme?',
             answer:
-              'Not at all. We aren’t generating "free money"; we are simply helping you claim money that is already yours legally.\n\nSettlements are court-ordered compensations for wrongdoings. ClaimBee is just a tool that organizes this fragmented legal data to make the process accessible, transparent, and manageable for you.',
+              'Not at all. We aren’t generating "free money"; we are simply helping you claim money that is already yours legally.\n\nThe app is a tool that organizes this fragmented legal data to make the process accessible, transparent, and manageable for you.',
           },
           {
             id: 'faq-approval',
             question:
               'If I file through an app, is my claim less likely to be approved than if I filed on the official website?',
             answer:
-              'No. When you submit through ClaimBee, we generate the exact information and forms required by the settlement administrator.\n\nThe legal validity is the same; we just make the experience of filling it out much faster and less prone to errors than the manual method.',
+              'No. When you submit through the app, we generate the exact information and forms required by the settlement administrator.\n\nThe legal validity is the same; we just make the experience of filling it out much faster and less prone to errors than the manual method.',
           },
           {
             id: 'faq-fees',
@@ -333,8 +295,8 @@ export const stepPaywallContent = {
       },
       guarantee: {
         image: {
-          src: '/paywall/money-back-badge.png',
-          alt: '30 day money back guarantee badge',
+          src: '',
+          alt: '',
         },
         title: 'Money-Back guarantee',
         description:

package/template_scaffold/src/steps/step-01.tsx

@@ -1,46 +1,21 @@
-import { useState } from 'react';
-import { FunnelStepImage } from '@/components/FunnelStepImage';
 import { FunnelStepHeader } from '@/components/step/FunnelStepHeader';
 import {
   usePreviewStepLocalizedContent,
   useFunnel,
-  type StepImage,
   type FunnelStepMeta,
 } from '@funnelsgrove/runtime';
-import stepsSpriteDefault from '@/assets/claimbee/steps-sprite-default.png';
 import { getStepContentLocale } from '@/runtime/step-content-context';
 import { stepOneContent } from '@/steps/content/step-01.content';
 
 export const stepOneId = 'step-1';
 
-type ImportedStepAsset = string | { src: string };
-
-export const resolveStepOneImportedAssetSrc = (asset: ImportedStepAsset): string => {
-  return typeof asset === 'string' ? asset : asset.src;
-};
-
-export const resolveStepOneArtworkSrc = (
-  artwork: StepImage | null | undefined,
-  fallbackSrc: string,
-  hasLoadError = false,
-): string => {
-  const configuredSrc = artwork?.src?.trim() || '';
-  if (!hasLoadError && configuredSrc) {
-    return configuredSrc;
-  }
-
-  return fallbackSrc;
-};
-
-const stepOneFallbackArtworkSrc = resolveStepOneImportedAssetSrc(stepsSpriteDefault);
-
 export const stepOne: FunnelStepMeta = {
   id: stepOneId,
   name: 'step-1',
   type: 'intro_hero',
   figmaNodeId: 'template-01-intro',
-  title: 'People getting free money know one secret',
-  description: 'ClaimBee-style opening hero with resilient sprite fallback.',
+  title: 'Build a plan that fits you',
+  description: 'Lightweight opening step with no image dependencies.',
 };
 
 export function StepOne() {
@@ -50,14 +25,6 @@ export function StepOne() {
     stepOneContent,
     getStepContentLocale(attributes),
   );
-  const configuredArtworkSrc = content.artwork.src?.trim() || '';
-  const [failedArtworkSrc, setFailedArtworkSrc] = useState<string | null>(null);
-  const artworkSrc = resolveStepOneArtworkSrc(
-    content.artwork,
-    stepOneFallbackArtworkSrc,
-    Boolean(configuredArtworkSrc) && failedArtworkSrc === configuredArtworkSrc,
-  );
-
   return (
     <>
       <section className="figma-step-screen step-one-screen" data-node-id="template:01-intro">
@@ -73,21 +40,10 @@ export function StepOne() {
           }
         />
 
-        <div className="figma-artwork" aria-hidden>
-          <FunnelStepImage
-            src={artworkSrc}
-            alt={content.artwork.alt || ''}
-            width={stepsSpriteDefault.width}
-            height={stepsSpriteDefault.height}
-            className="figma-artwork-sprite"
-            draggable={false}
-            priority
-            onError={() => {
-              if (configuredArtworkSrc) {
-                setFailedArtworkSrc(configuredArtworkSrc);
-              }
-            }}
-          />
+        <div className="template-starter-art" aria-hidden>
+          <span className="template-starter-orbit template-starter-orbit-one" />
+          <span className="template-starter-orbit template-starter-orbit-two" />
+          <span className="template-starter-mark">✓</span>
         </div>
       </section>
 
@@ -105,4 +61,41 @@ const stepOneStyles = `
 .step-one-screen .figma-headline-line.is-accent {
   color: var(--color-primary);
 }
+
+.template-starter-art {
+  position: relative;
+  width: min(72vw, 310px);
+  aspect-ratio: 1;
+  margin: auto;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-primary) 12%, white);
+}
+
+.template-starter-orbit {
+  position: absolute;
+  inset: 14%;
+  border: 2px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
+  border-radius: 42% 58% 54% 46%;
+  transform: rotate(24deg);
+}
+
+.template-starter-orbit-two {
+  inset: 26%;
+  transform: rotate(-32deg);
+}
+
+.template-starter-mark {
+  display: grid;
+  width: 96px;
+  height: 96px;
+  place-items: center;
+  border-radius: 30px;
+  background: var(--color-primary);
+  color: white;
+  font-size: 52px;
+  font-weight: 800;
+  box-shadow: 0 22px 50px color-mix(in srgb, var(--color-primary) 28%, transparent);
+}
 `;

package/template_scaffold/src/steps/step-31-email-capture.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useMemo, useState } from 'react';
+import Image from 'next/image';
 import {
   usePreviewStepLocalizedContent,
   useFunnel,
@@ -8,6 +9,7 @@ import {
 import type { FunnelStepMeta } from '@funnelsgrove/runtime';
 import { emailCaptureContent } from '@/steps/content/email-capture.content';
 import { getStepContentLocale } from '@/runtime/step-content-context';
+import { funnelManifest } from '@/config/funnel.manifest';
 
 export const stepEmailCaptureId = 'email-capture';
 
@@ -17,7 +19,7 @@ export const stepEmailCapture: FunnelStepMeta = {
   type: 'form_input',
   figmaNodeId: 'template-31-email-capture',
   title: 'Email Capture',
-  description: 'Shared email capture shell used before paywall steps.',
+  description: 'Canonical unique email identity used before checkout and returning-subscriber lookup.',
   actionBar: {
     hidden: true,
   },
@@ -33,6 +35,7 @@ export function StepEmailCapture() {
   const [email, setEmail] = useState(user.email);
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
+  const previewAsset = funnelManifest.assets.emailCapturePreview;
 
   const isValidEmail = useMemo(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email), [email]);
 
@@ -59,6 +62,14 @@ export function StepEmailCapture() {
     <>
       <div className="template-email-capture-step" data-node-id="template-31-email-capture">
         <section className="template-email-capture-copy">
+          <Image
+            src={previewAsset.src}
+            alt=""
+            width={previewAsset.width}
+            height={previewAsset.height}
+            className="template-email-capture-preview"
+            aria-hidden="true"
+          />
           <p className="template-email-capture-kicker">{content.kicker}</p>
           <h2 className="template-email-capture-title">{content.title}</h2>
           <p className="template-email-capture-text">{content.description}</p>
@@ -122,6 +133,12 @@ const stepEmailCaptureStyles = `
   gap: 12px;
 }
 
+.template-email-capture-preview {
+  width: 120px;
+  height: 90px;
+  object-fit: contain;
+}
+
 .template-email-capture-kicker {
   margin: 0;
   color: #556070;