Перенос дизайна из Figma в Tailwind CSS на Next.js

На основе уже имеющегося шаблона дизайна сайта сделать версту для фреймворка Laravel. Макет дизайна сделан в Figma. Более подробно опишу уже в личные сообщения.

Есть воронка продаж для интернет магазина который мы хотим повторить у себя Выглядит она вот так Основной лендинг (товар который основной в продаже например рубашка ) Потом страница чек аут (где человек вводит свои данные и выбирает сколько например рубашек он хочет купить) Потом он идет дальше по воронке и ему предлагают допродажу 1 (носки) + потом допродажу 2 (трусы) и финал страница спасибо Как это должно работать в плане перехода по страницам и логике вы можете посмотреть здесь (нужно дойти до конца до страницы спасибо)https://3plus3.heroman.com.ua/standard/ У нас есть примеры страниц которые мы хотим сделать у себя То есть для нас по сути мы скопируем дизайн - верстаем - заполняем под наш товар Страницы с допродажами будут такие же по дизайну и структуре как в сайте что кинул выше (трусы) Вам заполнять не надо будет страницы инфой только собрать скелет - чтобы заявка правильно приходила Также придумывать структуру тоже не нужно страницы От вас по сути Скопировать и сверстать Настроить чтобы технически правильно работало Показать как с этим работать чтобы могли сами это делать Есть 2 конструктора сайтов на примете, с 1 плотно работаем сейчас и нужно понять можно ли на нем такое развернуть (но я читал в гпт можно)

Задача Нужно создать стильный адаптивный email-шаблон по предоставленному тексту и подготовить его для загрузки в сервис email-рассылок. Что нужно сделать Разработать дизайн email. Сверстать адаптивный HTML email. Вставить предоставленный текст. Подготовить блоки под изображения и иконки. Добавить CTA-кнопки. Подготовить ссылки с UTM-метками. Сделать plain-text version письма. Проверить отображение в основных email-клиентах. Подготовить финальный файл для загрузки в сервис рассылки. Требования к дизайну Нужен чистый, современный, premium-style email. Письмо должно быть легко читаемым, не перегруженным, с понятной структурой, короткими текстовыми блоками, визуальными акцентами и несколькими CTA-кнопками. Технические требования адаптивная HTML email-верстка; корректное отображение на desktop и mobile; table-based layout; ширина контейнера примерно 600–700 px; inline CSS / email-compatible CSS; кнопки должны быть HTML/CSS, не картинками; все важные данные должны быть HTML-текстом; изображения должны иметь alt text; без JavaScript; без форм внутри email; корректная работа ссылок; подготовка UTM-меток для CTA. Проверка Нужно проверить отображение минимум в: Gmail; Apple Mail; Outlook; мобильных email-клиентах. На выходе нужно получить Готовый HTML-файл email. Plain-text version. Preview или screenshots desktop/mobile. Инструкцию, где менять ссылки, текст и изображения. Файл/версию, готовую для загрузки в сервис рассылки. В отклике, пожалуйста, приложите примеры HTML email-рассылок, которые вы делали, и укажите, с какими сервисами рассылок работали.

It is necessary to reproduce as accurately as possible:– the structure of the pages; – the layout of the blocks; – the catalog grid; – the sizes of the elements; – the margins; – the typography; – the colors; – the header and footer; – product cards – the menu structure; – menu categories; – modal windows; – adaptive behavior; – hover, active, and mobile states. – the product page must have microdata for products – Pages must be optimized according to Google SEO recommendations1. Type of siteResponsive online sushi delivery store.Main versions:– desktop – from 1280 px; – tablet – 768–1279 px; – mobile – 320–767 px.2. NavigationHomeCategoriesPromotionsAbout UsDelivery and PaymentContactsMenuProduct CardShopping CartPage TemplateThe “Page Template” block should contain:– header;– breadcrumb;— “up” arrow— Light and dark theme switcher with user choice retention.— A watermark with the logo on the background of the page— Fix an image of chopsticks on the right edge of the background— Footer ResultDeliver:– Figma mockup for desktop and mobile; – HTML files; – CSS; – JavaScript; – a folder with placeholders; – responsive version of the page; – archive of the completed project.The main requirement is the most accurate reproduction of the structure, design, and behavior of the page example.com

