site seo corrections are updated
This commit is contained in:
akash
parent
0108118f2c
commit
ffd1a8e5a0
File diff suppressed because one or more lines are too long
@ -43,19 +43,19 @@ const staticLinks = [
|
||||
{ url: '/blog/', changefreq: 'weekly', priority: 0.7 },
|
||||
{ url: '/contact/', changefreq: 'monthly', priority: 0.5 },
|
||||
{ url: '/faq/', changefreq: 'monthly', priority: 0.5 },
|
||||
{ url: '/services-digital-solutions/erp-development-implementation/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/website-development-company/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/mobile-application-development/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/graphic-designing-company/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/ui-ux-designing/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/search-engine-optimization-seo-content-writing/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/digital-marketing-agency-in-canada/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/app-development-waterloo/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/kitchener-waterloo-website-design-services/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/professional-website-designers-in-waterloo/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/waterloo-seo-services/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/web-design-toronto-custom-website-creation-by-metatroncube-software-solutions/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/services-digital-solutions/web-page-design-in-waterloo/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/erp-development-implementation/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/website-development-company/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/mobile-application-development/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/graphic-designing-company/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/ui-ux-designing/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/search-engine-optimization-seo-content-writing/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/digital-marketing-agency-in-canada/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/app-development-waterloo/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/kitchener-waterloo-website-design-services/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/professional-website-designers-in-waterloo/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/waterloo-seo-services/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/web-design-toronto-custom-website-creation-by-metatroncube-software-solutions/', changefreq: 'weekly', priority: 0.6 },
|
||||
{ url: '/service/web-page-design-in-waterloo/', changefreq: 'weekly', priority: 0.6 },
|
||||
];
|
||||
|
||||
// ✅ Dynamic blog posts
|
||||
|
||||
@ -9342,8 +9342,8 @@ body {
|
||||
|
||||
.form-textarea-custom-global,
|
||||
.form-textarea {
|
||||
min-height: 100px;
|
||||
height: auto;
|
||||
min-height: 110px;
|
||||
/* height: auto; */
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
@ -10875,7 +10875,7 @@ body {
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
filter: grayscale(1);
|
||||
/* filter: grayscale(1); */
|
||||
}
|
||||
|
||||
/* Contact Section Styles (Root) */
|
||||
|
||||
@ -10,12 +10,34 @@ import Offcanvas from "@/components/common/Offcanvas";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL("https://metatroncubesolutions.com"),
|
||||
title: "Metatroncube: Leaders in Web & Mobile Dev, SEO, Digital Marketing",
|
||||
description: "Metatroncube Software Solution: Your go-to agency for cutting-edge web & app development, SEO, digital marketing, and graphic design services",
|
||||
title: "Metatroncube: Leaders in Web & Mobile Dev, SEO, Digital Marketing",
|
||||
description: "Metatroncube Software Solution: Your go-to agency for cutting-edge web & app development, SEO, digital marketing, and graphic design services.",
|
||||
keywords: "web development, mobile apps, SEO, digital marketing, graphic design, Waterloo Ontario",
|
||||
openGraph: {
|
||||
title: "Metatroncube: Leaders in Web & Mobile Dev",
|
||||
description: "Cutting-edge web & app development, SEO, and digital marketing services.",
|
||||
url: "https://metatroncubesolutions.com",
|
||||
siteName: "Metatroncube Software Solution",
|
||||
images: [
|
||||
{
|
||||
url: "/assets/images/logo/og-image.jpg",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
},
|
||||
],
|
||||
locale: "en_US",
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Metatroncube: Leaders in Web & Mobile Dev",
|
||||
description: "Cutting-edge web & app development, SEO, and digital marketing services.",
|
||||
images: ["/assets/images/logo/og-image.jpg"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@ -2,10 +2,8 @@ import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
import Header1 from "@/components/layout/Header1";
|
||||
import Footer1 from "@/components/layout/Footer1";
|
||||
|
||||
import BannerSection from "@/components/home/home-1/BannerSection";
|
||||
import AboutSection from "@/components/home/home-1/AboutSection";
|
||||
import ServiceThreeSlider from "@/components/home/home-1/ServiceThreeSlider";
|
||||
import CtaSection from "@/components/home/home-1/CtaSection";
|
||||
import ChooseSection from "@/components/home/home-1/ChooseSection";
|
||||
import TestimonialsSection from "@/components/home/home-1/TestimonialsSection";
|
||||
|
||||
58
src/app/service/[slug]/page.tsx
Normal file
58
src/app/service/[slug]/page.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
import Header1 from "@/components/layout/Header1";
|
||||
import Footer1 from "@/components/layout/Footer1";
|
||||
import PageHeader from "@/components/common/PageHeader";
|
||||
import ServiceDetails from "@/components/services-digital-solutions/ServiceDetails";
|
||||
import { ourServices } from "@/utils/data";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const service = ourServices.find((s) => s.slug === slug);
|
||||
|
||||
if (!service) {
|
||||
return {
|
||||
title: "Service Not Found",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: service.metatitle || `${service.title} | Metatroncube Software Solution`,
|
||||
description: service.metaDesc || service.description,
|
||||
alternates: {
|
||||
canonical: `/service/${slug}`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return ourServices.map((service) => ({
|
||||
slug: service.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export default async function ServiceDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
|
||||
const service = ourServices.find((s) => s.slug === slug);
|
||||
|
||||
if (!service) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header1 />
|
||||
<main>
|
||||
<PageHeader
|
||||
title={service.title}
|
||||
bannerLeftImage={service.bannerLeftImage}
|
||||
bannerRightImage={service.bannerRightImage}
|
||||
/>
|
||||
<ServiceDetails service={service} />
|
||||
</main>
|
||||
<Footer1 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,30 +1,5 @@
|
||||
import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
import Header1 from "@/components/layout/Header1";
|
||||
import Footer1 from "@/components/layout/Footer1";
|
||||
import PageHeader from "@/components/common/PageHeader";
|
||||
import ServiceDetails from "@/components/services-digital-solutions/ServiceDetails";
|
||||
import { permanentRedirect } from "next/navigation";
|
||||
import { ourServices } from "@/utils/data";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const service = ourServices.find((s) => s.slug === slug);
|
||||
|
||||
if (!service) {
|
||||
return {
|
||||
title: "Service Not Found",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: service.metatitle || `${service.title} | Metatroncube Software Solution`,
|
||||
description: service.metaDesc || service.description,
|
||||
alternates: {
|
||||
canonical: `/services-digital-solutions/${slug}`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return ourServices.map((service) => ({
|
||||
@ -35,24 +10,5 @@ export async function generateStaticParams() {
|
||||
export default async function ServiceDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
|
||||
const service = ourServices.find((s) => s.slug === slug);
|
||||
|
||||
if (!service) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header1 />
|
||||
<main>
|
||||
<PageHeader
|
||||
title={service.title}
|
||||
bannerLeftImage={service.bannerLeftImage}
|
||||
bannerRightImage={service.bannerRightImage}
|
||||
/>
|
||||
<ServiceDetails service={service} />
|
||||
</main>
|
||||
<Footer1 />
|
||||
</>
|
||||
);
|
||||
permanentRedirect(`/service/${slug}`);
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@ import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
import Header1 from "@/components/layout/Header1";
|
||||
import Footer1 from "@/components/layout/Footer1";
|
||||
import FeaturesSection from "@/components/home/home-1/FeaturesSection";
|
||||
import ChooseSection from "@/components/home/home-3/ChooseSection";
|
||||
import WorkProcessSection from "@/components/home/home-2/WorkProcessSection";
|
||||
import ServiceSection2 from "@/components/careers/ServiceSection";
|
||||
@ -32,7 +31,6 @@ export default function Home3() {
|
||||
bannerLeftImage="/assets/images/innerbanner/left/left-services.webp"
|
||||
bannerRightImage="/assets/images/innerbanner/right/right-services.webp"
|
||||
/>
|
||||
{/* <FeaturesSection /> */}
|
||||
<CareersWorkProcess/>
|
||||
<ChooseSection />
|
||||
<ServiceSection2 />
|
||||
|
||||
@ -18,7 +18,7 @@ const ResultsSection = () => {
|
||||
Delve into Metatroncube’s unique approach to delivering exceptional results. Our ‘Discover Our Process’ section illuminates the meticulous steps we take in transforming your digital vision into tangible success.
|
||||
</p>
|
||||
<p className="section-desc">
|
||||
From the initial consultation to the final launch and beyond, we blend strategic planning, innovative design, and cutting-edge technology to craoft digital solutions that stand out. This journey is not just about reaching yur goals; it’s about exceeding them and setting new standards in the digital world. Explore our proven process that combines expertise, creativity, and client collaboration to achieve extraordinary outcomes.
|
||||
From the initial consultation to the final launch and beyond, we blend strategic planning, innovative design, and cutting-edge technology to craft digital solutions that stand out. This journey is not just about reaching your goals; it’s about exceeding them and setting new standards in the digital world. Explore our proven process that combines expertise, creativity, and client collaboration to achieve extraordinary outcomes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -27,7 +27,6 @@ const WhyChooseUs = () => {
|
||||
<h6 className="sec-title__tagline text-white">Guided by Purpose, Driven by Passion</h6>
|
||||
<h3 className="sec-title__title text-white">Our Vision</h3>
|
||||
</div>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
<p className="section-desc text-white">
|
||||
<b>Join us in shaping the future of technology and delivering meaningful solutions.</b>
|
||||
</p>
|
||||
@ -41,7 +40,7 @@ const WhyChooseUs = () => {
|
||||
|
||||
<div className="note-item">
|
||||
<i className="fa-solid fa-circle-arrow-right text-white"></i>
|
||||
<span className="text-white">At Metatroncube, we’re driven by the idea that technology can bridge gaps, empower businesses, and simplify lives.</span>
|
||||
<span className="text-white">If you’re ready for a journey of growth, innovation, and collaboration, we’d love to have you. Explore our openings below.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -127,7 +127,7 @@ const BlogSidebar = ({
|
||||
<form onSubmit={handleSearchSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Keywords here...."
|
||||
placeholder="Search blogs..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { BlogType } from '@/types';
|
||||
|
||||
interface BlogCardProps {
|
||||
blog: BlogType;
|
||||
}
|
||||
|
||||
const BlogCard: React.FC<BlogCardProps> = ({ blog }) => {
|
||||
return (
|
||||
<div className="vl-blog-1-item">
|
||||
<div className="vl-blog-1-thumb image-anime">
|
||||
<img src={blog.image} alt={blog.title} />
|
||||
</div>
|
||||
<div className="vl-blog-1-content">
|
||||
<div className="vl-blog-meta">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="/assets/img/icons/calender1.svg" alt="date" /> {blog.date} <span> | </span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="/assets/img/icons/user1.svg" alt="admin" /> {blog.authorName}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space20"></div>
|
||||
<h4 className="vl-blog-1-title">
|
||||
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
|
||||
</h4>
|
||||
<div className="space16"></div>
|
||||
<p>{blog.description}</p>
|
||||
<div className="vl-blog-1-icon">
|
||||
<Link href={`/blog/${blog.slug}`}>
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogCard;
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { CaseStudyType } from '@/types';
|
||||
|
||||
interface CaseStudyCardProps {
|
||||
caseStudy: CaseStudyType;
|
||||
}
|
||||
|
||||
const CaseStudyCard: React.FC<CaseStudyCardProps> = ({ caseStudy }) => {
|
||||
return (
|
||||
<div className="case-slider-boxarea">
|
||||
<div className="img1 image-anime">
|
||||
<img src={caseStudy.image} alt={caseStudy.title} />
|
||||
</div>
|
||||
<div className="content-area">
|
||||
<p>{caseStudy.tag}</p>
|
||||
<div className="space16"></div>
|
||||
<Link href={caseStudy.link || "#"}>{caseStudy.title}</Link>
|
||||
<div className="arrow">
|
||||
<Link href={caseStudy.link || "#"}><i className="fa-solid fa-arrow-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaseStudyCard;
|
||||
@ -1,35 +0,0 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { TeamMemberType } from '@/types';
|
||||
|
||||
interface MemberCardProps {
|
||||
member: TeamMemberType;
|
||||
}
|
||||
|
||||
const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
|
||||
return (
|
||||
<div className="team-author-boxarea">
|
||||
<div className="img1 image-anime">
|
||||
<img src={member.image} alt={member.name} />
|
||||
</div>
|
||||
<div className="content-area">
|
||||
<div className="text">
|
||||
<Link href="/our-team">{member.name}</Link>
|
||||
<div className="space8"></div>
|
||||
<p>{member.role}</p>
|
||||
</div>
|
||||
<div className="icons">
|
||||
<a href="#"><img src="/assets/img/icons/share1.svg" alt="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#"><i className="fa-brands fa-facebook-f"></i></a></li>
|
||||
<li><a href="#"><i className="fa-brands fa-instagram"></i></a></li>
|
||||
<li><a href="#"><i className="fa-brands fa-youtube"></i></a></li>
|
||||
<li><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemberCard;
|
||||
@ -1,148 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const AboutOneSection = () => {
|
||||
const imagesRef = useRef<HTMLDivElement>(null);
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement;
|
||||
const elements = el.querySelectorAll(".wow");
|
||||
elements.forEach((child) => {
|
||||
const childEl = child as HTMLElement;
|
||||
const delay = childEl.dataset.wowDelay || "0ms";
|
||||
setTimeout(() => {
|
||||
childEl.classList.add("animated", "fadeInUp");
|
||||
childEl.style.visibility = "visible";
|
||||
}, parseInt(delay));
|
||||
});
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (imagesRef.current) observer.observe(imagesRef.current);
|
||||
if (wrapperRef.current) observer.observe(wrapperRef.current);
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="about-one section-space">
|
||||
<div className="about-one__bg"></div>
|
||||
<div className="about-one__shapes">
|
||||
<div className="body-shape-one"></div>
|
||||
<div className="body-shape-two"></div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div
|
||||
ref={imagesRef}
|
||||
className="about-one__images"
|
||||
>
|
||||
<div className="about-one__img__one wow fadeInLeft" data-wow-delay="500ms" style={{ visibility: "hidden" }}>
|
||||
<Image
|
||||
src="/assets/img-app/about/about-img5.png"
|
||||
alt="About Careers"
|
||||
width={440}
|
||||
height={695}
|
||||
/>
|
||||
</div>
|
||||
<div className="about-one__img__two wow fadeInRight" data-wow-delay="700ms" style={{ visibility: "hidden" }}>
|
||||
<Image
|
||||
src="/assets/img-app/about/about-img4.png"
|
||||
alt="Careers Team"
|
||||
width={490}
|
||||
height={471}
|
||||
/>
|
||||
</div>
|
||||
<div className="about-one__logo__icon">
|
||||
<Image
|
||||
src="/assets/images/logo/white-logo-2.png"
|
||||
alt="Logo"
|
||||
width={104}
|
||||
height={50}
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="about-one__orange-bar"></div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 position-relative">
|
||||
<div
|
||||
ref={wrapperRef}
|
||||
className="about-one__wrapper"
|
||||
>
|
||||
<div className="about-one__wrapper__bg__overlay"></div>
|
||||
<div className="about-one__content">
|
||||
<div className="sec-title wow" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
|
||||
<h6 className="sec-title__tagline">
|
||||
<span className="ao-diamond">◆</span>
|
||||
About us
|
||||
</h6>
|
||||
<h2 className="sec-title__title">
|
||||
Discover the Marketing Agency
|
||||
</h2>
|
||||
</div>
|
||||
<div className="about-one__content__desc wow" data-wow-delay="400ms" style={{ visibility: "hidden" }}>
|
||||
There are many variations of passages of Lorem Ipsum avalab but the majority have
|
||||
suffered alteration in some form, by injected humour, or randomised words which
|
||||
don't
|
||||
</div>
|
||||
<div className="about-one__content__eliment wow" data-wow-delay="600ms" style={{ visibility: "hidden" }}>
|
||||
<div className="about-one__content__eliment__img-wrapper">
|
||||
<Image
|
||||
src="/assets/img-app/about/about-img2.png"
|
||||
alt="Free Consultation"
|
||||
width={132}
|
||||
height={132}
|
||||
className="about-one__content__eliment__img"
|
||||
/>
|
||||
</div>
|
||||
<div className="about-one__content__eliment__content">
|
||||
<h3 className="about-one__content__eliment__title">
|
||||
Free Consultation
|
||||
</h3>
|
||||
<p className="about-one__content__eliment__desc">
|
||||
There are many variations of passages of Lorem Ipsum avalab but
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="about-one__content__list wow" data-wow-delay="800ms" style={{ visibility: "hidden" }}>
|
||||
<li>
|
||||
<i className="fa-solid fa-circle-check"></i>
|
||||
Many variations of passages of lorem
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-circle-check"></i>
|
||||
Many variations of passages of lorem
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-circle-check"></i>
|
||||
Expert many variations teacher
|
||||
</li>
|
||||
</ul>
|
||||
<div className="wow" data-wow-delay="1000ms" style={{ visibility: "hidden" }}>
|
||||
<Link href="/about-us" className="getizy-btn btn-hover-cropping">
|
||||
Discover More
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutOneSection;
|
||||
@ -171,7 +171,7 @@ const ContactSection = () => {
|
||||
<span className="sec-title__tagline__right"></span>
|
||||
</h6>
|
||||
<h3 className="sec-title__title" style={{ color: "#fff" }}>
|
||||
Get free Business touch Customers me.
|
||||
Get in touch for a free business consultation.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@ -237,6 +237,7 @@ const ContactSection = () => {
|
||||
<option value="UI / UX Designing">UI / UX Designing</option>
|
||||
<option value="SEO & Content Writing">SEO & Content Writing</option>
|
||||
<option value="Digital Marketing">Digital Marketing</option>
|
||||
<option value="ERP Development & Implementation">ERP Development & Implementation</option>
|
||||
</select>
|
||||
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
|
||||
</div>
|
||||
|
||||
@ -1,123 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const ProcessSection = () => {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const elements = entry.target.querySelectorAll(".wow");
|
||||
elements.forEach((el) => {
|
||||
const htmlEl = el as HTMLElement;
|
||||
const delay = htmlEl.dataset.wowDelay || "0ms";
|
||||
const duration = htmlEl.dataset.wowDuration || "1500ms";
|
||||
|
||||
setTimeout(() => {
|
||||
htmlEl.classList.add("animated", "fadeInUp");
|
||||
htmlEl.style.visibility = "visible";
|
||||
htmlEl.style.animationDuration = duration;
|
||||
}, parseInt(delay));
|
||||
});
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const processItems = [
|
||||
{
|
||||
num: "01",
|
||||
title: "Share Your Concept",
|
||||
desc: "that a reader will be distracted by the readable content of a page when He is looking",
|
||||
delay: "0ms",
|
||||
left: false,
|
||||
},
|
||||
{
|
||||
num: "02",
|
||||
title: "Analyze Your Concept",
|
||||
desc: "that a reader will be distracted by the readable content of a page when He is looking",
|
||||
delay: "200ms",
|
||||
left: true,
|
||||
},
|
||||
{
|
||||
num: "03",
|
||||
title: "Let’s Start Development",
|
||||
desc: "that a reader will be distracted by the readable content of a page when He is looking",
|
||||
delay: "300ms",
|
||||
left: false,
|
||||
},
|
||||
{
|
||||
num: "04",
|
||||
title: "Read to Launch",
|
||||
desc: "that a reader will be distracted by the readable content of a page when He is looking",
|
||||
delay: "400ms",
|
||||
left: true,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className="process-one-h-four section-space">
|
||||
<div
|
||||
className="process-one-h-four__bg"
|
||||
style={{ backgroundImage: "url(/assets/imgs/bg/process-bg.png)" }}
|
||||
></div>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div
|
||||
className="sec-title wow"
|
||||
data-wow-duration="1500ms"
|
||||
style={{ visibility: "hidden" }}
|
||||
>
|
||||
<h6 className="sec-title__tagline text-center">
|
||||
<span className="icon-sec-icon"></span>
|
||||
Step Process
|
||||
</h6>
|
||||
<h3 className="sec-title__title text-center">Our works Process</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="process-one-h-four__wrapper">
|
||||
<div className="process-one-h-four__line-shape">
|
||||
<Image
|
||||
src="/assets/image.png"
|
||||
alt="Process Line"
|
||||
width={1170}
|
||||
height={500}
|
||||
/>
|
||||
</div>
|
||||
<div className="process-one-h-four__content">
|
||||
{processItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`process-one-h-four__item wow ${item.left ? "process-one-h-four__item-left" : ""}`}
|
||||
data-wow-duration="1500ms"
|
||||
data-wow-delay={item.delay}
|
||||
style={{ visibility: "hidden" }}
|
||||
>
|
||||
<span className="process-one-h-four__num">{item.num}</span>
|
||||
<h3 className="process-one-h-four__title">{item.title}</h3>
|
||||
<p className="process-one-h-four__desc">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProcessSection;
|
||||
@ -80,7 +80,7 @@ const ServiceSection2 = () => {
|
||||
</div>
|
||||
<h4 className="home-services__card__count">--</h4>
|
||||
<h2 className="home-services__card__title">
|
||||
<Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
|
||||
<Link href={`/service/${service.slug}`}>{service.title}</Link>
|
||||
</h2>
|
||||
<p className="home-services__card__text">
|
||||
{service.description.substring(0, 100)}...
|
||||
@ -89,7 +89,7 @@ const ServiceSection2 = () => {
|
||||
<div className="home-services__card__image">
|
||||
<img src={service.image} alt={service.title} />
|
||||
<div className="home-services__card__hover">
|
||||
<Link href={`/services-digital-solutions/${service.slug}`} className="home-services__card__hover-link">
|
||||
<Link href={`/service/${service.slug}`} className="home-services__card__hover-link">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -1,111 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
const WhyChooseSection = () => {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const elements = entry.target.querySelectorAll(".wow");
|
||||
elements.forEach((el) => {
|
||||
const htmlEl = el as HTMLElement;
|
||||
const delay = htmlEl.dataset.wowDelay || "0ms";
|
||||
setTimeout(() => {
|
||||
htmlEl.classList.add("animated");
|
||||
|
||||
if (htmlEl.classList.contains("slideInLeft")) {
|
||||
htmlEl.classList.add("slideInLeft");
|
||||
} else {
|
||||
htmlEl.classList.add("fadeInUp");
|
||||
}
|
||||
|
||||
htmlEl.style.visibility = "visible";
|
||||
}, parseInt(delay));
|
||||
});
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const listItems = [
|
||||
{
|
||||
iconClass: "fa-solid fa-globe",
|
||||
title: "Accelerate Innovation Tech Teams",
|
||||
link: "/team",
|
||||
},
|
||||
{
|
||||
iconClass: "fa-solid fa-network-wired",
|
||||
title: "Network Infrastructure software",
|
||||
link: "/about",
|
||||
},
|
||||
{
|
||||
iconClass: "fa-solid fa-gears",
|
||||
title: "We Provide This Solution Business",
|
||||
link: "/services",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className="why-choose-three">
|
||||
<div
|
||||
className="why-choose-three__bg"
|
||||
style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/why-choose-3-bg.png)" }}
|
||||
></div>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
<div className="why-choose-three__image wow slideInLeft" data-wow-delay="0ms" style={{ visibility: "hidden" }}>
|
||||
<img src="https://tolaklaravel.bracketweb.com/assets/images/resources/why-choose-3-1.jpg" alt="Why Choose Us" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 d-flex align-items-center">
|
||||
<div className="why-choose-three__content wow fadeInUp" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
|
||||
<div className="sec-title-three text-left">
|
||||
<h6 className="sec-title-three__tagline">
|
||||
<span className="sec-title-three__tagline__left-border"></span>
|
||||
Why Choose Us
|
||||
<span className="sec-title-three__tagline__right-border"></span>
|
||||
</h6>
|
||||
<h3 className="sec-title-three__title">
|
||||
Choose The Best IT Service For Company Solution
|
||||
</h3>
|
||||
</div>
|
||||
<p className="why-choose-three__content__text">
|
||||
Business tailored design, management & support services Business business agency elit, sed do eiusmod tempor
|
||||
majority have in some we form, by injected humour solution.
|
||||
</p>
|
||||
<ul className="why-choose-three__content__list">
|
||||
{listItems.map((item, index) => (
|
||||
<li key={index}>
|
||||
<span className="why-choose-three__content__list__number"></span>
|
||||
<span className="why-choose-three__content__list__icon">
|
||||
<i className={item.iconClass}></i>
|
||||
</span>
|
||||
{item.title}
|
||||
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhyChooseSection;
|
||||
@ -73,7 +73,6 @@ const WorkProcessSection2 = () => {
|
||||
<h6 className="sec-title__tagline">digital transformation journey</h6>
|
||||
<h3 className="sec-title__title">Embark on a digital transformation journey with Metatroncube</h3>
|
||||
</div>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
</div>
|
||||
<p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
|
||||
Our process begins with consultation and strategy development, where we understand your vision and create a customized plan aligned with your goals. We then move into design and development, combining creativity and technology to build functional and visually appealing solutions. Next, we implement and optimize the strategy to ensure efficiency, performance, and measurable impact. After thorough testing, we launch your project smoothly with a focus on quality and reliability. Finally, we provide ongoing support, continuous analysis, and client feedback integration to ensure long-term growth and sustained digital success.
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
"use client";
|
||||
import React from 'react';
|
||||
|
||||
interface CircularProgressProps {
|
||||
percent: number;
|
||||
radius: number;
|
||||
strokeColor: string;
|
||||
strokeWidth: number;
|
||||
}
|
||||
|
||||
const CircularProgress: React.FC<CircularProgressProps> = ({ percent, radius, strokeColor, strokeWidth }) => {
|
||||
const normalizedRadius = radius - strokeWidth * 2;
|
||||
const circumference = normalizedRadius * 2 * Math.PI;
|
||||
const strokeDashoffset = circumference - (percent / 100) * circumference;
|
||||
|
||||
return (
|
||||
<svg height={radius * 2} width={radius * 2} style={{ transform: 'rotate(-90deg)' }}>
|
||||
<circle
|
||||
stroke="#e6e6e6"
|
||||
fill="transparent"
|
||||
strokeWidth={strokeWidth}
|
||||
r={normalizedRadius}
|
||||
cx={radius}
|
||||
cy={radius}
|
||||
/>
|
||||
<circle
|
||||
stroke={strokeColor}
|
||||
fill="transparent"
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={circumference + ' ' + circumference}
|
||||
style={{ strokeDashoffset, transition: 'stroke-dashoffset 0.5s ease 0s' }}
|
||||
r={normalizedRadius}
|
||||
cx={radius}
|
||||
cy={radius}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dy=".3em"
|
||||
fill="#1a1f2b"
|
||||
fontSize="16px"
|
||||
fontWeight="bold"
|
||||
style={{ transform: 'rotate(90deg)', transformOrigin: 'center' }}
|
||||
>
|
||||
{percent}%
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default CircularProgress;
|
||||
@ -8,13 +8,13 @@ const mobileNavItems = [
|
||||
title: "Service",
|
||||
link: "/services-digital-solutions",
|
||||
children: [
|
||||
{ title: "Website Development", link: "/services-digital-solutions/website-development-company" },
|
||||
{ title: "Mobile Application Development", link: "/services-digital-solutions/mobile-application-development" },
|
||||
{ title: "Graphic Designing", link: "/services-digital-solutions/graphic-designing-company" },
|
||||
{ title: "UI / UX Designing", link: "/services-digital-solutions/ui-ux-designing" },
|
||||
{ title: "SEO & Content Writing", link: "/services-digital-solutions/search-engine-optimization-seo-content-writing" },
|
||||
{ title: "Digital Marketing", link: "/services-digital-solutions/digital-marketing-agency-in-canada" },
|
||||
{ title: 'ERP Development & Implementation', link: '/services-digital-solutions/erp-development-implementation' },
|
||||
{ title: "Website Development", link: "/service/website-development-company" },
|
||||
{ title: "Mobile Application Development", link: "/service/mobile-application-development" },
|
||||
{ title: "Graphic Designing", link: "/service/graphic-designing-company" },
|
||||
{ title: "UI / UX Designing", link: "/service/ui-ux-designing" },
|
||||
{ title: "SEO & Content Writing", link: "/service/search-engine-optimization-seo-content-writing" },
|
||||
{ title: "Digital Marketing", link: "/service/digital-marketing-agency-in-canada" },
|
||||
{ title: 'ERP Development & Implementation', link: '/service/erp-development-implementation' },
|
||||
],
|
||||
},
|
||||
{ title: "Portfolio", link: "/portfolio" },
|
||||
|
||||
@ -9,8 +9,8 @@ interface PageHeaderProps {
|
||||
}
|
||||
|
||||
const PageHeader: React.FC<PageHeaderProps> = ({ title, breadcrumbItems, bannerLeftImage, bannerRightImage }) => {
|
||||
const defaultRightImage = "https://bracketweb.com/pelocishtml/assets/images/backgrounds/page-header-img-1.png";
|
||||
const defaultLeftImage = "https://bracketweb.com/pelocishtml/assets/images/shapes/bannar-shape-2.png";
|
||||
const defaultRightImage = "/assets/images/innerbanner/right/right-blog.webp";
|
||||
const defaultLeftImage = "/assets/images/innerbanner/left/left-blog.webp";
|
||||
|
||||
return (
|
||||
<section className="page-header">
|
||||
|
||||
@ -33,13 +33,6 @@ const SearchOverlay = () => {
|
||||
<i className="fa-solid fa-magnifying-glass"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="df-search-category">
|
||||
<span>Search by : </span>
|
||||
<a href="#">Modified Metatron, </a>
|
||||
<a href="#">Metatron Installation, </a>
|
||||
<a href="#">Metatron Cornering, </a>
|
||||
<a href="#">Metatron Renovation </a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -26,13 +26,6 @@ const SectionTitle: React.FC<SectionTitleProps> = ({
|
||||
dangerouslySetInnerHTML={{ __html: title }}
|
||||
/>
|
||||
</div>
|
||||
{/* {showShape && (
|
||||
<img
|
||||
src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png"
|
||||
alt=""
|
||||
className="sec-title__text-shape"
|
||||
/>
|
||||
)} */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -101,7 +101,6 @@ const ContactSection = () => {
|
||||
<h2 className="sec-title__title">Drop us a Line.</h2>
|
||||
<p>Whether you have a question, a project idea, or just want to chat about your digital needs, our team is here to listen and provide tailored solutions. Reach out to Metatroncube Software Solution and start your journey towards innovative digital success.</p>
|
||||
</div>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
</div>
|
||||
<div className="contact-info-list">
|
||||
<div className="contact-info-item d-flex align-items-center mb-30">
|
||||
@ -200,6 +199,7 @@ const ContactSection = () => {
|
||||
<option value="UI / UX Designing">UI / UX Designing</option>
|
||||
<option value="SEO & Content Writing">SEO & Content Writing</option>
|
||||
<option value="Digital Marketing">Digital Marketing</option>
|
||||
<option value="ERP Development & Implementation">ERP Development & Implementation</option>
|
||||
</select>
|
||||
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@ const MapSection = () => {
|
||||
<div className="map-wrapper">
|
||||
<iframe
|
||||
title="Google Map"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d158858.1106774136!2d-0.2416812035308924!3d51.5287718408761!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sin!4v1700000000000!5m2!1sen!2sin"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2896.459484221674!2d-80.59094830000001!3d43.45100360000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89d4d7ff0d82df5b%3A0xf0ca6a97298a109c!2sMetatroncube%20Software%20Solutions!5e0!3m2!1sen!2sin!4v1773651110368!5m2!1sen!2sin"
|
||||
width="100%"
|
||||
height="500"
|
||||
style={{ border: 0 }}
|
||||
|
||||
@ -130,11 +130,6 @@ const HomeContactOne = () => {
|
||||
</ul>
|
||||
</div>
|
||||
<div className="home-contact__card__shape-one">
|
||||
{/* <img
|
||||
src="https://bracketweb.com/pelocishtml/assets/images/resources/home-contact-logo.png"
|
||||
alt="pelocis"
|
||||
className="home-contact__card__shape-three"
|
||||
/> */}
|
||||
</div>
|
||||
<img
|
||||
src="/assets/images/home/7/contact.webp"
|
||||
@ -157,11 +152,6 @@ const HomeContactOne = () => {
|
||||
<h6 className="sec-title__tagline">OUR CONTACT US</h6>
|
||||
<h3 className="sec-title__title">If Your Problem Contact Us For <br /> Immediately Center</h3>
|
||||
</div>
|
||||
{/* <img
|
||||
src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-1.png"
|
||||
alt="pelocis"
|
||||
className="appointment__form__title__shape"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -231,6 +221,7 @@ const HomeContactOne = () => {
|
||||
<option value="UI / UX Designing">UI / UX Designing</option>
|
||||
<option value="SEO & Content Writing">SEO & Content Writing</option>
|
||||
<option value="Digital Marketing">Digital Marketing</option>
|
||||
<option value="ERP Development & Implementation">ERP Development & Implementation</option>
|
||||
</select>
|
||||
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
|
||||
</div>
|
||||
|
||||
@ -10,9 +10,6 @@ const HomeServiceOne: React.FC = () => {
|
||||
className="service-one-home"
|
||||
style={{ backgroundImage: 'url("/assets/images/home/5/bg-service.webp")' }}
|
||||
>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-services-shape-1.png" alt="pelocis" className="service-one-home__shape-one" />
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-services-shape-2.png" alt="pelocis" className="service-one-home__shape-two" />
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-services-shape-3.png" alt="pelocis" className="service-one-home__shape-three" /> */}
|
||||
<div className="container">
|
||||
<div className="row align-items-center justify-content-between">
|
||||
<div className="col-lg-6">
|
||||
@ -50,7 +47,7 @@ const HomeServiceOne: React.FC = () => {
|
||||
</div>
|
||||
<h4 className="home-services__card__count">--</h4>
|
||||
<h2 className="home-services__card__title">
|
||||
<Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
|
||||
<Link href={`/service/${service.slug}`}>{service.title}</Link>
|
||||
</h2>
|
||||
<p className="home-services__card__text">
|
||||
{service.description.substring(0, 100)}...
|
||||
@ -59,7 +56,7 @@ const HomeServiceOne: React.FC = () => {
|
||||
<div className="home-services__card__image">
|
||||
<img src={service.image} alt={service.title} />
|
||||
<div className="home-services__card__hover">
|
||||
<Link href={`/services-digital-solutions/${service.slug}`} className="home-services__card__hover-link">
|
||||
<Link href={`/service/${service.slug}`} className="home-services__card__hover-link">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -1,146 +0,0 @@
|
||||
"use client";
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
// ── inline SVG icons ────────────────────────────────────────────────────────
|
||||
const IconWebsite = () => (
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 0C10.3961 0 0 5.74724 0 18C0 29.9409 9.99921 36 18 36C31.7268 36 36 23.974 36 18C36 9.18425 29.2535 0 18 0ZM13.826 1.6937C11.948 3.29528 10.389 5.94567 9.38268 9.23386C8.07874 8.46142 6.8811 7.50472 5.81811 6.39213C8.01496 4.08898 10.7929 2.47323 13.826 1.6937ZM5.04567 7.25669C6.23622 8.49685 7.58976 9.55276 9.06378 10.389C8.51102 12.5362 8.18504 14.9173 8.14252 17.4189H1.17638C1.30394 13.6843 2.66457 10.1197 5.04567 7.25669ZM5.04567 28.7433C2.65748 25.8803 1.30394 22.3158 1.17638 18.5811H8.14252C8.18504 21.0898 8.51102 23.4638 9.06378 25.611C7.59685 26.4543 6.24331 27.5032 5.04567 28.7433ZM5.81811 29.615C6.8811 28.5024 8.07874 27.5457 9.38268 26.7732C10.389 30.0543 11.948 32.7118 13.826 34.3134C10.7929 33.5268 8.01496 31.911 5.81811 29.615ZM17.4189 34.7953C14.4 34.4126 11.7992 31.0394 10.3961 26.2063C12.5646 25.1079 14.9598 24.4913 17.4189 24.3992V34.7953ZM17.4189 23.2441C14.8535 23.3291 12.3591 23.9598 10.0984 25.0654C9.62362 23.0811 9.34016 20.8913 9.29764 18.5811H17.4189V23.2441ZM17.4189 17.4189H9.29764C9.34016 15.1087 9.62362 12.9189 10.0984 10.9346C12.3661 12.0402 14.8606 12.6709 17.4189 12.7559V17.4189ZM17.4189 11.6008C14.9528 11.5157 12.5646 10.8921 10.3961 9.7937C11.7992 4.95354 14.4 1.5874 17.4189 1.20472V11.6008ZM30.9543 7.25669C33.3354 10.1197 34.6961 13.6843 34.8236 17.4189H27.8646C27.8221 14.9102 27.4961 12.5362 26.9433 10.389C28.4102 9.54567 29.7638 8.49685 30.9543 7.25669ZM30.1819 6.38504C29.1189 7.49764 27.9213 8.45433 26.6173 9.22677C25.611 5.94567 24.052 3.29528 22.174 1.68661C25.2071 2.47323 27.985 4.08898 30.1819 6.38504ZM18.5811 1.20472C21.6 1.5874 24.2008 4.96063 25.6039 9.7937C23.4354 10.8921 21.0472 11.5087 18.5811 11.6008V1.20472ZM18.5811 12.7559C21.1465 12.6709 23.6409 12.0402 25.9016 10.9346C26.3764 12.9189 26.6598 15.1087 26.7024 17.4189H18.5811V12.7559ZM18.5811 18.5811H26.7024C26.6598 20.8913 26.3764 23.0811 25.9016 25.0654C23.6195 23.9424 21.1233 23.3213 18.5811 23.2441V18.5811ZM18.5811 34.7953V24.3992C21.0472 24.4843 23.4354 25.1079 25.6039 26.2063C24.2008 31.0465 21.6 34.4126 18.5811 34.7953ZM22.174 34.3063C24.052 32.7047 25.611 30.0543 26.6173 26.7661C27.9213 27.5386 29.1189 28.4953 30.1819 29.6079C27.985 31.911 25.2071 33.5268 22.174 34.3063ZM30.9543 28.7433C29.7638 27.5032 28.4102 26.4543 26.9433 25.611C27.4961 23.4638 27.8221 21.0827 27.8646 18.5811H34.8236C34.6961 22.3158 33.3354 25.8803 30.9543 28.7433Z" fill="#3779b9" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconAndroid = () => (
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.3329 3.58535L23.91 0.956761C23.9526 0.885641 23.9809 0.806813 23.9931 0.724776C24.0053 0.64274 24.0012 0.559103 23.9811 0.47864C23.961 0.398177 23.9252 0.322464 23.8758 0.255824C23.8265 0.189184 23.7644 0.132922 23.6933 0.0902496C23.6222 0.0475777 23.5434 0.0193317 23.4613 0.00712437C23.3793 -0.00508296 23.2957 -0.00101255 23.2152 0.0191032C23.1347 0.039219 23.059 0.0749861 22.9924 0.124362C22.9257 0.173739 22.8695 0.235758 22.8268 0.306877L21.1626 3.08072C20.1717 2.72831 19.1107 2.52621 18.0004 2.52621C16.8901 2.52621 15.829 2.72831 14.8381 3.08072L13.1739 0.306877C13.0878 0.163244 12.948 0.0597288 12.7855 0.0191032C12.623 -0.0215224 12.4511 0.00406979 12.3074 0.0902497C12.1638 0.17643 12.0603 0.316138 12.0196 0.47864C11.979 0.641142 12.0046 0.813128 12.0908 0.956761L13.6678 3.58535C10.6192 5.16111 8.52686 8.33789 8.52686 12.0004C8.52686 12.1679 8.59339 12.3285 8.71184 12.4469C8.83028 12.5654 8.99092 12.6319 9.15842 12.6319H26.8423C27.0098 12.6319 27.1705 12.5654 27.2889 12.4469C27.4074 12.3285 27.4739 12.1679 27.4739 12.0004C27.4733 8.33853 25.3815 5.16174 22.3329 3.58535ZM9.81399 11.3688C10.1374 7.13539 13.6855 3.78997 18.0004 3.78997C22.3152 3.78997 25.8634 7.13539 26.1868 11.3688H9.81399Z" fill="#3779b9" />
|
||||
<path d="M26.8416 13.2634H9.15774C8.99024 13.2634 8.8296 13.33 8.71116 13.4484C8.59272 13.5668 8.52618 13.7275 8.52618 13.895V26.6343C8.52751 27.4433 8.8497 28.2188 9.42205 28.7905C9.9944 29.3623 10.7702 29.6837 11.5792 29.6842H12.3156V33.4774C12.3156 34.8681 13.4486 35.9999 14.8419 35.9999C16.2351 35.9999 17.3681 34.8681 17.3681 33.4774V29.6842H18.6313V33.4774C18.6313 34.8681 19.7643 35.9999 21.1575 35.9999C22.5508 35.9999 23.6838 34.8681 23.6838 33.4774V29.6842H24.4202C25.2293 29.6839 26.0051 29.3625 26.5775 28.7907C27.1499 28.2189 27.472 27.4434 27.4732 26.6343V13.895C27.4732 13.7275 27.4067 13.5668 27.2882 13.4484C27.1698 13.33 27.0091 13.2634 26.8416 13.2634ZM30.3153 13.2634C29.0963 13.2634 28.1048 14.2562 28.1048 15.4764V24.3133C28.1048 25.5335 29.0963 26.5263 30.3153 26.5263C31.5342 26.5263 32.5258 25.5335 32.5258 24.3133V15.4764C32.5254 14.89 32.2925 14.3277 31.8781 13.9129C31.4637 13.498 30.9017 13.2644 30.3153 13.2634ZM5.68412 13.2634C4.46519 13.2634 3.47363 14.2562 3.47363 15.4764V24.3133C3.47363 25.5335 4.46519 26.5263 5.68412 26.5263C6.90305 26.5263 7.89461 25.5335 7.89461 24.3133V15.4764C7.89427 14.89 7.66136 14.3277 7.24696 13.9129C6.83255 13.498 6.27051 13.2644 5.68412 13.2634Z" fill="#3779b9" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconIOS = () => (
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_ios)">
|
||||
<path d="M25.368 0.727224L25.3301 0L24.6063 0.0778922C24.5353 0.0854747 17.5395 0.928503 17.0597 8.75012L17.0115 9.53318L17.7945 9.48011C17.8745 9.47459 25.7981 8.84249 25.368 0.727224ZM24.0025 1.60058C23.8708 6.3141 20.2037 7.62517 18.5204 7.97878C19.1614 3.39831 22.4832 2.00245 24.0025 1.60058Z" fill="#3779b9" />
|
||||
<path d="M32.1109 25.8609L31.6704 25.7182C29.0048 24.8566 27.2147 22.415 27.2147 19.6426C27.2147 17.1763 28.6092 14.9705 30.8549 13.8855L31.525 13.5622L31.1514 12.9191C30.9914 12.6434 29.4963 10.2011 26.3379 9.39256C23.8329 8.7515 21.0164 9.31881 17.9634 11.0793C16.671 10.2949 12.3779 8.03393 8.9624 10.3004C8.29377 10.6699 1.20696 14.9153 4.89546 26.3703C5.00369 26.6267 7.57551 32.652 10.6188 34.9088C11.4398 35.6933 13.5394 36.6735 15.9389 35.0377C16.3546 34.8661 19.136 33.7956 20.9006 35.0494C21.552 35.4954 22.6894 36.0007 23.8908 36.0007C24.8021 36.0007 25.7499 35.7105 26.5509 34.8833C26.9245 34.56 30.3373 31.514 32.1109 26.6888L32.1626 26.5482L32.1109 25.8609Z" fill="#3779b9" />
|
||||
</g>
|
||||
<defs><clipPath id="clip0_ios"><rect width="36" height="36" fill="white" /></clipPath></defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconWatch = () => (
|
||||
<svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.4282 8.14719H4.2927C3.43931 8.14719 2.74512 8.84146 2.74512 9.69477V26.3054C2.74512 27.1587 3.43938 27.853 4.2927 27.853H19.4282C20.2815 27.853 20.9757 27.1587 20.9757 26.3054V9.69477C20.9757 8.84146 20.2814 8.14719 19.4282 8.14719Z" fill="#3779b9" fillOpacity="0.2" />
|
||||
<path d="M23.6774 11.9782H23.0853V9.28238C23.0853 7.59677 21.7931 6.20775 20.1474 6.05271L19.2545 2.08153C18.9789 0.855914 17.9092 0 16.653 0H7.0679C5.81176 0 4.74196 0.855914 4.4664 2.08153L3.57351 6.05271C1.92777 6.20775 0.635498 7.59677 0.635498 9.28238V26.7176C0.635498 28.5067 2.09104 29.9622 3.88007 29.9622H19.063L18.2255 33.6871C18.0589 34.428 17.4123 34.9453 16.653 34.9453H7.0679C6.30859 34.9453 5.662 34.428 5.49543 33.6871L5.0834 31.8545C5.0834 31.5633 4.84731 31.3272 4.55606 31.3272C4.26481 31.3272 4.02872 31.5633 4.02872 31.8545L4.4664 33.9185C4.74196 35.1441 5.81169 36 7.0679 36H16.653C17.9092 36 18.9789 35.1441 19.2545 33.9185L20.1474 29.9473C21.7931 29.7922 23.0853 28.4032 23.0853 26.7176V18.4657H23.6774C24.6077 18.4657 25.3646 17.7088 25.3646 16.7785V13.6654C25.3646 12.7351 24.6078 11.9782 23.6774 11.9782Z" fill="#3779b9" />
|
||||
<path d="M13.001 2.48169H10.7086C10.4174 2.48169 10.1812 2.7178 10.1812 3.00903C10.1812 3.30027 10.4174 3.53638 10.7086 3.53638H13.0122C13.3035 3.53638 13.5396 3.30027 13.5396 3.00903C13.5396 2.7178 13.3035 2.48169 13.0123 2.48169Z" fill="#3779b9" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconTv = () => (
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_tv)">
|
||||
<path d="M28.5331 13.0602H33.0025C33.2979 13.0602 33.5371 12.8208 33.5371 12.5254C33.5371 12.2301 33.2979 11.9907 33.0025 11.9907H28.5331C28.2377 11.9907 27.9985 12.2301 27.9985 12.5254C27.9985 12.8208 28.2377 13.0602 28.5331 13.0602ZM28.5331 14.9672H33.0025C33.2977 14.9672 33.537 14.7278 33.537 14.4325C33.537 14.1372 33.2977 13.8978 33.0025 13.8978H28.5331C28.2377 13.8978 27.9985 14.1372 27.9985 14.4325C27.9985 14.7278 28.2377 14.9672 28.5331 14.9672ZM28.5331 16.8741H33.0025C33.2977 16.8741 33.537 16.6347 33.537 16.3394C33.537 16.0441 33.2977 15.8047 33.0025 15.8047H28.5331C28.2377 15.8047 27.9985 16.0441 27.9985 16.3394C27.9985 16.6347 28.2377 16.8741 28.5331 16.8741Z" fill="#3779b9" />
|
||||
<path d="M8.09721 30.1764C10.3632 30.4112 12.6399 30.5287 14.9181 30.5285C17.1969 30.5285 19.4763 30.4112 21.7392 30.1764C23.0383 30.0412 24.2682 29.4631 25.2021 28.5479C26.1362 27.6325 26.7388 26.4147 26.8995 25.1185C27.3389 21.5631 27.3389 17.9672 26.8995 14.4118C26.7388 13.1157 26.1362 11.8979 25.2021 10.9824C24.2682 10.0673 23.0383 9.4891 21.7392 9.35396C17.204 8.88429 12.6324 8.88429 8.09721 9.35396C6.79811 9.48882 5.56814 10.0673 4.63432 10.9824C3.70021 11.8979 3.09728 13.1157 2.93697 14.4118C2.49725 17.9672 2.49725 21.5632 2.93697 25.1185C3.09728 26.4147 3.70021 27.6325 4.63432 28.5479C5.56814 29.4631 6.79783 30.0412 8.09721 30.1764Z" fill="#3779b9" fillOpacity="0.2" />
|
||||
<path d="M31.3294 6.27253H21.8985C21.8109 5.64497 21.5645 5.05016 21.1827 4.54446L24.8145 0.912619C24.9135 0.813379 24.9698 0.677319 24.9698 0.535541C24.9698 0.393763 24.9135 0.257703 24.8145 0.158463C24.7153 0.0592237 24.5792 0 24.4374 0C24.2957 0 24.1596 0.0592237 24.0603 0.158463L20.4261 3.7891C19.0907 2.78694 17.2373 2.78694 15.9022 3.78889L12.2698 0.15655C12.1695 0.0563102 12.0335 0 11.8918 0C11.75 0 11.614 0.0563102 11.5137 0.15655C11.4135 0.258007 11.3572 0.394295 11.3572 0.536419C11.3572 0.678542 11.4135 0.81483 11.5137 0.916287L15.1455 4.54446C14.7637 5.05022 14.5173 5.64499 14.4295 6.27253H4.6706C2.09506 6.27253 0 8.3677 0 10.9432V28.5871C0 31.1623 2.09513 33.2574 4.6706 33.2574H6.24602L6.48192 34.1267C6.73188 35.0468 7.57233 35.6895 8.5259 35.6895C9.47948 35.6895 10.32 35.0469 10.57 34.1267L10.8059 33.2574H25.1941L25.43 34.1267C25.68 35.0468 26.5207 35.6895 27.474 35.6895C28.4277 35.6895 29.2681 35.0469 29.518 34.1267L29.754 33.2574H31.3297C33.9049 33.2574 36 31.1623 36 28.5871V10.9432C36 8.36763 33.9049 6.27253 31.3294 6.27253ZM16.2532 4.89581C17.3071 3.84225 19.0214 3.84225 20.0751 4.89609C20.4579 5.2781 20.7114 5.75461 20.8147 6.27267H15.5135C15.6166 5.75468 15.8702 5.2781 16.2532 4.89581ZM34.9307 28.5871C34.9307 30.5726 33.3152 32.1882 31.3294 32.1882H4.6706C2.68484 32.1882 1.06928 30.5726 1.06928 28.5871V10.9432C1.06928 8.95741 2.68484 7.34184 4.6706 7.34184H31.3297C33.3152 7.34184 34.9307 8.95741 34.9307 10.9432V28.5871ZM9.53805 33.8462C9.41423 34.3018 8.99805 34.6202 8.52597 34.6202C8.05382 34.6202 7.63772 34.3019 7.51382 33.8462L7.354 33.2574H9.69794L9.53805 33.8462ZM28.4862 33.8462C28.3623 34.3018 27.9462 34.6202 27.474 34.6202C27.0019 34.6202 26.5858 34.3019 26.4622 33.8462L26.3023 33.2574H28.646L28.4862 33.8462Z" fill="#3779b9" />
|
||||
</g>
|
||||
<defs><clipPath id="clip0_tv"><rect width="36" height="36" fill="white" /></clipPath></defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconIOT = () => (
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.9999 10.2061C15.6829 10.2061 13.7979 12.0901 13.7979 14.406C13.7979 16.722 15.6828 18.606 17.9999 18.606C20.317 18.606 22.202 16.7219 22.202 14.406C22.202 12.0901 20.317 10.2061 17.9999 10.2061ZM17.9999 17.4061C16.3446 17.4061 14.9979 16.0601 14.9979 14.406C14.9979 12.7519 16.3446 11.406 17.9999 11.406C19.6552 11.406 21.002 12.7519 21.002 14.406C21.002 16.0601 19.6552 17.4061 17.9999 17.4061Z" fill="#3779b9" />
|
||||
<path d="M25.1903 18.0102C25.192 17.882 25.2001 17.7544 25.2001 17.626C25.2001 10.7685 22.7292 4.40667 18.4208 0.171803C18.1574 0 17.8427 0 17.5793 0.171803C13.2709 4.40667 10.8 10.7685 10.8 17.626C10.8 17.7544 10.8081 17.882 10.8098 18.0102C7.91877 19.5144 6 23.5346 6 28.1996C6 28.3587 6.06321 28.5113 6.17573 28.6238C6.28825 28.7364 6.44085 28.7996 6.59998 28.7996H29.4001C29.5592 28.7996 29.7118 28.7364 29.8243 28.6238C29.9369 28.5113 30.0001 28.3587 30.0001 28.1996C30.0001 23.5347 28.0814 19.5144 25.1903 18.0102ZM18.0001 1.45473C19.2677 2.78406 20.3501 4.32033 21.2367 6.00572H14.7634C15.6501 4.32026 16.7325 2.78399 18.0001 1.45473ZM7.21177 27.5996C7.35472 23.9749 8.78488 20.794 10.8614 19.374C11.0423 22.2454 11.6673 25.0445 12.6977 27.5996H7.21177ZM22.0117 27.5999H13.9884C12.6868 24.5589 12.0001 21.1194 12.0001 17.626C12.0001 13.8965 12.767 10.3296 14.1786 7.20568H21.8216C23.2332 10.3296 24.0001 13.8965 24.0001 17.626C24.0001 21.1195 23.3134 24.5589 22.0117 27.5999ZM23.3024 27.5996C24.3329 25.0445 24.9579 22.2454 25.1387 19.374C27.2153 20.794 28.6454 23.9749 28.7884 27.5996H23.3024Z" fill="#3779b9" />
|
||||
<path d="M18.0001 32.4005C17.6409 32.4005 17.4001 32.6993 17.4001 33.0005V35.3999C17.4001 35.7591 17.6409 35.9999 18.0001 35.9999C18.3593 35.9999 18.6001 35.7591 18.6001 35.3999V33.0006C18.6001 32.6993 18.3593 32.4005 18.0001 32.4005ZM14.9969 32.4005C14.6377 32.4005 14.3969 32.6993 14.3969 33.0005V34.1993C14.3969 34.5585 14.6377 34.7993 14.9969 34.7993C15.3561 34.7993 15.5969 34.5585 15.5969 34.1993V33.0005C15.5968 32.6993 15.3561 32.4005 14.9969 32.4005ZM21.0033 32.4005C20.6441 32.4005 20.4034 32.6993 20.4034 33.0005V34.1993C20.4034 34.5585 20.6441 34.7993 21.0033 34.7993C21.3625 34.7993 21.6033 34.5585 21.6033 34.1993V33.0005C21.6033 32.6993 21.3625 32.4005 21.0033 32.4005Z" fill="#3779b9" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
// ── shape images ─────────────────────────────────────────────────────────────
|
||||
const SHAPE_TOP = "/assets/img/elements/elements12.png";
|
||||
const SHAPE_BOTTOM = "/assets/img/elements/elements14.png";
|
||||
const SECTION_TITLE_ICON = "/assets/img/elements/elements21.png";
|
||||
const SHAPE_LEFT = "/assets/img/elements/elements3.png";
|
||||
const SHAPE_RIGHT = "/assets/img/elements/elements6.png";
|
||||
|
||||
// ── data ─────────────────────────────────────────────────────────────────────
|
||||
const OFFER_ITEMS = [
|
||||
{ icon: <IconWebsite />, label: "Website" },
|
||||
{ icon: <IconAndroid />, label: "Android" },
|
||||
{ icon: <IconIOS />, label: "IOS" },
|
||||
{ icon: <IconWatch />, label: "Watch" },
|
||||
{ icon: <IconTv />, label: "Tv" },
|
||||
{ icon: <IconIOT />, label: "IOT" },
|
||||
];
|
||||
|
||||
// ── component ─────────────────────────────────────────────────────────────────
|
||||
const OfferSection = () => {
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
// @ts-ignore
|
||||
if (window.WOW) {
|
||||
// @ts-ignore
|
||||
new window.WOW({ live: false }).init();
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="offer-area secondary-bg">
|
||||
{/* central radial glow */}
|
||||
<div className="offer__shadow wow fadeIn" data-wow-delay="200ms" data-wow-duration="1500ms" />
|
||||
|
||||
{/* left shape */}
|
||||
|
||||
|
||||
<div className="container">
|
||||
{/* header row */}
|
||||
<div className="offer-header-row">
|
||||
<div className="offer-section-header">
|
||||
<h5 className="wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
|
||||
<img src={SECTION_TITLE_ICON} alt="icon" width={28} height={12} style={{ color: "transparent", verticalAlign: "middle", marginRight: 4 }} />
|
||||
Our offering
|
||||
</h5>
|
||||
<h2 className="wow fadeInLeft" data-wow-delay="200ms" data-wow-duration="1500ms">
|
||||
Enhance and Pioneer Using <br /> Technology Trends
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<a
|
||||
className="btn-one wow fadeInUp"
|
||||
data-wow-delay="200ms"
|
||||
data-wow-duration="1500ms"
|
||||
href="/pricing"
|
||||
>
|
||||
Explore More <i className="fa-regular fa-arrow-right-long" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* cards grid */}
|
||||
<div className="offer-grid">
|
||||
{OFFER_ITEMS.map(({ icon, label }, idx) => (
|
||||
<div
|
||||
key={label}
|
||||
className="wow bounceInUp"
|
||||
data-wow-delay="0ms"
|
||||
data-wow-duration="1500ms"
|
||||
style={{ animationDelay: `${idx * 80}ms` }}
|
||||
>
|
||||
<div className="offer__item">
|
||||
<div className="shape-top">
|
||||
<img src={SHAPE_TOP} alt="shape" width={40} height={40} style={{ color: "transparent" }} />
|
||||
</div>
|
||||
<div className="shape-bottom">
|
||||
<img src={SHAPE_BOTTOM} alt="shape" width={40} height={40} style={{ color: "transparent" }} />
|
||||
</div>
|
||||
|
||||
{/* icon */}
|
||||
<div className="offer__icon">{icon}</div>
|
||||
|
||||
<h4>{label}</h4>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default OfferSection;
|
||||
@ -1,607 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
// ── Preloader ──────────────────────────────────────────────
|
||||
export const Preloader = () => (
|
||||
<div id="preloader">
|
||||
<div className="bd-loader-inner">
|
||||
<div className="bd-loader">
|
||||
<span className="bd-loader-item"></span>
|
||||
<span className="bd-loader-item"></span>
|
||||
<span className="bd-loader-item"></span>
|
||||
<span className="bd-loader-item"></span>
|
||||
<span className="bd-loader-item"></span>
|
||||
<span className="bd-loader-item"></span>
|
||||
<span className="bd-loader-item"></span>
|
||||
<span className="bd-loader-item"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// ── Back To Top ────────────────────────────────────────────
|
||||
export const BackToTop = () => (
|
||||
<div className="backtotop-wrap cursor-pointer">
|
||||
<svg className="backtotop-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||||
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
|
||||
// ── Search Overlay ─────────────────────────────────────────
|
||||
export const SearchOverlay = () => (
|
||||
<>
|
||||
<div className="df-search-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<div className="df-search-form">
|
||||
<div className="df-search-close text-center mb-20">
|
||||
<button className="df-search-close-btn df-search-close-btn"></button>
|
||||
</div>
|
||||
<form action="#">
|
||||
<div className="df-search-input mb-10">
|
||||
<input type="text" placeholder="Search here..." />
|
||||
<button type="submit"><i className="fa-solid fa-magnifying-glass"></i></button>
|
||||
</div>
|
||||
<div className="df-search-category">
|
||||
<span>Search by : </span>
|
||||
<a href="#">Modified Metatron, </a>
|
||||
<a href="#">Metatron Installation, </a>
|
||||
<a href="#">Metatron Cornering, </a>
|
||||
<a href="#">Metatron Renovation </a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="body-overlay"></div>
|
||||
</>
|
||||
);
|
||||
|
||||
// ── Offcanvas Sidebar ──────────────────────────────────────
|
||||
export const Offcanvas = () => (
|
||||
<>
|
||||
<div className="fix">
|
||||
<div className="offcanvas__info">
|
||||
<div className="offcanvas__wrapper">
|
||||
<div className="offcanvas__content">
|
||||
<div className="offcanvas__top mb-40 d-flex justify-content-between align-items-center">
|
||||
<div className="offcanvas__logo">
|
||||
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="Header Logo" /></a>
|
||||
</div>
|
||||
<div className="offcanvas__close">
|
||||
<button><i className="fa-solid fa-xmark"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="offcanvas__search mb-25">
|
||||
<p className="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum maxime accusamus corrupti natus obcaecati vitae dignissimos, id officiis similique eos.</p>
|
||||
</div>
|
||||
<div className="mobile-menu fix mb-40"></div>
|
||||
<div className="offcanvas__contact mt-30 mb-20">
|
||||
<h4>Contact Info</h4>
|
||||
<ul>
|
||||
<li className="d-flex align-items-center">
|
||||
<div className="offcanvas__contact-icon mr-15">
|
||||
<i className="fa-solid fa-location-dot"></i>
|
||||
</div>
|
||||
<div className="offcanvas__contact-text">
|
||||
<a target="_blank" href="#">31 Park End St, Brockhampton, UK</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex align-items-center">
|
||||
<div className="offcanvas__contact-icon mr-15">
|
||||
<i className="fa-solid fa-phone"></i>
|
||||
</div>
|
||||
<div className="offcanvas__contact-text">
|
||||
<a href="tel:+00112233665">+00112233665</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex align-items-center">
|
||||
<div className="offcanvas__contact-icon mr-15">
|
||||
<i className="fa-solid fa-envelope"></i>
|
||||
</div>
|
||||
<div className="offcanvas__contact-text">
|
||||
<a href="mailto:support@example.com">support@example.com</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="offcanvas__social">
|
||||
<ul>
|
||||
<li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
|
||||
<li><a href="#"><i className="fab fa-twitter"></i></a></li>
|
||||
<li><a href="#"><i className="fab fa-youtube"></i></a></li>
|
||||
<li><a href="#"><i className="fab fa-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="offcanvas__overlay"></div>
|
||||
<div className="offcanvas__overlay-white"></div>
|
||||
</>
|
||||
);
|
||||
|
||||
// ── Shared Nav Menu ────────────────────────────────────────
|
||||
export const NavMenu = () => (
|
||||
<ul>
|
||||
<li className="has-dropdown active">
|
||||
<a href="/">Home</a>
|
||||
{/* <ul className="submenu">
|
||||
<li><a href="/">Home One</a></li>
|
||||
<li><a href="/home-2">Home Two</a></li>
|
||||
<li><a href="/home-3">Home Three</a></li>
|
||||
<li><a href="#">Home Dark</a></li>
|
||||
</ul> */}
|
||||
</li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li className="has-dropdown">
|
||||
<a href="/services">Services</a>
|
||||
<ul className="submenu">
|
||||
<li><a href="/services">Services</a></li>
|
||||
<li><a href="/service-details">Service Details</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="has-dropdown">
|
||||
<a href="/blog-grid">Pages</a>
|
||||
<ul className="submenu">
|
||||
<li className="has-dropdown">
|
||||
<a href="/projects">Projects</a>
|
||||
<ul className="submenu">
|
||||
<li><a href="/projects">Projects</a></li>
|
||||
<li><a href="/project-details">Projects Details</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/team">Team</a></li>
|
||||
<li><a href="/team-details">Team Details</a></li>
|
||||
<li><a href="/faq">Faq's</a></li>
|
||||
<li><a href="/error">Error Page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="has-dropdown">
|
||||
<a href="/blog-grid">Blog</a>
|
||||
<ul className="submenu">
|
||||
<li><a href="/blog-standard">Blog Default</a></li>
|
||||
<li><a href="/blog-grid">Blog Grid</a></li>
|
||||
<li><a href="/blog-details">Blog Details</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
// ── Header 1 (Home One) ────────────────────────────────────
|
||||
export const Header1 = () => (
|
||||
<header>
|
||||
<div className="container-fluid bg-color-1">
|
||||
<div className="header-top">
|
||||
<div className="header-top-contact-info">
|
||||
<span className="email p-relative"><a href="mailto:info@Metatron.com">info@Metatron.com</a></span>
|
||||
<span className="time p-relative">Hours: Mon - Sat: 10.00 AM - 4.00 PM</span>
|
||||
</div>
|
||||
<div className="header-top-socials">
|
||||
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="header-sticky" className="header-area">
|
||||
<div className="large-container">
|
||||
<div className="mega-menu-wrapper">
|
||||
<div className="header-main">
|
||||
<div className="header-left">
|
||||
<div className="header-logo">
|
||||
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="header logo" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-right d-flex justify-content-end">
|
||||
<div className="mean__menu-wrapper d-none d-lg-block">
|
||||
<div className="main-menu">
|
||||
<nav id="mobile-menu"><NavMenu /></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div className="search-toggle-open header-search my-auto">
|
||||
<div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
|
||||
</div>
|
||||
<div className="header-shopping-cart my-auto">
|
||||
<div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
|
||||
</div>
|
||||
<div className="header-action d-none d-xl-inline-flex gap-5">
|
||||
<div className="header-link">
|
||||
<a className="primary-btn-1 btn-hover" href="/contact">
|
||||
GET A QUOTE | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-action">
|
||||
<div className="header-link-1">
|
||||
<div className="icon"><i className="fa-solid fa-phone-volume"></i></div>
|
||||
<div className="content">
|
||||
<span>Call Us Now</span>
|
||||
<h6><a href="tel:2085550112">+208-555-0112</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header__hamburger d-xl-none my-auto">
|
||||
<div className="sidebar__toggle">
|
||||
<a className="bar-icon" href="javascript:void(0)">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
// ── Header 2 (Home Two) ───────────────────────────────────
|
||||
export const Header2 = () => (
|
||||
<header>
|
||||
<div id="header-sticky" className="header-area header-style-two">
|
||||
<div className="large-container">
|
||||
<div className="mega-menu-wrapper">
|
||||
<div className="header-main">
|
||||
<div className="header-left">
|
||||
<div className="header-logo">
|
||||
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="header logo" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-right d-flex justify-content-end">
|
||||
<div className="mean__menu-wrapper d-none d-lg-block">
|
||||
<div className="main-menu">
|
||||
<nav id="mobile-menu"><NavMenu /></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div className="search-toggle-open header-search my-auto">
|
||||
<div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
|
||||
</div>
|
||||
<div className="header-shopping-cart my-auto">
|
||||
<div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
|
||||
</div>
|
||||
<div className="header-action d-none d-xl-inline-flex gap-5">
|
||||
<div className="header-link">
|
||||
<a className="primary-btn-2 btn-hover" href="/contact">
|
||||
GET A QUOTE | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-action">
|
||||
<div className="header-link-1">
|
||||
<div className="icon text-white"><i className="fa-solid fa-phone-volume"></i></div>
|
||||
<div className="content">
|
||||
<span className="text-white">Call Us Now</span>
|
||||
<h6><a href="tel:2085550112" className="text-white">+208-555-0112</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header__hamburger d-xl-none my-auto">
|
||||
<div className="sidebar__toggle">
|
||||
<a className="bar-icon" href="javascript:void(0)">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
// ── Header 3 (Home Three) ─────────────────────────────────
|
||||
export const Header3 = () => (
|
||||
<header>
|
||||
<div className="container-fluid bg-color-1">
|
||||
<div className="header-top">
|
||||
<div className="header-top-contact-info">
|
||||
<span className="email p-relative"><a href="mailto:info@Metatron.com">info@Metatron.com</a></span>
|
||||
<span className="time p-relative">Hours: Mon - Sat: 10.00 AM - 4.00 PM</span>
|
||||
</div>
|
||||
<div className="header-top-socials">
|
||||
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="header-sticky" className="header-area header-style-three">
|
||||
<div className="large-container">
|
||||
<div className="mega-menu-wrapper">
|
||||
<div className="header-main">
|
||||
<div className="header-left">
|
||||
<div className="header-logo">
|
||||
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="header logo" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-right d-flex justify-content-end">
|
||||
<div className="mean__menu-wrapper d-none d-lg-block">
|
||||
<div className="main-menu">
|
||||
<nav id="mobile-menu"><NavMenu /></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div className="search-toggle-open header-search my-auto">
|
||||
<div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
|
||||
</div>
|
||||
<div className="header-shopping-cart my-auto">
|
||||
<div className="cart-icon"><a href="/shop"><i className="fa-solid fa-cart-shopping"></i></a></div>
|
||||
</div>
|
||||
<div className="header__hamburger d-xl-block my-auto">
|
||||
<div className="sidebar__toggle">
|
||||
<a className="bar-icon" href="javascript:void(0)">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
// ── Footer 1 (Home One) ───────────────────────────────────
|
||||
export const Footer1 = () => (
|
||||
<footer>
|
||||
<div className="footer-main bg-color-1">
|
||||
<div className="footer-top section-space-medium">
|
||||
<div className="small-container">
|
||||
<div className="row g-4">
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-1">
|
||||
<figure className="image">
|
||||
<img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="" />
|
||||
</figure>
|
||||
<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="fab fa-facebook-f"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<ul className="service-list">
|
||||
<li><a href="/service-details">IT Management</a></li>
|
||||
<li><a href="/service-details">SEO Optimization</a></li>
|
||||
<li><a href="/service-details">Web Development</a></li>
|
||||
<li><a href="/service-details">Cyber Security</a></li>
|
||||
<li><a href="/service-details">Data Security</a></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><a href="#">{num === 1 ? "Tacking the Changes of Retail Industry" : "What’s the Holding Back the It Solution"}</a></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>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 />
|
||||
<button type="submit" className="primary-btn-1 btn-hover">
|
||||
SUBSCRIBE NOW
|
||||
<span className="btn-hover-span"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div className="right-area">
|
||||
<span><a href="#">Terms & Condition</a></span>
|
||||
<span><a href="#">Privacy Policy</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
// ── Footer 2 (Home Two) ───────────────────────────────────
|
||||
export const Footer2 = () => (
|
||||
<footer>
|
||||
<div className="footer-main bg-color-1 p-relative">
|
||||
<div className="footer-shape-1" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-1.png)" }}></div>
|
||||
<div className="footer-shape-2" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-2.png)" }}></div>
|
||||
<div className="footer-top section-space-medium">
|
||||
<div className="small-container">
|
||||
<div className="row g-4">
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-1">
|
||||
<figure className="image">
|
||||
<img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="" />
|
||||
</figure>
|
||||
<p className="mt-40 mb-30">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
|
||||
<div className="working-hours">
|
||||
<h6 className="text-white mb-20">Working Hours:</h6>
|
||||
<ul className="text-white">
|
||||
<li>Mon - Sat: <span className="fw-lighter">10.00AM - 4.00PM</span></li>
|
||||
<li>Sunday: <span className="fw-lighter">Close</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</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-30 footer-title">Quick Links</h4>
|
||||
<ul className="service-list">
|
||||
<li><a href="/about">About Us</a></li>
|
||||
<li><a href="/team">Our Team</a></li>
|
||||
<li><a href="/services">Our Services</a></li>
|
||||
<li><a href="/blog-grid">Latest Blog</a></li>
|
||||
<li><a href="/contact">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</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-30 footer-title">Our Services</h4>
|
||||
<ul className="service-list">
|
||||
<li><a href="/service-details">IT Management</a></li>
|
||||
<li><a href="/service-details">SEO Optimization</a></li>
|
||||
<li><a href="/service-details">Web Development</a></li>
|
||||
<li><a href="/service-details">Cyber Security</a></li>
|
||||
<li><a href="/service-details">Data Security</a></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 mb-30">Our Gallery</h4>
|
||||
<div className="footer-gallery p-relative">
|
||||
<a className="popup-image" href="/assets/imgs/footer/footer-1.png"><img src="/assets/imgs/footer/footer-1.png" alt="" /></a>
|
||||
<a className="popup-image" href="/assets/imgs/footer/footer-2.png"><img src="/assets/imgs/footer/footer-2.png" alt="" /></a>
|
||||
<a className="popup-image" href="/assets/imgs/footer/footer-3.png"><img src="/assets/imgs/footer/footer-3.png" alt="" /></a>
|
||||
<a className="popup-image" href="/assets/imgs/footer/footer-4.png"><img src="/assets/imgs/footer/footer-4.png" alt="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="small-container">
|
||||
<div className="footer-bottom pt-30 pb-30">
|
||||
<div className="left-area p-relative">
|
||||
<span>© All Copyright 2024 by <a href="#">Metatron</a></span>
|
||||
</div>
|
||||
<div className="footer-socials p-relative">
|
||||
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||||
</div>
|
||||
<div className="right-area p-relative">
|
||||
<span><a href="#">Terms & Condition</a></span>
|
||||
<span><a href="#">Privacy Policy</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
// ── Footer 3 (Home Three) ───────────────────────────────────
|
||||
export const Footer3 = () => (
|
||||
<footer>
|
||||
<div className="footer-main bg-color-1 p-relative">
|
||||
<div className="footer-shape-1" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-1.png)" }}></div>
|
||||
<div className="footer-shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-50.png)" }}></div>
|
||||
<div className="footer-top section-space-medium">
|
||||
<div className="small-container">
|
||||
<div className="row g-4">
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-1">
|
||||
<figure className="image">
|
||||
<img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="" />
|
||||
</figure>
|
||||
<p className="mt-40 mb-40 text-white">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
|
||||
<div className="footer-socials p-relative">
|
||||
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-twitter"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
|
||||
<span><a href="#"><i className="fab fa-youtube"></i></a></span>
|
||||
</div>
|
||||
</div>
|
||||
</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-30 footer-title text-white">Quick Links</h4>
|
||||
<ul className="service-list">
|
||||
<li><a href="/about">About Us</a></li>
|
||||
<li><a href="/team">Our Team</a></li>
|
||||
<li><a href="/services">Our Services</a></li>
|
||||
<li><a href="/blog-grid">Latest Blog</a></li>
|
||||
<li><a href="/contact">Contact Us</a></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-30 footer-title text-white">Our Services</h4>
|
||||
<ul className="service-list">
|
||||
<li><a href="/service-details">IT Management</a></li>
|
||||
<li><a href="/service-details">SEO Optimization</a></li>
|
||||
<li><a href="/service-details">Web Development</a></li>
|
||||
<li><a href="/service-details">Cyber Security</a></li>
|
||||
<li><a href="/service-details">Data Security</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-4">
|
||||
<h4 className="mb-20 footer-title text-white">Contact Info</h4>
|
||||
<ul className="footer-contact-info-widget p-relative">
|
||||
{[
|
||||
{ icon: "location-dot", title: "Location:", text: "4517 Washington. mg Manchester, Kentucky 39495" },
|
||||
{ icon: "phone-alt", title: "Phone Call:", text: "208-6666-0112, 308-5555-0113" },
|
||||
{ icon: "clock", title: "Opening Hours:", text: "Mon - Sat: 10.00 AM - 4.00 PM" }
|
||||
].map((item, i) => (
|
||||
<li key={i}>
|
||||
<div className="icon">
|
||||
<i className={`fa-solid fa-${item.icon}`}></i>
|
||||
</div>
|
||||
<div className="info-details">
|
||||
<h6 className="mb-10 text-white">{item.title} </h6>
|
||||
<p className="m-0 text-white">{item.text}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="small-container">
|
||||
<div className="footer-bottom pt-30 pb-30 p-relative">
|
||||
<div className="left-area">
|
||||
<span className="text-white">© All Copyright 2024 by <a href="#">Metatron</a></span>
|
||||
</div>
|
||||
<div className="right-area">
|
||||
<span className="text-white"><a href="#">Terms & Condition</a></span>
|
||||
<span className="text-white"><a href="#">Privacy Policy</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
@ -45,7 +45,6 @@ const AboutSection = () => {
|
||||
<h6 className="sec-title__tagline">Digital Excellence</h6>
|
||||
<h3 className="sec-title__title">Let's Work Together.<br /></h3>
|
||||
</div>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
</div>
|
||||
<p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">Partner with Metatroncube Software Solution and unlock a world of digital possibilities in web & app development, SEO, digital marketing, and graphic design services. Our commitment extends beyond mere product delivery; we focus on enhancing your market presence and driving business success with comprehensive digital strategies. Experience the unique Metatroncube advantage in every aspect of digital transformation.</p>
|
||||
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
|
||||
|
||||
@ -58,13 +58,13 @@ const banners = [
|
||||
];
|
||||
|
||||
const serviceCategories = [
|
||||
{ title: "Web Dev", image: "/assets/images/home/banner/web.webp", link: "/services-digital-solutions/website-development-company" },
|
||||
{ title: "Mobile App", image: "/assets/images/home/banner/mbl.webp", link: "/services-digital-solutions/mobile-application-development" },
|
||||
{ title: "Graphic Design", image: "/assets/images/home/banner/graphic.webp", link: "/services-digital-solutions/graphic-designing-company" },
|
||||
{ title: "UI/UX", image: "/assets/images/home/banner/ui-ux.webp", link: "/services-digital-solutions/ui-ux-designing" },
|
||||
{ title: "SEO", image: "/assets/images/home/banner/seo.webp", link: "/services-digital-solutions/search-engine-optimization-seo-content-writing" },
|
||||
{ title: "Digital Marketing", image: "/assets/images/home/banner/digital.webp", link: "/services-digital-solutions/digital-marketing-agency-in-canada" },
|
||||
{ title: "ERP", image: "/assets/images/home/banner/erp.webp", link: "/services-digital-solutions/erp-development-implementation" },
|
||||
{ title: "Web Dev", image: "/assets/images/home/banner/web.webp", link: "/service/website-development-company" },
|
||||
{ title: "Mobile App", image: "/assets/images/home/banner/mbl.webp", link: "/service/mobile-application-development" },
|
||||
{ title: "Graphic Design", image: "/assets/images/home/banner/graphic.webp", link: "/service/graphic-designing-company" },
|
||||
{ title: "UI/UX", image: "/assets/images/home/banner/ui-ux.webp", link: "/service/ui-ux-designing" },
|
||||
{ title: "SEO", image: "/assets/images/home/banner/seo.webp", link: "/service/search-engine-optimization-seo-content-writing" },
|
||||
{ title: "Digital Marketing", image: "/assets/images/home/banner/digital.webp", link: "/service/digital-marketing-agency-in-canada" },
|
||||
{ title: "ERP", image: "/assets/images/home/banner/erp.webp", link: "/service/erp-development-implementation" },
|
||||
];
|
||||
|
||||
const BannerSection = () => {
|
||||
|
||||
@ -46,9 +46,6 @@ const BrandSection = ({ start = 1 }) => {
|
||||
|
||||
return (
|
||||
<section className="brand-section section-space p-relative">
|
||||
{/* <div className="brand-section__shape-one">
|
||||
<img src="/assets/images/about/5/element.webp" alt="shape" />
|
||||
</div> */}
|
||||
<div className="container">
|
||||
<SectionTitle
|
||||
tagline="OUR PARTNERS"
|
||||
|
||||
@ -1,208 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
interface FeatureItem {
|
||||
title: string;
|
||||
desc: string;
|
||||
icon: string;
|
||||
image: string;
|
||||
imageAlt: string;
|
||||
defaultActive?: boolean;
|
||||
delay: number;
|
||||
}
|
||||
|
||||
/* SVG icons matching the original icon font shapes */
|
||||
const IdeaIcon = () => (
|
||||
<svg width="36" height="36" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M32 6C21.5 6 13 14.5 13 25c0 7.4 4 13.8 10 17.2V48h18v-5.8C47 38.8 51 32.4 51 25c0-10.5-8.5-19-19-19z" stroke="white" strokeWidth="3" strokeLinejoin="round" fill="none" />
|
||||
<path d="M23 48h18M25 54h14M29 60h6" stroke="white" strokeWidth="3" strokeLinecap="round" />
|
||||
<path d="M32 14v4M22 18l2.8 2.8M42 18l-2.8 2.8" stroke="white" strokeWidth="2.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const GrowthIcon = () => (
|
||||
<svg width="36" height="36" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 48L22 30l10 8L46 16l10 10" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M46 8h10v10" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<rect x="8" y="50" width="8" height="8" rx="1" fill="white" />
|
||||
<rect x="20" y="42" width="8" height="16" rx="1" fill="white" />
|
||||
<rect x="32" y="36" width="8" height="22" rx="1" fill="white" />
|
||||
<rect x="44" y="28" width="8" height="30" rx="1" fill="white" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const TeamIcon = () => (
|
||||
<svg width="36" height="36" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="32" cy="18" r="9" stroke="white" strokeWidth="3" fill="none" />
|
||||
<path d="M14 52c0-9.9 8.1-18 18-18s18 8.1 18 18" stroke="white" strokeWidth="3" strokeLinecap="round" fill="none" />
|
||||
<circle cx="14" cy="22" r="6" stroke="white" strokeWidth="2.5" fill="none" />
|
||||
<path d="M2 50c0-7.2 5.4-13 12-13" stroke="white" strokeWidth="2.5" strokeLinecap="round" fill="none" />
|
||||
<circle cx="50" cy="22" r="6" stroke="white" strokeWidth="2.5" fill="none" />
|
||||
<path d="M62 50c0-7.2-5.4-13-12-13" stroke="white" strokeWidth="2.5" strokeLinecap="round" fill="none" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ArrowIcon = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12h14M13 6l6 6-6 6" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const features: FeatureItem[] = [
|
||||
{
|
||||
title: "Comprehensive digital development",
|
||||
desc: "Expert web, app development and e-commerce solutions.",
|
||||
icon: "/assets/images/services/feature/comprehensive.png",
|
||||
image: "/assets/images/services/feature/1-1.webp",
|
||||
imageAlt: "Comprehensive Digital Development",
|
||||
delay: 0,
|
||||
},
|
||||
{
|
||||
title: "Strategic online growth solutions",
|
||||
desc: "Strategic SEO and digital marketing for growth.",
|
||||
icon: "/assets/images/services/feature/strategic.png",
|
||||
image: "/assets/images/services/feature/1-2.webp",
|
||||
imageAlt: "Strategic Online Growth Solutions",
|
||||
defaultActive: true,
|
||||
delay: 200,
|
||||
},
|
||||
{
|
||||
title: "Creative design and branding excellence",
|
||||
desc: "Creative graphic design and branding strategy services.",
|
||||
icon: "/assets/images/services/feature/creative.png",
|
||||
image: "/assets/images/services/feature/1-3.webp",
|
||||
imageAlt: "Creative Design and Branding Excellence",
|
||||
delay: 400,
|
||||
},
|
||||
];
|
||||
|
||||
const FeaturesSection = () => {
|
||||
const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement;
|
||||
const delay = parseInt(el.dataset.wowDelay || "0");
|
||||
setTimeout(() => {
|
||||
el.style.opacity = "1";
|
||||
el.style.transform = "translateY(0)";
|
||||
el.style.visibility = "visible";
|
||||
}, delay);
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
itemRefs.current.forEach((el) => {
|
||||
if (el) observer.observe(el);
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="fo-section">
|
||||
<div className="fo-shapes">
|
||||
<div className="fo-shape-one"></div>
|
||||
<div className="fo-shape-two"></div>
|
||||
</div>
|
||||
<div className="fo-container">
|
||||
<div className="history-two__title text-center mb-4">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">Strategic Digital Services</h6>
|
||||
<h3 className="sec-title__title">Innovation & Growth</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="fo-row">
|
||||
{features.map((feature, index) => (
|
||||
<div className="fo-col" key={index}>
|
||||
<div
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
className={`fo-item${feature.defaultActive ? " fo-item--active" : ""}`}
|
||||
data-wow-delay={String(feature.delay)}
|
||||
style={{
|
||||
opacity: 0,
|
||||
transform: "translateY(40px)",
|
||||
transition: `opacity 1.5s ease ${feature.delay}ms, transform 1.5s ease ${feature.delay}ms`,
|
||||
visibility: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Hover overlay card — slides down from top */}
|
||||
<div className="fo-hover-card">
|
||||
{/* Circle icon badge above the hover card */}
|
||||
<div className="fo-hover-icon">
|
||||
<Image
|
||||
src={feature.icon}
|
||||
alt={feature.title}
|
||||
width={50}
|
||||
height={50}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="fo-hover-title">{feature.title}</h3>
|
||||
{/* <Link href="#" className="fo-hover-btn">
|
||||
<ArrowIcon />
|
||||
</Link> */}
|
||||
</div>
|
||||
|
||||
{/* Main card */}
|
||||
<div className="fo-card">
|
||||
{/* Top dark section */}
|
||||
<div className="fo-card-top">
|
||||
{/* Mobile only icon */}
|
||||
<div className="fo-mobile-icon d-md-none mb-3">
|
||||
<Image
|
||||
src={feature.icon}
|
||||
alt={feature.desc}
|
||||
width={40}
|
||||
height={40}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="fo-card-title">{feature.title}</h3>
|
||||
{/* <Link href="#" className="fo-card-btn d-none d-md-flex">
|
||||
<ArrowIcon />
|
||||
</Link> */}
|
||||
<p className="fo-card-desc">{feature.desc}</p>
|
||||
</div>
|
||||
{/* Bottom white section with image + floating icon */}
|
||||
<div className="fo-card-bottom d-none d-md-block">
|
||||
<div className="fo-card-image">
|
||||
<Image
|
||||
src={feature.image}
|
||||
alt={feature.imageAlt}
|
||||
width={340}
|
||||
height={123}
|
||||
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="fo-card-icon">
|
||||
<Image
|
||||
src={feature.icon}
|
||||
alt={feature.desc}
|
||||
width={50}
|
||||
height={50}
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeaturesSection;
|
||||
@ -1,47 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { caseStudies } from "@/utils/data";
|
||||
|
||||
const ProjectsSection = () => {
|
||||
return (
|
||||
<section className="project-slider-section section-space fix">
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<div className="col-xxl-6">
|
||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">PROJECTS</span>
|
||||
<h3 className="section-title mt-10">Our Latest Projects</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6">
|
||||
<div className="project_1_navigation__wrapprer position-relative z-1 text-end mt-30">
|
||||
<div className="common-slider-navigation">
|
||||
<button className="project-1-button-prev"><i className="fa-solid fa-chevron-left"></i></button>
|
||||
<button className="project-1-button-next"><i className="fa-solid fa-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper project-active-1">
|
||||
<div className="swiper-wrapper">
|
||||
{caseStudies.slice(0, 4).map((project, index) => (
|
||||
<div key={project.id} className="swiper-slide">
|
||||
<div className="project-slider-area p-relative">
|
||||
<figure className="image m-img"><img src={project.image} alt="" /></figure>
|
||||
<div className="content-area">
|
||||
<div className="title-area">
|
||||
<h6 className="mb-5">{project.tag}</h6>
|
||||
<h5><a href="#">{project.title}</a></h5>
|
||||
</div>
|
||||
<div className="icon-area"><a href="#"><i className="fa-solid fa-arrow-right"></i></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectsSection;
|
||||
@ -1,57 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { services1 } from "@/utils/data";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
Swiper: any;
|
||||
}
|
||||
}
|
||||
|
||||
const ServiceSliderSection = () => {
|
||||
return (
|
||||
<section className="service-slider-section section-space bg-color-1 p-relative">
|
||||
<div className="shape-1 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-10.png)" }}></div>
|
||||
<div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-9.png)" }}></div>
|
||||
<div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-11.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<div className="col-xxl-6">
|
||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">SERVICES WE’RE OFFERING</span>
|
||||
<h3 className="section-title mt-10">Exclusive IT Services</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6">
|
||||
<div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
|
||||
<div className="common-slider-navigation">
|
||||
<button className="service-1-button-prev"><i className="fa-solid fa-chevron-left"></i></button>
|
||||
<button className="service-1-button-next"><i className="fa-solid fa-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper service-active-1">
|
||||
<div className="swiper-wrapper">
|
||||
{services1.map((service, index) => (
|
||||
<div key={service.id} className="swiper-slide">
|
||||
<div className="service-slider-area p-relative">
|
||||
<figure className="image w-img"><img src={service.image} alt="" /></figure>
|
||||
<div className="content">
|
||||
<div className="icon-box">
|
||||
<img src={`/assets/imgs/icon/icon${index === 0 ? "" : index === 1 ? "-2" : index === 2 ? "-3" : ""}.png`} alt="img" />
|
||||
</div>
|
||||
<h4 className="mb-15"><a href="#">{service.title}</a></h4>
|
||||
<p className="mb-25">{service.description}</p>
|
||||
<a href="#" className="service-btn">Read More <i className="fa-solid fa-angles-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceSliderSection;
|
||||
@ -1,67 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { ourServices } from "@/utils/data";
|
||||
import { ServiceType } from "@/types";
|
||||
|
||||
const ServiceThreeSlider = () => {
|
||||
const services: ServiceType[] = ourServices;
|
||||
|
||||
return (
|
||||
<section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#1a1f2b" }}>
|
||||
<div className="shape-1 float-bob-y" style={{ backgroundImage: "url(/assets/images/home/6/element-1.webp)" }}></div>
|
||||
<div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/images/home/6/element-2.webp)" }}></div>
|
||||
{/* <div className="shape-3" style={{ backgroundImage: "url(/assets/images/home/6/bottom-element.webp)" }}></div> */}
|
||||
|
||||
<div className="small-container">
|
||||
<div className="row align-items-end">
|
||||
<div className="col-xxl-10 col-xl-12">
|
||||
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
|
||||
<div className="sec-title sec-title--light">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">OUR SERVICEs</h6>
|
||||
<h3 className="sec-title__title text-white">We Shape the Perfect Solution.</h3>
|
||||
<p className="text-white mt-4">At Metatroncube, we sculpt digital excellence, meticulously blending innovation with user-centric design to manifest your business vision. Partner with us to experience a seamless fusion of web & app development, SEO, digital marketing, and graphic design services. Our strategic solutions and unparalleled execution pave the way for your digital voyage. We are your navigators in the digital realm, steering your project from conception to completion with precision and creativity.</p>
|
||||
</div>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-xxl-2 col-xl-6">
|
||||
<div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
|
||||
<div className="common-slider-navigation">
|
||||
<button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>
|
||||
<button className="service-1-button-next slider-nav-btn"><i className="fa-solid fa-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className="swiper service-active-1">
|
||||
<div className="swiper-wrapper">
|
||||
{services.slice(0, 7).map((service, index) => (
|
||||
<div key={index} className="swiper-slide">
|
||||
<div className="service-three__item text-center">
|
||||
<div className="service-three__item__content">
|
||||
<div className="service-three__item__icon">
|
||||
<img src={service.icon} alt={service.title} width="55" height="40" />
|
||||
</div>
|
||||
<h3 className="service-three__item__title">
|
||||
<Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
|
||||
</h3>
|
||||
<p className="service-three__item__text text-white">{service.description}</p>
|
||||
</div>
|
||||
<div className="service-three__item__image">
|
||||
<img src={service.image} alt={service.title} className="service-img-fixed" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceThreeSlider;
|
||||
@ -87,11 +87,6 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
|
||||
<div className="col-xxl-4 col-xl-4 col-lg-12">
|
||||
<div className="testimonials-video-area p-relative">
|
||||
<figure className="image w-img"><img src="/assets/images/about/6/left.webp" alt="What they're talking about us" /></figure>
|
||||
{/* <div className="play-btn">
|
||||
<div className="video_player_btn">
|
||||
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-8 col-xl-8 col-lg-12">
|
||||
@ -113,13 +108,12 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
|
||||
<GoogleReviewsBranding />
|
||||
</div>
|
||||
</div>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
</div>
|
||||
|
||||
<div className="testi-slider-wrapper" style={{ position: 'relative', zIndex: 2, marginTop: '70px' }}>
|
||||
{loading ? (
|
||||
<div className="text-center py-5">
|
||||
<p className="text-white">Loading reviews from Google...</p>
|
||||
<p className="text-white">Loading reviews...</p>
|
||||
</div>
|
||||
) : displayedReviews.length > 0 ? (
|
||||
<Slider {...settings}>
|
||||
|
||||
@ -34,7 +34,6 @@ const About2Section = () => (
|
||||
<h6 className="sec-title__tagline">ABOUT US</h6>
|
||||
<h2 className="sec-title__title">Our Story</h2>
|
||||
</div>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
</div>
|
||||
<p className="mb-35">Metatroncube Software Solution was born from a passion for technology and a vision to revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have been pioneering custom software solutions since 2019.</p>
|
||||
<div className="about-features-list">
|
||||
@ -69,21 +68,6 @@ const About2Section = () => (
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="about-2-btn-area">
|
||||
<a className="primary-btn-1 btn-hover" href="/about">
|
||||
about us | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</a>
|
||||
<div className="call-us">
|
||||
<div className="icon-1">
|
||||
<i className="fa-solid fa-phone-volume"></i>
|
||||
</div>
|
||||
<div className="content p-relative">
|
||||
<span>Call Us Now</span>
|
||||
<h5><a href="tel:2085550112">+208-555-0112</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
const BannerSection = () => {
|
||||
return (
|
||||
<section className="banner-section-2 p-relative fix">
|
||||
<div className="swiper banner-active">
|
||||
<div className="swiper-wrapper">
|
||||
{[1, 1, 1].map((_, i) => (
|
||||
<div key={i} className="swiper-slide">
|
||||
<div className="banner-main-2" style={{ backgroundImage: "url(/assets/imgs/banner/banner-3.jpg)" }}>
|
||||
<div className="large-container">
|
||||
<div className="banner-area-2 p-relative z-3 wow img-custom-anim-left animated" data-wow-delay={`${1000 + i * 2000}ms`}>
|
||||
<span className="p-relative banner-sub-title">Best it SOULTION Provider</span>
|
||||
<h1 className="banner-title">Excellent It Services for Your Success</h1>
|
||||
<p className="banner-text">We denounce with righteous indignation and dislike men who are so<br /> beguiled and demoralized by the charms of pleasure.</p>
|
||||
<div className="banner-btn-area-2">
|
||||
<a className="primary-btn-1 btn-hover" href="/services">
|
||||
VIEW SERVICES | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</a>
|
||||
<div className="round-image-area">
|
||||
<div className="image-1">
|
||||
<img src="/assets/imgs/banner/clients-group.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<h6>satisfied clients</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="socials-area">
|
||||
<ul>
|
||||
<li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
|
||||
<li><a href="#"><i className="fab fa-twitter"></i></a></li>
|
||||
<li><a href="#"><i className="fab fa-linkedin-in"></i></a></li>
|
||||
<li><a href="#"><i className="fab fa-youtube"></i></a></li>
|
||||
</ul>
|
||||
<span>FOLLOW US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shape-area-2">
|
||||
{[18, 19, 20, 21, 22, 23].map((s, idx) => (
|
||||
<div key={idx} className={`shape-${idx + 1}`} style={{ backgroundImage: `url(/assets/imgs/shapes/shape-${s}.png)` }}></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="banner-dot-inner">
|
||||
<div className="banner-dot"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BannerSection;
|
||||
@ -1,70 +0,0 @@
|
||||
import { blogs2 } from "@/utils/data";
|
||||
import Link from "next/link";
|
||||
|
||||
const Blog2Section = () => (
|
||||
<section className="blog-two-section section-space">
|
||||
<div className="small-container">
|
||||
<div className="blog-two-title-area mb-60">
|
||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">BLOG & NEWS</span>
|
||||
<h3 className="section-title mt-10">Explore Blogs And News</h3>
|
||||
</div>
|
||||
<Link className="primary-btn-1 btn-hover" href="/blog">
|
||||
view all | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
<div className="col-xxl-8 col-xl-8 col-lg-12">
|
||||
{blogs2[0] && (
|
||||
<div key={blogs2[0].id} className="blog-style-two relative overflow-hidden">
|
||||
<Link className="blog-image w-img relative block" href={`/blog/${blogs2[0].slug}`}>
|
||||
<img src={blogs2[0].image} alt="" />
|
||||
<span className="blog-category-tag">{blogs2[0].category}</span>
|
||||
</Link>
|
||||
<div className="blog-content-area">
|
||||
<div className="post-meta">
|
||||
<span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span>
|
||||
<span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blogs2[0].date}</span>
|
||||
</div>
|
||||
<hr />
|
||||
<h5 className="blog-title">
|
||||
<Link href={`/blog/${blogs2[0].slug}`}>{blogs2[0].title}</Link>
|
||||
</h5>
|
||||
<p className="blog-text">Stay updated with the latest trends and insights from our team of experts in the industry.</p>
|
||||
<Link className="primary-btn-5 btn-hover" href={`/blog/${blogs2[0].slug}`}>
|
||||
Read MORE | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-xxl-4 col-xl-4 col-lg-12">
|
||||
{blogs2.slice(1, 2).map((blog) => (
|
||||
<div key={blog.id} className="blog-style-two d-block relative overflow-hidden">
|
||||
<div className="blog-content-area">
|
||||
<div className="post-meta">
|
||||
<span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span>
|
||||
<span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
|
||||
</div>
|
||||
<hr />
|
||||
<h5 className="blog-title">
|
||||
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
|
||||
</h5>
|
||||
<p className="blog-text">Discover more about how we drive digital excellence.</p>
|
||||
<Link className="primary-btn-5 btn-hover" href={`/blog/${blog.slug}`}>
|
||||
Read MORE | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Blog2Section;
|
||||
@ -1,27 +0,0 @@
|
||||
import { features2 } from "@/utils/data";
|
||||
|
||||
const FeaturesSection2 = () => (
|
||||
<section className="features-section pt-80 pb-80 bg-color-1 p-relative">
|
||||
<div className="bg-shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-27.png)" }}></div>
|
||||
<div className="bg-shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-28.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="row g-4">
|
||||
{features2.map((service, i) => (
|
||||
<div key={service.id} className="col-xxl-4 col-xl-4 col-lg-6 col-md-6">
|
||||
<div className={`features-box-area p-relative wow ${i === 0 ? 'fadeInLeft' : i === 2 ? 'fadeInRight' : ''}`} data-wow-delay={`${i * 500}ms`}>
|
||||
<div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-25.png)" }}></div>
|
||||
<div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-26.png)" }}></div>
|
||||
<div className="icon-box">
|
||||
<img src={service.icon} alt="icon" />
|
||||
</div>
|
||||
<h5 className="mt-20 mb-10"><a href="#">{service.title}</a></h5>
|
||||
<p>Pellentesque nec the condimentum nec lorem nulla augue est ultricies ac iaculis ut euismod quis sapien.</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default FeaturesSection2;
|
||||
@ -1,41 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const HelpFormSection = () => (
|
||||
<section className="help-form-section section-space-small p-relative" style={{ backgroundImage: "url(/assets/imgs/bg/help-bg.png)" }}>
|
||||
<div className="bg-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-38.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<div className="col-xxl-4 col-xl-4 col-lg-4">
|
||||
<div className="image-area w-img">
|
||||
<img src="/assets/imgs/resources/help-form.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-8 col-xl-8 col-lg-8">
|
||||
<div className="help-form-area">
|
||||
<h3 className="section-title mb-40 text-white">Need Any Help?</h3>
|
||||
<div className="inner p-relative">
|
||||
<form action="#">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-12 mb-20">
|
||||
<input type="text" placeholder="Your Name" required />
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-12 mb-20">
|
||||
<input type="tel" placeholder="Your Phone" required />
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-12">
|
||||
<button type="submit" className="primary-btn-1 btn-hover">
|
||||
Submit Request
|
||||
<span className="btn-hover-span"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default HelpFormSection;
|
||||
@ -1,30 +0,0 @@
|
||||
const IconCounterSection = () => {
|
||||
return (
|
||||
<section className="icon-box-counter-section section-space-bottom">
|
||||
<div className="small-container">
|
||||
<div className="row g-4">
|
||||
{[
|
||||
{ img: "icon-7.png", count: "300", label: "Successfully Projects" },
|
||||
{ img: "icon-4.png", count: "450", label: "Company Staffs" },
|
||||
{ img: "icon-5.png", count: "3,150", label: "Tons of Products" },
|
||||
{ img: "icon-6.png", count: "6,561", label: "Satisfied Clients" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="col-xxl-3 col-xl-3 col-lg-6 col-md-6">
|
||||
<div className="icon-box-counter-area">
|
||||
<div className="icon-box">
|
||||
<img src={`/assets/imgs/icon/${item.img}`} alt={item.label} />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h3><span className="counter">{item.count}</span>+</h3>
|
||||
<span className="text-1">{item.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconCounterSection;
|
||||
@ -1,48 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { caseStudies } from "@/utils/data";
|
||||
|
||||
const ProjectSlider2Section = () => {
|
||||
return (
|
||||
<section className="project-slider-two-section section-space-bottom p-relative fix">
|
||||
<div className="bg-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-37.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="project-two-title-area mb-60">
|
||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">Projects</span>
|
||||
<h3 className="section-title mt-10">Our Latest Projects</h3>
|
||||
</div>
|
||||
<a className="primary-btn-1 btn-hover" href="#">
|
||||
all PROJECTS | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="swiper project-active-1">
|
||||
<div className="swiper-wrapper">
|
||||
{caseStudies.slice(0, 6).map((project, index) => (
|
||||
<div key={project.id} className="swiper-slide">
|
||||
<div className="project-slider-two-box p-relative">
|
||||
<figure className="image w-img">
|
||||
<img src={project.image} alt="" />
|
||||
</figure>
|
||||
<div className="content">
|
||||
<div className="inner-box">
|
||||
<span>{project.tag}</span>
|
||||
<h5><a href="#">{project.title}</a></h5>
|
||||
</div>
|
||||
<a className="icon-1" href="#">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectSlider2Section;
|
||||
@ -1,79 +0,0 @@
|
||||
import { services2 } from "@/utils/data";
|
||||
|
||||
const ServiceTabSection = () => {
|
||||
const tabData = [
|
||||
{ id: "modified-roofing", icon: "icon-2.png" },
|
||||
{ id: "roof-installation", icon: "icon-3.png" },
|
||||
{ id: "roof-cornering", icon: "icon.png" },
|
||||
{ id: "roof-renovation", icon: "icon-2.png" }
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="service-tab-section section-space bg-color-1 p-relative">
|
||||
<div className="bg-image" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-35.png)" }}></div>
|
||||
<div className="bg-shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-33.png)" }}></div>
|
||||
<div className="bg-shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-34.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="service-tab-title-area mb-70">
|
||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">SERVICES WE’RE OFFERING</span>
|
||||
<h3 className="section-title mt-10 text-white p-relative">Exclusive IT Services</h3>
|
||||
</div>
|
||||
<a className="primary-btn-4 btn-hover mt-20" href="/services">
|
||||
all services | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xxl-4 col-xl-4 col-lg-4">
|
||||
<div className="service-tab-btn-area wow fadeInLeft" data-wow-delay="500ms">
|
||||
<ul className="nav nav-tabs" id="myTab" role="tablist">
|
||||
{services2.map((service, i) => (
|
||||
<li key={service.id} className="nav-item" role="presentation">
|
||||
<a href="javascript:void(0)" className={`nav-link ${i === 0 ? 'active' : ''}`} id={`${tabData[i].id}-tab`} data-bs-toggle="tab" data-bs-target={`#${tabData[i].id}-tab-pane`} role="tab">
|
||||
<div className="icon-box">
|
||||
<img src={`/assets/imgs/icon/${tabData[i].icon}`} alt={service.description} />
|
||||
</div>
|
||||
{service.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-8 col-xl-8 col-lg-8">
|
||||
<div className="service-tab-details-area">
|
||||
<div className="tab-content" id="myTabContent">
|
||||
{services2.map((service, i) => (
|
||||
<div key={service.id} className={`tab-pane fade ${i === 0 ? 'show active' : ''}`} id={`${tabData[i].id}-tab-pane`} role="tabpanel">
|
||||
<div className="service-tab-content p-relative">
|
||||
<div className="tab-bg-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-32.png)" }}></div>
|
||||
<figure className="image p-relative">
|
||||
<img src="/assets/imgs/resources/service-tab-1.jpg" alt="" />
|
||||
</figure>
|
||||
<div className="content p-relative">
|
||||
<h4>{service.title}</h4>
|
||||
<p className="pt-15 pb-10">{service.description}</p>
|
||||
<ul className="tab-list-content">
|
||||
<li>Accurate Testing Processes</li>
|
||||
<li>100% Satisfaction Guarantee</li>
|
||||
<li>Award Winning Company</li>
|
||||
</ul>
|
||||
<a className="primary-btn-1 btn-hover mt-20" href="/services">
|
||||
Read more | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceTabSection;
|
||||
@ -1,116 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
const TestimonialsSection = () => {
|
||||
return (
|
||||
<section className="testimonials-section p-relative section-space fix" style={{ backgroundImage: "url(/assets/imgs/bg/testimonial-bg.png)" }}>
|
||||
<div className="bg-shape" style={{ backgroundImage: "url(/assets/imgs/bg/testimonial-bg-1.png)" }}></div>
|
||||
<div className="bg-shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/testimonial-bg-2.png)" }}></div>
|
||||
<div className="bg-shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-16.png)" }}></div>
|
||||
<div className="bg-shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-17.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12">
|
||||
<div className="contact-from p-relative">
|
||||
<div className="title-box mb-40 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title text-white">TALK TO US</span>
|
||||
<h3 className="section-title mt-10 text-white">How May We Help You!</h3>
|
||||
</div>
|
||||
<form action="#">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="contact__from-input mb-20">
|
||||
<label>Your Name</label>
|
||||
<input type="text" placeholder="Ralph Edwards" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<label>Your Email</label>
|
||||
<div className="contact__from-input mb-20">
|
||||
<input type="text" placeholder="info@example.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<label>Your Phone</label>
|
||||
<div className="contact__from-input mb-20">
|
||||
<input type="tel" placeholder="+1253 457 7840" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<label>Location</label>
|
||||
<div className="contact__select mb-20">
|
||||
<select>
|
||||
<option value="0">Select</option>
|
||||
<option value="2">Location-1</option>
|
||||
<option value="3">Location-2</option>
|
||||
<option value="1">Location-3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<label>Date</label>
|
||||
<div className="contact__from-input mb-20">
|
||||
<input type="date" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="testimonials_btn text-center">
|
||||
<button type="submit" className="primary-btn-4 btn-hover">
|
||||
Submit Request
|
||||
<span className="btn-hover-span"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12">
|
||||
<div className="testimonials-area">
|
||||
<div className="title-box mb-40 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title">CLIENTS REVIEW</span>
|
||||
<h3 className="section-title mt-10">What They Say About Our</h3>
|
||||
</div>
|
||||
<p className="mb-40">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
||||
<div className="testimonials-box">
|
||||
<div className="swiper testimonial-active-1">
|
||||
<div className="swiper-wrapper">
|
||||
{[2, 1].map((num) => (
|
||||
<div key={num} className="swiper-slide">
|
||||
<div className="autor-upper p-relative">
|
||||
<figure className="image">
|
||||
<img src={`/assets/imgs/resources/testimonials-${num}.png`} alt="" />
|
||||
</figure>
|
||||
<div className="icon-1">
|
||||
<i className="fa-solid fa-quote-right"></i>
|
||||
</div>
|
||||
<div className="author-info">
|
||||
<h5>Kathryn Murphy</h5>
|
||||
<span>Engineering</span>
|
||||
<ul className="rating-list">
|
||||
{[1, 2, 3, 4, 5].map((s) => <li key={s}><i className="fa-solid fa-star"></i></li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<p>“ Consectetur adipiscing elit. Integer nunc viverra laoreet est the is porta pretium metus aliquam eget maecenas porta is nunc viverra Aenean pulvinar maximus leo ”</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonials_1_navigation__wrapprer position-relative z-1 text-center mt-40">
|
||||
<div className="common-slider-navigation">
|
||||
<button className="testimonial-1-button-prev p-relative"><i className="fa-solid fa-chevron-left"></i></button>
|
||||
<button className="testimonial-1-button-next p-relative"><i className="fa-solid fa-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TestimonialsSection;
|
||||
@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const TextSliderSection = () => (
|
||||
<section className="text-slider-section section-space fix">
|
||||
<div className="container-fluid">
|
||||
<div className="text-slider-box">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<div key={i} className="slide-box">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 0L38.1027 21.8973L60 30L38.1027 38.1027L30 60L21.8973 38.1027L0 30L21.8973 21.8973L30 0Z" fill="#3779b9" />
|
||||
</svg>
|
||||
<h1>{["Smart Solutions", "expert guidance", "strategic insights", "personalized advice", "comprehensive planning", "Transform Ideas"][i - 1]}</h1>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default TextSliderSection;
|
||||
@ -9,15 +9,14 @@ const WorkProcessSection = () => (
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">Get To Know Us More</h6>
|
||||
<h3 className="sec-title__title">We’re Reliable & Cost Efficient <br /> Digital Agency.</h3>
|
||||
<p>Appropriately enhance principle-centered innovation rather than high standards in platforms. <br /> Credibly orchestrate functional.</p>
|
||||
<p>We combine strategic planning with cutting-edge technology to build scalable digital solutions. <br /> Our commitment to quality ensures your project stands out in the marketplace.</p>
|
||||
</div>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
{[
|
||||
{ num: 1, title: "Our Mission", icon: "our-mission.webp", desc: "Empowering businesses with innovative digital growth solutions."},
|
||||
{ num: 2, title: "Our Vision", icon: "our-vision.webp", desc: "Redefining digital innovation for a connected, efficient future."},
|
||||
{ num: 3, title: "Our Values", icon: "our-values.webp", desc: "Integrity and Trust, Innovation and Excellence, Collaborationl."}
|
||||
{ num: 3, title: "Our Values", icon: "our-values.webp", desc: "Integrity and Trust, Innovation and Excellence, Collaboration."}
|
||||
].map((proc, i) => (
|
||||
<div key={i} className="col-xxl-4 col-xl-4 col-lg-4">
|
||||
<div className="work-process-box text-center">
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const AboutSection = () => (
|
||||
<section className="about-three-section section-space-top p-relative">
|
||||
<div className="bg-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-43.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6">
|
||||
<div className="about-3-image-area p-relative">
|
||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-42.png)" }}></div>
|
||||
<figure className="image w-img pr-60">
|
||||
<img src="/assets/imgs/about/about-5.jpg" alt="" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 col-xl-6 col-lg-6">
|
||||
<div className="about-3-content-area p-relative pr-30 pt-20">
|
||||
<div className="title-box wow fadeInLeft mb-25" data-wow-delay=".5s">
|
||||
<span className="section-sub-title no-border">WHO WE ARE</span>
|
||||
<h3 className="section-title mt-10">Ensuring Your Success Through Reliable IT Solutions</h3>
|
||||
</div>
|
||||
<p>It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
||||
<div className="row pb-25 pt-15">
|
||||
<div className="col-lg-6">
|
||||
<ul className="about-3-list">
|
||||
<li>Accurate Testing Processes</li>
|
||||
<li>100% Satisfaction Guarantee</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<ul className="about-3-list">
|
||||
<li>300+ Successful Projects done</li>
|
||||
<li>Technology Consultancy</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-3-progress-bar p-relative">
|
||||
<h6>Quality Services</h6>
|
||||
<div className="progress">
|
||||
<div className="progress-bar wow slideInLeft" data-wow-duration="1s" data-wow-delay=".3s" role="progressbar" style={{ width: '95%' }}>
|
||||
</div>
|
||||
</div>
|
||||
<span className="progress-count">95%</span>
|
||||
</div>
|
||||
<a className="primary-btn-1 btn-hover" href="/about">
|
||||
about us | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default AboutSection;
|
||||
@ -1,37 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const BannerSection = () => (
|
||||
<section className="banner-three-section fix">
|
||||
<div className="container-fluid g-0">
|
||||
<div className="row g-0">
|
||||
<div className="col-xxl-7">
|
||||
<div className="banner-3-content p-relative bg-color-1">
|
||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-39.png)" }}></div>
|
||||
<div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-40.png)" }}></div>
|
||||
<div className="shape-3 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-41.png)" }}></div>
|
||||
<div className="banner-area-2 wow img-custom-anim-left animated" data-wow-delay="2000ms">
|
||||
<span className="p-relative banner-sub-title no-border">TECHNOLOGY RELETED CONSULTANCY</span>
|
||||
<h1 className="banner-title">We Convert Concepts Into Technology</h1>
|
||||
<p className="banner-text">Nulla commodo dolor massa vel pellentesque nulla congue <br />ut convallis diam. Nam id tortor et nunc tempor faucibus.</p>
|
||||
<div className="header-action d-none d-xl-inline-flex gap-5">
|
||||
<div className="header-link">
|
||||
<a className="primary-btn-1 btn-hover" href="/contact">
|
||||
GET A QUOTE | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-5">
|
||||
<div className="banner-3-image-area p-relative" style={{ backgroundImage: "url(/assets/img/blog/blog-img18.png)" }}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default BannerSection;
|
||||
@ -1,53 +0,0 @@
|
||||
import { blogs } from "@/utils/data";
|
||||
import Link from "next/link";
|
||||
|
||||
const BlogSection = () => (
|
||||
<section className="blog-section-three section-space">
|
||||
<div className="small-container">
|
||||
<div className="blog-title-box mb-40">
|
||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title no-border">Blog & news</span>
|
||||
<h3 className="section-title mt-10">Explore Blogs and News</h3>
|
||||
</div>
|
||||
<Link className="primary-btn-1 btn-hover" href="/blog">
|
||||
view all | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
{blogs.slice(0, 3).map((blog, index) => (
|
||||
<div key={blog.id} className="col-xxl-4 col-xl-4 col-lg-6">
|
||||
<div className="blog-style-one relative overflow-hidden">
|
||||
<Link className="blog-image w-img block relative" href={`/blog/${blog.slug}`}>
|
||||
<img src={blog.image} alt={blog.title} />
|
||||
<span className="blog-category-tag">{blog.category}</span>
|
||||
</Link>
|
||||
<div className="blog-content">
|
||||
<div className="post-meta">
|
||||
<span className="p-relative">
|
||||
<i className="fa-solid fa-user"></i> By Admin
|
||||
</span>
|
||||
<span className="p-relative">
|
||||
<i className="fa-solid fa-calendar-days"></i> {blog.date}
|
||||
</span>
|
||||
</div>
|
||||
<hr />
|
||||
<h5 className="blog-title mb-30">
|
||||
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
|
||||
</h5>
|
||||
<div className="blog-link">
|
||||
<Link className="primary-btn-1 btn-hover" href={`/blog/${blog.slug}`}>
|
||||
Read MORE | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default BlogSection;
|
||||
@ -1,21 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
const BrandsSection = () => {
|
||||
return (
|
||||
<div className="brand-section section-space-bottom">
|
||||
<div className="small-container">
|
||||
<div className="swiper brand-active">
|
||||
<div className="swiper-wrapper">
|
||||
{[1, 2, 3, 4, 1].map((num, i) => (
|
||||
<div key={i} className="swiper-slide">
|
||||
<span><a href="#"><img src={`/assets/imgs/resources/brand-${num}.png`} alt="" /></a></span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandsSection;
|
||||
@ -1,57 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const FaqSection = () => (
|
||||
<section className="faq-section bg-color-1 p-relative">
|
||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/faq-bg.png)" }}></div>
|
||||
<div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-47.png)" }}></div>
|
||||
<div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-48.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<div className="col-xxl-7">
|
||||
<div className="faq-wrapper pr-50">
|
||||
<div className="faq-container section-space">
|
||||
<div className="title-box mb-25 wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title no-border">FAQ</span>
|
||||
<h3 className="section-title mt-10 text-white">Most Common Question?</h3>
|
||||
</div>
|
||||
<div className="bd-faq">
|
||||
<div className="accordion" id="accordionExample-st-2">
|
||||
<div className="bd-faq-group">
|
||||
{[
|
||||
"Where should I incorporate my business?",
|
||||
"How can I safely use files?",
|
||||
"What is included in your services?",
|
||||
"What type of company is measured?"
|
||||
].map((q, i) => (
|
||||
<div key={i} className="accordion-item">
|
||||
<h2 className="accordion-header" id={`heading${i}-st-2`}>
|
||||
<button className={`accordion-button ${i === 2 ? "" : "collapsed"}`} type="button" data-bs-toggle="collapse" data-bs-target={`#collapse${i}-st-2`} aria-expanded={i === 2}>
|
||||
{q}
|
||||
</button>
|
||||
</h2>
|
||||
<div id={`collapse${i}-st-2`} className={`accordion-collapse collapse ${i === 2 ? "show" : ""}`} aria-labelledby={`heading${i}-st-2`} data-bs-parent="#accordionExample-st-2">
|
||||
<div className="accordion-body">
|
||||
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-5 mt-auto">
|
||||
<div className="faq-image-area p-relative">
|
||||
<figure className="image">
|
||||
<img src="/assets/imgs/resources/faq-1.png" alt="" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default FaqSection;
|
||||
@ -1,34 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const HelpFormSection = () => (
|
||||
<section className="help-3-form-section p-relative z-1">
|
||||
<div className="small-container">
|
||||
<div className="help-3-form-area p-relative">
|
||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-44.png)" }}></div>
|
||||
<div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-45.png)" }}></div>
|
||||
<h3 className="mb-30">Need Any Help?</h3>
|
||||
<form action="#">
|
||||
<div className="row p-relative">
|
||||
<div className="col-lg-3">
|
||||
<input type="text" placeholder="Your Name" required />
|
||||
</div>
|
||||
<div className="col-lg-3">
|
||||
<input type="tel" placeholder="Your Phone" required />
|
||||
</div>
|
||||
<div className="col-lg-3">
|
||||
<input type="text" placeholder="Message" required />
|
||||
</div>
|
||||
<div className="col-lg-3">
|
||||
<button type="submit" className="primary-btn-1 btn-hover">
|
||||
Submit Request
|
||||
<span className="btn-hover-span"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default HelpFormSection;
|
||||
@ -1,51 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { caseStudies } from "@/utils/data";
|
||||
|
||||
const ProjectsSection = () => {
|
||||
return (
|
||||
<section className="project-slider-section section-space fix">
|
||||
<div className="small-container">
|
||||
<div className="row">
|
||||
<div className="col-xxl-6">
|
||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title no-border">PROJECTS</span>
|
||||
<h3 className="section-title mt-10">Explore Our Recent Projects</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6">
|
||||
<div className="project_1_navigation__wrapprer position-relative z-1 text-end mt-30">
|
||||
<div className="common-slider-navigation">
|
||||
<button className="project-1-button-prev p-relative"><i className="fa-solid fa-chevron-left"></i></button>
|
||||
<button className="project-1-button-next p-relative"><i className="fa-solid fa-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper project-active-1">
|
||||
<div className="swiper-wrapper">
|
||||
{caseStudies.slice(3, 7).map((project, index) => (
|
||||
<div key={project.id} className="swiper-slide">
|
||||
<div className="project-slider-area p-relative">
|
||||
<figure className="image m-img">
|
||||
<img src={project.image} alt="" />
|
||||
</figure>
|
||||
<div className="content-area">
|
||||
<div className="title-area">
|
||||
<h6 className="mb-5">{project.tag}</h6>
|
||||
<h5><a href="#">{project.title}</a></h5>
|
||||
</div>
|
||||
<div className="icon-area">
|
||||
<a href="#"><i className="fa-solid fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectsSection;
|
||||
@ -1,81 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { services3 } from "@/utils/data";
|
||||
|
||||
const ServiceSection = () => {
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined" && (window as any).Swiper) {
|
||||
new (window as any).Swiper('.service-active-2', {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 30,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
},
|
||||
pagination: {
|
||||
el: ".bd-swiper-dot",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".service-active-2-button-next",
|
||||
prevEl: ".service-active-2-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
'1200': { slidesPerView: 4 },
|
||||
'992': { slidesPerView: 3 },
|
||||
'768': { slidesPerView: 2 },
|
||||
'576': { slidesPerView: 1 },
|
||||
'0': { slidesPerView: 1 },
|
||||
},
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="service-section-three p-relative section-space-bottom bg-color-1 fix">
|
||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-46.png)" }}></div>
|
||||
<div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-47.png)" }}></div>
|
||||
<div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-48.png)" }}></div>
|
||||
<div className="small-container">
|
||||
<div className="service-3-title-box">
|
||||
<div className="title-box wow fadeInLeft" data-wow-delay=".5s">
|
||||
<span className="section-sub-title no-border">SERVICES WE’RE OFFERING</span>
|
||||
<h3 className="section-title mt-10 text-white">Exclusive IT Services</h3>
|
||||
</div>
|
||||
<div className="service_1_navigation__wrapprer position-relative z-1">
|
||||
<div className="common-slider-navigation">
|
||||
<button className="service-active-2-button-prev p-relative"><i className="fa-solid fa-chevron-left"></i></button>
|
||||
<button className="service-active-2-button-next p-relative"><i className="fa-solid fa-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper service-active-2">
|
||||
<div className="swiper-wrapper">
|
||||
{services3.map((service, index) => (
|
||||
<div key={service.id} className="swiper-slide">
|
||||
<div className="service-3-box-area p-relative">
|
||||
<a className="image w-img" href="#">
|
||||
<img src={service.image} alt="" />
|
||||
</a>
|
||||
<div className="inner text-center">
|
||||
<div className="content-box">
|
||||
<div className="icon-box">
|
||||
<img src={service.icon} alt={service.title} />
|
||||
</div>
|
||||
<h4><a href="#">{service.title}</a></h4>
|
||||
<p className="mb-25">{service.description}</p>
|
||||
</div>
|
||||
<div className="btn-area">
|
||||
<a href="#">services details <i className="fa-solid fa-angles-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceSection;
|
||||
@ -1,201 +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: '/pages/contact' },
|
||||
];
|
||||
|
||||
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'; }}
|
||||
>
|
||||
{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'; }}
|
||||
>
|
||||
{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;
|
||||
@ -101,13 +101,13 @@ const Footer1 = () => {
|
||||
<div className="footer-widget-2">
|
||||
<h4 className="mb-20 footer-title">Our Services</h4>
|
||||
<ul className="service-list">
|
||||
<li><Link href="/services-digital-solutions/website-development-company">Website Development</Link></li>
|
||||
<li><Link href="/services-digital-solutions/mobile-application-development">Mobile Application Development</Link></li>
|
||||
<li><Link href="/services-digital-solutions/graphic-designing-company">Graphic Designing</Link></li>
|
||||
<li><Link href="/services-digital-solutions/ui-ux-designing">UI / UX Designing</Link></li>
|
||||
<li><Link href="/services-digital-solutions/search-engine-optimization-seo-content-writing">SEO & Content Writing</Link></li>
|
||||
<li><Link href="/services-digital-solutions/digital-marketing-agency-in-canada">Digital Marketing</Link></li>
|
||||
<li><Link href="/services-digital-solutions/erp-development-implementation">ERP Development & Implementation</Link></li>
|
||||
<li><Link href="/service/website-development-company">Website Development</Link></li>
|
||||
<li><Link href="/service/mobile-application-development">Mobile Application Development</Link></li>
|
||||
<li><Link href="/service/graphic-designing-company">Graphic Designing</Link></li>
|
||||
<li><Link href="/service/ui-ux-designing">UI / UX Designing</Link></li>
|
||||
<li><Link href="/service/search-engine-optimization-seo-content-writing">SEO & Content Writing</Link></li>
|
||||
<li><Link href="/service/digital-marketing-agency-in-canada">Digital Marketing</Link></li>
|
||||
<li><Link href="/service/erp-development-implementation">ERP Development & Implementation</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
const Footer2 = () => (
|
||||
<footer>
|
||||
<div className="footer-main bg-color-1 p-relative">
|
||||
<div className="footer-shape-1" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-1.png)" }}></div>
|
||||
<div className="footer-shape-2" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-2.png)" }}></div>
|
||||
<div className="footer-top section-space-medium">
|
||||
<div className="small-container">
|
||||
<div className="row g-4">
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-1">
|
||||
<figure className="image">
|
||||
<img src="/assets/imgs/logo/logo-white.svg" alt="" />
|
||||
</figure>
|
||||
<p className="mt-40 mb-30">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
|
||||
<div className="working-hours">
|
||||
<h6 className="text-white mb-20">Working Hours:</h6>
|
||||
<ul className="text-white">
|
||||
<li>Mon - Sat: <span className="fw-lighter">10.00AM - 4.00PM</span></li>
|
||||
<li>Sunday: <span className="fw-lighter">Close</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</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-30 footer-title">Quick Links</h4>
|
||||
<ul className="service-list">
|
||||
<li><Link href="/about">About Us</Link></li>
|
||||
<li><Link href="/team">Our Team</Link></li>
|
||||
<li><Link href="/services">Our Services</Link></li>
|
||||
<li><Link href="/blog-grid">Latest Blog</Link></li>
|
||||
<li><Link href="/contact">Contact Us</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</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-30 footer-title">Our Services</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>
|
||||
</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 mb-30">Our Gallery</h4>
|
||||
<div className="footer-gallery p-relative">
|
||||
<a className="popup-image" href="/assets/imgs/footer/footer-1.png"><img src="/assets/imgs/footer/footer-1.png" alt="" /></a>
|
||||
<a className="popup-image" href="/assets/imgs/footer/footer-2.png"><img src="/assets/imgs/footer/footer-2.png" alt="" /></a>
|
||||
<a className="popup-image" href="/assets/imgs/footer/footer-3.png"><img src="/assets/imgs/footer/footer-3.png" alt="" /></a>
|
||||
<a className="popup-image" href="/assets/imgs/footer/footer-4.png"><img src="/assets/imgs/footer/footer-4.png" alt="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="small-container">
|
||||
<div className="footer-bottom pt-30 pb-30">
|
||||
<div className="left-area p-relative">
|
||||
<span>© All Copyright 2024 by <a href="#">Metatron</a></span>
|
||||
</div>
|
||||
<div className="footer-socials p-relative">
|
||||
<span><a href="#"><i className="fa-brands fa-facebook-f"></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>
|
||||
</div>
|
||||
<div className="right-area p-relative">
|
||||
<span><Link href="#">Terms & Condition</Link></span>
|
||||
<span><Link href="#">Privacy Policy</Link></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default Footer2;
|
||||
@ -1,90 +0,0 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
const Footer3 = () => (
|
||||
<footer>
|
||||
<div className="footer-main bg-color-1 p-relative">
|
||||
<div className="footer-shape-1" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-1.png)" }}></div>
|
||||
<div className="footer-shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-50.png)" }}></div>
|
||||
<div className="footer-top section-space-medium">
|
||||
<div className="small-container">
|
||||
<div className="row g-4">
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-1">
|
||||
<figure className="image">
|
||||
<img src="/assets/imgs/logo/logo-white.svg" alt="" />
|
||||
</figure>
|
||||
<p className="mt-40 mb-40 text-white">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
|
||||
<div className="footer-socials p-relative">
|
||||
<span><a href="#"><i className="fa-brands fa-facebook-f"></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>
|
||||
</div>
|
||||
</div>
|
||||
</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-30 footer-title text-white">Quick Links</h4>
|
||||
<ul className="service-list">
|
||||
<li><Link href="/about">About Us</Link></li>
|
||||
<li><Link href="/team">Our Team</Link></li>
|
||||
<li><Link href="/services">Our Services</Link></li>
|
||||
<li><Link href="/blog-grid">Latest Blog</Link></li>
|
||||
<li><Link href="/contact">Contact Us</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-30 footer-title text-white">Our Services</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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
|
||||
<div className="footer-widget-4">
|
||||
<h4 className="mb-20 footer-title text-white">Contact Info</h4>
|
||||
<ul className="footer-contact-info-widget p-relative">
|
||||
{[
|
||||
{ icon: "location-dot", title: "Location:", text: "4517 Washington. mg Manchester, Kentucky 39495" },
|
||||
{ icon: "phone-alt", title: "Phone Call:", text: "208-6666-0112, 308-5555-0113" },
|
||||
{ icon: "clock", title: "Opening Hours:", text: "Mon - Sat: 10.00 AM - 4.00 PM" }
|
||||
].map((item, i) => (
|
||||
<li key={i}>
|
||||
<div className="icon">
|
||||
<i className={`fa-solid fa-${item.icon === 'phone-alt' ? 'phone' : item.icon}`}></i>
|
||||
</div>
|
||||
<div className="info-details">
|
||||
<h6 className="mb-10 text-white">{item.title} </h6>
|
||||
<p className="m-0 text-white">{item.text}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="small-container">
|
||||
<div className="footer-bottom pt-30 pb-30 p-relative">
|
||||
<div className="left-area">
|
||||
<span className="text-white">© All Copyright 2024 by <a href="#">Metatron</a></span>
|
||||
</div>
|
||||
<div className="right-area">
|
||||
<span className="text-white"><Link href="#">Terms & Condition</Link></span>
|
||||
<span className="text-white"><Link href="#">Privacy Policy</Link></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default Footer3;
|
||||
@ -1,72 +0,0 @@
|
||||
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-arrow-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;
|
||||
@ -1,81 +0,0 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import NavMenu from "./NavMenu";
|
||||
import useSticky from "@/hooks/useSticky";
|
||||
|
||||
const Header2 = () => {
|
||||
const sticky = useSticky();
|
||||
|
||||
const openOffcanvas = () => {
|
||||
document.querySelector(".offcanvas__info")?.classList.add("info-open");
|
||||
document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
|
||||
};
|
||||
|
||||
const openSearch = () => {
|
||||
document.querySelector(".df-search-area")?.classList.add("opened");
|
||||
document.querySelector(".body-overlay")?.classList.add("opened");
|
||||
};
|
||||
|
||||
return (
|
||||
<header>
|
||||
<div id="header-sticky" className={`header-area header-style-two ${sticky ? 'sticky' : ''}`}>
|
||||
<div className="large-container">
|
||||
<div className="mega-menu-wrapper">
|
||||
<div className="header-main">
|
||||
<div className="header-left">
|
||||
<div className="header-logo">
|
||||
<Link href="/"><img src="/assets/img/home/footer/footer-logo-black.webp" alt="header logo" /></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-right d-flex justify-content-end">
|
||||
<div className="mean__menu-wrapper d-none d-lg-block">
|
||||
<div className="main-menu">
|
||||
<nav id="mobile-menu"><NavMenu /></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="search-toggle-open header-search my-auto"
|
||||
onClick={openSearch}
|
||||
>
|
||||
<div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
|
||||
</div>
|
||||
<div className="header-shopping-cart my-auto">
|
||||
<div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
|
||||
</div>
|
||||
<div className="header-action d-none d-xl-inline-flex gap-5">
|
||||
<div className="header-link">
|
||||
<Link className="primary-btn-2 btn-hover" href="/contact">
|
||||
GET A QUOTE | <i className="fa-solid fa-arrow-right"></i>
|
||||
<span className="btn-hover-span"></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-action">
|
||||
<div className="header-link-1">
|
||||
<div className="icon text-white"><i className="fa-solid fa-phone-volume"></i></div>
|
||||
<div className="content">
|
||||
<span className="text-white">Call Us Now</span>
|
||||
<h6><a href="tel:2085550112" className="text-white">+208-555-0112</a></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="header__hamburger d-xl-none my-auto"
|
||||
onClick={openOffcanvas}
|
||||
>
|
||||
<div className="sidebar__toggle">
|
||||
<a className="bar-icon" href="javascript:void(0)">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header2;
|
||||
@ -1,84 +0,0 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import NavMenu from "./NavMenu";
|
||||
import useSticky from "@/hooks/useSticky";
|
||||
|
||||
const Header3 = () => {
|
||||
const sticky = useSticky();
|
||||
|
||||
const openOffcanvas = () => {
|
||||
document.querySelector(".offcanvas__info")?.classList.add("info-open");
|
||||
document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
|
||||
};
|
||||
|
||||
const openSearch = () => {
|
||||
document.querySelector(".df-search-area")?.classList.add("opened");
|
||||
document.querySelector(".body-overlay")?.classList.add("opened");
|
||||
};
|
||||
|
||||
return (
|
||||
<header>
|
||||
<div className="container-fluid bg-color-1">
|
||||
<div className="header-top">
|
||||
<div className="header-top-contact-info">
|
||||
<span className="email p-relative d-inline-flex align-items-center me-4" style={{ gap: '10px', paddingLeft: 0 }}>
|
||||
<i className="fa-solid fa-envelope" style={{ position: 'static', transform: 'none' }}></i>
|
||||
<a href="mailto:info@Metatron.com">info@Metatron.com</a>
|
||||
</span>
|
||||
<span className="time p-relative d-inline-flex align-items-center" style={{ gap: '10px', paddingLeft: 0 }}>
|
||||
<i className="fa-solid fa-clock" style={{ position: 'static', transform: 'none' }}></i>
|
||||
Hours: Mon - Sat: 10.00 AM - 4.00 PM
|
||||
</span>
|
||||
</div>
|
||||
<div className="header-top-socials">
|
||||
<span><a href="#"><i className="fa-brands fa-facebook-f"></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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="header-sticky" className={`header-area header-style-three ${sticky ? 'sticky' : ''}`}>
|
||||
<div className="large-container">
|
||||
<div className="mega-menu-wrapper">
|
||||
<div className="header-main">
|
||||
<div className="header-left">
|
||||
<div className="header-logo">
|
||||
<Link href="/"><img src="/assets/img/home/footer/footer-logo-black.webp" alt="header logo" /></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-right d-flex justify-content-end">
|
||||
<div className="mean__menu-wrapper d-none d-lg-block">
|
||||
<div className="main-menu">
|
||||
<nav id="mobile-menu"><NavMenu /></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="search-toggle-open header-search my-auto"
|
||||
onClick={openSearch}
|
||||
>
|
||||
<div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
|
||||
</div>
|
||||
<div className="header-shopping-cart my-auto">
|
||||
<div className="cart-icon"><Link href="/shop"><i className="fa-solid fa-cart-shopping"></i></Link></div>
|
||||
</div>
|
||||
<div
|
||||
className="header__hamburger d-xl-block my-auto"
|
||||
onClick={openOffcanvas}
|
||||
>
|
||||
<div className="sidebar__toggle">
|
||||
<a className="bar-icon" href="javascript:void(0)">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header3;
|
||||
@ -1,58 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import useSticky from '@/hooks/useSticky';
|
||||
import NavItemsMetatron from './NavItemsMetatron';
|
||||
|
||||
const HeaderMetatron = () => {
|
||||
const sticky = useSticky();
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="metatron-header-wrap">
|
||||
<div id="metatron-header-sticky" className={`metatron-header-area ${sticky ? "header-sticky" : ""}`}>
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-3 col-md-6 col-6">
|
||||
<div className="metatron-logo">
|
||||
<Link href="/">
|
||||
<img src="/assets/img/home/footer/footer-logo-black.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '220px', height: 'auto' }} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 d-none d-lg-block">
|
||||
<div className="metatron-main-menu text-center">
|
||||
<nav className="metatron-nav">
|
||||
<NavItemsMetatron />
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6 col-6">
|
||||
<div className="metatron-header-right d-flex align-items-center justify-content-end">
|
||||
<div className="metatron-hero-btn d-none d-lg-block text-end">
|
||||
<Link href="/contact" className="metatron-btn-main">
|
||||
Get Started Now <i className="fa-solid fa-angle-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="metatron-header-action-item d-block d-lg-none">
|
||||
<button type="button" className="metatron-offcanvas-toggle" onClick={() => {
|
||||
document.querySelector(".offcanvas__info")?.classList.add("info-open");
|
||||
document.querySelector(".offcanvas__overlay")?.classList.add("overlay-open");
|
||||
}}>
|
||||
<i className="fa-solid fa-bars-staggered"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderMetatron;
|
||||
@ -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 './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;
|
||||
@ -7,21 +7,21 @@ const navItems = [
|
||||
title: 'Service',
|
||||
link: '/services-digital-solutions',
|
||||
submenu: [
|
||||
{ title: 'Website Development', link: '/services-digital-solutions/website-development-company' },
|
||||
{ title: 'Mobile Application Development', link: '/services-digital-solutions/mobile-application-development' },
|
||||
{ title: 'Graphic Designing', link: '/services-digital-solutions/graphic-designing-company' },
|
||||
{ title: 'UI / UX Designing', link: '/services-digital-solutions/ui-ux-designing' },
|
||||
{ title: 'SEO & Content Writing', link: '/services-digital-solutions/search-engine-optimization-seo-content-writing' },
|
||||
{ title: 'Digital Marketing', link: '/services-digital-solutions/digital-marketing-agency-in-canada' },
|
||||
{ title: 'ERP Development & Implementation', link: '/services-digital-solutions/erp-development-implementation' },
|
||||
{ title: 'Website Development', link: '/service/website-development-company' },
|
||||
{ title: 'Mobile Application Development', link: '/service/mobile-application-development' },
|
||||
{ title: 'Graphic Designing', link: '/service/graphic-designing-company' },
|
||||
{ title: 'UI / UX Designing', link: '/service/ui-ux-designing' },
|
||||
{ title: 'SEO & Content Writing', link: '/service/search-engine-optimization-seo-content-writing' },
|
||||
{ title: 'Digital Marketing', link: '/service/digital-marketing-agency-in-canada' },
|
||||
{ title: 'ERP Development & Implementation', link: '/service/erp-development-implementation' },
|
||||
],
|
||||
},
|
||||
{ title: 'Portfolio', link: '/portfolio' },
|
||||
{ title: 'About', link: '/about-us' },
|
||||
{ title: 'Career', link: '/careers' },
|
||||
{ title: 'Careers', link: '/careers' },
|
||||
{ title: 'Blog', link: '/blog' },
|
||||
{ title: 'Contact', link: '/contact' },
|
||||
{ title: 'Faq', link: '/faq' },
|
||||
{ title: 'FAQ', link: '/faq' },
|
||||
];
|
||||
|
||||
const NavItemsMetatron = () => {
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
const NavMenu = () => (
|
||||
<ul>
|
||||
<li><Link href="/">HOME</Link></li>
|
||||
<li className="has-dropdown">
|
||||
<Link href="/services-digital-solutions">SERVICE <i className="fa-solid fa-angle-down ms-1"></i></Link>
|
||||
<ul className="submenu">
|
||||
<li><Link href="/services-digital-solutions/website-development-company">WEBSITE DEVELOPMENT</Link></li>
|
||||
<li><Link href="/services-digital-solutions/mobile-application-development">MOBILE APPLICATION DEVELOPMENT</Link></li>
|
||||
<li><Link href="/services-digital-solutions/graphic-designing-company">GRAPHIC DESIGNING</Link></li>
|
||||
<li><Link href="/services-digital-solutions/ui-ux-designing">UI / UX DESIGNING</Link></li>
|
||||
<li><Link href="/services-digital-solutions/search-engine-optimization-seo-content-writing">SEO & CONTENT WRITING</Link></li>
|
||||
<li><Link href="/services-digital-solutions/digital-marketing-agency-in-canada">DIGITAL MARKETING</Link></li>
|
||||
<li><Link href="/services-digital-solutions/erp-development-implementation">ERP DEVELOPMENT & IMPLEMENTATION</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><Link href="/portfolio">PORTFOLIO</Link></li>
|
||||
<li><Link href="/about-us">ABOUT</Link></li>
|
||||
<li><Link href="/careers">CAREERS</Link></li>
|
||||
<li><Link href="/blog">BLOG</Link></li>
|
||||
<li><Link href="/contact">CONTACT</Link></li>
|
||||
<li><Link href="/faq">FAQ</Link></li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
export default NavMenu;
|
||||
@ -2,7 +2,6 @@
|
||||
import Link from 'next/link';
|
||||
import React, { useState } from 'react';
|
||||
import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
|
||||
import CircularProgress from '@/components/mobile-app-development-service/support/common/CircularProgress/CircularProgress';
|
||||
import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';
|
||||
|
||||
const About = () => {
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
"use client";
|
||||
import React from 'react';
|
||||
|
||||
interface CircularProgressProps {
|
||||
percent: number;
|
||||
radius: number;
|
||||
strokeColor: string;
|
||||
strokeWidth: number;
|
||||
}
|
||||
|
||||
const CircularProgress: React.FC<CircularProgressProps> = ({ percent, radius, strokeColor, strokeWidth }) => {
|
||||
const normalizedRadius = radius - strokeWidth * 2;
|
||||
const circumference = normalizedRadius * 2 * Math.PI;
|
||||
const strokeDashoffset = circumference - (percent / 100) * circumference;
|
||||
|
||||
return (
|
||||
<svg height={radius * 2} width={radius * 2} style={{ transform: 'rotate(-90deg)' }}>
|
||||
<circle
|
||||
stroke="#e6e6e6"
|
||||
fill="transparent"
|
||||
strokeWidth={strokeWidth}
|
||||
r={normalizedRadius}
|
||||
cx={radius}
|
||||
cy={radius}
|
||||
/>
|
||||
<circle
|
||||
stroke={strokeColor}
|
||||
fill="transparent"
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={circumference + ' ' + circumference}
|
||||
style={{ strokeDashoffset, transition: 'stroke-dashoffset 0.5s ease 0s' }}
|
||||
r={normalizedRadius}
|
||||
cx={radius}
|
||||
cy={radius}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dy=".3em"
|
||||
fill="#1a1f2b"
|
||||
fontSize="16px"
|
||||
fontWeight="bold"
|
||||
style={{ transform: 'rotate(90deg)', transformOrigin: 'center' }}
|
||||
>
|
||||
{percent}%
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default CircularProgress;
|
||||
@ -38,7 +38,6 @@ const AboutService = () => {
|
||||
<h6 className="sec-title__tagline">Welcome to Your Next Big Opportunity</h6>
|
||||
<h2 className="sec-title__title">Why Join Metatroncube Software Solution?</h2>
|
||||
</div>
|
||||
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||
<p className="section-desc mb-2">
|
||||
<b>Be part of a dynamic team where innovation, growth, and impact come together.</b>
|
||||
</p>
|
||||
@ -56,7 +55,7 @@ const AboutService = () => {
|
||||
</div>
|
||||
<div className="bullet-item d-flex align-items-center">
|
||||
|
||||
<p>Here We believe in fostering a culture where every voice matters. Whether you’re a problem-solver, visionary, or tech wizard, there’s a place for you here to grow and make a real impact.</p>
|
||||
<p>Here, we believe in fostering a culture where every voice matters. Whether you’re a problem-solver, visionary, or tech wizard, there’s a place for you here to grow and make a real impact.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,7 +38,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
||||
<ul className="list-unstyled service-sidebar__nav">
|
||||
{ourServices.slice(0, 7).map((item) => (
|
||||
<li key={item.id} className={item.slug === service.slug ? "active" : ""}>
|
||||
<Link href={`/services-digital-solutions/${item.slug}`}>
|
||||
<Link href={`/service/${item.slug}`}>
|
||||
{item.title}
|
||||
<i className="fa-solid fa-chevron-right"></i>
|
||||
</Link>
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
import Link from 'next/link';
|
||||
import React, { useState } from 'react';
|
||||
import GsapReveal from '@/components/common/GsapReveal';
|
||||
import CircularProgress from '@/components/common/CircularProgress/CircularProgress';
|
||||
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
|
||||
|
||||
const About = () => {
|
||||
|
||||
@ -68,7 +68,7 @@ const BrandSlider = () => {
|
||||
<div className="col-lg-8 m-auto text-center">
|
||||
<div className="brand-header heading2 text-center">
|
||||
<GsapReveal y={20}>
|
||||
<h5><span><img src="/favicon.ico" alt="" /></span>Our Partners</h5>
|
||||
<h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Partners</h5>
|
||||
</GsapReveal>
|
||||
<div className="space24"></div>
|
||||
<GsapReveal y={20} delay={0.2}>
|
||||
@ -76,7 +76,7 @@ const BrandSlider = () => {
|
||||
</GsapReveal>
|
||||
<div className="space16"></div>
|
||||
<GsapReveal y={20} delay={0.3}>
|
||||
<p data-aos="fade-up" data-aos-duration="800">
|
||||
<p>
|
||||
From startups to enterprise clients, businesses trust us to build scalable and performance-driven websites.
|
||||
</p>
|
||||
</GsapReveal>
|
||||
|
||||
@ -54,13 +54,13 @@ export const BlogData = [
|
||||
|
||||
<div class=container>
|
||||
<ul class="ml-4 mb-4">
|
||||
<li>Internal linking to your services like <a href="/services-digital-solutions/search-engine-optimization-seo-content-writing">SEO Content Writing</a></li>
|
||||
<li>Internal linking to your services like <a href="/service/search-engine-optimization-seo-content-writing">SEO Content Writing</a></li>
|
||||
<li>Creating shareable infographics and videos</li>
|
||||
<li>Adding strong Call-to-Actions (CTAs)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p class="mb-30">A good user experience is also crucial. Leverage our <a href="/services-digital-solutions/ui-ux-designing">UI/UX Designing</a> service to make your content visually appealing and user-friendly.</p>
|
||||
<p class="mb-30">A good user experience is also crucial. Leverage our <a href="/service/ui-ux-designing">UI/UX Designing</a> service to make your content visually appealing and user-friendly.</p>
|
||||
|
||||
<h4>4. Leverage Trending Topics and Hashtags</h4>
|
||||
|
||||
@ -79,7 +79,7 @@ export const BlogData = [
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>Enhance your content with custom apps or websites that support these trends. Explore our<a href="/services-digital-solutions/website-development-company"> Website Development</a> and <a href="/services-digital-solutions/mobile-application-development"> Mobile Application Development</a> services for scalable digital solutions.
|
||||
<p>Enhance your content with custom apps or websites that support these trends. Explore our<a href="/service/website-development-company"> Website Development</a> and <a href="/service/mobile-application-development"> Mobile Application Development</a> services for scalable digital solutions.
|
||||
</p>
|
||||
|
||||
|
||||
@ -105,7 +105,7 @@ export const BlogData = [
|
||||
|
||||
<p>Creating viral content is a strategic process that involves understanding your audience, crafting emotional stories, optimizing for SEO, leveraging trends, and engaging consistently. By implementing these tips, your brand can generate higher engagement and expand its reach across digital platforms.</p>
|
||||
|
||||
<p>Ready to take your content to the next level? Metatroncube Software Solution offers a complete range of services from <a href="/services-digital-solutions/digital-marketing-agency-in-canada"> Digital Marketing</a>, <a href="/services-digital-solutions/graphic-designing-company">Graphic Designing</a>, <a href="/services-digital-solutions/search-engine-optimization-seo-content-writing">SEO Content Writing</a>, <a href="/services-digital-solutions/ui-ux-designing">UI/UX Design</a>, to <a href="/services-digital-solutions/website-development-company"> Website and Mobile App Development.</a></p>
|
||||
<p>Ready to take your content to the next level? Metatroncube Software Solution offers a complete range of services from <a href="/service/digital-marketing-agency-in-canada"> Digital Marketing</a>, <a href="/service/graphic-designing-company">Graphic Designing</a>, <a href="/service/search-engine-optimization-seo-content-writing">SEO Content Writing</a>, <a href="/service/ui-ux-designing">UI/UX Design</a>, to <a href="/service/website-development-company"> Website and Mobile App Development.</a></p>
|
||||
|
||||
<p>Let us help you create viral content that not only drives engagement but also grows your brand online.</p>
|
||||
|
||||
@ -143,7 +143,7 @@ export const BlogData = [
|
||||
title: "Instagram vs Facebook Choosing the Right Platform for Your Business",
|
||||
image: "/assets/images/blog/blog-cards/blog-2.webp",
|
||||
big_image: "/assets/images/blog/blog-details/blog-large-2.webp",
|
||||
date: "FEBURUARY 27, 2025",
|
||||
date: "FEBRUARY 27, 2025",
|
||||
authorName: "Admin",
|
||||
"category": "Marketing Strategy",
|
||||
slug: "instagram-vs-facebook-choosing-the-right-platform-for-your-business",
|
||||
@ -267,12 +267,12 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
<p>At Metatron Cube Solutions, we specialize in: </p>
|
||||
|
||||
<div class=container>
|
||||
<li><a href="/services-digital-solutions/digital-marketing-agency-in-canada">Digital Marketing in Canada</a></li>
|
||||
<li><a href="/services-digital-solutions/website-development-company">Website Development Services</a></li>
|
||||
<li><a href="/services-digital-solutions/search-engine-optimization-seo-content-writing">SEO & Content Writing</a></li>
|
||||
<li><a href="/service/digital-marketing-agency-in-canada">Digital Marketing in Canada</a></li>
|
||||
<li><a href="/service/website-development-company">Website Development Services</a></li>
|
||||
<li><a href="/service/search-engine-optimization-seo-content-writing">SEO & Content Writing</a></li>
|
||||
<li><a href="/">Mobile App Development</a></li>
|
||||
<li><a href="/services-digital-solutions/graphic-designing-company">Graphic Designing & Branding</a></li>
|
||||
<li><a href="/services-digital-solutions/ui-ux-designing">UI/UX Designing</a></li>
|
||||
<li><a href="/service/graphic-designing-company">Graphic Designing & Branding</a></li>
|
||||
<li><a href="/service/ui-ux-designing">UI/UX Designing</a></li>
|
||||
</div>
|
||||
|
||||
|
||||
@ -513,7 +513,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
|
||||
<p><b>1. Backlink Building</b></p>
|
||||
<ol>
|
||||
<p>Acquiring high-quality backlinks from authoritative websites. For example, linking to a trusted <a href="/services-digital-solutions/graphic-designing-company">graphic designing</a> company can improve credibility.</p>
|
||||
<p>Acquiring high-quality backlinks from authoritative websites. For example, linking to a trusted <a href="/service/graphic-designing-company">graphic designing</a> company can improve credibility.</p>
|
||||
</ol>
|
||||
|
||||
|
||||
@ -1002,7 +1002,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
<h4 class="mt-40 mb-0">Why Digital Marketing Matters for Small Businesses</h4>
|
||||
|
||||
<p class="mb-40 mt-10">Digital marketing is vital because it equalizes the playing field for small businesses and huge corporations. Traditional marketing strategies, such as billboards and print adverts, can be costly and do not always provide quantitative results. <a
|
||||
href="https://metatroncubesolutions.com/services-digital-solutions/digital-marketing-agency-in-canada/"
|
||||
href="https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@ -1029,7 +1029,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
<p><b>1. Search Engine Optimization (SEO)</b></p>
|
||||
|
||||
<p class="mb-40 mt-10"><a
|
||||
href="https://metatroncubesolutions.com/services-digital-solutions/search-engine-optimization-seo-content-writing/"
|
||||
href="https://metatroncubesolutions.com/service/search-engine-optimization-seo-content-writing/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@ -1051,7 +1051,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
<p><b>2. Content Marketing</b></p>
|
||||
|
||||
<p class="mb-40 mt-10">When it comes to digital marketing, content is crucial. Providing helpful and relevant content is crucial for building trust with your audience. <a
|
||||
href="https://metatroncubesolutions.com/services-digital-solutions/search-engine-optimization-seo-content-writing/"
|
||||
href="https://metatroncubesolutions.com/service/search-engine-optimization-seo-content-writing/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@ -1373,8 +1373,8 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
industries and agencies across the world. Search engine optimization (search engine marketing) and net
|
||||
improvement had been converted via means of synthetic intelligence (AI), permitting organizations to create
|
||||
smarter, extra green and user-pleasant virtual experiences. This blog explores how AI is revolutionizing these
|
||||
fields, with a particular focus on how the Best <a href="/services-digital-solutions/website-development-company">Web Design Agency & Web Development
|
||||
Company at MetatronCube</a> and the <a href="/services-digital-solutions/search-engine-optimization-seo-content-writing">Best SEO & Content Writing Company in
|
||||
fields, with a particular focus on how the Best <a href="/service/website-development-company">Web Design Agency & Web Development
|
||||
Company at MetatronCube</a> and the <a href="/service/search-engine-optimization-seo-content-writing">Best SEO & Content Writing Company in
|
||||
Waterloo, Canada</a> are leading the charge.</p>
|
||||
|
||||
|
||||
@ -1446,7 +1446,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
like Grammarly and Clear scope assist content material writers optimize their content material for
|
||||
search engine marketing. These gear examine the key phrases, content material, and universal shape of
|
||||
the content material so that you can optimize it for search engines like google and yahoo. Best search
|
||||
engine marketing and <a href="/services-digital-solutions/search-engine-optimization-seo-content-writing">Content Writing Company in Waterloo at
|
||||
engine marketing and <a href="/service/search-engine-optimization-seo-content-writing">Content Writing Company in Waterloo at
|
||||
MetatronCube</a> makes use of those AI-powered gear to create content material that isn’t simplest
|
||||
good, however additionally applicable on your audience.
|
||||
|
||||
@ -1496,7 +1496,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
<li>Voice Search Optimization</li>
|
||||
<li>Predictive search engine marketing Analytics</li>
|
||||
<li>AI Content Optimization</li>
|
||||
<li><a href="/services-digital-solutions/digital-marketing-agency-in-canada">Digital Marketing Trends</a></li>
|
||||
<li><a href="/service/digital-marketing-agency-in-canada">Digital Marketing Trends</a></li>
|
||||
<li>search engine marketing Best Practices</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -1517,8 +1517,8 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
<p class="mb-40 mt-10">AI is completely changing the landscape of search engine marketing and online optimization.
|
||||
AI is helping businesses build more effective, user-friendly, and potent virtual experiences by automating
|
||||
layout methods and enhancing content material procedures. At the forefront of this change are businesses like <a
|
||||
href="/services-digital-solutions/website-development-company">Best Web Design Agency & Web Development Company in Canada at Metatroncube</a> and
|
||||
<a href="/services-digital-solutions/search-engine-optimization-seo-content-writing">Best search engine marketing and Content Writing Company in Waterloo, Canada –
|
||||
href="/service/website-development-company">Best Web Design Agency & Web Development Company in Canada at Metatroncube</a> and
|
||||
<a href="/service/search-engine-optimization-seo-content-writing">Best search engine marketing and Content Writing Company in Waterloo, Canada –
|
||||
Metatroncube</a>, that use AI to provide their clients with contemporary solutions.</p>
|
||||
|
||||
<p class="mb-40 mt-10">Businesses using AI technology will not only stay ahead of the competition but also attract
|
||||
@ -1636,7 +1636,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
Metatroncube to deliver outstanding results.</p>
|
||||
|
||||
|
||||
<p class="mb-40 mt-10">For more information, visit the Top <a href="/services-digital-solutions/digital-marketing-agency-in-canada">digital marketing agency in
|
||||
<p class="mb-40 mt-10">For more information, visit the Top <a href="/service/digital-marketing-agency-in-canada">digital marketing agency in
|
||||
Canada.</a></p>
|
||||
|
||||
|
||||
@ -1688,7 +1688,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
<h4>Content Marketing and Creation</h4>
|
||||
|
||||
|
||||
<p class="mb-40 mt-10">One of the key services offered by Metatroncube is <a href="/services-digital-solutions/search-engine-optimization-seo-content-writing">content
|
||||
<p class="mb-40 mt-10">One of the key services offered by Metatroncube is <a href="/service/search-engine-optimization-seo-content-writing">content
|
||||
marketing</a>. They understand the importance of high-quality, engaging content that resonates with the
|
||||
target audience. Their content creation process includes meticulous <b>content optimization</b> and <b>SEO
|
||||
content</b> strategies, ensuring maximum visibility and engagement. Whether it’s blog posts, social media
|
||||
@ -1724,7 +1724,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
<p class="mb-40 mt-10"><b>SEO optimization </b>is at the core of Metatroncube’s digital marketing services. Their
|
||||
team of experts employs advanced <b>SEO strategies</b> to enhance website visibility and drive organic traffic.
|
||||
From keyword research to <b>SEO management</b>, Metatroncube ensures that clients’ websites rank high on search
|
||||
engine results pages (SERPs). They are recognized as one of the <a href="/services-digital-solutions/search-engine-optimization-seo-content-writing">best SEO services
|
||||
engine results pages (SERPs). They are recognized as one of the <a href="/service/search-engine-optimization-seo-content-writing">best SEO services
|
||||
providers in Canada</a>.</p>
|
||||
|
||||
|
||||
@ -1748,7 +1748,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
|
||||
|
||||
<p class="mb-40 mt-10">A strong online presence starts with a well-designed website. Metatroncube excels in <a
|
||||
href="/services-digital-solutions/website-development-company">web design and web development</a> , creating visually appealing and highly
|
||||
href="/service/website-development-company">web design and web development</a> , creating visually appealing and highly
|
||||
functional websites. Their <b>web services</b> include <b>web optimization</b> and <b>web content</b>
|
||||
management, ensuring that clients’ websites are not only attractive but also user-friendly and optimized for
|
||||
search engines.</p>
|
||||
@ -1934,7 +1934,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
|
||||
|
||||
<p>The digital marketplace is rapidly evolving, and as we look to 2024, mobile commerce (m-commerce) is poised to
|
||||
take an even more significant leap forward. With the advent of advanced <a href="/services-digital-solutions/website-development-company">web
|
||||
take an even more significant leap forward. With the advent of advanced <a href="/service/website-development-company">web
|
||||
development</a>, robust <a href="https://aws.amazon.com/">hosting services</a>, and comprehensive web
|
||||
solutions, the future is vibrant for both consumers and businesses, particularly for small business web
|
||||
development, which is emerging as a driving force in the industry.</p>
|
||||
@ -1969,12 +1969,12 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
|
||||
<p class="mb-40 mt-10"><b>What are the key issues with e-commerce and M-commerce?</b> Despite advancements,
|
||||
e-commerce and m-commerce must navigate challenges such as enhancing cyber security, optimizing for
|
||||
ever-changing <a href="/services-digital-solutions/search-engine-optimization-seo-content-writing">SEO</a> algorithms, and integrating emerging technologies.
|
||||
ever-changing <a href="/service/search-engine-optimization-seo-content-writing">SEO</a> algorithms, and integrating emerging technologies.
|
||||
Companies must also address the digital divide, ensuring equitable access to their platforms.</p>
|
||||
|
||||
|
||||
<p class="mb-40 mt-10"><b>Adapting to the Changes Looking towards 2024</b>, businesses must invest in cutting-edge
|
||||
<a href="/services-digital-solutions/website-development-company">web & app development</a> to stay competitive. This includes ensuring websites and
|
||||
<a href="/service/website-development-company">web & app development</a> to stay competitive. This includes ensuring websites and
|
||||
applications are optimized for mobile-first indexing and leveraging hosting services that offer superior
|
||||
performance and security. For small businesses, web development will be more critical than ever, providing a
|
||||
gateway to global markets and leveling the playing field with larger corporations.</p>
|
||||
@ -1982,7 +1982,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
|
||||
<p class="mb-40 mt-10"><b>Conclusion</b> In conclusion, the trajectory for m-commerce is set towards a more
|
||||
interactive, secure, and user-oriented future. As we embrace 2024, the integration of <a
|
||||
href="/services-digital-solutions/digital-marketing-agency-in-canada">digital marketing</a> and <a href="/services-digital-solutions/graphic-designing-company">graphic design services</a>
|
||||
href="/service/digital-marketing-agency-in-canada">digital marketing</a> and <a href="/service/graphic-designing-company">graphic design services</a>
|
||||
with web & app development will be the linchpin for success in this rapidly expanding digital ecosystem. For
|
||||
those ready to innovate and adapt, the opportunities are boundless. Discover more about this evolution on our <a
|
||||
href="/">homepage</a>.
|
||||
@ -2227,7 +2227,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
<p>Here are nine essential Google tools that will elevate your SEO and online marketing strategies:</p>
|
||||
|
||||
<h4>1. Google Search Console for SEO Performance</h4>
|
||||
<p>Google Look Support could be a must have gadget for any commercial undertaking proprietor looking to upgrade their look motor optimization execution. It tracks web page impressions, key-word rankings, and web location issues, supporting you to secure how your web web page is showing up in search for motor conclusion result pages (SERPs). This gadget gives total bits of knowledge that help you to clear up capability issues prior than they adversely have an impact on your rankings.</p>
|
||||
<p>Google Search Console could be a must have gadget for any commercial undertaking proprietor looking to upgrade their search engine optimization performance. It tracks web page impressions, keyword rankings, and web location issues, supporting you to secure how your web page is showing up in search engine result pages (SERPs). This tool provides total bits of knowledge that help you to clear up capability issues prior than they adversely have an impact on your rankings.</p>
|
||||
<p><b>Key features include:</b></p>
|
||||
<ul class="ml-4 mb-4">
|
||||
<li>Website health: Monitor issues like malware attacks or content removal.</li>
|
||||
@ -2358,7 +2358,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
|
||||
<h4>2. Not Having a Clear Social Media Strategy</h4>
|
||||
<p>Many small businesses think simply having <a
|
||||
href="https://metatroncubesolutions.com/services-digital-solutions/digital-marketing-agency-in-canada/"
|
||||
href="https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@ -2374,7 +2374,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
|
||||
<h4>3. Overlooking the Power of Content Marketing</h4>
|
||||
<p>Many small businesses fail to understand the value of <a
|
||||
href="https://metatroncubesolutions.com/services-digital-solutions/search-engine-optimization-seo-content-writing/"
|
||||
href="https://metatroncubesolutions.com/service/search-engine-optimization-seo-content-writing/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@ -2402,7 +2402,7 @@ At Metatron Cube Solutions, we help businesses make data-driven marketing decisi
|
||||
|
||||
<h4>5. Neglecting Mobile Optimization</h4>
|
||||
<p>With more people accessing the internet via smartphones, neglecting <a
|
||||
href="https://metatroncubesolutions.com/services-digital-solutions/mobile-application-development/"
|
||||
href="https://metatroncubesolutions.com/service/mobile-application-development/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
@ -3404,7 +3404,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
|
||||
<p>
|
||||
Learn more about our SEO services:
|
||||
<a href="/services-digital-solutions/search-engine-optimization-seo-content-writing"
|
||||
<a href="/service/search-engine-optimization-seo-content-writing"
|
||||
style="color: blue; text-decoration: underline;">
|
||||
Click here
|
||||
</a>
|
||||
@ -3537,7 +3537,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
|
||||
<li>
|
||||
Learn more about digital marketing best practices in Canada:
|
||||
<a href="/services-digital-solutions/digital-marketing-agency-in-canada/"
|
||||
<a href="/service/digital-marketing-agency-in-canada/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style="color: blue; text-decoration: underline;">
|
||||
@ -5007,7 +5007,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
<li>Show different creatives for morning vs. evening classes</li>
|
||||
<li>Automatically shift budget to the best-performing ad sets</li>
|
||||
</ul>
|
||||
<p>You can explore this more under their <a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">Services page</a>.</p>
|
||||
<p>You can explore this more under their <a href="https://metatroncubesolutions.com/service/" target="_blank">Services page</a>.</p>
|
||||
|
||||
<h4>2. AI Tools for Small Businesses: Content & Social Media</h4>
|
||||
<p>If you’ve ever sat at a desk on a cold January afternoon staring at a blank Instagram caption, trust me, you’re not alone.</p>
|
||||
@ -6299,7 +6299,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
|
||||
<p class="mb-2"><b>3. Launch, then refine</b></p>
|
||||
<p>They’ll manage the day-to-day—bids, creatives, keywords—so you can run the business.</p>
|
||||
<p>To learn more about their PPC and digital marketing services or to reach their contact page, visit <a href="https://metatroncubesolutions.com/services-digital-solutions/digital-marketing-agency-in-canada/" target="_blank">Metatroncube Software Solution – Digital Marketing & PPC</a>.</p>
|
||||
<p>To learn more about their PPC and digital marketing services or to reach their contact page, visit <a href="https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/" target="_blank">Metatroncube Software Solution – Digital Marketing & PPC</a>.</p>
|
||||
|
||||
<h4>Final Thought</h4>
|
||||
<p>If you’re in Waterloo or nearby Kitchener and still debating Facebook vs Google Ads, you don’t have to guess. Reach out to Metatroncube Software Solution, a local digital advertising agency in Waterloo, for a straightforward conversation about your budget, goals, and best next step.</p>
|
||||
@ -6412,7 +6412,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
<h4>Meet Metatroncube Software Solution: Local PPC Experts in Waterloo</h4>
|
||||
<p>Metatroncube Software Solution positions itself as a data-driven PPC agency in Waterloo with a clear focus on strategy, tracking, and ROI. They’re not trying to be everything to everyone—they lean hard into performance-focused paid ads.</p>
|
||||
<p>You can explore their services here:</p>
|
||||
<p><a href="https://metatroncubesolutions.com/services-digital-solutions/digital-marketing-agency-in-canada/" target="_blank">Metatroncube Software Solution – PPC & Digital Marketing Services</a></p>
|
||||
<p><a href="https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/" target="_blank">Metatroncube Software Solution – PPC & Digital Marketing Services</a></p>
|
||||
<p>From what they share publicly and how they talk about their work, a few things stand out:</p>
|
||||
<ul class="ml-4 mb-4">
|
||||
<li>They offer structured PPC management services in Waterloo across Google Ads and other paid platforms.</li>
|
||||
@ -6731,7 +6731,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
<li>We stay close. Regular check-ins, clear reporting, and honest conversations. No “black box” marketing.</li>
|
||||
</ul>
|
||||
<p>You can get a feel for how we work on our website:</p>
|
||||
<p><a href="https://metatroncubesolutions.com/services-digital-solutions/digital-marketing-agency-in-canada/" target="_blank">Metatroncube Software Solution – Digital & Social Services</a></p>
|
||||
<p><a href="https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/" target="_blank">Metatroncube Software Solution – Digital & Social Services</a></p>
|
||||
|
||||
<h4>Step 1 – Clarifying Your Brand and Local Audience</h4>
|
||||
<p>You can’t grow the right followers if you don’t know who you’re talking to.</p>
|
||||
@ -7285,7 +7285,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
<li>You’ll see which campaigns stay and which we recommend pausing</li>
|
||||
<li>We’ll explain why, in language you can understand</li>
|
||||
</ul>
|
||||
<p>You can learn more about our performance-focused approach by visiting the <a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">Metatroncube Software Solution services section</a>.</p>
|
||||
<p>You can learn more about our performance-focused approach by visiting the <a href="https://metatroncubesolutions.com/service/" target="_blank">Metatroncube Software Solution services section</a>.</p>
|
||||
|
||||
<p class="mb-2"><b>3. Partnership, Not Just “Vendors”</b></p>
|
||||
<p>We know many companies in Waterloo, Toronto, and across Canada have been burned by agencies that send pretty PDFs but no real insight.</p>
|
||||
@ -7427,7 +7427,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
<li>Content and email flows tailored using AI insights</li>
|
||||
</ul>
|
||||
<p>You can explore their services here:<br>
|
||||
<a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">Metatroncube Software Solution – Services</a></p>
|
||||
<a href="https://metatroncubesolutions.com/service/" target="_blank">Metatroncube Software Solution – Services</a></p>
|
||||
|
||||
<h4>Who Is Metatroncube Software Solution Waterloo?</h4>
|
||||
<p>Metatroncube Software Solution is a Waterloo-based digital marketing and automation agency that leans heavily on AI and data to drive results. They work with:</p>
|
||||
@ -7490,7 +7490,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
</ul>
|
||||
<p class="mb-2">MetatronCube can help set all this up using AI-driven workflows, so your marketing runs even when you’re busy on-site, in the office, or serving customers.</p>
|
||||
<p>You can read more about their digital marketing and automation focus here:<br>
|
||||
<a href="https://metatroncubesolutions.com/services-digital-solutions/digital-marketing-agency-in-canada/" target="_blank">Digital Marketing at MetatronCube</a></p>
|
||||
<a href="https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/" target="_blank">Digital Marketing at MetatronCube</a></p>
|
||||
|
||||
<h4>Real-World Scenarios: How Waterloo Businesses Can Use AI the Right Way</h4>
|
||||
<p>To make this concrete, here are a few realistic examples of AI-powered marketing solutions in Waterloo in action.</p>
|
||||
@ -7788,7 +7788,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
<li>Which campaigns and keywords are driving the best ROI</li>
|
||||
<li>Trends over time (month-to-month performance)</li>
|
||||
</ul>
|
||||
<p>Our <a href="https://metatroncubesolutions.com/services-digital-solutions/digital-marketing-agency-in-canada/" target="_blank">digital marketing</a> and <a href="https://metatroncubesolutions.com/services-digital-solutions/website-development-company/" target="_blank">web development</a> teams work together so you see the full picture in one place.</p>
|
||||
<p>Our <a href="https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/" target="_blank">digital marketing</a> and <a href="https://metatroncubesolutions.com/service/website-development-company/" target="_blank">web development</a> teams work together so you see the full picture in one place.</p>
|
||||
|
||||
<h4>Tracking ROI from Specific Marketing Campaigns in Waterloo</h4>
|
||||
<p>Let's talk campaigns.</p>
|
||||
@ -7892,7 +7892,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
</ul>
|
||||
<p>You'll also find us listed through local channels such as Google Maps, and many Waterloo businesses discover partners like us through Canadian directories such as YellowPages.ca, Canada411, and Yelp.ca when they're looking to track marketing ROI in Canada more seriously.</p>
|
||||
<p>If you'd like to explore this, start with a simple marketing performance review. No pressure, no long-term commitment—just clarity.</p>
|
||||
<p>You can learn more about our <a href="https://metatroncubesolutions.com/" target="_blank">analytics</a>, <a href="https://metatroncubesolutions.com/services-digital-solutions/digital-marketing-agency-in-canada/" target="_blank">digital marketing</a>, and <a href="https://metatroncubesolutions.com/services-digital-solutions/website-development-company/" target="_blank">web development</a> services on our site.</p>
|
||||
<p>You can learn more about our <a href="https://metatroncubesolutions.com/" target="_blank">analytics</a>, <a href="https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/" target="_blank">digital marketing</a>, and <a href="https://metatroncubesolutions.com/service/website-development-company/" target="_blank">web development</a> services on our site.</p>
|
||||
|
||||
<h4>Next Steps: Getting ROI Tracking for Marketing Campaigns in Waterloo Set Up</h4>
|
||||
<p>If you're still reading, chances are you're serious about getting a handle on your numbers.</p>
|
||||
@ -7984,7 +7984,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
|
||||
<h4>How Metatroncube Software Solution Delivers End-to-End Social Media Management</h4>
|
||||
<p>This is where Metatroncube Software Solution shines. Our full-service model covers the entire lifecycle, ensuring seamless execution. We don't just manage—we partner, providing transparent reporting and adjustments based on data.</p>
|
||||
<p>From kickoff calls to monthly insights, every step builds momentum. Curious about our <a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">digital marketing services</a>? They're the backbone of our social strategies. Let's dive into the stages.</p>
|
||||
<p>From kickoff calls to monthly insights, every step builds momentum. Curious about our <a href="https://metatroncubesolutions.com/service/" target="_blank">digital marketing services</a>? They're the backbone of our social strategies. Let's dive into the stages.</p>
|
||||
|
||||
<h4>Stage 1: Strategy Development – Your Roadmap to Success</h4>
|
||||
<p>It all starts with strategy. We audit your current presence, analyze competitors, and align with business goals. For a Canadian startup, this means pinpointing platforms like LinkedIn for B2B or Instagram for visuals.</p>
|
||||
@ -8213,7 +8213,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
<h4>How MetatronCube Handles Top-Notch SEO Services</h4>
|
||||
<p>SEO isn't rocket science, but it takes know-how. MetatronCube starts with audits, keyword research targeting [Waterloo SEO services], and on-page tweaks. They build backlinks from local directories like the Waterloo Region Chamber of Commerce.</p>
|
||||
<p>For a real-world example, imagine a bakery on Erb Street West struggling with foot traffic. MetatronCube revamped their site, optimized for local SEO, and boom—top spots for "Waterloo cupcakes." Check their process on
|
||||
<a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">Services</a>.</p>
|
||||
<a href="https://metatroncubesolutions.com/service/" target="_blank">Services</a>.</p>
|
||||
<p>They track everything with tools like Google Analytics, adjusting for Waterloo's seasonal spikes, say during Velocity Garage events. Honest advice: Pair this with quality content, and watch organic leads roll in.</p>
|
||||
|
||||
<h4>Mastering PPC Management as Google Ads Experts</h4>
|
||||
@ -8240,7 +8240,7 @@ AI is not replacing SEO—it’s evolving it. The opportunity for brands that mo
|
||||
<p>Start small: Allocate 60% budget to SEO for longevity, 40% PPC for tests. Track local metrics like "near me" searches, big in Waterloo's mobile-heavy crowd.</p>
|
||||
<p>Avoid pitfalls like ignoring mobile optimization—over 60% of local searches are mobile here. MetatronCube advises A/B testing ads with regional slang for better engagement.</p>
|
||||
<p>Ready to dive deeper? Explore their
|
||||
<a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">digital solutions page</a>.</p>
|
||||
<a href="https://metatroncubesolutions.com/service/" target="_blank">digital solutions page</a>.</p>
|
||||
|
||||
<h4>Your Next Step: Book a Free Chat</h4>
|
||||
<p>Feeling pumped? Waterloo business owners, don't let competitors snag those Google spots. Call MetatronCube at +1-647-679-7651 or message via their
|
||||
@ -8315,7 +8315,7 @@ info@metatroncubesolutions.com
|
||||
<h4>Why Waterloo Small Businesses Need Paid Social Media Marketing</h4>
|
||||
<p>In Waterloo, small businesses often rely on social media ads for quick visibility amid the University of Waterloo crowds and Innovation District hustle. Tight budgets mean no room for wasted clicks, yet slow organic growth leaves shops near Laurel Creek feeling invisible. Paid social media marketing flips that script—targeting locals searching "coffee near me" or "gifts Uptown Waterloo."</p>
|
||||
<p>Metatroncube Software Solution pushes a mix of platforms because Waterloo folks love scrolling Instagram during commutes on the ION light rail and LinkedIn for B2B during Velocity events. Stats show small businesses using these ads see 2-3x engagement over posts alone. You might agree: Why post into the void when targeted ads deliver customers to your door?</p>
|
||||
<p>Unlike generic ad agencies in Waterloo, MetatronCube tailors to local buying behavior—mobile-heavy, impulse-driven, community-focused. Check their digital marketing approach at <a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">Services</a>.</p>
|
||||
<p>Unlike generic ad agencies in Waterloo, MetatronCube tailors to local buying behavior—mobile-heavy, impulse-driven, community-focused. Check their digital marketing approach at <a href="https://metatroncubesolutions.com/service/" target="_blank">Services</a>.</p>
|
||||
|
||||
<h4>Facebook Ads for Small Businesses: The Everyday Hero</h4>
|
||||
<p>Facebook remains king for Waterloo's diverse crowd, from families in Westmount to students near Wilfrid Laurier. MetatronCube recommends carousel ads first—these swipeable image sets showcase multiple products, perfect for a bakery highlighting daily specials. Run them as traffic or conversion ads to drive foot traffic.</p>
|
||||
@ -8325,7 +8325,7 @@ info@metatroncubesolutions.com
|
||||
<h4>Instagram Ads: Visual Gold for Local Shops</h4>
|
||||
<p>Shops near Uptown Waterloo usually perform better with Instagram ads—think Stories and Reels that pop on feeds. MetatronCube loves these for small businesses because visuals sell fast to image-loving locals browsing during lunch breaks.</p>
|
||||
<p>Stories ads with swipe-up links send users straight to your site for "flash sales." A clothing store in the Waterloo Market area used them, boosting weekend visits by 40%. Reels ads, with trending audio, amplify reach—MetatronCube crafts ones mimicking local vibes, like festival prep near the Waterloo Public Library.</p>
|
||||
<p>Instagram Shopping ads tag products directly, ideal for e-comm hybrids. Unlike broad Toronto agencies, MetatronCube geo-fences to neighborhoods, ensuring ads hit King Street walkers. Explore more on their <a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">services page</a>.</p>
|
||||
<p>Instagram Shopping ads tag products directly, ideal for e-comm hybrids. Unlike broad Toronto agencies, MetatronCube geo-fences to neighborhoods, ensuring ads hit King Street walkers. Explore more on their <a href="https://metatroncubesolutions.com/service/" target="_blank">services page</a>.</p>
|
||||
|
||||
<h4>LinkedIn Ads: B2B Power for Waterloo Tech Scene</h4>
|
||||
<p>Waterloo's tech corridor screams LinkedIn. MetatronCube recommends sponsored content for service pros—like consultants targeting "startup founders Innovation District." These in-feed posts blend seamlessly, driving profile visits or messages.</p>
|
||||
@ -8945,7 +8945,7 @@ info@metatroncubesolutions.com
|
||||
<li>Alignment with business goals: not just "more followers," but more sales or bookings</li>
|
||||
</ul>
|
||||
<p>You can explore more of what they offer right on the<br>
|
||||
<a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">Metatroncube Software Solution website</a>.</p>
|
||||
<a href="https://metatroncubesolutions.com/service/" target="_blank">Metatroncube Software Solution website</a>.</p>
|
||||
|
||||
<h4>Local Proof: A Few Waterloo-Style Scenarios</h4>
|
||||
<p>Here are a few realistic examples of how Social Media Marketing in Waterloo, ON can look when done right:</p>
|
||||
@ -9478,7 +9478,7 @@ info@metatroncubesolutions.com
|
||||
<li>Integrating analytics so you can see what's working</li>
|
||||
</ul>
|
||||
<p>In a region where customers compare several options before choosing a dentist, contractor, or café, that quiet work often determines who gets the call.</p>
|
||||
<p>If you want to see a broader list of what MetatronCube does around design, content, and online marketing, you can check out: <a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">Metatroncube Software Solution – Services</a></p>
|
||||
<p>If you want to see a broader list of what MetatronCube does around design, content, and online marketing, you can check out: <a href="https://metatroncubesolutions.com/service/" target="_blank">Metatroncube Software Solution – Services</a></p>
|
||||
|
||||
<h4>Common Website Problems Waterloo Businesses Bring to MetatronCube</h4>
|
||||
<p>From conversations with local owners, a few patterns come up again and again.</p>
|
||||
@ -9843,7 +9843,7 @@ info@metatroncubesolutions.com
|
||||
// <li>What you (or your team) can handle</li>
|
||||
// <li>What you might want help with</li>
|
||||
// </ul>
|
||||
// <p>If you'd like to see the broader range of what we offer beyond audits, you can take a peek here: <a href="https://metatroncubesolutions.com/services-digital-solutions/" target="_blank">Metatroncube Software Solution – Services</a></p>
|
||||
// <p>If you'd like to see the broader range of what we offer beyond audits, you can take a peek here: <a href="https://metatroncubesolutions.com/service/" target="_blank">Metatroncube Software Solution – Services</a></p>
|
||||
|
||||
// <h4>Is a Website Audit Worth It for a Small Business Budget?</h4>
|
||||
// <p>Let's be honest: every dollar counts, especially for local owners.</p>
|
||||
@ -10719,19 +10719,19 @@ info@metatroncubesolutions.com
|
||||
<h4>How Custom Software Accelerates Scaling</h4>
|
||||
|
||||
<h4>It Fits Your Workflows From Day One</h4>
|
||||
<p>Off-the-shelf tools make your team adapt to the software. Custom software works the other way around. Every feature, every screen, every process is there because it serves a specific purpose in your business. Less time spent working around limitations means more time on work that actually matters. Our <a href="https://metatroncubesolutions.com/services-digital-solutions/website-development-company/" target="_blank">web development services</a> start with a proper discovery phase for exactly this reason — we understand your business before we write a single line of code.</p>
|
||||
<p>Off-the-shelf tools make your team adapt to the software. Custom software works the other way around. Every feature, every screen, every process is there because it serves a specific purpose in your business. Less time spent working around limitations means more time on work that actually matters. Our <a href="https://metatroncubesolutions.com/service/website-development-company/" target="_blank">web development services</a> start with a proper discovery phase for exactly this reason — we understand your business before we write a single line of code.</p>
|
||||
|
||||
<h4>It Grows With You — Without Penalty</h4>
|
||||
<p>Custom software belongs to you. No per-seat licences, no feature gates, no vendor deciding what you can access based on your subscription tier. When your team doubles in size or your processes evolve, your system evolves with it — on your timeline, not a pricing model's.</p>
|
||||
|
||||
<h4>It Connects Your Entire Tech Stack</h4>
|
||||
<p>Most businesses run on several tools at once — CRMs, payment systems, marketing platforms, analytics. Getting these to share data reliably with off-the-shelf software usually means expensive middleware or slow manual processes. Custom software can be built to integrate cleanly with everything you use. This matters especially when you have an active <a href="https://metatroncubesolutions.com/services-digital-solutions/digital-marketing-agency-in-canada/" target="_blank">digital marketing operation</a> — unified data means better decisions and more consistent customer experiences.</p>
|
||||
<p>Most businesses run on several tools at once — CRMs, payment systems, marketing platforms, analytics. Getting these to share data reliably with off-the-shelf software usually means expensive middleware or slow manual processes. Custom software can be built to integrate cleanly with everything you use. This matters especially when you have an active <a href="https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/" target="_blank">digital marketing operation</a> — unified data means better decisions and more consistent customer experiences.</p>
|
||||
|
||||
<h4>Mobile-Ready Means Growth-Ready</h4>
|
||||
<p>More business happens on mobile every year. Field teams, customers, and sales staff all need fast, reliable access on any device. A custom mobile application built around your actual use case is a fundamentally different thing from a responsive website or a generic app. Through our <a href="https://metatroncubesolutions.com/services-digital-solutions/mobile-application-development/" target="_blank">Mobile App Development Services</a>, we build high-performance applications for both iOS and Android, designed around your specific workflows and business needs.</p>
|
||||
<p>More business happens on mobile every year. Field teams, customers, and sales staff all need fast, reliable access on any device. A custom mobile application built around your actual use case is a fundamentally different thing from a responsive website or a generic app. Through our <a href="https://metatroncubesolutions.com/service/mobile-application-development/" target="_blank">Mobile App Development Services</a>, we build high-performance applications for both iOS and Android, designed around your specific workflows and business needs.</p>
|
||||
|
||||
<h4>Custom Builds Give You Full SEO Control</h4>
|
||||
<p>Template platforms impose real constraints on technical SEO — page speed, URL structure, structured data, Core Web Vitals. A custom-built web platform removes those constraints entirely. Combined with a focused <a href="https://metatroncubesolutions.com/services-digital-solutions/search-engine-optimization-seo-content-writing/" target="_blank">SEO strategy</a>, you are in a far stronger position to rank for the searches that actually drive business. <a href="https://metatroncubesolutions.com/services-digital-solutions/ui-ux-designing/" target="_blank">Graphic Design Services</a> also ensures every customer-facing touchpoint looks as professional as it performs.</p>
|
||||
<p>Template platforms impose real constraints on technical SEO — page speed, URL structure, structured data, Core Web Vitals. A custom-built web platform removes those constraints entirely. Combined with a focused <a href="https://metatroncubesolutions.com/service/search-engine-optimization-seo-content-writing/" target="_blank">SEO strategy</a>, you are in a far stronger position to rank for the searches that actually drive business. <a href="https://metatroncubesolutions.com/service/ui-ux-designing/" target="_blank">Graphic Design Services</a> also ensures every customer-facing touchpoint looks as professional as it performs.</p>
|
||||
|
||||
<h4>What Working With Metatroncube Looks Like</h4>
|
||||
<p>We do not hand you a finished product and disappear. Every project at Metatroncube starts with understanding your business properly — your workflows, your pain points, what success actually looks like in practice. From there we design, build, test, and launch with you involved at every stage. After launch, we stay involved. Software is a living product and businesses keep changing. <a href="https://metatroncubesolutions.com/about-us/" target="_blank">Read more about how we work</a>, or come and <a href="https://metatroncubesolutions.com/contact/" target="_blank">talk to us</a> about your specific situation.</p>
|
||||
@ -10777,7 +10777,7 @@ info@metatroncubesolutions.com
|
||||
|
||||
<h4>What Custom Software Actually Means</h4>
|
||||
<p>Custom software is a digital solution — a web application, mobile app, internal tool, or automated system — designed and built specifically for one business. Not a template with your logo on it. Not a platform configured to your preferences. A system built from the ground up around how your operation actually works.</p>
|
||||
<p>At Metatroncube, we build solutions exactly like this through our <a href="https://metatroncubesolutions.com/services-digital-solutions/website-development-company/" target="_blank">Custom Web Development</a> and <a href="https://metatroncubesolutions.com/services-digital-solutions/mobile-application-development/" target="_blank">Mobile App Development services</a>, creating systems designed specifically around the way your business operates.</p>
|
||||
<p>At Metatroncube, we build solutions exactly like this through our <a href="https://metatroncubesolutions.com/service/website-development-company/" target="_blank">Custom Web Development</a> and <a href="https://metatroncubesolutions.com/service/mobile-application-development/" target="_blank">Mobile App Development services</a>, creating systems designed specifically around the way your business operates.</p>
|
||||
|
||||
<h4>The Real Benefits — No Fluff</h4>
|
||||
|
||||
@ -10796,7 +10796,7 @@ info@metatroncubesolutions.com
|
||||
<p>Off-the-shelf platforms are well-known targets for attackers because their architecture is publicly understood. A vulnerability in a popular platform affects every business using it. Custom software carries a fundamentally different risk profile. Its architecture is unique, and security measures can be designed around your specific compliance requirements rather than a generic standard — particularly important if you operate in a regulated industry or handle sensitive customer data.</p>
|
||||
|
||||
<h4>5. A Competitive Edge That Is Hard to Copy</h4>
|
||||
<p>When your competitors are using the same off-the-shelf tools, those tools are not giving anyone an advantage. Custom software changes that equation. You can build capabilities your competitors simply do not have — unique customer experiences, proprietary workflows, smarter automation. When paired with professional <a href="https://metatroncubesolutions.com/services-digital-solutions/search-engine-optimization-seo-content-writing/" target="_blank">SEO Services</a> and high-quality <a href="https://metatroncubesolutions.com/services-digital-solutions/ui-ux-designing/" target="_blank">Graphic Design Services</a>, your digital platform not only performs well but also presents a polished and consistent brand experience.</p>
|
||||
<p>When your competitors are using the same off-the-shelf tools, those tools are not giving anyone an advantage. Custom software changes that equation. You can build capabilities your competitors simply do not have — unique customer experiences, proprietary workflows, smarter automation. When paired with professional <a href="https://metatroncubesolutions.com/service/search-engine-optimization-seo-content-writing/" target="_blank">SEO Services</a> and high-quality <a href="https://metatroncubesolutions.com/service/ui-ux-designing/" target="_blank">Graphic Design Services</a>, your digital platform not only performs well but also presents a polished and consistent brand experience.</p>
|
||||
|
||||
<h4>6. A Better Experience for Your Team and Your Customers</h4>
|
||||
<p>The software your team uses every day has a real effect on productivity, morale, and how quickly new people get up to speed. The digital products your customers interact with shape how they perceive your business. Off-the-shelf tools force compromises on both fronts. Custom software gives you full control over both experiences — which matters more than most people initially expect.</p>
|
||||
@ -10894,7 +10894,7 @@ export const PortfolioData = [
|
||||
alt: "VG Fence",
|
||||
title: "Web Development",
|
||||
name: "VG Fence",
|
||||
link: "https://vgfence.metatronnest.com/",
|
||||
link: "https://vgfencerentals.ca/",
|
||||
videoLink: "https://youtu.be/Jv0d_kj0RDs",
|
||||
imagePopup: "/assets/images/portfolio/web-development/vg-fence.jpg",
|
||||
},
|
||||
@ -11841,7 +11841,7 @@ export const WebServicesData = [
|
||||
alt: "VG Fence",
|
||||
title: "Web Development",
|
||||
name: "VG Fence",
|
||||
link: "https://vgfence.metatronnest.com/",
|
||||
link: "https://vgfencerentals.ca/",
|
||||
videoLink: "https://youtu.be/Jv0d_kj0RDs",
|
||||
imagePopup: "/assets/img/images/portfolio/web-development/web-development/vg-fence.png",
|
||||
},
|
||||
|
||||
@ -39,11 +39,6 @@ export const services: ServiceType[] = [
|
||||
},
|
||||
];
|
||||
|
||||
export const features2 = [
|
||||
{ id: 1, title: "Cyber Security", icon: "/assets/imgs/service/service-icon1.png", description: "Lorem Ipsum is simply dummy text of the printing and typesetting" },
|
||||
{ id: 2, title: "IT Management", icon: "/assets/imgs/service/service-icon2.png", description: "Lorem Ipsum is simply dummy text of the printing and typesetting" },
|
||||
{ id: 3, title: "Web Development", icon: "/assets/imgs/service/service-icon3.png", description: "Lorem Ipsum is simply dummy text of the printing and typesetting" }
|
||||
];
|
||||
|
||||
export const services1: ServiceType[] = [
|
||||
{
|
||||
@ -84,408 +79,6 @@ export const services1: ServiceType[] = [
|
||||
}
|
||||
];
|
||||
|
||||
export const services3: ServiceType[] = [
|
||||
{
|
||||
id: 1,
|
||||
icon: '/assets/imgs/icon/icon-14.png',
|
||||
image: '/assets/imgs/service/service-img4.png',
|
||||
title: 'Cyber Security',
|
||||
description: 'Protect your business from digital threats with our advanced security solutions.',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '/assets/imgs/icon/icon-15.png',
|
||||
image: '/assets/imgs/service/service-img5.png',
|
||||
title: 'IT Management',
|
||||
description: 'Comprehensive IT management services to keep your business running smoothly.',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: '/assets/imgs/icon/icon-16.png',
|
||||
image: '/assets/imgs/service/service-img6.png',
|
||||
title: 'Cloud Solutions',
|
||||
description: 'Scalable and secure cloud infrastructure for your enterprise needs.',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: '/assets/imgs/icon/icon-17.png',
|
||||
image: '/assets/imgs/service/service-img7.png',
|
||||
title: 'Data Analytics',
|
||||
description: 'Gain valuable insights from your data to drive informed business decisions.',
|
||||
}
|
||||
];
|
||||
|
||||
export const services2: ServiceType[] = [
|
||||
{
|
||||
id: 1,
|
||||
icon: '/assets/imgs/icon/icon-2.png',
|
||||
image: '/assets/imgs/service/service-img4.png',
|
||||
title: 'Managed IT Services',
|
||||
description: 'Providing comprehensive IT support and management to optimize your business operations.',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '/assets/imgs/icon/icon-3.png',
|
||||
image: '/assets/imgs/service/service-img5.png',
|
||||
title: 'Cloud Computing',
|
||||
description: 'Transforming your business with scalable and secure cloud infrastructure solutions.',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: '/assets/imgs/icon/icon.png',
|
||||
image: '/assets/imgs/service/service-img6.png',
|
||||
title: 'Cybersecurity Solutions',
|
||||
description: 'Protecting your digital assets with advanced threat detection and mitigation strategies.',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: '/assets/imgs/icon/icon-2.png',
|
||||
image: '/assets/imgs/service/service-img7.png',
|
||||
title: 'Software Development',
|
||||
description: 'Building custom software tailored to your specific business requirements and goals.',
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
export const caseStudies: CaseStudyType[] = [
|
||||
{
|
||||
id: 1,
|
||||
image: '/assets/img/all-images/case/case-img1.png',
|
||||
tag: '#CloudFlex Solution',
|
||||
title: 'Upgrading IT for Financial Secure',
|
||||
link: '/case-details/single'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: '/assets/img/all-images/case/case-img2.png',
|
||||
tag: '#CloudFlex Solution',
|
||||
title: 'Scaling IT for EcoSolutions',
|
||||
link: '/case-details/single'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: '/assets/img/all-images/case/case-img3.png',
|
||||
tag: '#CloudFlex Solution',
|
||||
title: 'Optimizing IT For Solutions',
|
||||
link: '/case-details/single'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: '/assets/img/all-images/case/case-img9.png',
|
||||
tag: '#CloudFlex Solution',
|
||||
title: 'Stories: IT Solutions At Work',
|
||||
link: '/case-details/single'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: '/assets/img/all-images/case/case-img10.png',
|
||||
tag: '#CloudFlex Solution',
|
||||
title: 'IT Solutions Driving Success',
|
||||
link: '/case-details/single'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: '/assets/img/all-images/case/case-img11.png',
|
||||
tag: '#CloudFlex Solution',
|
||||
title: 'Real Solutions, Real Impact',
|
||||
link: '/case-details/single'
|
||||
},
|
||||
];
|
||||
|
||||
export const testimonialSlides: TestimonialType[] = [
|
||||
{
|
||||
rating: 5,
|
||||
message: 'Partnering with ETech has transformed our IT Solution Their tailored solutions help streamline our operations, improve cybersecurity, and drive efficiency across the board. We\'ve experienced fewer disruptions, faster an.',
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img2.png',
|
||||
name: 'Ben Stokes',
|
||||
role: 'Owner Taxfirm'
|
||||
},
|
||||
{
|
||||
rating: 5,
|
||||
message: 'Partnering with ETech has transformed our IT Solution Their tailored solutions help streamline our operations, improve cybersecurity, and drive efficiency across the board. We\'ve experienced fewer disruptions, faster an.',
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img3.png',
|
||||
name: 'Ben Stokes',
|
||||
role: 'Owner Taxfirm'
|
||||
},
|
||||
{
|
||||
rating: 5,
|
||||
message: 'Partnering with ETech has transformed our IT Solution Their tailored solutions help streamline our operations, improve cybersecurity, and drive efficiency across the board. We\'ve experienced fewer disruptions, faster an.',
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img4.png',
|
||||
name: 'Ben Stokes',
|
||||
role: 'Owner Taxfirm'
|
||||
},
|
||||
{
|
||||
rating: 5,
|
||||
message: 'Partnering with ETech has transformed our IT Solution Their tailored solutions help streamline our operations, improve cybersecurity, and drive efficiency across the board. We\'ve experienced fewer disruptions, faster an.',
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img5.png',
|
||||
name: 'Ben Stokes',
|
||||
role: 'Owner Taxfirm'
|
||||
}
|
||||
];
|
||||
|
||||
export const teamMembers: TeamMemberType[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'SR. Alex Robertson',
|
||||
image: '/assets/img/all-images/team/team-img1.png',
|
||||
role: 'Head Of Cybersecurity'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Shelia Abernathy',
|
||||
image: '/assets/img/all-images/team/team-img2.png',
|
||||
role: 'Software Development'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Devin Romaguera',
|
||||
image: '/assets/img/all-images/team/team-img3.png',
|
||||
role: 'Data Analytics Specialist'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'SR. Alex Robertson',
|
||||
image: '/assets/img/all-images/team/team-img8.png',
|
||||
role: 'Head Of Cybersecurity'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Shelia Abernathy',
|
||||
image: '/assets/img/all-images/team/team-img9.png',
|
||||
role: 'Software Development'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Devin Romaguera',
|
||||
image: '/assets/img/all-images/team/team-img10.png',
|
||||
role: 'Data Analytics Specialist'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'SR. Alex Robertson',
|
||||
image: '/assets/img/all-images/team/team-img11.png',
|
||||
role: 'Head Of Cybersecurity'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'Shelia Abernathy',
|
||||
image: '/assets/img/all-images/team/team-img12.png',
|
||||
role: 'Software Development'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: 'Devin Romaguera',
|
||||
image: '/assets/img/all-images/team/team-img13.png',
|
||||
role: 'Data Analytics Specialist'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: 'SR. Alex Robertson',
|
||||
image: '/assets/img/all-images/team/team-img14.png',
|
||||
role: 'Head Of Cybersecurity'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: 'Shelia Abernathy',
|
||||
image: '/assets/img/all-images/team/team-img15.png',
|
||||
role: 'Software Development'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: 'Devin Romaguera',
|
||||
image: '/assets/img/all-images/team/team-img16.png',
|
||||
role: 'Data Analytics Specialist'
|
||||
}
|
||||
];
|
||||
|
||||
export const blogs: BlogType[] = [
|
||||
{
|
||||
id: 1,
|
||||
image: '/assets/img/all-images/blog/blog-img1.png',
|
||||
bannerLeftImage: "/assets/images/innerbanner/left/left-blog-details.webp",
|
||||
bannerRightImage: "/assets/images/innerbanner/right/right-blog-details.webp",
|
||||
date: '03 March 2026',
|
||||
title: 'Mastering Digital Transformation: A Guide for Modern Enterprises',
|
||||
slug: 'mastering-digital-transformation',
|
||||
category: 'Technology',
|
||||
description: 'Fuel your business success with our custom IT services. We design solutions that are tailored to your specific needs.',
|
||||
details: 'Digital transformation is the process of using digital technologies to create new — or modify existing — business processes, culture, and customer experiences to meet changing business and market requirements. This reimagining of business in the digital age is digital transformation. It transcends traditional roles like sales, marketing, and customer service. Instead, digital transformation begins and ends with how you think about, and engage with, customers. ',
|
||||
blockquote: '“Success in digital transformation is not just about the technology; it’s about the cultural shift and visual excellence that drives user engagement.”',
|
||||
authorName: 'Admin',
|
||||
aosClass: "fade-left",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: '/assets/img/all-images/blog/blog-img2.png',
|
||||
bannerLeftImage: "/assets/images/innerbanner/left/left-blog-details.webp",
|
||||
bannerRightImage: "/assets/images/innerbanner/right/right-blog-details.webp",
|
||||
date: '02 March 2026',
|
||||
title: 'The Future of E-commerce: Trends to Watch in 2026',
|
||||
slug: 'future-of-ecommerce-2026',
|
||||
category: 'E-commerce',
|
||||
description: 'Stay ahead of the competition with the latest insights into the e-commerce landscape and consumer behavior.',
|
||||
details: 'The e-commerce industry continues to evolve at a breakneck pace. In 2026, we are seeing a significant shift towards hyper-personalization powered by AI, seamless headless commerce architectures, and the integration of social commerce directly into the shopping journey. Businesses that fail to adapt to these mobile-first and speed-optimized trends risk falling behind in an increasingly crowded marketplace.',
|
||||
blockquote: '“E-commerce is no longer just a digital storefront; it’s an immersive, personalized experience that connects brands with customers on a deeper level.”',
|
||||
authorName: 'Admin',
|
||||
aosClass: 'fade-right',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: '/assets/img/all-images/blog/blog-img17.png',
|
||||
bannerLeftImage: "/assets/images/innerbanner/left/left-blog-details.webp",
|
||||
bannerRightImage: "/assets/images/innerbanner/right/right-blog-details.webp",
|
||||
date: '01 March 2026',
|
||||
title: 'Elevating User Experiences through Design Thinking',
|
||||
slug: 'elevating-ux-design-thinking',
|
||||
category: 'Design',
|
||||
description: 'Discover how design thinking can transform your product development process and create lasting user value.',
|
||||
details: 'Design thinking is a non-linear, iterative process that teams use to understand users, challenge assumptions, redefine problems and create innovative solutions to prototype and test. Involving five phases—Empathize, Define, Ideate, Prototype and Test—it is most useful to tackle problems that are ill-defined or unknown. At Metatron Cube, we integrate these principles to ensure every pixel serves a purpose.',
|
||||
blockquote: '“Design is not just what it looks like and feels like. Design is how it works and how it makes the user feel empowered.”',
|
||||
authorName: 'Admin',
|
||||
}
|
||||
];
|
||||
|
||||
export const blogs2: BlogType[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Scalable IT solutions tailored to meet a unique business needs',
|
||||
slug: 'scalable-it-solutions',
|
||||
category: 'Services',
|
||||
date: '4 August 2024',
|
||||
image: '/assets/img/all-images/blog/blog-img8.png',
|
||||
link: '/blog-details/single'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Unlock the full potential Best your business with tailored IT',
|
||||
slug: 'unlock-potential-it',
|
||||
category: 'Business',
|
||||
date: '5 August 2024',
|
||||
image: '/assets/img/all-images/blog/blog-img9.png',
|
||||
link: '/blog-details/single'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Optimize your operations with tailored IT services that grow',
|
||||
slug: 'optimize-operations',
|
||||
category: 'Efficiency',
|
||||
date: '6 August 2024',
|
||||
image: '/assets/img/all-images/blog/blog-img10.png',
|
||||
link: '/blog-details/single'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Unlock the Future of Your IT & Business With Best Innovative',
|
||||
slug: 'unlock-future-it',
|
||||
category: 'Innovation',
|
||||
date: '4 August 2024',
|
||||
image: '/assets/img/all-images/blog/blog-img11.png',
|
||||
link: '/blog-details/single'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Transform Your Operations An with Technology Experience',
|
||||
slug: 'transform-operations-tech',
|
||||
category: 'Tech',
|
||||
date: '5 August 2024',
|
||||
image: '/assets/img/all-images/blog/blog-img12.png',
|
||||
link: '/blog-details/single'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Empowering Your Business And Through Technology Tailored IT',
|
||||
slug: 'empowering-business-tech',
|
||||
category: 'Growth',
|
||||
date: '6 August 2024',
|
||||
image: '/assets/img/all-images/blog/blog-img13.png',
|
||||
link: '/blog-details/single'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Discover the Power of Data-Driven Insights Transforming',
|
||||
slug: 'data-driven-insights',
|
||||
category: 'Data',
|
||||
date: '4 August 2024',
|
||||
image: '/assets/img/all-images/blog/blog-img14.png',
|
||||
link: '/blog-details/single'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Scalable IT solutions tailored to meet a unique business needs',
|
||||
slug: 'scalable-solutions-business',
|
||||
category: 'Scalability',
|
||||
date: '5 August 2024',
|
||||
image: '/assets/img/all-images/blog/blog-img15.png',
|
||||
link: '/blog-details/single'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Maximize Efficiency Minimize Risk With Expert Management',
|
||||
slug: 'maximize-efficiency-it',
|
||||
category: 'Management',
|
||||
date: '6 August 2024',
|
||||
image: '/assets/img/all-images/blog/blog-img16.png',
|
||||
link: '/blog-details/single'
|
||||
}
|
||||
];
|
||||
|
||||
export const testimonials: TestimonialType[] = [
|
||||
{
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img2.png',
|
||||
name: 'Sheldon Jackson',
|
||||
role: 'Shop Store Owner',
|
||||
message: '“Working with has been a game- Best changer for our business. Their IT and support team is always responsive, an their expertise has helped us stream our operations, We no longer worry.”',
|
||||
},
|
||||
{
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img8.png',
|
||||
name: 'Alex Robertson',
|
||||
role: 'Shop Store Owner',
|
||||
message: '“Our network security has never been stronger. Their proactive monitoring and customized security solutions on have given us peace of mind. Our data is safe, and our compliance has Tech.”',
|
||||
},
|
||||
{
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img7.png',
|
||||
name: 'Henry Gayle',
|
||||
role: 'Shop Store Owner',
|
||||
message: '“Has provided us on with top-notch IT services. Their solutions are tailored to our business, & their ongoing support is second to none. We’ve seen significant improvements in our productivity and.”',
|
||||
},
|
||||
{
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img9.png',
|
||||
name: 'Patricia Sanders',
|
||||
role: 'Rainbow Bay Crafts',
|
||||
message: '"Thanks to the IT solutions provided by ETEch, we have seen a remarkable improvement in our operational best efficiency. Our processes are now a streamlined, and our teams can best.”',
|
||||
},
|
||||
{
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img2.png',
|
||||
name: 'Rodger Struck',
|
||||
role: 'Rhodes Furniture',
|
||||
message: '"The cybersecurity measures Solution implemented by MetatronCube have given us peace of mind. We feel confident that our data is secure, & we\'ve experience zero breaches since partnering MetatronCube.”',
|
||||
},
|
||||
{
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img3.png',
|
||||
name: 'Eddie Lake',
|
||||
role: 'Finast Company',
|
||||
message: '"Migrating to the cloud was seamless with MetatronCube. Their best team guided us through every step now our employees can work from anywhere, IT boosting our team productivity significantly.”',
|
||||
},
|
||||
{
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img4.png',
|
||||
name: 'Ricky Smith',
|
||||
role: 'Tam\'s Stationers',
|
||||
message: '"Working with MetatronCube has been solution transformative experience for our best organization. Before their involvement, we faced significant challenges with our outdated IT infrastructure.“',
|
||||
},
|
||||
{
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img5.png',
|
||||
name: 'Lorri Warf',
|
||||
role: 'Seamans Furniture',
|
||||
message: '"Partnering with MetatronCube has been one of the best decisions we\'ve made. We are comprehensive cybersecurity on solutions provided us with the best assurance we needed to protect.”',
|
||||
},
|
||||
{
|
||||
image: '/assets/img/all-images/testimonial/testimonial-img9.png',
|
||||
name: 'Bradley Lawlor',
|
||||
role: 'Mostow Co.',
|
||||
message: '"MetatronCube has completely transformed the way we operate as a business. Their custom IT solutions have streamlined our processes, enabling us collaborate effectively across teams, regardless.”',
|
||||
},
|
||||
];
|
||||
|
||||
export const pricingPlans: PricingType[] = [
|
||||
{
|
||||
id: 1,
|
||||
@ -1735,7 +1328,7 @@ Robust Security</li>
|
||||
title: "Website Development",
|
||||
slug: "web-page-design-in-waterloo",
|
||||
icon: "fa-solid fa-laptop-code",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
image: "/assets/images/services/service/web.webp",
|
||||
bannerLeftImage: "/assets/images/innerbanner/left/left-services.webp",
|
||||
bannerRightImage: "/assets/images/innerbanner/right/right-services.webp",
|
||||
description: "Discover personalized web design with Waterloo's creative architects. We craft digital artistry that resonates with your audience.",
|
||||
@ -1772,7 +1365,7 @@ Robust Security</li>
|
||||
title: "Kitchener Waterloo Website Design",
|
||||
slug: "kitchener-waterloo-website-design-services",
|
||||
icon: "fa-solid fa-paint-brush",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
image: "/assets/images/services/service/web.webp",
|
||||
bannerLeftImage: "/assets/images/innerbanner/left/left-web-development.webp",
|
||||
bannerRightImage: "/assets/images/innerbanner/right/right-web-dev.webp",
|
||||
description: "Tailoring digital interfaces with bespoke website design from Kitchener's creative vanguard. We stand at the confluence of technology and creativity.",
|
||||
@ -1811,7 +1404,7 @@ Robust Security</li>
|
||||
<div class="service-details__portfolio-cards service-one">
|
||||
<div class="service-card">
|
||||
<div class="service-card__inner">
|
||||
<div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
|
||||
<div class="service-card__hover" style="background-image: url(/assets/images/services/details/service-6-2.webp);"></div>
|
||||
<div class="service-card__shape"></div>
|
||||
<div class="service-card__icon">
|
||||
<i class="fa-solid fa-lightbulb"></i>
|
||||
@ -1825,7 +1418,7 @@ Robust Security</li>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-card__inner">
|
||||
<div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
|
||||
<div class="service-card__hover" style="background-image: url(/assets/images/services/details/service-6-2.webp);"></div>
|
||||
<div class="service-card__shape"></div>
|
||||
<div class="service-card__icon">
|
||||
<i class="fa-solid fa-gears"></i>
|
||||
@ -1843,7 +1436,7 @@ Robust Security</li>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Kitchener Waterloo Website Design services">
|
||||
<img src="/assets/images/services/details/service-6-2.webp" alt="Kitchener Waterloo Website Design services">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@ -1867,7 +1460,7 @@ Robust Security</li>
|
||||
title: "Mobile Application Development",
|
||||
slug: "app-development-waterloo",
|
||||
icon: "fa-solid fa-mobile-screen-button",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
image: "/assets/images/services/service/web.webp",
|
||||
bannerLeftImage: "/assets/images/innerbanner/left/left-app-development.webp",
|
||||
bannerRightImage: "/assets/images/innerbanner/right/right-app-dev.webp",
|
||||
description: "Premier app development in Waterloo, creating high-performance, scalable mobile applications tailored to the unique demands of local businesses and entrepreneurs.",
|
||||
@ -1901,7 +1494,7 @@ Robust Security</li>
|
||||
<div class="service-details__portfolio-cards service-one">
|
||||
<div class="service-card">
|
||||
<div class="service-card__inner">
|
||||
<div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
|
||||
<div class="service-card__hover" style="background-image: url(/assets/images/services/details/service-6-2.webp);"></div>
|
||||
<div class="service-card__shape"></div>
|
||||
<div class="service-card__icon">
|
||||
<i class="fa-brands fa-android"></i>
|
||||
@ -1915,7 +1508,7 @@ Robust Security</li>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-card__inner">
|
||||
<div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
|
||||
<div class="service-card__hover" style="background-image: url(/assets/images/services/details/service-6-2.webp);"></div>
|
||||
<div class="service-card__shape"></div>
|
||||
<div class="service-card__icon">
|
||||
<i class="fa-brands fa-apple"></i>
|
||||
@ -1934,7 +1527,7 @@ Robust Security</li>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="App Development Waterloo">
|
||||
<img src="/assets/images/services/details/service-6-2.webp" alt="App Development Waterloo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@ -1977,7 +1570,7 @@ Robust Security</li>
|
||||
title: "Web Design Waterloo",
|
||||
slug: "professional-website-designers-in-waterloo",
|
||||
icon: "fa-solid fa-laptop",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
image: "/assets/images/services/service/web.webp",
|
||||
bannerLeftImage: "/assets/images/innerbanner/left/left-web-development.webp",
|
||||
bannerRightImage: "/assets/images/innerbanner/right/right-web-dev.webp",
|
||||
description: "Empowering your digital journey in Waterloo with bespoke web design solutions that capture your business essence and connect with your local audience.",
|
||||
@ -2015,7 +1608,7 @@ Robust Security</li>
|
||||
<div class="service-details__portfolio-cards service-one">
|
||||
<div class="service-card">
|
||||
<div class="service-card__inner">
|
||||
<div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
|
||||
<div class="service-card__hover" style="background-image: url(/assets/images/services/details/service-6-2.webp);"></div>
|
||||
<div class="service-card__shape"></div>
|
||||
<div class="service-card__icon">
|
||||
<i class="fa-solid fa-lightbulb"></i>
|
||||
@ -2029,7 +1622,7 @@ Robust Security</li>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-card__inner">
|
||||
<div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
|
||||
<div class="service-card__hover" style="background-image: url(/assets/images/services/details/service-6-2.webp);"></div>
|
||||
<div class="service-card__shape"></div>
|
||||
<div class="service-card__icon">
|
||||
<i class="fa-solid fa-gears"></i>
|
||||
@ -2047,7 +1640,7 @@ Robust Security</li>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="professional Web Design Waterloo">
|
||||
<img src="/assets/images/services/details/service-6-2.webp" alt="professional Web Design Waterloo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@ -2071,7 +1664,7 @@ Robust Security</li>
|
||||
title: "Website Development",
|
||||
slug: "web-design-toronto-custom-website-creation-by-metatroncube-software-solutions",
|
||||
icon: "fa-solid fa-city",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
image: "/assets/images/services/service/web.webp",
|
||||
bannerLeftImage: "/assets/images/innerbanner/left/left-web-development.webp",
|
||||
bannerRightImage: "/assets/images/innerbanner/right/right-web-dev.webp",
|
||||
description: "Unlock the potential of your online presence with premier web design in Toronto—crafting bespoke, SEO-optimized websites that capture your brand essence.",
|
||||
@ -2114,7 +1707,7 @@ Robust Security</li>
|
||||
title: "SEO & Content Writing",
|
||||
slug: "waterloo-seo-services",
|
||||
icon: "fa-solid fa-magnifying-glass-location",
|
||||
image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
|
||||
image: "/assets/images/services/service/web.webp",
|
||||
bannerLeftImage: "/assets/images/innerbanner/left/left-seo-content.webp",
|
||||
bannerRightImage: "/assets/images/innerbanner/right/right-seo.webp",
|
||||
description: "Revolutionizing your online visibility with Waterloo SEO strategies that propel your business to the top of local search rankings.",
|
||||
@ -2156,7 +1749,7 @@ Robust Security</li>
|
||||
<div class="service-details__portfolio-cards service-one">
|
||||
<div class="service-card">
|
||||
<div class="service-card__inner">
|
||||
<div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-1.png);"></div>
|
||||
<div class="service-card__hover" style="background-image: url(/assets/images/services/details/service-6-2.webp);"></div>
|
||||
<div class="service-card__shape"></div>
|
||||
<div class="service-card__icon">
|
||||
<i class="fa-solid fa-chart-line"></i>
|
||||
@ -2170,7 +1763,7 @@ Robust Security</li>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-card__inner">
|
||||
<div class="service-card__hover" style="background-image: url(https://bracketweb.com/pelocishtml/assets/images/resources/service-2.png);"></div>
|
||||
<div class="service-card__hover" style="background-image: url(/assets/images/services/details/service-6-2.webp);"></div>
|
||||
<div class="service-card__shape"></div>
|
||||
<div class="service-card__icon">
|
||||
<i class="fa-solid fa-feather"></i>
|
||||
@ -2188,7 +1781,7 @@ Robust Security</li>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="service-details__benefit__img">
|
||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="Waterloo SEO Services">
|
||||
<img src="/assets/images/services/details/service-6-2.webp" alt="Waterloo SEO Services">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user