Update theme colors

Merge version_5 into main

src/app/about/page.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="floatingGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Luxe Haven"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Rooms & Suites", id: "/#about" },
+            { name: "Amenities", id: "/#features" },
+            { name: "Guests Love Us", id: "/#testimonials" },
+            { name: "Booking", id: "/#pricing" },
+            { name: "About", id: "about" }
+          ]}
+          button={{
+            text: "Reserve Now",            href: "/#pricing"
+          }}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <MediaAbout
+          title="Our Story & Mission"
+          description="Luxe Haven was founded with a singular vision: to redefine luxury hospitality. For over two decades, we've been committed to providing world-class accommodations, impeccable service, and unforgettable experiences. Our journey began with a passion for excellence and has evolved into a beacon of luxury in the hospitality industry."
+          tag="Our Heritage"
+          imageSrc="http://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg?_wi=2"
+          imageAlt="Luxe Haven heritage and excellence"
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Explore Our Rooms", href: "/#about" }
+          ]}
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardTwentyTwo
+          title="Our Commitment to Excellence"
+          description="Every aspect of Luxe Haven reflects our dedication to luxury, comfort, and exceptional service."
+          tag="Values"
+          features={[
+            {
+              id: "1",              category: ["Quality", "Service"],
+              title: "Uncompromising Quality Standards",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-is-relaxing-jacuzzi_169016-22940.jpg?_wi=2",              imageAlt: "Premium quality and service standards"
+            },
+            {
+              id: "2",              category: ["Innovation", "Technology"],
+              title: "Cutting-Edge Technology",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-table-with-cheese-plate-pate-it_140725-12866.jpg?_wi=2",              imageAlt: "Modern technology integration"
+            },
+            {
+              id: "3",              category: ["Sustainability", "Environment"],
+              title: "Environmental Responsibility",              imageSrc: "http://img.b2bpic.net/free-photo/umbrella-deck-chair-around-outdoor-swimming-pool-hotel-resort-nearly-sea-beach-ocean_74190-14080.jpg?_wi=2",              imageAlt: "Sustainable luxury practices"
+            },
+            {
+              id: "4",              category: ["Community", "Care"],
+              title: "Community Engagement",              imageSrc: "http://img.b2bpic.net/free-photo/tourists-going-through-check-process-hotel-reception-desk_482257-82845.jpg?_wi=2",              imageAlt: "Community and social responsibility"
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Luxe Haven"
+          columns={[
+            {
+              title: "Rooms",              items: [
+                { label: "Standard Room", href: "/#pricing" },
+                { label: "Deluxe Suite", href: "/#pricing" },
+                { label: "Presidential Suite", href: "/#pricing" }
+              ]
+            },
+            {
+              title: "Amenities",              items: [
+                { label: "Spa & Wellness", href: "/#features" },
+                { label: "Fine Dining", href: "/#features" },
+                { label: "Swimming Pool", href: "/#features" },
+                { label: "Concierge Service", href: "/#features" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Guest Reviews", href: "/#testimonials" },
+                { label: "Contact", href: "/#contact" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms & Conditions", href: "#" },
+                { label: "Booking Policies", href: "#" },
+                { label: "Cancellation Policy", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Luxe Haven Hotels. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -3,10 +3,10 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
-import { Raleway } from "next/font/google";
-import { Libre_Baskerville } from "next/font/google";
-import { Open_Sans } from "next/font/google";
 
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
   title: "Luxe Haven - Premium Hotel & Resort Accommodations",  description: "Experience luxury at Luxe Haven. Book your stay in our world-class suites with fine dining, spa wellness, and 24/7 concierge service.",  keywords: "luxury hotel, premium accommodations, resort, spa, fine dining, bookings",  metadataBase: new URL("https://luxehaven.com"),
@@ -29,13 +29,6 @@ export const metadata: Metadata = {
   }
 };
 
-
-
-const openSans = Open_Sans({
-  variable: "--font-open-sans",
-  subsets: ["latin"],
-});
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -44,7 +37,9 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body className={`${openSans.variable} antialiased`}>
+        <body
+          className={`${inter.variable} antialiased`}
+        >
           <Tag />
           {children}
         
@@ -289,7 +284,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) {
@@ -317,7 +314,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,
@@ -328,7 +326,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,
@@ -341,7 +340,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
@@ -353,7 +353,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') || '';
@@ -446,11 +447,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) => {
@@ -525,7 +528,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) {
@@ -638,7 +642,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() === '') {
@@ -767,7 +772,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;
@@ -799,7 +804,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',
@@ -841,7 +847,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) {
@@ -886,7 +892,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({
@@ -969,7 +976,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);
@@ -983,7 +991,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',
@@ -1006,7 +1015,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);
@@ -1026,7 +1036,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: {}
@@ -1075,7 +1086,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 => {
@@ -1097,7 +1109,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);
@@ -1145,7 +1158,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;
@@ -1236,8 +1250,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;
@@ -1245,9 +1261,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) {
@@ -1269,7 +1287,8 @@ export default function RootLayout({
         }
 
         if (replaced) {
-          
+          const elementInfo = getElementInfo(element);
+
           let cleanOldValue = oldValue;
           if (oldValue.includes('url(')) {
             const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -1340,7 +1359,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

@@ -34,7 +34,8 @@ export default function LandingPage() {
             { name: "Rooms & Suites", id: "about" },
             { name: "Amenities", id: "features" },
             { name: "Guests Love Us", id: "testimonials" },
-            { name: "Booking", id: "pricing" }
+            { name: "Booking", id: "pricing" },
+            { name: "About", id: "/about" }
           ]}
           button={{
             text: "Reserve Now",            href: "#pricing"
@@ -65,7 +66,7 @@ export default function LandingPage() {
           title="Rooms & Suites Beyond Compare"
           description="Each room is meticulously designed with premium furnishings, modern technology, and stunning views. From cozy standard rooms to lavish suites, we offer accommodations for every traveler."
           tag="Accommodations"
-          imageSrc="http://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg?_wi=1"
           imageAlt="Luxurious hotel room with premium amenities"
           useInvertedBackground={false}
           buttons={[
@@ -82,19 +83,19 @@ export default function LandingPage() {
           features={[
             {
               id: "1",              category: ["Wellness", "Relaxation"],
-              title: "Full-Service Spa & Wellness Center",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-is-relaxing-jacuzzi_169016-22940.jpg",              imageAlt: "Premium spa and wellness center"
+              title: "Full-Service Spa & Wellness Center",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-is-relaxing-jacuzzi_169016-22940.jpg?_wi=1",              imageAlt: "Premium spa and wellness center"
             },
             {
               id: "2",              category: ["Dining", "Cuisine"],
-              title: "Fine Dining Restaurant & Bar",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-table-with-cheese-plate-pate-it_140725-12866.jpg",              imageAlt: "Elegant restaurant and lounge area"
+              title: "Fine Dining Restaurant & Bar",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-table-with-cheese-plate-pate-it_140725-12866.jpg?_wi=1",              imageAlt: "Elegant restaurant and lounge area"
             },
             {
               id: "3",              category: ["Recreation", "Leisure"],
-              title: "Olympic-Size Swimming Pool",              imageSrc: "http://img.b2bpic.net/free-photo/umbrella-deck-chair-around-outdoor-swimming-pool-hotel-resort-nearly-sea-beach-ocean_74190-14080.jpg",              imageAlt: "Resort-style swimming pool"
+              title: "Olympic-Size Swimming Pool",              imageSrc: "http://img.b2bpic.net/free-photo/umbrella-deck-chair-around-outdoor-swimming-pool-hotel-resort-nearly-sea-beach-ocean_74190-14080.jpg?_wi=1",              imageAlt: "Resort-style swimming pool"
             },
             {
               id: "4",              category: ["Service", "Hospitality"],
-              title: "24/7 Concierge & Room Service",              imageSrc: "http://img.b2bpic.net/free-photo/tourists-going-through-check-process-hotel-reception-desk_482257-82845.jpg",              imageAlt: "Professional hotel staff providing service"
+              title: "24/7 Concierge & Room Service",              imageSrc: "http://img.b2bpic.net/free-photo/tourists-going-through-check-process-hotel-reception-desk_482257-82845.jpg?_wi=1",              imageAlt: "Professional hotel staff providing service"
             }
           ]}
           animationType="slide-up"
@@ -230,7 +231,7 @@ export default function LandingPage() {
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#about" },
+                { label: "About Us", href: "/about" },
                 { label: "Guest Reviews", href: "#testimonials" },
                 { label: "Contact", href: "#contact" },
                 { label: "Careers", href: "#" }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #e2e2e2;;;;;;;;;;;;;;;;;;;
   --background-accent: #c4c4c4;;;;;;;;;;;;;;;;;;; */
 
-  --background: #ffffff;;;;;;;;;;;;;;;;;;;
-  --card: #f9f9f9;;;;;;;;;;;;;;;;;;;
-  --foreground: #000f06e6;;;;;;;;;;;;;;;;;;;
-  --primary-cta: #0a7039;;;;;;;;;;;;;;;;;;;
-  --primary-cta-text: #ffffff;;;;;;;;;;;;;;;;;;;
-  --secondary-cta: #f9f9f9;;;;;;;;;;;;;;;;;;;
-  --secondary-cta-text: #000f06e6;;;;;;;;;;;;;;;;;;;
-  --accent: #e2e2e2;;;;;;;;;;;;;;;;;;;
-  --background-accent: #c4c4c4;;;;;;;;;;;;;;;;;;;
+  --background: #f6f0e9;;;;;;;;;;;;;;;;;;;
+  --card: #efe7dd;;;;;;;;;;;;;;;;;;;
+  --foreground: #2b180a;;;;;;;;;;;;;;;;;;;
+  --primary-cta: #2b180a;;;;;;;;;;;;;;;;;;;
+  --primary-cta-text: #f6f0e9;;;;;;;;;;;;;;;;;;;
+  --secondary-cta: #efe7dd;;;;;;;;;;;;;;;;;;;
+  --secondary-cta-text: #2b180a;;;;;;;;;;;;;;;;;;;
+  --accent: #94877c;;;;;;;;;;;;;;;;;;;
+  --background-accent: #afa094;;;;;;;;;;;;;;;;;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);