Редактирование страницы: Международная финансовая логистика

Заголовок страницы *

Содержимое страницы *

/* ===== HERO СЕКЦИЯ - ПОЛНОШИРНАЯ, ТЕМНЫЙ ФОН, МИНИМАЛЬНЫЕ ОТСТУПЫ ===== */
.page-logistics .logistics-hero {
    position: relative;
    background: linear-gradient(145deg, var(--header-bg-color, #343a40) 0%, color-mix(in srgb, var(--header-bg-color, #343a40), white 20%) 100%);
    overflow: hidden;
    padding: 40px 0 60px;
    margin-bottom: 0;
}
.page-logistics .logistics-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path fill="white" d="M20 20 L80 20 L80 80 L20 80 Z" stroke="white" stroke-width="1" fill="none"/><path fill="white" d="M30 30 L70 30 L70 70 L30 70 Z" stroke="white" stroke-width="1" fill="none"/><path fill="white" d="M40 40 L60 40 L60 60 L40 60 Z" stroke="white" stroke-width="1" fill="none"/></svg>');
    background-size: 60px 60px;
    opacity: 0.1;
}
.page-logistics .hero-badge .badge {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.page-logistics .hero-title {
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.2rem;
    color: white;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.page-logistics .hero-subtitle {
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}
.page-logistics .hero-description {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 900px;
    margin: 0 auto;
}
.page-logistics .hero-description i {
    color: rgba(255, 255, 255, 0.5);
}
.page-logistics .hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    color: var(--light-color, #f8f9fa);
}
.page-logistics .hero-wave svg {
    display: block;
    width: 100%;
}
.page-logistics .hero-wave path {
    fill: var(--light-color, #f8f9fa);
}

/* ===== СТАТИСТИКА ===== */
.page-logistics .stat-card {
    padding: 1.2rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.page-logistics .stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}
.page-logistics .stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.3rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.page-logistics .stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ===== СЕРВИС КАРТЫ ===== */
.page-logistics .service-card {
    background: var(--card-bg-color, #ffffff);
    border-radius: 2rem;
    padding: 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    border: 1px solid var(--card-border-color, #dee2e6);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.page-logistics .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color, #0d6efd), color-mix(in srgb, var(--primary-color, #0d6efd), white 20%));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.page-logistics .service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px color-mix(in srgb, var(--primary-color, #0d6efd), transparent 90%);
    border-color: color-mix(in srgb, var(--primary-color, #0d6efd), transparent 90%);
}
.page-logistics .service-card:hover::before {
    opacity: 1;
}
.page-logistics .service-icon-wrapper {
    margin-bottom: 2rem;
}
.page-logistics .service-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #0d6efd), transparent 90%), color-mix(in srgb, var(--primary-color, #0d6efd), transparent 95%));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #0d6efd);
    font-size: 2.5rem;
    border: 1px solid color-mix(in srgb, var(--primary-color, #0d6efd), transparent 90%);
}
.page-logistics .service-title {
    font-size: 1.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color, #212529);
}
.page-logistics .service-subtitle {
    font-size: 1.1rem;
    color: var(--secondary-color, #6c757d);
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.page-logistics .service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-logistics .service-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    color: var(--text-color, #212529);
    padding: 0.5rem 0;
}
.page-logistics .service-list li i {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--primary-color, #0d6efd);
}

/* ===== BENEFIT КАРТЫ ===== */
.page-logistics .benefit-card {
    background: var(--card-bg-color, #ffffff);
    border-radius: 1.5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid var(--card-border-color, #dee2e6);
}
.page-logistics .benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
}
.page-logistics .benefit-icon-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.2rem;
}
.page-logistics .bg-primary-soft {
    background: color-mix(in srgb, var(--primary-color, #0d6efd), transparent 90%);
    color: var(--primary-color, #0d6efd);
}
.page-logistics .bg-success-soft {
    background: color-mix(in srgb, var(--success-color, #198754), transparent 90%);
    color: var(--success-color, #198754);
}
.page-logistics .bg-warning-soft {
    background: color-mix(in srgb, var(--warning-color, #ffc107), transparent 90%);
    color: var(--warning-color, #ffc107);
}
.page-logistics .bg-info-soft {
    background: color-mix(in srgb, var(--info-color, #0dcaf0), transparent 90%);
    color: var(--info-color, #0dcaf0);
}
.page-logistics .benefit-title {
    font-size: 1.65rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color, #212529);
}
.page-logistics .benefit-stat {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color, #0d6efd);
    margin-bottom: 0.75rem;
    line-height: 1;
}
.page-logistics .benefit-text {
    color: var(--secondary-color, #6c757d);
    font-size: 1rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* ===== СТАТИСТИКА ГРИД ===== */
.page-logistics .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.page-logistics .stats-item {
    text-align: center;
    padding: 1.75rem 1rem;
    background: var(--card-bg-color, #ffffff);
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
    border: 1px solid var(--card-border-color, #dee2e6);
    transition: transform 0.3s ease;
}
.page-logistics .stats-item:hover {
    transform: scale(1.05);
    border-color: color-mix(in srgb, var(--primary-color, #0d6efd), transparent 80%);
}
.page-logistics .stats-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-color, #0d6efd);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.page-logistics .stats-desc {
    font-size: 0.95rem;
    color: var(--secondary-color, #6c757d);
    font-weight: 500;
}

/* ===== FEATURE ЭЛЕМЕНТЫ ===== */
.page-logistics .feature-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.75rem;
    background: var(--card-bg-color, #ffffff);
    border-radius: 1.25rem;
    transition: all 0.3s ease;
    border: 1px solid var(--card-border-color, #dee2e6);
    height: 100%;
}
.page-logistics .feature-item:hover {
    background: color-mix(in srgb, var(--primary-color, #0d6efd), transparent 98%);
    border-color: color-mix(in srgb, var(--primary-color, #0d6efd), transparent 85%);
    transform: translateX(5px);
}
.page-logistics .feature-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: color-mix(in srgb, var(--primary-color, #0d6efd), transparent 90%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color, #0d6efd);
}
.page-logistics .feature-content h5 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-color, #212529);
}
.page-logistics .feature-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--secondary-color, #6c757d);
    margin-bottom: 0;
}

/* ===== TRUST СЕКЦИЯ ===== */
.page-logistics .trust-section {
    background: linear-gradient(135deg, var(--primary-color, #0d6efd), color-mix(in srgb, var(--primary-color, #0d6efd), white 20%)) !important;
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    margin: 2rem 0;
}
.page-logistics .trust-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0.5;
}
.page-logistics .trust-badge .badge {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 2.5rem !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-radius: 50px !important;
}
.page-logistics .opacity-90 { opacity: 0.9; }

/* ===== АДАПТАЦИЯ ===== */
@media (max-width: 992px) {
    .page-logistics .hero-title { font-size: 3.2rem; }
    .page-logistics .hero-subtitle { font-size: 1.5rem; }
}
@media (max-width: 768px) {
    .page-logistics .py-6 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .page-logistics .hero-title { font-size: 2.5rem; }
    .page-logistics .hero-subtitle { font-size: 1.3rem; }
    .page-logistics .hero-description { font-size: 1.1rem; }
    .page-logistics .service-card { padding: 1.75rem; }
    .page-logistics .service-title { font-size: 1.5rem; }
    .page-logistics .stats-grid { margin-top: 2rem; }
    .page-logistics .benefit-stat { font-size: 1.75rem; }
}
@media (max-width: 576px) {
    .page-logistics .hero-title { font-size: 2rem; }
    .page-logistics .stat-number { font-size: 1.8rem; }
    .page-logistics .service-icon { width: 70px; height: 70px; font-size: 2rem; }
    .page-logistics .feature-item { padding: 1.25rem; }
}

/* ===== АНИМАЦИИ ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.page-logistics .service-card,
.page-logistics .benefit-card,
.page-logistics .feature-item,
.page-logistics .stats-item {
    animation: fadeInUp 0.6s ease-out;
}
</style>

<div class="page-logistics">
    
    <section class="logistics-hero">
        <div class="container-fluid">
            <div class="row align-items-center py-4">
                <div class="col-12 text-center">
                    <div class="hero-badge mb-3">
                        <span class="badge px-4 py-2 rounded-pill">
                            <i class="fas fa-globe-americas me-2"></i>ГЛОБАЛЬНЫЕ РЕШЕНИЯ
                        </span>
                    </div>
                    <h1 class="hero-title fw-bold">
                        МЕЖДУНАРОДНАЯ<br>ФИНАНСОВАЯ ЛОГИСТИКА
                    </h1>
                    <p class="hero-subtitle">
                        Платежи по внешнеторговым контрактам
                    </p>
                    <div class="hero-description mt-3">
                        <p>
                            <i class="fas fa-quote-left me-2"></i>
                            DEXA Logistics — комплексное обслуживание международных расчетов
                            для корпоративных клиентов
                            <i class="fas fa-quote-right ms-2"></i>
                        </p>
                    </div>

<div class="hero-stats mt-4 pt-2">
                        <div class="row g-3 justify-content-center">
                            <div class="col-md-3 col-6">
                                <div class="stat-card">
                                    <div class="stat-number">от 15'</div>
                                    <div class="stat-label">Скорость</div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="stat-card">
                                    <div class="stat-number">50+</div>
                                    <div class="stat-label">Стран</div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="stat-card">
                                    <div class="stat-number">24/7</div>
                                    <div class="stat-label">Поддержка</div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="stat-card">
                                    <div class="stat-number">от 0.5%</div>
                                    <div class="stat-label">Комиссия</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hero-wave">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120">
                <path fill="currentColor" fill-opacity="1" d="M0,64L48,74.7C96,85,192,107,288,106.7C384,107,480,85,576,74.7C672,64,768,64,864,74.7C960,85,1056,107,1152,106.7C1248,107,1344,85,1392,74.7L1440,64L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z"></path>
            </svg>
        </div>
    </section>

<section class="services-section py-6">
        <div class="container">
            <div class="row g-5">
                <div class="col-md-6">
                    <div class="service-card h-100">
                        <div class="service-icon-wrapper">
                            <div class="service-icon">
                                <i class="fas fa-file-signature fa-3x"></i>
                            </div>
                        </div>
                        <h3 class="service-title">Внешнеторговые контракты</h3>
                        <p class="service-subtitle">Полный цикл сопровождения</p>
                        <ul class="service-list">
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <span>Валютный контроль и compliance</span>
                            </li>
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <span>Подготовка контрактной документации</span>
                            </li>
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <span>Паспортизация и учет сделок</span>
                            </li>
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <span>Структурирование контрактов</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="service-card h-100">
                        <div class="service-icon-wrapper">
                            <div class="service-icon">
                                <i class="fas fa-exchange-alt fa-3x"></i>
                            </div>
                        </div>
                        <h3 class="service-title">Международные платежи</h3>
                        <p class="service-subtitle">Быстрые трансграничные переводы</p>
                        <ul class="service-list">
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <span>SWIFT переводы в любой валюте</span>
                            </li>
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <span>Платежи в криптовалюте</span>
                            </li>
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <span>P2P транзакции</span>
                            </li>
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <span>Международные переводы</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="benefits-section py-6 bg-light">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="benefit-card">
                        <div class="benefit-icon-circle bg-primary-soft">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <h4 class="benefit-title">Скорость</h4>
                        <div class="benefit-stat">от 15'</div>
                        <p class="benefit-text">Проведение платежей. Срочные переводы за 5 минут</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="benefit-card">
                        <div class="benefit-icon-circle bg-success-soft">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h4 class="benefit-title">Безопасность</h4>
                        <div class="benefit-stat">100%</div>
                        <p class="benefit-text">Многоуровневая защита, соответствие стандартам</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="benefit-card">
                        <div class="benefit-icon-circle bg-warning-soft">
                            <i class="fas fa-coins"></i>
                        </div>
                        <h4 class="benefit-title">Тарифы</h4>
                        <div class="benefit-stat">от 0.5%</div>
                        <p class="benefit-text">Индивидуальные условия для крупных клиентов</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="features-section py-6">
        <div class="container">
            <div class="row align-items-center mb-5">
                <div class="col-lg-6">
                    <h2 class="display-5 fw-bold mb-4" style="font-size: 2.8rem;">
                        <span style="color: var(--primary-color, #0d6efd);">Наши</span> преимущества
                    </h2>
                    <p class="lead text-muted" style="font-size: 1.25rem; color: var(--secondary-color, #6c757d);">
                        Комплексное обслуживание внешнеторговых контрактов
                        и международных платежей для бизнеса
                    </p>
                </div>
                <div class="col-lg-6">
                    <div class="stats-grid">
                        <div class="stats-item">
                            <div class="stats-number">50+</div>
                            <div class="stats-desc">стран</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-number">от 15'</div>
                            <div class="stats-desc">среднее время</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-number">24/7</div>
                            <div class="stats-desc">поддержка</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-number">от 0.5%</div>
                            <div class="stats-desc">комиссия</div>
                        </div>
                    </div>
                </div>
            </div>

<div class="row g-4">
                <div class="col-md-6">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="feature-content">
                            <h5>Юрлица и ИП</h5>
                            <p>Полный пакет документов, договорная база</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-file-contract"></i>
                        </div>
                        <div class="feature-content">
                            <h5>Официальные договоры</h5>
                            <p>Юридически значимые документы</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="feature-content">
                            <h5>Полное сопровождение</h5>
                            <p>От заявки до закрывающих документов</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <div class="feature-content">
                            <h5>Поддержка 24/7</h5>
                            <p>Круглосуточно, без выходных</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <div class="feature-content">
                            <h5>50+ стран</h5>
                            <p>Европа, Азия, Америка, СНГ</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-currency-exchange"></i>
                        </div>
                        <div class="feature-content">
                            <h5>Мультивалютность</h5>
                            <p>USD, EUR, CNY, RUB, KZT и другие</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <div class="feature-content">
                            <h5>Индивидуальные решения</h5>
                            <p>Под ваш бизнес и задачи</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-ban"></i>
                        </div>
                        <div class="feature-content">
                            <h5>Без скрытых комиссий</h5>
                            <p>Прозрачное ценообразование</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="trust-section py-6 text-white">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-10">
                    <div class="trust-badge mb-4">
                        <span class="badge bg-white text-primary px-4 py-2 rounded-pill" style="color: var(--primary-color, #0d6efd) !important;">
                            <i class="fas fa-check-circle me-2"></i>Для юридических лиц и ИП
                        </span>
                    </div>
                    <p class="lead mb-0 opacity-90" style="font-size: 1.2rem;">
                        Все операции проводятся в соответствии с законодательством РФ
                        и международными нормами валютного контроля
                    </p>
                </div>
            </div>
        </div>
    </section>
</div>

Редактор Summernote - поддерживает любой HTML, CSS классы и стили.

Meta описание Для SEO (до 500 символов)

Редактирование страницы: Международная финансовая логистика

Редактирование страницы

Сброс дизайна

Информация о странице

Быстрые действия