Crypto Ikra — одностраничный промо-лендинг, который разработан для продвижения бренда/комьюнити. Сайт выполнен в тёмной “премиальной” стилистике с акцентными оранжевыми элементами и выразительной типографикой. Главный экран построен на полноэкранном фоновом видео, которое автоматически подбирается под устройство и ориентацию экрана (vertical/landscape). На странице реализованы переключатель языков, CTA-кнопки на Telegram/Instagram, а также аккуратные анимации и визуальные эффекты, усиливающие ощущение “дорогого” интерфейса.
Реализованный функционал
Адаптивная вёрстка и UI-композиция: hero-блок, типографика, CTA, контентные секции.
Video hero с адаптивным выбором источника (vertical/landscape) под ориентацию и размер экрана.
Оптимизация видео для быстрого старта: сжатие, faststart, контроль лишних загрузок.
Стабильный autoplay на iOS/Safari: playsInline + резервный сценарий запуска play() при необходимости.
Оптимизация производительности: отложенная загрузка медиа ниже первого экрана (lazy-load через IntersectionObserver).
Мультиязычность: переключатель языков и логика переводов через кастомный хук.
Связь с системой продаж
Лендинг является частью единого решения: CTA ведут в Telegram-бот для продаж (каталог → корзина → оформление заказа), который оформлен отдельным кейсом в портфолио.
Стек: React, TypeScript, Tailwind CSS, Vite, Lucide Icons.
#landing #react #typescript #tailwind #vite #frontend #multilanguage #performance #video
Реализованный функционал
Адаптивная вёрстка и UI-композиция: hero-блок, типографика, CTA, контентные секции.
Video hero с адаптивным выбором источника (vertical/landscape) под ориентацию и размер экрана.
Оптимизация видео для быстрого старта: сжатие, faststart, контроль лишних загрузок.
Стабильный autoplay на iOS/Safari: playsInline + резервный сценарий запуска play() при необходимости.
Оптимизация производительности: отложенная загрузка медиа ниже первого экрана (lazy-load через IntersectionObserver).
Мультиязычность: переключатель языков и логика переводов через кастомный хук.
Связь с системой продаж
Лендинг является частью единого решения: CTA ведут в Telegram-бот для продаж (каталог → корзина → оформление заказа), который оформлен отдельным кейсом в портфолио.
Стек: React, TypeScript, Tailwind CSS, Vite, Lucide Icons.
#landing #react #typescript #tailwind #vite #frontend #multilanguage #performance #video