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

font family updated

Browse Source
This commit is contained in:
akash 2026-03-18 18:44:46 +05:30
parent 24cd9cf2ba
commit b7546b814f
19 changed files with 378 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,8 +77,6 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
.main-menu ul li.has-dropdown>a::after, .main-menu ul li.has-dropdown>a::after,
.main-menu ul li .submenu, .main-menu ul li .submenu,
@ -121,7 +119,7 @@ i[class^=flaticon-],
:root { :root {
--primary-font: 'Inter', sans-serif; --primary-font: 'Inter', sans-serif;
--secondary-font: 'Roboto', sans-serif; --secondary-font: 'Inter', sans-serif;
--theme-color: #3779b9; --theme-color: #3779b9;
--theme-color-1: #1a1f2b; --theme-color-1: #1a1f2b;
@ -145,8 +143,22 @@ html {
/*--------------------------------- /*---------------------------------
Typography css start Typography css start
---------------------------------*/ ---------------------------------*/
/* Apply Inter to ALL text elements — exclude icon fonts */
body,
h1, h2, h3, h4, h5, h6,
p, a, div, li, ul, ol,
td, th, label, button,
input, textarea, select,
blockquote, figcaption, caption,
.navbar, .nav-link, .nav-item,
.section-title, .section-heading,
.btn, .form-control {
font-family: 'Inter', sans-serif !important;
}
body { body {
font-family: var(--secondary-font); font-family: 'Inter', sans-serif;
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
color: var(--theme-color-1); color: var(--theme-color-1);
@ -8362,3 +8374,29 @@ Animate wobble-vertical
.error-image img { .error-image img {
width: 100%; width: 100%;
} }
@media (max-width: 460px) {
.why-choose-two__item:hover {
padding-left: 110px;
}
.why-choose-two__count {
padding-left: 10px;
}
.why-choose-two__item__content {
padding-left: 4px;
}
.why-choose-two__item__title {
font-size: 13px;
line-height: 16px;
}
.why-choose-two__icon {
width: 88px;
height: 88px;
}
}

2
src/app/[slug]/BlogDetailsClient.tsx
View File

@ -6,7 +6,6 @@ import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1"; import Footer1 from "@/components/layout/Footer1";
import PageHeader from "@/components/common/PageHeader"; import PageHeader from "@/components/common/PageHeader";
import BlogDetails from "@/components/blog/BlogDetails"; import BlogDetails from "@/components/blog/BlogDetails";
import MetatronInitializer from "@/components/MetatronInitializer";
interface BlogDetailsClientProps { interface BlogDetailsClientProps {
blog: any | undefined; blog: any | undefined;
@ -40,7 +39,6 @@ export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
return ( return (
<> <>
<MetatronInitializer />
<Header1 /> <Header1 />
<main> <main>
<PageHeader <PageHeader

2
src/app/accessibility-statement-for-metatroncube-software-solutions/page.tsx
View File

@ -4,7 +4,6 @@ import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1"; import Footer1 from "@/components/layout/Footer1";
import PageHeader from "@/components/common/PageHeader"; import PageHeader from "@/components/common/PageHeader";
import AccessibilityContent from "@/components/accessibility/AccessibilityContent"; import AccessibilityContent from "@/components/accessibility/AccessibilityContent";
import MetatronInitializer from "@/components/MetatronInitializer";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Accessibility Statement for Metatroncube Software Solution - Metatroncube Software Solution | Innovative & User-Centric Tech Services in Waterloo", title: "Accessibility Statement for Metatroncube Software Solution - Metatroncube Software Solution | Innovative & User-Centric Tech Services in Waterloo",
@ -17,7 +16,6 @@ export const metadata: Metadata = {
export default function AccessibilityStatement() { export default function AccessibilityStatement() {
return ( return (
<> <>
<MetatronInitializer />
<Header1 /> <Header1 />
<main> <main>
<PageHeader <PageHeader

2
src/app/blog/results/page.tsx
View File

@ -1,7 +1,6 @@
import Header1 from "@/components/layout/Header1"; import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1"; import Footer1 from "@/components/layout/Footer1";
import PageHeader from "@/components/common/PageHeader"; import PageHeader from "@/components/common/PageHeader";
import MetatronInitializer from "@/components/MetatronInitializer";
import BlogResultsContent from "@/components/blog/BlogResultsContent"; import BlogResultsContent from "@/components/blog/BlogResultsContent";
import { Metadata } from "next"; import { Metadata } from "next";
@ -13,7 +12,6 @@ export const metadata: Metadata = {
export default function BlogResultsPage() { export default function BlogResultsPage() {
return ( return (
<> <>
<MetatronInitializer />
<Header1 /> <Header1 />
<main> <main>
<PageHeader <PageHeader

172
src/app/globals.css
View File

@ -227,7 +227,7 @@ body {
} }
.btn-one { .btn-one {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
background-size: 200% auto !important; background-size: 200% auto !important;
border-radius: 10px !important; border-radius: 10px !important;
color: #fff !important; color: #fff !important;
@ -2832,6 +2832,7 @@ body {
height: 380px; height: 380px;
padding: 30px; padding: 30px;
} }
.close-desc-btn { .close-desc-btn {
top: 30px !important; top: 30px !important;
right: 30px !important; right: 30px !important;
@ -2843,6 +2844,7 @@ body {
opacity: 0; opacity: 0;
transform: scale(0.5); transform: scale(0.5);
} }
to { to {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
@ -3330,7 +3332,7 @@ body {
padding: 10px 22px; padding: 10px 22px;
border-radius: 10px !important; border-radius: 10px !important;
border: none !important; border: none !important;
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
color: white !important; color: white !important;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -3341,7 +3343,7 @@ body {
.pf-tab-btn:hover, .pf-tab-btn:hover,
.pf-tab-btn.active { .pf-tab-btn.active {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
color: #fff !important; color: #fff !important;
box-shadow: 0 6px 20px rgba(55, 121, 185, 0.35); box-shadow: 0 6px 20px rgba(55, 121, 185, 0.35);
opacity: 0.85; opacity: 0.85;
@ -4037,7 +4039,7 @@ body {
width: 425px; width: 425px;
height: 425px; height: 425px;
border-radius: 50%; border-radius: 50%;
background-color: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background-color: #3779b9 !important;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -4443,7 +4445,7 @@ body {
} }
.service-circle__center { .service-circle__center {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
padding: 40px 20px; padding: 40px 20px;
border-radius: 20px; border-radius: 20px;
text-align: center; text-align: center;
@ -4993,7 +4995,7 @@ body {
width: 425px; width: 425px;
height: 425px; height: 425px;
border-radius: 50%; border-radius: 50%;
background-color: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background-color: #3779b9 !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -5085,7 +5087,7 @@ body {
----------------------------------------------------------- */ ----------------------------------------------------------- */
.why-choose-two { .why-choose-two {
position: relative; position: relative;
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
counter-reset: count; counter-reset: count;
} }
@ -7776,7 +7778,7 @@ body {
.service-circle__menu li.active a, .service-circle__menu li.active a,
.service-circle__menu li a:hover { .service-circle__menu li a:hover {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
} }
.service-circle__menu li img { .service-circle__menu li img {
@ -7806,7 +7808,7 @@ body {
width: 425px; width: 425px;
height: 425px; height: 425px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -8003,7 +8005,7 @@ body {
} }
.service-circle__center { .service-circle__center {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
/* border: 4px solid rgba(255, 255, 255, 0.1); */ /* border: 4px solid rgba(255, 255, 255, 0.1); */
} }
@ -8388,7 +8390,7 @@ body {
} }
.projects-one__filter__list button.list-unstyled-item { .projects-one__filter__list button.list-unstyled-item {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
background-size: 200% auto !important; background-size: 200% auto !important;
border-radius: 10px !important; border-radius: 10px !important;
color: #fff !important; color: #fff !important;
@ -8407,7 +8409,7 @@ body {
.projects-one__filter__list button.list-unstyled-item.active, .projects-one__filter__list button.list-unstyled-item.active,
.projects-one__filter__list button.list-unstyled-item:hover { .projects-one__filter__list button.list-unstyled-item:hover {
/* background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; */ /* background: #3779b9 !important; */
color: var(--pelocis-white, #fff) !important; color: var(--pelocis-white, #fff) !important;
opacity: 0.85; opacity: 0.85;
} }
@ -10378,7 +10380,7 @@ body {
width: 40px; width: 40px;
height: 40px; height: 40px;
/* background: #fff; */ /* background: #fff; */
color: #3779b9; color: #fff;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -12504,7 +12506,7 @@ body {
} }
.metatron-primary-btn { .metatron-primary-btn {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
color: #fff !important; color: #fff !important;
padding: 12px 10px; padding: 12px 10px;
border-radius: 10px; border-radius: 10px;
@ -12925,7 +12927,7 @@ body {
.pf-tabs button, .pf-tabs button,
.pf-tab-btn.active, .pf-tab-btn.active,
.pf-tab-btn { .pf-tab-btn {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; background: #3779b9 !important;
background-size: 200% auto !important; background-size: 200% auto !important;
border-radius: 10px !important; border-radius: 10px !important;
color: #fff !important; color: #fff !important;
@ -16377,7 +16379,7 @@ h4.service-details__dynamic-content-erp {
width: 138px; width: 138px;
height: 138px; height: 138px;
line-height: 158px; line-height: 158px;
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%); background: #3779b9;
background-size: 200% auto; background-size: 200% auto;
border-radius: 50%; border-radius: 50%;
margin: 40px auto 0; margin: 40px auto 0;
@ -16682,17 +16684,18 @@ h4.service-details__dynamic-content-erp {
line-height: 32px; line-height: 32px;
} }
.home-contact-one .home-contact__card__content { .home-contact-one .home-contact__card__content {
padding: 70px 35px 70px 39px !important; padding: 70px 35px 70px 39px !important;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.home-contact-one .contact-home { .home-contact-one .contact-home {
position: relative !important; position: relative !important;
left: 10px !important; left: 10px !important;
top: -50px !important; top: -50px !important;
} }
.counter-area-two__list { .counter-area-two__list {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@ -16713,23 +16716,23 @@ h4.service-details__dynamic-content-erp {
flex: 0 0 100%; flex: 0 0 100%;
} }
.home-contact-one .home-contact__card__content { .home-contact-one .home-contact__card__content {
padding: 66px 0px !important; padding: 66px 0px !important;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.home-contact-one .home-contact__card__shape-one{ .home-contact-one .home-contact__card__shape-one {
display: none !important; display: none !important;
} }
.home-contact-one .contact-home { .home-contact-one .contact-home {
position: relative !important; position: relative !important;
left: -6px !important; left: -6px !important;
top: -50px !important; top: -50px !important;
} }
} }
@ -16757,7 +16760,8 @@ h4.service-details__dynamic-content-erp {
.choose-section .image.m-img { .choose-section .image.m-img {
margin-top: 30px; margin-top: 30px;
} }
.card-1 {
.card-1 {
top: -20px; top: -20px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@ -17974,7 +17978,7 @@ h4.service-details__dynamic-content-erp {
max-width: 520px !important; max-width: 520px !important;
} }
.faq-four .pelocis-stretch-element-inside-column{ .faq-four .pelocis-stretch-element-inside-column {
margin-top: 30px !important; margin-top: 30px !important;
@ -17989,9 +17993,9 @@ h4.service-details__dynamic-content-erp {
position: absolute; position: absolute;
left: 91px !important; left: 91px !important;
top: 50%; top: 50%;
} }
.faq-four__image2__icon { .faq-four__image2__icon {
width: 175px; width: 175px;
height: 175px; height: 175px;
display: flex; display: flex;
@ -18000,7 +18004,7 @@ h4.service-details__dynamic-content-erp {
position: absolute; position: absolute;
right: 84px !important; right: 84px !important;
top: 50%; top: 50%;
} }
.careers-popup-optimized .form-panel { .careers-popup-optimized .form-panel {
padding: 20px 35px 15px !important; padding: 20px 35px 15px !important;
@ -18045,7 +18049,7 @@ h4.service-details__dynamic-content-erp {
min-height: 50px !important; min-height: 50px !important;
} }
.faq-four__image__icon { .faq-four__image__icon {
width: 175px; width: 175px;
height: 175px; height: 175px;
display: flex; display: flex;
@ -18055,9 +18059,9 @@ h4.service-details__dynamic-content-erp {
left: 0px !important; left: 0px !important;
top: 50%; top: 50%;
font-size: 54px !important; font-size: 54px !important;
} }
.faq-four__image2__icon { .faq-four__image2__icon {
width: 175px; width: 175px;
height: 175px; height: 175px;
display: flex; display: flex;
@ -18067,7 +18071,7 @@ h4.service-details__dynamic-content-erp {
right: 0px !important; right: 0px !important;
top: 50%; top: 50%;
font-size: 54px !important; font-size: 54px !important;
} }
.careers-popup-optimized .g-recaptcha-container { .careers-popup-optimized .g-recaptcha-container {
transform: scale(0.7) !important; transform: scale(0.7) !important;
@ -18280,70 +18284,70 @@ h4.service-details__dynamic-content-erp {
@media (max-width: 475px) { @media (max-width: 475px) {
.home-contact-one .home-contact__card { .home-contact-one .home-contact__card {
padding: 14px !important; padding: 14px !important;
} }
.home-contact-one .home-contact__card__list__title{ .home-contact-one .home-contact__card__list__title {
font-size: 16px !important; font-size: 16px !important;
} }
.home-contact-one .home-contact__card__list__text a{ .home-contact-one .home-contact__card__list__text a {
font-size: 14px !important; font-size: 14px !important;
} }
} }
@media (max-width: 375px) { @media (max-width: 375px) {
.home-contact-one .home-contact__card__list li { .home-contact-one .home-contact__card__list li {
padding-right: 41px !important; padding-right: 41px !important;
padding-left: 36px !important; padding-left: 36px !important;
} }
} }
@media (max-width: 320px) { @media (max-width: 320px) {
.home-contact-one .home-contact__card__list li { .home-contact-one .home-contact__card__list li {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 9px !important; gap: 9px !important;
margin-bottom: 21px !important; margin-bottom: 21px !important;
border-radius: 10px !important; border-radius: 10px !important;
padding: 2px 11px !important; padding: 2px 11px !important;
padding-right: -6px !important; padding-right: -6px !important;
padding-left: 11px !important; padding-left: 11px !important;
} }
.home-contact-one .home-contact__card { .home-contact-one .home-contact__card {
padding: 14px !important; padding: 14px !important;
} }
.home-contact-one .home-contact__card__list li span{ .home-contact-one .home-contact__card__list li span {
font-size: 20px !important; font-size: 20px !important;
} }
.home-contact-one .home-contact__card__list__title{ .home-contact-one .home-contact__card__list__title {
font-size: 14px !important; font-size: 14px !important;
} }
.home-contact-one .home-contact__card__list__text a{ .home-contact-one .home-contact__card__list__text a {
font-size: 14px !important; font-size: 14px !important;
} }
} }

2
src/app/layout.tsx
View File

@ -2,7 +2,6 @@ import React from "react";
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import Script from "next/script"; import Script from "next/script";
import MetatronInitializer from "@/components/MetatronInitializer";
import Preloader from "@/components/common/Preloader"; import Preloader from "@/components/common/Preloader";
import BackToTop from "@/components/common/BackToTop"; import BackToTop from "@/components/common/BackToTop";
@ -175,7 +174,6 @@ export default function RootLayout({
<BackToTop /> <BackToTop />
<SearchOverlay /> <SearchOverlay />
<Offcanvas /> <Offcanvas />
<MetatronInitializer />
{children} {children}
{/* JS */} {/* JS */}

1
src/app/page.tsx
View File

@ -13,7 +13,6 @@ import CounsellingSolutions from "@/components/home/CounsellingSolutions";
import CallAreaThree from "@/components/home/CallAreaThree"; import CallAreaThree from "@/components/home/CallAreaThree";
import CounterAreaTwo from "@/components/home/CounterAreaTwo"; import CounterAreaTwo from "@/components/home/CounterAreaTwo";
import HomeContactOne from "@/components/home/HomeContactOne"; import HomeContactOne from "@/components/home/HomeContactOne";
import MetatronInitializer from "@/components/MetatronInitializer";
import HomeServiceOne from "@/components/home/HomeServiceOne"; import HomeServiceOne from "@/components/home/HomeServiceOne";
export const metadata: Metadata = { export const metadata: Metadata = {

2
src/app/portfolio/page.tsx
View File

@ -4,7 +4,6 @@ import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1"; import Footer1 from "@/components/layout/Footer1";
import PortfolioSection from "@/components/home/PortfolioSection"; import PortfolioSection from "@/components/home/PortfolioSection";
import PageHeader from "@/components/common/PageHeader"; import PageHeader from "@/components/common/PageHeader";
import MetatronInitializer from "@/components/MetatronInitializer";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Metatroncube: Leaders in Web &amp; Mobile Dev, SEO, Digital Marketing", title: "Metatroncube: Leaders in Web &amp; Mobile Dev, SEO, Digital Marketing",
@ -17,7 +16,6 @@ export const metadata: Metadata = {
export default function PortfolioPage() { export default function PortfolioPage() {
return ( return (
<> <>
<MetatronInitializer />
<Header1 /> <Header1 />
<main> <main>
<PageHeader <PageHeader

2
src/app/privacy-policy/page.tsx
View File

@ -4,7 +4,6 @@ import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1"; import Footer1 from "@/components/layout/Footer1";
import PageHeader from "@/components/common/PageHeader"; import PageHeader from "@/components/common/PageHeader";
import PrivacyPolicyContent from "@/components/privacy/PrivacyPolicyContent"; import PrivacyPolicyContent from "@/components/privacy/PrivacyPolicyContent";
import MetatronInitializer from "@/components/MetatronInitializer";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Privacy Policy of Metatroncube Software Solution - Metatroncube Software Solution | Innovative & User-Centric Tech Services in Waterloo", title: "Privacy Policy of Metatroncube Software Solution - Metatroncube Software Solution | Innovative & User-Centric Tech Services in Waterloo",
@ -17,7 +16,6 @@ export const metadata: Metadata = {
export default function PrivacyPolicy() { export default function PrivacyPolicy() {
return ( return (
<> <>
<MetatronInitializer />
<Header1 /> <Header1 />
<main> <main>
<PageHeader <PageHeader

18
src/components/MetatronInitializer.tsx
View File

@ -1,18 +0,0 @@
"use client";
import { useEffect } from "react";
export default function MetatronInitializer() {
useEffect(() => {
const init = () => {
if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
(window as any).initMetatron();
} else {
setTimeout(init, 100);
}
};
init();
}, []);
return null;
}

7
src/components/contact/ContactSection.tsx
View File

@ -150,6 +150,7 @@ const ContactSection = () => {
placeholder="Full Name" placeholder="Full Name"
value={formData.name} value={formData.name}
onChange={handleChange} onChange={handleChange}
suppressHydrationWarning={true}
/> />
{formErrors.name && <small className="text-danger">{formErrors.name}</small>} {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
</div> </div>
@ -161,6 +162,7 @@ const ContactSection = () => {
placeholder="Email Address" placeholder="Email Address"
value={formData.email} value={formData.email}
onChange={handleChange} onChange={handleChange}
suppressHydrationWarning={true}
/> />
{formErrors.email && <small className="text-danger">{formErrors.email}</small>} {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
</div> </div>
@ -172,6 +174,7 @@ const ContactSection = () => {
placeholder="Phone Number" placeholder="Phone Number"
value={formData.phone} value={formData.phone}
onChange={handleChange} onChange={handleChange}
suppressHydrationWarning={true}
/> />
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>} {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
</div> </div>
@ -181,6 +184,7 @@ const ContactSection = () => {
name="service" name="service"
value={formData.service} value={formData.service}
onChange={handleChange} onChange={handleChange}
suppressHydrationWarning={true}
style={{ style={{
width: '100%', width: '100%',
padding: '18px 25px', padding: '18px 25px',
@ -211,6 +215,7 @@ const ContactSection = () => {
rows={5} rows={5}
value={formData.message} value={formData.message}
onChange={handleChange} onChange={handleChange}
suppressHydrationWarning={true}
></textarea> ></textarea>
{formErrors.message && <small className="text-danger">{formErrors.message}</small>} {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
</div> </div>
@ -224,7 +229,7 @@ const ContactSection = () => {
</div> </div>
<div className="form-one__control--full"> <div className="form-one__control--full">
<button type="submit" className="submit-btn-custom-global"> <button type="submit" className="submit-btn-custom-global" suppressHydrationWarning={true}>
SEND A MESSAGE SEND A MESSAGE
</button> </button>
</div> </div>

68
src/components/home/HomeServiceOne.tsx
View File

@ -1,10 +1,67 @@
"use client"; "use client";
import React from "react"; import React, { useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import { ourServices } from "@/utils/data"; import { ourServices } from "@/utils/data";
const HomeServiceOne: React.FC = () => { const HomeServiceOne: React.FC = () => {
useEffect(() => {
// Swiper Initialization
const initSwiper = () => {
if (typeof window !== "undefined" && (window as any).Swiper) {
new (window as any).Swiper('.service-one-home__carousel', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
speed: 800,
pagination: {
el: '.service-one-home__swiper-dot',
clickable: true,
},
breakpoints: {
576: { slidesPerView: 1 },
768: { slidesPerView: 2 },
992: { slidesPerView: 3 },
1200: { slidesPerView: 3 },
},
});
} else if (typeof window !== "undefined") {
setTimeout(initSwiper, 100);
}
};
initSwiper();
// Animation Initialization
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");
htmlEl.style.visibility = "visible";
}, parseInt(delay));
});
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1 }
);
const section = document.querySelector(".service-one-home");
if (section) observer.observe(section);
return () => observer.disconnect();
}, []);
return ( return (
<section <section
className="service-one-home" className="service-one-home"
@ -17,14 +74,13 @@ const HomeServiceOne: React.FC = () => {
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"> <div className="sec-title__shape">
</div> </div>
<h6 className="sec-title__tagline text-white">OUR SERVICES</h6> <h6 className="sec-title__tagline text-white wow fadeInUp" data-wow-delay="0ms">OUR SERVICES</h6>
<h3 className="sec-title__title text-white">We Shape the Perfect <h3 className="sec-title__title text-white wow fadeInUp" data-wow-delay="200ms">We Shape the Perfect Solution.</h3>
Solution.</h3>
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">
<div className="service-one-home__text"> <div className="service-one-home__text wow fadeInUp" data-wow-delay="400ms">
<p className="text-white"> <p className="text-white">
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. 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> </p>
@ -36,7 +92,7 @@ const HomeServiceOne: React.FC = () => {
<div className="swiper-wrapper"> <div className="swiper-wrapper">
{ourServices.slice(0, 7).map((service, index) => { {ourServices.slice(0, 7).map((service, index) => {
return ( return (
<div key={index} className="swiper-slide"> <div key={index} className="swiper-slide wow fadeInUp" data-wow-delay={`${index * 100}ms`}>
<div className="item"> <div className="item">
<div className="home-services__card"> <div className="home-services__card">
<div className="home-services__card__shape--one"></div> <div className="home-services__card__shape--one"></div>

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

@ -69,9 +69,7 @@ const ProjectsSection = () => {
activeFilter === "all" || project.category === activeFilter activeFilter === "all" || project.category === activeFilter
); );
if (!hasMounted) { // Note: Removed if (!hasMounted) return null; to fix hydration mismatch
return null;
}
return ( return (
<section className="projects-one section-space"> <section className="projects-one section-space">

126
src/components/home/home-1/BlogSection.tsx
View File

@ -3,7 +3,6 @@
import React, { useState, useEffect, useMemo } from "react"; import React, { useState, useEffect, useMemo } from "react";
import { BlogData } from "@/utils/constant.utils"; import { BlogData } from "@/utils/constant.utils";
import Link from "next/link"; import Link from "next/link";
import Slider from "react-slick";
const allBlogs = [...BlogData].sort( const allBlogs = [...BlogData].sort(
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
@ -68,6 +67,62 @@ const BlogSection = ({
return list; return list;
}, [searchTerm, selectedCategory]); }, [searchTerm, selectedCategory]);
useEffect(() => {
// Swiper Initialization
const initSwiper = () => {
if (typeof window !== "undefined" && (window as any).Swiper) {
new (window as any).Swiper('.blog-one__carousel', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
speed: 500,
breakpoints: {
576: { slidesPerView: 1 },
768: { slidesPerView: 2 },
992: { slidesPerView: 3 },
1200: { slidesPerView: 3 },
},
});
} else if (typeof window !== "undefined") {
setTimeout(initSwiper, 100);
}
};
if (isSlider) {
initSwiper();
}
// Animation Initialization
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");
htmlEl.style.visibility = "visible";
}, parseInt(delay));
});
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1 }
);
const section = document.querySelector(".blog-section-one");
if (section) observer.observe(section);
return () => observer.disconnect();
}, [isSlider]);
if (!isMounted) { if (!isMounted) {
return null; // Avoid hydration mismatch return null; // Avoid hydration mismatch
} }
@ -112,25 +167,6 @@ const BlogSection = ({
return pages; return pages;
}; };
const sliderSettings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
arrows: false,
autoplay: true,
responsive: [
{
breakpoint: 767, // Below 768px show 1 card
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};
return ( return (
<section className={`blog-section-one section-space ${isPaginated ? "pb-0 pt-0" : ""}`}> <section className={`blog-section-one section-space ${isPaginated ? "pb-0 pt-0" : ""}`}>
<div className={`small-container ${isSlider ? "blog-slider-active" : ""}`}> <div className={`small-container ${isSlider ? "blog-slider-active" : ""}`}>
@ -146,34 +182,36 @@ const BlogSection = ({
</div> </div>
)} )}
{isSlider ? ( {isSlider ? (
<Slider {...sliderSettings} className="blog-slider-inner"> <div className="swiper blog-one__carousel">
{currentBlogs.map((blog) => ( <div className="swiper-wrapper">
<div key={blog.id} className="blog-slider-item px-3"> {currentBlogs.map((blog, index) => (
<div className="blog-style-one relative overflow-hidden"> <div key={blog.id} className="swiper-slide px-3">
<Link className="blog-image w-img block relative" href={`/${blog.slug}`}> <div className="blog-style-one relative overflow-hidden wow fadeInUp" data-wow-delay={`${index * 100}ms`}>
<img loading="lazy" src={blog.image} alt={blog.title} /> <Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
<span className="blog-category-tag">{blog.category}</span> <img loading="lazy" src={blog.image} alt={blog.title} />
</Link> <span className="blog-category-tag">{blog.category}</span>
<div className="blog-content"> </Link>
<div className="post-meta"> <div className="blog-content">
<span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span> <div className="post-meta">
<span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span> <span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span>
</div> <span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
<h5 className="blog-title mb-20 mt-15"> </div>
<Link href={`/${blog.slug}`}>{blog.title}</Link> <h5 className="blog-title mb-20 mt-15">
</h5> <Link href={`/${blog.slug}`}>{blog.title}</Link>
<div className="blog-footer"> </h5>
<div className="blog-link-learn"> <div className="blog-footer">
<Link href={`/${blog.slug}`} className="learn-more-link"> <div className="blog-link-learn">
Learn More <span>+</span> <Link href={`/${blog.slug}`} className="learn-more-link">
</Link> Learn More <span>+</span>
</Link>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> ))}
))} </div>
</Slider> </div>
) : ( ) : (
<div className="row g-4"> <div className="row g-4">
{currentBlogs.map((blog) => ( {currentBlogs.map((blog) => (

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

@ -1,6 +1,5 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import Slider from "react-slick";
import Link from "next/link"; import Link from "next/link";
import GoogleReviewsBranding from "@/components/common/GoogleReviewsBranding"; import GoogleReviewsBranding from "@/components/common/GoogleReviewsBranding";
@ -26,36 +25,70 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
loadReviews(); loadReviews();
}, []); }, []);
useEffect(() => {
// Swiper Initialization
const initSwiper = () => {
if (typeof window !== "undefined" && (window as any).Swiper) {
new (window as any).Swiper('.testimonials-two__carousel', {
slidesPerView: 1,
spaceBetween: 30,
loop: reviews.length > 2,
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
speed: 500,
pagination: {
el: '.testimonials-two__swiper-pagination',
clickable: true,
},
breakpoints: {
576: { slidesPerView: 1 },
768: { slidesPerView: 2 },
992: { slidesPerView: 2 },
1200: { slidesPerView: 2 },
},
});
} else if (typeof window !== "undefined") {
setTimeout(initSwiper, 100);
}
};
if (!loading && reviews.length > 0) {
initSwiper();
}
// Animation Initialization
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");
htmlEl.style.visibility = "visible";
}, parseInt(delay));
});
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1 }
);
const section = document.querySelector(".testimonials-two-section");
if (section) observer.observe(section);
return () => observer.disconnect();
}, [loading, reviews.length]);
const displayedReviews = reviews.length > 0 && reviews.length < 4 const displayedReviews = reviews.length > 0 && reviews.length < 4
? [...reviews, ...reviews, ...reviews] ? [...reviews, ...reviews, ...reviews]
: reviews; : reviews;
const settings = {
dots: false,
arrows: false,
infinite: displayedReviews.length > 2,
speed: 600,
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
dotsClass: "testimonial-dot-inner",
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 1,
}
}
]
};
function getReviewText(r: any) { function getReviewText(r: any) {
return r.text || r.description || r.snippet || r.review_text || r.body || r.content || ""; return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
} }
@ -116,37 +149,40 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
<p className="text-white">Loading reviews...</p> <p className="text-white">Loading reviews...</p>
</div> </div>
) : displayedReviews.length > 0 ? ( ) : displayedReviews.length > 0 ? (
<Slider {...settings}> <div className="swiper testimonials-two__carousel">
{displayedReviews.map((slide, index) => { <div className="swiper-wrapper">
const profileImg = getProfileImage(slide, index); {displayedReviews.map((slide, index) => {
const name = slide.user?.name || slide.author_name || "Valued Client"; const profileImg = getProfileImage(slide, index);
const rating = slide.rating || 5; const name = slide.user?.name || slide.author_name || "Valued Client";
return ( const rating = slide.rating || 5;
<div key={index} style={{ outline: 'none', padding: '10px 15px 40px 10px' }}> return (
<div className="testimonials-two-box-solid"> <div key={index} className="swiper-slide" style={{ outline: 'none', padding: '10px 15px 40px 10px' }}>
<div className="author-image-solid"> <div className="testimonials-two-box-solid wow fadeInUp" data-wow-delay={`${index * 100}ms`}>
<img loading="lazy" src={profileImg} alt={name} /> <div className="author-image-solid">
</div> <img loading="lazy" src={profileImg} alt={name} />
<div className="icon-quote-testi"> </div>
<i className="fa-solid fa-quote-right"></i> <div className="icon-quote-testi">
</div> <i className="fa-solid fa-quote-right"></i>
<div className="content-solid"> </div>
<h4>{name}</h4> <div className="content-solid">
<span className="tag">Verified Google Review</span> <h4>{name}</h4>
<ul className="ratings-solid"> <span className="tag">Verified Google Review</span>
{[...Array(rating)].map((_, i) => ( <ul className="ratings-solid">
<li key={i}><i className="fa-solid fa-star"></i></li> {[...Array(rating)].map((_, i) => (
))} <li key={i}><i className="fa-solid fa-star"></i></li>
</ul> ))}
<p> </ul>
&quot;{getReviewText(slide)}&quot; <p>
</p> &quot;{getReviewText(slide)}&quot;
</p>
</div>
</div> </div>
</div> </div>
</div> );
); })}
})} </div>
</Slider> <div className="testimonials-two__swiper-pagination swiper-pagination mt-40 text-center"></div>
</div>
) : ( ) : (
<div className="text-center py-5"> <div className="text-center py-5">
<p className="text-white">No reviews found.</p> <p className="text-white">No reviews found.</p>

6
src/components/mobile-app-development-service/BannerBottom.tsx
View File

@ -103,18 +103,18 @@ const BannerBottom = () => {
onClick={() => setIsContactOpen(true)} onClick={() => setIsContactOpen(true)}
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important', background: '#3779b9 !important',
padding: '10px 25px', padding: '10px 25px',
borderRadius: '10px', borderRadius: '10px',
border: '1px solid rgba(55, 121, 185, 0.2)', border: '1px solid rgba(55, 121, 185, 0.2)',
transition: 'all 0.3s' transition: 'all 0.3s'
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important'; e.currentTarget.style.background = '#3779b9 !important';
e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.transform = 'translateY(-2px)';
}} }}
onMouseLeave={(e) => { onMouseLeave={(e) => {
e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important'; e.currentTarget.style.background = '#3779b9 !important';
e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.transform = 'translateY(0)';
}} }}
> >

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

@ -91,7 +91,7 @@ const Pricing = () => {
padding: '15px', padding: '15px',
borderRadius: '30px', borderRadius: '30px',
fontWeight: 700, fontWeight: 700,
background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%)', background: '#3779b9',
backgroundSize: '200% auto', backgroundSize: '200% auto',
color: '#fff', color: '#fff',
transition: 'all 0.5s', transition: 'all 0.5s',

6
src/components/web-development-service/BannerBottom.tsx
View File

@ -99,18 +99,18 @@ const BannerBottom = () => {
onClick={() => setIsContactOpen(true)} onClick={() => setIsContactOpen(true)}
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important', background: '#3779b9 !important',
padding: '10px 25px', padding: '10px 25px',
borderRadius: '10px', borderRadius: '10px',
border: '1px solid rgba(55, 121, 185, 0.2)', border: '1px solid rgba(55, 121, 185, 0.2)',
transition: 'all 0.3s' transition: 'all 0.3s'
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important'; e.currentTarget.style.background = '#3779b9 !important';
e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.transform = 'translateY(-2px)';
}} }}
onMouseLeave={(e) => { onMouseLeave={(e) => {
e.currentTarget.style.background = 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important'; e.currentTarget.style.background = '#3779b9 !important';
e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.transform = 'translateY(0)';
}} }}
> >

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

@ -91,7 +91,7 @@ const Pricing = () => {
padding: '15px', padding: '15px',
borderRadius: '30px', borderRadius: '30px',
fontWeight: 700, fontWeight: 700,
background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%)', background: '#3779b9',
backgroundSize: '200% auto', backgroundSize: '200% auto',
color: '#fff', color: '#fff',
transition: 'all 0.5s', transition: 'all 0.5s',