Update theme fonts

src/app/for/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+
+export default function ForPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="directional-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="inset-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold">
+      <main>
+        <div id="productcatalog" data-section="productcatalog">
+        <ProductCatalog
+          layout="section"
+          products={[
+            {
+              id: "1",
+              name: "Pro Tennis Racket",
+              price: 299.99,
+              imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg",
+              imageAlt: "Pro Tennis Racket",
+              rating: 4.8,
+              reviewCount: 124,
+              category: "Rackets",
+              onProductClick: () => {}
+            },
+            {
+              id: "2",
+              name: "Custom Tennis Shoes",
+              price: 189.99,
+              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930890.jpg",
+              imageAlt: "Custom Tennis Shoes",
+              rating: 4.9,
+              reviewCount: 89,
+              category: "Footwear",
+              onProductClick: () => {}
+            },
+            {
+              id: "3",
+              name: "Performance Tennis Apparel",
+              price: 129.99,
+              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-city-architecture_23-2151918947.jpg",
+              imageAlt: "Performance Tennis Apparel",
+              rating: 4.7,
+              reviewCount: 156,
+              category: "Apparel",
+              onProductClick: () => {}
+            },
+            {
+              id: "4",
+              name: "Professional Tennis Bag",
+              price: 159.99,
+              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930734.jpg",
+              imageAlt: "Professional Tennis Bag",
+              rating: 4.6,
+              reviewCount: 72,
+              category: "Accessories",
+              onProductClick: () => {}
+            }
+          ]}
+          searchPlaceholder="Search custom tennis gear..."
+          emptyMessage="No tennis products available"
+          className="w-full"
+          gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+          cardClassName="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow"
+          imageClassName="w-full h-64 object-cover rounded-t-lg"
+          searchClassName="mb-8"
+          toolbarClassName="flex flex-col gap-4 mb-8"
+        />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -3,15 +3,24 @@ import { Plus_Jakarta_Sans } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
+import { Libre_Baskerville } from "next/font/google";
+import { Inter } from "next/font/google";
 
