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

Compare commits

base: MetatroncubeSoftwareSolutions:2bd046a7181dda1f3cac9d78bb9806fc1654da9f
Branches Tags
MetatroncubeSoftwareSolutions:main
...
compare: MetatroncubeSoftwareSolutions:e4def3e36fd443eeb88654e29f851845fe3ccc40
Branches Tags
MetatroncubeSoftwareSolutions:main

3 Commits
2bd046a718 ... e4def3e36f

Author SHA1 Message Date
selvi
e4def3e36f footer updated 2026-03-03 22:17:18 +05:30
selvi
0f9d0e1d72 footer updated 2026-03-03 21:34:16 +05:30
selvi
8716e212f7 footer updated 2026-03-03 21:33:38 +05:30
28 changed files with 672 additions and 159 deletions
Show Stats 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

35
src/app/globals.css
View File

@ -2014,7 +2014,7 @@ body {
.contact-one {
position: relative;
overflow: hidden;
padding: 80px 0 0;
padding: 0 0 80px;
background-color: #fff;
}
@ -6872,6 +6872,7 @@ body {
font-weight: 700;
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.3);
transition: all 400ms ease;
color: #fff !important;
}
.pelocis-btn--premium:hover {
@ -7157,7 +7158,7 @@ body {
position: relative;
background-size: cover;
background-position: center;
padding: 130px 0;
padding: 80px 0;
background-color: #fff;
overflow: hidden;
}
@ -7776,8 +7777,8 @@ body {
Projects Section Styles
══════════════════════════════════════════════════════════ */
:root {
--pelocis-base: #e2a475;
--pelocis-black: #222222;
--pelocis-base: #3779b9;
--pelocis-black: #1a1f2b;
--pelocis-white: #fff;
--pelocis-gray: #F5F2EF;
--pelocis-border-color: #DDDDDD;
@ -7809,7 +7810,7 @@ body {
content: "";
width: 13px;
height: 13px;
background-color: var(--pelocis-base, #e2a475);
background-color: var(--pelocis-base, #3779b9);
display: block;
}
@ -7817,7 +7818,7 @@ body {
content: "";
width: 12px;
height: 12px;
background-color: var(--pelocis-black, #222222);
background-color: var(--pelocis-black, #1a1f2b);
border: 1px solid var(--pelocis-white, #fff);
display: block;
position: absolute;
@ -7827,7 +7828,7 @@ body {
.sec-title__tagline {
margin: 0;
color: var(--pelocis-base, #e2a475);
color: var(--pelocis-base, #3779b9);
font-size: 18px;
line-height: 16px;
text-transform: uppercase;
@ -7861,7 +7862,7 @@ body {
position: relative;
display: block;
background-color: transparent;
color: var(--pelocis-black, #222222);
color: var(--pelocis-black, #1a1f2b);
transition: all 500ms ease;
text-transform: capitalize;
padding: 12.5px 25px;
@ -7872,8 +7873,8 @@ body {
.projects-one__filter__list li.active,
.projects-one__filter__list li:hover {
background-color: var(--pelocis-base, #e2a475);
border-color: var(--pelocis-base, #e2a475);
background-color: var(--pelocis-base, #3779b9);
border-color: var(--pelocis-base, #3779b9);
color: var(--pelocis-white, #fff);
}
@ -7951,7 +7952,7 @@ body {
left: 2.5%;
bottom: 20px;
clip-path: polygon(87% 0, 100% 50%, 87% 100%, 0 100%, 0 0);
background-color: var(--pelocis-base, #e2a475);
background-color: var(--pelocis-base, #3779b9);
z-index: -1;
border-radius: 15px;
}
@ -8002,10 +8003,10 @@ body {
justify-content: center;
border-radius: 15px 15px 0px 0px;
background-color: var(--pelocis-white, #fff);
color: var(--pelocis-black, #222222);
color: var(--pelocis-black, #1a1f2b);
font-size: 18px;
font-weight: 800;
border: 1px solid var(--pelocis-base, #e2a475);
border: 1px solid var(--pelocis-base, #3779b9);
border-bottom: none;
}
@ -8024,7 +8025,7 @@ body {
justify-content: center;
align-items: center;
background-color: var(--pelocis-white, #fff);
color: var(--pelocis-base, #e2a475);
color: var(--pelocis-base, #3779b9);
font-size: 16px;
border-radius: 12px;
cursor: pointer;
@ -8326,7 +8327,7 @@ body {
content: "";
width: 13px;
height: 13px;
background-color: var(--pelocis-base, #e2a475);
background-color: var(--pelocis-base, #3779b9);
display: block;
}
@ -8345,7 +8346,7 @@ body {
.sec-title__tagline {
margin: 0;
font-family: var(--pelocis-font, inherit);
color: var(--pelocis-base, #e2a475);
color: var(--pelocis-base, #3779b9);
font-size: 16px;
line-height: 16px;
text-transform: uppercase;
@ -8370,7 +8371,7 @@ body {
}
.sec-title--light .sec-title__tagline {
color: var(--pelocis-base, #e2a475);
color: var(--pelocis-base, #3779b9);
}
.sec-title--light .sec-title__shape::after {

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;

2
src/components/home/AboutTwo.tsx
View File

@ -29,7 +29,7 @@ const AboutTwo = () => {
<div className="col-xl-6">
<div className="about-two__content">
<div className="sec-title">
<span className="about-two__dot-circle"></span>
{/* <span className="about-two__dot-circle"></span> */}
<div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">OUR ABOUT COMPANY</h6>
<h3 className="sec-title__title">Psychology Seeks To Explore The About Workings of Human</h3>

6
src/components/home/MedicalServices.tsx
View File

@ -60,7 +60,7 @@ const MedicalServices = () => {
<section
className="medical-services-circle p-relative overflow-hidden"
style={{
backgroundImage: `url('https://bracketweb.com/pelocishtml/assets/images/backgrounds/contact-bg-1.jpg')`,
backgroundImage: `url('/assets/img/all-images/blog/blog-img1.png')`,
backgroundAttachment: 'fixed',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
@ -96,8 +96,8 @@ const MedicalServices = () => {
>
<div className="sec-title">
<div className="sec-title__shape"></div>
<h6 className="sec-title__tagline text-white">MEDICAL SERVICES</h6>
<h3 className="sec-title__title text-white">Medical <span className="inner-text">Services</span></h3>
<h6 className="sec-title__tagline text-white">WELCOME</h6>
<h3 className="sec-title__title text-white">Driving Client <span className="inner-text">Success </span></h3>
</div>
<p className="sec-text mt-15 text-white">It is a long established fact that a reader will be distracted the readable content of <br /> a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>

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>

2
src/components/home/home-1/ChooseSection.tsx
View File

@ -11,7 +11,7 @@ const ChooseSection = () => (
<div className="sec-title">
<div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">WHY CHOOSE US</h6>
<h3 className="sec-title__title">What&apos;s Make Us Different</h3>
<h3 className="sec-title__title text-white">What&apos;s Make Us Different</h3>
</div>
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div>

2
src/components/home/home-1/CtaSection.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
const CtaSection = () => (
<section className="cta-1-section bg-color-1 p-relative wow fadeInDown" data-wow-delay=".5s">
<section className="cta-1-section bg-color-1 p-relative wow fadeInDown mb-80" data-wow-delay=".5s">
<div className="small-container">
<div className="row g-0 box-shadow-1 fix">
<div className="col-xxl-6 col-lg-6 bg-white">

4
src/components/home/home-1/FeaturesSection.tsx
View File

@ -142,7 +142,7 @@ const FeaturesSection = () => {
<div className="fo-hover-icon">
{feature.icon}
</div>
<h2 className="fo-hover-title">{feature.title}</h2>
<h3 className="fo-hover-title">{feature.title}</h3>
<Link href="#" className="fo-hover-btn">
<ArrowIcon />
</Link>
@ -152,7 +152,7 @@ const FeaturesSection = () => {
<div className="fo-card">
{/* Top dark section */}
<div className="fo-card-top">
<h2 className="fo-card-title">{feature.title}</h2>
<h3 className="fo-card-title">{feature.title}</h3>
<Link href="#" className="fo-card-btn">
<ArrowIcon />
</Link>

4
src/components/home/home-1/TestimonialsSection.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import { testimonialSlides } from "@/utils/data";
const TestimonialsSection = () => (
<section className="testimonials-two-section fix section-space">
<section className="testimonials-two-section fix section-space-bottom">
<div className="container-fluid g-0">
<div className="row g-0">
<div className="col-xxl-4 col-xl-4 col-lg-12">
@ -22,7 +22,7 @@ const TestimonialsSection = () => (
<div className="sec-title">
<div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">TESTIMONIALS</h6>
<h3 className="sec-title__title">Our Client Feedback</h3>
<h3 className="sec-title__title text-white">Our Client Feedback</h3>
</div>
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</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</Link></li>
<li><Link href="/">Mobile Application Development</Link></li>
<li><Link href="/">Graphic Designing</Link></li>
<li><Link href="/">UI / UX Designing</Link></li>
<li><Link href="/">SEO & Content Writing</Link></li>
<li><Link href="/">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>

13
src/components/layout/NavMenu.tsx
View File

@ -5,8 +5,19 @@ const NavMenu = () => (
<ul>
<li><Link href="/">Home</Link></li>
<li><Link href="/about-us">About</Link></li>
<li><Link href="/services">Services</Link></li>
<li className="has-dropdown">
<Link href="/services">Services</Link>
<ul className="submenu">
<li><Link href="/">Website Development</Link></li>
<li><Link href="/">Mobile Application Development</Link></li>
<li><Link href="/">Graphic Designing</Link></li>
<li><Link href="/">UI / UX Designing</Link></li>
<li><Link href="/">SEO & Content Writing</Link></li>
<li><Link href="/">Digital Marketing</Link></li>
</ul>
</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>

90
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;
}

16
src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx
View File

@ -126,29 +126,29 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
<div className="col-lg-5 info-panel" style={{ color: '#fff', position: 'relative' }}>
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)', zIndex: 0 }}></div>
<div className="info-inner" style={{ position: 'relative', zIndex: 1 }}>
<h2 className="title">Let’s Discuss Your App Idea</h2>
<p className="desc">Fill out the form and our team will contact you within 24 hours.</p>
<h2 className="title text-white">Let’s Discuss Your App Idea</h2>
<p className="desc text-white">Fill out the form and our team will contact you within 24 hours.</p>
<div className="contact-details">
<div className="detail-item">
<div className="icon"><i className="fa-solid fa-envelope"></i></div>
<div className="text">
<p>Email Us</p>
<h5>info@metatroncubesolutions.com</h5>
<p className='text-white'>Email Us</p>
<h5 className='text-white'>info@metatroncubesolutions.com</h5>
</div>
</div>
<div className="detail-item">
<div className="icon"><i className="fa-solid fa-phone"></i></div>
<div className="text">
<p>Call Us Free</p>
<h5><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
<p className='text-white'>Call Us Free</p>
<h5 className='text-white'><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
</div>
</div>
</div>
<div className="social-links">
<a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-facebook-f"></i></a>
<a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-x-twitter"></i></a>
<a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-twitter"></i></a>
<a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-linkedin-in"></i></a>
<a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-instagram"></i></a>
<a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-youtube"></i></a>
@ -272,7 +272,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
flex-direction: column;
}
.info-panel {
padding: 50px;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;

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

@ -9,17 +9,17 @@ 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 = [
{ label: 'Website Development', link: '#services' },
{ label: 'Mobile App 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-x-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
{ icon: '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' },
];
@ -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",