From 8ef85351e505b860c61111c64f67bbe699359738 Mon Sep 17 00:00:00 2001 From: Brian O'Kelley Date: Sun, 17 Aug 2025 14:04:57 -0400 Subject: [PATCH] Improve homepage storytelling with authentic content - Remove all fictional statistics, quotes, and case studies - Replace with honest messaging about protocol capabilities - Add clear problem statement and vision - Include 'How It Works' section with real examples - Minimize emoji usage for professional appearance - Focus on community and open development Fixes #29 --- src/pages/index.module.css | 455 ++++++++++++++++++++++++++++++++- src/pages/index.tsx | 501 +++++++++++++++++++++++-------------- 2 files changed, 766 insertions(+), 190 deletions(-) diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9f71a5da77..24800c3d6f 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -4,15 +4,85 @@ */ .heroBanner { - padding: 4rem 0; + padding: 6rem 0; text-align: center; position: relative; overflow: hidden; + background: linear-gradient(135deg, var(--ifm-color-primary-darkest) 0%, var(--ifm-color-primary) 100%); + color: white; +} + +.heroTitle { + font-size: 3.5rem; + font-weight: 800; + line-height: 1.2; + margin-bottom: 1.5rem; + color: white; +} + +.heroSubtitle { + font-size: 1.4rem; + line-height: 1.6; + margin-bottom: 3rem; + color: rgba(255, 255, 255, 0.9); +} + +.heroSubtitle strong { + color: white; + font-weight: 700; +} + +.heroPoints { + display: flex; + justify-content: center; + gap: 3rem; + margin: 3rem 0; +} + +.point { + display: flex; + align-items: center; + gap: 1rem; + text-align: left; +} + +.pointIcon { + font-size: 2rem; + flex-shrink: 0; +} + +.pointText { + color: rgba(255, 255, 255, 0.9); + font-size: 0.95rem; + line-height: 1.4; +} + +.pointText strong { + color: white; + display: block; + font-size: 1.05rem; + margin-bottom: 0.25rem; } @media screen and (max-width: 996px) { .heroBanner { - padding: 2rem; + padding: 4rem 1rem; + } + + .heroTitle { + font-size: 2rem; + } + + .heroSubtitle { + font-size: 1.1rem; + } + + .heroPoints { + flex-direction: column; + gap: 1.5rem; + align-items: flex-start; + max-width: 400px; + margin: 2rem auto; } } @@ -20,4 +90,385 @@ display: flex; align-items: center; justify-content: center; + gap: 1rem; + margin-top: 2rem; +} + +/* Problem Section */ +.problemSection { + padding: 5rem 0; + background: var(--ifm-background-color); +} + +.sectionTitle { + font-size: 2.5rem; + font-weight: 700; + text-align: center; + margin-bottom: 3rem; + line-height: 1.3; +} + +.sectionSubtitle { + font-size: 1.2rem; + text-align: center; + margin-bottom: 3rem; + color: var(--ifm-color-emphasis-700); + line-height: 1.6; +} + +.problemContent { + max-width: 1000px; + margin: 0 auto; +} + +.problemGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.problemCard { + background: var(--ifm-card-background-color); + padding: 2rem; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.2s; +} + +.problemCard:hover { + transform: translateY(-4px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); +} + +.problemIntro { + font-size: 1.15rem; + text-align: center; + margin-bottom: 3rem; + color: var(--ifm-color-emphasis-700); + line-height: 1.6; + max-width: 800px; + margin-left: auto; + margin-right: auto; +} + +.problemCard h3 { + font-size: 1.3rem; + margin-bottom: 1rem; + color: var(--ifm-heading-color); +} + +.problemCard p { + color: var(--ifm-color-emphasis-700); + line-height: 1.6; +} + +.visionStatement { + background: var(--ifm-color-emphasis-100); + padding: 2rem; + border-radius: 8px; + margin-top: 3rem; + text-align: center; +} + +.visionStatement p { + font-size: 1.15rem; + line-height: 1.7; + margin: 0; + color: var(--ifm-color-emphasis-800); +} + +.visionStatement strong { + color: var(--ifm-color-primary); +} + +/* Solution Section */ +.solutionSection { + padding: 5rem 0; + background: var(--ifm-color-emphasis-50); +} + +.comparisonTable { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + margin: 3rem 0; +} + +.comparisonColumn { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.comparisonColumn h3 { + font-size: 1.5rem; + margin-bottom: 1.5rem; + text-align: center; +} + +.comparisonList { + list-style: none; + padding: 0; + margin: 0; +} + +.comparisonList li { + padding: 0.75rem 0; + padding-left: 2rem; + position: relative; + line-height: 1.6; +} + +.comparisonList li::before { + position: absolute; + left: 0; + font-size: 1.2rem; +} + +.comparisonList li.negative::before { + content: "✗"; + color: #dc3545; +} + +.comparisonList li.positive::before { + content: "✓"; + color: #28a745; +} + +.demoSection { + margin-top: 4rem; + padding-top: 3rem; + border-top: 1px solid var(--ifm-color-emphasis-200); +} + +.demoSection h3 { + text-align: center; + font-size: 1.8rem; + margin-bottom: 2rem; +} + +.demoComparison { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +.demoBox { + background: var(--ifm-background-color); + padding: 2rem; + border-radius: 8px; + border: 2px solid var(--ifm-color-emphasis-200); +} + +.demoBox h4 { + margin-bottom: 1rem; + color: var(--ifm-heading-color); +} + +.codeBlock { + display: block; + font-family: var(--ifm-font-family-monospace); + font-size: 0.9rem; + line-height: 1.8; + color: var(--ifm-color-emphasis-700); +} + +.success { + color: #28a745; + font-weight: bold; +} + +/* How It Works Section */ +.howItWorksSection { + padding: 5rem 0; + background: var(--ifm-background-color); +} + +.workflowSteps { + display: grid; + gap: 3rem; + margin-top: 3rem; +} + +.step { + display: flex; + gap: 2rem; + align-items: flex-start; +} + +.stepNumber { + background: var(--ifm-color-primary); + color: white; + width: 48px; + height: 48px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + font-weight: bold; + flex-shrink: 0; +} + +.stepContent { + flex: 1; +} + +.stepContent h3 { + font-size: 1.4rem; + margin-bottom: 1rem; + color: var(--ifm-heading-color); +} + +.stepContent p { + color: var(--ifm-color-emphasis-700); + line-height: 1.6; + margin-bottom: 1rem; +} + +.exampleCode { + display: block; + background: var(--ifm-color-emphasis-100); + padding: 1rem; + border-radius: 6px; + font-family: var(--ifm-font-family-monospace); + font-size: 0.9rem; + color: var(--ifm-color-emphasis-800); + line-height: 1.6; +} + +/* Get Started Section */ +.getStartedSection { + padding: 5rem 0; + background: linear-gradient(135deg, var(--ifm-color-primary-lighter) 0%, var(--ifm-color-primary-lightest) 100%); +} + +.audienceCards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 3rem; + margin-top: 3rem; +} + +.audienceCard { + background: white; + padding: 2.5rem; + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); +} + +.audienceCard h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: var(--ifm-heading-color); +} + +.audienceDescription { + font-size: 1.05rem; + color: var(--ifm-color-emphasis-700); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.audienceList { + list-style: none; + padding: 0; + margin: 0 0 2rem 0; +} + +.audienceList li { + padding: 0.5rem 0; + padding-left: 1.5rem; + position: relative; + color: var(--ifm-color-emphasis-700); +} + +.audienceList li::before { + content: "→"; + position: absolute; + left: 0; + color: var(--ifm-color-primary); + font-weight: bold; +} + +.audienceAction { + text-align: center; + padding-top: 1.5rem; + border-top: 1px solid var(--ifm-color-emphasis-200); +} + +.actionSubtext { + margin-top: 0.5rem; + font-size: 0.85rem; + color: var(--ifm-color-emphasis-600); +} + +/* Community Section */ +.communitySection { + padding: 5rem 0; + background: var(--ifm-background-color); +} + +.communityDescription { + font-size: 1.1rem; + color: var(--ifm-color-emphasis-700); + margin-bottom: 3rem; + line-height: 1.6; +} + +.communityFeatures { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin: 3rem 0; +} + +.communityFeature { + text-align: center; +} + +.communityFeature h3 { + font-size: 1.2rem; + margin-bottom: 1rem; + color: var(--ifm-heading-color); +} + +.communityFeature p { + color: var(--ifm-color-emphasis-700); + line-height: 1.6; +} + +.communityActions { + margin: 3rem 0; +} + + +/* Responsive adjustments */ +@media screen and (max-width: 768px) { + .comparisonTable { + grid-template-columns: 1fr; + } + + .demoComparison { + grid-template-columns: 1fr; + } + + .audienceCards { + grid-template-columns: 1fr; + } + + .logoGrid { + grid-template-columns: repeat(2, 1fr); + } + + .step { + flex-direction: column; + text-align: center; + } + + .stepNumber { + margin: 0 auto; + } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b9bb282272..c68edec715 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,65 +10,109 @@ import styles from './index.module.css'; function HomepageHeader() { const {siteConfig} = useDocusaurusContext(); return ( -
+
- - AI-Powered Advertising Workflows - -

