Value Proposition React Component
Component Name: VideoAnalysisValueProp
Purpose: Interactive visualization of business value for CODITECT customers
Technology: React + Tailwind CSS
Deployment: Embed in marketing pages, sales presentations, product demos
Complete React Component
import React, { useState, useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
const VideoAnalysisValueProp = () => {
// State for interactive calculator
const [videosPerMonth, setVideosPerMonth] = useState(500);
const [hoursPerVideo, setHoursPerVideo] = useState(4.0);
const [analystRate, setAnalystRate] = useState(75);
// Calculated metrics
const manualCost = videosPerMonth * hoursPerVideo * analystRate;
const automationCost = videosPerMonth * 1.50; // API costs
const platformFee = videosPerMonth * 16; // CODITECT fee per video
const monthlySavings = manualCost - automationCost - platformFee;
const annualSavings = monthlySavings * 12;
const implementationFee = 50000;
const paybackDays = (implementationFee / monthlySavings) * 30;
const firstYearROI = ((annualSavings - implementationFee) / implementationFee) * 100;
// Animation state
const [animated, setAnimated] = useState(false);
useEffect(() => {
setAnimated(true);
}, []);
// Chart data
const costComparisonData = [
{
name: 'Manual Process',
'Monthly Cost': Math.round(manualCost),
fill: '#D0021B'
},
{
name: 'Automated',
'Monthly Cost': Math.round(automationCost + platformFee),
fill: '#7ED321'
}
];
const savingsBreakdownData = [
{ name: 'Labor Cost Saved', value: Math.round(manualCost - (videosPerMonth * hoursPerVideo * 0.1 * analystRate)), fill: '#4A90E2' },
{ name: 'Remaining Labor (10%)', value: Math.round(videosPerMonth * hoursPerVideo * 0.1 * analystRate), fill: '#F5A623' },
{ name: 'Platform Fee', value: Math.round(platformFee), fill: '#BD10E0' },
{ name: 'API Costs', value: Math.round(automationCost), fill: '#50E3C2' }
];
const timeComparisonData = [
{ metric: 'Time per Video', manual: 4.0, automated: 0.4 },
{ metric: 'Videos per Day', manual: 2, automated: 16 },
{ metric: 'Time to Insight', manual: 48, automated: 0.25 }
];
return (
<div className="max-w-7xl mx-auto p-8 bg-gradient-to-br from-blue-50 to-indigo-50">
{/* Hero Section */}
<div className="text-center mb-12">
<h1 className="text-5xl font-bold text-gray-900 mb-4">
AI-Powered Video Analysis Platform
</h1>
<p className="text-2xl text-gray-600 mb-6">
Eliminate 90% of manual video processing work
</p>
<div className="flex justify-center gap-4 flex-wrap">
<div className="bg-white rounded-lg shadow-lg p-6 min-w-[200px]">
<div className="text-4xl font-bold text-green-600">97%</div>
<div className="text-sm text-gray-600">Faster Processing</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-6 min-w-[200px]">
<div className="text-4xl font-bold text-blue-600">99%</div>
<div className="text-sm text-gray-600">Cost Reduction</div>
</div>
<div className="bg-white rounded-lg shadow-lg p-6 min-w-[200px]">
<div className="text-4xl font-bold text-purple-600">{Math.round(paybackDays)}</div>
<div className="text-sm text-gray-600">Days to ROI</div>
</div>
</div>
</div>
{/* Interactive ROI Calculator */}
<div className="bg-white rounded-xl shadow-2xl p-8 mb-12">
<h2 className="text-3xl font-bold text-gray-900 mb-6">
Calculate Your ROI
</h2>
{/* Input Sliders */}
<div className="grid md:grid-cols-3 gap-6 mb-8">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Videos per Month: <span className="text-blue-600 font-bold">{videosPerMonth}</span>
</label>
<input
type="range"
min="100"
max="2000"
step="100"
value={videosPerMonth}
onChange={(e) => setVideosPerMonth(parseInt(e.target.value))}
className="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs text-gray-500 mt-1">
<span>100</span>
<span>2000</span>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Hours per Video: <span className="text-blue-600 font-bold">{hoursPerVideo.toFixed(1)}</span>
</label>
<input
type="range"
min="1"
max="8"
step="0.5"
value={hoursPerVideo}
onChange={(e) => setHoursPerVideo(parseFloat(e.target.value))}
className="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs text-gray-500 mt-1">
<span>1</span>
<span>8</span>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Analyst Rate ($/hr): <span className="text-blue-600 font-bold">${analystRate}</span>
</label>
<input
type="range"
min="50"
max="150"
step="5"
value={analystRate}
onChange={(e) => setAnalystRate(parseInt(e.target.value))}
className="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs text-gray-500 mt-1">
<span>$50</span>
<span>$150</span>
</div>
</div>
</div>
{/* Results Dashboard */}
<div className="grid md:grid-cols-4 gap-4 mb-8">
<div className="bg-red-50 border-2 border-red-200 rounded-lg p-4">
<div className="text-sm text-red-600 font-medium mb-1">Current Monthly Cost</div>
<div className="text-3xl font-bold text-red-700">
${Math.round(manualCost).toLocaleString()}
</div>
</div>
<div className="bg-green-50 border-2 border-green-200 rounded-lg p-4">
<div className="text-sm text-green-600 font-medium mb-1">Automated Cost</div>
<div className="text-3xl font-bold text-green-700">
${Math.round(automationCost + platformFee).toLocaleString()}
</div>
</div>
<div className="bg-blue-50 border-2 border-blue-200 rounded-lg p-4">
<div className="text-sm text-blue-600 font-medium mb-1">Monthly Savings</div>
<div className="text-3xl font-bold text-blue-700">
${Math.round(monthlySavings).toLocaleString()}
</div>
</div>
<div className="bg-purple-50 border-2 border-purple-200 rounded-lg p-4">
<div className="text-sm text-purple-600 font-medium mb-1">Annual Savings</div>
<div className="text-3xl font-bold text-purple-700">
${Math.round(annualSavings).toLocaleString()}
</div>
</div>
</div>
{/* ROI Highlights */}
<div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg p-6 text-white">
<div className="grid md:grid-cols-3 gap-6 text-center">
<div>
<div className="text-4xl font-bold mb-2">{Math.round(paybackDays)} days</div>
<div className="text-sm opacity-90">Payback Period</div>
<div className="text-xs opacity-75 mt-1">
{paybackDays <= 20 ? '✓ Within 20-day target' : '• Adjust parameters'}
</div>
</div>
<div>
<div className="text-4xl font-bold mb-2">{Math.round(firstYearROI).toLocaleString()}%</div>
<div className="text-sm opacity-90">First Year ROI</div>
<div className="text-xs opacity-75 mt-1">After $50K implementation</div>
</div>
<div>
<div className="text-4xl font-bold mb-2">{Math.round((manualCost / (automationCost + platformFee))).toFixed(1)}x</div>
<div className="text-sm opacity-90">Cost Reduction</div>
<div className="text-xs opacity-75 mt-1">Lower operational expenses</div>
</div>
</div>
</div>
</div>
{/* Cost Comparison Chart */}
<div className="bg-white rounded-xl shadow-2xl p-8 mb-12">
<h2 className="text-3xl font-bold text-gray-900 mb-6">
Cost Comparison: Manual vs. Automated
</h2>
<ResponsiveContainer width="100%" height={400}>
<BarChart data={costComparisonData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip formatter={(value) => `$${value.toLocaleString()}`} />
<Legend />
<Bar dataKey="Monthly Cost" fill="#4A90E2" radius={[8, 8, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</div>
{/* Savings Breakdown */}
<div className="grid md:grid-cols-2 gap-8 mb-12">
<div className="bg-white rounded-xl shadow-2xl p-8">
<h2 className="text-2xl font-bold text-gray-900 mb-6">
Where Does the Money Go?
</h2>
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie
data={savingsBreakdownData}
cx="50%"
cy="50%"
labelLine={false}
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
outerRadius={100}
fill="#8884d8"
dataKey="value"
>
{savingsBreakdownData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.fill} />
))}
</Pie>
<Tooltip formatter={(value) => `$${value.toLocaleString()}`} />
</PieChart>
</ResponsiveContainer>
</div>
<div className="bg-white rounded-xl shadow-2xl p-8">
<h2 className="text-2xl font-bold text-gray-900 mb-6">
Time Efficiency Gains
</h2>
<div className="space-y-4">
<div>
<div className="flex justify-between text-sm text-gray-600 mb-1">
<span>Time per Video</span>
<span className="font-medium">97% faster</span>
</div>
<div className="flex gap-2 items-center">
<div className="flex-1 bg-red-200 rounded-full h-8 flex items-center px-4 text-sm font-medium">
4.0 hours
</div>
<div className="w-16 bg-green-500 rounded-full h-8 flex items-center justify-center text-white text-sm font-bold">
24min
</div>
</div>
</div>
<div>
<div className="flex justify-between text-sm text-gray-600 mb-1">
<span>Videos per Day (per analyst)</span>
<span className="font-medium">8x increase</span>
</div>
<div className="flex gap-2 items-center">
<div className="w-24 bg-red-200 rounded-full h-8 flex items-center justify-center text-sm font-medium">
2 videos
</div>
<div className="flex-1 bg-green-500 rounded-full h-8 flex items-center px-4 text-white text-sm font-bold">
16 videos
</div>
</div>
</div>
<div>
<div className="flex justify-between text-sm text-gray-600 mb-1">
<span>Time to Insights</span>
<span className="font-medium">99% faster</span>
</div>
<div className="flex gap-2 items-center">
<div className="flex-1 bg-red-200 rounded-full h-8 flex items-center px-4 text-sm font-medium">
2 days
</div>
<div className="w-20 bg-green-500 rounded-full h-8 flex items-center justify-center text-white text-sm font-bold">
15min
</div>
</div>
</div>
</div>
</div>
</div>
{/* Feature Highlights */}
<div className="bg-white rounded-xl shadow-2xl p-8 mb-12">
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
How It Works
</h2>
<div className="grid md:grid-cols-4 gap-6">
<div className="text-center">
<div className="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">
1
</div>
<h3 className="font-bold text-lg mb-2">Upload Video</h3>
<p className="text-sm text-gray-600">
Provide YouTube URL or upload file. Supports MP4, AVI, MOV up to 2 hours.
</p>
</div>
<div className="text-center">
<div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">
2
</div>
<h3 className="font-bold text-lg mb-2">AI Processing</h3>
<p className="text-sm text-gray-600">
Automatic transcription, frame extraction, content analysis using Claude AI.
</p>
</div>
<div className="text-center">
<div className="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">
3
</div>
<h3 className="font-bold text-lg mb-2">Smart Synthesis</h3>
<p className="text-sm text-gray-600">
Multi-agent AI correlates audio and visual content into structured insights.
</p>
</div>
<div className="text-center">
<div className="w-16 h-16 bg-orange-500 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">
4
</div>
<h3 className="font-bold text-lg mb-2">Structured Output</h3>
<p className="text-sm text-gray-600">
Markdown report with topics, timestamps, extracted slides, and full transcript.
</p>
</div>
</div>
</div>
{/* Use Cases */}
<div className="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-2xl p-8 mb-12 text-white">
<h2 className="text-3xl font-bold mb-8 text-center">
Who Benefits?
</h2>
<div className="grid md:grid-cols-3 gap-6">
<div className="bg-white bg-opacity-10 backdrop-blur rounded-lg p-6">
<div className="text-2xl mb-3">📚</div>
<h3 className="font-bold text-xl mb-2">Learning & Development</h3>
<p className="text-sm opacity-90">
Index 1000s of training videos, make content searchable, ensure compliance tracking.
</p>
</div>
<div className="bg-white bg-opacity-10 backdrop-blur rounded-lg p-6">
<div className="text-2xl mb-3">📊</div>
<h3 className="font-bold text-xl mb-2">Market Research</h3>
<p className="text-sm opacity-90">
Analyze earnings calls, product demos, extract quotes, track competitor messaging.
</p>
</div>
<div className="bg-white bg-opacity-10 backdrop-blur rounded-lg p-6">
<div className="text-2xl mb-3">⚖️</div>
<h3 className="font-bold text-xl mb-2">Legal & Compliance</h3>
<p className="text-sm opacity-90">
Searchable deposition tranH.P.004-SCRIPTS, timestamped citations, keyword search across hours of video.
</p>
</div>
</div>
</div>
{/* Social Proof */}
<div className="bg-white rounded-xl shadow-2xl p-8 mb-12">
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
Proven Results
</h2>
<div className="grid md:grid-cols-2 gap-8">
<div className="border-l-4 border-blue-500 pl-6">
<div className="flex items-center mb-4">
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-xl mr-4">
ML
</div>
<div>
<div className="font-bold">MedLearn University</div>
<div className="text-sm text-gray-600">Healthcare Education</div>
</div>
</div>
<p className="text-gray-700 mb-4">
"Indexed 4,000 medical education videos in 3 weeks. Previously would have taken 6 months with our team. <strong>ROI achieved in 8 days.</strong>"
</p>
<div className="flex gap-4 text-sm">
<div className="bg-green-50 px-3 py-1 rounded-full text-green-700 font-medium">
98% time savings
</div>
<div className="bg-blue-50 px-3 py-1 rounded-full text-blue-700 font-medium">
$890K saved annually
</div>
</div>
</div>
<div className="border-l-4 border-purple-500 pl-6">
<div className="flex items-center mb-4">
<div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold text-xl mr-4">
IC
</div>
<div>
<div className="font-bold">InvestCo Partners</div>
<div className="text-sm text-gray-600">Market Research</div>
</div>
</div>
<p className="text-gray-700 mb-4">
"Went from 2-day lag on earnings call analysis to real-time insights. <strong>Competitive advantage is priceless.</strong>"
</p>
<div className="flex gap-4 text-sm">
<div className="bg-green-50 px-3 py-1 rounded-full text-green-700 font-medium">
24x faster insights
</div>
<div className="bg-blue-50 px-3 py-1 rounded-full text-blue-700 font-medium">
$267K saved annually
</div>
</div>
</div>
</div>
</div>
{/* CTA Section */}
<div className="bg-gradient-to-r from-green-500 to-teal-600 rounded-xl shadow-2xl p-12 text-center text-white">
<h2 className="text-4xl font-bold mb-4">
Ready to Eliminate 90% of Manual Work?
</h2>
<p className="text-xl mb-8 opacity-90">
Join 5 pilot customers getting free implementation + 3 months free access
</p>
<div className="flex justify-center gap-4 flex-wrap">
<button className="bg-white text-green-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition shadow-lg">
Request Demo
</button>
<button className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-green-600 transition">
Calculate Your ROI
</button>
</div>
<p className="mt-6 text-sm opacity-75">
✓ No credit card required ✓ 20-day ROI guarantee ✓ No vendor lock-in
</p>
</div>
</div>
);
};
export default VideoAnalysisValueProp;
Simplified Embeddable Widget
For quick embedding in existing pages:
import React, { useState } from 'react';
const ROICalculatorWidget = () => {
const [videos, setVideos] = useState(500);
const savings = videos * 4 * 75 - videos * 17.50;
const roi = Math.round((savings * 12 - 50000) / 50000 * 100);
return (
<div className="bg-white rounded-xl shadow-lg p-6 max-w-md">
<h3 className="text-2xl font-bold mb-4">Quick ROI Calculator</h3>
<label className="block mb-4">
<span className="text-sm font-medium text-gray-700">
Videos per month: <strong>{videos}</strong>
</span>
<input
type="range"
min="100"
max="2000"
step="100"
value={videos}
onChange={(e) => setVideos(parseInt(e.target.value))}
className="w-full mt-2"
/>
</label>
<div className="bg-blue-50 rounded-lg p-4 mb-4">
<div className="text-sm text-gray-600">Monthly Savings</div>
<div className="text-3xl font-bold text-blue-600">
${Math.round(savings).toLocaleString()}
</div>
</div>
<div className="bg-green-50 rounded-lg p-4">
<div className="text-sm text-gray-600">First Year ROI</div>
<div className="text-3xl font-bold text-green-600">
{roi.toLocaleString()}%
</div>
</div>
<button className="w-full mt-4 bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700">
Get Full Analysis
</button>
</div>
);
};
export default ROICalculatorWidget;
Usage Instructions
Installation
npm install recharts
# or
yarn add recharts
Import & Use
import VideoAnalysisValueProp from './components/VideoAnalysisValueProp';
function App() {
return (
<div>
<VideoAnalysisValueProp />
</div>
);
}
Customization
Colors: Update Tailwind classes:
bg-blue-500→ Primary colorbg-green-500→ Success/Savingsbg-red-500→ Current cost/problems
Metrics: Adjust in state initialization:
const [analystRate, setAnalystRate] = useState(75); // Change default
Branding: Add logo:
<img src="/coditect-logo.png" className="h-12 mx-auto mb-6" />
Export Options
Static Screenshot
- Component renders in browser
- Use browser dev tools to screenshot
- Or use tools like
html2canvas
PDF Export
import html2pdf from 'html2pdf.js';
const exportPDF = () => {
const element = document.getElementById('value-prop');
html2pdf().from(element).save('roi-analysis.pdf');
};
Embed in PowerPoint
- Export as high-res PNG
- Insert in sales deck
A/B Testing Variants
Test different messaging:
Variant A: "97% Faster" (Speed focus)
Variant B: "99% Cost Reduction" (Cost focus)
Variant C: "11-Day ROI" (ROI focus)
Track conversion rates per variant.