diff --git a/messages/pl.json b/messages/pl.json
index a6a89d1..c2043ea 100644
--- a/messages/pl.json
+++ b/messages/pl.json
@@ -5,13 +5,15 @@
"homeTitle": "Konfiguratory 3D dla e-commerce i B2B | Ultifide",
"homeDescription": "Landing Ultifide dla konfiguratorów 3D: produktowych, wnętrzarskich i modułowych. Zobacz dema i sprawdź, jak możemy wdrożyć konfigurator w Twoim sklepie.",
"demosPageTitle": "Dema konfiguratorów 3D | Ultifide",
- "demosPageDescription": "Lista interaktywnych dem konfiguratorów 3D Ultifide z podglądem biurka, wnętrz i drzwi.",
+ "demosPageDescription": "Lista interaktywnych dem konfiguratorów 3D Ultifide z podglądem biurka, wnętrz, drzwi i produktu Dart.",
"deskTitle": "Konfigurator 3D biurka | Ultifide",
"deskDescription": "Poznaj konfigurator 3D, który zwiększa konwersję i pozwala klientom tworzyć własne biurka regulowane w czasie rzeczywistym.",
"roomTitle": "Konfigurator 3D wnętrz | Ultifide",
"roomDescription": "Poznaj konfigurator 3D, który pozwala klientom projektować całe pomieszczenia i zestawy mebli w czasie rzeczywistym.",
"doorTitle": "Konfigurator 3D drzwi | Ultifide",
- "doorDescription": "Poznaj konfigurator 3D drzwi, który pozwala klientom dobrać model, kolor, przeszklenie, klamkę i detale w czasie rzeczywistym."
+ "doorDescription": "Poznaj konfigurator 3D drzwi, który pozwala klientom dobrać model, kolor, przeszklenie, klamkę i detale w czasie rzeczywistym.",
+ "dartTitle": "Konfigurator 3D Dart | Ultifide",
+ "dartDescription": "Poznaj konfigurator 3D produktu Dart, który pozwala klientom dobrać wariant, kolor i detale w czasie rzeczywistym."
},
"navigation": {
"dema": "Dema",
@@ -68,7 +70,8 @@
"labels": {
"demo-pokoj": "Wnętrza",
"demo-drzwi": "Drzwi",
- "demo-biurko": "Biurko"
+ "demo-biurko": "Biurko",
+ "demo-dart": "Dart"
}
},
"heroVisual": {
@@ -255,6 +258,40 @@
"description": "Konfigurator 3D porządkuje wybór, skraca rozmowy sprzedażowe i ogranicza ryzyko pomyłek w specyfikacji.",
"button": "Umów rozmowę"
}
+ },
+ "dart": {
+ "slug": "demo-dart",
+ "eyebrow": "",
+ "title": "Konfigurator - Dart",
+ "intro": "Pozwól klientom personalizować produkt Dart i sprawdzać wybrane warianty w interaktywnym podglądzie 3D.",
+ "description": "Konfigurator Dart pokazuje, jak można prowadzić klienta przez wybór wariantu, koloru i detali produktu z natychmiastowym podglądem oraz gotową konfiguracją do dalszego procesu sprzedaży.",
+ "imageUrl": "/demo-dart-preview.png",
+ "openLabel": "Otwórz konfigurator Dart",
+ "benefitsIntro": "Dla marek, które sprzedają produkty z wariantami wizualnymi i chcą uprościć wybór bez mnożenia statycznych wizualizacji.",
+ "stats": [
+ {"value": "25%", "label": "wyższa konwersja na stronach produktowych"},
+ {"value": "35%", "label": "mniej zapytań o warianty i specyfikację"},
+ {"value": "3x", "label": "szybsze podejmowanie decyzji zakupowej"}
+ ],
+ "benefits": [
+ {"title": "Szybki wybór wariantu", "description": "Klient może porównać dostępne opcje produktu bez przechodzenia między wieloma zdjęciami."},
+ {"title": "Podgląd w czasie rzeczywistym", "description": "Zmiany kolorów, materiałów i detali są widoczne od razu w scenie 3D."},
+ {"title": "Mniej niejasności", "description": "Interaktywny podgląd ogranicza pytania o wygląd konfiguracji i różnice między wariantami."},
+ {"title": "Gotowość do sprzedaży", "description": "Wybrana konfiguracja może zostać przekazana do koszyka, zapytania ofertowego lub CRM."},
+ {"title": "Dopasowanie do marki", "description": "Interfejs i sposób prezentacji można przygotować pod identyfikację sklepu lub producenta."},
+ {"title": "Rozbudowa katalogu", "description": "System można rozszerzać o kolejne linie produktowe, materiały, kolory i reguły biznesowe."}
+ ],
+ "faq": [
+ {"question": "Czy konfigurator Dart można dopasować do mojego produktu?", "answer": "Tak. Ten typ konfiguratora można wykorzystać dla różnych produktów z wariantami wizualnymi, kolorami, materiałami i detalami."},
+ {"question": "Czy mogę dodać własne modele i warianty?", "answer": "Tak. Możemy pracować na dostarczonych modelach albo przygotować i zoptymalizować je pod konfigurator."},
+ {"question": "Czy konfiguracja może trafić do koszyka lub CRM?", "answer": "Tak. Wybrane opcje mogą zostać przekazane do koszyka, formularza zapytania, CRM, ERP albo panelu B2B."},
+ {"question": "Czy wygląd konfiguratora można dopasować do marki?", "answer": "Tak. UI, kolory, branding i sposób prezentacji mogą wyglądać jak natywna część Twojego sklepu."}
+ ],
+ "cta": {
+ "title": "Pokaż klientom produkt dokładnie w wybranym wariancie",
+ "description": "Konfigurator Dart porządkuje wybór, zwiększa pewność zakupu i skraca drogę od zainteresowania do zapytania lub koszyka.",
+ "button": "Umów rozmowę"
+ }
}
}
}
diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
///
///
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/public/demo-dart-preview.png b/public/demo-dart-preview.png
new file mode 100644
index 0000000..d76e1f5
Binary files /dev/null and b/public/demo-dart-preview.png differ
diff --git a/src/app/[locale]/demo-dart/page.tsx b/src/app/[locale]/demo-dart/page.tsx
new file mode 100644
index 0000000..96f375a
--- /dev/null
+++ b/src/app/[locale]/demo-dart/page.tsx
@@ -0,0 +1,13 @@
+import type {Metadata} from 'next';
+import {DemoPage} from '@/components/DemoPage';
+import {demoContent} from '@/config/content';
+import messages from '../../../../messages/pl.json';
+
+export const metadata: Metadata = {
+ title: messages.metadata.dartTitle,
+ description: messages.metadata.dartDescription
+};
+
+export default function DartDemoPage() {
+ return ;
+}
diff --git a/src/app/globals.scss b/src/app/globals.scss
index 97d2ad4..fee4d67 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -734,7 +734,7 @@ p {
}
.demoCards {
- grid-template-columns: repeat(3, minmax(0, 1fr));
+ grid-template-columns: repeat(2, minmax(0, 1fr));
}
.demoCard {
@@ -803,7 +803,7 @@ p {
.demoSubnav {
display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
diff --git a/src/components/DemoFrame.tsx b/src/components/DemoFrame.tsx
index f0d91a1..71ff655 100644
--- a/src/components/DemoFrame.tsx
+++ b/src/components/DemoFrame.tsx
@@ -14,11 +14,6 @@ type DemoFrameProps = {
export function DemoFrame({title, url, openLabel}: DemoFrameProps) {
const t = useTranslations('common');
const [isFullscreen, setIsFullscreen] = useState(false);
- const [isMounted, setIsMounted] = useState(false);
-
- useEffect(() => {
- setIsMounted(true);
- }, []);
useEffect(() => {
if (!isFullscreen) {
@@ -42,7 +37,7 @@ export function DemoFrame({title, url, openLabel}: DemoFrameProps) {
}, [isFullscreen]);
const overlay =
- isFullscreen && isMounted
+ isFullscreen
? createPortal(