Update src/app/page.tsx

Update src/app/layout.tsx
Merge version_2 into main
2026-03-01 08:23:28 +00:00 · 2026-03-01 08:23:27 +00:00 · 2026-03-01 08:21:32 +00:00 · 2026-03-01 08:21:13 +00:00 · 2026-03-01 06:56:49 +00:00 · 2026-03-01 06:56:11 +00:00
2 changed files with 93 additions and 66 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,48 +1,25 @@
 import type { Metadata } from "next";
-import { Mulish } from "next/font/google";
+import localFont from "next/font/local";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-import { Roboto } from "next/font/google";
-import { Archivo } from "next/font/google";
+import "./styles/variables.css";
+import "./styles/base.css";

+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff2",  variable: "--font-geist-sans",  weight: "100 900"});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff2",  variable: "--font-geist-mono",  weight: "100 900"});

 export const metadata: Metadata = {
-  title: "Marketing Agency | AgencyPro - Brand Strategy & Digital Growth",  description: "Transform your brand with AgencyPro. Strategic marketing, creative design, and digital growth solutions for ambitious companies.",  keywords: ["marketing agency", "brand strategy", "digital marketing", "creative design", "branding", "growth marketing", "social media marketing"],
-  metadataBase: new URL("https://agencypro.com"),
-  alternates: {
-    canonical: "https://agencypro.com"
-  },
-  openGraph: {
-    title: "AgencyPro - Marketing Strategy & Creative Excellence",    description: "Transform your brand into a market leader with our data-driven marketing strategies and creative solutions.",    siteName: "AgencyPro",    type: "website",    images: [{
-      url: "http://img.b2bpic.net/free-photo/people-stand-high-five-office_482257-119247.jpg",      alt: "AgencyPro marketing services"
-    }]
-  },
-  twitter: {
-    card: "summary_large_image",    title: "AgencyPro - Brand Transformation & Growth",    description: "Strategic marketing that delivers real results. Explore our services.",    images: ["http://img.b2bpic.net/free-photo/people-stand-high-five-office_482257-119247.jpg"]
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
-};
-
-
-const archivo = Archivo({
-  variable: "--font-archivo",
-  subsets: ["latin"],
-});
+  title: "Create Next App",  description: "Generated by create next app"};

 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body className={`${archivo.variable} antialiased`}>
-          <Tag />
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      
        <script
@@ -286,6 +263,8 @@ 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 {
@@ -314,6 +293,7 @@ export default function RootLayout({
    };
    
    if (tagName === 'img') {
+      const originalSrc = extractOriginalUrl(element.src);
      info.imageData = {
        src: originalSrc,
        alt: element.alt || undefined,
@@ -325,6 +305,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 = {
        src: resolvedSrc,
        alt: element.getAttribute('aria-label') || undefined,
@@ -338,6 +319,7 @@ 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,
@@ -350,6 +332,7 @@ export default function RootLayout({
      }
    }
    
+    const elementType = getElementType(element);
    info.elementType = elementType;
    
    if (elementType === 'Button') {
@@ -443,10 +426,12 @@ export default function RootLayout({
  };

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

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

@@ -522,6 +507,7 @@ 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
@@ -635,6 +621,7 @@ 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
@@ -764,7 +751,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;
@@ -796,6 +783,7 @@ export default function RootLayout({
      hoverOverlay = createHoverOverlay(target);
    }
    
+    const elementType = getElementType(target);
    showElementTypeLabel(target, elementType);
    
    window.parent.postMessage({
@@ -838,7 +826,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) {
@@ -883,6 +871,7 @@ export default function RootLayout({
      hoveredElement = null;
    }
    
+    const elementInfo = getElementInfo(target, true);
    selectedElement.dataset.webildSelector = elementInfo.selector;
    showElementTypeLabel(target, elementInfo.elementType);
    
@@ -966,6 +955,7 @@ export default function RootLayout({
      isScrolling = false;

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

@@ -980,6 +970,7 @@ export default function RootLayout({
          hoveredElement.classList.add(hoverClass);
          hoverOverlay = createHoverOverlay(target);

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

          window.parent.postMessage({
@@ -1003,6 +994,7 @@ export default function RootLayout({

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

      const filteredChanges = existingChanges.filter(c => {
@@ -1023,6 +1015,7 @@ export default function RootLayout({

  const clearLocalChanges = () => {
    try {
+      const storageKey = getStorageKey();
      localStorage.removeItem(storageKey);
      window.parent.postMessage({
        type: 'webild-local-changes-cleared',
@@ -1072,6 +1065,7 @@ 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);
@@ -1094,6 +1088,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') {
                    swapMediaElement(element, 'img', change.oldValue);
                  } else if (revertTag === 'img' && oldMediaType === 'video') {
@@ -1142,6 +1137,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) {
                  element.dataset.webildSelector = newSelector;
                }
@@ -1233,7 +1229,9 @@ 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 {
@@ -1242,8 +1240,10 @@ 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 {
@@ -1266,6 +1266,7 @@ export default function RootLayout({
        }

        if (replaced) {
+          const elementInfo = getElementInfo(element);

          let cleanOldValue = oldValue;
          if (oldValue.includes('url(')) {
@@ -1337,6 +1338,12 @@ export default function RootLayout({
    }
  }, true);
  
+  const urlCheckInterval = setInterval(() => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, 500);
  
  notifyPageChange();
  
@@ -1382,7 +1389,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
@@ -35,6 +35,7 @@ export default function LandingPage() {
            { name: "Portfolio", id: "portfolio" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
+            { name: "Products", id: "products" },
            { name: "Contact", id: "contact-cta" }
          ]}
          button={{
@@ -185,6 +186,26 @@ export default function LandingPage() {
        />
      </div>

+      <div id="products" data-section="products">
+        <ProductCardOne
+          title="Our Products"
+          description="Discover our carefully curated selection of digital products designed to enhance your business."
+          tag="Products"
+          tagIcon={Briefcase}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "book-1",              name: "Hello There",              price: "$29.99",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg",              imageAlt: "Hello There book cover"
+            }
+          ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Products section"
+        />
+      </div>
+
      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Proven Results That Matter"
Author	SHA1	Message	Date
bender	7f01aa8d2d	Update src/app/page.tsx	2026-03-01 08:23:28 +00:00
bender	a52b2b90e1	Update src/app/layout.tsx	2026-03-01 08:23:27 +00:00
bender	bb25fc7791	Merge version_2 into main Merge version_2 into main	2026-03-01 08:21:32 +00:00
bender	f6ddabc434	Merge version_2 into main Merge version_2 into main	2026-03-01 08:21:13 +00:00
bender	c6341e23a3	Merge version_2 into main Merge version_2 into main	2026-03-01 06:56:49 +00:00
bender	bf9ab1f5c1	Merge version_2 into main Merge version_2 into main	2026-03-01 06:56:11 +00:00