Вызывает доверие
Медицинский лендинг в стиле мягкого 3D
Подходит детским товарам, медицинским и финансовым сервисам для массовой аудитории, онлайн-школам, сервисам доставки.
Промпт
Вы можете скопировать промпт и вставить его в вайб блок в поле ввода. Подробнее в инструкции.
Сделай лендинг для [тип компании] «[название]».
Контекст: [что предлагаете и чем отличаетесь]. Разделы подбери сам — стандартные для лендинга в этой нише. Используй прикреплённые фото: [какое фото для какого раздела].
Лендинг для [кто клиенты], которым важно, чтобы было просто, дружелюбно и не страшно.
Стилистика мягкого пластилинового 3D:
— Палитра: лавандовый #C9B8FF, мятный #A8E6CF, персиковый #FFC9A8, небесный #A8D8FF, главный фиолетовый #7C5CFF для кнопок и тёмно-фиолетовый #2D2350 для текста.
— Фон плавно перетекает через всю страницу: у каждого раздела свой вертикальный градиент из светлых пастельных оттенков — сиреневого, голубого, мятного, персикового и снова сиреневого к подвалу.
— В каждом разделе — 1–2 больших мягко размытых пастельных пятна. Центр пятна не ближе 300 пикселей к верхнему и нижнему краю, чтобы оно не обрезалось.
— Карточки, кнопки и плашки объёмные и мягкие, будто надутые: скругление 28–32 пикселя, мягкая внешняя тень и светлый блик сверху.
— Иконки и иллюстрации — объёмные, глянцевые, будто игрушечные.
— Типографика: округлый дружелюбный гротеск, заголовки жирные и крупные.
— Кнопки залиты главным фиолетовым с белым текстом. Подписи на плашках — насыщенным цветом той же гаммы, контрастные, как основной текст.
— Анимация пружинистая: карточки «пружинят» при появлении, кнопка при нажатии сжимается, пятна на фоне медленно меняют форму.
Соблюдай ограничения: текст тёмный и хорошо читается на пастельных фонах. Объём сдержанный, без перегруза. Пятна не перекрывают текст. На телефоне карточки идут в одну колонку, а фоновые пятна проще. При уменьшении движения пятна неподвижны, а элементы появляются без анимации.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Технические требования: каждый раздел самостоятельный — фон, декор, стили и скрипты только внутри него. Нижний цвет каждого раздела точно совпадает с верхним цветом следующего, без видимых стыков. Текстуры вроде зерна — один слой на раздел поверх фона и декора. У каждого раздела есть id, ссылки и кнопки ведут к нужным разделам. Шрифты — из стилей проекта, описание типографики — для размеров, начертаний и акцентов. Весь текст не мельче 15 пикселей, основной текст без полупрозрачности. Все надписи, включая подписи к фото, — на русском. Ничто не выходит за край экрана, нет горизонтальной прокрутки. Плавающие иконки Тильды не перекрывают кнопки.
Хороший результат: страница дружелюбная и приятная на ощупь, как хорошее мобильное приложение, её хочется потрогать. В режиме предпросмотра на компьютере и телефоне нет белых разделов и отдельного экрана с градиентом.
Контекст: [что предлагаете и чем отличаетесь]. Разделы подбери сам — стандартные для лендинга в этой нише. Используй прикреплённые фото: [какое фото для какого раздела].
Лендинг для [кто клиенты], которым важно, чтобы было просто, дружелюбно и не страшно.
Стилистика мягкого пластилинового 3D:
— Палитра: лавандовый #C9B8FF, мятный #A8E6CF, персиковый #FFC9A8, небесный #A8D8FF, главный фиолетовый #7C5CFF для кнопок и тёмно-фиолетовый #2D2350 для текста.
— Фон плавно перетекает через всю страницу: у каждого раздела свой вертикальный градиент из светлых пастельных оттенков — сиреневого, голубого, мятного, персикового и снова сиреневого к подвалу.
— В каждом разделе — 1–2 больших мягко размытых пастельных пятна. Центр пятна не ближе 300 пикселей к верхнему и нижнему краю, чтобы оно не обрезалось.
— Карточки, кнопки и плашки объёмные и мягкие, будто надутые: скругление 28–32 пикселя, мягкая внешняя тень и светлый блик сверху.
— Иконки и иллюстрации — объёмные, глянцевые, будто игрушечные.
— Типографика: округлый дружелюбный гротеск, заголовки жирные и крупные.
— Кнопки залиты главным фиолетовым с белым текстом. Подписи на плашках — насыщенным цветом той же гаммы, контрастные, как основной текст.
— Анимация пружинистая: карточки «пружинят» при появлении, кнопка при нажатии сжимается, пятна на фоне медленно меняют форму.
Соблюдай ограничения: текст тёмный и хорошо читается на пастельных фонах. Объём сдержанный, без перегруза. Пятна не перекрывают текст. На телефоне карточки идут в одну колонку, а фоновые пятна проще. При уменьшении движения пятна неподвижны, а элементы появляются без анимации.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Технические требования: каждый раздел самостоятельный — фон, декор, стили и скрипты только внутри него. Нижний цвет каждого раздела точно совпадает с верхним цветом следующего, без видимых стыков. Текстуры вроде зерна — один слой на раздел поверх фона и декора. У каждого раздела есть id, ссылки и кнопки ведут к нужным разделам. Шрифты — из стилей проекта, описание типографики — для размеров, начертаний и акцентов. Весь текст не мельче 15 пикселей, основной текст без полупрозрачности. Все надписи, включая подписи к фото, — на русском. Ничто не выходит за край экрана, нет горизонтальной прокрутки. Плавающие иконки Тильды не перекрывают кнопки.
Хороший результат: страница дружелюбная и приятная на ощупь, как хорошее мобильное приложение, её хочется потрогать. В режиме предпросмотра на компьютере и телефоне нет белых разделов и отдельного экрана с градиентом.
Код
Вы можете скопировать код и вставить его в вайб блок в раздел код. Подробнее в инструкции.
<style>
:root{--color-bg:#F6F3FF;--color-ink:#2D2350;--color-ink-soft:#4A3F75;--color-ink-muted:#6B5F95;--color-lavender:#C9B8FF;--color-lavender-deep:#9C82FF;--color-mint:#A8E6CF;--color-mint-deep:#6FCC9C;--color-peach:#FFC9A8;--color-peach-deep:#FF9E70;--color-sky:#A8D8FF;--color-sky-deep:#6CB5F0;--shadow-soft:0 12px 30px rgba(45,35,80,.08),0 4px 12px rgba(45,35,80,.05);--shadow-soft-lg:0 24px 60px rgba(45,35,80,.12),0 8px 20px rgba(45,35,80,.06);--shadow-press:0 4px 12px rgba(45,35,80,.18);--radius-card:30px;--radius-button:100px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.vb-q1p,.vb-q1p *, .vb-w2x,.vb-w2x *, .vb-e3k,.vb-e3k *, .vb-r4m,.vb-r4m *, .vb-t5n,.vb-t5n *, .vb-y6b,.vb-y6b *, .vb-u7v,.vb-u7v *, .vb-i8s,.vb-i8s *, .vb-o9d,.vb-o9d *{box-sizing:border-box}
.vb-q1p__bg,.vb-w2x__bg,.vb-e3k__bg,.vb-r4m__bg,.vb-t5n__bg,.vb-y6b__bg,.vb-u7v__bg,.vb-i8s__bg,.vb-o9d__bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.vb-q1p__blob,.vb-w2x__blob,.vb-e3k__blob,.vb-r4m__blob,.vb-t5n__blob,.vb-y6b__blob,.vb-u7v__blob,.vb-i8s__blob,.vb-o9d__blob{position:absolute;filter:blur(80px);opacity:.5}
.vb-o9d__blob{opacity:.45}
.vb-w2x-reveal,.vb-e3k-reveal,.vb-r4m-reveal,.vb-t5n-reveal,.vb-y6b-reveal{opacity:0;transform:translateY(28px) scale(.94);transition:opacity .7s ease,transform .8s cubic-bezier(.34,1.56,.64,1)}
.vb-w2x-reveal.is-visible,.vb-e3k-reveal.is-visible,.vb-r4m-reveal.is-visible,.vb-t5n-reveal.is-visible,.vb-y6b-reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}
.vb-u7v-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}.vb-u7v-reveal.is-visible{opacity:1;transform:translateY(0)}
.vb-q1p__btn,.vb-r4m__btn,.vb-t5n__btn,.vb-i8s__btn{font-family:var(--t-headline-font);font-weight:700;background:linear-gradient(180deg,#B5A0FF,#9C82FF);color:#FFF;box-shadow:var(--shadow-soft-lg),inset 0 2px 0 rgba(255,255,255,.4);border:0;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.vb-q1p__btn:hover,.vb-r4m__btn:hover,.vb-t5n__btn:hover,.vb-i8s__btn:hover{box-shadow:0 28px 60px rgba(156,130,255,.35),inset 0 2px 0 rgba(255,255,255,.5);transform:translateY(-2px)}
.vb-q1p__btn:active,.vb-r4m__btn:active,.vb-t5n__btn:active,.vb-i8s__btn:active{transform:scale(.96);box-shadow:var(--shadow-press)}
.vb-q1p,.vb-w2x,.vb-e3k,.vb-r4m,.vb-t5n,.vb-y6b,.vb-u7v,.vb-i8s,.vb-o9d{font-family:var(--t-text-font);color:var(--color-ink);position:relative;overflow:hidden}
.vb-w2x input,.vb-w2x textarea,.vb-w2x select,.vb-i8s input,.vb-i8s textarea,.vb-i8s select{font:inherit}
</style>
<!-- 1. HERO -->
<section class="vb-q1p" id="vb-q1p" data-section-name="Главный экран" data-vibeblock-unique-section="yes" aria-labelledby="vb-q1p-title">
<div class="vb-q1p__bg" aria-hidden="true">
<svg class="vb-q1p__blob vb-q1p__blob--1" viewBox="0 0 200 200"><path d="M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z" fill="#C9B8FF"><animate attributeName="d" dur="22s" repeatCount="indefinite" values="M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z;M50,90 C30,50 80,40 130,50 C170,60 175,100 160,140 C150,170 110,180 70,160 C30,140 30,110 50,90 Z;M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z"/></path></svg>
<svg class="vb-q1p__blob vb-q1p__blob--2" viewBox="0 0 200 200"><path d="M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z" fill="#A8D8FF"><animate attributeName="d" dur="26s" repeatCount="indefinite" values="M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z;M30,100 C40,50 90,40 130,60 C170,80 170,110 155,140 C140,170 100,175 70,155 C40,135 25,130 30,100 Z;M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z"/></path></svg>
</div>
<div class="vb-q1p__container"><div class="vb-q1p__content">
<div class="vb-q1p__logo"><span class="vb-q1p__logo-mark" aria-hidden="true"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 4 C9 4 6 9 6 14 C6 20 10 24 16 28 C22 24 26 20 26 14 C26 9 23 4 16 4 Z" fill="#FF7E7E"/><ellipse cx="12" cy="10" rx="3" ry="2" fill="rgba(255,255,255,0.5)"/><path d="M11 14 L14 11 L18 11 L21 14 L21 19 L18 22 L14 22 L11 19 Z" fill="#FFFFFF"/></svg></span><span class="vb-q1p__logo-text">Добрый Доктор</span></div>
<h1 id="vb-q1p-title" class="vb-q1p__title">Заботливые<br>врачи рядом с вами</h1>
<p class="vb-q1p__subtitle">Без очередей, суеты и страха. Запишем к нужному специалисту за пару минут — как к доброму другу.</p>
<div class="vb-q1p__actions"><a href="#vb-i8s" class="t-btnflex t-btnflex_md vb-q1p__btn vb-q1p__btn--primary"><span class="t-btnflex__text">Записаться на приём</span></a><a href="#vb-w2x" class="t-btnflex t-btnflex_md vb-q1p__btn vb-q1p__btn--ghost"><span class="t-btnflex__text">Посмотреть услуги</span></a></div>
<div class="vb-q1p__trust"><div class="vb-q1p__trust-item"><div class="vb-q1p__trust-num">12</div><div class="vb-q1p__trust-label">лет заботимся о здоровье</div></div><div class="vb-q1p__trust-item"><div class="vb-q1p__trust-num">40k+</div><div class="vb-q1p__trust-label">благодарных пациентов</div></div><div class="vb-q1p__trust-item"><div class="vb-q1p__trust-num">35</div><div class="vb-q1p__trust-label">врачей разных специальностей</div></div></div>
</div>
<div class="vb-q1p__visual" aria-hidden="true"><div class="vb-q1p__card vb-q1p__card--main">
<svg class="vb-q1p__character" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="vb-q1p-body" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#DCCBFF"/><stop offset="100%" stop-color="#9C82FF"/></linearGradient><linearGradient id="vb-q1p-mint" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#C8F0DD"/><stop offset="100%" stop-color="#6FCC9C"/></linearGradient><linearGradient id="vb-q1p-peach" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FFD9C0"/><stop offset="100%" stop-color="#FF9E70"/></linearGradient></defs>
<ellipse cx="160" cy="285" rx="90" ry="14" fill="rgba(45,35,80,0.12)"/><path d="M100 110 Q70 160 80 200 Q85 220 110 230" stroke="#7AC8A0" stroke-width="10" fill="none" stroke-linecap="round"/><path d="M220 110 Q250 160 240 200 Q235 220 210 230" stroke="#7AC8A0" stroke-width="10" fill="none" stroke-linecap="round"/><path d="M60 160 C60 90 100 60 160 60 C220 60 260 90 260 160 C260 220 220 260 160 260 C100 260 60 220 60 160 Z" fill="url(#vb-q1p-body)"/><ellipse cx="120" cy="100" rx="50" ry="22" fill="rgba(255,255,255,0.45)" transform="rotate(-20 120 100)"/><path d="M120 200 Q160 180 200 200 L195 260 L125 260 Z" fill="#FFFFFF"/><ellipse cx="135" cy="215" rx="20" ry="8" fill="rgba(255,255,255,0.8)"/><circle cx="160" cy="225" r="18" fill="url(#vb-q1p-mint)"/><ellipse cx="155" cy="219" rx="6" ry="3" fill="rgba(255,255,255,0.5)"/><path d="M160 217 L160 233 M152 225 L168 225" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/><circle cx="210" cy="230" r="18" fill="url(#vb-q1p-mint)"/><ellipse cx="206" cy="225" rx="6" ry="3" fill="rgba(255,255,255,0.6)"/><circle cx="210" cy="230" r="6" fill="#FFFFFF" opacity="0.7"/><ellipse cx="105" cy="170" rx="14" ry="10" fill="#FFC9A8" opacity="0.7"/><ellipse cx="215" cy="170" rx="14" ry="10" fill="#FFC9A8" opacity="0.7"/><ellipse cx="125" cy="150" rx="12" ry="14" fill="#FFFFFF"/><ellipse cx="195" cy="150" rx="12" ry="14" fill="#FFFFFF"/><circle cx="127" cy="152" r="6" fill="#2D2350"/><circle cx="197" cy="152" r="6" fill="#2D2350"/><circle cx="129" cy="150" r="2" fill="#FFFFFF"/><circle cx="199" cy="150" r="2" fill="#FFFFFF"/><path d="M140 185 Q160 200 180 185" stroke="#2D2350" stroke-width="5" fill="none" stroke-linecap="round"/></svg>
</div><div class="vb-q1p__card vb-q1p__card--bubble vb-q1p__card--bubble-1"><svg class="vb-q1p__mini-icon" viewBox="0 0 32 32"><path d="M16 28 C9 30 7 24 7 18 C7 12 11 8 16 8 C21 8 25 12 25 18 C25 24 23 30 16 28 Z" fill="url(#vb-q1p-mint)"/><ellipse cx="12" cy="14" rx="3" ry="2" fill="rgba(255,255,255,0.5)"/></svg><div class="vb-q1p__bubble-text"><strong>Запись онлайн</strong><span>за 2 минуты</span></div></div>
<div class="vb-q1p__card vb-q1p__card--bubble vb-q1p__card--bubble-2"><svg class="vb-q1p__mini-icon" viewBox="0 0 32 32"><circle cx="16" cy="16" r="10" fill="#FFC9A8"/><ellipse cx="13" cy="13" rx="3" ry="2" fill="rgba(255,255,255,0.5)"/><path d="M11 16 L15 20 L21 12" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" fill="none"/></svg><div class="vb-q1p__bubble-text"><strong>Без боли</strong><span>мягкий подход</span></div></div></div>
</div></section>
:root{--color-bg:#F6F3FF;--color-ink:#2D2350;--color-ink-soft:#4A3F75;--color-ink-muted:#6B5F95;--color-lavender:#C9B8FF;--color-lavender-deep:#9C82FF;--color-mint:#A8E6CF;--color-mint-deep:#6FCC9C;--color-peach:#FFC9A8;--color-peach-deep:#FF9E70;--color-sky:#A8D8FF;--color-sky-deep:#6CB5F0;--shadow-soft:0 12px 30px rgba(45,35,80,.08),0 4px 12px rgba(45,35,80,.05);--shadow-soft-lg:0 24px 60px rgba(45,35,80,.12),0 8px 20px rgba(45,35,80,.06);--shadow-press:0 4px 12px rgba(45,35,80,.18);--radius-card:30px;--radius-button:100px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.vb-q1p,.vb-q1p *, .vb-w2x,.vb-w2x *, .vb-e3k,.vb-e3k *, .vb-r4m,.vb-r4m *, .vb-t5n,.vb-t5n *, .vb-y6b,.vb-y6b *, .vb-u7v,.vb-u7v *, .vb-i8s,.vb-i8s *, .vb-o9d,.vb-o9d *{box-sizing:border-box}
.vb-q1p__bg,.vb-w2x__bg,.vb-e3k__bg,.vb-r4m__bg,.vb-t5n__bg,.vb-y6b__bg,.vb-u7v__bg,.vb-i8s__bg,.vb-o9d__bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.vb-q1p__blob,.vb-w2x__blob,.vb-e3k__blob,.vb-r4m__blob,.vb-t5n__blob,.vb-y6b__blob,.vb-u7v__blob,.vb-i8s__blob,.vb-o9d__blob{position:absolute;filter:blur(80px);opacity:.5}
.vb-o9d__blob{opacity:.45}
.vb-w2x-reveal,.vb-e3k-reveal,.vb-r4m-reveal,.vb-t5n-reveal,.vb-y6b-reveal{opacity:0;transform:translateY(28px) scale(.94);transition:opacity .7s ease,transform .8s cubic-bezier(.34,1.56,.64,1)}
.vb-w2x-reveal.is-visible,.vb-e3k-reveal.is-visible,.vb-r4m-reveal.is-visible,.vb-t5n-reveal.is-visible,.vb-y6b-reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}
.vb-u7v-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}.vb-u7v-reveal.is-visible{opacity:1;transform:translateY(0)}
.vb-q1p__btn,.vb-r4m__btn,.vb-t5n__btn,.vb-i8s__btn{font-family:var(--t-headline-font);font-weight:700;background:linear-gradient(180deg,#B5A0FF,#9C82FF);color:#FFF;box-shadow:var(--shadow-soft-lg),inset 0 2px 0 rgba(255,255,255,.4);border:0;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.vb-q1p__btn:hover,.vb-r4m__btn:hover,.vb-t5n__btn:hover,.vb-i8s__btn:hover{box-shadow:0 28px 60px rgba(156,130,255,.35),inset 0 2px 0 rgba(255,255,255,.5);transform:translateY(-2px)}
.vb-q1p__btn:active,.vb-r4m__btn:active,.vb-t5n__btn:active,.vb-i8s__btn:active{transform:scale(.96);box-shadow:var(--shadow-press)}
.vb-q1p,.vb-w2x,.vb-e3k,.vb-r4m,.vb-t5n,.vb-y6b,.vb-u7v,.vb-i8s,.vb-o9d{font-family:var(--t-text-font);color:var(--color-ink);position:relative;overflow:hidden}
.vb-w2x input,.vb-w2x textarea,.vb-w2x select,.vb-i8s input,.vb-i8s textarea,.vb-i8s select{font:inherit}
</style>
<!-- 1. HERO -->
<section class="vb-q1p" id="vb-q1p" data-section-name="Главный экран" data-vibeblock-unique-section="yes" aria-labelledby="vb-q1p-title">
<div class="vb-q1p__bg" aria-hidden="true">
<svg class="vb-q1p__blob vb-q1p__blob--1" viewBox="0 0 200 200"><path d="M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z" fill="#C9B8FF"><animate attributeName="d" dur="22s" repeatCount="indefinite" values="M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z;M50,90 C30,50 80,40 130,50 C170,60 175,100 160,140 C150,170 110,180 70,160 C30,140 30,110 50,90 Z;M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z"/></path></svg>
<svg class="vb-q1p__blob vb-q1p__blob--2" viewBox="0 0 200 200"><path d="M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z" fill="#A8D8FF"><animate attributeName="d" dur="26s" repeatCount="indefinite" values="M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z;M30,100 C40,50 90,40 130,60 C170,80 170,110 155,140 C140,170 100,175 70,155 C40,135 25,130 30,100 Z;M40,80 C40,40 80,30 110,40 C150,50 170,80 165,120 C160,160 120,175 80,165 C40,155 25,120 40,80 Z"/></path></svg>
</div>
<div class="vb-q1p__container"><div class="vb-q1p__content">
<div class="vb-q1p__logo"><span class="vb-q1p__logo-mark" aria-hidden="true"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 4 C9 4 6 9 6 14 C6 20 10 24 16 28 C22 24 26 20 26 14 C26 9 23 4 16 4 Z" fill="#FF7E7E"/><ellipse cx="12" cy="10" rx="3" ry="2" fill="rgba(255,255,255,0.5)"/><path d="M11 14 L14 11 L18 11 L21 14 L21 19 L18 22 L14 22 L11 19 Z" fill="#FFFFFF"/></svg></span><span class="vb-q1p__logo-text">Добрый Доктор</span></div>
<h1 id="vb-q1p-title" class="vb-q1p__title">Заботливые<br>врачи рядом с вами</h1>
<p class="vb-q1p__subtitle">Без очередей, суеты и страха. Запишем к нужному специалисту за пару минут — как к доброму другу.</p>
<div class="vb-q1p__actions"><a href="#vb-i8s" class="t-btnflex t-btnflex_md vb-q1p__btn vb-q1p__btn--primary"><span class="t-btnflex__text">Записаться на приём</span></a><a href="#vb-w2x" class="t-btnflex t-btnflex_md vb-q1p__btn vb-q1p__btn--ghost"><span class="t-btnflex__text">Посмотреть услуги</span></a></div>
<div class="vb-q1p__trust"><div class="vb-q1p__trust-item"><div class="vb-q1p__trust-num">12</div><div class="vb-q1p__trust-label">лет заботимся о здоровье</div></div><div class="vb-q1p__trust-item"><div class="vb-q1p__trust-num">40k+</div><div class="vb-q1p__trust-label">благодарных пациентов</div></div><div class="vb-q1p__trust-item"><div class="vb-q1p__trust-num">35</div><div class="vb-q1p__trust-label">врачей разных специальностей</div></div></div>
</div>
<div class="vb-q1p__visual" aria-hidden="true"><div class="vb-q1p__card vb-q1p__card--main">
<svg class="vb-q1p__character" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="vb-q1p-body" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#DCCBFF"/><stop offset="100%" stop-color="#9C82FF"/></linearGradient><linearGradient id="vb-q1p-mint" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#C8F0DD"/><stop offset="100%" stop-color="#6FCC9C"/></linearGradient><linearGradient id="vb-q1p-peach" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FFD9C0"/><stop offset="100%" stop-color="#FF9E70"/></linearGradient></defs>
<ellipse cx="160" cy="285" rx="90" ry="14" fill="rgba(45,35,80,0.12)"/><path d="M100 110 Q70 160 80 200 Q85 220 110 230" stroke="#7AC8A0" stroke-width="10" fill="none" stroke-linecap="round"/><path d="M220 110 Q250 160 240 200 Q235 220 210 230" stroke="#7AC8A0" stroke-width="10" fill="none" stroke-linecap="round"/><path d="M60 160 C60 90 100 60 160 60 C220 60 260 90 260 160 C260 220 220 260 160 260 C100 260 60 220 60 160 Z" fill="url(#vb-q1p-body)"/><ellipse cx="120" cy="100" rx="50" ry="22" fill="rgba(255,255,255,0.45)" transform="rotate(-20 120 100)"/><path d="M120 200 Q160 180 200 200 L195 260 L125 260 Z" fill="#FFFFFF"/><ellipse cx="135" cy="215" rx="20" ry="8" fill="rgba(255,255,255,0.8)"/><circle cx="160" cy="225" r="18" fill="url(#vb-q1p-mint)"/><ellipse cx="155" cy="219" rx="6" ry="3" fill="rgba(255,255,255,0.5)"/><path d="M160 217 L160 233 M152 225 L168 225" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/><circle cx="210" cy="230" r="18" fill="url(#vb-q1p-mint)"/><ellipse cx="206" cy="225" rx="6" ry="3" fill="rgba(255,255,255,0.6)"/><circle cx="210" cy="230" r="6" fill="#FFFFFF" opacity="0.7"/><ellipse cx="105" cy="170" rx="14" ry="10" fill="#FFC9A8" opacity="0.7"/><ellipse cx="215" cy="170" rx="14" ry="10" fill="#FFC9A8" opacity="0.7"/><ellipse cx="125" cy="150" rx="12" ry="14" fill="#FFFFFF"/><ellipse cx="195" cy="150" rx="12" ry="14" fill="#FFFFFF"/><circle cx="127" cy="152" r="6" fill="#2D2350"/><circle cx="197" cy="152" r="6" fill="#2D2350"/><circle cx="129" cy="150" r="2" fill="#FFFFFF"/><circle cx="199" cy="150" r="2" fill="#FFFFFF"/><path d="M140 185 Q160 200 180 185" stroke="#2D2350" stroke-width="5" fill="none" stroke-linecap="round"/></svg>
</div><div class="vb-q1p__card vb-q1p__card--bubble vb-q1p__card--bubble-1"><svg class="vb-q1p__mini-icon" viewBox="0 0 32 32"><path d="M16 28 C9 30 7 24 7 18 C7 12 11 8 16 8 C21 8 25 12 25 18 C25 24 23 30 16 28 Z" fill="url(#vb-q1p-mint)"/><ellipse cx="12" cy="14" rx="3" ry="2" fill="rgba(255,255,255,0.5)"/></svg><div class="vb-q1p__bubble-text"><strong>Запись онлайн</strong><span>за 2 минуты</span></div></div>
<div class="vb-q1p__card vb-q1p__card--bubble vb-q1p__card--bubble-2"><svg class="vb-q1p__mini-icon" viewBox="0 0 32 32"><circle cx="16" cy="16" r="10" fill="#FFC9A8"/><ellipse cx="13" cy="13" rx="3" ry="2" fill="rgba(255,255,255,0.5)"/><path d="M11 16 L15 20 L21 12" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" fill="none"/></svg><div class="vb-q1p__bubble-text"><strong>Без боли</strong><span>мягкий подход</span></div></div></div>
</div></section>
Что выбрать, промпт или код?
Копируйте промпт, если хотите получить похожий результат, но ввести информацию о своём бизнесе и задать свои требования. Например, изменить кнопки, тексты, цвета, фотографии или другие элементы.
Копируйте код, если хотите получить точно такой же блок. Чтобы его изменить, придётся отредактировать html-код.
