diff --git a/src/features/stream-demo/RequestForDemo.tsx b/src/features/stream-demo/RequestForDemo.tsx
index 3237b18..15852ab 100644
--- a/src/features/stream-demo/RequestForDemo.tsx
+++ b/src/features/stream-demo/RequestForDemo.tsx
@@ -1,10 +1,13 @@
+import { useTranslation } from "react-i18next";
import BR from "@/components/Layout/LineBreak";
import { Button } from "@/ui/Button";
import QuestionFormModal from "@/components/modals/QuestionFormModal";
import { useModalStore } from "@/stores/useModalStore";
export default function RequestForDemo() {
+ const { t } = useTranslation();
const { setModal } = useModalStore();
+
return (
diff --git a/src/features/stream-demo/StreamPlayer.tsx b/src/features/stream-demo/StreamPlayer.tsx
index d56cd5a..526f09c 100644
--- a/src/features/stream-demo/StreamPlayer.tsx
+++ b/src/features/stream-demo/StreamPlayer.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
import { VideoPlayer } from "@/ui/VideoPlayer";
const viteBase = import.meta.env.BASE_URL;
@@ -7,6 +8,8 @@ const STREAMING_VIDEO_SRC =
: `${viteBase.replace(/\/$/, "")}/videos/streaming.mp4`;
export default function StreamPlayer({ className }: { className?: string }) {
+ const { t } = useTranslation();
+
return (
diff --git a/src/features/stream-demo/StreamingProject.tsx b/src/features/stream-demo/StreamingProject.tsx
index 4dd4ec8..956d8db 100644
--- a/src/features/stream-demo/StreamingProject.tsx
+++ b/src/features/stream-demo/StreamingProject.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
import { streamDemoUrlFromBuild } from "@/lib/streamDemoUrl";
import { resolveProjectImageSrc } from "@/lib/resolveProjectImageSrc";
import type { IProject } from "@/types";
@@ -21,6 +22,7 @@ export function StreamingProject({
count: number;
className?: string;
}) {
+ const { t } = useTranslation();
const imgSrc = resolveProjectImageSrc(image);
const build = buildFilename?.trim() ?? "";
const streamHref = build ? streamDemoUrlFromBuild(build) : href;
@@ -74,7 +76,7 @@ export function StreamingProject({
className="bg-gradient btns flex gap-2 items-center px-3 py-2 font-medium rounded-xl"
href={streamHref}
>
- Смотреть
+ {t("streamingProject.watch")}
@@ -85,7 +87,7 @@ export function StreamingProject({
className="max-lg:hidden lg:group-hover:opacity-100 opacity-0 transition-opacity duration-500 absolute w-full h-full left-0 bottom-0 md:max-lg:rounded-2xl rounded-xl font-medium [backdrop-filter:blur(3px)] content-center text-center z-[3]"
>
- Начать демонстрацию{" "}
+ {t("streamingProject.startDemo")}{" "}
diff --git a/src/hooks/useLocationSearch.ts b/src/hooks/useLocationSearch.ts
new file mode 100644
index 0000000..fad84bb
--- /dev/null
+++ b/src/hooks/useLocationSearch.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+/** Re-renders when `location.search` changes (popstate or custom `locationchange`). */
+export function useLocationSearch(): string {
+ const [search, setSearch] = useState(() => window.location.search);
+
+ useEffect(() => {
+ const sync = () => setSearch(window.location.search);
+ window.addEventListener("popstate", sync);
+ window.addEventListener("locationchange", sync);
+ return () => {
+ window.removeEventListener("popstate", sync);
+ window.removeEventListener("locationchange", sync);
+ };
+ }, []);
+
+ return search;
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..c17d1dc
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,29 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import en from "./locales/en.json";
+import ru from "./locales/ru.json";
+
+export type AppLocale = "ru" | "en";
+
+function langFromSearch(): AppLocale | null {
+ const raw = new URLSearchParams(window.location.search).get("lang");
+ const v = raw?.trim().toLowerCase();
+ if (v === "ru" || v === "en") return v;
+ return null;
+}
+
+function initialLng(): AppLocale {
+ return langFromSearch() ?? "en";
+}
+
+i18n.use(initReactI18next).init({
+ resources: {
+ ru: { translation: ru },
+ en: { translation: en },
+ },
+ lng: initialLng(),
+ fallbackLng: "en",
+ interpolation: { escapeValue: false },
+});
+
+export { i18n };
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
new file mode 100644
index 0000000..a597a47
--- /dev/null
+++ b/src/i18n/locales/en.json
@@ -0,0 +1,87 @@
+{
+ "languageSwitcher": {
+ "ru": "RU",
+ "en": "EN",
+ "ariaLabel": "Language"
+ },
+ "footer": {
+ "call": "Call",
+ "write": "Write",
+ "legalAddress": "Legal address:",
+ "addressLine1": "620063, Yekaterinburg,",
+ "addressLine2": "Bolshakova St., 66, apt. 6",
+ "mainStack": "Our core stack:",
+ "stackLine": "Unreal Engine 5, C++",
+ "requisites": "Company details:",
+ "inn": "TIN: 6679174128",
+ "kpp": "IEC: 667101001",
+ "company": "GRAFF.ESTATE LLC",
+ "ogrn": "PSRN 1246600010140",
+ "skolkovoAlt": "Skolkovo",
+ "privacy": "Privacy and personal data processing policy",
+ "copyright": "© 2026 GRAFF interactive. All rights reserved",
+ "site": "graff.tech"
+ },
+ "demos": {
+ "titleLine1": "Available",
+ "titleLine2": "demos",
+ "ctaTitle": "We’ll walk you through how it works on\u00a0a call",
+ "ctaButton": "Request a call",
+ "description": "Clients anywhere in the world can explore a residential complex, even at the zero stage of construction. They can pick the best layout and assess the view from the windows of their future apartment."
+ },
+ "streamingProject": {
+ "watch": "Watch",
+ "startDemo": "Start demo"
+ },
+ "requestDemo": {
+ "titleLine1": "Book",
+ "titleLine2": "a remote",
+ "titleLine3": "demo",
+ "description": "A demo booking can be embedded as a block on the developer’s or residential complex’s website.",
+ "cta": "Request a call"
+ },
+ "streamPlayer": {
+ "caption": "GRAFF.estate remote demo module works on\u00a0any device; all you need is an internet connection"
+ },
+ "feedback": {
+ "titleLead": "Want to improve conversion?",
+ "titleRest": "Let’s discuss the details."
+ },
+ "leadForm": {
+ "submitError": "Could not submit the request. Please try again later.",
+ "needTitle": "We need",
+ "namePlaceholder": "Name*",
+ "emailPlaceholder": "Email*",
+ "submit": "Submit request",
+ "consentBefore": "*By submitting, you give",
+ "consentLinkData": "consent to personal data processing",
+ "consentMiddle": "and accept the",
+ "consentLinkPolicy": "policy terms"
+ },
+ "questionModal": {
+ "phonePlaceholder": "+X (XXX) XXX - XX - XX"
+ },
+ "feedbackModal": {
+ "successRich": "We’ve received your request
and we’ll contact you
soon!",
+ "sourcesTitle1": "Please tell us",
+ "sourcesTitle2": "how you heard about us",
+ "send": "Send",
+ "skip": "Skip"
+ },
+ "products": {
+ "interactivePresentation": "Interactive presentation",
+ "remoteDemo": "Remote demonstration",
+ "archViz": "Architectural visualization",
+ "webDev": "Website development",
+ "webTour360": "360° web tour"
+ },
+ "modalFeedbackSources": [
+ "Saw us at an exhibition or forum",
+ "Saw it with other developers",
+ "From rankings and articles",
+ "Found online",
+ "Came from an ad",
+ "From a newsletter",
+ "Other"
+ ]
+}
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
new file mode 100644
index 0000000..b0c2202
--- /dev/null
+++ b/src/i18n/locales/ru.json
@@ -0,0 +1,87 @@
+{
+ "languageSwitcher": {
+ "ru": "RU",
+ "en": "EN",
+ "ariaLabel": "Язык"
+ },
+ "footer": {
+ "call": "Позвонить",
+ "write": "Написать",
+ "legalAddress": "Юридический адрес:",
+ "addressLine1": "620063, г. Екатеринбург,",
+ "addressLine2": "ул. Большакова, д. 66, кв. 6",
+ "mainStack": "Наш основной стек:",
+ "stackLine": "Unreal Engine 5, C++",
+ "requisites": "Реквизиты:",
+ "inn": "ИНН: 6679174128",
+ "kpp": "КПП: 667101001",
+ "company": "ООО \"ГРАФФ.ЭСТЕЙТ\"",
+ "ogrn": "ОГРН 1246600010140",
+ "skolkovoAlt": "Сколково",
+ "privacy": "Политика конфиденциальности и обработки персональных данных",
+ "copyright": "© 2026 GRAFF interactive. Все права защищены",
+ "site": "graff.tech"
+ },
+ "demos": {
+ "titleLine1": "Доступные",
+ "titleLine2": "демонстрации",
+ "ctaTitle": "Расскажем и покажем как это работает на\u00a0созвоне",
+ "ctaButton": "Оставить заявку",
+ "description": "Клиент из любой точки мира может посмотреть жилой комплекс, даже на нулевом этапе строительства. Он выберет лучшую планировку и оценит вид из окон своей будущей квартиры."
+ },
+ "streamingProject": {
+ "watch": "Смотреть",
+ "startDemo": "Начать демонстрацию"
+ },
+ "requestDemo": {
+ "titleLine1": "Запись",
+ "titleLine2": "на удаленную",
+ "titleLine3": "демонстрацию",
+ "description": "Запись на демонстрацию может быть оформлена в виде блока на сайте застройщика или жилого комплекса.",
+ "cta": "Оставить заявку"
+ },
+ "streamPlayer": {
+ "caption": "GRAFF.estate — модуль удаленной демонстрации — доступен на\u00a0любых устройствах, для\u00a0демонстрации нужен только интернет"
+ },
+ "feedback": {
+ "titleLead": "Хотите увеличить конверсию?",
+ "titleRest": "Давайте обсудим детали."
+ },
+ "leadForm": {
+ "submitError": "Не удалось отправить заявку. Попробуйте позже.",
+ "needTitle": "Нам нужно",
+ "namePlaceholder": "Имя*",
+ "emailPlaceholder": "Email*",
+ "submit": "Оставить заявку",
+ "consentBefore": "*Нажимая кнопку отправить, вы даете",
+ "consentLinkData": "согласие на обработку персональных данных",
+ "consentMiddle": "и принимаете",
+ "consentLinkPolicy": "условия политики"
+ },
+ "questionModal": {
+ "phonePlaceholder": "+X (XXX) XXX - XX - XX"
+ },
+ "feedbackModal": {
+ "successRich": "Мы получили заявку
и скоро свяжемся
с вами!",
+ "sourcesTitle1": "Расскажите, пожалуйста,",
+ "sourcesTitle2": "откуда вы узнали о нас?",
+ "send": "Отправить",
+ "skip": "Пропустить"
+ },
+ "products": {
+ "interactivePresentation": "Интерактивная презентация",
+ "remoteDemo": "Удаленная демонстрация",
+ "archViz": "Архитектурная визуализация",
+ "webDev": "Создание сайтов",
+ "webTour360": "Веб-тур по 360 сферам"
+ },
+ "modalFeedbackSources": [
+ "Увидели на выставке или форуме",
+ "Видели у других застройщиков",
+ "Из рейтингов и статей",
+ "Нашли в интернете",
+ "Перешли по рекламе",
+ "Из рассылки",
+ "Другое"
+ ]
+}
diff --git a/src/lib/productLabels.ts b/src/lib/productLabels.ts
new file mode 100644
index 0000000..3951cf9
--- /dev/null
+++ b/src/lib/productLabels.ts
@@ -0,0 +1,14 @@
+import type { TFunction } from "i18next";
+
+/** Order of product checkboxes in lead forms. */
+export const PRODUCT_I18N_KEYS = [
+ "products.interactivePresentation",
+ "products.remoteDemo",
+ "products.archViz",
+ "products.webDev",
+ "products.webTour360",
+] as const;
+
+export function productOptionsFromT(t: TFunction): string[] {
+ return PRODUCT_I18N_KEYS.map((key) => t(key));
+}
diff --git a/src/lib/urlLang.ts b/src/lib/urlLang.ts
new file mode 100644
index 0000000..02f17a0
--- /dev/null
+++ b/src/lib/urlLang.ts
@@ -0,0 +1,15 @@
+import type { AppLocale } from "@/i18n";
+
+export function parseLangParam(v: string | null): AppLocale | null {
+ const x = v?.trim().toLowerCase();
+ if (x === "ru" || x === "en") return x;
+ return null;
+}
+
+/** Updates `?lang=` without reload; fires `locationchange` for listeners. */
+export function setLangInUrl(lang: AppLocale): void {
+ const url = new URL(window.location.href);
+ url.searchParams.set("lang", lang);
+ window.history.replaceState({}, "", url.toString());
+ window.dispatchEvent(new Event("locationchange"));
+}
diff --git a/src/main.tsx b/src/main.tsx
index 19398db..739ac1b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,7 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
+import "@/i18n";
import App from "./App";
import { ModalContainer } from "@/components/Layout/ModalContainer";
import "./index.css";
diff --git a/src/queries/getCountryCode.ts b/src/queries/getCountryCode.ts
new file mode 100644
index 0000000..16f3bd1
--- /dev/null
+++ b/src/queries/getCountryCode.ts
@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+import ky from "ky";
+import { useLocationSearch } from "@/hooks/useLocationSearch";
+import { parseLangParam } from "@/lib/urlLang";
+import { queryKeys } from "@/queries/keys";
+
+const COUNTRY_CODE_URL = "https://stream.graff.tech/api/getCountryCode";
+
+export async function fetchCountryCode(): Promise<{ countryCode: string }> {
+ return ky.get(COUNTRY_CODE_URL).json<{ countryCode: string }>();
+}
+
+export function useCountryCodeQuery() {
+ const search = useLocationSearch();
+ const langFromUrl = parseLangParam(
+ new URLSearchParams(search).get("lang")
+ );
+
+ return useQuery({
+ queryKey: queryKeys.countryCode,
+ queryFn: fetchCountryCode,
+ enabled: langFromUrl === null,
+ staleTime: 24 * 60 * 60 * 1000,
+ retry: 2,
+ });
+}
diff --git a/src/queries/keys.ts b/src/queries/keys.ts
index 5d40c75..78f2344 100644
--- a/src/queries/keys.ts
+++ b/src/queries/keys.ts
@@ -1,4 +1,5 @@
export const queryKeys = {
projects: ["projects"] as const,
projectsWithTags: (tags: string[]) => ["projects", ...tags] as const,
+ countryCode: ["countryCode"] as const,
};
diff --git a/src/types/Product.ts b/src/types/Product.ts
index 5e5afed..2d9c946 100644
--- a/src/types/Product.ts
+++ b/src/types/Product.ts
@@ -1,6 +1,2 @@
-export type Product =
- | "Интерактивная презентация"
- | "Удаленная демонстрация"
- | "Создание сайтов"
- | "Архитектурная визуализация"
- | "Веб-тур по 360 сферам";
+/** Localized product label in the API payload (matches `t('products.*')` for the active locale). */
+export type Product = string;