add dart demo

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ę"
+      }
     }
   }
 }

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-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.

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 <DemoPage demo={demoContent.dart} />;
+}

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;
 }

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(
           <div
             className="demoFrameOverlay"

src/config/content.ts

@@ -23,9 +23,10 @@ function createDemoContent(demo: DemoMessages, iframeUrl: string): DemoContent {
 export const demoContent = {
   room: createDemoContent(messages.demos.room, demoUrls.room),
   door: createDemoContent(messages.demos.door, demoUrls.door),
-  desk: createDemoContent(messages.demos.desk, demoUrls.desk)
+  desk: createDemoContent(messages.demos.desk, demoUrls.desk),
+  dart: createDemoContent(messages.demos.dart, demoUrls.dart)
 } as const;
 
-export const orderedDemos: DemoContent[] = [demoContent.room, demoContent.door, demoContent.desk];
+export const orderedDemos: DemoContent[] = [demoContent.room, demoContent.door, demoContent.desk, demoContent.dart];
 
 export const marketingFaq: FaqItem[] = messages.marketingFaq;

src/config/demoUrls.ts

@@ -1,5 +1,6 @@
 export const demoUrls = {
-  desk: 'https://3d-desk-demo.ultifide.com/',
-  room: 'https://3d-demo.ultifide.com/room-editor?h=1',
-  door: 'https://3d-demo.ultifide.com/product-configurator/door'
+  desk: 'https://3d-demo.ultifide.com/product-configurator/desk',
+  room: 'https://3d-demo.ultifide.com/room-editor',
+  door: 'https://3d-demo.ultifide.com/product-configurator/door',
+  dart: 'https://3d-demo.ultifide.com/product-configurator/dart'
 } as const;

src/types/content.ts

@@ -19,7 +19,7 @@ export type FaqItem = {
 };
 
 export type DemoContent = {
-  slug: 'demo-pokoj' | 'demo-drzwi' | 'demo-biurko';
+  slug: 'demo-pokoj' | 'demo-drzwi' | 'demo-biurko' | 'demo-dart';
   title: string;
   eyebrow: string;
   intro: string;