Update src/app/page.tsx

Merge version_9 into main

src/app/globals.css

@@ -1,5 +1,40 @@
-@import "tailwindcss";
-@import "./styles/variables.css";
-@import "./styles/theme.css";
-@import "./styles/utilities.css";
-@import "./styles/base.css";
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-semibold;
+  }
+}
+
+@layer components {
+  .primary-button {
+    @apply bg-primary-cta text-primary-cta-text;
+  }
+
+  .secondary-button {
+    @apply bg-secondary-cta text-secondary-cta-text;
+  }
+
+  .star-rating-golden {
+    --star-color: #FFD700;
+    --star-glow: 0 0 10px rgba(255, 215, 0, 0.6);
+  }
+
+  .star-rating-golden svg {
+    fill: #FFD700;
+    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
+  }
+}

src/app/layout.tsx

@@ -3,10 +3,11 @@ import { Poppins } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
-import { Inter } from "next/font/google";
-import { Open_Sans } from "next/font/google";
-import { Figtree } from "next/font/google";
 
+const poppins = Poppins({
+  variable: "--font-poppins",  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
 
 export const metadata: Metadata = {
   title: "Mond Design | Премиум веб-агентство",  description: "Профессиональные услуги веб-дизайна и разработки для бизнеса. Адаптивные веб-сайты, мобильная оптимизация и современные решения для повышения вашего онлайн-присутствия.",  keywords: "веб-дизайн, веб-разработка, адаптивные сайты, создание сайтов, цифровые решения, веб-агентство",  metadataBase: new URL("https://monddesign.ru"),
@@ -31,14 +32,6 @@ export const metadata: Metadata = {
   }
 };
 
-
-
-const poppins = Poppins({
-  variable: "--font-poppins",
-  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-});
-
 export default function RootLayout({
   children
 }: Readonly<{
@@ -292,7 +285,9 @@ export default function RootLayout({
   const getElementInfo = (element, assignId = false) => {
     const rect = element.getBoundingClientRect();
     const tagName = element.tagName.toLowerCase();
-            
+    const selector = getUniqueSelector(element, assignId);
+    const sectionId = getSectionId(element);
+    
     let className = undefined;
     try {
       if (element.className) {
@@ -320,7 +315,8 @@ export default function RootLayout({
     };
     
     if (tagName === 'img') {
-            info.imageData = {
+      const originalSrc = extractOriginalUrl(element.src);
+      info.imageData = {
         src: originalSrc,
         alt: element.alt || undefined,
         naturalWidth: element.naturalWidth,
@@ -331,7 +327,8 @@ export default function RootLayout({
 
     if (tagName === 'video') {
       const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
-            info.imageData = {
+      const resolvedSrc = extractOriginalUrl(rawSrc);
+      info.imageData = {
         src: resolvedSrc,
         alt: element.getAttribute('aria-label') || undefined,
         isBackground: false,
@@ -344,7 +341,8 @@ export default function RootLayout({
     if (backgroundImage && backgroundImage !== 'none') {
       const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
       if (urlMatch) {
-                if (tagName !== 'img') {
+        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
+        if (tagName !== 'img') {
           info.imageData = {
             src: originalBgSrc,
             isBackground: true
@@ -356,7 +354,8 @@ export default function RootLayout({
       }
     }
     
-        info.elementType = elementType;
+    const elementType = getElementType(element);
+    info.elementType = elementType;
     
     if (elementType === 'Button') {
       const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
@@ -449,11 +448,13 @@ export default function RootLayout({
   };
 
   const isTextElement = (element) => {
-        return elementType === 'Text';
+    const elementType = getElementType(element);
+    return elementType === 'Text';
   };
 
   const isButtonElement = (element) => {
-        return elementType === 'Button';
+    const elementType = getElementType(element);
+    return elementType === 'Button';
   };
 
   const updateButtonText = (element, newText) => {
@@ -528,7 +529,8 @@ export default function RootLayout({
     };
     
     const handleInput = () => {
-            let currentText = element.textContent;
+      const elementInfo = getElementInfo(element);
+      let currentText = element.textContent;
       
       // Ensure there's always at least a space to keep the element editable
       if (currentText === '' || currentText === null || currentText.length === 0) {
@@ -641,7 +643,8 @@ export default function RootLayout({
     }, '*');
     
     if (save && originalContent !== element.textContent) {
-            let finalText = element.textContent;
+      const elementInfo = getElementInfo(element);
+      let finalText = element.textContent;
       
       // Trim the final text and convert space-only to empty string for saving
       if (finalText === ' ' || finalText.trim() === '') {
@@ -770,7 +773,7 @@ export default function RootLayout({
     lastMouseX = e.clientX;
     lastMouseY = e.clientY;
 
-    || e.target;
+    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
 
     if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
       return;
@@ -802,7 +805,8 @@ export default function RootLayout({
       hoverOverlay = createHoverOverlay(target);
     }
     
-        showElementTypeLabel(target, elementType);
+    const elementType = getElementType(target);
+    showElementTypeLabel(target, elementType);
     
     window.parent.postMessage({
       type: 'webild-element-hover',
@@ -844,7 +848,7 @@ export default function RootLayout({
   e.preventDefault();
   e.stopPropagation();
 
-  || e.target;  
+  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
   if (!isValidElement(target)) return;
     
     if (selectedElement && selectedElement !== target) {
@@ -889,7 +893,8 @@ export default function RootLayout({
       hoveredElement = null;
     }
     
-        selectedElement.dataset.webildSelector = elementInfo.selector;
+    const elementInfo = getElementInfo(target, true);
+    selectedElement.dataset.webildSelector = elementInfo.selector;
     showElementTypeLabel(target, elementInfo.elementType);
     
     window.parent.postMessage({
@@ -972,7 +977,8 @@ export default function RootLayout({
       isScrolling = false;
 
       if (lastMouseX > 0 && lastMouseY > 0) {
-                if (target && isValidElement(target) && target !== selectedElement) {
+        const target = getMostSpecificElement(lastMouseX, lastMouseY);
+        if (target && isValidElement(target) && target !== selectedElement) {
           hoveredElement = target;
 
           const computedStyle = window.getComputedStyle(target);
@@ -986,7 +992,8 @@ export default function RootLayout({
           hoveredElement.classList.add(hoverClass);
           hoverOverlay = createHoverOverlay(target);
 
-                    showElementTypeLabel(target, elementType);
+          const elementType = getElementType(target);
+          showElementTypeLabel(target, elementType);
 
           window.parent.postMessage({
             type: 'webild-element-hover',
@@ -1009,7 +1016,8 @@ export default function RootLayout({
 
   const saveChangeToStorage = (change) => {
     try {
-            const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
+      const storageKey = getStorageKey();
+      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
 
       const filteredChanges = existingChanges.filter(c => {
         return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
@@ -1029,7 +1037,8 @@ export default function RootLayout({
 
   const clearLocalChanges = () => {
     try {
-            localStorage.removeItem(storageKey);
+      const storageKey = getStorageKey();
+      localStorage.removeItem(storageKey);
       window.parent.postMessage({
         type: 'webild-local-changes-cleared',
         data: {}
@@ -1078,7 +1087,8 @@ export default function RootLayout({
 
     if (e.data.type === 'webild-cancel-changes') {
       try {
-                const savedChanges = localStorage.getItem(storageKey);
+        const storageKey = getStorageKey();
+        const savedChanges = localStorage.getItem(storageKey);
         if (savedChanges) {
           const changes = JSON.parse(savedChanges);
           changes.forEach(change => {
@@ -1100,7 +1110,8 @@ export default function RootLayout({
                 if (isBackground) {
                   element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
                 } else {
-                                    if (revertTag === 'video' && oldMediaType === 'image') {
+                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
+                  if (revertTag === 'video' && oldMediaType === 'image') {
                     swapMediaElement(element, 'img', change.oldValue);
                   } else if (revertTag === 'img' && oldMediaType === 'video') {
                     swapMediaElement(element, 'video', change.oldValue);
@@ -1148,7 +1159,8 @@ export default function RootLayout({
               const el = textElements[i];
               if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
                 element = el;
-                                if (newSelector) {
+                const newSelector = getUniqueSelector(element, true);
+                if (newSelector) {
                   element.dataset.webildSelector = newSelector;
                 }
                 break;
@@ -1239,8 +1251,10 @@ export default function RootLayout({
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'img') {
           oldValue = element.src;
-                    if (newMediaType === 'video' && allowMediaTypeSwap) {
-                        if (selectedElement === element) selectedElement = swapped;
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          if (newMediaType === 'video' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'video', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
             element = swapped;
           } else {
             element.src = newSrc;
@@ -1248,9 +1262,11 @@ export default function RootLayout({
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'video') {
           oldValue = element.src || element.currentSrc || '';
-                    const sources = element.querySelectorAll('source');
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          const sources = element.querySelectorAll('source');
           if (newMediaType === 'image' && allowMediaTypeSwap) {
-                        if (selectedElement === element) selectedElement = swapped;
+            const swapped = swapMediaElement(element, 'img', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
             element = swapped;
           } else {
             if (sources.length > 0) {
@@ -1272,7 +1288,8 @@ export default function RootLayout({
         }
 
         if (replaced) {
-          
+          const elementInfo = getElementInfo(element);
+
           let cleanOldValue = oldValue;
           if (oldValue.includes('url(')) {
             const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -1343,7 +1360,13 @@ export default function RootLayout({
     }
   }, true);
   
-    
+  const urlCheckInterval = setInterval(() => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, 500);
+  
   notifyPageChange();
   
   window.webildCleanup = () => {

src/app/page.tsx

@@ -42,7 +42,7 @@ export default function HomePage() {
 
       <div id="hero" data-section="hero" className="min-h-screen py-20">
         <HeroLogoBillboardSplit
-          logoText="Mond"
+          logoText=""
           description="Премиальные веб-решения для бизнеса, требующего совершенства. Мы создаём адаптивные, высокопроизводительные веб-сайты, которые превращают посетителей в клиентов."
           background={{ variant: "radial-gradient" }}
           buttons={[
@@ -118,6 +118,7 @@ export default function HomePage() {
           textboxLayout="default"
           useInvertedBackground={false}
           buttonAnimation="none"
+          ratingClassName="star-rating-golden"
         />
       </div>