Сделай точную копию этого экрана. Клонируй, не интерпретируй.
Я прикрепил скриншот мобильного приложения. Мне нужно чтобы результат был визуально идентичен -- те же пропорции, те же цвета, та же композиция, те же отступы, тот же стиль карточек. Не добавляй ничего от себя, не улучшай, не переосмысляй.
Что нужно знать:
- Вместо картинок аватаров внутри круглых рамок -- поставь серые заглушки (div с серым фоном), я заменю их потом
- Названия карточек оставь как на скриншоте: "Gacha Nebula", "Gacha Heat", "Gacha Nox", "Gacha Nymph", "Gacha Pick Me Up", "Gacha Yune", "Gacha Art", "Gacha Star"
- Текст кнопки "CONTINUE"
- Заголовок "DISCOVER NEW GACHA MODS"
- Цвета на скриншоте приглушены из-за сжатия картинки. На реальном экране устройства все цвета яркие и насыщенные -- фиолетовые сочные, свечения неоновые. Ориентируйся на живой экран, а не на тусклый скриншот.
Технические требования:
- Next.js App Router + Tailwind CSS
- Не используй компоненты shadcn/ui -- пиши всё на чистом Tailwind
- Карточку вынеси в отдельный компонент
- Не используй design tokens из globals.css -- весь визуал только в компонентах
I'll create an exact clone of this Gacha mods discovery screen. Let me build the card component and main page with the exact layout, colors, and styling from the screenshot.
Создал точную копию экрана с Gacha модами. Все элементы размещены идентично оригиналу: яркий фиолетовый градиент с неоновыми свечениями, сетка 2x4 карточек с полупрозрачным фоном и белыми рамками, серые заглушки вместо аватаров, и кнопка CONTINUE внизу. Карточки вынесены в отдельный компонент, все стили написаны на чистом Tailwind без использования shadcn/ui.
Добавил iPhone контейнер с фиксированными размерами 390x844px, отцентрированный на странице с тёмным фоном #111. На мобильных устройствах (ширина до 430px) контейнер растягивается на весь экран. Весь существующий дизайн остался нетронутым, только обёрнут в новый контейнер.
Контент не помещается в телефонный фрейм. Пересмотри размеры ВСЕХ элементов чтобы всё поместилось в 390×844px БЕЗ скролла:
- Заголовок: максимум 2 строки, шрифт поменьше
- Карточки: компактнее, круги ~64px, gap между карточками ~8px
- Всё должно влезть в один экран: заголовок + 8 карточек (4 ряда по 2) + кнопка CONTINUE
- Посмотри на прикреплённый скриншот — там всё помещается в один экран iPhone
Не меняй стиль — только размеры чтобы всё влезло.
