Update theme fonts

Bob AI: Can you add a section where I sell products of ten...
2026-02-23 20:44:08 +00:00 · 2026-02-23 20:44:06 +00:00 · 2026-02-23 20:24:58 +00:00 · 2026-02-23 20:17:11 +00:00
4 changed files with 100 additions and 64 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,15 +3,19 @@ import { Plus_Jakarta_Sans } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
+import { Poppins } 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 poppins = Poppins({
+  variable: "--font-poppins",
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+});
+
 export default function RootLayout({
  children,
 }: Readonly<{
@@ -20,9 +24,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body
-          className={`${plusJakartaSans.variable} antialiased`}
-        >
+        <body className={`${poppins.variable} antialiased`}>
          <Tag />
          {children}
        
@@ -267,9 +269,7 @@ 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) {
@@ -297,8 +297,7 @@ export default function RootLayout({
    };
    
    if (tagName === 'img') {
-      const originalSrc = extractOriginalUrl(element.src);
-      info.imageData = {
+            info.imageData = {
        src: originalSrc,
        alt: element.alt || undefined,
        naturalWidth: element.naturalWidth,
@@ -309,8 +308,7 @@ 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 = {
+            info.imageData = {
        src: resolvedSrc,
        alt: element.getAttribute('aria-label') || undefined,
        isBackground: false,
@@ -323,8 +321,7 @@ export default function RootLayout({
    if (backgroundImage && backgroundImage !== 'none') {
      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
      if (urlMatch) {
-        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
-        if (tagName !== 'img') {
+                if (tagName !== 'img') {
          info.imageData = {
            src: originalBgSrc,
            isBackground: true
@@ -336,8 +333,7 @@ export default function RootLayout({
      }
    }
    
-    const elementType = getElementType(element);
-    info.elementType = elementType;
+        info.elementType = elementType;
    
    if (elementType === 'Button') {
      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
@@ -430,13 +426,11 @@ export default function RootLayout({
  };

  const isTextElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Text';
+        return elementType === 'Text';
  };

  const isButtonElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Button';
+        return elementType === 'Button';
  };

  const updateButtonText = (element, newText) => {
@@ -511,8 +505,7 @@ export default function RootLayout({
    };
    
    const handleInput = () => {
-      const elementInfo = getElementInfo(element);
-      let currentText = element.textContent;
+            let currentText = element.textContent;
      
      // Ensure there's always at least a space to keep the element editable
      if (currentText === '' || currentText === null || currentText.length === 0) {
@@ -625,8 +618,7 @@ export default function RootLayout({
    }, '*');
    
    if (save && originalContent !== element.textContent) {
-      const elementInfo = getElementInfo(element);
-      let finalText = element.textContent;
+            let finalText = element.textContent;
      
      // Trim the final text and convert space-only to empty string for saving
      if (finalText === ' ' || finalText.trim() === '') {
@@ -755,7 +747,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,8 +779,7 @@ export default function RootLayout({
      hoverOverlay = createHoverOverlay(target);
    }
    
-    const elementType = getElementType(target);
-    showElementTypeLabel(target, elementType);
+        showElementTypeLabel(target, elementType);
    
    window.parent.postMessage({
      type: 'webild-element-hover',
@@ -830,7 +821,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,8 +866,7 @@ export default function RootLayout({
      hoveredElement = null;
    }
    
-    const elementInfo = getElementInfo(target, true);
-    selectedElement.dataset.webildSelector = elementInfo.selector;
+        selectedElement.dataset.webildSelector = elementInfo.selector;
    showElementTypeLabel(target, elementInfo.elementType);
    
    window.parent.postMessage({
@@ -959,8 +949,7 @@ export default function RootLayout({
      isScrolling = false;

      if (lastMouseX > 0 && lastMouseY > 0) {
-        const target = getMostSpecificElement(lastMouseX, lastMouseY);
-        if (target && isValidElement(target) && target !== selectedElement) {
+                if (target && isValidElement(target) && target !== selectedElement) {
          hoveredElement = target;

          const computedStyle = window.getComputedStyle(target);
@@ -974,8 +963,7 @@ export default function RootLayout({
          hoveredElement.classList.add(hoverClass);
          hoverOverlay = createHoverOverlay(target);

-          const elementType = getElementType(target);
-          showElementTypeLabel(target, elementType);
+                    showElementTypeLabel(target, elementType);

          window.parent.postMessage({
            type: 'webild-element-hover',
@@ -998,8 +986,7 @@ export default function RootLayout({

  const saveChangeToStorage = (change) => {
    try {
-      const storageKey = getStorageKey();
-      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
+            const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');

      const filteredChanges = existingChanges.filter(c => {
        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
@@ -1019,8 +1006,7 @@ export default function RootLayout({

  const clearLocalChanges = () => {
    try {
-      const storageKey = getStorageKey();
-      localStorage.removeItem(storageKey);
+            localStorage.removeItem(storageKey);
      window.parent.postMessage({
        type: 'webild-local-changes-cleared',
        data: {}
@@ -1069,8 +1055,7 @@ export default function RootLayout({

    if (e.data.type === 'webild-cancel-changes') {
      try {
-        const storageKey = getStorageKey();
-        const savedChanges = localStorage.getItem(storageKey);
+                const savedChanges = localStorage.getItem(storageKey);
        if (savedChanges) {
          const changes = JSON.parse(savedChanges);
          changes.forEach(change => {
@@ -1092,8 +1077,7 @@ 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') {
+                                    if (revertTag === 'video' && oldMediaType === 'image') {
                    swapMediaElement(element, 'img', change.oldValue);
                  } else if (revertTag === 'img' && oldMediaType === 'video') {
                    swapMediaElement(element, 'video', change.oldValue);
@@ -1141,8 +1125,7 @@ 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) {
+                                if (newSelector) {
                  element.dataset.webildSelector = newSelector;
                }
                break;
@@ -1233,10 +1216,8 @@ 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;
+                    if (newMediaType === 'video' && allowMediaTypeSwap) {
+                        if (selectedElement === element) selectedElement = swapped;
            element = swapped;
          } else {
            element.src = newSrc;
@@ -1244,11 +1225,9 @@ 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');
+                    const sources = element.querySelectorAll('source');
          if (newMediaType === 'image' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'img', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
+                        if (selectedElement === element) selectedElement = swapped;
            element = swapped;
          } else {
            if (sources.length > 0) {
@@ -1270,8 +1249,7 @@ export default function RootLayout({
        }

        if (replaced) {
-          const elementInfo = getElementInfo(element);
-
+          
          let cleanOldValue = oldValue;
          if (oldValue.includes('url(')) {
            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -1342,13 +1320,7 @@ export default function RootLayout({
    }
  }, true);
  
-  const urlCheckInterval = setInterval(() => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, 500);
-  
+    
  notifyPageChange();
  
  window.webildCleanup = () => {
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';

 export default function LandingPage() {
  return (
@@ -161,6 +162,66 @@ export default function LandingPage() {
        />
      </div>

+
+      <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>
      <div id="contact-section" data-section="contact-section">
        <ContactSplit
          tag="Get In Touch"
--- a/src/app/styles/base.css
+++ b/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-poppins), 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-poppins), sans-serif;), sans-serif;
 }
--- a/src/components/sections/hero/HeroSplitKpi.tsx
+++ b/src/components/sections/hero/HeroSplitKpi.tsx
@@ -139,12 +139,15 @@ interface HeroSplitKpiProps {
    buttonTextClassName?: string;
    mediaWrapperClassName?: string;
    imageClassName?: string;
+    imageFlipperClassName?: string;
    avatarGroupClassName?: string;
    kpiClassName?: string;
    kpiValueClassName?: string;
    kpiLabelClassName?: string;
    marqueeItems?: MarqueeItem[];
    marqueeSpeed?: number;
+    enableImageFlip?: boolean;
+    imageFlipTrigger?: "hover" | "load";
    showMarqueeCard?: boolean;
    marqueeClassName?: string;
    marqueeItemClassName?: string;
Author	SHA1	Message	Date
bender	f14f42f693	Update theme fonts	2026-02-23 20:44:08 +00:00
bender	20bddca7ff	Update theme fonts	2026-02-23 20:44:06 +00:00
kudindmitriy	5eadec6f09	Bob AI: Can you add a section where I sell products of ten...	2026-02-23 20:24:58 +00:00
kudindmitriy	12370d7d93	Bob AI: Add a card flipping animation to the hero section image. Imp	2026-02-23 20:17:11 +00:00