demo
import React, { useState, useEffect } from 'react';
import { Calculator, CheckCircle, DollarSign, TrendingUp, ShoppingCart, Search, Zap, Users } from 'lucide-react';
const PricingCalculator = () => {
const [selectedServices, setSelectedServices] = useState({});
const [projectSize, setProjectSize] = useState('small');
const [duration, setDuration] = useState('3');
const [totalPrice, setTotalPrice] = useState(0);
const [showQuoteForm, setShowQuoteForm] = useState(false);
const services = {
seo: {
name: 'eCommerce SEO',
icon: Search,
basePrice: 800,
description: 'Complete SEO optimization for your online store',
features: ['Keyword Research', 'On-page SEO', 'Technical SEO', 'Content Optimization'],
multipliers: { small: 1, medium: 1.5, large: 2.5, enterprise: 4 }
},
ppc: {
name: 'PPC Management',
icon: TrendingUp,
basePrice: 1200,
description: 'Google Ads & shopping campaigns management',
features: ['Campaign Setup', 'Keyword Management', 'Ad Creation', 'Performance Optimization'],
multipliers: { small: 1, medium: 1.8, large: 3, enterprise: 5 }
},
development: {
name: 'eCommerce Development',
icon: ShoppingCart,
basePrice: 2000,
description: 'Custom eCommerce website development',
features: ['Custom Design', 'Mobile Responsive', 'Payment Integration', 'Admin Panel'],
multipliers: { small: 1, medium: 2, large: 4, enterprise: 8 }
},
amazon: {
name: 'Amazon SEO',
icon: Zap,
basePrice: 600,
description: 'Amazon marketplace optimization',
features: ['Product Listing', 'Keyword Optimization', 'A+ Content', 'Review Management'],
multipliers: { small: 1, medium: 1.3, large: 2, enterprise: 3 }
},
social: {
name: 'Social Media Marketing',
icon: Users,
basePrice: 700,
description: 'Social media management and advertising',
features: ['Content Creation', 'Community Management', 'Paid Advertising', 'Analytics'],
multipliers: { small: 1, medium: 1.4, large: 2.2, enterprise: 3.5 }
},
cro: {
name: 'Conversion Rate Optimization',
icon: CheckCircle,
basePrice: 900,
description: 'A/B testing and conversion optimization',
features: ['Landing Page Testing', 'User Experience Analysis', 'Conversion Funnel', 'Performance Reports'],
multipliers: { small: 1, medium: 1.6, large: 2.8, enterprise: 4.5 }
}
};
const projectSizes = {
small: { name: 'Small Business', description: 'Up to $100K annual revenue' },
medium: { name: 'Medium Business', description: '$100K - $1M annual revenue' },
large: { name: 'Large Business', description: '$1M - $10M annual revenue' },
enterprise: { name: 'Enterprise', description: '$10M+ annual revenue' }
};
const durationMultipliers = {
'1': 1.2,
'3': 1,
'6': 0.9,
'12': 0.8
};
useEffect(() => {
const calculateTotal = () => {
let total = 0;
Object.keys(selectedServices).forEach(serviceKey => {
if (selectedServices[serviceKey]) {
const service = services[serviceKey];
const basePrice = service.basePrice;
const sizeMultiplier = service.multipliers[projectSize];
const durationMultiplier = durationMultipliers[duration];
total += basePrice * sizeMultiplier * durationMultiplier;
}
});
setTotalPrice(total);
};
calculateTotal();
}, [selectedServices, projectSize, duration]);
const handleServiceToggle = (serviceKey) => {
setSelectedServices(prev => ({
...prev,
[serviceKey]: !prev[serviceKey]
}));
};
const getSelectedServicesCount = () => {
return Object.values(selectedServices).filter(Boolean).length;
};
const getDiscountPercentage = () => {
const count = getSelectedServicesCount();
if (count >= 4) return 15;
if (count >= 3) return 10;
if (count >= 2) return 5;
return 0;
};
const getFinalPrice = () => {
const discount = getDiscountPercentage();
return totalPrice * (1 - discount / 100);
};
return (
);
};
export default PricingCalculator;
{/* Header */}
EcommBrains Pricing Calculator
Get instant pricing for your eCommerce marketing needs. Select services, business size, and duration to see your customized quote.
{/* Service Selection */}
{/* Duration Selection */}
{/* Price Summary */}
{/* Quote Form Modal */}
{showQuoteForm && (
Select Your Services
{Object.entries(services).map(([key, service]) => {
const Icon = service.icon;
const isSelected = selectedServices[key];
return (
{/* Business Size Selection */}
handleServiceToggle(key)}
>
);
})}
{isSelected &&
{service.name}
{service.description}
{service.features.map((feature, index) => (
From ${service.basePrice}/mo
Business Size
{Object.entries(projectSizes).map(([key, size]) => (
))}
Contract Duration
{Object.entries(durationMultipliers).map(([months, multiplier]) => (
))}
Price Summary
{getSelectedServicesCount() === 0 ? (Select services to see pricing
{Object.entries(selectedServices).map(([key, isSelected]) => {
if (!isSelected) return null;
const service = services[key];
const price = service.basePrice * service.multipliers[projectSize] * durationMultipliers[duration];
return (
);
})}
{/* Discount Badge */}
{getDiscountPercentage() > 0 && (
{service.name}
{projectSizes[projectSize].name}
${Math.round(price)}
per month
Subtotal
${Math.round(totalPrice)}/mo
{getDiscountPercentage() > 0 && (
Discount ({getDiscountPercentage()}%)
-${Math.round(totalPrice - getFinalPrice())}/mo
)}
Total
${Math.round(getFinalPrice())}/mo
* Final pricing may vary based on specific requirements
)}
Get Your Custom Quote
Our team will contact you within 24 hours with a detailed proposal.
Comments
Post a Comment