Compare commits

..

No commits in common. "e4def3e36fd443eeb88654e29f851845fe3ccc40" and "2bd046a7181dda1f3cac9d78bb9806fc1654da9f" have entirely different histories.

28 changed files with 159 additions and 672 deletions

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 70 KiB

View File

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

View File

@ -1,5 +1,5 @@
import React from "react";
import MainLayout from "@/components/web-development-service/support/layout/MainLayout";
import MainLayout from "@/components/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";

View File

@ -124,19 +124,15 @@ const FaqPageSection = () => {
return (
<section className="faq-page-section">
<div className="container">
<div className="row align-items-end mb-60">
<div className="col-lg-6">
<div className="section-title-wrapper">
<div className="row justify-content-center">
<div className="col-lg-8">
<div className="section-title-wrapper text-center mb-60">
<span className="section-subtitle">
Digital Mastery Unlocked
<img src="/assets/img-app/fav-icon.webp" alt="" className="subtitle-icon" /> FAQ
</span>
<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 Metatroncubes 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 youre navigating website design, mobile app development, or looking for effective digital marketing strategies.
<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.
</p>
</div>
</div>
@ -258,14 +254,10 @@ const FaqPageSection = () => {
}
.section-desc {
color: #64748b;
max-width: 600px;
margin: 0 auto;
font-size: 16px;
}
@media (max-width: 991px) {
.section-desc {
margin-top: 20px !important;
padding-left: 0 !important;
border-left: none !important;
}
margin-bottom: 40px;
}
.faq-item {
background: #fff;

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>

View File

@ -60,7 +60,7 @@ const MedicalServices = () => {
<section
className="medical-services-circle p-relative overflow-hidden"
style={{
backgroundImage: `url('/assets/img/all-images/blog/blog-img1.png')`,
backgroundImage: `url('https://bracketweb.com/pelocishtml/assets/images/backgrounds/contact-bg-1.jpg')`,
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">WELCOME</h6>
<h3 className="sec-title__title text-white">Driving Client <span className="inner-text">Success </span></h3>
<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>
</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>

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>

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 text-white">What&apos;s Make Us Different</h3>
<h3 className="sec-title__title">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>

View File

@ -1,7 +1,7 @@
import React from "react";
const CtaSection = () => (
<section className="cta-1-section bg-color-1 p-relative wow fadeInDown mb-80" data-wow-delay=".5s">
<section className="cta-1-section bg-color-1 p-relative wow fadeInDown" 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">

View File

@ -142,7 +142,7 @@ const FeaturesSection = () => {
<div className="fo-hover-icon">
{feature.icon}
</div>
<h3 className="fo-hover-title">{feature.title}</h3>
<h2 className="fo-hover-title">{feature.title}</h2>
<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">
<h3 className="fo-card-title">{feature.title}</h3>
<h2 className="fo-card-title">{feature.title}</h2>
<Link href="#" className="fo-card-btn">
<ArrowIcon />
</Link>

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-bottom">
<section className="testimonials-two-section fix section-space">
<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 text-white">Our Client Feedback</h3>
<h3 className="sec-title__title">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>

View File

@ -1,7 +1,7 @@
import Link from 'next/link';
import React from 'react';
const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
const currentYear = new Date().getFullYear();
const companyLinks = [
@ -19,7 +19,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
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-x-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/logo.webp', containerClass = 'vl-footer1-s
<div
className={`${containerClass} sp8 position-relative`}
style={{
backgroundImage: 'url(/assets/img/home/section10/footer-img.webp)',
backgroundImage: 'url(/assets/img/home/footer/footer.webp)',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
@ -36,7 +36,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
}}
>
{/* Light overlay to ensure text readability */}
<div style={{ position: 'absolute', inset: 0, zIndex: 0 }} />
<div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.7)', zIndex: 0 }} />
{topSpace && (
<>
@ -51,7 +51,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
<div className="footer-logo1">
<img src={logo} alt="MetatronCube Logo" style={{ maxWidth: '200px' }} />
<div className="space24"></div>
<p style={{ color: '#fff', lineHeight: '1.7' }}>
<p style={{ color: '#1a1f2b', 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/logo.webp', containerClass = 'vl-footer1-s
<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' }}>
<h3 style={{ color: '#1a1f2b', 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/logo.webp', containerClass = 'vl-footer1-s
<li key={idx} style={{ marginBottom: '15px' }}>
<Link
href={item.link}
style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
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 = '#fff'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
>
{item.label}
</Link>
@ -114,7 +114,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
<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' }}>
<h3 style={{ color: '#1a1f2b', 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/logo.webp', containerClass = 'vl-footer1-s
<li key={idx} style={{ marginBottom: '15px' }}>
<Link
href={item.link}
style={{ color: '#fff', textDecoration: 'none', transition: 'color 0.3s' }}
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 = '#fff'; }}
onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => { e.currentTarget.style.color = '#1a1f2b'; }}
>
{item.label}
</Link>
@ -140,7 +140,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
<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' }}>
<h3 style={{ color: '#1a1f2b', 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/logo.webp', containerClass = 'vl-footer1-s
<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'}>
<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'}>
info@metatroncubesolutions.com
</a>
</div>
@ -163,7 +163,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
<i className="fa-solid fa-location-dot"></i>
</div>
<div className="contact-text">
<p style={{ color: '#fff', fontSize: '16px', fontWeight: 500, margin: 0 }}>
<p style={{ color: '#1a1f2b', fontSize: '16px', fontWeight: 500, margin: 0 }}>
Waterloo, Ontario Canada
</p>
</div>
@ -175,7 +175,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
<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'}>
<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'}>
+1-647-679-7651
</a>
</div>
@ -189,7 +189,7 @@ const Footer = ({ logo = '/assets/img/logo.webp', containerClass = 'vl-footer1-s
<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>
<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>
</div>
</div>
</div>

View File

@ -12,10 +12,9 @@ const Footer1 = () => (
<figure className="image">
<img src="/assets/img/logo.webp" alt="" />
</figure>
<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>
<p className="mt-40 mb-40">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</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>
@ -24,35 +23,38 @@ 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">Quick Links</h4>
<h4 className="mb-20 footer-title">Our Services</h4>
<ul className="service-list">
<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>
<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>
</ul>
</div>
</div>
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
<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>
<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" : "Whats the Holding Back the It Solution"}</Link></h6>
</div>
</div>
</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>Subscribe our newsletter to get our latest update & news</p>
<p>Sign Up For News & Get 30% Off in New User.</p>
<div className="footer-subscribe">
<form action="#">
<input type="email" name="email" placeholder="Your email address" required />
@ -70,14 +72,10 @@ const Footer1 = () => (
<div className="small-container">
<div className="footer-bottom pt-30 pb-30">
<div className="left-area">
<span>
© {new Date().getFullYear()} by{" "}
Metatroncube Software Solutions.
All Rights Reserved.
</span>
<span>© All Copyright 2024 by <a href="#">Metatron</a></span>
</div>
<div className="right-area">
<span><Link href="#">Accessibility Statement</Link></span>
<span><Link href="#">Terms & Condition</Link></span>
<span><Link href="#">Privacy Policy</Link></span>
</div>
</div>

View File

@ -5,19 +5,8 @@ const NavMenu = () => (
<ul>
<li><Link href="/">Home</Link></li>
<li><Link href="/about-us">About</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="/services">Services</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>

View File

@ -19386,77 +19386,41 @@ 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: 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, .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: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;
}

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 text-white">Lets Discuss Your App Idea</h2>
<p className="desc text-white">Fill out the form and our team will contact you within 24 hours.</p>
<h2 className="title">Lets Discuss Your App Idea</h2>
<p className="desc">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 className='text-white'>Email Us</p>
<h5 className='text-white'>info@metatroncubesolutions.com</h5>
<p>Email Us</p>
<h5>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 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>
<p>Call Us Free</p>
<h5><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-twitter"></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://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: 40px;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;

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: '#contact-trigger' },
{ label: 'Contact', link: '/pages/contact' },
];
const serviceLinks = [
{ label: 'Mobile App Development', link: '#services' },
{ 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-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
{ icon: 'fa-x-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,12 +101,6 @@ 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>
@ -132,12 +126,6 @@ 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>

View File

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

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: '0 30px 60px rgba(0,0,0,0.5)',
boxShadow: plan.isPopular ? '0 30px 60px rgba(0,0,0,0.15)' : 'none',
position: 'relative',
height: '100%',
display: 'flex',

View File

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

View File

@ -1,213 +0,0 @@
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;

View File

@ -1,73 +0,0 @@
"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;

View File

@ -1,86 +0,0 @@
"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;

View File

@ -1,42 +0,0 @@
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;

View File

@ -1,26 +0,0 @@
"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;

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",