add dart demo

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;