diff --git a/apps/www/src/features/www/landing/assets/lenscal/boiled-egg.webp b/apps/www/src/features/www/landing/assets/lenscal/boiled-egg.webp new file mode 100644 index 000000000..069600931 Binary files /dev/null and b/apps/www/src/features/www/landing/assets/lenscal/boiled-egg.webp differ diff --git a/apps/www/src/features/www/landing/assets/lenscal/calorie-tracker.webp b/apps/www/src/features/www/landing/assets/lenscal/calorie-tracker.webp new file mode 100644 index 000000000..d104bffc1 Binary files /dev/null and b/apps/www/src/features/www/landing/assets/lenscal/calorie-tracker.webp differ diff --git a/apps/www/src/features/www/landing/paywall-build/lenscal-paywall.tsx b/apps/www/src/features/www/landing/paywall-build/lenscal-paywall.tsx index 8e2429c59..219963707 100644 --- a/apps/www/src/features/www/landing/paywall-build/lenscal-paywall.tsx +++ b/apps/www/src/features/www/landing/paywall-build/lenscal-paywall.tsx @@ -1,6 +1,8 @@ import { cn } from "@voidhash/ui"; import type { ReactNode } from "react"; +import boiledEggImage from "../assets/lenscal/boiled-egg.webp"; +import calorieTrackerImage from "../assets/lenscal/calorie-tracker.webp"; import type { PaywallPart } from "./transcript"; export const PAYWALL_WIDTH = 402; @@ -33,73 +35,9 @@ function Part({ children, className, delay = 0, part, revealed }: PartProps) { ); } -/** The concentric scan rings behind the app icon, widest to tightest. */ -const SCAN_RINGS = [ - "left-32.25 top-32.75 size-36 [border-width:1.5px] border-[#6E9BFFB3]", - "left-24.25 top-24.75 size-52 border border-[#5A8AFF73]", - "left-14.75 top-15.25 h-71 w-71 border border-[#5A8AFF45]", - "left-3.25 top-3.75 h-94 w-94 border border-[#5A8AFF30]", - "-left-10.25 -top-9.75 h-121 w-121 border border-[#5A8AFF21]", - "-left-25.75 -top-25.25 h-152 w-152 border border-[#5A8AFF17]", - "-left-43.25 -top-42.75 h-187 w-187 border border-[#5A8AFF0F]", - "-left-62.75 -top-62.25 h-226 w-226 border border-[#5A8AFF0A]", -]; +const OFFER_LINE = "font-sans text-[#FFFFFFB0] text-[15px]/5.5"; -/** The camera-detection chips floating over the hero. */ -const DETECTION_CHIPS = [ - { className: "left-5.5 top-27.5", delay: 0, label: "Avocado toast · 412 kcal" }, - { className: "left-41.5 top-80.5", delay: 140, label: "Protein 32 g · Carbs 41 g" }, -]; - -/** The laurel that brackets each award badge; `flipped` mirrors it for the right side. */ -function Laurel({ flipped }: { flipped?: boolean }) { - return ( - - ); -} - -function AwardBadge({ children }: { children: ReactNode }) { - return ( -
- - {children} - -
- ); -} - -function AppleMark() { - return ( - - ); -} +const FINE_PRINT_LINE = "text-center font-sans text-[#FFFFFFB3] text-[11px]/3.75"; /** * The Lenscal Pro paywall the landing-page agent builds, rendered at its native @@ -107,65 +45,26 @@ function AppleMark() { */ export function LenscalPaywall({ revealed }: { revealed: ReadonlySet }) { return ( -
-
- -
- - -
- {SCAN_RINGS.map((ring, index) => ( - - ))} -
- - - - - - -
- - +
+ +
+
+
+ + +
- {DETECTION_CHIPS.map((chip) => ( - -
-
- {chip.label} -
- - ))} -
+ {/* Sits directly on the hero (not inside the phone Part) because mix-blend-overlay + must blend with the backdrop, and the Part's translate isolates its children. */} + + +
+
+ - {/* Vertical rhythm is tuned so the whole column clears the 450px left under the hero — - the artboard's own spacing overflowed and clipped the pricing terms. */} -
- - -
- -
- Editors' -
- Choice + +
+
+
+
+ Boiled Egg
-
- - -
- -
- App of -
- the Day +
+ 2 large
-
- - -
-
80k Ratings
-
- 4.9 +
+ 180
-
- +
+
- -
+
+ +
Lenscal Pro
7-Day Free Trial @@ -293,61 +171,59 @@ export function LenscalPaywall({ revealed }: { revealed: ReadonlySet -
- Subscribe to Pro for just $29.99/year for a -
-
-
limited time
-
+
Subscribe to Pro for just $29.99/year for a
+
+
limited time
+
($49.99/year)
-
and unlock
-
-
-
unlimited scans.
-
View More >
+
and unlock
+
unlimited scans.
- -
-
+ +
+
Remind me before free trial ends
- -
-
+ +
+
Try It Free
- -
-
-
-
- I have read and accept -
-
- Pricing Terms. -
-
- Auto renew plans, cancel -
-
-
- anytime. Auto renew at $29.99 / Y after the trial, cancel anytime. + +
+
I have read and accept
+
+ Pricing Terms.
+
Auto renew plans, cancel
+
+
+ anytime. Auto renew at $29.99 / Y after the trial, cancel anytime.
diff --git a/apps/www/src/features/www/landing/paywall-build/transcript.ts b/apps/www/src/features/www/landing/paywall-build/transcript.ts index 0c40a68c7..6e31c7d3c 100644 --- a/apps/www/src/features/www/landing/paywall-build/transcript.ts +++ b/apps/www/src/features/www/landing/paywall-build/transcript.ts @@ -5,10 +5,8 @@ export type PaywallPart = | "backdrop" | "statusBar" - | "rings" - | "appIcon" - | "chips" - | "badges" + | "screenshot" + | "foodCard" | "title" | "offer" | "toggle" @@ -30,7 +28,7 @@ export interface TranscriptStep { } export const AGENT_PROMPT = - "Build the Lenscal Pro paywall: dark scan-ring hero, App Store awards, 7-day free trial at $29.99/year."; + "Build the Lenscal Pro paywall: electric-blue hero, app shot with a scanned meal, 7-day free trial at $29.99/year."; export const AGENT_INTRO = "I'll compose it on the live document, then preview before publishing."; @@ -62,50 +60,43 @@ export const TRANSCRIPT_STEPS: readonly TranscriptStep[] = [ tool: "get_components", }, { - args: ["insert · column + radial backdrop, status bar"], + args: ["insert · column + brand-blue backdrop, status bar"], result: "ok · 6 nodes minted · v1", reveals: ["backdrop", "statusBar"], runningMs: 1500, tool: "edit_paywall", }, { - args: ["insert · scan rings ×8, app icon"], - result: "ok · 11 nodes minted · v2", - reveals: ["rings", "appIcon"], + args: ["insert · app screenshot in device frame"], + result: "ok · 4 nodes minted · v2", + reveals: ["screenshot"], runningMs: 1500, tool: "edit_paywall", }, { - args: ["insert · detection chips ×2"], - result: "ok · 6 nodes minted · v3", - reveals: ["chips"], + args: ["insert · scanned-meal card"], + result: "ok · 7 nodes minted · v3", + reveals: ["foodCard"], runningMs: 1250, tool: "edit_paywall", }, - { - args: ["insert · award badges ×3"], - result: "ok · 9 nodes minted · v4", - reveals: ["badges"], - runningMs: 1400, - tool: "edit_paywall", - }, { args: ["insert · headline, offer copy"], - result: "ok · 8 nodes minted · v5", + result: "ok · 8 nodes minted · v4", reveals: ["title", "offer"], runningMs: 1400, tool: "edit_paywall", }, { args: ['insert · reminder toggle, "Try It Free"'], - result: "ok · 7 nodes minted · v6", + result: "ok · 7 nodes minted · v5", reveals: ["toggle", "cta"], runningMs: 1400, tool: "edit_paywall", }, { args: ["insert · pricing terms"], - result: "ok · 5 nodes minted · v7", + result: "ok · 5 nodes minted · v6", reveals: ["finePrint"], runningMs: 1200, tool: "edit_paywall", @@ -118,7 +109,7 @@ export const TRANSCRIPT_STEPS: readonly TranscriptStep[] = [ }, { args: ['verdict: "matches the brief"', "unresolvedIssues: []"], - result: "session closed · published v7", + result: "session closed · published v6", runningMs: 1100, tool: "finish_paywall_edit", },