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

Compare commits

base: bender:version_4
Branches Tags
bender:main bender:version_7 bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1
..
compare: bender:version_7
Branches Tags
bender:main bender:version_7 bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1

25 Commits
version_4 ... version_7

Author SHA1 Message Date
bender
430f530c76 Add src/app/pricing/page.tsx 2026-03-04 11:15:40 +00:00
bender
6ad23a1093 Update src/app/page.tsx 2026-03-04 11:15:39 +00:00
bender
5d3fc0e396 Merge version_6 into main 
Merge version_6 into main
 2026-03-04 11:14:23 +00:00
bender
bfceb710b0 Update src/app/page.tsx 2026-03-04 11:14:17 +00:00
bender
6961826743 Merge version_6 into main 
Merge version_6 into main
 2026-03-04 11:13:51 +00:00
bender
eb1d37c3aa Update src/app/page.tsx 2026-03-04 11:13:47 +00:00
bender
c6941eda41 Merge version_6 into main 
Merge version_6 into main
 2026-03-04 11:13:39 +00:00
bender
bada9a304d Update src/app/page.tsx 2026-03-04 11:13:34 +00:00
bender
73cddad745 Merge version_6 into main 
Merge version_6 into main
 2026-03-04 11:09:23 +00:00
bender
1f5b5f2706 Update theme colors 2026-03-04 11:09:16 +00:00
bender
b02ab6f252 Merge version_6 into main 
Merge version_6 into main
 2026-03-02 10:33:32 +00:00
bender
c2621fd20b Update src/app/page.tsx 2026-03-02 10:33:28 +00:00
bender
48676a7835 Merge version_6 into main 
Merge version_6 into main
 2026-03-02 10:32:42 +00:00
bender
00ae0ab09d Update src/app/page.tsx 2026-03-02 10:32:38 +00:00
bender
f8ea3cdb5f Merge version_5 into main 
Merge version_5 into main
 2026-03-02 10:14:45 +00:00
bender
370f26e291 Update src/app/page.tsx 2026-03-02 10:14:40 +00:00
bender
90dda24a27 Merge version_5 into main 
Merge version_5 into main
 2026-03-02 10:12:09 +00:00
bender
e5da9d872d Update src/app/page.tsx 2026-03-02 10:12:04 +00:00
bender
8fbb49d8ac Merge version_5 into main 
Merge version_5 into main
 2026-03-02 10:09:55 +00:00
bender
618412b9ce Update src/app/page.tsx 2026-03-02 10:09:50 +00:00
bender
0c91253a71 Update src/app/layout.tsx 2026-03-02 10:09:48 +00:00
bender
cf15e93930 Merge version_4 into main 
Merge version_4 into main
 2026-03-02 10:03:30 +00:00
bender
3baab68bfc Merge version_4 into main 
Merge version_4 into main
 2026-03-02 10:02:58 +00:00
bender
2181c0f8e5 Merge version_4 into main 
Merge version_4 into main
 2026-03-02 10:02:05 +00:00
bender
f3dafeaedd Merge version_4 into main 
Merge version_4 into main
 2026-03-02 09:57:30 +00:00
4 changed files with 344 additions and 58 deletions
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 "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; 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 = { 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: { 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({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
@@ -32,7 +31,9 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body className={`${poppins.variable} antialiased`}> <body
className={`${mulish.variable} ${inter.variable} antialiased`}
>
<Tag /> <Tag />
{children} {children}
@@ -277,7 +278,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) {
@@ -305,7 +308,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,
@@ -316,7 +320,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,
@@ -329,7 +334,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
@@ -341,7 +347,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') || '';
@@ -434,11 +441,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) => {
@@ -513,7 +522,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) {
@@ -626,7 +636,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() === '') {
@@ -755,7 +766,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;
@@ -787,7 +798,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',
@@ -829,7 +841,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) {
@@ -874,7 +886,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({
@@ -957,7 +970,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);
@@ -971,7 +985,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',
@@ -994,7 +1009,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);
@@ -1014,7 +1030,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: {}
@@ -1063,7 +1080,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 => {
@@ -1085,7 +1103,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);
@@ -1133,7 +1152,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;
@@ -1224,8 +1244,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;
@@ -1233,9 +1255,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) {
@@ -1257,7 +1281,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(['"]?([^'")]+)['"]?)/);
@@ -1328,7 +1353,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 = () => {
@@ -1376,4 +1407,4 @@ export default function RootLayout({
</ServiceWrapper> </ServiceWrapper>
</html> </html>
); );
} }

