coral-mobile-lending/index.html

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="DFV24: реализованное нативное iPhone-приложение Coral Travel — акции, направления, заявки, события и личный кабинет.">
  <meta name="theme-color" content="#0c0b11">
  <meta property="og:type" content="website">
  <meta property="og:title" content="DFV24 · Coral Mobile для iPhone">
  <meta property="og:description" content="Реализованный iPhone-проект из портфолио DFV24: поездки, акции, события и заявки.">
  <meta property="og:image" content="img/hero.png">
  <title>DFV24 · Coral Mobile для iPhone</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    /* Русский лендинг: чистая светлая основа, коралловый синий и карточки iOS. */
    :root{--blue:#7b5bf5;--cyan:#22b365;--ink:#f7f8f8;--muted:#cdd0da;--line:rgba(255,255,255,.10);--soft:#13111f;--white:#0c0b11;--max:1120px}
    *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);font:400 16px/1.65 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--white)}
    a{text-decoration:none;color:inherit}.wrap{max-width:var(--max);margin:auto;padding:0 24px}.top{position:sticky;top:0;z-index:5;background:rgba(12,11,17,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
    .top .wrap{height:60px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em}.dfv-logo{display:grid;place-items:center;width:30px;height:30px;font-size:18px;font-weight:900;letter-spacing:-.13em;background:linear-gradient(135deg,#6551ef 4%,#22d081 52%,#53c9e7 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-name{font-size:24px;line-height:1;color:#f7f8f8;letter-spacing:-.035em}.platform{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#987bff;border:1px solid rgba(123,91,245,.48);background:rgba(123,91,245,.18);border-radius:7px;padding:4px 9px}.nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:14px;font-weight:700;color:#8a8f98}.nav a:hover{color:var(--ink)}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:12px 18px;background:var(--cyan);color:#04140b;font-weight:800;font-size:14px;box-shadow:0 8px 20px rgba(34,179,101,.16)}.btn:hover{background:#27c873}
    .hero{padding:92px 0 64px;background:radial-gradient(70% 60% at 50% 0%,rgba(123,91,245,.20),transparent 70%)}.kicker{color:var(--blue);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.hero h1{max-width:800px;margin:13px 0 18px;font-size:clamp(38px,6vw,70px);line-height:1.04;letter-spacing:-.055em}.hero h1 span{color:#b9a6ff}.lead{max-width:720px;font-size:18px;color:var(--muted);margin:0 0 28px}.hero-visual{margin-top:42px;border-radius:24px;overflow:hidden;box-shadow:0 28px 64px rgba(0,0,0,.42);background:#0079b8;border:1px solid var(--line)}.hero-visual img{display:block;width:100%;height:auto}.caption{margin:13px 0 0;color:#8a8f98;font-size:12px;text-align:center}
    section{padding:96px 0}.eyebrow{font-size:12px;color:var(--blue);letter-spacing:.12em;font-weight:800;text-transform:uppercase}.title{max-width:730px;font-size:clamp(28px,4vw,45px);letter-spacing:-.045em;line-height:1.12;margin:12px 0 16px}.sub{max-width:710px;color:var(--muted);font-size:17px}.overview{background:var(--soft)}.image-card{margin-top:34px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.24)}.image-card img{display:block;width:100%;height:auto}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}.card{border:1px solid var(--line);border-radius:16px;padding:25px;background:#191627}.icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(123,91,245,.14);color:var(--blue);font-weight:800;margin-bottom:17px}.card h3{margin:0 0 8px;font-size:17px;letter-spacing:-.02em}.card p{margin:0;color:var(--muted);font-size:14px}.flow{background:linear-gradient(135deg,#16112d,#0e4b45);color:white}.flow .eyebrow{color:#b9a6ff}.flow .title{color:white}.flow .sub{color:#d5d9e2}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:35px}.step{padding:23px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.05)}.num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:800;font-size:13px;margin-bottom:16px}.step h3{font-size:16px;margin:0 0 7px}.step p{font-size:14px;margin:0;color:#d8e5e6}.tour{text-align:center}.tour .title,.tour .sub{margin-left:auto;margin-right:auto}.tech{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}.tech .card{background:var(--soft)}.tech ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:14px}.cta{padding:96px 0;background:#13111f}.cta-box{text-align:center;padding:58px 28px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(60% 120% at 50% 0%,rgba(123,91,245,.22),transparent 68%),#191627;color:#fff}.cta-box h2{margin:0;font-size:clamp(28px,4vw,42px);letter-spacing:-.045em}.cta-box p{max-width:570px;margin:14px auto 28px;color:var(--muted)}.cta-box .btn{background:var(--cyan);color:#04140b;box-shadow:none}.footer{padding:0;color:#727784;font-size:13px;border-top:1px solid var(--line);background:#0c0b11}.footer .wrap{min-height:72px;display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}.footer-brand{display:inline-flex;align-items:center;gap:8px;color:#f7f8f8;font-size:20px;font-weight:800;letter-spacing:-.035em}.footer-brand .dfv-logo{width:28px}.footer-brand .platform{font-size:11px}.footer-project{font-size:14px;color:#747984;font-weight:500}.footer-project::before{content:"·";margin-right:8px;color:#454a55}.copyright{color:#747984;font-size:14px}.copyright a{color:#8b909d}.copyright a:hover{color:#f7f8f8}
    .dfv-logo{display:block;width:30px;height:30px;flex:0 0 auto}.dfv-logo img{display:block;width:100%;height:100%;object-fit:contain}.footer-brand .dfv-logo{width:28px;height:28px}
    @media(max-width:760px){.nav a{display:none}.nav{gap:0}.hero{padding-top:55px}.grid,.steps,.tech{grid-template-columns:1fr}section{padding:66px 0}.hero-visual{border-radius:15px}.top .wrap{height:60px}.platform{display:none}}
  </style>
</head>
<body>
  <header class="top"><div class="wrap"><a class="brand" href="#top" aria-label="CORAL"><span class="dfv-logo" aria-hidden="true"><img src="img/dfv24-logo.svg" alt=""></span><span class="brand-name">CORAL</span><span class="platform">iPhone</span></a><nav class="nav"><a href="#features">Возможности</a><a href="#screens">Экраны</a><a href="#ios">Технологии</a><a class="btn" href="https://github.dfv24.com/fofanov.dmitry/coral-mobile-lending">Репозиторий</a></nav></div></header>
  <main id="top">
    <section class="hero"><div class="wrap"><div class="kicker">DFV24 · реализованный iPhone-проект</div><h1>Ваши путешествия — <span>нативно на iPhone</span></h1><p class="lead">Coral Mobile — реализованное приложение для путешественников и партнёров: направления, акции, события, заявки и личный кабинет в одном мобильном интерфейсе.</p><a class="btn" href="#features">Посмотреть возможности ↓</a><figure class="hero-visual"><img src="img/hero.png" alt="Hero-дизайн Coral Travel с двумя iPhone"></figure><p class="caption">Проект из портфолио <b>DFV24</b> · нативный мобильный интерфейс Coral Travel.</p></div></section>
    <section class="overview" id="features"><div class="wrap"><div class="eyebrow">Единая точка входа</div><h2 class="title">Путешествия и сервисы без лишних переходов</h2><p class="sub">Приложение объединяет контент, специальные предложения и взаимодействие с пользователем в одном месте. Каждый сценарий оптимизирован для короткого мобильного пути.</p><div class="grid"><article class="card"><div class="icon">01</div><h3>Акции и новости</h3><p>Персональная лента предложений, подборок и важных обновлений.</p></article><article class="card"><div class="icon">02</div><h3>Направления</h3><p>Удобный обзор туров и тематических материалов с визуальными карточками.</p></article><article class="card"><div class="icon">03</div><h3>Заявка с телефона</h3><p>Короткая форма участия в мероприятии без перехода на внешний сайт.</p></article></div><figure class="image-card"><img src="img/overview.png" alt="Экран Coral Travel и описание Travel Market"></figure></div></section>
    <section class="flow"><div class="wrap"><div class="eyebrow">Понятный пользовательский путь</div><h2 class="title">От интереса к действию — за несколько касаний</h2><p class="sub">Интерфейс строится вокруг привычного сценария iPhone и не требует изучать сложную навигацию.</p><div class="steps"><article class="step"><div class="num">1</div><h3>Открыть подборку</h3><p>Пользователь видит актуальную акцию, новость или направление в ленте.</p></article><article class="step"><div class="num">2</div><h3>Изучить детали</h3><p>Карточка даёт контекст, условия и понятное следующее действие.</p></article><article class="step"><div class="num">3</div><h3>Оставить заявку</h3><p>Данные профиля подставляются в форму, а статус остаётся в личном кабинете.</p></article></div></div></section>
    <section class="tour" id="screens"><div class="wrap"><div class="eyebrow">Экраны продукта</div><h2 class="title">Один визуальный язык для разных задач</h2><p class="sub">Лента, каталог, акция и анкета связаны общей навигацией, привычной для iPhone.</p><figure class="image-card"><img src="img/screens.png" alt="Пять экранов iPhone приложения Coral Travel: акция, лента, старт, каталог и анкета"></figure></div></section>
    <section id="ios"><div class="wrap"><div class="eyebrow">Технологии iOS</div><h2 class="title">Нативный iOS-стек с вниманием к деталям</h2><p class="sub">В проекте использован современный подход к разработке: доступный интерфейс, защищённая сессия, сетевой слой и сценарии перехода из уведомлений.</p><div class="tech"><article class="card"><h3>Клиентское приложение</h3><ul><li>Swift и SwiftUI для современных экранов iPhone;</li><li>адаптация к Dynamic Type и VoiceOver;</li><li>Keychain для чувствительных данных сессии;</li><li>deep link и push-уведомления.</li></ul></article><article class="card"><h3>Серверные интеграции</h3><ul><li>REST API для ленты, каталога, заявок и профиля;</li><li>единая авторизация и обновление токена;</li><li>кэширование контента для стабильной работы сети;</li><li>аналитика событий без передачи лишних данных.</li></ul></article></div></div></section>
  </main>
  <footer class="footer"><div class="wrap"><span class="footer-brand"><span class="dfv-logo" aria-hidden="true"><img src="img/dfv24-logo.svg" alt=""></span><span>CORAL</span><span class="platform">iPhone</span><span class="footer-project">Нативный iPhone-клиент</span></span><span class="copyright">© 2026 DFV24 · <a href="https://www.dfv24.com">www.dfv24.com</a></span></div></footer>
  <script>/* Небольшое улучшение: внешние почтовые ссылки не меняют URL лендинга. */</script>
</body>
</html>