bender/96e8cd0b-84ca-4aea-a051-6c8bdbb92b49
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_5 into main

Browse Source 
Merge version_5 into main
This commit was merged in pull request #12.
This commit is contained in:
bender
2026-03-02 10:09:55 +00:00
parent cf15e93930 618412b9ce
commit 8fbb49d8ac
2 changed files with 161 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/layout.tsx
View File

@@ -4,9 +4,14 @@ import { Inter } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { Poppins } from "next/font/google";
const mulish = Mulish({
variable: "--font-mulish", subsets: ["latin"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Nexus Marketing | Strategic Digital Marketing Agency", description: "Award-winning marketing agency specializing in digital strategy, content creation, SEO, and brand design. Drive growth with data-driven campaigns.", keywords: "marketing agency, digital marketing, brand strategy, SEO, content marketing, marketing campaigns", openGraph: {
@@ -18,12 +23,6 @@ export const metadata: Metadata = {
}
};
const poppins = Poppins({
variable: "--font-poppins",
subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});
export default function RootLayout({
children,
}: Readonly<{
@@ -32,7 +31,9 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${poppins.variable} antialiased`}>
<body
className={`${mulish.variable} ${inter.variable} antialiased`}
>
<Tag />
{children}
@@ -277,7 +278,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) {
@@ -305,7 +308,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,
@@ -316,7 +320,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,
@@ -329,7 +334,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
@@ -341,7 +347,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') || '';
@@ -434,11 +441,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) => {
@@ -513,7 +522,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) {
@@ -626,7 +636,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() === '') {
@@ -755,7 +766,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;
@@ -787,7 +798,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',
@@ -829,7 +841,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) {
@@ -874,7 +886,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({
@@ -957,7 +970,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);
@@ -971,7 +985,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',
@@ -994,7 +1009,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);
@@ -1014,7 +1030,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: {}
@@ -1063,7 +1080,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 => {
@@ -1085,7 +1103,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);
@@ -1133,7 +1152,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;
@@ -1224,8 +1244,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;
@@ -1233,9 +1255,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) {
@@ -1257,7 +1281,8 @@ export default function RootLayout({
}
if (replaced) {
const elementInfo = getElementInfo(element);
let cleanOldValue = oldValue;
if (oldValue.includes('url(')) {
const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -1328,7 +1353,13 @@ export default function RootLayout({
}
}, true);
const urlCheckInterval = setInterval(() => {
if (lastPathname !== window.location.pathname) {
lastPathname = window.location.pathname;
notifyPageChange();
}
}, 500);
notifyPageChange();
window.webildCleanup = () => {
@@ -1376,4 +1407,4 @@ export default function RootLayout({
</ServiceWrapper>
</html>
);
}
}

96
src/app/page.tsx
View File

@@ -64,7 +64,64 @@ export default function LandingPage() {
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by industry leaders"
mediaItemClassName="relative group"
imageClassName="relative w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
mediaWrapperClassName="relative rounded-lg overflow-hidden"
/>
<style jsx>{`
:global(.hero-kpi-overlay) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.4) 0%, rgba(30, 41, 59, 0.6) 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding: 1.5rem;
border-radius: 0.5rem;
opacity: 0;
group-hover:opacity: 100;
transition: opacity 0.3s ease;
z-index: 10;
}
:global(.kpi-card) {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
padding: 1rem;
text-align: center;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all 0.3s ease;
}
:global(.kpi-card:hover) {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
:global(.kpi-value) {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-cta);
margin-bottom: 0.5rem;
}
:global(.kpi-label) {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
`}</style>
</div>
<div id="about" data-section="about">
@@ -245,6 +302,43 @@ export default function LandingPage() {
copyrightText="© 2025 Nexus Marketing. All rights reserved."
/>
</div>
<script>{`
// Enhanced glassmorphic overlay with KPI cards on hover
document.addEventListener('DOMContentLoaded', function() {
const heroSection = document.getElementById('hero');
if (!heroSection) return;
const mediaItems = heroSection.querySelectorAll('[class*="mediaItem"]');
mediaItems.forEach(item => {
const imageElement = item.querySelector('img');
if (!imageElement) return;
// Create overlay container
const overlay = document.createElement('div');
overlay.className = 'hero-kpi-overlay';
// Create KPI cards
const kpiCards = [
{ value: '250+', label: 'Campaigns Launched' },
{ value: '156%', label: 'Avg ROI Increase' }
];
kpiCards.forEach(kpi => {
const card = document.createElement('div');
card.className = 'kpi-card';
card.innerHTML = `
<div class="kpi-value">${kpi.value}</div>
<div class="kpi-label">${kpi.label}</div>
`;
overlay.appendChild(card);
});
item.appendChild(overlay);
});
});
`}</script>
</ThemeProvider>
);
}
}