cases/rxpay.html - master - ncit/studiosite

cases/rxpay.html
271 строка18 KB
ncit
SEO optimization: meta tags, service pages, case studies, analytics
10 мар 2026, 18:46
10 мар 2026, 18:4653fa5d5
<!DOCTYPE html>
<html lang="ru" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RxPay — Финтех BNPL платформа | Кейс КодЭкспресс</title>
    <meta name="description" content="Кейс разработки финтех-платформы RxPay: мобильное приложение, веб-платформа и ML-модели скоринга для BNPL-сервиса.">
    <meta name="keywords" content="разработка финтех приложения, BNPL платформа, мобильное платёжное приложение, ML скоринг, финтех разработка">
    <link rel="canonical" href="https://nikmobdev.ru/cases/rxpay.html">
    <meta name="robots" content="index, follow">
    <meta name="author" content="КодЭкспресс">
    <meta name="yandex-verification" content="274d114689562785">
    <!-- Open Graph -->
    <meta property="og:type" content="article">
    <meta property="og:locale" content="ru_RU">
    <meta property="og:site_name" content="КодЭкспресс">
    <meta property="og:title" content="RxPay — Финтех BNPL платформа | Кейс КодЭкспресс">
    <meta property="og:description" content="Кейс разработки финтех-платформы RxPay: мобильное приложение, веб-платформа и ML-модели скоринга для BNPL-сервиса.">
    <meta property="og:url" content="https://nikmobdev.ru/cases/rxpay.html">
    <meta property="og:image" content="https://nikmobdev.ru/og-image.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="RxPay — Финтех BNPL платформа | Кейс КодЭкспресс">
    <meta name="twitter:description" content="Кейс разработки финтех-платформы RxPay: мобильное приложение, веб-платформа и ML-модели скоринга для BNPL-сервиса.">
    <meta name="twitter:image" content="https://nikmobdev.ru/og-image.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
    <link href="https://api.fontshare.com/v2/css?f[]=clash-grotesk@400,500,600,700&f[]=plus-jakarta-sans@300,400,500,600,700,800&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Plus Jakarta Sans', 'sans-serif'],
                        display: ['Clash Grotesk', 'sans-serif'],
                    },
                    colors: {
                        bento: {
                            bg: '#F2F2F7',
                            lime: '#D9F85F',
                            coral: '#FF6B6B',
                            purple: '#A855F7',
                            cyan: '#22D3EE',
                            yellow: '#FCD34D',
                            dark: '#18181B'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body { background-color: #F2F2F7; color: #18181B; }
        .bento-card {
            background: #ffffff;
            border-radius: 2.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.02);
            overflow: hidden;
            position: relative;
        }
        .bento-card:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.01);
            z-index: 10;
        }
        html { scroll-padding-top: 120px; }
    </style>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            {"@type": "ListItem", "position": 1, "name": "Главная", "item": "https://nikmobdev.ru/"},
            {"@type": "ListItem", "position": 2, "name": "Проекты", "item": "https://nikmobdev.ru/#work"},
            {"@type": "ListItem", "position": 3, "name": "RxPay", "item": "https://nikmobdev.ru/cases/rxpay.html"}
        ]
    }
    </script>
