Build a demo app called "CoPromo" — a SaaS cross-promotion marketplace that matches SaaS companies with complementary partners, lets them agree on co-marketing terms, and automates campaign delivery to each other's customer bases. Companies sign up, define their ICP, connect their email tool, browse potential partner companies filtered by category, company size, and audience overlap score — then agree on deal terms (discount swap, revenue share, or flat fee) and launch co-branded campaigns with one click. Both sides track referred signups, conversions, and LTV from each partner in a shared dashboard so both sides can see ROI in real time.
WHO: Growth marketers, partnership leads, and heads of marketing at Series A–C SaaS companies who want to grow without spending more on paid acquisition.
WHAT: A cross-promotion marketplace that matches SaaS companies with complementary partners, automates co-branded campaign delivery, and tracks shared ROI.
WHY: SaaS companies spend $1.50+ to acquire every trial user through ads, but their existing customers already trust complementary tools. CoPromo unlocks that trust by making it effortless to find partners, agree on terms, and launch campaigns — turning your customer base into a growth channel for your partners and vice versa.
This is a DEMO app. Use hardcoded dummy data throughout. No real authentication — clicking "Enter Demo" or "Try the Dashboard" on the landing page navigates directly into the app dashboard. No login screen, no signup forms that actually validate. The simulated company inside the dashboard is "Relay" — a customer messaging platform for SaaS teams. Relay is a Series A company with ~4,200 customers, and they use CoPromo to find and manage cross-promotion partnerships with complementary SaaS tools.
---
VISUAL STYLE:
Apply a dark mode SaaS dashboard aesthetic throughout — inspired by Linear, Loops, and Intercom. Background: near-black (#09090F). Card surfaces: dark charcoal (#13131A) with subtle 1px borders (#1C1C28). Primary accent color: electric blue (#3B82F6). Secondary accent: teal (#14B8A6) for success states and positive metrics. Tertiary accent: amber (#F59E0B) for warning/pending states. Error/negative: rose (#EF4444) for declined or failed states. 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. Status badges use semantic colors: teal (#14B8A6) for active/success, amber (#F59E0B) for pending/review, rose (#EF4444) for declined/paused, blue (#3B82F6) for info/primary. Use subtle blue-to-cyan gradient accents (#3B82F6 to #06B6D4) on hero sections, key CTAs, and primary action buttons. Hover effects on cards should slightly brighten borders. Buttons have a slight scale(1.02) on hover.
LOGO: The CoPromo logo should be the text "copromo" in lowercase, bold Inter font, white — with a small electric blue (#3B82F6) handshake or connecting-arrows icon integrated before or after the text to suggest partnership and collaboration. Use this in the nav, sidebar, and footer.
---
PAGES AND ROUTES:
| Route | Page |
|------------------------|-----------------------------|
| / | Landing Page (marketing) |
| /app/dashboard | Dashboard |
| /app/discover | Partner Discovery |
| /app/partnerships | Active Partnerships |
| /app/analytics | Analytics |
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).
---
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: "Features", "How It Works", "Testimonials" (smooth scroll to sections)
- "Enter Demo" button on the right (links to /app/dashboard) — blue-to-cyan gradient background (#3B82F6 to #06B6D4), 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 blue/cyan at ~8% opacity behind the headline area
- Eyebrow text above headline: "CROSS-PROMOTION MARKETPLACE FOR SAAS" in small caps, electric blue color, letter-spacing 3px
- Large headline: "Stop buying leads. Start sharing customers." — text-5xl on mobile, text-7xl on desktop, bold, tight tracking
- Subheadline in muted gray (max-w-2xl): "CoPromo matches your SaaS company with complementary partners, automates co-branded campaigns, and tracks every referred signup, conversion, and dollar — so both sides see the ROI in real time."
- Two CTA buttons side by side:
- "Enter Demo" (primary, blue-to-cyan gradient background, white text) — navigates to /app/dashboard
- "See How It Works" (secondary, transparent with white/10 border) — scrolls down to How It Works section
- Below buttons, small muted text: "Trusted by 240+ SaaS companies · $4.8M partner-sourced revenue · 3.1x cheaper than paid acquisition"
- Floating stats card below: glass card with 4 stats in a row: "240+" (blue, "SaaS Companies"), "1,847" (teal, "Campaigns Launched"), "3.1x" (amber, "Cheaper Than Ads"), "$4.8M" (emerald, "Partner Revenue Generated")
- Use framer-motion staggered fade-in animations (initial opacity:0, y:20)
How It Works Section (id="how-it-works"):
- Section heading: "From cold outreach to warm intros in three steps" + subtitle: "Set it up once. The platform handles matching, terms, and delivery."
- 3 glass cards in a row, each with:
- Step number label ("Step 1", "Step 2", "Step 3")
- Colored icon in a rounded square (icon background at 10% opacity of the icon color)
- Step 1: Target icon (blue) — "Define Your ICP" — "Sign up, describe your ideal customer profile, and connect your email tool. CoPromo instantly maps your audience and identifies SaaS companies whose customers are a perfect match for your product."
- Step 2: Search icon (teal) — "Find & Match Partners" — "Browse the marketplace of SaaS companies filtered by category, company size, and audience overlap score. The AI ranks partners by how well their customers match your ICP — so you only pursue high-value partnerships."
- Step 3: Rocket icon (amber) — "Launch & Track" — "Agree on deal terms — discount swap, revenue share, or flat fee — and launch co-branded campaigns with one click. Track referred signups, conversions, and LTV in a shared dashboard visible to both partners."
- Animate in on scroll with stagger
Features Section (id="features"):
- Heading: "Everything you need to grow through partnerships" + subtitle: "Stop paying $1.50 per trial user. Start leveraging trust between complementary products."
- 2x2 grid of feature cards (glass cards):
- Card 1: Handshake icon (blue) — "Smart Partner Matching" — "AI-powered audience overlap scoring analyses your customer base against every company in the marketplace. See exactly how much overlap exists, which segments match, and what your partnership potential looks like — before you reach out."
- Card 2: Zap icon (teal) — "One-Click Campaign Delivery" — "Agree on terms, pick a campaign type — co-branded email, in-app cross-promo, or landing page bundle — and launch with one click. CoPromo handles email delivery, tracking pixels, and attribution automatically."
- Card 3: BarChart3 icon (amber) — "Shared ROI Dashboard" — "Both partners see the same real-time dashboard: referred signups, trial-to-paid conversions, LTV of partner-sourced customers, and revenue owed. No spreadsheets, no disputes — just transparent metrics."
- Card 4: Settings icon (emerald) — "Flexible Deal Terms" — "Every partnership is different. Choose discount swaps (trade exclusive offers), revenue share (earn a % of conversions you drive), or flat fee (pay per lead). Adjust terms as the partnership evolves."
Testimonials Section (id="testimonials"):
- Heading: "SaaS teams growing smarter, not louder" + subtitle: "Here's what happens when you stop spending on ads and start leveraging partnerships."
- 3 glass testimonial cards:
- Quote icon at top (blue at 30% opacity)
- Testimonial 1: "We spent $38K on Google Ads last quarter for 2,400 trial signups. Our first CoPromo partnership with a complementary analytics tool drove 800 signups in 6 weeks — at zero acquisition cost. The ROI isn't even close." — Megan Torres, VP Growth, Driftly
- Testimonial 2: "The overlap scoring is what sold us. We could see exactly which partners had the right audience before committing to anything. Our top partner has a 94% overlap score and has driven $127K in revenue this year." — James Okafor, Head of Partnerships, Datawise
- Testimonial 3: "Setting up campaigns used to take 3 weeks of back-and-forth emails and shared Google Docs. With CoPromo, we agreed on terms and launched a co-branded email in one afternoon. Both dashboards updated in real time." — Priya Chandrasekar, Marketing Lead, FormHive
CTA Section:
- Glass card with gradient border, large padding
- Background glow effect inside
- "See CoPromo in action"
- Subtext: "Explore the demo dashboard for Relay, a customer messaging platform for SaaS, and see how cross-promotion partnerships drive growth without ads."
- "Enter Demo Dashboard" button (blue-to-cyan gradient) — navigates to /app/dashboard
Footer:
- Border-top, logo on left
- Links center: Features, How It Works, Pricing, Privacy, Terms (all # hrefs)
- Tagline: "Cross-promotion marketplace for SaaS. Better partners. Cheaper growth."
- Copyright: "2026 CoPromo. All rights reserved."
---
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 Lucide icons, rounded-xl hover/active states:
- Dashboard (LayoutDashboard icon) → /app/dashboard
- Discover (Search icon) → /app/discover
- Partnerships (Handshake icon) → /app/partnerships
- Analytics (BarChart3 icon) → /app/analytics
- Active item: blue left border (3px), bg-white/10, text-white
- Inactive: text-muted-foreground hover:bg-white/5
- Divider line above bottom section
- Company info at bottom: blue circle with "R" initial, "Relay" company name, "Series A · 4,200 customers" in small blue text
Sidebar (Mobile):
- Hidden by default
- Mobile header bar: fixed top, hamburger button + logo
- Hamburger opens a slide-in overlay (dark backdrop + sidebar from left)
- Close button in the overlay
Main Content Area:
- Left padding for sidebar on desktop (pl-64), top padding for mobile header on mobile (pt-14)
- Content max-width: max-w-6xl, centered, with padding
---
PAGE 2: DASHBOARD (route: "/app/dashboard")
Header:
- "Welcome back, Relay" (h1, bold, white)
- "Here's your partnership performance for February 2026." (muted text)
4 Key Metric Cards (responsive grid: 1→2→4 columns):
Each card is a glass card with:
- Label (muted, small)
- Icon in a colored rounded square (top right)
- Large number
- Small change indicator
Cards:
1. "Active Partnerships" — "7" — Handshake icon (blue bg) — "↑ 2 new this month"
2. "Referred Signups (Feb)" — "1,284" — Users icon (teal bg) — "↑ 34% vs Jan"
3. "Partner Revenue (Feb)" — "$47,620" — DollarSign icon (emerald bg) — "↑ 28% vs Jan"
4. "Avg. Overlap Score" — "87%" — Target icon (amber bg) — "Top 10% of marketplace"
Partnership Health Snapshot Card (full width glass card):
- Title: "This Month at a Glance"
- A row of mini-stats with small icons and colored text:
- Live campaigns: 8
- Signups referred out: 1,106
- Signups referred in: 1,284
- Avg. conversion rate: 12.4%
- Revenue earned: $47,620
- Revenue generated for partners: $38,940
Main Content Grid (3/5 + 2/5 on desktop):
Left: Recent Activity Feed (glass card):
- Header: "Recent Activity" with "View All" link
- 7 activity items, each with colored icon, description text, and relative timestamp:
1. Zap (teal) — "Campaign 'Spring Growth Bundle' with Driftly went live — co-branded email sent to 3,400 recipients" — 2 hours ago
2. Users (blue) — "New partner match: Metricly (Product Analytics) — 91% overlap score" — 5 hours ago
3. DollarSign (emerald) — "Monthly payout received from Datawise partnership — $5,240 revenue share" — 8 hours ago
4. CheckCircle (teal) — "SlashOps campaign hit milestone — 500 total referred signups" — 12 hours ago
5. Handshake (blue) — "Inbound partnership request from FormHive (Form Builder, 82% overlap)" — Yesterday
6. BarChart3 (amber) — "Relay x ChurnGuard campaign conversion rate updated — 14.2% trial-to-paid" — Yesterday
7. AlertCircle (amber) — "PipelineIQ partnership terms expiring in 7 days — renewal review needed" — 2 days ago
Right Side (stacked cards):
"Top Partners This Month" Card (glass card):
- Header: "Top Performing Partners"
- 3 partner entries, each with avatar circle, name, overlap score, and revenue:
1. Blue circle "D" — "Datawise" — "94% overlap · $5,240 revenue · 189 signups"
2. Teal circle "S" — "SlashOps" — "91% overlap · $4,120 revenue · 127 signups"
3. Amber circle "Dr" — "Driftly" — "87% overlap · $3,680 revenue · 104 signups"
- "View All Partnerships →" link to /app/partnerships
"Pending Actions" Card (glass card):
- Header: "Needs Your Attention" with count badge "4"
- 4 action items:
1. Handshake icon (blue) — "Review partnership request from FormHive" — "82% overlap" — "Review" button
2. FileText icon (amber) — "Renew terms with PipelineIQ" — "Expires in 7 days" — "Review" button
3. Zap icon (teal) — "Approve campaign draft from Metricly" — "Co-branded email ready" — "Review" button
4. DollarSign icon (emerald) — "Confirm payout to ChurnGuard" — "$2,180 owed" — "Approve" button
- "View All →" link
"Campaign Snapshot" Card (glass card):
- Header: "Live Campaigns" with Zap icon
- 3 campaign entries with progress bars:
1. "Spring Growth Bundle" — with Driftly — "104 / 250 signups" — 42% progress bar (blue)
2. "Analytics Power Pack" — with Datawise — "189 / 300 signups" — 63% progress bar (teal)
3. "Sales Stack Deal" — with SlashOps — "127 / 250 signups" — 51% progress bar (blue)
- Bold total at bottom: "8 campaigns live · 1,284 total signups this month"
---
PAGE 3: PARTNER DISCOVERY (route: "/app/discover")
Header:
- "Discover Partners" (h1) + "Browse the marketplace and find SaaS companies whose customers match your ICP." (muted)
Filter/Search Bar:
- Search input placeholder: "Search companies..."
- Category dropdown: All / Sales / Marketing / Analytics / Support / Dev Tools / Finance / HR / Product
- Company Size dropdown: All / 1–50 / 51–200 / 201–1,000 / 1,000+
- Min. Overlap Score slider: 0%–100% (default 50%)
- Sort dropdown: Overlap Score / Company Size / Newest
Summary Stats Row (4 small glass cards):
- "Companies in Marketplace" — "240+" — Blue accent
- "Match Your ICP" — "86" — Teal accent
- "Avg. Overlap Score" — "74%" — Amber accent
- "Partnerships Formed" — "1,847" — Emerald accent — "across the platform"
PARTNER CARDS (scrollable grid, 2 or 3 columns on desktop, 1 on mobile — each is a glass card):
Partner Card 1:
- Avatar circle: blue "M" — "Metricly" — Category badge: "Product Analytics"
- Company size: "~320 employees" — Customers: "6,100"
- Overlap score: Large "91%" in teal with a teal progress ring or bar
- ICP match details: "Your SaaS customers overlap heavily with their product analytics users — both serve B2B SaaS mid-market."
- Audience insight: "Est. 3,800 shared ICP contacts"
- Status: amber badge "New Match"
- "View Profile" button (outline) | "Invite to Partner" button (blue gradient)
Partner Card 2:
- Avatar circle: emerald "C" — "ChurnGuard" — Category badge: "Customer Success"
- Company size: "~180 employees" — Customers: "3,800"
- Overlap score: "89%"
- ICP match details: "Churn prevention tools pair naturally with customer messaging — both serve retention-focused SaaS teams."
- Audience insight: "Est. 3,200 shared ICP contacts"
- Status: teal badge "Active Partner"
- "View Partnership" button (teal outline)
Partner Card 3:
- Avatar circle: amber "P" — "PipelineIQ" — Category badge: "Sales Intelligence"
- Company size: "~250 employees" — Customers: "5,400"
- Overlap score: "86%"
- ICP match details: "Sales intelligence users are often buyers of messaging platforms — strong cross-sell potential for sales-led SaaS."
- Audience insight: "Est. 3,100 shared ICP contacts"
- Status: teal badge "Active Partner"
- "View Partnership" button (teal outline)
Partner Card 4:
- Avatar circle: blue "O" — "OnboardPro" — Category badge: "User Onboarding"
- Company size: "~95 employees" — Customers: "2,200"
- Overlap score: "88%"
- ICP match details: "Onboarding tools are a natural companion to in-app messaging — same buyer persona, complementary workflows."
- Audience insight: "Est. 1,700 shared ICP contacts"
- Status: amber badge "New Match"
- "View Profile" button (outline) | "Invite to Partner" button (blue gradient)
Partner Card 5:
- Avatar circle: teal "R" — "RevStack" — Category badge: "Revenue Ops"
- Company size: "~140 employees" — Customers: "2,900"
- Overlap score: "85%"
- ICP match details: "RevOps teams manage customer lifecycle — they are prime buyers of messaging infrastructure like Relay."
- Audience insight: "Est. 2,100 shared ICP contacts"
- Status: amber badge "New Match"
- "View Profile" button (outline) | "Invite to Partner" button (blue gradient)
Partner Card 6:
- Avatar circle: blue "Sg" — "SegmentAI" — Category badge: "Data Segmentation"
- Company size: "~110 employees" — Customers: "2,500"
- Overlap score: "81%"
- ICP match details: "Segmentation tools feed into messaging workflows — high integration potential and shared mid-market audience."
- Audience insight: "Est. 1,600 shared ICP contacts"
- Status: amber badge "New Match"
- "View Profile" button (outline) | "Invite to Partner" button (blue gradient)
Partner Card 7:
- Avatar circle: amber "Sh" — "SupportHive" — Category badge: "Help Desk"
- Company size: "~210 employees" — Customers: "4,700"
- Overlap score: "79%"
- ICP match details: "Support teams frequently adopt messaging tools — customer support and customer messaging are adjacent categories."
- Audience insight: "Est. 2,800 shared ICP contacts"
- Status: blue badge "Invited — Awaiting Response"
- "Pending" label
Partner Card 8:
- Avatar circle: slate "Cs" — "CodeShip" — Category badge: "DevOps"
- Company size: "~430 employees" — Customers: "7,200"
- Overlap score: "68%"
- ICP match details: "Lower overlap — DevOps buyers are a different persona, though engineering-led SaaS companies use both."
- Audience insight: "Est. 1,900 shared ICP contacts"
- Status: amber badge "New Match"
- "View Profile" button (outline) | "Invite to Partner" button (blue gradient)
Partner Card 9:
- Avatar circle: teal "Cm" — "Campaignly" — Category badge: "Email Marketing"
- Company size: "~160 employees" — Customers: "3,400"
- Overlap score: "72%"
- ICP match details: "Email marketing and in-app messaging overlap significantly — though Campaignly serves more SMB and e-commerce."
- Audience insight: "Est. 1,400 shared ICP contacts"
- Status: teal badge "Active Partner"
- "View Partnership" button (teal outline)
Partner Card 10:
- Avatar circle: blue "Hp" — "HirePulse" — Category badge: "HR Tech"
- Company size: "~85 employees" — Customers: "1,800"
- Overlap score: "58%"
- ICP match details: "Lower overlap — HR buyers are a different function, though both serve scaling SaaS companies."
- Audience insight: "Est. 680 shared ICP contacts"
- Status: amber badge "New Match"
- "View Profile" button (outline) | "Invite to Partner" button (blue gradient)
---
PAGE 4: ACTIVE PARTNERSHIPS (route: "/app/partnerships")
Header:
- "Active Partnerships" (h1) + "Manage your cross-promotion partnerships and campaign terms." (muted)
Summary Stats Row (4 small glass cards):
- "Active Partners" — "7" — Blue accent
- "Live Campaigns" — "8" — Teal accent
- "Total Signups Referred" — "4,812" — Emerald accent — "all-time"
- "Total Revenue Earned" — "$168,420" — Emerald accent — "all-time"
Tab bar: "Active" (default) | "Pending" | "Past"
ACTIVE TAB — Partnership Cards (list of glass cards, detailed):
Partnership 1:
- Header row: Blue avatar circle "D" — "Datawise" — "BI & Reporting" category badge — Teal "ACTIVE" status badge
- Company info: "~280 employees · 5,100 customers · Partner since Oct 2025"
- Overlap score: "94%" with a teal progress bar
- Deal Terms Card (glass sub-card with blue left border):
- Deal Type: "Revenue Share" badge (blue)
- Terms: "15% revenue share on all trial-to-paid conversions referred by each side. Minimum 2 campaigns per quarter."
- Payment cycle: "Monthly net-30"
- Campaign Performance (glass sub-card):
- Active campaigns: 2
- Total signups referred to Relay: 642
- Total signups referred to Datawise: 581
- Relay conversion rate: 13.8% (trial-to-paid)
- Datawise conversion rate: 11.2%
- Revenue earned by Relay: $18,740
- Revenue earned by Datawise: $14,220
- Avg. LTV of referred customers: $412
- Campaign History (compact list):
1. "Analytics Power Pack" — Co-branded email — Launched Feb 15 — 189 signups — Active
2. "Data-Driven Messaging" — Landing page bundle — Launched Dec 1 — 267 signups — Completed
3. "Holiday Insights Bundle" — In-app cross-promo — Launched Nov 10 — 186 signups — Completed
- Buttons: "Launch New Campaign" (blue gradient) | "Edit Terms" (outline) | "Message Partner" (outline)
Partnership 2:
- Header row: Teal avatar circle "S" — "SlashOps" — "Sales Automation" category badge — Teal "ACTIVE" status badge
- Company info: "~190 employees · 3,900 customers · Partner since Nov 2025"
- Overlap score: "91%"
- Deal Terms Card:
- Deal Type: "Discount Swap" badge (amber)
- Terms: "Each side offers the other's customers an exclusive 25% discount on annual plans. No cash changes hands — value is in cross-exposure."
- Review date: "Quarterly — next review Mar 15"
- Campaign Performance:
- Active campaigns: 2
- Total signups referred to Relay: 487
- Total signups referred to SlashOps: 412
- Relay conversion rate: 11.6%
- SlashOps conversion rate: 9.8%
- Revenue earned by Relay: $14,260 (attributed from discount-driven conversions)
- Avg. LTV of referred customers: $378
- Campaign History:
1. "Sales Stack Deal" — In-app cross-promo — Launched Feb 20 — 127 signups — Active
2. "Messaging + Automation" — Co-branded email — Launched Jan 5 — 218 signups — Completed
3. "Q4 Bundle" — Landing page bundle — Launched Oct 22 — 142 signups — Completed
- Buttons: "Launch New Campaign" (blue gradient) | "Edit Terms" (outline) | "Message Partner" (outline)
Partnership 3:
- Header row: Amber avatar circle "Dr" — "Driftly" — "Conversational Marketing" category badge — Teal "ACTIVE" status badge
- Company info: "~120 employees · 2,800 customers · Partner since Jan 2026"
- Overlap score: "87%"
- Deal Terms Card:
- Deal Type: "Revenue Share" badge (blue)
- Terms: "12% revenue share on conversions. Minimum 1 campaign per month. 90-day trial period — full review in April."
- Payment cycle: "Monthly net-30"
- Campaign Performance:
- Active campaigns: 1
- Total signups referred to Relay: 104
- Total signups referred to Driftly: 89
- Relay conversion rate: 14.2%
- Driftly conversion rate: 10.8%
- Revenue earned by Relay: $3,680
- Avg. LTV of referred customers: $445
- Campaign History:
1. "Spring Growth Bundle" — Co-branded email — Launched Feb 25 — 104 signups — Active
- Buttons: "Launch New Campaign" | "Edit Terms" | "Message Partner"
Partnership 4:
- Header row: Emerald avatar circle "C" — "ChurnGuard" — "Customer Success" category badge — Teal "ACTIVE" status badge
- Company info: "~180 employees · 3,800 customers · Partner since Sep 2025"
- Overlap score: "89%"
- Deal Terms Card:
- Deal Type: "Flat Fee" badge (emerald)
- Terms: "$8 per qualified signup referred. Qualified = completes onboarding and reaches Day 7 active. Settled monthly."
- Payment cycle: "Monthly net-15"
- Campaign Performance:
- Active campaigns: 2
- Total signups referred to Relay: 384
- Total signups referred to ChurnGuard: 341
- Relay conversion rate: 12.1%
- ChurnGuard conversion rate: 10.4%
- Revenue earned by Relay: $8,940
- Revenue paid to ChurnGuard: $6,480
- Avg. LTV of referred customers: $389
- Campaign History:
1. "Retention Stack" — Co-branded email — Launched Feb 8 — 98 signups — Active
2. "Churn Prevention + Messaging" — Landing page bundle — Launched Nov 18 — 164 signups — Completed
3. "Customer Success Starter" — In-app cross-promo — Launched Sep 22 — 122 signups — Completed
- Buttons: "Launch New Campaign" | "Edit Terms" | "Message Partner"
Partnership 5 (compact card — less detail):
- Avatar circle: blue "P" — "PipelineIQ" — "Sales Intelligence" — Teal "ACTIVE" — 86% overlap
- Deal: Revenue Share (10%) — Partner since Dec 2025
- Performance: 198 signups referred · $5,420 revenue earned · 11.4% conversion
- Warning badge: amber "Terms expire in 7 days — review needed"
Partnership 6 (compact card):
- Avatar circle: blue "Dv" — "Delve" — "Data Analytics" — Teal "ACTIVE" — 84% overlap
- Deal: Discount Swap (20% mutual discount) — Partner since Jan 2026
- Performance: 87 signups referred · $2,180 revenue attributed · 9.7% conversion
Partnership 7 (compact card):
- Avatar circle: teal "Cm" — "Campaignly" — "Email Marketing" — Teal "ACTIVE" — 72% overlap
- Deal: Flat Fee ($6/signup) — Partner since Feb 2026
- Performance: 42 signups referred · $1,260 revenue · 8.3% conversion — "New partnership — ramping up"
PENDING TAB:
- 2 pending partnership cards:
1. FormHive — "Form Builder" — 82% overlap — "Inbound request received 2 days ago" — "Review Request" button
2. Metricly — "Product Analytics" — 91% overlap — "Invite sent by Relay 5 days ago" — "Awaiting response"
---
PAGE 5: ANALYTICS (route: "/app/analytics")
Header:
- "Analytics" (h1) + "Cross-promotion performance and partner ROI for Relay." (muted)
- Date range label at top right: "Last 6 Months" (styled as a dropdown but non-functional)
Top Metrics Row (4 glass cards):
1. "Total Referred Signups" — "4,812" — Blue — "↑ 34% vs prior 6 months" — "Across all partnerships"
2. "Partner-Sourced Revenue" — "$168,420" — Emerald — "↑ 61% vs prior 6 months" — "Revenue from partner-referred conversions"
3. "Avg. Conversion Rate" — "12.4%" — Teal — "↑ 3.2pp vs paid acquisition (9.2%)" — "Trial-to-paid from partner referrals"
4. "Avg. Partner ROI" — "3.1x" — Amber — "For every $1 in campaign costs" — "Revenue returned"
Chart 1 — "Referred Signups Over Time" (Line chart, full width glass card):
- X-axis: Sep 2025, Oct 2025, Nov 2025, Dec 2025, Jan 2026, Feb 2026
- Two lines:
- "Signups Referred In (to Relay)" in blue: 142, 198, 312, 487, 958, 1284
- "Signups Referred Out (from Relay)" in teal: 118, 167, 278, 421, 834, 1106
- Both lines trend sharply upward — showing network effects as more partnerships activate
- Use Recharts with the app color palette
Chart 2 — "Revenue by Partner" (Donut chart, glass card):
- Datawise: $18,740 — 33.5% — Blue
- SlashOps: $14,260 — 25.5% — Teal
- ChurnGuard: $8,940 — 16.0% — Emerald
- PipelineIQ: $5,420 — 9.7% — Amber
- Driftly: $3,680 — 6.6% — Cyan
- Delve: $2,180 — 3.9% — Indigo
- Campaignly: $1,260 — 2.2% — Slate
- Other (pending): $1,540 — 2.6% — Gray
- Center text: "$47,620 this month"
Chart 3 — "Monthly Partner Revenue" (Bar chart, glass card):
- Monthly bars for last 6 months:
- Sep: $8,420
- Oct: $12,640
- Nov: $19,870
- Dec: $28,340
- Jan: $37,180
- Feb: $47,620
- Blue colored bars with subtle gradient
- Total label below: "$168,420 total partner-sourced revenue"
Chart 4 — "Channel Performance" (Horizontal bar chart, glass card):
- Co-branded Email — 2,847 signups — 13.1% conversion — $84,230 revenue
- Landing Page Bundle — 1,124 signups — 11.8% conversion — $48,920 revenue
- In-App Cross-Promo — 841 signups — 10.4% conversion — $35,270 revenue
- Bars color-coded (blue, teal, amber)
"Partner Performance Table" Card (glass card, table format):
- Heading: "All-Time Partner Performance"
- Table:
| Partner | Overlap | Campaigns | Signups Referred | Conversions | Revenue | LTV |
|---------|---------|-----------|-----------------|-------------|---------|-----|
| Datawise | 94% | 3 | 642 | 89 | $18,740 | $412 |
| SlashOps | 91% | 3 | 487 | 57 | $14,260 | $378 |
| ChurnGuard | 89% | 3 | 384 | 46 | $8,940 | $389 |
| PipelineIQ | 86% | 2 | 198 | 23 | $5,420 | $396 |
| Driftly | 87% | 1 | 104 | 15 | $3,680 | $445 |
| Delve | 84% | 1 | 87 | 8 | $2,180 | $362 |
| Campaignly | 72% | 1 | 42 | 3 | $1,260 | $340 |
"Partner vs Paid Acquisition" Card (glass card):
- Heading: "Why Partnerships Beat Ads" with TrendingUp icon
- 3 comparison rows (Partner Referrals vs Paid Acquisition):
- Cost per signup: $0.82 vs $2.47 — "3.0x cheaper" (teal indicator)
- Trial-to-paid conversion: 12.4% vs 9.2% — "35% higher" (teal indicator)
- Avg. LTV of converted customers: $398 vs $312 — "28% higher" (teal indicator)
- Muted subtext: "Partner-referred customers convert better and stay longer because they arrive with trust from a product they already use."
"AI Insights" Card (glass card):
- Heading: "Partnership Insights" with Sparkles icon
- 4 insight bullets with small sparkle icons:
- "Datawise is your highest-performing partner by every metric — revenue, conversion rate, and LTV. Consider increasing campaign frequency from 2/quarter to monthly to capture more overlap."
- "Partners with >85% overlap scores convert at 12.8% vs 9.1% for partners below 85%. Prioritise high-overlap partnerships for maximum ROI."
- "Co-branded emails outperform other channels by 26% on conversion rate. Recommend making this the default campaign type for new partnerships."
- "Driftly's partnership is only 8 weeks old but already shows the highest LTV ($445) of any partner — their customers are high-intent buyers. Consider expanding this partnership."
"Deal Type Performance" Card (glass card):
- Heading: "Performance by Deal Type"
- 3 deal type rows:
- Revenue Share — 4 partnerships — $46,100 revenue — 12.8% avg conversion — "Best for high-trust, long-term partnerships"
- Discount Swap — 2 partnerships — $16,440 attributed — 10.8% avg conversion — "Zero cash outlay — good for testing"
- Flat Fee — 1 partnership — $8,940 revenue — 12.1% avg conversion — "Predictable unit economics"
---
NAVIGATION BEHAVIOR:
- The sidebar should highlight the active page with a blue left border and slightly brighter background
- Clicking sidebar items navigates between pages
- The landing page is separate from the app pages — it has its own layout without the sidebar
- All "View Details", "View All", and navigation links should work and use the router
- All buttons labeled as non-functional should look clickable but do nothing or show a subtle tooltip saying "Demo mode"
- Mobile responsive: sidebar collapses to a hamburger menu on small screens
---
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 SaaS company is "Relay" — a customer messaging platform for SaaS teams. Series A, ~4,200 customers.
- Active partners (7): Datawise (BI & Reporting, 94% overlap, Revenue Share), SlashOps (Sales Automation, 91% overlap, Discount Swap), ChurnGuard (Customer Success, 89% overlap, Flat Fee), Driftly (Conversational Marketing, 87% overlap, Revenue Share), PipelineIQ (Sales Intelligence, 86% overlap, Revenue Share), Delve (Data Analytics, 84% overlap, Discount Swap), Campaignly (Email Marketing, 72% overlap, Flat Fee).
- Marketplace companies (discovery): Metricly (Product Analytics, 91%), OnboardPro (User Onboarding, 88%), RevStack (Revenue Ops, 85%), FormHive (Form Builder, 82%), SegmentAI (Data Segmentation, 81%), SupportHive (Help Desk, 79%), CodeShip (DevOps, 68%), HirePulse (HR Tech, 58%).
- Pending: FormHive (Form Builder, 82% — inbound request), Metricly (91% — outbound invite).
- Deal types: Revenue Share (percentage of conversions), Discount Swap (mutual exclusive discounts), Flat Fee (fixed price per qualified signup).
- Campaign types: Co-branded Email, Landing Page Bundle, In-App Cross-Promo.
- Overlap scores should make logical sense — companies in adjacent SaaS categories (analytics, success, sales) have higher overlap with a messaging platform than unrelated categories (HR, DevOps).
- The app should feel like a real, lived-in product — not an empty shell. Every partnership, campaign, and metric should tell a coherent story.
---
IMPORTANT NOTES:
- The landing page should feel premium and conversion-focused — think Intercom or Loops marketing pages.
- The dashboard and app pages should feel like a real SaaS product with rich, dense data — think Linear or Notion.
- Charts should use the app color palette (blue for primary data, teal for secondary, emerald for success, amber for warning, gray for benchmarks).
- Ensure all data is internally consistent — the same partner names, overlap scores, revenue figures, and campaign metrics should make sense across all pages. A partner that shows $5,240 revenue on the dashboard should show the same on the partnerships page and in the analytics table.
- Make the site fully responsive — mobile, tablet, desktop.
- Overlap scores should be visually prominent — use progress rings, colored bars, or large percentage displays so you can scan partnership quality at a glance.
- Use framer-motion sparingly: landing page scroll reveals, animated counters, hover effects on cards. Don't animate page transitions or sidebar toggles.
- All select dropdowns and dialog modals should use shadcn/ui components styled to match the dark theme (dark backgrounds, white/10 borders).
- If any page is too complex, prioritize in this order: (1) Dashboard, (2) Partner Discovery, (3) Active Partnerships, (4) Landing Page, (5) Analytics.
Use these one at a time after the initial app generates. Paste each into Base44's chat.
Refine the visual design across all pages. Make card borders more subtle (reduce opacity to ~0.04). Add a subtle blue/cyan radial glow behind the hero section headline on the landing page. Ensure all status badges are pill-shaped with rounded corners and consistent padding. Add hover effects on all clickable cards that slightly brighten the border color and add a subtle translateY(-2px) lift. Make sure the sidebar has a subtle separator line between the nav items and the company profile at the bottom. Ensure the active sidebar item has a blue left border accent (3px) and slightly brighter background. Overlap score displays should be visually prominent — use teal for 80%+, amber for 60-79%, and slate for below 60%. Deal type badges should have distinct colors — blue for Revenue Share, amber for Discount Swap, emerald for Flat Fee. All partner avatar circles should have a colored ring matching their overlap tier.
Add proper chart visualizations on the Analytics page using Recharts. Create: (1) A dual-line chart for "Referred Signups Over Time" showing signups in (blue) and signups out (teal) over 6 months — both trending sharply upward. (2) A donut chart for "Revenue by Partner" with each partner in a different colour from the palette, with "$47,620 this month" in the center. (3) A bar chart for "Monthly Partner Revenue" showing monthly bars in blue gradient from Sep ($8,420) to Feb ($47,620). (4) A horizontal bar chart for "Channel Performance" with co-branded email, landing page bundle, and in-app cross-promo bars in blue, teal, and amber respectively. On the Dashboard page, add small sparkline trend indicators inside each of the 4 metric cards showing positive trends over the last 30 days. On the Partnerships page, add small progress bars on each campaign showing signup progress toward the goal. All charts should use the dark theme — transparent backgrounds, white/gray axis labels, and the app accent colors.
Add subtle scroll-triggered fade-in animations to the landing page using framer-motion. The hero headline should fade up on page load (opacity 0→1, translateY 20→0, 0.6s duration). The "How It Works" step cards should stagger in as the user scrolls (each card 150ms after the previous). The feature cards should fade in with a slight scale effect (0.95→1). The floating stats card in the hero should have a count-up number animation when it enters the viewport. The testimonial cards should slide up from below with stagger. Add a subtle pulsing glow effect on the blue CTA buttons. The partner logo row (if present) should fade in as a group.
Ensure full mobile responsiveness across all pages. The landing page navigation should collapse to a hamburger menu on screens under 768px. The sidebar on app pages should collapse to a slide-in overlay triggered by a hamburger icon on mobile. All card grids (metric cards, partner cards, partnership cards) should stack to single column on phone screens. Charts should be horizontally scrollable on mobile with a subtle scroll indicator. The partner discovery grid should stack to a single column on mobile with full-width cards. The partnership detail cards should display all sections vertically. Font sizes should scale down gracefully (hero headline text-3xl on mobile). Touch targets on mobile should be at least 44px. Filter bars on the Discover page should become vertically stacked dropdowns on mobile.
Add overlap score progress rings on all partner cards throughout the app — a small circular progress indicator using teal fill for high overlap (80%+), amber for medium (60-79%), and slate for low (<60%). In the Active Partnerships page, add clear visual hierarchy between the three deal types: Revenue Share cards have a blue left border, Discount Swap cards have an amber left border, and Flat Fee cards have an emerald left border. Show a subtle highlight animation when hovering over "Launch New Campaign" and "Invite to Partner" buttons. Campaign progress bars should have gradient fills (blue to teal). Add small type icons next to each campaign: mail icon for co-branded email, globe for landing page bundle, monitor for in-app cross-promo. In the dashboard activity feed, add small colored icons next to each item: teal zap for campaigns, blue users for new matches, emerald dollar for payouts, amber alert for expiring terms.
Add a subtle "Demo Mode" indicator in the top-right corner of every app page (not the landing page). It should be a small pill badge with a blue outline and the text "Demo Mode" in light gray, fixed-position so it stays visible while scrolling. Next to it, show "Relay · Customer Messaging" in small muted text.
When any non-functional button is clicked (like filter dropdowns that don't filter, "Edit Terms", "Message Partner", "Approve" on pending actions, etc.), show a small toast notification that slides in from the bottom-right corner saying "This feature is available in the full version." The toast should auto-dismiss after 3 seconds and have a dark background with white text and a subtle blue left border. When "Invite to Partner" is clicked on a discovery card, show a success toast: "Partnership invitation sent to [company name]!" with a teal left border and a checkmark icon. After the invite, the card's status badge should change to "Invited — Awaiting Response."
Make the overlap scores more visually impactful across the app. On Partner Discovery cards, show the overlap score as a large circular progress ring with the percentage in the center — teal (#14B8A6) fill for 80%+, amber (#F59E0B) for 60-79%, slate for below 60%. Add a subtle animated fill-in on the progress ring when cards scroll into view. On the Active Partnerships page, show a small overlap score pill next to each partner name. On the Analytics page partner table, add small colored dots next to each overlap score. In the Dashboard "Top Partners" card, show mini overlap badges next to each partner name. The overlap ring should have a subtle glow effect for scores above 90% to make top matches stand out.