import React, { useState, useRef } from 'react';
import {
TrendingDown, TrendingUp, Activity, PieChart,
CheckCircle, AlertTriangle, ArrowRight,
Target, BarChart, ShieldCheck, Zap, ChevronDown,
Sparkles
} from 'lucide-react';
export default function App() {
// Состояния калькулятора
const [revenue, setRevenue] = useState('');
const [answers, setAnswers] = useState({ q1: null, q2: null, q3: null });
const [showResult, setShowResult] = useState(false);
const [calculation, setCalculation] = useState(null);
const resultRef = useRef(null);
// Логика вопросов
const questions = [
{
id: 'q1',
title: 'Есть ли у вас финансовая модель бизнеса?',
options: [
{ text: 'да, регулярно используем', weight: 0.01 },
{ text: 'есть, но не обновляется', weight: 0.05 },
{ text: 'нет', weight: 0.10 }
]
},
{
id: 'q2',
title: 'Контролируете ли вы движение денежных средств (Cash Flow)?',
options: [
{ text: 'да, ежедневно', weight: 0.01 },
{ text: 'частично', weight: 0.04 },
{ text: 'нет', weight: 0.08 }
]
},
{
id: 'q3',
title: 'Вы точно знаете свою чистую прибыль?',
options: [
{ text: 'да', weight: 0.01 },
{ text: 'примерно', weight: 0.06 },
{ text: 'нет', weight: 0.12 }
]
}
];
const handleAnswer = (qId, weight) => {
setAnswers(prev => ({ ...prev, [qId]: weight }));
};
const calculateLosses = () => {
if (!revenue || answers.q1 === null || answers.q2 === null || answers.q3 === null) {
alert('Пожалуйста, заполните оборот и ответьте на все вопросы');
return;
}
const revValue = parseFloat(revenue.replace(/\s/g, ''));
const lossExpenses = revValue * answers.q1;
const lossCashFlow = revValue * answers.q2;
const lossMargin = revValue * answers.q3;
const totalLoss = lossExpenses + lossCashFlow + lossMargin;
setCalculation({
total: totalLoss,
expenses: lossExpenses,
cashflow: lossCashFlow,
margin: lossMargin,
yearly: totalLoss * 12
});
setShowResult(true);
// Плавный скролл к результату
setTimeout(() => {
resultRef.current?.scrollIntoView({ behavior: 'smooth' });
}, 100);
};
const formatCurrency = (val) => {
return new Intl.NumberFormat('ru-RU', {
style: 'currency',
currency: 'RUB',
maximumFractionDigits: 0
}).format(val);
};
const scrollToSection = (id) => {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
};
return (
{/* ЭКРАН 1 - HOOK */}
{/* ЭКРАН 2 - ДИАГНОСТИКА */}
Ответьте на 3 вопроса и получите расчет потерь
Это займет меньше минуты.
{/* Ввод выручки */}
1. укажите ваш средний ежемесячный оборот (₽)
{/* Вопросы */}
{questions.map((q, index) => (
{index + 2}. {q.title}
{q.options.map((opt, i) => (
handleAnswer(q.id, opt.weight)}
className={`p-4 rounded-xl border text-left transition-all duration-200 ${
answers[q.id] === opt.weight
? 'bg-emerald-500/10 border-emerald-500 text-emerald-400'
: 'bg-slate-800 border-slate-700 text-slate-300 hover:border-slate-500'
}`}
>
{opt.text}
))}
))}
Показать результат
{/* ЭКРАН 3 - РЕЗУЛЬТАТ (Показывается после расчета) */}
{showResult && calculation && (
Ваш бизнес теряет:
{formatCurrency(calculation.total)} в месяц
потери на неэффективных расходах:
{formatCurrency(calculation.expenses)}
потери на низкой марже:
{formatCurrency(calculation.margin)}
потери из-за кассовых разрывов:
{formatCurrency(calculation.cashflow)}
За год это более {formatCurrency(calculation.yearly)}
Это деньги, которые вы уже зарабатываете - но не видите.
scrollToSection('solution')}
className="inline-flex items-center space-x-2 px-8 py-4 bg-white text-slate-900 hover:bg-slate-200 text-lg font-bold rounded-xl transition-all duration-300"
> Как это исправить
)}
{/* ЭКРАН 4 - ПРОБЛЕМА */}
Почему бизнес теряет деньги
В 80% компаний отсутствует системное финансовое управление. Решения принимаются интуитивно, а не на основе цифр.
{[
{ title: 'нет финансовой модели', icon: BarChart },
{ title: 'нет планирования', icon: Target },
{ title: 'нет контроля затрат', icon: TrendingDown },
{ title: 'нет прозрачной отчетности', icon: PieChart }
].map((item, i) => (
))}
Выручка растет, а прибыль - нет.
{/* ЭКРАН 5 - РЕШЕНИЕ (CFO) */}
Что делает финансовый директор
Я выстраиваю систему управления финансами, которая позволяет контролировать и увеличивать прибыль.
{[
{
title: 'финансовая модель',
desc: 'прогнозирует прибыль и показывает точки роста',
icon: TrendingUp
},
{
title: 'управление cash flow',
desc: 'убирает кассовые разрывы и стабилизирует бизнес',
icon: Activity
},
{
title: 'unit-экономика',
desc: 'показывает, какие продукты приносят деньги',
icon: PieChart
},
{
title: 'бюджетирование',
desc: 'позволяет контролировать расходы',
icon: ShieldCheck
}
].map((block, i) => (
{block.title} {block.desc}
))}
Вы начинаете управлять бизнесом через цифры
{/* ЭКРАН 6 - РЕЗУЛЬТАТЫ */}
Что вы получаете результат внедрения финансового управления:
-10-25%
снижение расходов
устранение кассовых разрывов
Финансы перестают быть хаосом и становятся инструментом роста .
{/* ЭКРАН 7 - КЕЙСЫ */}
Результаты клиентов
{[
{
industry: 'Производственная компания',
result: 'прибыль выросла с 800 000 ₽ до 2 100 000 ₽ за 4 месяца'
},
{
industry: 'Сфера услуг',
result: 'убрали кассовые разрывы и увеличили маржу на 18%'
},
{
industry: 'Оптовая торговля',
result: 'снизили расходы на 22% без падения выручки'
}
].map((caseItem, i) => (
{caseItem.industry}
{caseItem.result}
))}
{/* ЭКРАН 8 - ROI */}
Сколько вы теряете vs сколько стоит решение Потери бизнеса
{calculation ? `${formatCurrency(calculation.total)} / мес` : 'от 780 000 ₽ / мес'}
Стоимость CFO
от 150 000 ₽ / мес
Каждый вложенный рубль приносит 5+ рублей
Вы либо продолжаете терять деньги, либо начинаете их контролировать.
{/* ЭКРАН 9 - ТАРИФЫ */}
Выберите формат работы
{[
{
name: 'Базовый',
features: ['контроль финансов', 'отчетность', 'анализ'],
highlight: false
},
{
name: 'Стандарт',
features: ['финансовая модель', 'бюджетирование', 'контроль прибыли'],
highlight: true
},
{
name: 'PRO',
features: ['полное управление финансами', 'стратегия роста', 'оптимизация бизнеса'],
highlight: false
}
].map((plan, i) => (
{plan.highlight && (
Популярный
)}
{plan.name}
{plan.features.map((feat, idx) => (
{feat}
))}
Выбираю {plan.name}
))}
{/* БЛОК AI FINEXPERT */}
Флагманский формат
AI FinExpert
Симбиоз классического финансового управления и мощностей искусственного интеллекта для лидеров рынка.
{[
'предиктивная аналитика будущего',
'актуальные данные в режиме онлайн',
'одномоментное отслеживание сотен факторов',
'сценарии решений на основе ИИ'
].map((feat, idx) => (
{feat}
))}
{/* ЭКРАН 10 - CTA */}
Получите финансовый разбор бизнеса что вы получите:
{[
'анализ текущей ситуации',
'точки роста прибыли',
'прогноз финансов',
'конкретный план действий'
].map((item, i) => (
{item}
))}
беру ограниченное количество компаний в работу
Записаться на разбор Оставьте заявку, мы свяжемся с вами в течение 15 минут.
);
}