144
src/app/page.tsx
View File

@@ -9,6 +9,7 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen'; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactCenter from '@/components/sections/contact/ContactCenter'; import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import { Sparkles, Zap, Target, PenTool, Search, Palette, Users, TrendingUp, Award, Rocket } from "lucide-react"; import { Sparkles, Zap, Target, PenTool, Search, Palette, Users, TrendingUp, Award, Rocket } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
@@ -32,7 +33,9 @@ export default function LandingPage() {
{ name: "Services", id: "services" }, { name: "Services", id: "services" },
{ name: "About", id: "about" }, { name: "About", id: "about" },
{ name: "Results", id: "metrics" }, { name: "Results", id: "metrics" },
{ name: "Testimonials", id: "testimonials" } { name: "Works", id: "works" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Pricing", id: "/pricing" }
]} ]}
button={{ button={{
text: "Get Started", href: "#contact" text: "Get Started", href: "#contact"
@@ -42,7 +45,7 @@ export default function LandingPage() {
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroSplitDualMedia <HeroSplitDualMedia
title="Transform Your Brand With Expert Marketing" title="Transform Your Brand NOW"
description="Strategic marketing campaigns designed to elevate your brand presence and drive measurable business growth." description="Strategic marketing campaigns designed to elevate your brand presence and drive measurable business growth."
tag="Marketing Solutions" tag="Marketing Solutions"
tagIcon={Sparkles} tagIcon={Sparkles}
@@ -64,7 +67,64 @@ export default function LandingPage() {
mediaAnimation="slide-up" mediaAnimation="slide-up"
rating={5} rating={5}
ratingText="Trusted by industry leaders" 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>
<div id="about" data-section="about"> <div id="about" data-section="about">
@@ -92,10 +152,10 @@ export default function LandingPage() {
title: "Digital Marketing Strategy", description: "Develop comprehensive digital strategies that align with your business goals and maximize ROI across all channels.", icon: Target, title: "Digital Marketing Strategy", description: "Develop comprehensive digital strategies that align with your business goals and maximize ROI across all channels.", icon: Target,
mediaItems: [ mediaItems: [
{ {
imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=1", imageAlt: "Digital marketing strategy visualization" imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/tmp/generate-an-image-of-lorenzo-noya-1772622815832-cedc15c7.jpg", imageAlt: "Digital marketing strategy visualization"
}, },
{ {
imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=2", imageAlt: "Analytics dashboard" imageSrc: "http://img.b2bpic.net/free-photo/delicious-candy-concept-with-copy-space_23-2148679289.jpg?id=10289575", imageAlt: "Analytics dashboard"
} }
] ]
}, },
@@ -169,6 +229,38 @@ export default function LandingPage() {
/> />
</div> </div>
<div id="works" data-section="works">
<BlogCardOne
blogs={[
{
id: "1", category: "E-Commerce", title: "TechFlow Solutions - 200% Lead Growth", excerpt: "Transformed their digital presence with a comprehensive SEO and content strategy that doubled their qualified leads in 6 months.", imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop", imageAlt: "TechFlow case study", authorName: "Sarah Mitchell", authorAvatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", date: "15 Nov 2024"
},
{
id: "2", category: "SaaS", title: "CloudSync - Market Expansion Campaign", excerpt: "Developed a multi-channel marketing strategy that helped them enter 3 new markets and increase brand awareness by 340%.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=1", imageAlt: "CloudSync case study", authorName: "Michael Chen", authorAvatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop", date: "08 Nov 2024"
},
{
id: "3", category: "Startups", title: "InnovateLabs - From Zero to Series A", excerpt: "Built a brand identity and go-to-market strategy that secured Series A funding and established market leadership position.", imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop", imageAlt: "InnovateLabs case study", authorName: "Emma Rodriguez", authorAvatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop", date: "01 Nov 2024"
},
{
id: "4", category: "Healthcare", title: "MediCare Plus - Patient Acquisition", excerpt: "Designed and executed a healthcare marketing campaign that increased patient inquiries by 280% and improved conversion rates.", imageSrc: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=800&h=600&fit=crop", imageAlt: "MediCare Plus case study", authorName: "Dr. James Wilson", authorAvatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", date: "25 Oct 2024"
},
{
id: "5", category: "Retail", title: "StyleHub - Omnichannel Integration", excerpt: "Integrated online and offline marketing channels to create a seamless customer experience, resulting in 165% revenue growth.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=2", imageAlt: "StyleHub case study", authorName: "Lisa Park", authorAvatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop", date: "18 Oct 2024"
},
{
id: "6", category: "Enterprise", title: "GlobalTech - Enterprise Rebranding", excerpt: "Led a complete brand refresh and repositioning strategy for a Fortune 500 company, improving market perception and share.", imageSrc: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=800&h=600&fit=crop", imageAlt: "GlobalTech case study", authorName: "David Kumar", authorAvatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop", date: "10 Oct 2024"
}
]}
title="Our Latest Work"
description="Explore the diverse range of projects we've successfully executed across different industries and markets."
tag="Case Studies"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
carouselMode="buttons"
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen <TestimonialCardFifteen
testimonial="Nexus Marketing transformed our approach to digital marketing. Their strategic insights and creative execution resulted in a 200% increase in leads within the first six months. They're not just an agency—they're a true business partner." testimonial="Nexus Marketing transformed our approach to digital marketing. Their strategic insights and creative execution resulted in a 200% increase in leads within the first six months. They're not just an agency—they're a true business partner."
@@ -228,9 +320,9 @@ export default function LandingPage() {
{ {
title: "Company", items: [ title: "Company", items: [
{ label: "About Us", href: "#about" }, { label: "About Us", href: "#about" },
{ label: "Our Work", href: "#metrics" }, { label: "Our Work", href: "#works" },
{ label: "Testimonials", href: "#testimonials" }, { label: "Testimonials", href: "#testimonials" },
{ label: "Blog", href: "#" } { label: "Pricing", href: "/pricing" }
] ]
}, },
{ {
@@ -245,6 +337,44 @@ export default function LandingPage() {
copyrightText="© 2025 Nexus Marketing. All rights reserved." copyrightText="© 2025 Nexus Marketing. All rights reserved."
/> />
</div> </div>
<script dangerouslySetInnerHTML={{
__html: `
// 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);
});
});
`
}} />
</ThemeProvider> </ThemeProvider>
); );
} }

125
src/app/pricing/page.tsx Normal file
View File

@@ -0,0 +1,125 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Rocket, Check } from "lucide-react";
export default function PricingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="blurBottom"
cardStyle="outline"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Nexus Marketing"
navItems={[
{ name: "Services", id: "/" },
{ name: "About", id: "/" },
{ name: "Results", id: "/" },
{ name: "Works", id: "/" },
{ name: "Testimonials", id: "/" },
{ name: "Pricing", id: "/pricing" }
]}
button={{
text: "Get Started", href: "#contact"
}}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
title="Simple, Transparent Pricing"
description="Choose the plan that fits your business needs. All plans include dedicated support and comprehensive analytics."
tag="Pricing"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
plans={[
{
id: "starter", tag: "Starter Plan", price: "$2,500", period: "/month", description: "Perfect for small businesses and startups looking to establish their digital presence.", button: {
text: "Get Started", href: "#contact"
},
featuresTitle: "What's Included:", features: [
"Social Media Management", "Monthly Content Calendar", "Basic SEO Optimization", "Monthly Performance Report", "Email Support"
]
},
{
id: "professional", tag: "Professional Plan", price: "$5,000", period: "/month", description: "Ideal for growing businesses ready to scale their marketing efforts across multiple channels.", button: {
text: "Schedule a Call", href: "#contact"
},
featuresTitle: "What's Included:", features: [
"Everything in Starter", "Paid Advertising Management", "Content Creation (8 pieces/month)", "Advanced SEO Strategy", "Bi-weekly Strategy Calls", "Priority Support", "A/B Testing & Optimization"
]
},
{
id: "enterprise", tag: "Enterprise Plan", price: "Custom", period: "/month", description: "Comprehensive marketing transformation for established companies looking for complete brand evolution.", button: {
text: "Contact Sales", href: "#contact"
},
featuresTitle: "What's Included:", features: [
"Everything in Professional", "Dedicated Account Manager", "Custom Strategy Development", "Full-Service Content Production", "Video Marketing & Production", "Market Research & Analysis", "Weekly Strategy Sessions", "Custom Integrations & Tools"
]
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get Started"
title="Ready to Choose Your Plan?"
description="Let's discuss which pricing plan is right for your business. Schedule a consultation with our team today."
tagIcon={Rocket}
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
inputPlaceholder="your@company.com"
buttonText="Schedule Consultation"
termsText="We respect your privacy. We'll only use your contact information to discuss pricing and how we can help your business grow."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={[
{
title: "Services", items: [
{ label: "Digital Strategy", href: "/" },
{ label: "Content Marketing", href: "/" },
{ label: "SEO & SEM", href: "/" },
{ label: "Brand Design", href: "/" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/" },
{ label: "Our Work", href: "/" },
{ label: "Testimonials", href: "/" },
{ label: "Pricing", href: "/pricing" }
]
},
{
title: "Connect", items: [
{ label: "Contact Us", href: "#contact" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "Privacy Policy", href: "#" }
]
}
]}
copyrightText="© 2025 Nexus Marketing. All rights reserved."
/>
</div>
</ThemeProvider>
);
}

32
src/app/styles/variables.css
View File

@@ -2,23 +2,23 @@
/* Base units */ /* Base units */
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
/* --background: #0a0a0a;;; /* --background: #f5f5f5;;;;
--card: #1a1a1a;;; --card: #ffffff;;;;
--foreground: #fffffae6;;; --foreground: #1c1c1c;;;;
--primary-cta: #fde047;;; --primary-cta: #1c1c1c;;;;
--secondary-cta: #1a1a1a;;; --secondary-cta: #ffffff;;;;
--accent: #737373;;; --accent: #6139e6;;;;
--background-accent: #737373;;; */ --background-accent: #b3a8e8;;;; */
--background: #0a0a0a;;; --background: #f5f5f5;;;;
--card: #1a1a1a;;; --card: #ffffff;;;;
--foreground: #fffffae6;;; --foreground: #1c1c1c;;;;
--primary-cta: #fde047;;; --primary-cta: #1c1c1c;;;;
--primary-cta-text: #0a0a0a;;; --primary-cta-text: #f5f5f5;;;;
--secondary-cta: #1a1a1a;;; --secondary-cta: #ffffff;;;;
--secondary-cta-text: #fffffae6;;; --secondary-cta-text: #1c1c1c;;;;
--accent: #737373;;; --accent: #6139e6;;;;
--background-accent: #737373;;; --background-accent: #b3a8e8;;;;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);