</head>
<body class="font-sans antialiased">

    <!-- Nav -->
    <nav class="fixed top-6 left-1/2 -translate-x-1/2 z-50 bg-white/90 backdrop-blur-xl border border-white/20 shadow-lg shadow-black/5 rounded-full px-6 py-3 flex items-center gap-8">
        <a href="/" class="flex items-center gap-2 group">
            <div class="w-8 h-8 bg-black rounded-full flex items-center justify-center text-white font-bold text-lg group-hover:rotate-12 transition-transform">К</div>
            <span class="font-display font-bold text-lg hidden sm:block">КодЭкспресс</span>
        </a>
        <div class="hidden md:flex items-center gap-6">
            <a href="/#services" class="text-sm font-medium text-gray-500 hover:text-black transition-colors">Услуги</a>
            <a href="/#work" class="text-sm font-medium text-gray-500 hover:text-black transition-colors">Проекты</a>
            <a href="/#contact" class="text-sm font-medium text-gray-500 hover:text-black transition-colors">Контакты</a>
        </div>
        <a href="/#contact" class="bg-black text-white px-5 py-2 rounded-full text-sm font-bold hover:bg-bento-purple transition-colors">Обсудить проект</a>
    </nav>

    <main class="max-w-[1600px] mx-auto px-4 sm:px-8 pt-32 pb-16">

        <!-- Breadcrumbs -->
        <nav class="mb-8 flex items-center gap-2 text-sm text-gray-400">
            <a href="/" class="hover:text-black transition-colors">Главная</a>
            <span>/</span>
            <a href="/#work" class="hover:text-black transition-colors">Проекты</a>
            <span>/</span>
            <span class="text-black font-medium">RxPay</span>
        </nav>

        <!-- Hero -->
        <section class="bento-card p-8 sm:p-12 lg:p-16 mb-8">
            <div class="flex flex-wrap gap-3 mb-6">
                <span class="px-4 py-1.5 bg-bento-lime rounded-full text-sm font-bold text-black">Fintech</span>
                <span class="px-4 py-1.5 bg-bento-purple/15 rounded-full text-sm font-bold text-bento-purple">AI/ML</span>
                <span class="px-4 py-1.5 bg-bento-cyan/15 rounded-full text-sm font-bold text-bento-cyan">Mobile</span>
            </div>
            <h1 class="font-display font-bold text-4xl sm:text-5xl lg:text-6xl mb-6 leading-tight">RxPay — Финтех BNPL платформа</h1>
            <p class="text-lg sm:text-xl text-gray-500 max-w-3xl mb-8">Полноценная финтех-экосистема: мобильное приложение для покупателей, веб-платформа для мерчантов и ML-модели кредитного скоринга для BNPL-сервиса нового поколения.</p>
            <a href="https://rxpay.io/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 bg-black text-white px-6 py-3 rounded-full font-bold hover:bg-bento-purple transition-colors">
                <span>Перейти на сайт проекта</span>
                <iconify-icon icon="ph:arrow-up-right-bold" width="20"></iconify-icon>
            </a>
        </section>

        <!-- Challenge & Solution -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- Challenge -->
            <section class="bento-card p-8 sm:p-12">
                <div class="w-14 h-14 bg-bento-coral/15 rounded-2xl flex items-center justify-center mb-6">
                    <iconify-icon icon="ph:warning-circle-bold" class="text-bento-coral" width="28"></iconify-icon>
                </div>
                <h2 class="font-display font-bold text-2xl sm:text-3xl mb-4">Задача</h2>
                <p class="text-gray-500 leading-relaxed mb-4">Клиент — финтех-стартап, который хотел запустить BNPL-сервис (Buy Now, Pay Later) на российском рынке. Необходимо было создать полноценную экосистему с нуля:</p>
                <ul class="space-y-3 text-gray-500">
                    <li class="flex items-start gap-3">
                        <iconify-icon icon="ph:check-circle-bold" class="text-bento-coral mt-0.5 shrink-0" width="20"></iconify-icon>
                        <span>Мобильное приложение для покупателей с удобным UX оплаты частями</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <iconify-icon icon="ph:check-circle-bold" class="text-bento-coral mt-0.5 shrink-0" width="20"></iconify-icon>
                        <span>Веб-платформа для мерчантов с аналитикой и управлением транзакциями</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <iconify-icon icon="ph:check-circle-bold" class="text-bento-coral mt-0.5 shrink-0" width="20"></iconify-icon>
                        <span>Система кредитного скоринга на базе ML для минимизации рисков</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <iconify-icon icon="ph:check-circle-bold" class="text-bento-coral mt-0.5 shrink-0" width="20"></iconify-icon>
                        <span>Соответствие требованиям регулятора и PCI DSS</span>
                    </li>
                </ul>
            </section>

            <!-- Solution -->
            <section class="bento-card p-8 sm:p-12">
                <div class="w-14 h-14 bg-bento-lime rounded-2xl flex items-center justify-center mb-6">
                    <iconify-icon icon="ph:lightbulb-bold" class="text-black" width="28"></iconify-icon>
                </div>
                <h2 class="font-display font-bold text-2xl sm:text-3xl mb-4">Решение</h2>
                <p class="text-gray-500 leading-relaxed mb-4">Мы спроектировали и реализовали три ключевых компонента платформы, обеспечив бесшовную интеграцию между ними:</p>
                <div class="space-y-4">
                    <div class="bg-bento-bg rounded-2xl p-4">
                        <h3 class="font-bold mb-1">Мобильное приложение iOS/Android</h3>
                        <p class="text-sm text-gray-500">Единый Flutter-код, биометрическая авторизация, QR-оплата, push-уведомления о платежах, интерактивный график рассрочки.</p>
                    </div>
                    <div class="bg-bento-bg rounded-2xl p-4">
                        <h3 class="font-bold mb-1">Веб-платформа для мерчантов</h3>
                        <p class="text-sm text-gray-500">Личный кабинет с real-time аналитикой, управление каталогом, API-интеграция, выгрузка отчётов.</p>
                    </div>
                    <div class="bg-bento-bg rounded-2xl p-4">
                        <h3 class="font-bold mb-1">ML-модели скоринга</h3>
                        <p class="text-sm text-gray-500">Ансамбль моделей на Python: анализ поведенческих данных, кредитной истории, социальных факторов. Решение за 3 секунды.</p>
                    </div>
                </div>
            </section>
        </div>

        <!-- Screenshots -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <div class="bento-card p-6 sm:p-8 flex items-center justify-center">
                <img src="../rxpay-app.webp" alt="RxPay мобильное приложение" class="case-screenshot rounded-2xl max-h-[500px] object-contain w-full">
            </div>
            <div class="bento-card p-6 sm:p-8 flex items-center justify-center">
                <img src="../rxpay-metrics.svg" alt="RxPay метрики и аналитика" class="case-screenshot rounded-2xl max-h-[500px] object-contain w-full">
            </div>
        </div>

        <!-- Tech Stack -->
        <section class="bento-card p-8 sm:p-12 mb-8">
            <h2 class="font-display font-bold text-2xl sm:text-3xl mb-8">Технологический стек</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
                <div class="bg-bento-bg rounded-2xl p-5 text-center hover:scale-105 transition-transform">
                    <iconify-icon icon="logos:flutter" width="40" class="mb-3"></iconify-icon>
                    <p class="font-bold text-sm">Flutter</p>
                    <p class="text-xs text-gray-400">Mobile</p>
                </div>
                <div class="bg-bento-bg rounded-2xl p-5 text-center hover:scale-105 transition-transform">
                    <iconify-icon icon="logos:nodejs-icon" width="40" class="mb-3"></iconify-icon>
                    <p class="font-bold text-sm">Node.js</p>
                    <p class="text-xs text-gray-400">Backend</p>
                </div>
                <div class="bg-bento-bg rounded-2xl p-5 text-center hover:scale-105 transition-transform">
                    <iconify-icon icon="logos:python" width="40" class="mb-3"></iconify-icon>
                    <p class="font-bold text-sm">Python</p>
                    <p class="text-xs text-gray-400">ML/AI</p>
                </div>
                <div class="bg-bento-bg rounded-2xl p-5 text-center hover:scale-105 transition-transform">
                    <iconify-icon icon="logos:postgresql" width="40" class="mb-3"></iconify-icon>
                    <p class="font-bold text-sm">PostgreSQL</p>
                    <p class="text-xs text-gray-400">Database</p>
                </div>
                <div class="bg-bento-bg rounded-2xl p-5 text-center hover:scale-105 transition-transform">
                    <iconify-icon icon="logos:redis" width="40" class="mb-3"></iconify-icon>
                    <p class="font-bold text-sm">Redis</p>
                    <p class="text-xs text-gray-400">Cache</p>
                </div>
                <div class="bg-bento-bg rounded-2xl p-5 text-center hover:scale-105 transition-transform">
                    <iconify-icon icon="logos:aws" width="40" class="mb-3"></iconify-icon>
                    <p class="font-bold text-sm">AWS</p>
                    <p class="text-xs text-gray-400">Cloud</p>
                </div>
            </div>
        </section>

        <!-- Results -->
        <section class="bento-card p-8 sm:p-12 mb-8">
            <h2 class="font-display font-bold text-2xl sm:text-3xl mb-8">Результаты</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="text-center">
                    <p class="font-display font-bold text-4xl sm:text-5xl text-bento-purple mb-2">50K+</p>
                    <p class="text-gray-500 text-sm">Пользователей за первые 3 месяца</p>
                </div>
                <div class="text-center">
                    <p class="font-display font-bold text-4xl sm:text-5xl text-bento-coral mb-2">3 сек</p>
                    <p class="text-gray-500 text-sm">Среднее время скоринга</p>
                </div>
                <div class="text-center">
                    <p class="font-display font-bold text-4xl sm:text-5xl text-bento-cyan mb-2">98.5%</p>
                    <p class="text-gray-500 text-sm">Uptime платформы</p>
                </div>
                <div class="text-center">
                    <p class="font-display font-bold text-4xl sm:text-5xl text-black mb-2">120+</p>
                    <p class="text-gray-500 text-sm">Подключённых мерчантов</p>
                </div>
            </div>
        </section>

        <!-- CTA -->
        <section class="bento-card p-8 sm:p-12 lg:p-16 text-center bg-black text-white">
            <h2 class="font-display font-bold text-3xl sm:text-4xl mb-4">Хотите подобный проект?</h2>
            <p class="text-gray-400 mb-8 max-w-xl mx-auto">Расскажите о вашей идее — мы предложим оптимальное решение и рассчитаем сроки.</p>
            <a href="/#contact" class="inline-flex items-center gap-2 bg-bento-lime text-black px-8 py-4 rounded-full font-bold text-lg hover:scale-105 transition-transform">
                <span>Обсудить проект</span>
                <iconify-icon icon="ph:arrow-right-bold" width="24"></iconify-icon>
            </a>
        </section>

    </main>

    <!-- Footer -->
    <footer class="py-12 flex flex-col md:flex-row justify-between items-center gap-6 text-gray-500 max-w-[1600px] mx-auto px-8">
        <div class="flex items-center gap-2">
            <div class="w-6 h-6 bg-black rounded flex items-center justify-center text-white font-bold text-xs">К</div>
            <span class="font-display font-bold text-black">КодЭкспресс</span>
        </div>
        <p class="text-sm">&copy; 2026 КодЭкспресс. Все права защищены.</p>
    </footer>

    <script src="../lightbox.js"></script>
</body>
</html>