bender/c8cce089-881f-4554-b676-f346bec35aaf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main

Browse Source 
Merge version_3 into main
This commit was merged in pull request #6.
This commit is contained in:
bender
2026-03-01 08:23:32 +00:00
parent bb25fc7791 7f01aa8d2d
commit 6949ae12fb
2 changed files with 93 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/app/layout.tsx
View File

@@ -1,50 +1,27 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Mulish } from "next/font/google"; import localFont from "next/font/local";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import "./styles/variables.css";
import Tag from "@/tag/Tag"; import "./styles/base.css";
import { Roboto } from "next/font/google";
import { Archivo } from "next/font/google";
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 = { 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"], title: "Create Next App", description: "Generated by create next app"};
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"],
});
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: {
children: React.ReactNode; children: React.ReactNode;
}>) { }) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en">
<ServiceWrapper> <body className={`${geistSans.variable} ${geistMono.variable}`}>
<body className={`${archivo.variable} antialiased`}> {children}
<Tag />
{children}
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: ` __html: `
@@ -286,7 +263,9 @@ export default function RootLayout({
const getElementInfo = (element, assignId = false) => { const getElementInfo = (element, assignId = false) => {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
const tagName = element.tagName.toLowerCase(); const tagName = element.tagName.toLowerCase();
const selector = getUniqueSelector(element, assignId);
const sectionId = getSectionId(element);
let className = undefined; let className = undefined;
try { try {
if (element.className) { if (element.className) {
@@ -314,7 +293,8 @@ export default function RootLayout({
}; };
if (tagName === 'img') { if (tagName === 'img') {
info.imageData = { const originalSrc = extractOriginalUrl(element.src);
info.imageData = {
src: originalSrc, src: originalSrc,
alt: element.alt || undefined, alt: element.alt || undefined,
naturalWidth: element.naturalWidth, naturalWidth: element.naturalWidth,
@@ -325,7 +305,8 @@ export default function RootLayout({
if (tagName === 'video') { if (tagName === 'video') {
const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || ''; const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
info.imageData = { const resolvedSrc = extractOriginalUrl(rawSrc);
info.imageData = {
src: resolvedSrc, src: resolvedSrc,
alt: element.getAttribute('aria-label') || undefined, alt: element.getAttribute('aria-label') || undefined,
isBackground: false, isBackground: false,
@@ -338,7 +319,8 @@ export default function RootLayout({
if (backgroundImage && backgroundImage !== 'none') { if (backgroundImage && backgroundImage !== 'none') {
const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/); const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
if (urlMatch) { if (urlMatch) {
if (tagName !== 'img') { const originalBgSrc = extractOriginalUrl(urlMatch[1]);
if (tagName !== 'img') {
info.imageData = { info.imageData = {
src: originalBgSrc, src: originalBgSrc,
isBackground: true isBackground: true
@@ -350,7 +332,8 @@ export default function RootLayout({
} }
} }
info.elementType = elementType; const elementType = getElementType(element);
info.elementType = elementType;
if (elementType === 'Button') { if (elementType === 'Button') {
const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || ''; const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
@@ -443,11 +426,13 @@ export default function RootLayout({
}; };
const isTextElement = (element) => { const isTextElement = (element) => {
return elementType === 'Text'; const elementType = getElementType(element);
return elementType === 'Text';
}; };
const isButtonElement = (element) => { const isButtonElement = (element) => {
return elementType === 'Button'; const elementType = getElementType(element);
return elementType === 'Button';
}; };
const updateButtonText = (element, newText) => { const updateButtonText = (element, newText) => {
@@ -522,7 +507,8 @@ export default function RootLayout({
}; };
const handleInput = () => { 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 // Ensure there's always at least a space to keep the element editable
if (currentText === '' || currentText === null || currentText.length === 0) { if (currentText === '' || currentText === null || currentText.length === 0) {
@@ -635,7 +621,8 @@ export default function RootLayout({
}, '*'); }, '*');
if (save && originalContent !== element.textContent) { 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 // Trim the final text and convert space-only to empty string for saving
if (finalText === ' ' || finalText.trim() === '') { if (finalText === ' ' || finalText.trim() === '') {
@@ -764,7 +751,7 @@ export default function RootLayout({
lastMouseX = e.clientX; lastMouseX = e.clientX;
lastMouseY = e.clientY; lastMouseY = e.clientY;
|| e.target; const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
if (!isValidElement(target) || target === hoveredElement || target === selectedElement) { if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
return; return;
@@ -796,7 +783,8 @@ export default function RootLayout({
hoverOverlay = createHoverOverlay(target); hoverOverlay = createHoverOverlay(target);
} }
showElementTypeLabel(target, elementType); const elementType = getElementType(target);
showElementTypeLabel(target, elementType);
window.parent.postMessage({ window.parent.postMessage({
type: 'webild-element-hover', type: 'webild-element-hover',
@@ -838,7 +826,7 @@ export default function RootLayout({
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
|| e.target; const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
if (!isValidElement(target)) return; if (!isValidElement(target)) return;
if (selectedElement && selectedElement !== target) { if (selectedElement && selectedElement !== target) {
@@ -883,7 +871,8 @@ export default function RootLayout({
hoveredElement = null; hoveredElement = null;
} }
selectedElement.dataset.webildSelector = elementInfo.selector; const elementInfo = getElementInfo(target, true);
selectedElement.dataset.webildSelector = elementInfo.selector;
showElementTypeLabel(target, elementInfo.elementType); showElementTypeLabel(target, elementInfo.elementType);
window.parent.postMessage({ window.parent.postMessage({
@@ -966,7 +955,8 @@ export default function RootLayout({
isScrolling = false; isScrolling = false;
if (lastMouseX > 0 && lastMouseY > 0) { if (lastMouseX > 0 && lastMouseY > 0) {
if (target && isValidElement(target) && target !== selectedElement) { const target = getMostSpecificElement(lastMouseX, lastMouseY);
if (target && isValidElement(target) && target !== selectedElement) {
hoveredElement = target; hoveredElement = target;
const computedStyle = window.getComputedStyle(target); const computedStyle = window.getComputedStyle(target);
@@ -980,7 +970,8 @@ export default function RootLayout({
hoveredElement.classList.add(hoverClass); hoveredElement.classList.add(hoverClass);
hoverOverlay = createHoverOverlay(target); hoverOverlay = createHoverOverlay(target);
showElementTypeLabel(target, elementType); const elementType = getElementType(target);
showElementTypeLabel(target, elementType);
window.parent.postMessage({ window.parent.postMessage({
type: 'webild-element-hover', type: 'webild-element-hover',
@@ -1003,7 +994,8 @@ export default function RootLayout({
const saveChangeToStorage = (change) => { const saveChangeToStorage = (change) => {
try { try {
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]'); const storageKey = getStorageKey();
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
const filteredChanges = existingChanges.filter(c => { const filteredChanges = existingChanges.filter(c => {
return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId); return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
@@ -1023,7 +1015,8 @@ export default function RootLayout({
const clearLocalChanges = () => { const clearLocalChanges = () => {
try { try {
localStorage.removeItem(storageKey); const storageKey = getStorageKey();
localStorage.removeItem(storageKey);
window.parent.postMessage({ window.parent.postMessage({
type: 'webild-local-changes-cleared', type: 'webild-local-changes-cleared',
data: {} data: {}
@@ -1072,7 +1065,8 @@ export default function RootLayout({
if (e.data.type === 'webild-cancel-changes') { if (e.data.type === 'webild-cancel-changes') {
try { try {
const savedChanges = localStorage.getItem(storageKey); const storageKey = getStorageKey();
const savedChanges = localStorage.getItem(storageKey);
if (savedChanges) { if (savedChanges) {
const changes = JSON.parse(savedChanges); const changes = JSON.parse(savedChanges);
changes.forEach(change => { changes.forEach(change => {
@@ -1094,7 +1088,8 @@ export default function RootLayout({
if (isBackground) { if (isBackground) {
element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : ''; element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
} else { } else {
if (revertTag === 'video' && oldMediaType === 'image') { const oldMediaType = getMediaTypeFromUrl(change.oldValue);
if (revertTag === 'video' && oldMediaType === 'image') {
swapMediaElement(element, 'img', change.oldValue); swapMediaElement(element, 'img', change.oldValue);
} else if (revertTag === 'img' && oldMediaType === 'video') { } else if (revertTag === 'img' && oldMediaType === 'video') {
swapMediaElement(element, 'video', change.oldValue); swapMediaElement(element, 'video', change.oldValue);
@@ -1142,7 +1137,8 @@ export default function RootLayout({
const el = textElements[i]; const el = textElements[i];
if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) { if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
element = el; element = el;
if (newSelector) { const newSelector = getUniqueSelector(element, true);
if (newSelector) {
element.dataset.webildSelector = newSelector; element.dataset.webildSelector = newSelector;
} }
break; break;
@@ -1233,8 +1229,10 @@ export default function RootLayout({
replaced = true; replaced = true;
} else if (element.tagName.toLowerCase() === 'img') { } else if (element.tagName.toLowerCase() === 'img') {
oldValue = element.src; oldValue = element.src;
if (newMediaType === 'video' && allowMediaTypeSwap) { const newMediaType = getMediaTypeFromUrl(newSrc);
if (selectedElement === element) selectedElement = swapped; if (newMediaType === 'video' && allowMediaTypeSwap) {
const swapped = swapMediaElement(element, 'video', newSrc);
if (selectedElement === element) selectedElement = swapped;
element = swapped; element = swapped;
} else { } else {
element.src = newSrc; element.src = newSrc;
@@ -1242,9 +1240,11 @@ export default function RootLayout({
replaced = true; replaced = true;
} else if (element.tagName.toLowerCase() === 'video') { } else if (element.tagName.toLowerCase() === 'video') {
oldValue = element.src || element.currentSrc || ''; oldValue = element.src || element.currentSrc || '';
const sources = element.querySelectorAll('source'); const newMediaType = getMediaTypeFromUrl(newSrc);
const sources = element.querySelectorAll('source');
if (newMediaType === 'image' && allowMediaTypeSwap) { if (newMediaType === 'image' && allowMediaTypeSwap) {
if (selectedElement === element) selectedElement = swapped; const swapped = swapMediaElement(element, 'img', newSrc);
if (selectedElement === element) selectedElement = swapped;
element = swapped; element = swapped;
} else { } else {
if (sources.length > 0) { if (sources.length > 0) {
@@ -1266,7 +1266,8 @@ export default function RootLayout({
} }
if (replaced) { if (replaced) {
const elementInfo = getElementInfo(element);
let cleanOldValue = oldValue; let cleanOldValue = oldValue;
if (oldValue.includes('url(')) { if (oldValue.includes('url(')) {
const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/); const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -1337,7 +1338,13 @@ export default function RootLayout({
} }
}, true); }, true);
const urlCheckInterval = setInterval(() => {
if (lastPathname !== window.location.pathname) {
lastPathname = window.location.pathname;
notifyPageChange();
}
}, 500);
notifyPageChange(); notifyPageChange();
window.webildCleanup = () => { window.webildCleanup = () => {
@@ -1382,7 +1389,6 @@ export default function RootLayout({
}} }}
/> />
</body> </body>
</ServiceWrapper>
</html> </html>
); );
} }

23
src/app/page.tsx
View File

@@ -1,4 +1,4 @@
"use client" "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
@@ -35,6 +35,7 @@ export default function LandingPage() {
{ name: "Portfolio", id: "portfolio" }, { name: "Portfolio", id: "portfolio" },
{ name: "About", id: "about" }, { name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" }, { name: "Testimonials", id: "testimonials" },
{ name: "Products", id: "products" },
{ name: "Contact", id: "contact-cta" } { name: "Contact", id: "contact-cta" }
]} ]}
button={{ button={{
@@ -185,6 +186,26 @@ export default function LandingPage() {
/> />
</div> </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"> <div id="metrics" data-section="metrics">
<MetricCardEleven <MetricCardEleven
title="Proven Results That Matter" title="Proven Results That Matter"