Технічний запит
Коротке пояснення:
Необхідна цільова сторінка для агента з нерухомості. Центральною особливістю вебсайту є 3D голограмна модель, створена за допомогою фотограмметрії, з'єднана з AI інтерфейсом (ChatGPT з панеллю користувача) та інтегрована з CRM Zoho One.
Необхідна інформація:
Терміни та необхідне фінансування не повинні відхилятися більше ніж на 7% від запропонованої оцінки. Наголос слід робити на якості, а не на швидкості виконання.
Технічна специфікація:
1. Мінімалістичний, елегантний дизайн
• Чиста кольорова палітра (1 акцентний колір + монохром) з контрастом WCAG AA.
• 12-колонна CSS Grid з відстанню 4/8/16 пікселів.
• Типографіка: Inter для тексту та Playfair Display для заголовків.
• Стратегічний простір, що підкреслює 3D аватар.
• Мікро-анімації за допомогою CSS transform/GSAP (<150 КБ критичного JS).
• Оптимізація завантаження: критичний шлях рендерингу < 5с на 4G (LTE) або 4.5с на 5G. LCP (Largest Contentful Paint) < 2.5с відповідно до Google Core Web Vitals є обов'язковим. Використовуйте HTTP/2, стиснення Brotli, ліньке завантаження важких активів (IntersectionObserver) та попереднє рендеринг з Next.js ISR.
• Core Web Vitals ≥ 90; бюджет JavaScript ≤ 250 КБ, CLS (Cumulative Layout Shift) < 0.1.
2. 3D голограмна модель з інтеграцією GPT
• Персонаж базується на фотограмметричному скануванні реального ріелтора, обробленого через Metahuman Retarget.
• Високополігональна майстер-модель (100–150k трис) оптимізована до LOD 0 (<30k трис) з стисненням DRACO-GLB < 3MB, щоб запобігти затримкам у браузері.
• Окремий високополігональний шар/скелет експортований у .FBX для офлайн рендерингу рекламних відео, зберігаючи постійну топологію.
• Шейдер "Голограма" (GLSL): ефект Френеля + скануючі лінії + шумове розчинення, з тригером 0.5с.
• Синхронізація губ за допомогою візем, сумісна з ElevenLabs-TTS для потокового мовлення в реальному часі; анімації бездіяльності, розмови, жестів.
• Стек діалогу: WebWidget → GPT-4o → ElevenLabs → D-ID/HeyGen Live.
• Попередньо визначені питання (багато сценаріїв буде визначено пізніше); GPT генерує змінні відповіді, CRM webhook → Zoho One.
• Кнопка "Зв'язатися з агентом" або "Відправити запит", що ініціює подачу форм (підготовлені форми з Zoho) або чат/бронювання календаря SalesIQ.
3. Структура вебсайту та розподіл контенту
• Головна сторінка як основна воронка. 3D аватар займає ≤55% видимого простору (CSS Grid: 7/12 колонок), залишаючи місце для USP (унікальна торгова пропозиція), CTA (заклик до дії) та динамічного блоку списків, інтегрованого з Zoho.
• Розділ 'Власності': слайдер з 3 активними списками (Zoho CRM API → Next.js ISR оновлення кожні 60 секунд).
• Основна навігація та Next.js AppRouter для легкого розширення сайту без значних переробок.
Потенційні доповнення:
• Розділ 'Переваги компанії' – 3 іконки + стислі пункти.
• Розділ 'Відгуки' з лінько завантаженою галереєю WebP.
• Футер, що містить політику, контакти та посилання на соціальні мережі.
• Додаткові шаблонні сторінки: /listings/[id] (деталі власності) та /privacy.