-const plusJakartaSans = Plus_Jakarta_Sans({
-  variable: "--font-plus-jakarta-sans",  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
   title: "Champion's Journey | Professional Tennis Player",  description: "Witness the inspiring career of a professional tennis player. Explore training excellence, career highlights, and upcoming tournaments with exclusive insights into grand slam glory.",  keywords: ["professional tennis", "tennis player", "grand slam", "training regimen", "sports career"]
 };
 
+const libreBaskerville = Libre_Baskerville({
+  variable: "--font-libre-baskerville",
+  subsets: ["latin"],
+  weight: ["400", "700"],
+});
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -20,9 +29,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body
+        <body className={`${libreBaskerville.variable} ${inter.variable} antialiased`}>
-          className={`${plusJakartaSans.variable} antialiased`}
-        >
           <Tag />
           {children}
         
@@ -267,8 +274,6 @@ 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 {
@@ -297,7 +302,6 @@ export default function RootLayout({
     };
     
     if (tagName === 'img') {
-      const originalSrc = extractOriginalUrl(element.src);
             info.imageData = {
         src: originalSrc,
         alt: element.alt || undefined,
@@ -309,7 +313,6 @@ export default function RootLayout({
 
     if (tagName === 'video') {
       const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
-      const resolvedSrc = extractOriginalUrl(rawSrc);
             info.imageData = {
         src: resolvedSrc,
         alt: element.getAttribute('aria-label') || undefined,
@@ -323,7 +326,6 @@ export default function RootLayout({
     if (backgroundImage && backgroundImage !== 'none') {
       const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
       if (urlMatch) {
-        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
                 if (tagName !== 'img') {
           info.imageData = {
             src: originalBgSrc,
@@ -336,7 +338,6 @@ export default function RootLayout({
       }
     }
     
-    const elementType = getElementType(element);
         info.elementType = elementType;
     
     if (elementType === 'Button') {
@@ -430,12 +431,10 @@ export default function RootLayout({
   };
 
   const isTextElement = (element) => {
-    const elementType = getElementType(element);
         return elementType === 'Text';
   };
 
   const isButtonElement = (element) => {
-    const elementType = getElementType(element);
         return elementType === 'Button';
   };
 
@@ -511,7 +510,6 @@ export default function RootLayout({
     };
     
     const handleInput = () => {
-      const elementInfo = getElementInfo(element);
             let currentText = element.textContent;
       
       // Ensure there's always at least a space to keep the element editable
@@ -625,7 +623,6 @@ export default function RootLayout({
     }, '*');
     
     if (save && originalContent !== element.textContent) {
-      const elementInfo = getElementInfo(element);
             let finalText = element.textContent;
       
       // Trim the final text and convert space-only to empty string for saving
@@ -755,7 +752,7 @@ export default function RootLayout({
     lastMouseX = e.clientX;
     lastMouseY = e.clientY;
 
-    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
+    || e.target;
 
     if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
       return;
@@ -787,7 +784,6 @@ export default function RootLayout({
       hoverOverlay = createHoverOverlay(target);
     }
     
-    const elementType = getElementType(target);
         showElementTypeLabel(target, elementType);
     
     window.parent.postMessage({
@@ -830,7 +826,7 @@ export default function RootLayout({
   e.preventDefault();
   e.stopPropagation();
 
-  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
+  || e.target;  
   if (!isValidElement(target)) return;
     
     if (selectedElement && selectedElement !== target) {
@@ -875,7 +871,6 @@ export default function RootLayout({
       hoveredElement = null;
     }
     
-    const elementInfo = getElementInfo(target, true);
         selectedElement.dataset.webildSelector = elementInfo.selector;
     showElementTypeLabel(target, elementInfo.elementType);
     
@@ -959,7 +954,6 @@ export default function RootLayout({
       isScrolling = false;
 
       if (lastMouseX > 0 && lastMouseY > 0) {
-        const target = getMostSpecificElement(lastMouseX, lastMouseY);
                 if (target && isValidElement(target) && target !== selectedElement) {
           hoveredElement = target;
 
@@ -974,7 +968,6 @@ export default function RootLayout({
           hoveredElement.classList.add(hoverClass);
           hoverOverlay = createHoverOverlay(target);
 
-          const elementType = getElementType(target);
                     showElementTypeLabel(target, elementType);
 
           window.parent.postMessage({
@@ -998,7 +991,6 @@ export default function RootLayout({
 
   const saveChangeToStorage = (change) => {
     try {
-      const storageKey = getStorageKey();
             const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
 
       const filteredChanges = existingChanges.filter(c => {
@@ -1019,7 +1011,6 @@ export default function RootLayout({
 
   const clearLocalChanges = () => {
     try {
-      const storageKey = getStorageKey();
             localStorage.removeItem(storageKey);
       window.parent.postMessage({
         type: 'webild-local-changes-cleared',
@@ -1069,7 +1060,6 @@ export default function RootLayout({
 
     if (e.data.type === 'webild-cancel-changes') {
       try {
-        const storageKey = getStorageKey();
                 const savedChanges = localStorage.getItem(storageKey);
         if (savedChanges) {
           const changes = JSON.parse(savedChanges);
@@ -1092,7 +1082,6 @@ export default function RootLayout({
                 if (isBackground) {
                   element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
                 } else {
-                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
                                     if (revertTag === 'video' && oldMediaType === 'image') {
                     swapMediaElement(element, 'img', change.oldValue);
                   } else if (revertTag === 'img' && oldMediaType === 'video') {
@@ -1141,7 +1130,6 @@ export default function RootLayout({
               const el = textElements[i];
               if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
                 element = el;
-                const newSelector = getUniqueSelector(element, true);
                                 if (newSelector) {
                   element.dataset.webildSelector = newSelector;
                 }
@@ -1233,9 +1221,7 @@ export default function RootLayout({
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'img') {
           oldValue = element.src;
-          const newMediaType = getMediaTypeFromUrl(newSrc);
                     if (newMediaType === 'video' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'video', newSrc);
                         if (selectedElement === element) selectedElement = swapped;
             element = swapped;
           } else {
@@ -1244,10 +1230,8 @@ export default function RootLayout({
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'video') {
           oldValue = element.src || element.currentSrc || '';
-          const newMediaType = getMediaTypeFromUrl(newSrc);
                     const sources = element.querySelectorAll('source');
           if (newMediaType === 'image' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'img', newSrc);
                         if (selectedElement === element) selectedElement = swapped;
             element = swapped;
           } else {
@@ -1270,7 +1254,6 @@ export default function RootLayout({
         }
 
         if (replaced) {
-          const elementInfo = getElementInfo(element);
           
           let cleanOldValue = oldValue;
           if (oldValue.includes('url(')) {
@@ -1342,12 +1325,6 @@ export default function RootLayout({
     }
   }, true);
   
-  const urlCheckInterval = setInterval(() => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, 500);
     
   notifyPageChange();
   

src/app/page.tsx

@@ -45,7 +45,7 @@ export default function LandingPage() {
       <div id="hero-section" data-section="hero-section">
         <HeroSplitKpi
           title="Champion's Journey: From Court to Glory"
-          description="Witness the extraordinary rise of a professional tennis star, showcasing unparalleled dedication, strategic brilliance, and unmatched performance on the world's most prestigious courts."
+          description=""
           background={{ variant: "radial-gradient" }}
           kpis={[
             { value: "12", label: "Grand Slam Titles" },
@@ -106,7 +106,7 @@ export default function LandingPage() {
           features={[
             {
               id: 1,
-              title: "Precision Serve Technique",              description: "Master the art of the perfect serve with biomechanical analysis and real-time feedback.",              imageSrc: "https://img.b2bpic.net/free-photo/full-length-portrait-fit-sportsman-stretching-hands_171337-9454.jpg",              imageAlt: "Tennis player executing a precise serve"
+              title: "Precision Serve Technique",              description: "",              imageSrc: "https://img.b2bpic.net/free-photo/full-length-portrait-fit-sportsman-stretching-hands_171337-9454.jpg",              imageAlt: "Tennis player executing a precise serve"
             },
             {
               id: 2,
@@ -161,6 +161,7 @@ export default function LandingPage() {
         />
       </div>
 
+
       <div id="contact-section" data-section="contact-section">
         <ContactSplit
           tag="Get In Touch"

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-font-family: var(--font-plus-jakarta-sans), sans-serif;), sans-serif;
+  font-family: var(--font-inter), sans-serif;), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-font-family: var(--font-plus-jakarta-sans), sans-serif;), sans-serif;
+  font-family: var(--font-libre-baskerville), serif;), sans-serif;
 }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #e3deea;;
+  /* --background: #f5faff;;;
-  --card: #ffffff;;
+  --card: #f1f8ff;;;
-  --foreground: #27231f;;
+  --foreground: #001122;;;
-  --primary-cta: #27231f;;
+  --primary-cta: #15479c;;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffffff;;;
-  --accent: #c68a62;;
+  --accent: #a8cce8;;;
-  --background-accent: #c68a62;; */
+  --background-accent: #7ba3cf;;; */
 
-  --background: #e3deea;;
+  --background: #f5faff;;;
-  --card: #ffffff;;
+  --card: #f1f8ff;;;
-  --foreground: #27231f;;
+  --foreground: #001122;;;
-  --primary-cta: #27231f;;
+  --primary-cta: #15479c;;;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffffff;;;
   --secondary-cta-text: #1b0c25;
-  --accent: #c68a62;;
+  --accent: #a8cce8;;;
-  --background-accent: #c68a62;;
+  --background-accent: #7ba3cf;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);