neo
083f6ba783
- mobile-patterns.md: Mobile layout & pattern systems (18.5KB) Fluid typography, container queries, safe-area, CSS architecture, touch-optimized components, iOS/Android specifics, testing checklist - mobile-layout-patterns.md: Mobile layout systems (11.5KB) CSS grid, single-column stack, full-bleed hero, card stack, swipeable carousel, split-screen, off-canvas nav, bottom sheet, FAB, component patterns - mobile-navigation-patterns.md: Mobile navigation (9.8KB) Bottom tab bar, top nav, hamburger menu, bottom sheet nav, pill nav, comparison matrix, navigation rules, swipe navigation, breadcrumbs, tab content - mobile-form-patterns.md: Mobile form patterns (10.3KB) Input types, keyboards, floating labels, validation patterns, progressive disclosure, autocomplete, masked inputs, toggle/radio, form anti-patterns - mobile-interaction-patterns.md: Touch & gestures (16.7KB) Swipe detection, long press, pull-to-refresh, touch feedback, scroll-reveal, parallax, sticky scroll, CSS scroll animations, touch carousel, haptic feedback, passive listeners - mobile-performance-patterns.md: Performance optimization (12.3KB) Core Web Vitals (LCP/INP/CLS), LCP optimization, INP debugging, CLS prevention, image optimization, lazy loading, service workers, CSS/JS optimization, network optimization - mobile-landing-patterns.md: Landing page patterns (21.3KB) Section sequencing, hero, social proof, feature cards, CTA patterns (inline/sticky/full-bleed), testimonials, pricing, FAQ accordion, footer, mobile checklist
924 lines
21 KiB
Markdown
924 lines
21 KiB
Markdown
---
|
||
title: Mobile Landing Page Patterns
|
||
created: 2026-07-03
|
||
updated: 2026-07-03
|
||
type: system
|
||
tags: [mobile, landing, conversion, CTA, sections, mobile-first]
|
||
sources:
|
||
- https://www.webstacks.com/blog/mobile-website-design-best-practices
|
||
- https://www.browserstack.com/guide/how-to-implement-mobile-first-design
|
||
- https://www.engagecoders.com/responsive-web-design-mobile-first-development-best-practices-2025-guide/
|
||
confidence: high
|
||
---
|
||
|
||
# Mobile Landing Page Patterns — Лендинги для мобильных
|
||
|
||
## 1. Mobile Landing Page Structure
|
||
|
||
### 1.1 Секвенция секций
|
||
|
||
Оптимальный порядок для мобильных лендингов (сверху вниз):
|
||
|
||
```
|
||
1. Hero (с CTA)
|
||
2. Social Proof (логотипы клиентов)
|
||
3. Problem/Solution
|
||
4. Features/Benefits
|
||
5. How It Works
|
||
6. Testimonials
|
||
7. Pricing
|
||
8. FAQ
|
||
9. Final CTA
|
||
10. Footer
|
||
```
|
||
|
||
### 1.2 Hero Section (Mobile)
|
||
|
||
```html
|
||
<section class="mobile-hero" style="min-height: 80dvh;">
|
||
<div class="container">
|
||
<h1 class="hero-title">Заголовок, который решает проблему</h1>
|
||
<p class="hero-subtitle">Подзаголовок в 1-2 предложения, объясняющий ценность</p>
|
||
<div class="hero-cta-group">
|
||
<a href="#signup" class="btn btn-primary">Начать бесплатно</a>
|
||
<a href="#demo" class="btn btn-ghost">Смотреть демо ▶</a>
|
||
</div>
|
||
<div class="hero-social-proof">
|
||
<div class="avatars">
|
||
<img src="/av1.jpg" alt="" class="avatar">
|
||
<img src="/av2.jpg" alt="" class="avatar">
|
||
<img src="/av3.jpg" alt="" class="avatar">
|
||
</div>
|
||
<span class="social-text">+2,000 уже используют</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
```css
|
||
.mobile-hero {
|
||
padding: calc(24px + var(--safe-top)) 16px calc(var(--safe-bottom) + 24px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
min-height: 80dvh;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: clamp(2rem, 8vw, 3.5rem);
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
margin-bottom: 16px;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: clamp(1.1rem, 3.5vw, 1.25rem);
|
||
line-height: 1.5;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 24px;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.hero-cta-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.hero-social-proof {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.avatars {
|
||
display: flex;
|
||
}
|
||
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--surface-1);
|
||
margin-left: -8px;
|
||
}
|
||
|
||
.avatar:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.social-text {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
```
|
||
|
||
### 1.3 Social Proof Section
|
||
|
||
```html
|
||
<section class="social-proof">
|
||
<p class="section-label">Нам доверяют</p>
|
||
<div class="logo-grid">
|
||
<img src="/logo1.svg" alt="Company" class="logo">
|
||
<img src="/logo2.svg" alt="Company" class="logo">
|
||
<img src="/logo3.svg" alt="Company" class="logo">
|
||
<img src="/logo4.svg" alt="Company" class="logo">
|
||
<img src="/logo5.svg" alt="Company" class="logo">
|
||
</div>
|
||
<div class="stats-grid">
|
||
<div class="stat">
|
||
<span class="stat-value">10K+</span>
|
||
<span class="stat-label">Клиентов</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-value">99.9%</span>
|
||
<span class="stat-label">Uptime</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-value">4.9/5</span>
|
||
<span class="stat-label">Рейтинг</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
```css
|
||
.social-proof {
|
||
padding: 48px 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.section-label {
|
||
font-size: var(--text-sm);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.logo-grid {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 24px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.logo {
|
||
height: 24px;
|
||
opacity: 0.5;
|
||
filter: grayscale(1);
|
||
transition: opacity 0.2s, filter 0.2s;
|
||
}
|
||
|
||
.logo:hover,
|
||
.logo:active {
|
||
opacity: 1;
|
||
filter: grayscale(0);
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
padding: 24px;
|
||
background: var(--surface-2);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.stat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: var(--text-xl);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-secondary);
|
||
}
|
||
```
|
||
|
||
## 2. Feature/Benefit Sections
|
||
|
||
### 2.1 Feature Card (Mobile)
|
||
|
||
```html
|
||
<section class="features">
|
||
<h2 class="section-title">Всё что нужно для роста</h2>
|
||
<div class="feature-list">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📊</div>
|
||
<h3 class="feature-title">Аналитика</h3>
|
||
<p class="feature-desc">Мгновенные дашборды с ключевыми метриками</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">⚡</div>
|
||
<h3 class="feature-title">Скорость</h3>
|
||
<p class="feature-desc">Загрузка менее чем за 1 секунду</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3 class="feature-title">Безопасность</h3>
|
||
<p class="feature-desc">Шифрование данных и соответствие GDPR</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
```css
|
||
.features {
|
||
padding: 48px 16px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(1.5rem, 6vw, 2.5rem);
|
||
font-weight: 800;
|
||
text-align: center;
|
||
margin-bottom: 32px;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.feature-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.feature-card {
|
||
display: flex;
|
||
gap: 16px;
|
||
padding: 20px;
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--border-1);
|
||
border-radius: 12px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.feature-card:active {
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 2rem;
|
||
flex-shrink: 0;
|
||
width: 48px;
|
||
height: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--surface-2);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: var(--text-lg);
|
||
font-weight: 700;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.feature-desc {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
}
|
||
```
|
||
|
||
### 2.2 Feature Image + Text (Alternating)
|
||
|
||
```html
|
||
<section class="feature-showcase">
|
||
<div class="feature-showcase__content">
|
||
<h3 class="feature-showcase__title">Быстрый старт за 2 минуты</h3>
|
||
<p class="feature-showcase__desc">Никаких сложных настроек. Подключите API и начните работу.</p>
|
||
<a href="#docs" class="btn btn-primary">Документация →</a>
|
||
</div>
|
||
<div class="feature-showcase__media">
|
||
<img src="/screenshot1.webp" alt="Dashboard preview" loading="lazy">
|
||
</div>
|
||
</section>
|
||
|
||
<section class="feature-showcase reversed">
|
||
<div class="feature-showcase__content">
|
||
<h3 class="feature-showcase__title">Автоматизация процессов</h3>
|
||
<p class="feature-showcase__desc">Настройте один раз — система будет работать за вас.</p>
|
||
<a href="#features" class="btn btn-primary">Узнать больше →</a>
|
||
</div>
|
||
<div class="feature-showcase__media">
|
||
<img src="/screenshot2.webp" alt="Automation preview" loading="lazy">
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
```css
|
||
.feature-showcase {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 48px 16px;
|
||
gap: 32px;
|
||
}
|
||
|
||
.feature-showcase.reversed .feature-showcase__content {
|
||
order: 2;
|
||
}
|
||
|
||
.feature-showcase.reversed .feature-showcase__media {
|
||
order: 1;
|
||
}
|
||
|
||
.feature-showcase__title {
|
||
font-size: var(--text-xl);
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.feature-showcase__desc {
|
||
font-size: var(--text-base);
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.feature-showcase__media {
|
||
width: 100%;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.feature-showcase__media img {
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
object-fit: cover;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.feature-showcase {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 48px;
|
||
padding: 64px 32px;
|
||
}
|
||
|
||
.feature-showcase.reversed .feature-showcase__content {
|
||
order: 1;
|
||
}
|
||
|
||
.feature-showcase.reversed .feature-showcase__media {
|
||
order: 2;
|
||
}
|
||
|
||
.feature-showcase__content {
|
||
flex: 1;
|
||
}
|
||
|
||
.feature-showcase__media {
|
||
flex: 1;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 3. CTA Patterns for Mobile
|
||
|
||
### 3.1 Inline CTA
|
||
|
||
```html
|
||
<div class="cta-inline">
|
||
<div class="cta-inline__content">
|
||
<h3 class="cta-inline__title">Готовы начать?</h3>
|
||
<p class="cta-inline__desc">Присоединяйтесь к 10,000+ компаний, которые уже используют наш сервис</p>
|
||
</div>
|
||
<a href="#signup" class="btn btn-primary btn-large">Создать аккаунт</a>
|
||
</div>
|
||
```
|
||
|
||
```css
|
||
.cta-inline {
|
||
padding: 48px 16px;
|
||
text-align: center;
|
||
background: var(--surface-2);
|
||
border-radius: 16px;
|
||
margin: 0 16px 32px;
|
||
}
|
||
|
||
.cta-inline__title {
|
||
font-size: clamp(1.25rem, 5vw, 1.75rem);
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.cta-inline__desc {
|
||
font-size: var(--text-base);
|
||
color: var(--text-secondary);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.btn-large {
|
||
width: 100%;
|
||
min-height: 56px;
|
||
font-size: var(--text-lg);
|
||
}
|
||
```
|
||
|
||
### 3.2 Sticky Bottom CTA
|
||
|
||
```html
|
||
<div class="sticky-cta">
|
||
<a href="#signup" class="btn btn-primary sticky-cta__btn">
|
||
Начать бесплатно
|
||
</a>
|
||
<span class="sticky-cta__hint">Без привязки карты</span>
|
||
</div>
|
||
```
|
||
|
||
```css
|
||
.sticky-cta {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 12px 16px;
|
||
padding-bottom: calc(12px + var(--safe-bottom));
|
||
background: var(--surface-1);
|
||
border-top: 1px solid var(--border-1);
|
||
z-index: 100;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.sticky-cta__btn {
|
||
width: 100%;
|
||
min-height: 56px;
|
||
text-align: center;
|
||
font-size: var(--text-lg);
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.sticky-cta__hint {
|
||
text-align: center;
|
||
font-size: var(--text-xs);
|
||
color: var(--text-secondary);
|
||
}
|
||
```
|
||
|
||
### 3.3 Full-Bleed CTA
|
||
|
||
```html
|
||
<section class="cta-full-bleed">
|
||
<h2 class="cta-full-bleed__title">Готовы трансформировать бизнес?</h2>
|
||
<p class="cta-full-bleed__desc">Запросите демо за 2 минуты</p>
|
||
<a href="#demo" class="btn btn-white btn-large">Запросить демо</a>
|
||
</section>
|
||
```
|
||
|
||
```css
|
||
.cta-full-bleed {
|
||
padding: 64px 24px;
|
||
text-align: center;
|
||
background: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
.cta-full-bleed__title {
|
||
font-size: clamp(1.5rem, 6vw, 2.5rem);
|
||
font-weight: 800;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.cta-full-bleed__desc {
|
||
font-size: var(--text-lg);
|
||
opacity: 0.9;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.btn-white {
|
||
background: white;
|
||
color: var(--primary);
|
||
}
|
||
```
|
||
|
||
## 4. Testimonials for Mobile
|
||
|
||
```html
|
||
<section class="testimonials">
|
||
<h2 class="section-title">Что говорят клиенты</h2>
|
||
<div class="testimonial-scroll">
|
||
<div class="testimonial-card">
|
||
<p class="testimonial-text">"Этот сервис изменил наш подход к аналитике. Всё работает как часы."</p>
|
||
<div class="testimonial-author">
|
||
<img src="/av1.jpg" alt="Иван П." class="testimonial-avatar">
|
||
<div>
|
||
<p class="testimonial-name">Иван Петров</p>
|
||
<p class="testimonial-role">CEO, TechCorp</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card">
|
||
<p class="testimonial-text">"Наконец-то удобный интерфейс, который не ломается на телефоне."</p>
|
||
<div class="testimonial-author">
|
||
<img src="/av2.jpg" alt="Анна С." class="testimonial-avatar">
|
||
<div>
|
||
<p class="testimonial-name">Анна Сидорова</p>
|
||
<p class="testimonial-role">CMO, Digital Agency</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
```css
|
||
.testimonial-scroll {
|
||
display: flex;
|
||
gap: 16px;
|
||
overflow-x: auto;
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
padding: 0 16px 16px;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.testimonial-scroll::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.testimonial-card {
|
||
flex: 0 0 auto;
|
||
width: min(340px, 85vw);
|
||
padding: 24px;
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--border-1);
|
||
border-radius: 12px;
|
||
scroll-snap-align: center;
|
||
}
|
||
|
||
.testimonial-text {
|
||
font-size: var(--text-base);
|
||
line-height: 1.6;
|
||
margin-bottom: 16px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.testimonial-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.testimonial-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.testimonial-name {
|
||
font-weight: 600;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.testimonial-role {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-secondary);
|
||
}
|
||
```
|
||
|
||
## 5. Pricing for Mobile
|
||
|
||
```html
|
||
<section class="pricing">
|
||
<h2 class="section-title">Простые тарифы</h2>
|
||
|
||
<div class="pricing-toggle">
|
||
<span class="pricing-label active">Ежемесячно</span>
|
||
<label class="switch">
|
||
<input type="checkbox" id="pricing-toggle">
|
||
<span class="switch-slider"></span>
|
||
</label>
|
||
<span class="pricing-label">Ежегодно (-20%)</span>
|
||
</div>
|
||
|
||
<div class="pricing-cards">
|
||
<div class="pricing-card">
|
||
<h3 class="pricing-card__name">Старт</h3>
|
||
<div class="pricing-card__price">
|
||
<span class="price-monthly">₽990</span>
|
||
<span class="price-yearly" style="display:none;">₽790</span>
|
||
<span class="price-period">/мес</span>
|
||
</div>
|
||
<ul class="pricing-card__features">
|
||
<li>✓ До 1,000 контактов</li>
|
||
<li>✓ Базовая аналитика</li>
|
||
<li>✓ Email поддержка</li>
|
||
</ul>
|
||
<a href="#signup" class="btn btn-secondary pricing-card__btn">Начать</a>
|
||
</div>
|
||
|
||
<div class="pricing-card featured">
|
||
<div class="pricing-card__badge">Популярный</div>
|
||
<h3 class="pricing-card__name">Бизнес</h3>
|
||
<div class="pricing-card__price">
|
||
<span class="price-monthly">₽2,990</span>
|
||
<span class="price-yearly" style="display:none;">₽2,390</span>
|
||
<span class="price-period">/мес</span>
|
||
</div>
|
||
<ul class="pricing-card__features">
|
||
<li>✓ Безлимит контактов</li>
|
||
<li>✓ Продвинутая аналитика</li>
|
||
<li>✓ Приоритетная поддержка</li>
|
||
<li>✓ API доступ</li>
|
||
</ul>
|
||
<a href="#signup" class="btn btn-primary pricing-card__btn">Выбрать</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
```css
|
||
.pricing {
|
||
padding: 48px 16px;
|
||
}
|
||
|
||
.pricing-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.switch {
|
||
width: 48px;
|
||
height: 28px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.switch-slider {
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: var(--surface-2);
|
||
border-radius: 14px;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.switch-slider::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 2px;
|
||
top: 2px;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: white;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.switch input:checked + .switch-slider {
|
||
background: var(--primary);
|
||
}
|
||
|
||
.switch input:checked + .switch-slider::after {
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
.pricing-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.pricing-card {
|
||
padding: 24px;
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--border-1);
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.pricing-card.featured {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 2px var(--primary);
|
||
position: relative;
|
||
}
|
||
|
||
.pricing-card__badge {
|
||
position: absolute;
|
||
top: -12px;
|
||
right: 16px;
|
||
padding: 4px 12px;
|
||
background: var(--primary);
|
||
color: white;
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.pricing-card__price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 4px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.price-monthly {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.price-yearly {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
color: #22c55e;
|
||
}
|
||
|
||
.pricing-card__features {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.pricing-card__features li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--border-1);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.pricing-card__features li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.pricing-card__btn {
|
||
width: 100%;
|
||
min-height: 48px;
|
||
}
|
||
```
|
||
|
||
## 6. FAQ for Mobile
|
||
|
||
```html
|
||
<section class="faq">
|
||
<h2 class="section-title">Частые вопросы</h2>
|
||
<div class="accordion">
|
||
<details class="accordion-item">
|
||
<summary class="accordion-item__header">
|
||
<span>Как начать использовать сервис?</span>
|
||
<span class="accordion-icon">+</span>
|
||
</summary>
|
||
<div class="accordion-item__content">
|
||
<p>Регистрация занимает 2 минуты. Просто укажите email, создайте пароль и следуйте инструкциям на экране.</p>
|
||
</div>
|
||
</details>
|
||
<details class="accordion-item">
|
||
<summary class="accordion-item__header">
|
||
<span>Можно ли отменить подписку?</span>
|
||
<span class="accordion-icon">+</span>
|
||
</summary>
|
||
<div class="accordion-item__content">
|
||
<p>Да, вы можете отменить подписку в любой момент из настроек аккаунта. Никаких скрытых платежей.</p>
|
||
</div>
|
||
</details>
|
||
<details class="accordion-item">
|
||
<summary class="accordion-item__header">
|
||
<span>Есть ли бесплатный пробный период?</span>
|
||
<span class="accordion-icon">+</span>
|
||
</summary>
|
||
<div class="accordion-item__content">
|
||
<p>Да, 14 дней бесплатного использования всех функций. Без привязки карты.</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
```css
|
||
.faq {
|
||
padding: 48px 16px;
|
||
}
|
||
|
||
.accordion {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.accordion-item {
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--border-1);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.accordion-item__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 20px;
|
||
cursor: pointer;
|
||
font-size: var(--text-base);
|
||
font-weight: 600;
|
||
list-style: none;
|
||
min-height: 56px;
|
||
}
|
||
|
||
.accordion-item__header::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.accordion-icon {
|
||
font-size: 1.25rem;
|
||
transition: transform 0.2s;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.accordion-item[open] .accordion-icon {
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.accordion-item__content {
|
||
padding: 0 20px 16px;
|
||
font-size: var(--text-sm);
|
||
line-height: 1.5;
|
||
color: var(--text-secondary);
|
||
}
|
||
```
|
||
|
||
## 7. Footer for Mobile
|
||
|
||
```html
|
||
<footer class="mobile-footer">
|
||
<div class="footer-links">
|
||
<a href="/about">О нас</a>
|
||
<a href="/blog">Блог</a>
|
||
<a href="/careers">Карьера</a>
|
||
<a href="/privacy">Конфиденциальность</a>
|
||
<a href="/terms">Условия</a>
|
||
<a href="/contact">Контакты</a>
|
||
</div>
|
||
<p class="footer-copyright">© 2026 Company. Все права защищены.</p>
|
||
</footer>
|
||
```
|
||
|
||
```css
|
||
.mobile-footer {
|
||
padding: 48px 16px 32px;
|
||
text-align: center;
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
.footer-links {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: var(--text-sm);
|
||
min-height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-copyright {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-secondary);
|
||
}
|
||
```
|
||
|
||
## 8. Mobile Landing Checklist
|
||
|
||
| Category | Check |
|
||
|----------|-------|
|
||
| **Hero** | Заголовок + подзаголовок + CTA + social proof |
|
||
| **CTA** | Минимум 2 CTA, sticky bottom CTA |
|
||
| **Features** | Карточки с иконками, скриншоты чередуются |
|
||
| **Social Proof** | Логотипы клиентов, статистика, отзывы |
|
||
| **Pricing** | Переключатель месяц/год, 2-3 тарифа |
|
||
| **FAQ** | Аккордеон, 4-6 вопросов |
|
||
| **Performance** | LCP < 2.5s, lazy loading, сжатие |
|
||
| **Navigation** | Sticky nav или bottom tab bar |
|
||
| **Footer** | Ссылки, копирайт |
|
||
| **Testing** | iPhone + Android, реальные устройства |
|