path correction

src/admin/App.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, Component } from 'react';
+import { useEffect, useState, useRef, Component } from 'react';
 
 const BASE = import.meta.env.BASE_URL;
 import {
@@ -72,6 +72,25 @@ function Toast({ message, type }) {
 }
 
 function LoginPreview() {
+  const viewportRef = useRef(null);
+  const [scale, setScale] = useState(0.5);
+  const previewWidth = 1280;
+  const previewHeight = 800;
+
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+
+    const updateScale = () => {
+      const nextScale = el.clientWidth / previewWidth;
+      setScale(nextScale);
+    };
+
+    updateScale();
+    const observer = new ResizeObserver(updateScale);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
   return (
     <div className="login-preview">
       <div className="login-preview-intro">
@@ -85,6 +104,35 @@ function LoginPreview() {
           Open full site
         </a>
       </div>
+       <div className="login-preview-shell">
+        <div className="login-preview-chrome">
+          <span className="login-preview-dot" />
+          <span className="login-preview-dot" />
+          <span className="login-preview-dot" />
+          <span className="login-preview-url">cavininfotech.com</span>
+        </div>
+        <div
+          className="login-preview-viewport"
+          ref={viewportRef}
+          style={{ height: previewHeight * scale }}
+        >
+          <div
+            className="login-preview-stage"
+            style={{ width: previewWidth * scale, height: previewHeight * scale }}
+          >
+            <iframe
+              src={BASE}
+              title="Website preview"
+              className="login-preview-iframe"
+              style={{
+                width: previewWidth,
+                height: previewHeight,
+                transform: `scale(${scale})`,
+              }}
+            />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }