|
|
|
|
@@ -1,14 +1,15 @@
|
|
|
|
|
"use client"
|
|
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
|
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
|
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
|
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
|
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
|
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
|
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
|
|
|
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";
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
@@ -32,6 +33,7 @@ export default function LandingPage() {
|
|
|
|
|
{ name: "Services", id: "services" },
|
|
|
|
|
{ name: "About", id: "about" },
|
|
|
|
|
{ name: "Results", id: "metrics" },
|
|
|
|
|
{ name: "Works", id: "works" },
|
|
|
|
|
{ name: "Testimonials", id: "testimonials" }
|
|
|
|
|
]}
|
|
|
|
|
button={{
|
|
|
|
|
@@ -41,10 +43,10 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroBillboardRotatedCarousel
|
|
|
|
|
title="Elevate Your Brand Through Strategic Marketing"
|
|
|
|
|
description="We create targeted marketing campaigns that drive growth, increase brand awareness, and convert customers. Partner with our award-winning team to transform your vision into measurable results."
|
|
|
|
|
tag="Marketing Excellence"
|
|
|
|
|
<HeroSplitDualMedia
|
|
|
|
|
title="Transform Your Brand NOW"
|
|
|
|
|
description="Strategic marketing campaigns designed to elevate your brand presence and drive measurable business growth."
|
|
|
|
|
tag="Marketing Solutions"
|
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
buttons={[
|
|
|
|
|
@@ -53,36 +55,82 @@ export default function LandingPage() {
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
|
carouselItems={[
|
|
|
|
|
mediaItems={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/laptop-computer-with-company-profit-progress-screen_482257-77678.jpg", imageAlt: "Marketing dashboard with analytics"
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/uploaded-1772445436332-4x4u1wfq.png", imageAlt: "Marketing dashboard with analytics"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/professionals-present-financial-charts-meeting_482257-121150.jpg", imageAlt: "Business strategy planning session"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/young-coworkers-sharing-concepts-together_329181-19755.jpg", imageAlt: "Creative team brainstorming"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/media-marketing-internet-digital-global_53876-138500.jpg", imageAlt: "Social media marketing strategy"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "5", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg", imageAlt: "Creative design and UI"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/growth-status-technology-online-website-concept_53876-21396.jpg", imageAlt: "Business growth metrics"
|
|
|
|
|
imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=2", imageAlt: "Business strategy planning session"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
autoPlay={true}
|
|
|
|
|
autoPlayInterval={4000}
|
|
|
|
|
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">
|
|
|
|
|
<TextSplitAbout
|
|
|
|
|
title="Why Choose Nexus Marketing"
|
|
|
|
|
description={[
|
|
|
|
|
"At Nexus Marketing, we combine data-driven insights with creative excellence to deliver campaigns that resonate with your audience and drive real business growth. Our team of strategists, designers, and copywriters work collaboratively to ensure every aspect of your marketing aligns with your brand vision and business goals.", "With over a decade of experience across industries, we've helped hundreds of brands achieve their marketing objectives through innovative strategies, compelling storytelling, and measurable results. We don't just create campaigns—we create connections."
|
|
|
|
|
"At Nexus Marketing, we combine data-driven insights with creative excellence to deliver campaigns that resonate with your audience and drive real business growth."
|
|
|
|
|
]}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Explore Our Services", href: "#services" }
|
|
|
|
|
@@ -103,10 +151,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,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-vector/digital-marketing-agency-corporate-social-media-banner-instagram-post-template_1435-1951.jpg?_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: "http://img.b2bpic.net/free-vector/search-engine-optimization_24908-55724.jpg?_wi=1", imageAlt: "Analytics dashboard"
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/delicious-candy-concept-with-copy-space_23-2148679289.jpg?id=10289575", imageAlt: "Analytics dashboard"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
@@ -114,10 +162,10 @@ export default function LandingPage() {
|
|
|
|
|
title: "Content Creation & Management", description: "Craft compelling content that engages your audience, establishes authority, and drives meaningful conversations around your brand.", icon: PenTool,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg?_wi=1", imageAlt: "Content creation workspace"
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/focused-team-leader-presenting-marketing-plan-interested-multiracial-coworkers-serious-speaker-boss-executive-business-trainer-explaining-development-strategy-motivated-mixed-race-employees_482257-13781.jpg?id=17983464", imageAlt: "Content creation workspace"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-vector/digital-marketing-agency-corporate-social-media-banner-instagram-post-template_1435-1951.jpg?_wi=2", imageAlt: "Social media content grid"
|
|
|
|
|
imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=4", imageAlt: "Social media content grid"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
@@ -125,10 +173,10 @@ export default function LandingPage() {
|
|
|
|
|
title: "SEO & Search Marketing", description: "Boost your online visibility with data-driven SEO strategies and targeted search campaigns that attract qualified leads.", icon: Search,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-vector/search-engine-optimization_24908-55724.jpg?_wi=2", imageAlt: "SEO analytics and metrics"
|
|
|
|
|
imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=3", imageAlt: "SEO analytics and metrics"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-vector/digital-marketing-agency-corporate-social-media-banner-instagram-post-template_1435-1951.jpg?_wi=3", imageAlt: "Search engine optimization"
|
|
|
|
|
imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e5a5bbf1?w=800&h=600&fit=crop&_wi=4", imageAlt: "Search engine optimization"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
@@ -136,10 +184,10 @@ export default function LandingPage() {
|
|
|
|
|
title: "Brand Identity & Design", description: "Build a distinctive brand identity that resonates with your target audience and sets you apart from competitors.", icon: Palette,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-vector/modern-business-card-template-with-geometric-design_23-2147941082.jpg", imageAlt: "Brand design and identity"
|
|
|
|
|
imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=1", imageAlt: "Brand design and identity"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg?_wi=2", imageAlt: "Creative brand assets"
|
|
|
|
|
imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=2", imageAlt: "Creative brand assets"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
@@ -180,6 +228,38 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</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">
|
|
|
|
|
<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."
|
|
|
|
|
@@ -187,22 +267,22 @@ export default function LandingPage() {
|
|
|
|
|
author="Sarah Mitchell, CEO of TechFlow Solutions"
|
|
|
|
|
avatars={[
|
|
|
|
|
{
|
|
|
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Sarah Mitchell"
|
|
|
|
|
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", alt: "Sarah Mitchell"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Team member 2"
|
|
|
|
|
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", alt: "Team member 2"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Team member 3"
|
|
|
|
|
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", alt: "Team member 3"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Team member 4"
|
|
|
|
|
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", alt: "Team member 4"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Team member 5"
|
|
|
|
|
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", alt: "Team member 5"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Team member 6"
|
|
|
|
|
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", alt: "Team member 6"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
ratingAnimation="slide-up"
|
|
|
|
|
@@ -239,7 +319,7 @@ export default function LandingPage() {
|
|
|
|
|
{
|
|
|
|
|
title: "Company", items: [
|
|
|
|
|
{ label: "About Us", href: "#about" },
|
|
|
|
|
{ label: "Our Work", href: "#metrics" },
|
|
|
|
|
{ label: "Our Work", href: "#works" },
|
|
|
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
|
|
|
{ label: "Blog", href: "#" }
|
|
|
|
|
]
|
|
|
|
|
@@ -256,6 +336,44 @@ export default function LandingPage() {
|
|
|
|
|
copyrightText="© 2025 Nexus Marketing. All rights reserved."
|
|
|
|
|
/>
|
|
|
|
|
</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>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