- Open standards that enable AI assistants to interact with advertising platforms through natural language -

-
- - Get Started 🚀 - +
+
+ + One protocol for every advertising platform + +

+ Stop jumping between dozens of different interfaces. +
+ AdCP unifies advertising workflows with a single, open standard. +

+
+
+
🔌
+
+ Universal Interface +
+ Connect once, work everywhere +
+
+
+
💬
+
+ Natural Language +
+ Describe what you want in plain English +
+
+
+
🔓
+
+ Open Standard +
+ No vendor lock-in, total flexibility +
+
+
+
+ + Start Building + + + View on GitHub + +
+
); } -function ValueProposition() { +function TheProblem() { return ( -
+
-
-
- Transform How You Work with Advertising Data -

- Instead of navigating complex interfaces across multiple platforms, - simply describe what you want in natural language. +

+
+ + Why we built AdCP + +

+ The advertising ecosystem is fragmented. Every platform has its own API, + its own workflow, its own reporting format. Media buyers and agencies waste + countless hours navigating this complexity.

-
-
-
- -
-
-
-
-

🗣️ Natural Language

-
-
-

- "Find high-income sports enthusiasts interested in premium running gear, - activate them on Scope3, and set up daily reporting." -

-
-
-
-
-
-
-

🤖 AI-Powered

+
+
+

The Integration Problem

+

+ Each new platform requires custom integration work. APIs change, + documentation varies, and maintenance never ends. Teams spend more + time on plumbing than on strategy. +

+
+
+

The Discovery Problem

+

+ Inventory is scattered across platforms with different taxonomies + and targeting options. Finding the right audiences means learning + multiple systems and manually comparing options. +

+
+
+

The Automation Problem

+

+ AI agents and automation tools can't easily interact with advertising + platforms. Each integration is bespoke, limiting the potential of + AI-powered workflows. +

+
-
+

- Your AI assistant handles the technical complexity: audience discovery, - pricing comparison, activation, and automated reporting. + We believe there's a better way. A single protocol that any platform + can implement and any tool can use. An open standard that makes advertising + technology work together, not against each other.

@@ -79,115 +123,154 @@ function ValueProposition() { ); } -function Benefits() { - const benefits = [ - { - title: '⚡ Faster Workflows', - description: 'Minutes instead of hours to discover and activate audiences across multiple platforms.', - }, - { - title: '🎯 Better Targeting', - description: 'AI-powered relevance scoring helps you find the most suitable audiences for your campaigns.', - }, - { - title: '💰 Transparent Pricing', - description: 'Compare CPM and revenue share models across platforms with clear, upfront pricing.', - }, - { - title: '🔗 Platform Agnostic', - description: 'Works with any compatible platform - no vendor lock-in, maximum flexibility.', - }, - { - title: '📊 Automated Reporting', - description: 'Set up usage tracking and billing reconciliation automatically.', - }, - { - title: '🛡️ Privacy-First', - description: 'Built-in privacy controls and compliance with GDPR, CCPA, and industry standards.', - }, - ]; - +function TheSolution() { return ( -
-
-
- Why Ad Context Protocol? -

Built for the future of advertising technology

-
+
+
- {benefits.map((benefit, idx) => ( -
-
-

{benefit.title}

-

{benefit.description}

+
+ + One protocol. Every platform. Total control. + +

+ AdCP is the open standard that unifies advertising workflows across all platforms. +
+ Think of it as the USB-C of advertising technology. +

+ +
+
+

Before AdCP

+
    +
  • 15+ different platform APIs
    • +
  • Months of custom integration
    • +
  • Manual data reconciliation
    • +
  • Fragmented reporting
    • +
  • Vendor lock-in
    • +
+
+
+

With AdCP

+
    +
  • One unified interface
    • +
  • Deploy in days
    • +
  • Automated workflows
    • +
  • Consolidated analytics
    • +
  • Complete flexibility
    • +
- ))} + +
+

See the difference

+
+
+

Traditional Workflow

+ + 1. Log into Platform A
+ 2. Search for audiences (30 min)
+ 3. Export to spreadsheet
+ 4. Log into Platform B
+ 5. Manually recreate targeting
+ 6. Wait for approval (2 days)
+ 7. Repeat for 10 more platforms... + +
+
+

AdCP Workflow

+ + "Find sports enthusiasts with
+ high purchase intent, compare
+ prices across all platforms,
+ and activate the best option."
+
+ ✓ Done in minutes + +
+
+
+
); } -function UseCases() { +function HowItWorks() { return ( -
+
-
- Real-World Use Cases -
-
-
-
-

🏃‍♀️ Performance Marketing

-
-
-

- "Find audiences likely to convert for our fitness app, with historical performance - data showing 3%+ conversion rates." -

-
    -
  • AI discovers high-converting audiences
    • -
  • Transparent pricing across platforms
    • -
  • Automated performance tracking
    • -
-
-
-
-
-
-
-

🏢 B2B Campaigns

+
+ + How AdCP works + +

+ Built on the Model Context Protocol (MCP), AdCP provides a unified interface + for advertising operations across any platform. +

+ +
+
+
1
+
+

Discovery

+

+ Use natural language to describe your target audience. + AdCP searches across all connected platforms to find + matching inventory and audiences. +

+ + "Find sports enthusiasts interested in running gear" + +
-
-

- "Target CFOs at mid-market companies who are evaluating financial software - solutions in the next 6 months." -

-
    -
  • Professional targeting capabilities
    • -
  • Intent-based audience discovery
    • -
  • Account-based marketing support
    • -
+ +
+
2
+
+

Comparison

+

+ Get standardized results from all platforms in a consistent + format. Compare pricing, reach, and targeting capabilities + side by side. +

+ + Platform A: $12 CPM • 2.3M reach
+ Platform B: $18 CPM • 4.1M reach
+ Platform C: $9 CPM • 1.8M reach + +
-
-
-
-
-
-

🌟 Brand Awareness

+ +
+
3
+
+

Activation

+

+ Launch campaigns across multiple platforms with a single + command. AdCP handles the technical details while maintaining + platform-specific optimizations. +

+ + "Activate on Platform B with $10,000 budget" + +
-
-

- "Launch our luxury watch campaign to affluent millennials interested in - premium lifestyle brands across US and Canada." -

-
    -
  • Geographic targeting capabilities
    • -
  • Demographic and interest layering
    • -
  • Cross-platform reach optimization
    • -
+ +
+
4
+
+

Management

+

+ Monitor performance, adjust budgets, and generate reports + across all platforms from one interface. Set up automated + rules and alerts. +

+ + "Show performance metrics for all active campaigns" + +
@@ -199,32 +282,55 @@ function UseCases() { function GetStarted() { return ( -
-
+
+
-
- For Platform Providers -

Enable AI-powered workflows for your customers:

-
    -
  • Implement the open standard protocols
    • -
  • Get certified for quality assurance
    • -
  • Join the growing ecosystem
    • -
- - View on GitHub - -
-
- For Advertisers & Agencies -

Transform your advertising workflows:

-
    -
  • Connect AdCP-enabled platforms to your AI assistant
    • -
  • Start using natural language for campaigns
    • -
  • Reduce manual work and increase efficiency
    • -
- - Get Started - +
+ + Ready to join the revolution? + +

+ Whether you're a platform provider or an advertiser, + AdCP is your path to the future of advertising. +

+ +
+
+

Platform Providers

+

+ Make your inventory accessible to every AI assistant and automation platform. +

+
    +
  • Enable AI-powered workflows for your inventory
    • +
  • Simplify integration with a standard protocol
    • +
  • Reach new customers through automation platforms
    • +
+
+ + Explore the Spec + +

Open source • MIT licensed

+
+
+ +
+

Advertisers & Agencies

+

+ Start using natural language to manage campaigns across all platforms. +

+
    +
  • Manage campaigns with natural language
    • +
  • Access unified analytics across platforms
    • +
  • Build on open standards, avoid vendor lock-in
    • +
+
+ + Start Building Today + +

Documentation & guides

+
+
+
@@ -234,30 +340,49 @@ function GetStarted() { function CommunityAndSupport() { return ( -
+
-
- Join the Community -

Help shape the future of advertising technology

-
-
-
-
-

🤝 Working Group

+
+ + Join the conversation + +

+ AdCP is an open standard developed in collaboration with the advertising + community. We're building this together, and your input matters. +

+ +
+
+

Open Development

- Monthly meetings with industry leaders, platform providers, and innovators - building the next generation of advertising standards. + All development happens in the open on GitHub. + Watch progress, submit issues, and contribute code. +

+
+
+

Working Group

+

+ Join monthly meetings to discuss protocol evolution, + implementation challenges, and future directions.

-
- - Join Working Group - - - GitHub Discussions - -
+
+

Implementation Support

+

+ Get help implementing AdCP for your platform or + building tools that use the protocol. +

+
+
+ +
+ + Star on GitHub + + + Join Discussions +
@@ -270,13 +395,13 @@ export default function Home(): ReactNode { const {siteConfig} = useDocusaurusContext(); return ( + title="AdCP - Open Standard for Advertising Workflows" + description="AdCP is an open protocol that unifies advertising platforms through a single interface, enabling natural language interactions and automated workflows.">
- - - + + +