Spaces:

JayStormX8
/

ai-growth-vc-method

Running

App Files Files Community

ai-growth-vc-method / index.html

JayStormX8

Add 3 files

1d82fff verified 11 days ago

raw

history blame contribute delete

74.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GrowthOps AI - Your AI Growth Co-Pilot</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
	<style>
	.gradient-bg {
	background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
	}
	.card-hover {
	transition: all 0.3s ease;
	}
	.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}
	.matrix-cell {
	width: 150px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 8px;
	font-weight: bold;
	color: white;
	}
	.animate-pulse {
	animation: pulse 2s infinite;
	}
	@keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
	}
	.slide-down {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
	}
	.slide-down.active {
	max-height: 1000px;
	transition: max-height 0.5s ease-in;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans" x-data="app()">
	<!-- Navbar -->
	<nav class="bg-white shadow-lg">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between h-16">
	<div class="flex items-center">
	<div class="flex-shrink-0 flex items-center">
	<i class="fas fa-rocket text-purple-600 text-2xl mr-2"></i>
	<span class="text-xl font-bold text-gray-900">GrowthOps AI</span>
	</div>
	</div>
	<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
	<a href="#vc-playbooks" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">VC Playbooks</a>
	<a href="#bcg-engine" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">BCG Engine</a>
	<a href="#moonshot" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Moonshot</a>
	<a href="#ai-lab" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">AI Lab</a>
	<button @click="openApiModal = true" class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700 transition">
	<i class="fas fa-key mr-1"></i> API Key
	</button>
	</div>
	<div class="-mr-2 flex items-center md:hidden">
	<button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</div>
	<!-- Mobile menu -->
	<div class="md:hidden slide-down" :class="{ 'active': mobileMenuOpen }">
	<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
	<a href="#vc-playbooks" class="text-gray-900 hover:text-purple-600 block px-3 py-2 rounded-md text-base font-medium">VC Playbooks</a>
	<a href="#bcg-engine" class="text-gray-900 hover:text-purple-600 block px-3 py-2 rounded-md text-base font-medium">BCG Engine</a>
	<a href="#moonshot" class="text-gray-900 hover:text-purple-600 block px-3 py-2 rounded-md text-base font-medium">Moonshot</a>
	<a href="#ai-lab" class="text-gray-900 hover:text-purple-600 block px-3 py-2 rounded-md text-base font-medium">AI Lab</a>
	<button @click="openApiModal = true; mobileMenuOpen = false" class="bg-purple-600 text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-purple-700 transition w-full">
	<i class="fas fa-key mr-1"></i> API Key
	</button>
	</div>
	</div>
	</nav>

	<!-- API Key Modal -->
	<div x-show="openApiModal" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
	<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
	<div @click="openApiModal = false" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
	<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
	<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
	<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
	<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modal-title">
	<i class="fas fa-key mr-2"></i> Enter Your DeepSeek API Key
	</h3>
	<div class="mt-2">
	<input x-model="apiKey" type="password" class="shadow-sm focus:ring-purple-500 focus:border-purple-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 border" placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
	<p class="mt-2 text-sm text-gray-500">
	Your API key is stored locally in your browser and never sent to our servers.
	</p>
	</div>
	</div>
	<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
	<button @click="openApiModal = false; saveApiKey()" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
	Save Key
	</button>
	<button @click="openApiModal = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
	Cancel
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Hero Section -->
	<div class="gradient-bg text-white py-20">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center">
	<h1 class="text-4xl md:text-6xl font-bold mb-6">Your AI Growth Co-Pilot</h1>
	<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
	Combine VC frameworks, BCG strategy engines, and Elon's first principles into one powerful growth system.
	</p>
	<div class="flex flex-col sm:flex-row justify-center gap-4">
	<a href="#vc-playbooks" class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold text-lg transition">
	<i class="fas fa-play mr-2"></i> Start Growing
	</a>
	<a href="#ai-lab" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-lg font-bold text-lg transition">
	<i class="fas fa-flask mr-2"></i> Try AI Lab
	</a>
	</div>
	</div>
	</div>
	</div>

	<!-- VC Growth Playbooks Section -->
	<section id="vc-playbooks" class="py-16 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-gray-900 mb-4">
	<i class="fas fa-chart-line text-purple-600 mr-2"></i> VC Growth Playbooks
	</h2>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">
	Proven startup growth systems used by top venture-backed companies
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
	<!-- Market Expansion Card -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover">
	<div class="text-purple-600 text-3xl mb-4">
	<i class="fas fa-globe"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">Market Expansion</h3>
	<p class="text-gray-600 mb-4">
	Identify and execute on new market opportunities with data-driven strategies.
	</p>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Current Stage</label>
	<select x-model="marketExpansion.stage" class="w-full border border-gray-300 rounded-md px-3 py-2">
	<option value="pre-launch">Pre-Launch</option>
	<option value="early-traction">Early Traction</option>
	<option value="scaling">Scaling</option>
	<option value="mature">Mature</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Target Markets</label>
	<input x-model="marketExpansion.markets" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. US, Europe, Asia">
	</div>
	<button @click="generateVcPlan('marketExpansion')" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition flex items-center justify-center">
	<span x-show="!marketExpansion.loading">Generate Plan</span>
	<span x-show="marketExpansion.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Generating...
	</span>
	</button>
	<div x-show="marketExpansion.result" class="mt-4 p-4 bg-white rounded-lg border border-gray-200">
	<h4 class="font-bold mb-2">Your Market Expansion Plan:</h4>
	<div x-html="marketExpansion.result" class="prose max-w-none"></div>
	<button @click="downloadPlan('Market Expansion Plan', marketExpansion.result)" class="mt-3 text-sm text-purple-600 hover:text-purple-800 flex items-center">
	<i class="fas fa-download mr-1"></i> Download Plan
	</button>
	</div>
	</div>

	<!-- Product Iteration Card -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover">
	<div class="text-purple-600 text-3xl mb-4">
	<i class="fas fa-cogs"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">Product Iteration</h3>
	<p class="text-gray-600 mb-4">
	Build products users love with rapid experimentation and feedback loops.
	</p>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Product Type</label>
	<select x-model="productIteration.type" class="w-full border border-gray-300 rounded-md px-3 py-2">
	<option value="b2b">B2B</option>
	<option value="b2c">B2C</option>
	<option value="marketplace">Marketplace</option>
	<option value="saas">SaaS</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Key Challenges</label>
	<input x-model="productIteration.challenges" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. retention, onboarding">
	</div>
	<button @click="generateVcPlan('productIteration')" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition flex items-center justify-center">
	<span x-show="!productIteration.loading">Generate Plan</span>
	<span x-show="productIteration.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Generating...
	</span>
	</button>
	<div x-show="productIteration.result" class="mt-4 p-4 bg-white rounded-lg border border-gray-200">
	<h4 class="font-bold mb-2">Your Product Iteration Plan:</h4>
	<div x-html="productIteration.result" class="prose max-w-none"></div>
	<button @click="downloadPlan('Product Iteration Plan', productIteration.result)" class="mt-3 text-sm text-purple-600 hover:text-purple-800 flex items-center">
	<i class="fas fa-download mr-1"></i> Download Plan
	</button>
	</div>
	</div>

	<!-- Demand Generation Card -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover">
	<div class="text-purple-600 text-3xl mb-4">
	<i class="fas fa-bullhorn"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">Demand Generation</h3>
	<p class="text-gray-600 mb-4">
	Create predictable, scalable demand for your product or service.
	</p>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Budget Level</label>
	<select x-model="demandGeneration.budget" class="w-full border border-gray-300 rounded-md px-3 py-2">
	<option value="bootstrapped">Bootstrapped ($0-$5k)</option>
	<option value="seed">Seed ($5k-$50k)</option>
	<option value="series-a">Series A ($50k-$500k)</option>
	<option value="growth">Growth ($500k+)</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Target Audience</label>
	<input x-model="demandGeneration.audience" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. CMOs, SMBs">
	</div>
	<button @click="generateVcPlan('demandGeneration')" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition flex items-center justify-center">
	<span x-show="!demandGeneration.loading">Generate Plan</span>
	<span x-show="demandGeneration.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Generating...
	</span>
	</button>
	<div x-show="demandGeneration.result" class="mt-4 p-4 bg-white rounded-lg border border-gray-200">
	<h4 class="font-bold mb-2">Your Demand Generation Plan:</h4>
	<div x-html="demandGeneration.result" class="prose max-w-none"></div>
	<button @click="downloadPlan('Demand Generation Plan', demandGeneration.result)" class="mt-3 text-sm text-purple-600 hover:text-purple-800 flex items-center">
	<i class="fas fa-download mr-1"></i> Download Plan
	</button>
	</div>
	</div>

	<!-- Capital Optimization Card -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover">
	<div class="text-purple-600 text-3xl mb-4">
	<i class="fas fa-coins"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">Capital Optimization</h3>
	<p class="text-gray-600 mb-4">
	Maximize your runway and capital efficiency for sustainable growth.
	</p>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Funding Stage</label>
	<select x-model="capitalOptimization.stage" class="w-full border border-gray-300 rounded-md px-3 py-2">
	<option value="pre-seed">Pre-Seed</option>
	<option value="seed">Seed</option>
	<option value="series-a">Series A</option>
	<option value="series-b">Series B+</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Current Burn Rate</label>
	<input x-model="capitalOptimization.burn" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. $50k/month">
	</div>
	<button @click="generateVcPlan('capitalOptimization')" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition flex items-center justify-center">
	<span x-show="!capitalOptimization.loading">Generate Plan</span>
	<span x-show="capitalOptimization.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Generating...
	</span>
	</button>
	<div x-show="capitalOptimization.result" class="mt-4 p-4 bg-white rounded-lg border border-gray-200">
	<h4 class="font-bold mb-2">Your Capital Optimization Plan:</h4>
	<div x-html="capitalOptimization.result" class="prose max-w-none"></div>
	<button @click="downloadPlan('Capital Optimization Plan', capitalOptimization.result)" class="mt-3 text-sm text-purple-600 hover:text-purple-800 flex items-center">
	<i class="fas fa-download mr-1"></i> Download Plan
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- BCG Strategy Engine Section -->
	<section id="bcg-engine" class="py-16 bg-gray-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-gray-900 mb-4">
	<i class="fas fa-chess-board text-purple-600 mr-2"></i> BCG Strategy Engine
	</h2>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">
	Diagnose business health and plot strategic scaling moves like a top consultant
	</p>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
	<!-- Growth-Share Matrix -->
	<div class="bg-white rounded-xl p-6 shadow-md card-hover lg:col-span-2">
	<h3 class="text-xl font-bold text-gray-900 mb-4">AI-Powered Growth-Share Matrix</h3>
	<p class="text-gray-600 mb-6">
	Enter your products or services and let AI classify them into Stars, Cash Cows, Dogs, and Question Marks.
	</p>

	<div class="mb-6">
	<label class="block text-sm font-medium text-gray-700 mb-2">Enter Products/Services (one per line)</label>
	<textarea x-model="bcgMatrix.products" rows="4" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="Product 1\nProduct 2\nService 1"></textarea>
	</div>

	<button @click="analyzeBcgMatrix()" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium transition flex items-center">
	<span x-show="!bcgMatrix.loading">Analyze Portfolio</span>
	<span x-show="bcgMatrix.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Analyzing...
	</span>
	</button>

	<div x-show="bcgMatrix.result" class="mt-6">
	<h4 class="font-bold mb-4">Your Growth-Share Matrix:</h4>
	<div class="grid grid-cols-2 gap-4">
	<!-- Stars -->
	<div class="matrix-cell bg-yellow-500">
	<div>
	<div class="text-lg">Stars</div>
	<div x-text="bcgMatrix.stars.join(', ') \|\| 'None'" class="text-sm"></div>
	</div>
	</div>
	<!-- Cash Cows -->
	<div class="matrix-cell bg-green-600">
	<div>
	<div class="text-lg">Cash Cows</div>
	<div x-text="bcgMatrix.cows.join(', ') \|\| 'None'" class="text-sm"></div>
	</div>
	</div>
	<!-- Question Marks -->
	<div class="matrix-cell bg-blue-500">
	<div>
	<div class="text-lg">Question Marks</div>
	<div x-text="bcgMatrix.questions.join(', ') \|\| 'None'" class="text-sm"></div>
	</div>
	</div>
	<!-- Dogs -->
	<div class="matrix-cell bg-red-500">
	<div>
	<div class="text-lg">Dogs</div>
	<div x-text="bcgMatrix.dogs.join(', ') \|\| 'None'" class="text-sm"></div>
	</div>
	</div>
	</div>
	<div x-html="bcgMatrix.strategy" class="mt-4 p-4 bg-gray-50 rounded-lg prose max-w-none"></div>
	</div>
	</div>

	<!-- Digital Readiness Assessor -->
	<div class="bg-white rounded-xl p-6 shadow-md card-hover">
	<h3 class="text-xl font-bold text-gray-900 mb-4">Digital Readiness Assessor</h3>
	<p class="text-gray-600 mb-6">
	Evaluate your digital transformation maturity and get a customized roadmap.
	</p>

	<div class="space-y-4">
	<div>
	<label class="flex items-center">
	<input x-model="digitalReadiness.leadership" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
	<span class="ml-2 text-sm text-gray-700">Digital-first leadership mindset</span>
	</label>
	</div>
	<div>
	<label class="flex items-center">
	<input x-model="digitalReadiness.data" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
	<span class="ml-2 text-sm text-gray-700">Data-driven decision making</span>
	</label>
	</div>
	<div>
	<label class="flex items-center">
	<input x-model="digitalReadiness.tech" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
	<span class="ml-2 text-sm text-gray-700">Modern tech infrastructure</span>
	</label>
	</div>
	<div>
	<label class="flex items-center">
	<input x-model="digitalReadiness.talent" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
	<span class="ml-2 text-sm text-gray-700">Digital talent pipeline</span>
	</label>
	</div>
	<div>
	<label class="flex items-center">
	<input x-model="digitalReadiness.customer" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
	<span class="ml-2 text-sm text-gray-700">Digital customer experience</span>
	</label>
	</div>
	</div>

	<button @click="assessDigitalReadiness()" class="mt-6 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium transition flex items-center">
	<span x-show="!digitalReadiness.loading">Assess Readiness</span>
	<span x-show="digitalReadiness.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Assessing...
	</span>
	</button>

	<div x-show="digitalReadiness.result" class="mt-6">
	<h4 class="font-bold mb-2">Your Digital Readiness Score: <span x-text="digitalReadiness.score" class="text-purple-600"></span>/100</h4>
	<div class="w-full bg-gray-200 rounded-full h-4">
	<div class="bg-purple-600 h-4 rounded-full" :style="'width: ' + digitalReadiness.score + '%'"></div>
	</div>
	<div x-html="digitalReadiness.roadmap" class="mt-4 p-4 bg-gray-50 rounded-lg prose max-w-none"></div>
	</div>
	</div>
	</div>

	<!-- Customer Journey Optimizer -->
	<div class="mt-12 bg-white rounded-xl p-6 shadow-md card-hover">
	<h3 class="text-xl font-bold text-gray-900 mb-4">Customer Journey Optimizer</h3>
	<p class="text-gray-600 mb-6">
	Upload or describe your customer touchpoints to identify optimization opportunities.
	</p>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Describe Your Customer Journey</label>
	<textarea x-model="customerJourney.description" rows="6" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="Awareness: Social media ads\nConsideration: Landing page, demo\nPurchase: Checkout flow\nPost-purchase: Onboarding emails, support"></textarea>

	<div class="mt-4">
	<label class="block text-sm font-medium text-gray-700 mb-2">Or Upload Journey Map (CSV)</label>
	<div class="flex items-center">
	<input type="file" @change="handleJourneyUpload" class="hidden" id="journeyUpload">
	<label for="journeyUpload" class="cursor-pointer bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-4 rounded-md font-medium transition">
	<i class="fas fa-upload mr-2"></i> Choose File
	</label>
	<span x-text="customerJourney.fileName \|\| 'No file chosen'" class="ml-2 text-sm text-gray-500"></span>
	</div>
	</div>

	<button @click="optimizeCustomerJourney()" class="mt-6 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium transition flex items-center">
	<span x-show="!customerJourney.loading">Optimize Journey</span>
	<span x-show="customerJourney.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Optimizing...
	</span>
	</button>
	</div>

	<div x-show="customerJourney.result" class="p-4 bg-gray-50 rounded-lg">
	<h4 class="font-bold mb-4">Optimization Opportunities:</h4>
	<div x-html="customerJourney.result" class="prose max-w-none"></div>

	<div class="mt-6 grid grid-cols-2 gap-4">
	<div class="p-3 bg-white rounded-lg border border-purple-200">
	<div class="text-purple-600 mb-1">
	<i class="fas fa-arrow-up"></i> Upsell Moments
	</div>
	<div x-html="customerJourney.upsells" class="text-sm"></div>
	</div>
	<div class="p-3 bg-white rounded-lg border border-red-200">
	<div class="text-red-600 mb-1">
	<i class="fas fa-exclamation-triangle"></i> Churn Risks
	</div>
	<div x-html="customerJourney.churn" class="text-sm"></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Elon Musk Moonshot Planner Section -->
	<section id="moonshot" class="py-16 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-gray-900 mb-4">
	<i class="fas fa-moon text-purple-600 mr-2"></i> Elon Musk Moonshot Planner
	</h2>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">
	Think 10x bigger, break down problems with first principles, and build world-changing ventures
	</p>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
	<!-- First Principles Breakdown -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover">
	<h3 class="text-xl font-bold text-gray-900 mb-4">First Principles Breakdown</h3>
	<p class="text-gray-600 mb-6">
	Deconstruct your challenge into fundamental truths to find innovative solutions.
	</p>

	<div class="mb-6">
	<label class="block text-sm font-medium text-gray-700 mb-2">Describe Your Challenge</label>
	<textarea x-model="firstPrinciples.challenge" rows="4" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. 'Batteries are too expensive for mass EV adoption'"></textarea>
	</div>

	<button @click="breakdownFirstPrinciples()" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium transition flex items-center">
	<span x-show="!firstPrinciples.loading">Break Down Challenge</span>
	<span x-show="firstPrinciples.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Analyzing...
	</span>
	</button>

	<div x-show="firstPrinciples.result" class="mt-6">
	<h4 class="font-bold mb-2">First Principles Breakdown:</h4>
	<div x-html="firstPrinciples.result" class="p-4 bg-white rounded-lg border border-gray-200 prose max-w-none"></div>

	<div class="mt-4">
	<h4 class="font-bold mb-2">Innovative Solutions:</h4>
	<div x-html="firstPrinciples.solutions" class="p-4 bg-white rounded-lg border border-purple-200 prose max-w-none"></div>
	</div>
	</div>
	</div>

	<!-- 10x Mission Generator -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover">
	<h3 class="text-xl font-bold text-gray-900 mb-4">10x Mission Generator</h3>
	<p class="text-gray-600 mb-6">
	Create a world-changing mission statement that inspires your team and customers.
	</p>

	<div class="space-y-4 mb-6">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Market/Industry</label>
	<input x-model="missionGenerator.market" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. renewable energy, education">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Core Problem</label>
	<input x-model="missionGenerator.problem" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. high costs, lack of access">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Your Values</label>
	<input x-model="missionGenerator.values" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. sustainability, equality">
	</div>
	</div>

	<button @click="generateMission()" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium transition flex items-center">
	<span x-show="!missionGenerator.loading">Generate Mission</span>
	<span x-show="missionGenerator.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Creating...
	</span>
	</button>

	<div x-show="missionGenerator.result" class="mt-6">
	<div class="p-6 bg-gradient-to-r from-purple-500 to-indigo-600 rounded-lg text-white">
	<div class="text-xl font-bold mb-2">Your 10x Mission:</div>
	<div x-text="missionGenerator.result" class="text-2xl italic"></div>
	<div class="mt-4 text-sm opacity-80">"The kind of mission that changes industries and inspires generations"</div>
	</div>

	<div class="mt-4 grid grid-cols-2 gap-4">
	<button @click="regenerateMission('bold')" class="bg-white border border-purple-200 hover:bg-purple-50 text-purple-600 py-2 px-4 rounded-md font-medium transition flex items-center justify-center">
	<i class="fas fa-bolt mr-2"></i> More Bold
	</button>
	<button @click="regenerateMission('concise')" class="bg-white border border-purple-200 hover:bg-purple-50 text-purple-600 py-2 px-4 rounded-md font-medium transition flex items-center justify-center">
	<i class="fas fa-scissors mr-2"></i> More Concise
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Speed Audit Bot -->
	<div class="mt-12 bg-gray-50 rounded-xl p-6 shadow-md card-hover">
	<h3 class="text-xl font-bold text-gray-900 mb-4">Speed Audit Bot</h3>
	<p class="text-gray-600 mb-6">
	Identify what's slowing you down and get actionable recommendations to move faster.
	</p>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
	<div>
	<div class="mb-6">
	<label class="block text-sm font-medium text-gray-700 mb-2">What are you trying to launch/ship?</label>
	<input x-model="speedAudit.task" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. new feature, marketing campaign">
	</div>
	<div class="mb-6">
	<label class="block text-sm font-medium text-gray-700 mb-2">Current Timeline</label>
	<input x-model="speedAudit.timeline" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. 3 months, 6 weeks">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Main Bottlenecks (if known)</label>
	<textarea x-model="speedAudit.bottlenecks" rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. design approvals, technical debt"></textarea>
	</div>

	<button @click="runSpeedAudit()" class="mt-6 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium transition flex items-center">
	<span x-show="!speedAudit.loading">Run Speed Audit</span>
	<span x-show="speedAudit.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Auditing...
	</span>
	</button>
	</div>

	<div x-show="speedAudit.result" class="p-4 bg-white rounded-lg border border-gray-200">
	<h4 class="font-bold mb-2">Speed Audit Results:</h4>
	<div class="mb-4">
	<div class="font-medium text-gray-700 mb-1">Potential Timeline:</div>
	<div x-text="speedAudit.optimizedTimeline" class="text-lg text-purple-600 font-bold"></div>
	</div>

	<div class="mb-4">
	<div class="font-medium text-gray-700 mb-1">Key Bottlenecks:</div>
	<div x-html="speedAudit.bottleneckAnalysis" class="prose max-w-none"></div>
	</div>

	<div>
	<div class="font-medium text-gray-700 mb-1">Execution Boosters:</div>
	<div x-html="speedAudit.boosters" class="prose max-w-none"></div>
	</div>
	</div>
	</div>
	</div>

	<!-- Flywheel Creator -->
	<div class="mt-12 bg-gray-50 rounded-xl p-6 shadow-md card-hover">
	<h3 class="text-xl font-bold text-gray-900 mb-4">Flywheel Creator</h3>
	<p class="text-gray-600 mb-6">
	Design a compounding growth engine that builds momentum over time.
	</p>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
	<div>
	<div class="mb-6">
	<label class="block text-sm font-medium text-gray-700 mb-2">Customer Acquisition Engine</label>
	<textarea x-model="flywheel.acquisition" rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="How do you attract new customers?"></textarea>
	</div>
	<div class="mb-6">
	<label class="block text-sm font-medium text-gray-700 mb-2">Retention/Engagement Engine</label>
	<textarea x-model="flywheel.retention" rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="How do you keep customers engaged?"></textarea>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Monetization Engine</label>
	<textarea x-model="flywheel.monetization" rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="How do you generate revenue?"></textarea>
	</div>

	<button @click="createFlywheel()" class="mt-6 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium transition flex items-center">
	<span x-show="!flywheel.loading">Create Flywheel</span>
	<span x-show="flywheel.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Designing...
	</span>
	</button>
	</div>

	<div x-show="flywheel.result" class="p-4 bg-white rounded-lg border border-gray-200">
	<h4 class="font-bold mb-4">Your Growth Flywheel:</h4>

	<div class="flex justify-center mb-6">
	<div class="relative w-64 h-64">
	<!-- Flywheel visualization -->
	<div class="absolute inset-0 rounded-full border-4 border-purple-200 animate-spin" style="animation-duration: 10s;"></div>
	<div class="absolute inset-4 rounded-full border-4 border-purple-300 animate-spin" style="animation-duration: 8s; animation-direction: reverse;"></div>
	<div class="absolute inset-8 rounded-full border-4 border-purple-400 animate-spin" style="animation-duration: 6s;"></div>

	<div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
	<div class="text-xs font-bold text-center">1. <span x-text="flywheel.steps[0]"></span></div>
	</div>
	<div class="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 bg-purple-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
	<div class="text-xs font-bold text-center">2. <span x-text="flywheel.steps[1]"></span></div>
	</div>
	<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 bg-purple-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
	<div class="text-xs font-bold text-center">3. <span x-text="flywheel.steps[2]"></span></div>
	</div>
	<div class="absolute left-0 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
	<div class="text-xs font-bold text-center">4. <span x-text="flywheel.steps[3]"></span></div>
	</div>
	</div>
	</div>

	<div x-html="flywheel.description" class="prose max-w-none"></div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- AI Lab Section -->
	<section id="ai-lab" class="py-16 bg-purple-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-12">
	<h2 class="text-3xl font-bold text-gray-900 mb-4">
	<i class="fas fa-flask text-purple-600 mr-2"></i> AI Lab
	</h2>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">
	Hypergrowth toolkits and automation frameworks for ambitious founders
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
	<!-- AI Pitch Deck Builder -->
	<div class="bg-white rounded-xl p-6 shadow-md card-hover">
	<div class="text-purple-600 text-3xl mb-4">
	<i class="fas fa-file-powerpoint"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">AI Pitch Deck Builder</h3>
	<p class="text-gray-600 mb-4">
	Transform your idea into an investor-ready pitch deck structure.
	</p>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Your Startup Idea</label>
	<textarea x-model="pitchDeck.idea" rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="Describe your business in 1-2 sentences"></textarea>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Target Investors</label>
	<input x-model="pitchDeck.investors" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. Seed VCs, Angels">
	</div>
	<button @click="buildPitchDeck()" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition flex items-center justify-center">
	<span x-show="!pitchDeck.loading">Build Deck</span>
	<span x-show="pitchDeck.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Building...
	</span>
	</button>
	<div x-show="pitchDeck.result" class="mt-4 p-4 bg-gray-50 rounded-lg">
	<h4 class="font-bold mb-2">Pitch Deck Outline:</h4>
	<div x-html="pitchDeck.result" class="prose max-w-none"></div>
	<button @click="downloadPlan('Pitch Deck Outline', pitchDeck.result)" class="mt-3 text-sm text-purple-600 hover:text-purple-800 flex items-center">
	<i class="fas fa-download mr-1"></i> Download Outline
	</button>
	</div>
	</div>

	<!-- Custom OKR Generator -->
	<div class="bg-white rounded-xl p-6 shadow-md card-hover">
	<div class="text-purple-600 text-3xl mb-4">
	<i class="fas fa-bullseye"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">Custom OKR Generator</h3>
	<p class="text-gray-600 mb-4">
	Create company-wide OKRs aligned with your strategic goals.
	</p>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Quarter/Timeframe</label>
	<select x-model="okrs.quarter" class="w-full border border-gray-300 rounded-md px-3 py-2">
	<option value="Q1">Q1</option>
	<option value="Q2">Q2</option>
	<option value="Q3">Q3</option>
	<option value="Q4">Q4</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Top 3 Goals</label>
	<textarea x-model="okrs.goals" rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. Increase revenue, expand to new market"></textarea>
	</div>
	<button @click="generateOKRs()" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition flex items-center justify-center">
	<span x-show="!okrs.loading">Generate OKRs</span>
	<span x-show="okrs.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Generating...
	</span>
	</button>
	<div x-show="okrs.result" class="mt-4 p-4 bg-gray-50 rounded-lg">
	<h4 class="font-bold mb-2">Your OKRs:</h4>
	<div x-html="okrs.result" class="prose max-w-none"></div>
	<button @click="downloadPlan('OKRs ' + okrs.quarter, okrs.result)" class="mt-3 text-sm text-purple-600 hover:text-purple-800 flex items-center">
	<i class="fas fa-download mr-1"></i> Download OKRs
	</button>
	</div>
	</div>

	<!-- Offer Optimizer -->
	<div class="bg-white rounded-xl p-6 shadow-md card-hover">
	<div class="text-purple-600 text-3xl mb-4">
	<i class="fas fa-tag"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">Offer Optimizer</h3>
	<p class="text-gray-600 mb-4">
	Transform your offer using proven copywriting frameworks.
	</p>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Current Offer</label>
	<textarea x-model="offerOptimizer.current" rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="Describe your current offer"></textarea>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Framework</label>
	<select x-model="offerOptimizer.framework" class="w-full border border-gray-300 rounded-md px-3 py-2">
	<option value="PAS">Problem-Agitate-Solve</option>
	<option value="4Ps">4 Ps (Promise, Picture, Proof, Push)</option>
	<option value="AIDA">AIDA (Attention, Interest, Desire, Action)</option>
	<option value="BAB">Before-After-Bridge</option>
	</select>
	</div>
	<button @click="optimizeOffer()" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition flex items-center justify-center">
	<span x-show="!offerOptimizer.loading">Optimize Offer</span>
	<span x-show="offerOptimizer.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Optimizing...
	</span>
	</button>
	<div x-show="offerOptimizer.result" class="mt-4 p-4 bg-gray-50 rounded-lg">
	<h4 class="font-bold mb-2">Optimized Offer (<span x-text="offerOptimizer.framework"></span>):</h4>
	<div x-html="offerOptimizer.result" class="prose max-w-none"></div>
	<button @click="downloadPlan('Optimized Offer', offerOptimizer.result)" class="mt-3 text-sm text-purple-600 hover:text-purple-800 flex items-center">
	<i class="fas fa-download mr-1"></i> Download Offer
	</button>
	</div>
	</div>

	<!-- AI Pricing Engine -->
	<div class="bg-white rounded-xl p-6 shadow-md card-hover">
	<div class="text-purple-600 text-3xl mb-4">
	<i class="fas fa-dollar-sign"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900 mb-3">AI Pricing Engine</h3>
	<p class="text-gray-600 mb-4">
	Get data-driven pricing recommendations for your product.
	</p>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Product Type</label>
	<select x-model="pricingEngine.type" class="w-full border border-gray-300 rounded-md px-3 py-2">
	<option value="saas">SaaS</option>
	<option value="physical">Physical Product</option>
	<option value="service">Service</option>
	<option value="marketplace">Marketplace</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Target Customer</label>
	<input x-model="pricingEngine.customer" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. SMBs, Enterprise">
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Current Price (if any)</label>
	<input x-model="pricingEngine.current" type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="e.g. $99/month">
	</div>
	<button @click="generatePricing()" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition flex items-center justify-center">
	<span x-show="!pricingEngine.loading">Generate Pricing</span>
	<span x-show="pricingEngine.loading" class="flex items-center">
	<i class="fas fa-spinner animate-spin mr-2"></i> Calculating...
	</span>
	</button>
	<div x-show="pricingEngine.result" class="mt-4 p-4 bg-gray-50 rounded-lg">
	<h4 class="font-bold mb-2">Pricing Recommendations:</h4>
	<div x-html="pricingEngine.result" class="prose max-w-none"></div>
	<div class="mt-4">
	<h4 class="font-bold mb-2">Upsell Path:</h4>
	<div x-html="pricingEngine.upsell" class="prose max-w-none"></div>
	</div>
	<button @click="downloadPlan('Pricing Strategy', pricingEngine.result + pricingEngine.upsell)" class="mt-3 text-sm text-purple-600 hover:text-purple-800 flex items-center">
	<i class="fas fa-download mr-1"></i> Download Strategy
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Export Section -->
	<section class="py-16 bg-gradient-to-r from-purple-600 to-indigo-700 text-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
	<h2 class="text-3xl font-bold mb-6">Download Your Billion Dollar Blueprint</h2>
	<p class="text-xl mb-8 max-w-3xl mx-auto">
	Compile all your growth strategies into one comprehensive document.
	</p>

	<div class="flex flex-col sm:flex-row justify-center gap-4">
	<button @click="compileBlueprint('pdf')" class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold text-lg transition flex items-center justify-center">
	<i class="fas fa-file-pdf mr-2"></i> Export as PDF
	</button>
	<button @click="compileBlueprint('json')" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-lg font-bold text-lg transition flex items-center justify-center">
	<i class="fas fa-code mr-2"></i> Export as JSON
	</button>
	<button @click="compileBlueprint('email')" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-lg font-bold text-lg transition flex items-center justify-center">
	<i class="fas fa-envelope mr-2"></i> Email to Me
	</button>
	</div>

	<div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
	<button class="bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-lg font-medium text-sm transition flex items-center justify-center">
	<i class="fab fa-notion mr-2"></i> Save to Notion
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-lg font-medium text-sm transition flex items-center justify-center">
	<i class="fas fa-table mr-2"></i> Save to Airtable
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-lg font-medium text-sm transition flex items-center justify-center">
	<i class="fas fa-user-tie mr-2"></i> Save to CRM
	</button>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white py-12">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-lg font-bold mb-4">GrowthOps AI</h3>
	<p class="text-gray-400">
	Your AI-powered growth co-pilot combining VC frameworks, BCG strategy, and first principles thinking.
	</p>
	</div>
	<div>
	<h3 class="text-lg font-bold mb-4">Resources</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white transition">VC Playbooks</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">BCG Engine</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Moonshot Planner</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">AI Lab</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-lg font-bold mb-4">Company</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-lg font-bold mb-4">Connect</h3>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
	<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a>
	<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a>
	<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-product-hunt"></i></a>
	</div>
	<div class="mt-4">
	<button @click="openApiModal = true" class="text-sm text-purple-400 hover:text-purple-300 flex items-center">
	<i class="fas fa-key mr-1"></i> Manage API Key
	</button>
	</div>
	</div>
	</div>
	<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
	<p>© 2023 GrowthOps AI. All rights reserved.</p>
	</div>
	</div>
	</footer>

	<script>
	function app() {
	return {
	// State management
	mobileMenuOpen: false,
	openApiModal: false,
	apiKey: localStorage.getItem('growthOpsApiKey') \|\| '',

	// VC Growth Playbooks
	marketExpansion: {
	stage: 'early-traction',
	markets: '',
	loading: false,
	result: ''
	},
	productIteration: {
	type: 'saas',
	challenges: '',
	loading: false,
	result: ''
	},
	demandGeneration: {
	budget: 'seed',
	audience: '',
	loading: false,
	result: ''
	},
	capitalOptimization: {
	stage: 'seed',
	burn: '',
	loading: false,
	result: ''
	},

	// BCG Strategy Engine
	bcgMatrix: {
	products: '',
	loading: false,
	result: '',
	stars: [],
	cows: [],
	questions: [],
	dogs: [],
	strategy: ''
	},
	digitalReadiness: {
	leadership: false,
	data: false,
	tech: false,
	talent: false,
	customer: false,
	loading: false,
	result: false,
	score: 0,
	roadmap: ''
	},
	customerJourney: {
	description: '',
	file: null,
	fileName: '',
	loading: false,
	result: '',
	upsells: '',
	churn: ''
	},

	// Elon Musk Moonshot Planner
	firstPrinciples: {
	challenge: '',
	loading: false,
	result: '',
	solutions: ''
	},
	missionGenerator: {
	market: '',
	problem: '',
	values: '',
	loading: false,
	result: ''
	},
	speedAudit: {
	task: '',
	timeline: '',
	bottlenecks: '',
	loading: false,
	result: false,
	optimizedTimeline: '',
	bottleneckAnalysis: '',
	boosters: ''
	},
	flywheel: {
	acquisition: '',
	retention: '',
	monetization: '',
	loading: false,
	result: false,
	steps: ['Acquire', 'Engage', 'Monetize', 'Reinvest'],
	description: ''
	},

	// AI Lab
	pitchDeck: {
	idea: '',
	investors: '',
	loading: false,
	result: ''
	},
	okrs: {
	quarter: 'Q1',
	goals: '',
	loading: false,
	result: ''
	},
	offerOptimizer: {
	current: '',
	framework: 'PAS',
	loading: false,
	result: ''
	},
	pricingEngine: {
	type: 'saas',
	customer: '',
	current: '',
	loading: false,
	result: '',
	upsell: ''
	},

	// Methods
	saveApiKey() {
	localStorage.setItem('growthOpsApiKey', this.apiKey);
	},

	// VC Playbooks Methods
	async generateVcPlan(type) {
	if (!this.validateApiKey()) return;

	this[type].loading = true;
	this[type].result = '';

	try {
	// In a real implementation, this would call the DeepSeek API
	// For demo purposes, we're using a mock response
	const mockResponse = this.getMockVcResponse(type);

	// Simulate API delay
	await new Promise(resolve => setTimeout(resolve, 1500));

	this[type].result = mockResponse;
	} catch (error) {
	console.error('Error generating VC plan:', error);
	this[type].result = '<p class="text-red-500">Error generating plan. Please try again.</p>';
	} finally {
	this[type].loading = false;
	}
	},

	getMockVcResponse(type) {
	const plans = {
	marketExpansion: `
	<h5 class="font-bold mb-2">Market Expansion Roadmap for ${this.marketExpansion.markets \|\| 'target markets'}:</h5>
	<ol class="list-decimal pl-5 space-y-2">
	<li><strong>Market Research Phase (Weeks 1-2):</strong> Conduct competitive analysis and customer segmentation for each target market</li>
	<li><strong>Pilot Launch (Weeks 3-6):</strong> Test minimum viable expansion with localized messaging and basic support</li>
	<li><strong>Metrics to Track:</strong> Customer acquisition cost by market, conversion rates, localization effectiveness</li>
	<li><strong>Full Rollout (Weeks 7-12):</strong> Scale successful pilots with dedicated resources based on performance data</li>
	</ol>
	<div class="mt-4 p-3 bg-yellow-50 border-l-4 border-yellow-400">
	<p class="font-medium">Key Insight:</p>
	<p>Focus on 1-2 high-potential markets first rather than spreading resources too thin. ${this.marketExpansion.markets ? 'For ' + this.marketExpansion.markets.split(',')[0] + ', consider...' : ''}</p>
	</div>
	`,
	productIteration: `
	<h5 class="font-bold mb-2">Product Iteration Framework for ${this.productIteration.type.toUpperCase()} Product:</h5>
	<ul class="list-disc pl-5 space-y-2">
	<li><strong>Feedback Loops:</strong> Implement weekly user interviews and automated in-app feedback collection</li>
	<li><strong>Experimentation Cadence:</strong> Run 2-3 small tests weekly, 1 medium test monthly, and reserve quarterly for major pivots</li>
	<li><strong>Key Metrics:</strong> ${this.productIteration.challenges ? 'For ' + this.productIteration.challenges + ', track...' : 'Track retention, activation, and feature adoption metrics'}</li>
	<li><strong>Prioritization Framework:</strong> Use RICE scoring (Reach, Impact, Confidence, Effort) to rank improvements</li>
	</ul>
	<div class="mt-4 p-3 bg-blue-50 border-l-4 border-blue-400">
	<p class="font-medium">Technical Debt Management:</p>
	<p>Allocate 20% of engineering resources to paying down technical debt to maintain velocity.</p>
	</div>
	`,
	demandGeneration: `
	<h5 class="font-bold mb-2">Demand Generation Playbook for ${this.demandGeneration.budget.replace('-', ' ').toUpperCase()} Budget:</h5>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div class="p-3 bg-green-50 rounded-lg">
	<p class="font-bold mb-1">Top of Funnel:</p>
	<ul class="list-disc pl-5 text-sm">
	<li>Content marketing: 3 pillar posts/month</li>
	<li>LinkedIn outreach: 50 connections/week</li>
	<li>Webinars: 1/month with industry partners</li>
	</ul>
	</div>
	<div class="p-3 bg-purple-50 rounded-lg">
	<p class="font-bold mb-1">Conversion:</p>
	<ul class="list-disc pl-5 text-sm">
	<li>Landing page A/B testing</li>
	<li>Email nurture sequence (5 emails)</li>
	<li>Free trial/demo optimization</li>
	</ul>
	</div>
	</div>
	<div class="mt-4">
	<p class="font-bold">Budget Allocation:</p>
	<p>${this.getBudgetAllocation(this.demandGeneration.budget)}</p>
	</div>
	`,
	capitalOptimization: `
	<h5 class="font-bold mb-2">Capital Optimization Strategy for ${this.capitalOptimization.stage.replace('-', ' ').toUpperCase()} Stage:</h5>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Area</th>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Current</th>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Optimization</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">Headcount</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm">Review current</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm">Hire 2 sales, defer non-critical roles</td>
	</tr>
	<tr>

	</html>