Продолжение проекта. Редизайн и перезапуск сайта стоматологической клиники Brovchak Family Dental Care 0680006609 http://brovchak-clinic.com.ua/ тз от сео-эксперта https://docs.google.com/spreadsheets/d/17_WyPf3XVpzbuBjpJ7MNFs12QUL-aHv7iIbKudY-IEw/edit?gid=0#gid=0 https://miro.com/app/board/uXjVHXxFvIE=/О проекте Необходимо выполнить полный редизайн существующего сайта стоматологической клиники на основе готового прототипа в Miro. Результат должен включать: UI/UX дизайн адаптивную верстку интеграцию на WordPress SEO-безопасный перезапуск техническую оптимизацию настройку аналитики возможность простого самостоятельного редактирования контента Критически важно: сайт должен не просто выглядеть современно, а улучшать бизнес-показатели и не потерять текущие SEO-позиции.Бизнес-цели проекта Редизайн выполняется для: увеличения количества заявок с сайта; повышения конверсии форм записи; усиления доверия к клинике; демонстрации экспертности врачей; презентации сложных клинических случаев; формирования премиального позиционирования; увеличения количества обращений на имплантацию, ортопедию и комплексное лечение.Визуальная концепцияПозиционирование Премиальная авторская стоматология. Не сетевая клиника. Не массовый поток пациентов. Индивидуальный подход, прогнозируемые результаты и сложные клинические решения.Эмоция, которую должен вызывать сайт "Здесь работают не просто стоматологи. Здесь команда экспертов создает долгосрочные и прогнозируемые решения, уделяя внимание каждой детали."Стиль Workshop / Dental Atelier. Авторская стоматология. Премиальный минимализм. Акцент на: микроскопии; навигационной имплантации; цифровом сканировании; гнатологии; сложных реабилитациях. Использовать: большие профессиональные фото врачей; фото врачей во время работы; реальные кейсы пациентов; фото клиники. Минимизировать или полностью исключить: стоковые фото; шаблонные стоматологические изображения; типовые дизайнерские решения сетевых клиник.SEO и перезапуск Критическое требование: Редизайн не должен привести к существенному падению органического трафика. Необходимо: сохранить SEO-структуру сайта; сохранить или корректно перенести URL; настроить 301 редиректы; перенести все метатеги; сохранить индексацию страниц; проверить robots.txt; проверить sitemap.xml; проверить canonical; проверить schema.org; выполнить SEO-аудит до и после запуска.KPI SEO Допустимое падение органического трафика после запуска: не более 10%. Предпочтение отдается исполнителям, которые имеют успешные кейсы SEO-безопасных миграций.UX и конверсия Сайт должен обеспечивать: быстрый доступ к записи на консультацию; понятную структуру услуг; простую навигацию; мобильную удобство; быстрый контакт с клиникой. Предусмотреть: CTA-блоки; формы записи; быстрый звонок; мессенджеры; блоки доверия; видеов отзывы; кейсы лечения.Технические требованияСкорость Google PageSpeed: Desktop — 90+ Mobile — 95+ Core Web Vitals должны соответствовать рекомендациям Google.Оптимизация Необходимо: оптимизировать CSS; оптимизировать JS; настроить кэширование; оптимизировать изображения; использовать WebP; минимизировать сторонние скрипты.Качество кода Важно: чистый код; отсутствие лишних плагинов; использование штатных возможностей WordPress и темы; совместимость с будущими обновлениями WordPress.AI-ассистент (агент) Необходимо предложить решение для внедрения AI-консультанта. Желательный функционал: ответы на типовые вопросы; запись на консультацию; интеграция с Telegram; интеграция с Instagram Direct; интеграция с Facebook Messenger; интеграция с Viber; передача лидов в CRM или администраторам, или в телеграм бот Прошу описать предложенное решение отдельно.Результат работы На выходе необходимо получить: Новый дизайн сайта. Адаптивную верстку. SEO-безопасный запуск. Оптимизированный код. Настроенную аналитику. Инструкцию для администратора. Гарантийное сопровождение после запуска. Реализация AI Search и AI-выдачи В рамках проекта необходимо реализовать отдельный комплекс работ по подготовке сайта к Google AI Overviews, AI Mode, ChatGPT, Gemini, Perplexity, Copilot и другим AI-поисковым системам. К работам входит: Проектирование карты сущностей клиники: организация, филиалы, врачи, услуги, кейсы, статьи, FAQ, видео и цены. Создание логических связей между: врачами и услугами; услугами и кейсами; услугами и FAQ; статьями и авторами; филиалами и доступными направлениями лечения. Реализация структурированных данных JSON-LD: Organization; MedicalClinic / Dentist; LocalBusiness; Person; ProfilePage; Service; MedicalProcedure — где семантически корректно; Article / BlogPosting; VideoObject; FAQPage; BreadcrumbList; WebSite; WebPage; ImageObject. Создание в WordPress структурированных типов контента: услуги; врачи; кейсы; статьи; FAQ; видео; филиалы; цены. Реализация ACF-связей между типами контента и автоматической генерации schema.org из утвержденных полей. Построение FAQ в трех уровнях: FAQ на страницах услуг; отдельные экспертные decision-guide страницы; общий центр вопросов пациентов. Обеспечение доступности основного контента в HTML без зависимости от клиентского JavaScript, изображений или PDF. Реализация авторства медицинского контента: автор; медицинский рецензент; дата публикации; дата обновления; ссылка на профиль врача. Добавление транскриптов к экспертным видео и связывание видео с услугами, врачами и кейсами. Проверка robots.txt, sitemap.xml, canonical, noindex, snippet controls и доступности сайта для поисковых и AI-краулеров. Настройка отслеживания AI-трафика: отдельная channel group в GA4; referrer-источники ChatGPT, Perplexity, Gemini, Copilot, Claude; передача источника в CRM и Telegram-заявки; отчет в Looker Studio; учет self-reported attribution от пациента. Создание базового набора запросов для регулярного мониторинга видимости клиники в AI-выдаче. Проверка структурированных данных через Rich Results Test и Schema Markup Validator. Подготовка инструкции для администратора: как добавлять FAQ; как создавать кейс; как указывать автора; как обновлять дату медицинского обзора; как добавлять видео и транскрипт; как связывать материал с услугой и врачом. другое.