MetatroncubeSoftwareSolutions/MetatronLatestWebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

footer updated

Browse Source
This commit is contained in:
Selvi 2026-03-03 21:33:38 +05:30
parent 27d208384f
commit 8716e212f7
19 changed files with 622 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/assets/css/main.css
View File

@ -2643,12 +2643,15 @@ only screen and (min-width: 576px) and (max-width: 767px) {
}
.footer-widget-2 ul.service-list li::before {
content: "\e902";
font-family: 'icomoon';
content: "";
background-image: url("/assets/img/arrow-white.png");
background-size: contain;
background-repeat: no-repeat;
width: 14px;
height: 14px;
position: absolute;
top: 0;
left: -30px;
transition: all 500ms ease;
top: 6px;
left: -25px;
}
.footer-widget-2 ul.service-list li:hover {

BIN
public/assets/img/home/section10/footer-img.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/assets/img/home/section3/3.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 45 KiB

2
src/app/website-development-service/page.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import MainLayout from "@/components/layout/MainLayout";
import MainLayout from "@/components/web-development-service/support/layout/MainLayout";
import Hero from "@/components/web-development-service/Hero";
import BannerBottom from "@/components/web-development-service/BannerBottom";
import BrandSlider from "@/components/web-development-service/BrandSlider";

28
src/components/faq/FaqPageSection.tsx
View File

@ -124,15 +124,19 @@ const FaqPageSection = () => {
return (
<section className="faq-page-section">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-8">
<div className="section-title-wrapper text-center mb-60">
<div className="row align-items-end mb-60">
<div className="col-lg-6">
<div className="section-title-wrapper">
<span className="section-subtitle">
<img src="/assets/img-app/fav-icon.webp" alt="" className="subtitle-icon" /> FAQ
Digital Mastery Unlocked
</span>
<h2 className="section-title">Frequently Asked Questions</h2>
<p className="section-desc">
Transparent answers to the most common questions about our agency, development process, and partnership models.
<h2 className="section-title" style={{ margin: 0 }}>Metatroncube FAQs: Web-Apps, SEO, & Digital Marketing</h2>
</div>
</div>
<div className="col-lg-6">
<div className="section-desc-wrapper">
<p className="section-desc" style={{ margin: 0, paddingLeft: '20px'}}>
Welcome to Metatroncube’s FAQ page, where we delve into the intricacies of Web-App Development, the nuances of SEO, and the dynamics of Digital Marketing. Our goal is to address your queries and provide insightful answers that empower your digital journey, whether you’re navigating website design, mobile app development, or looking for effective digital marketing strategies.
</p>
</div>
</div>
@ -254,10 +258,14 @@ const FaqPageSection = () => {
}
.section-desc {
color: #64748b;
max-width: 600px;
margin: 0 auto;
font-size: 16px;
margin-bottom: 40px;
}
@media (max-width: 991px) {
.section-desc {
margin-top: 20px !important;
padding-left: 0 !important;
border-left: none !important;
}
}
.faq-item {
background: #fff;

4
src/components/home/PortfolioSection.tsx
View File

@ -155,10 +155,10 @@ function MobileCard({ item, onOpen }: { item: (typeof MobileAppServicesData)[0],
<div className="pf-card-info">
<h3 className="pf-card-name">{item.name}</h3>
{item.category === "live" && (
<span className="pf-live-badge">🟢 Live</span>
<span className="pf-live-badge">Live</span>
)}
{item.category === "coming-soon" && (
<span className="pf-soon-badge">🔜 Coming Soon</span>
<span className="pf-soon-badge">Coming Soon</span>
)}
</div>
</div>

32
src/components/layout/Footer/Footer.tsx
View File

@ -1,7 +1,7 @@
import Link from 'next/link';
import React from 'react';
const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
const currentYear = new Date().getFullYear();
const companyLinks = [
@ -19,7 +19,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
const socialLinks = [
{ icon: 'fa-facebook-f', link: 'https://www.facebook.com/metatroncubecanada', bg: '#0866ff' },
{ icon: 'fa-instagram', link: 'https://www.instagram.com/metatron_digitalagency', bg: '#d62976' },
{ icon: 'fa-x-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
{ icon: 'fa-brands fa-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
{ icon: 'fa-linkedin-in', link: 'https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all', bg: '#0077b5' },
{ icon: 'fa-youtube', link: 'https://www.youtube.com/@metatron_digitalagency', bg: '#ff0000' },
];
@ -28,7 +28,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<div
className={`${containerClass} sp8 position-relative`}
style={{
backgroundImage: 'url(/assets/img/home/footer/footer.webp)',
backgroundImage: 'url(/assets/img/home/section10/footer-img.webp)',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
@ -36,7 +36,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
}}
>
{/* Light overlay to ensure text readability */}
<div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.7)', zIndex: 0 }} />
<div style={{ position: 'absolute', inset: 0, zIndex: 0 }} />
{topSpace && (
<>
@ -51,7 +51,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<div className="footer-logo1">
<img src={logo} alt="MetatronCube Logo" style={{ maxWidth: '200px' }} />
<div className="space24"></div>
<p style={{ color: '#1a1f2b', lineHeight: '1.7' }}>
<p style={{ color: '#fff', lineHeight: '1.7' }}>
We build high-converting, fast, and SEO-optimized websites that generate leads, increase sales, and accelerate your business growth.
</p>
<div className="space24"></div>
@ -89,7 +89,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<div className="col-lg-2 col-md-6">
<div className="space30 d-md-none d-block"></div>
<div className="vl-footer-widget list-style-none">
<h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
<h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
Company
<span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
</h3>
@ -98,9 +98,9 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<li key={idx} style={{ marginBottom: '15px' }}>
<Link
href={item.link}
style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
>
{item.label}
</Link>
@ -114,7 +114,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<div className="col-lg-3 col-md-6">
<div className="space30 d-lg-none d-block"></div>
<div className="vl-footer-widget list-style-none">
<h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
<h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
Services
<span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
</h3>
@ -123,9 +123,9 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<li key={idx} style={{ marginBottom: '15px' }}>
<Link
href={item.link}
style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
>
{item.label}
</Link>
@ -140,7 +140,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<div className="col-lg-3 col-md-6">
<div className="space30 d-lg-none d-block"></div>
<div className="vl-footer-widget location-widget">
<h3 style={{ color: '#1a1f2b', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
<h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
Get In Touch
<span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
</h3>
@ -151,7 +151,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<i className="fa-solid fa-envelope"></i>
</div>
<div className="contact-text" style={{ overflowWrap: 'anywhere', wordBreak: 'break-word', maxWidth: '100%' }}>
<a href="mailto:info@metatroncubesolutions.com" style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#1a1f2b'}>
<a href="mailto:info@metatroncubesolutions.com" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
info@metatroncubesolutions.com
</a>
</div>
@ -163,7 +163,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<i className="fa-solid fa-location-dot"></i>
</div>
<div className="contact-text">
<p style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, margin: 0 }}>
<p style={{ color: '#fff', fontSize: '16px', fontWeight: 500, margin: 0 }}>
Waterloo, Ontario Canada
</p>
</div>
@ -175,7 +175,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<i className="fa-solid fa-phone"></i>
</div>
<div className="contact-text">
<a href="tel:+1-647-679-7651" style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#1a1f2b'}>
<a href="tel:+1-647-679-7651" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
+1-647-679-7651
</a>
</div>
@ -189,7 +189,7 @@ const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', conta
<div className="row align-items-center">
<div className="col-lg-12 col-md-12">
<div className="vl-copyright-area">
<p style={{ color: '#1a1f2b', margin: 0 }}>© Copyright {currentYear} - <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" style={{ color: '#3779b9', fontWeight: 700, textDecoration: 'none' }}>MetatronCube</a>. All Right Reserved</p>
<p style={{ color: '#fff', margin: 0 }}>© Copyright {currentYear} - <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" style={{ color: '#3779b9', fontWeight: 700, textDecoration: 'none' }}>MetatronCube</a>. All Right Reserved</p>
</div>
</div>
</div>

50
src/components/layout/Footer1.tsx
View File

@ -12,9 +12,10 @@ const Footer1 = () => (
<figure className="image">
<img src="/assets/img/logo.webp" alt="" />
</figure>
<p className="mt-40 mb-40">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
<p className="mt-40 mb-40">Metatroncube Software Solutions: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p>
<div className="footer-socials">
<span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
<span><a href="#"><i className="fa-brands fa-instagram"></i></a></span>
<span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
<span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
<span><a href="#"><i className="fa-brands fa-youtube"></i></a></span>
@ -23,38 +24,35 @@ const Footer1 = () => (
</div>
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
<div className="footer-widget-2 pl-50">
<h4 className="mb-20 footer-title">Our Services</h4>
<h4 className="mb-20 footer-title">Quick Links</h4>
<ul className="service-list">
<li><Link href="/service-details">IT Management</Link></li>
<li><Link href="/service-details">SEO Optimization</Link></li>
<li><Link href="/service-details">Web Development</Link></li>
<li><Link href="/service-details">Cyber Security</Link></li>
<li><Link href="/service-details">Data Security</Link></li>
<li><Link href="/">Home</Link></li>
<li><Link href="/about-us">About</Link></li>
<li><Link href="/careers">Careers</Link></li>
<li><Link href="/portfolio">Portfolio</Link></li>
<li><Link href="/faq">Faq</Link></li>
<li><Link href="/blog">Blog</Link></li>
<li><Link href="/contact">Contact</Link></li>
</ul>
</div>
</div>
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
<div className="footer-widget-3">
<h4 className="mb-20 footer-title">Latest Post</h4>
<ul className="blog-list">
{[1, 2].map((num) => (
<li key={num}>
<div className="footer-blog-post-box mb-15">
<figure className="thumb"><img src={`/assets/imgs/blog/blog-s-${num}.jpg`} alt="" /></figure>
<div className="content">
<span className="date"><a href="#">05 Dec, 2024</a></span>
<h6><Link href="#">{num === 1 ? "Tacking the Changes of Retail Industry" : "What’s the Holding Back the It Solution"}</Link></h6>
</div>
</div>
</li>
))}
<div className="footer-widget-2">
<h4 className="mb-20 footer-title">Our Services</h4>
<ul className="service-list">
<li><Link href="/website-development">Website Development</Link></li>
<li><Link href="/mobile-application-development">Mobile Application Development</Link></li>
<li><Link href="/graphic-designing">Graphic Designing</Link></li>
<li><Link href="/ui-ux-designing">UI / UX Designing</Link></li>
<li><Link href="/seo-content-writing">SEO & Content Writing</Link></li>
<li><Link href="/digital-marketing">Digital Marketing</Link></li>
</ul>
</div>
</div>
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
<div className="footer-widget-4 pr-30">
<h4 className="mb-20 footer-title">Newsletter</h4>
<p>Sign Up For News & Get 30% Off in New User.</p>
<p>Subscribe our newsletter to get our latest update & news</p>
<div className="footer-subscribe">
<form action="#">
<input type="email" name="email" placeholder="Your email address" required />
@ -72,10 +70,14 @@ const Footer1 = () => (
<div className="small-container">
<div className="footer-bottom pt-30 pb-30">
<div className="left-area">
<span>© All Copyright 2024 by <a href="#">Metatron</a></span>
<span>
© {new Date().getFullYear()} by{" "}
Metatroncube Software Solutions.
All Rights Reserved.
</span>
</div>
<div className="right-area">
<span><Link href="#">Terms & Condition</Link></span>
<span><Link href="#">Accessibility Statement</Link></span>
<span><Link href="#">Privacy Policy</Link></span>
</div>
</div>

92
src/components/mobile-app-development-service/style-app.css
View File

@ -19386,41 +19386,77 @@ img {
font-size: 16px;
line-height: 1.6;
}
/* New Button Styles - Theme Blue-Dark-Blue Gradient + Radius + Icon */
.vl-btn1, .vl-btn2, .vl-btn3, .vl-btn4, .vl-btn5, .vl-btn6, .kf-demo-btn, .secondary-cta {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
background-size: 200% auto !important;
border-radius: 10px !important;
color: #fff !important;
padding: 20px 30px !important;
border: none !important;
transition: all 0.5s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-decoration: none !important;
.vl-btn1,
.vl-btn2,
.vl-btn3,
.vl-btn4,
.vl-btn5,
.vl-btn6,
.kf-demo-btn,
.secondary-cta {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
background-size: 200% auto !important;
border-radius: 10px !important;
color: #fff !important;
padding: 15px 20px !important;
border: none !important;
transition: all 0.5s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-decoration: none !important;
}
.vl-btn1:hover, .vl-btn2:hover, .vl-btn3:hover, .vl-btn4:hover, .vl-btn5:hover, .vl-btn6:hover, .kf-demo-btn:hover, .secondary-cta:hover {
background-position: right center !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(55, 121, 185, 0.4) !important;
.vl-btn1:hover,
.vl-btn2:hover,
.vl-btn3:hover,
.vl-btn4:hover,
.vl-btn5:hover,
.vl-btn6:hover,
.kf-demo-btn:hover,
.secondary-cta:hover {
background-position: right center !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(55, 121, 185, 0.4) !important;
}
/* <i> icon styles */
.vl-btn1 i, .vl-btn2 i, .vl-btn3 i, .vl-btn4 i, .vl-btn5 i, .vl-btn6 i, .kf-demo-btn i, .secondary-cta i {
display: inline-block !important;
font-size: 14px !important;
margin-left: 5px !important;
transition: transform 0.3s ease !important;
.vl-btn1 i,
.vl-btn2 i,
.vl-btn3 i,
.vl-btn4 i,
.vl-btn5 i,
.vl-btn6 i,
.kf-demo-btn i,
.secondary-cta i {
display: inline-block !important;
font-size: 14px !important;
margin-left: 5px !important;
transition: transform 0.3s ease !important;
}
.vl-btn1:hover i, .vl-btn2:hover i, .vl-btn3:hover i, .vl-btn4:hover i, .vl-btn5:hover i, .vl-btn6:hover i, .kf-demo-btn:hover i, .secondary-cta:hover i {
transform: translateX(3px) !important;
.vl-btn1:hover i,
.vl-btn2:hover i,
.vl-btn3:hover i,
.vl-btn4:hover i,
.vl-btn5:hover i,
.vl-btn6:hover i,
.kf-demo-btn:hover i,
.secondary-cta:hover i {
transform: translateX(3px) !important;
}
.vl-btn1::after, .vl-btn2::after, .vl-btn3::after, .vl-btn4::after, .vl-btn5::after, .vl-btn6::after, .kf-demo-btn::after, .secondary-cta::after {
display: none !important;
}
.vl-btn1::after,
.vl-btn2::after,
.vl-btn3::after,
.vl-btn4::after,
.vl-btn5::after,
.vl-btn6::after,
.kf-demo-btn::after,
.secondary-cta::after {
display: none !important;
}

14
src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx
View File

@ -9,7 +9,7 @@ const Footer = ({ logo = '/assets/img-app/home/footer/footer-logo-black.webp', c
{ label: 'About Us', link: '#about' },
{ label: 'Portfolio', link: '#portfolio' },
{ label: 'Faq', link: '#faq' },
{ label: 'Contact', link: '/pages/contact' },
{ label: 'Contact', link: '#contact-trigger' },
];
const serviceLinks = [
@ -101,6 +101,12 @@ const Footer = ({ logo = '/assets/img-app/home/footer/footer-logo-black.webp', c
style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
onClick={(e) => {
if (item.link === '#contact-trigger') {
e.preventDefault();
window.dispatchEvent(new CustomEvent('openContactPopup'));
}
}}
>
{item.label}
</Link>
@ -126,6 +132,12 @@ const Footer = ({ logo = '/assets/img-app/home/footer/footer-logo-black.webp', c
style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s' }}
onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
onClick={(e) => {
if (item.link === '#contact-trigger') {
e.preventDefault();
window.dispatchEvent(new CustomEvent('openContactPopup'));
}
}}
>
{item.label}
</Link>

2
src/components/web-development-service/CaseStudies.tsx
View File

@ -41,7 +41,7 @@ const CaseStudies = () => {
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
autoplaySpeed: 2000,
arrows: false,
pauseOnHover: true,
responsive: [

2
src/components/web-development-service/Pricing.tsx
View File

@ -37,7 +37,7 @@ const Pricing = () => {
background: plan.isPopular ? '#1a1f2b' : '#fff',
transition: 'all 0.4s',
border: plan.isPopular ? 'none' : '1px solid #e3eaf4',
boxShadow: plan.isPopular ? '0 30px 60px rgba(0,0,0,0.15)' : 'none',
boxShadow: '0 30px 60px rgba(0,0,0,0.5)',
position: 'relative',
height: '100%',
display: 'flex',

6
src/components/web-development-service/style.css
View File

@ -3416,7 +3416,7 @@ Location:
}
.service1-section-area .service1-boxarea:hover h5::after {
background: #1a1f2b;
background: #fff;
transition: all 0.4s;
left: 26px;
}
@ -3522,7 +3522,7 @@ Location:
left: 0;
top: 6px;
transition: all 0.4s;
background: #1a1f2b;
background: #3779b9;
}
.service2-section-area {
@ -19393,7 +19393,7 @@ img {
background-size: 200% auto !important;
border-radius: 10px !important;
color: #fff !important;
padding: 20px 30px !important;
padding: 15px 20px !important;
border: none !important;
transition: all 0.5s ease !important;
display: inline-flex !important;

213
src/components/web-development-service/support/layout/Footer/Footer.tsx Normal file
View File

@ -0,0 +1,213 @@
import Link from 'next/link';
import React from 'react';
const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
const currentYear = new Date().getFullYear();
const companyLinks = [
{ label: 'Home', link: '#home' },
{ label: 'About Us', link: '#about' },
{ label: 'Portfolio', link: '#portfolio' },
{ label: 'Faq', link: '#faq' },
{ label: 'Contact', link: '#contact-trigger' },
];
const serviceLinks = [
{ label: 'Website Development', link: '#services' },
];
const socialLinks = [
{ icon: 'fa-facebook-f', link: 'https://www.facebook.com/metatroncubecanada', bg: '#0866ff' },
{ icon: 'fa-instagram', link: 'https://www.instagram.com/metatron_digitalagency', bg: '#d62976' },
{ icon: 'fa-brands fa-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
{ icon: 'fa-linkedin-in', link: 'https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all', bg: '#0077b5' },
{ icon: 'fa-youtube', link: 'https://www.youtube.com/@metatron_digitalagency', bg: '#ff0000' },
];
return (
<div
className={`${containerClass} sp8 position-relative`}
style={{
backgroundImage: 'url(/assets/img/home/section10/footer-img.webp)',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
overflow: 'hidden',
}}
>
{/* Light overlay to ensure text readability */}
<div style={{ position: 'absolute', inset: 0, zIndex: 0 }} />
{topSpace && (
<>
<div className="space100"></div>
<div className="space50"></div>
</>
)}
<div className="container position-relative" style={{ zIndex: 1 }}>
<div className="row">
{/* Column 1: Logo & Description */}
<div className="col-lg-4 col-md-6">
<div className="footer-logo1">
<img src={logo} alt="MetatronCube Logo" style={{ maxWidth: '200px' }} />
<div className="space24"></div>
<p style={{ color: '#fff', lineHeight: '1.7' }}>
We build high-converting, fast, and SEO-optimized websites that generate leads, increase sales, and accelerate your business growth.
</p>
<div className="space24"></div>
<div className="footer-socials d-flex gap-3">
{socialLinks.map((social, idx) => (
<a
key={idx}
id={`footer-social-${social.icon}`}
href={social.link}
target="_blank"
rel="noopener noreferrer"
className="social-icon-box"
style={{
width: '40px',
height: '40px',
borderRadius: '50%',
background: social.bg || '#3779b9',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
transition: 'transform 0.3s'
}}
onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(-5px)'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.transform = 'translateY(0)'; }}
>
<i className={`fa-brands ${social.icon}`}></i>
</a>
))}
</div>
</div>
</div>
{/* Column 2: Company */}
<div className="col-lg-2 col-md-6">
<div className="space30 d-md-none d-block"></div>
<div className="vl-footer-widget list-style-none">
<h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
Company
<span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
</h3>
<ul className="p-0 m-0" style={{ listStyle: 'none' }}>
{companyLinks.map((item, idx) => (
<li key={idx} style={{ marginBottom: '15px' }}>
<Link
href={item.link}
style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
onClick={(e) => {
if (item.link === '#contact-trigger') {
e.preventDefault();
window.dispatchEvent(new CustomEvent('openContactPopup'));
}
}}
>
{item.label}
</Link>
</li>
))}
</ul>
</div>
</div>
{/* Column 3: Services */}
<div className="col-lg-3 col-md-6">
<div className="space30 d-lg-none d-block"></div>
<div className="vl-footer-widget list-style-none">
<h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
Services
<span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
</h3>
<ul className="p-0 m-0" style={{ listStyle: 'none' }}>
{serviceLinks.map((item, idx) => (
<li key={idx} style={{ marginBottom: '15px' }}>
<Link
href={item.link}
style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#3779b9'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#fff'; }}
onClick={(e) => {
if (item.link === '#contact-trigger') {
e.preventDefault();
window.dispatchEvent(new CustomEvent('openContactPopup'));
}
}}
>
{item.label}
</Link>
</li>
))}
</ul>
</div>
</div>
{/* Column 4: Newsletter */}
{/* Column 4: Location */}
<div className="col-lg-3 col-md-6">
<div className="space30 d-lg-none d-block"></div>
<div className="vl-footer-widget location-widget">
<h3 style={{ color: '#fff', fontSize: '24px', fontWeight: 700, marginBottom: '30px', position: 'relative' }}>
Get In Touch
<span style={{ position: 'absolute', bottom: '-10px', left: 0, width: '40px', height: '2px', background: '#3779b9' }}></span>
</h3>
<div className="contact-list d-flex flex-column gap-3">
{/* Email */}
<div className="contact-item d-flex align-items-start gap-3 flex-wrap">
<div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
<i className="fa-solid fa-envelope"></i>
</div>
<div className="contact-text" style={{ overflowWrap: 'anywhere', wordBreak: 'break-word', maxWidth: '100%' }}>
<a href="mailto:info@metatroncubesolutions.com" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
info@metatroncubesolutions.com
</a>
</div>
</div>
{/* Location */}
<div className="contact-item d-flex align-items-start gap-3">
<div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
<i className="fa-solid fa-location-dot"></i>
</div>
<div className="contact-text">
<p style={{ color: '#fff', fontSize: '16px', fontWeight: 500, margin: 0 }}>
Waterloo, Ontario Canada
</p>
</div>
</div>
{/* Phone */}
<div className="contact-item d-flex align-items-start gap-3 flex-wrap">
<div className="contact-icon" style={{ color: '#3779b9', fontSize: '18px', width: '20px' }}>
<i className="fa-solid fa-phone"></i>
</div>
<div className="contact-text">
<a href="tel:+1-647-679-7651" style={{ color: '#fff', fontSize: '16px', fontWeight: 500, textDecoration: 'none', transition: 'color 0.3s' }} onMouseEnter={(e) => e.currentTarget.style.color = '#3779b9'} onMouseLeave={(e) => e.currentTarget.style.color = '#fff'}>
+1-647-679-7651
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space60"></div>
<div className="row align-items-center">
<div className="col-lg-12 col-md-12">
<div className="vl-copyright-area">
<p style={{ color: '#fff', margin: 0 }}>© Copyright {currentYear} - <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" style={{ color: '#3779b9', fontWeight: 700, textDecoration: 'none' }}>MetatronCube</a>. All Right Reserved</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default Footer;

73
src/components/web-development-service/support/layout/Header/Header.tsx Normal file
View File

@ -0,0 +1,73 @@
"use client";
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import useSticky from '@/hooks/useSticky';
import NavItems from './NavItems';
import MobileMenu from './MobileMenu';
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
const Header = () => {
const sticky = useSticky();
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isPopupOpen, setIsPopupOpen] = useState(false);
useEffect(() => {
const handleOpenPopup = () => setIsPopupOpen(true);
window.addEventListener('openContactPopup', handleOpenPopup);
return () => window.removeEventListener('openContactPopup', handleOpenPopup);
}, []);
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen);
};
return (
<>
<header className="homepage1-body">
<div id="vl-header-sticky" className={`vl-header-area vl-transparent-header ${sticky ? "header-sticky" : ""}`}>
<div className="container headerfix">
<div className="row align-items-center row-bg3">
<div className="col-lg-3 col-md-6 col-6">
<div className="vl-logo">
<Link href="/">
<img src="/assets/img/logo.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
</Link>
</div>
</div>
<div className="col-lg-6 d-none d-lg-block">
<div className="vl-main-menu text-center">
<nav className="vl-mobile-menu-active">
<NavItems themeBtn="vl-btn1" />
</nav>
</div>
</div>
<div className="col-lg-3 col-md-6 col-6">
<div className="vl-hero-btn d-none d-lg-block text-end">
<span className="vl-btn-wrap text-end">
<button
onClick={() => setIsPopupOpen(true)}
className="vl-btn1"
style={{ border: 'none' }}
>
Get Started Now <i className="fa-solid fa-angle-right"></i>
</button>
</span>
</div>
<div className="vl-header-action-item d-block d-lg-none">
<button type="button" className="vl-offcanvas-toggle" onClick={toggleMobileMenu}>
<i className="fa-solid fa-bars-staggered"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<MobileMenu isMobileMenuOpen={isMobileMenuOpen} toggleMobileMenu={toggleMobileMenu} themeBtn="vl-btn1" />
<ContactPopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} />
</>
);
};
export default Header;

86
src/components/web-development-service/support/layout/Header/MobileMenu.tsx Normal file
View File

@ -0,0 +1,86 @@
"use client";
import React from 'react';
import Link from 'next/link';
interface MobileMenuProps {
isMobileMenuOpen: boolean;
toggleMobileMenu: () => void;
themeBtn?: string;
arrow?: boolean;
arrow2?: boolean;
}
const navItems = [
{ title: 'Home', link: '#home' },
{ title: 'About', link: '#about' },
{ title: 'Services', link: '#services' },
{ title: 'Portfolio', link: '#portfolio' },
{ title: 'FAQ', link: '#faq' },
{ title: 'Contact', link: '#contact-trigger' },
];
const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileMenu }) => {
return (
<div className="homepage1-body">
<div className={`vl-offcanvas ${isMobileMenuOpen ? 'vl-offcanvas-open' : ''}`}>
<div className="vl-offcanvas-wrapper">
<div className="vl-offcanvas-header d-flex justify-content-between align-items-center mb-90">
<div className="vl-offcanvas-logo">
<Link href="#home" onClick={toggleMobileMenu}>
<img src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
</Link>
</div>
<div className="vl-offcanvas-close">
<button className="vl-offcanvas-close-toggle" onClick={toggleMobileMenu}>
<i className="fa-solid fa-xmark"></i>
</button>
</div>
</div>
<div className="vl-offcanvas-menu d-lg-none mb-40">
<nav>
<ul>
{navItems.map((item, index) => (
<li key={index}>
<Link
href={item.link}
onClick={(e) => {
if (item.link === '#contact-trigger') {
e.preventDefault();
window.dispatchEvent(new CustomEvent('openContactPopup'));
}
toggleMobileMenu();
}}
>
{item.title}
</Link>
</li>
))}
</ul>
</nav>
</div>
<div className="space20"></div>
<div className="vl-offcanvas-info">
<h3 className="vl-offcanvas-sm-title">Contact Us</h3>
<span><a href="tel:+16476797651"><i className="fa-solid fa-phone"></i> +1-647-679-7651</a></span>
<span><a href="mailto:info@metatroncubesolutions.com"><i className="fa-regular fa-envelope"></i> info@metatroncubesolutions.com</a></span>
</div>
<div className="space20"></div>
<div className="vl-offcanvas-social">
<h3 className="vl-offcanvas-sm-title">Follow Us</h3>
<a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer"><i className="fab fa-facebook-f"></i></a>
<a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer"><i className="fa-brands fa-x-twitter"></i></a>
<a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer"><i className="fab fa-linkedin-in"></i></a>
<a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer"><i className="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer"><i className="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div className={`vl-offcanvas-overlay ${isMobileMenuOpen ? 'vl-offcanvas-overlay-open' : ''}`} onClick={toggleMobileMenu}></div>
</div>
);
};
export default MobileMenu;

42
src/components/web-development-service/support/layout/Header/NavItems.tsx Normal file
View File

@ -0,0 +1,42 @@
import Link from 'next/link';
import React from 'react';
interface NavItemsProps {
themeBtn?: string;
arrow?: boolean;
arrow2?: boolean;
btnSpace?: boolean;
}
const navItems = [
{ title: 'Home', link: '#home' },
{ title: 'About', link: '#about' },
{ title: 'Services', link: '#services' },
{ title: 'Portfolio', link: '#portfolio' },
{ title: 'FAQ', link: '#faq' },
{ title: 'Contact', link: '#contact-trigger' },
];
const NavItems: React.FC<NavItemsProps> = () => {
return (
<ul>
{navItems.map((item, index) => (
<li key={index}>
<Link
href={item.link}
onClick={(e) => {
if (item.link === '#contact-trigger') {
e.preventDefault();
window.dispatchEvent(new CustomEvent('openContactPopup'));
}
}}
>
{item.title}
</Link>
</li>
))}
</ul>
);
};
export default NavItems;

26
src/components/web-development-service/support/layout/MainLayout.tsx Normal file
View File

@ -0,0 +1,26 @@
"use client";
import React, { useEffect } from 'react';
import AOS from 'aos';
import Header from './Header/Header';
import Footer from './Footer/Footer';
import CTA from '@/components/layout/CTA/CTA';
const MainLayout = ({ children }: { children: React.ReactNode }) => {
useEffect(() => {
AOS.init({
duration: 1000,
once: true,
});
}, []);
return (
<>
<Header />
<main>{children}</main>
<CTA />
<Footer />
</>
);
};
export default MainLayout;

58
src/utils/constant.utils.ts
View File

@ -221,7 +221,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/3.png",
@ -233,7 +233,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/4.png",
@ -245,7 +245,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/5.png",
@ -257,7 +257,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/6.png",
@ -269,7 +269,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/7.png",
@ -281,7 +281,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/8.png",
@ -293,7 +293,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/FALCON AD 1.png",
@ -305,7 +305,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/Falcon Tees.png",
@ -318,7 +318,7 @@ export const PortfolioData = [
contentInnerClass: "case-study-content-inner",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/FB COVER.png",
@ -330,7 +330,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/metatroncube.png",
@ -342,7 +342,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/metatronNest.png",
@ -354,7 +354,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/mockup.png",
@ -366,7 +366,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/mockup-2.png",
@ -378,7 +378,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/polo tshirt.png",
@ -390,7 +390,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/POSTER.png",
@ -402,7 +402,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/vehicle.jpg",
@ -414,7 +414,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/1.jpg",
@ -426,7 +426,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/2.jpg",
@ -438,7 +438,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/3.jpg",
@ -450,7 +450,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/6.jpg",
@ -463,7 +463,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/new chennora banner.jpg",
@ -475,7 +475,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/Digital Advertisement Agency.jpg",
@ -487,7 +487,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/Copy of Metatroncube CA - June Posters.jpg",
@ -499,7 +499,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/graphic.jpg",
@ -511,7 +511,7 @@ export const PortfolioData = [
colClass: "col-lg-4 col-md-6",
alt: "Consulting for Business Organizations",
title: "Graphic Design",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/graphic-design/graphic-4.jpg",
@ -560,7 +560,7 @@ export const PortfolioData = [
contentInnerClass: "case-study-content-inner2",
alt: "Consulting for Business Organizations",
title: "Google Meta Ads",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/meta-ads/Google Ads.jpeg",
@ -573,7 +573,7 @@ export const PortfolioData = [
contentInnerClass: "case-study-content-inner2",
alt: "Consulting for Business Organizations",
title: "Google Meta Ads",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/meta-ads/Meta Ads 1.png",
@ -586,7 +586,7 @@ export const PortfolioData = [
contentInnerClass: "case-study-content-inner2",
alt: "Consulting for Business Organizations",
title: "Google Meta Ads",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/meta-ads/Meta Ads 2.png",
@ -599,7 +599,7 @@ export const PortfolioData = [
contentInnerClass: "case-study-content-inner2",
alt: "Consulting for Business Organizations",
title: "Google Meta Ads",
name: "Consulting for Business Organizations",
// name: "Consulting for Business Organizations",
link: "#",
videoLink: "https://youtu.be/BS4TUd7FJSg",
imagePopup: "/assets/images/portfolio/meta-ads/Meta Ads 3.png",