Build a demo app called "MagnetMarket" (magnetmarket.co) — a marketplace where creators sell and buyers license proven lead magnets. Creators upload high-converting lead gen assets (email sequences, PDF guides, webinar funnels, quiz funnels, calculators, templates) with reported conversion benchmarks, and buyers browse by industry and asset type to find ready-to-deploy lead magnets for their business. Think Envato/Creative Market meets Gumroad, but specifically for lead generation assets. Sellers set one-time or recurring license prices and earn passive income from proven content. A built-in white-labelling layer lets buyers swap branding (logo, colours, company name, URLs) and export in Canva, PDF, or Notion format — ready to publish in under an hour.
WHO: Digital marketers, growth leads, SaaS founders, agency owners, and course creators who need high-converting lead magnets but don't want to build from scratch.
WHAT: A marketplace to browse, buy, and white-label proven lead generation assets with real conversion data.
WHY: Creating effective lead magnets takes weeks of testing. MagnetMarket lets you skip the guesswork — buy what already works, rebrand it, and deploy in under an hour.
This is a DEMO app. Use hardcoded dummy data throughout. No real authentication — clicking "Enter Marketplace" or "Browse Assets" on the landing page navigates directly into the app. No login screen, no signup forms that actually validate. The simulated buyer inside the app is "Alex Rivera", a growth marketer at a B2B SaaS startup called "Flowstack". The marketplace should feel populated with real creators, real assets, and real conversion data.
---
VISUAL STYLE:
Apply a dark mode marketplace aesthetic throughout — inspired by Linear, Gumroad's dark mode, and Envato. Background: near-black (#09090F). Card surfaces: dark charcoal (#13131A) with subtle 1px borders (#1C1C28). Primary accent color: electric cyan (#06B6D4). Secondary accent: vivid magenta/pink (#EC4899) for seller/creator elements and popular badges. Tertiary accent: emerald (#10B981) for success states, conversion metrics, and verified badges. Warning/attention: amber (#F59E0B). Text: white (#F5F5F7) for headings, light gray (#A1A1AA) for secondary text. Use the Inter font family throughout. Cards should use subtle glassmorphism — very slight background blur (backdrop-filter: blur(12px)) and transparency (rgba(19,19,26,0.8)). Rounded corners (14px) on all cards and containers. Generous spacing — 24px padding inside cards, 20px gap between grid items. Rating stars use amber (#F59E0B). Conversion benchmarks use emerald (#10B981). Price badges use white text on cyan gradient. Category tags use white/10 pill backgrounds. Use subtle cyan-to-teal gradient accents (#06B6D4 to #14B8A6) on hero sections, key CTAs, and primary action buttons. Hover effects on cards should slightly brighten borders and add a subtle translateY(-2px) lift. Buttons have a slight scale(1.02) on hover. Asset type badges use distinct colors: cyan for email sequences, magenta for PDF guides, amber for quiz funnels, emerald for calculators, violet (#8B5CF6) for webinar funnels, blue (#3B82F6) for Notion/template kits.
LOGO: The MagnetMarket logo should be the text "MagnetMarket" in title case, bold Inter font — with "Magnet" in white and "Market" in cyan (#06B6D4). A small magnet/horseshoe icon in cyan before the text, stylised as a U-shape with two small dots at the poles to suggest attraction. Use this in the nav, sidebar, and footer.
---
PAGES AND ROUTES:
| Route | Page |
|--------------------------|-----------------------------------|
| / | Landing Page (marketing) |
| /app/browse | Browse Marketplace |
| /app/asset/:id | Asset Detail Page |
| /app/creator/:id | Creator Profile Page |
| /app/sell | Sell / Upload Page |
| /app/whitelabel/:id | White-Label Editor |
| /app/dashboard | Buyer Dashboard |
| /app/seller-dashboard | Seller Analytics Dashboard |
The landing page (/) has its own layout — no sidebar, just a transparent nav bar.
All /app/* pages share an app layout with a fixed left sidebar (hidden on mobile, becomes a slide-in overlay).
---
APP LAYOUT (shared by all /app/* pages):
Sidebar (Desktop):
- Fixed, left side, 240px wide, full height
- Background: #09090F, right border rgba(255,255,255,0.05)
- Logo at top
- Navigation items with icons, rounded hover/active states:
- Browse (Search icon) → /app/browse
- My Library (BookOpen icon) → /app/dashboard
- Sell (Upload icon) → /app/sell
- Seller Dashboard (BarChart3 icon) → /app/seller-dashboard
- White-Label Editor (Palette icon) → /app/whitelabel/1
- Active item: cyan left border (3px), bg-white/10, text-white
- Inactive: text-muted hover:bg-white/5
- Divider line above bottom section
- User info at bottom: cyan circle with "AR" initials, "Alex Rivera" name, "Flowstack" company, small "Pro Buyer" cyan badge
Sidebar (Mobile):
- Hidden by default, mobile header bar with hamburger + logo
- Hamburger opens slide-in overlay with dark backdrop
- Close button in overlay
Main Content Area:
- Left padding for sidebar on desktop, top padding for mobile header on mobile
- Content max-width centered with padding
---
PAGE 1: LANDING PAGE (route: "/")
Fixed Navigation Bar:
- Transparent background with backdrop blur, border-bottom rgba(255,255,255,0.05)
- Logo on the left
- Nav links center: "How It Works", "For Sellers", "Categories", "Testimonials" (smooth scroll to sections)
- "Enter Marketplace" button on the right (links to /app/browse) — cyan gradient background (#06B6D4 to #14B8A6), white text
- Mobile: hamburger menu that opens a dropdown with the same links
Hero Section:
- Full viewport height, centered content
- Background: near-black with a subtle radial gradient glow of cyan at ~8% opacity behind the headline area
- Eyebrow text above headline: "THE MARKETPLACE FOR PROVEN LEAD MAGNETS" in small caps, cyan color, letter-spacing 3px
- Large headline: "Stop guessing. Start converting." — text-5xl on mobile, text-7xl on desktop, bold, tight tracking
- Subheadline in muted gray (max-w-2xl): "MagnetMarket is where marketers buy battle-tested lead magnets with real conversion data — email sequences, quiz funnels, calculators, PDF guides, and webinar kits — then white-label and launch in under an hour."
- Two CTA buttons side by side:
- "Browse Marketplace" (primary, cyan gradient background, white text) — navigates to /app/browse
- "Start Selling" (secondary, transparent with white/10 border) — scrolls to For Sellers section
- Below buttons, small muted text: "4,200+ assets sold · 1,400+ creators · Avg 22% conversion lift reported"
- Floating stats card below: glass card with 4 stats in a row:
- "12.4%" (emerald, "Top Email Conversion Rate")
- "4,200+" (cyan, "Assets Sold")
- "$840K" (magenta, "Creator Earnings")
- "< 1 hour" (amber, "Avg Time to Launch")
- Use staggered fade-in animations (initial opacity:0, y:20)
Category Showcase Section (id="categories"):
- Heading: "Find lead magnets for your industry"
- 6 category cards in a 3x2 grid on desktop, horizontal scroll on mobile. Each card is a glass card with an icon, category name, and asset count:
- SaaS & Software (Server icon, cyan) — "247 assets"
- E-commerce & DTC (ShoppingBag icon, magenta) — "189 assets"
- Health & Fitness (Heart icon, emerald) — "156 assets"
- Real Estate (Home icon, amber) — "98 assets"
- Financial Services (Wallet icon, violet) — "112 assets"
- Agencies & Consultants (Briefcase icon, blue) — "134 assets"
- Each card links to /app/browse with the category pre-filtered
How It Works Section (id="how-it-works"):
- Heading: "From browse to launch in three steps" + subtitle
- 3 glass cards in a row, each with step number, colored icon, title, description:
- Step 1: Search icon (cyan) — "Browse & Compare" — "Search by industry, asset type, and conversion metrics. Every listing shows real benchmarks from creators — opt-in rates, email conversions, quiz completions — so you know what works before you buy."
- Step 2: Download icon (magenta) — "Buy & Download" — "One-time purchase, instant download. Get the complete asset package — email copy, design files, landing page templates, and setup instructions. Prices from $39 to $199."
- Step 3: Palette icon (emerald) — "White-Label & Launch" — "Use the built-in white-label editor to swap your logo, brand colours, company name, and URLs. Export as Canva template, PDF, or Notion workspace. Live in under an hour."
- Animate in on scroll with stagger
For Sellers Section (id="for-sellers"):
- Heading: "Turn your best content into passive income"
- Subheadline: "Already have lead magnets that convert? Upload them to MagnetMarket and earn every time someone licenses your work."
- 3 glass cards:
- DollarSign icon (emerald) — "Set Your Price" — "One-time or recurring license fees. You keep 80% of every sale. Payouts monthly."
- TrendingUp icon (cyan) — "Conversion Proof Sells" — "Assets with verified conversion benchmarks sell 3.4x more. Share your real numbers and watch sales climb."
- Users icon (magenta) — "Build Your Brand" — "Get a creator profile page, collect reviews, and build a following. Top creators earn $5K+/month in passive income."
- Below: small muted text: "Top creator earnings this month: $9,240 (Sophie Langford) · $6,210 (Marcus Webb) · $4,890 (Jake Moreno)"
Featured Assets Section:
- Heading: "Top-selling assets this month"
- 4 asset preview cards in a row (compact). Use assets 1, 4, 7, and 12 from the data below. Each card shows:
- Gradient placeholder thumbnail (color varies by asset type)
- Asset type badge (pill, colored by type)
- Asset name (bold)
- Creator avatar circle + name
- Star rating + review count
- Conversion benchmark in emerald
- Price (white on cyan pill)
- "View Details" link → /app/asset/:id
Testimonials Section (id="testimonials"):
- Heading: "Marketers love MagnetMarket"
- 3 glass testimonial cards with quote icon at top:
- "I spent 3 months trying to write an email nurture sequence that converted. Then I found Sophie's SaaS trial sequence on MagnetMarket, white-labelled it in 20 minutes, and saw 12% trial-to-paid in week one. I will never write from scratch again." — Alex Rivera, Growth Lead, Flowstack
- "As a creator, I uploaded my quiz funnel blueprint expecting maybe 50 sales. I've done 567. The passive income from MagnetMarket now covers my entire team's tool stack." — Jake Moreno, Funnel Strategist
- "We run a marketing agency and MagnetMarket is our secret weapon. We buy assets, white-label for clients, and deploy in an afternoon. Our clients think we're geniuses." — Hannah Brooks, Founder, Greenlight Agency
CTA Section:
- Glass card with gradient border, large padding
- "Ready to find your next high-converting lead magnet?"
- Big "Enter Marketplace" button (cyan gradient) — navigates to /app/browse
Footer:
- Border-top rgba(255,255,255,0.05)
- Logo on left
- Link columns: Marketplace, For Sellers, Categories, Pricing, Privacy, Terms
- Tagline: "The marketplace for lead magnets that actually convert."
- "© 2026 MagnetMarket. All rights reserved."
---
PAGE 2: BROWSE MARKETPLACE (route: "/app/browse")
Header:
- "Marketplace" (h1) + "Browse 936 proven lead magnets across 6 industries." (muted)
Search & Filter Bar (sticky below header, glass card):
- Search input: placeholder "Search assets, creators, or keywords..."
- Category dropdown: All Categories / SaaS & Software / E-commerce & DTC / Health & Fitness / Real Estate / Financial Services / Agencies & Consultants
- Asset Type dropdown: All Types / Email Nurture Sequence / PDF Lead Magnet / Quiz Funnel / Calculator / Webinar Funnel / Template Kit
- Sort dropdown: Best Selling (default) / Highest Rated / Newest / Price: Low to High / Price: High to Low / Highest Conversion
- All filtering should work client-side against the 12 hardcoded assets
Results Count:
- "Showing 12 assets" (updates when filters applied)
Asset Grid (3 columns desktop, 2 tablet, 1 mobile):
Each asset card is a glass card with:
- Top: gradient placeholder thumbnail area (each type has a distinct gradient — cyan for email, magenta for PDF, amber for quiz, emerald for calculator, violet for webinar, blue for template)
- Asset type badge (top-left of thumbnail, pill, colored by type)
- Category tag (top-right, muted pill)
- Title (bold, white, truncated to 2 lines)
- Creator row: small colored avatar circle with initials + creator name + verified checkmark icon (if rating >= 4.8)
- Star rating (amber) + "(142 reviews)" text
- Conversion benchmark (emerald text, bold): e.g., "12.4% trial-to-paid" or "41.3% quiz completion"
- Bottom row: Price in large text (e.g., "$79") + "View Details" button
- Hover: card lifts translateY(-2px), border brightens
Show all 12 assets from the DATA section below in the grid. Clicking "View Details" navigates to /app/asset/:id. Clicking a creator name navigates to /app/creator/:id.
---
PAGE 3: ASSET DETAIL PAGE (route: "/app/asset/:id")
Use asset #1 "The SaaS Trial-to-Paid Email Sequence" as the default displayed asset. All 12 assets should have their own detail pages accessible via the browse grid.
Breadcrumb: Marketplace > SaaS & Software > Email Nurture Sequences
Two-column layout (60% left + 40% right):
Left Column (asset details):
- Asset type badge (cyan) + category tag
- Title: "The SaaS Trial-to-Paid Email Sequence" (h1, large, bold)
- Creator card (inline, glass card): avatar circle "SL" (cyan bg) + "Sophie Langford" + @sophielang + 4.9 stars (142 reviews) + verified badge + "View Profile" link → /app/creator/1
- Full description: "A battle-tested 7-email nurture sequence designed to convert free trial users into paying customers. Built and refined across 14 different SaaS products over 18 months. Each email is optimised for a specific psychological trigger: Day 1 (Welcome + Quick Win), Day 2 (Core Feature Spotlight), Day 3 (Social Proof + Case Study), Day 4 (Address Objections), Day 5 (Peer Comparison), Day 6 (Urgency + Scarcity), Day 7 (Final Offer + Guarantee). Includes subject lines, preview text, full body copy, CTA variations, and A/B test suggestions for each email."
- "What's Included" (glass card with checklist, check icons in emerald):
- 7 fully written email templates with subject lines and preview text
- A/B test variations for 3 key emails
- Timing and sequence diagram
- Setup guide for Mailchimp, ConvertKit, ActiveCampaign, and HubSpot
- Canva-editable header images for each email
- Landing page copy template for the trial signup page
- White-label ready — swap branding in the MagnetMarket editor
- "Conversion Benchmarks" (glass card, emerald left border accent):
- Header: "Reported by creator from 14 implementations"
- Trial-to-paid conversion: 12.4% (emerald, large, bold)
- Email open rate (avg): 48.2%
- Click-through rate (avg): 8.7%
- Sequence completion rate: 71.3%
- Small disclaimer in muted text: "Benchmarks are self-reported by the creator. Actual results may vary."
- "Preview" section: show a stylised email preview card mockup with 2 sample email subjects and truncated body text, showing what the email sequence looks like
- Reviews section:
- Header: "Reviews" + "142 reviews" + 4.9 avg star display
- 3 review cards, each with: star rating, quote text, reviewer name + title + company, "Verified Purchase" emerald badge
- Review 1: 5 stars — "We plugged this into our onboarding flow and saw trial-to-paid jump from 8% to 13% in the first month. The Day 5 social proof email alone was worth the price." — Ryan Kessler, Growth Lead at Deskflow
- Review 2: 4 stars — "Well-structured and easy to customise. The white-label editor made rebranding a 15-minute job. Only wish it had SMS templates too." — Priya Agarwal, Marketing Manager at Cloudpeak
- Review 3: 5 stars — "Best $79 I've spent on marketing this year. The conversion benchmarks are real — we tracked 11.8% trial-to-paid in our first 60 days." — Tom Hensley, Founder at Metricly
- "Load More Reviews" button (non-functional)
Right Column (purchase card, sticky on scroll):
Glass card with cyan border accent at top:
- Price: "$79" (large, bold) + "one-time license" (muted)
- "Buy Now" button (cyan gradient, large, full width) — shows success toast and navigates to dashboard
- Below button: "Includes white-label editor access" (muted, small)
- Quick stats list:
- 847 sales
- 142 reviews
- Updated Feb 2026
- Instant download
- Creator mini-card: avatar + name + "1,436 total sales" + "View all assets →"
- "Compatible with" row: Mailchimp, ConvertKit, ActiveCampaign, HubSpot, Canva, PDF (as small text labels or icons)
- License info text: "Standard License — use for one brand/business. Extended License available for agencies ($199)."
---
PAGE 4: CREATOR PROFILE PAGE (route: "/app/creator/:id")
Default to Sophie Langford (creator 1).
Header section:
- Large avatar circle "SL" with cyan ring border
- Name: "Sophie Langford" + verified badge (emerald checkmark)
- Handle: @sophielang
- Bio: "Email sequence specialist. Former Head of Lifecycle Marketing at two YC-backed startups. I build nurture sequences that convert, and I've open-sourced the playbook here on MagnetMarket."
- Stats row (4 stats, muted labels): "1,436 sales" | "4.9 avg rating" | "3 assets listed" | "Joined Mar 2024"
- "Follow" button (outline, non-functional)
Creator Stats Card (glass card):
- Total revenue earned: "$92,440"
- Average asset rating: 4.9
- Repeat buyer rate: 34%
- Top category: SaaS & Software
Assets by this Creator (grid, same card style as browse page):
- "The SaaS Trial-to-Paid Email Sequence" — $79 — 4.9 stars — 847 sales — 12.4% conversion
- "The B2B Cold Outreach Sequence" — $89 — 4.9 stars — 400 sales — 4.2% reply rate
- "The Post-Demo Follow-Up Sequence" — $69 — 4.8 stars — 189 sales — 7.1% meeting book rate
Recent Reviews (from across all assets):
- Show 3-4 reviews with the asset name mentioned, reviewer info, and star rating
---
PAGE 5: SELL / UPLOAD PAGE (route: "/app/sell")
Header:
- "Sell on MagnetMarket" (h1) + "Upload your proven lead magnets and start earning passive income." (muted)
Earnings Overview Card (glass card, top of page):
- "Your Earnings" header
- "$3,343 this month" (large, emerald) — "$10,843 total"
- Stats row: "Assets Listed: 2" | "Total Sales: 147" | "Avg Rating: 4.7"
- "Next payout: March 1, 2026 — $3,343" with emerald badge
Upload New Asset Form (large glass card):
- Asset Title input (pre-filled: "SaaS Onboarding Email Masterclass")
- Category dropdown (pre-selected: SaaS & Software)
- Asset Type dropdown (pre-selected: Email Nurture Sequence)
- Description textarea (pre-filled with 2-3 sentences of sample text about what the asset contains)
- Price section: "$" input with "89" pre-filled + toggle switch between "One-time license" and "Recurring monthly license"
- Conversion Benchmarks section:
- Primary metric: label input "Trial-to-paid conversion" + value input "12.1%"
- Secondary metric: label input "Open rate" + value input "44.8%"
- "+ Add another benchmark" link button
- Note in muted text: "Sharing real conversion data increases sales by 3.4x"
- File Upload area: dashed border drag-and-drop zone with cloud-upload icon + "Drag and drop your asset files here, or click to browse" + "Accepted: ZIP, PDF, CSV, DOCX (max 50MB)"
- White-Label Configuration section:
- Toggle: "Enable white-label editor for buyers" (on by default, cyan toggle)
- "Which elements can buyers customise?" — checkboxes all checked: Logo, Brand colours, Company name, URLs, Contact info
- Two buttons at bottom:
- "Publish Asset" (cyan gradient, large) — non-functional, shows demo toast "Asset published! It will appear in the marketplace within 24 hours."
- "Save as Draft" (outline/ghost button)
Your Listed Assets (below the form):
- 2 asset cards showing existing assets with: title, asset type badge, sales count, revenue earned, average rating, "Edit" button (non-functional), "View Analytics" link
---
PAGE 6: WHITE-LABEL EDITOR (route: "/app/whitelabel/:id")
This is the key differentiating feature. Default to editing "The SaaS Trial-to-Paid Email Sequence" for Flowstack branding.
Header:
- "White-Label Editor" (h1) + "Customise 'The SaaS Trial-to-Paid Email Sequence' for your brand." (muted)
- Progress steps indicator: Step 1 "Purchase" (completed, emerald check) → Step 2 "Customise" (active, cyan) → Step 3 "Export" (upcoming, muted)
Two-column layout (40% left panel + 60% right panel):
Left Panel — Brand Settings (glass card, scrollable):
- "Your Brand" header with Palette icon
- Logo upload area: shows a cyan square placeholder with "FS" text (representing the Flowstack logo) + "Change Logo" button overlay
- Company Name input: "Flowstack" (pre-filled)
- Primary Brand Color: color circle (#06B6D4 cyan) with hex input field
- Secondary Brand Color: color circle (#10B981 emerald) with hex input field
- Website URL input: "<https://flowstack.io>" (pre-filled)
- Contact Email input: "[email protected]" (pre-filled)
- CTA Button Text input: "Start Your Free Trial" (pre-filled)
- CTA Button URL input: "<https://flowstack.io/trial>" (pre-filled)
- Tone Adjustment dropdown: "Original" / "More Formal" / "More Casual" (Original selected)
- Divider
- "Apply to All Emails" button (cyan gradient, full width)
- "Reset to Original" button (ghost/outline, full width)
Right Panel — Live Preview (glass card):
- Tab bar across top: "Email 1: Welcome" | "Email 2: Feature Spotlight" | "Email 3: Social Proof" | "Email 4: Objections" | "Email 5: Peer Comparison" | "Email 6: Urgency" | "Email 7: Final Offer" — horizontally scrollable
- Default to Email 1: Welcome tab active
- Email preview card styled like an email client window:
- Email header: From "Flowstack <[email protected]>" — Subject "Welcome to Flowstack — here's your quick win"
- Email body with Flowstack branding applied:
- Flowstack logo ("FS" square) centered at top
- "Hi {{first_name}}," greeting
- Body paragraph: "Welcome to Flowstack! We're thrilled you've started your free trial. Most teams see their first workflow automation within 15 minutes of signing up. Here's the fastest way to get started..."
- Cyan CTA button: "Start Your Free Trial" (uses the brand primary color)
- Footer: "Flowstack · flowstack.io · [email protected]"
- The preview should visually reflect the brand settings — if the user changes the primary color or company name, the preview updates
- Small toggle at top-right of preview: "Original" / "Your Version" — to compare the creator's original vs the white-labelled version
Export Section (below the two-column editor, full width):
- "Export Your White-Labelled Assets" header
- 3 export option cards side by side (glass cards):
1. Canva icon area — "Export to Canva" — "Get editable Canva templates for all 7 emails with your branding pre-applied." — "Export to Canva" button (outline)
2. PDF icon area — "Export as PDF" — "Download a print-ready PDF package with all email copy, subject lines, timing guide, and setup instructions." — "Export as PDF" button (outline)
3. Notion icon area — "Export to Notion" — "Get a Notion workspace with all email templates, sequence diagram, and A/B test plan." — "Export to Notion" button (outline)
- All export buttons show a demo toast: "Export started! Your files will be ready to download in a few seconds."
---
PAGE 7: BUYER DASHBOARD (route: "/app/dashboard")
Header:
- "Your Library" (h1) + "Manage your purchased assets and track your lead magnets." (muted)
4 Key Metric Cards (row of glass cards):
1. BookOpen icon (cyan bg at 10% opacity) — "Assets Purchased" — "4" (large) — "2 white-labelled, 1 in progress" (muted)
2. DollarSign icon (magenta bg at 10% opacity) — "Total Invested" — "$476" (large) — "Avg $119 per asset" (muted)
3. Users icon (emerald bg at 10% opacity) — "Est. Leads Generated" — "1,247" (large) — "From 3 deployed assets" (muted)
4. TrendingUp icon (amber bg at 10% opacity) — "Avg Conversion Lift" — "+4.2pp" (large) — "vs. your previous lead magnets" (muted)
Purchased Assets (list of glass cards):
Asset 1:
- Left: cyan gradient thumbnail placeholder + Email Sequence type badge
- "The SaaS Trial-to-Paid Email Sequence" (bold) + "by Sophie Langford"
- Purchased: Feb 10, 2026 — $79
- White-label status: emerald badge "White-Labelled ✓"
- Deployed: "Active in Flowstack onboarding since Feb 12"
- Performance since deploy: "11.8% trial-to-paid (vs 8.2% before)" in emerald
- Buttons: "Open in Editor" (links to /app/whitelabel/1) | "Re-download" | "View Original"
Asset 2:
- Emerald gradient thumbnail + Calculator type badge
- "The Ultimate ROI Calculator for B2B SaaS" (bold) + "by Daniel Okoro"
- Purchased: Feb 18, 2026 — $129
- White-label status: amber badge "In Progress"
- Buttons: "Continue Editing" (links to /app/whitelabel/2) | "Re-download"
Asset 3:
- Cyan gradient thumbnail + Email Sequence type badge
- "The B2B Cold Outreach Sequence" (bold) + "by Sophie Langford"
- Purchased: Jan 28, 2026 — $89
- White-label status: emerald badge "White-Labelled ✓"
- Deployed: "Active in Flowstack outbound since Feb 1"
- Performance: "4.2% reply rate (cold outbound)" in emerald
- Buttons: "Open in Editor" | "Re-download"
Asset 4:
- Violet gradient thumbnail + Webinar Funnel type badge
- "Webinar Funnel for SaaS Product Launches" (bold) + "by Marcus Webb"
- Purchased: Feb 24, 2026 — $179
- White-label status: gray badge "Not Started"
- Buttons: "Start White-Labelling" (links to /app/whitelabel/12) | "Re-download"
Recommended For You (bottom section, glass card):
- "Based on your purchases" header
- 3 compact asset cards in a row:
- "The Post-Demo Follow-Up Sequence" by Sophie Langford — $69 — 4.8 stars
- "The Financial Health Quiz" by Jake Moreno — $119 — 4.7 stars
- "Agency Proposal Template Kit" by Daniel Okoro — $49 — 4.8 stars
- Each with a "View Details" link
---
PAGE 8: SELLER ANALYTICS DASHBOARD (route: "/app/seller-dashboard")
Header:
- "Seller Dashboard" (h1) + "Your sales performance and earnings on MagnetMarket." (muted)
4 Key Metric Cards (row):
1. DollarSign icon (emerald bg) — "Total Revenue" — "$10,843" (large) — "↑ 34% vs last month" (emerald, small)
2. ShoppingCart icon (cyan bg) — "Total Sales" — "147" (large) — "23 this week" (muted)
3. Star icon (amber bg) — "Average Rating" — "4.7" (large) — "Across 2 assets" (muted)
4. Package icon (magenta bg) — "Active Listings" — "2" (large) — "1 bestseller" (muted)
Revenue Over Time (line chart, full width glass card):
- Title: "Revenue Over Time"
- X-axis: Sep 2025, Oct, Nov, Dec, Jan 2026, Feb 2026
- Cyan line trending upward: $680, $980, $1,240, $1,850, $2,750, $3,343
- Total annotation: "$10,843 earned in 6 months"
- Chart uses the app cyan color (#06B6D4) for the line, emerald (#10B981) for data points
Sales by Asset (glass card with donut chart + breakdown):
- "Sales by Asset" header
- Donut/ring chart with two segments:
- "SaaS Onboarding Email Masterclass" — 62% (cyan) — 91 sales — $8,099 revenue
- "Growth Hacking Notion Kit" — 38% (magenta) — 56 sales — $2,744 revenue
- Legend below the chart
Recent Sales Feed (glass card):
- "Recent Sales" header
- 6 sale entries as a list, each with: asset name, buyer location, price, timestamp
- "SaaS Onboarding Email Masterclass" — San Francisco, US — $89 — 2 hours ago
- "Growth Hacking Notion Kit" — London, UK — $49 — 5 hours ago
- "SaaS Onboarding Email Masterclass" — Sydney, AU — $89 — 8 hours ago
- "SaaS Onboarding Email Masterclass" — Toronto, CA — $89 — 12 hours ago
- "Growth Hacking Notion Kit" — Berlin, DE — $49 — 1 day ago
- "SaaS Onboarding Email Masterclass" — New York, US — $89 — 1 day ago
- Each entry has a small green dot indicator
Reviews Received (glass card):
- "Recent Reviews" header
- 3 recent reviews with: asset name, star rating, truncated quote, reviewer name
- 5 stars — "SaaS Onboarding Email Masterclass" — "Incredible email sequence, we saw results within the first week..." — Jordan Mills, SaaS Marketer
- 4 stars — "Growth Hacking Notion Kit" — "Well-organized templates, would love more examples for B2C..." — Lisa Tran, Growth Lead
- 5 stars — "SaaS Onboarding Email Masterclass" — "Worth every penny. The A/B test suggestions were spot on..." — Carlos Mendez, Founder
---
ASSET DATA (use this across all pages — data must be consistent everywhere):
Categories (6):
1. SaaS & Software
2. E-commerce & DTC
3. Health & Fitness
4. Real Estate
5. Financial Services
6. Agencies & Consultants
Asset Types (6):
1. Email Nurture Sequence (badge color: cyan)
2. PDF Lead Magnet / Guide (badge color: magenta)
3. Quiz Funnel (badge color: amber)
4. Calculator / Tool (badge color: emerald)
5. Webinar Funnel (badge color: violet)
6. Notion / Template Kit (badge color: blue)
Creators (6):
1. Sophie Langford — @sophielang — initials "SL" — SaaS email sequences — 4.9 avg — 1,436 total sales — Joined Mar 2024
2. Jake Moreno — @jakemoreno — initials "JM" — Quiz funnels & calculators — 4.8 avg — 1,233 total sales — Joined Jun 2024
3. Nina Chakraborty — @ninachak — initials "NC" — PDF guides & ebooks — 4.6 avg — 921 total sales — Joined Sep 2024
4. Marcus Webb — @marcuswebb — initials "MW" — Webinar funnels — 4.9 avg — 1,103 total sales — Joined Jan 2024
5. Ava Sinclair — @avasinclair — initials "AS" — E-commerce sequences — 4.6 avg — 478 total sales — Joined Nov 2024
6. Daniel Okoro — @danielokoro — initials "DO" — SaaS templates & toolkits — 4.8 avg — 1,168 total sales — Joined May 2024
Assets (13 — show first 12 in the browse grid, asset 13 appears only on Sophie's creator profile and in recommendations):
1. "The SaaS Trial-to-Paid Email Sequence" — Sophie Langford — Email Nurture Sequence — SaaS & Software — $79 — 4.9 stars (142 reviews) — 12.4% trial-to-paid — 847 sales
2. "The Ultimate ROI Calculator for B2B SaaS" — Daniel Okoro — Calculator / Tool — SaaS & Software — $129 — 4.8 stars (89 reviews) — 34.2% lead capture rate — 412 sales
3. "E-commerce Welcome Flow (12 Emails)" — Ava Sinclair — Email Nurture Sequence — E-commerce & DTC — $59 — 4.6 stars (78 reviews) — 8.7% first purchase rate — 478 sales
4. "The Product Quiz Funnel Blueprint" — Jake Moreno — Quiz Funnel — E-commerce & DTC — $149 — 4.9 stars (203 reviews) — 41.3% quiz completion, 22.8% email capture — 567 sales
5. "The 7-Day Fitness Challenge Lead Magnet" — Nina Chakraborty — PDF Lead Magnet — Health & Fitness — $39 — 4.7 stars (112 reviews) — 18.6% opt-in rate — 634 sales
6. "Fitness Assessment Calculator" — Jake Moreno — Calculator / Tool — Health & Fitness — $99 — 4.8 stars (67 reviews) — 28.4% lead capture rate — 325 sales
7. "The Webinar Funnel Kit for Coaches" — Marcus Webb — Webinar Funnel — Health & Fitness — $199 — 4.9 stars (156 reviews) — 32.1% registration, 18.4% show-up — 489 sales
8. "Real Estate Lead Magnet Bundle" — Nina Chakraborty — PDF Lead Magnet — Real Estate — $69 — 4.5 stars (45 reviews) — 14.2% opt-in rate — 287 sales
9. "The Financial Health Quiz" — Jake Moreno — Quiz Funnel — Financial Services — $119 — 4.7 stars (91 reviews) — 38.7% completion, 26.1% email capture — 341 sales
10. "Agency Proposal Template Kit" — Daniel Okoro — Notion / Template Kit — Agencies & Consultants — $49 — 4.8 stars (134 reviews) — N/A (internal use) — 756 sales
11. "The B2B Cold Outreach Sequence" — Sophie Langford — Email Nurture Sequence — Agencies & Consultants — $89 — 4.9 stars (98 reviews) — 4.2% reply rate — 400 sales
12. "Webinar Funnel for SaaS Product Launches" — Marcus Webb — Webinar Funnel — SaaS & Software — $179 — 4.8 stars (124 reviews) — 28.6% registration, 21.2% show-up — 614 sales
13. "The Post-Demo Follow-Up Sequence" — Sophie Langford — Email Nurture Sequence — SaaS & Software — $69 — 4.8 stars (54 reviews) — 7.1% meeting book rate — 189 sales
Alex Rivera's Purchased Assets (for buyer dashboard):
1. Asset #1 — Purchased Feb 10, 2026 — $79 — White-labelled ✓ — Deployed, 11.8% conversion
2. Asset #2 — Purchased Feb 18, 2026 — $129 — In progress
3. Asset #11 — Purchased Jan 28, 2026 — $89 — White-labelled ✓ — Deployed, 4.2% reply rate
4. Asset #12 — Purchased Feb 24, 2026 — $179 — Not started
---
NAVIGATION BEHAVIOR:
- The sidebar highlights the active page with a cyan left border and bg-white/10
- Clicking sidebar items navigates between pages
- The landing page has its own layout without the sidebar
- "View Details" links on asset cards navigate to /app/asset/:id
- Creator names link to /app/creator/:id
- "Buy Now" buttons show a success toast: "Purchase complete! Asset added to your library." and adds a visual confirmation
- "Open in Editor" / "Start White-Labelling" on the dashboard navigates to /app/whitelabel/:id
- Export buttons in the white-label editor show a demo toast: "Export started! Your files will be ready in a few seconds."
- All other non-functional buttons show a subtle toast: "This feature is available in the full version."
- Mobile responsive: sidebar collapses to hamburger menu, grids reflow to fewer columns, filters stack vertically
---
DATA BEHAVIOR:
- All data is hardcoded / static dummy data. No databases, no APIs, no real calculations.
- Numbers, dates, names, and statuses are all fake but realistic.
- The simulated buyer is "Alex Rivera", Growth Lead at "Flowstack" (a B2B SaaS startup).
- 6 creator profiles, 12 asset listings, reviews, and conversion benchmarks as specified above.
- Conversion benchmarks should match exactly across browse cards, detail pages, and dashboard — e.g., 12.4% trial-to-paid for asset #1 appears on the browse card, the detail page benchmarks section, and the dashboard performance stat.
- The white-label editor preview should look like a realistic email with the buyer's branding applied.
- The marketplace should feel populated and alive — not an empty shell.
---
IMPORTANT NOTES:
- The landing page should feel like a premium marketplace homepage — think Gumroad, Creative Market, or Envato in dark mode. Clean, confident, conversion-focused.
- The browse page is the core marketplace experience — dense, filterable, explorable. The asset grid should feel rich with data on each card.
- The white-label editor is the key differentiator — it should feel interactive even in demo mode. The live email preview that responds to brand settings changes is critical.
- The asset detail page should feel like a thorough product listing — rich description, conversion proof, social proof, clear purchase CTA.
- Charts on the seller dashboard should use the app's cyan and emerald colors.
- Ensure all data is internally consistent — same names, prices, ratings, and benchmarks everywhere they appear.
- Fully responsive across mobile, tablet, and desktop.
- Use smooth, subtle animations: hover lifts on cards, fade-in on page load, stagger on landing page sections. Don't over-animate.
- If any page is too complex to generate fully, prioritise in this order: (1) Browse Marketplace, (2) Asset Detail Page, (3) White-Label Editor, (4) Landing Page, (5) Buyer Dashboard, (6) Seller Dashboard, (7) Creator Profile, (8) Sell Page.