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=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 .submenu,
@ -121,7 +119,7 @@ i[class^=flaticon-],
:root {
--primary-font: 'Inter', sans-serif;
--secondary-font: 'Roboto', sans-serif;
--secondary-font: 'Inter', sans-serif;
--theme-color: #3779b9;
--theme-color-1: #1a1f2b;
@ -145,8 +143,22 @@ html {
/*---------------------------------
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 {
font-family: var(--secondary-font);
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: normal;
color: var(--theme-color-1);
@ -8361,4 +8373,30 @@ Animate wobble-vertical
.error-image img {
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 PageHeader from "@/components/common/PageHeader";
import BlogDetails from "@/components/blog/BlogDetails";
import MetatronInitializer from "@/components/MetatronInitializer";
interface BlogDetailsClientProps {
blog: any | undefined;
@ -40,7 +39,6 @@ export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
return (
<>
<MetatronInitializer />
<Header1 />
<main>
<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 PageHeader from "@/components/common/PageHeader";
import AccessibilityContent from "@/components/accessibility/AccessibilityContent";
import MetatronInitializer from "@/components/MetatronInitializer";
export const metadata: Metadata = {
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() {
return (
<>
<MetatronInitializer />
<Header1 />
<main>
<PageHeader

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

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

164
src/app/globals.css
View File

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

4
src/app/layout.tsx
View File

@ -2,7 +2,6 @@ import React from "react";
import type { Metadata } from "next";
import "./globals.css";
import Script from "next/script";
import MetatronInitializer from "@/components/MetatronInitializer";
import Preloader from "@/components/common/Preloader";
import BackToTop from "@/components/common/BackToTop";
@ -160,7 +159,7 @@ export default function RootLayout({
</head>
<body>
{/* ✅ GTM noscript */}
<noscript>
<iframe
@ -175,7 +174,6 @@ export default function RootLayout({
<BackToTop />
<SearchOverlay />
<Offcanvas />
<MetatronInitializer />
{children}
{/* 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 CounterAreaTwo from "@/components/home/CounterAreaTwo";
import HomeContactOne from "@/components/home/HomeContactOne";
import MetatronInitializer from "@/components/MetatronInitializer";
import HomeServiceOne from "@/components/home/HomeServiceOne";
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 PortfolioSection from "@/components/home/PortfolioSection";
import PageHeader from "@/components/common/PageHeader";
import MetatronInitializer from "@/components/MetatronInitializer";
export const metadata: Metadata = {
title: "Metatroncube: Leaders in Web &amp; Mobile Dev, SEO, Digital Marketing",
@ -17,7 +16,6 @@ export const metadata: Metadata = {
export default function PortfolioPage() {
return (
<>
<MetatronInitializer />
<Header1 />
<main>
<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 PageHeader from "@/components/common/PageHeader";
import PrivacyPolicyContent from "@/components/privacy/PrivacyPolicyContent";
import MetatronInitializer from "@/components/MetatronInitializer";
export const metadata: Metadata = {
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() {
return (
<>
<MetatronInitializer />
<Header1 />
<main>
<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"
value={formData.name}
onChange={handleChange}
suppressHydrationWarning={true}
/>
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
</div>
@ -161,6 +162,7 @@ const ContactSection = () => {
placeholder="Email Address"
value={formData.email}
onChange={handleChange}
suppressHydrationWarning={true}
/>
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
</div>
@ -172,6 +174,7 @@ const ContactSection = () => {
placeholder="Phone Number"
value={formData.phone}
onChange={handleChange}
suppressHydrationWarning={true}
/>
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
</div>
@ -181,6 +184,7 @@ const ContactSection = () => {
name="service"
value={formData.service}
onChange={handleChange}
suppressHydrationWarning={true}
style={{
width: '100%',
padding: '18px 25px',
@ -211,6 +215,7 @@ const ContactSection = () => {
rows={5}
value={formData.message}
onChange={handleChange}
suppressHydrationWarning={true}
></textarea>
{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
</div>
@ -224,7 +229,7 @@ const ContactSection = () => {
</div>
<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
</button>
</div>

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

@ -1,10 +1,67 @@
"use client";
import React from "react";
import React, { useEffect } from "react";
import Link from "next/link";
import { ourServices } from "@/utils/data";
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 (
<section
className="service-one-home"
@ -17,14 +74,13 @@ const HomeServiceOne: React.FC = () => {
<div className="sec-title">
<div className="sec-title__shape">
</div>
<h6 className="sec-title__tagline text-white">OUR SERVICES</h6>
<h3 className="sec-title__title text-white">We Shape the Perfect
Solution.</h3>
<h6 className="sec-title__tagline text-white wow fadeInUp" data-wow-delay="0ms">OUR SERVICES</h6>
<h3 className="sec-title__title text-white wow fadeInUp" data-wow-delay="200ms">We Shape the Perfect Solution.</h3>
</div>
</div>
</div>
<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">
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>
@ -36,7 +92,7 @@ const HomeServiceOne: React.FC = () => {
<div className="swiper-wrapper">
{ourServices.slice(0, 7).map((service, index) => {
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="home-services__card">
<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
);
if (!hasMounted) {
return null;
}
// Note: Removed if (!hasMounted) return null; to fix hydration mismatch
return (
<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 { BlogData } from "@/utils/constant.utils";
import Link from "next/link";
import Slider from "react-slick";
const allBlogs = [...BlogData].sort(
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
@ -68,6 +67,62 @@ const BlogSection = ({
return list;
}, [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) {
return null; // Avoid hydration mismatch
}
@ -112,25 +167,6 @@ const BlogSection = ({
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 (
<section className={`blog-section-one section-space ${isPaginated ? "pb-0 pt-0" : ""}`}>
<div className={`small-container ${isSlider ? "blog-slider-active" : ""}`}>
@ -146,34 +182,36 @@ const BlogSection = ({
</div>
)}
{isSlider ? (
<Slider {...sliderSettings} className="blog-slider-inner">
{currentBlogs.map((blog) => (
<div key={blog.id} className="blog-slider-item px-3">
<div className="blog-style-one relative overflow-hidden">
<Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
<img loading="lazy" 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>
<h5 className="blog-title mb-20 mt-15">
<Link href={`/${blog.slug}`}>{blog.title}</Link>
</h5>
<div className="blog-footer">
<div className="blog-link-learn">
<Link href={`/${blog.slug}`} className="learn-more-link">
Learn More <span>+</span>
</Link>
<div className="swiper blog-one__carousel">
<div className="swiper-wrapper">
{currentBlogs.map((blog, index) => (
<div key={blog.id} className="swiper-slide px-3">
<div className="blog-style-one relative overflow-hidden wow fadeInUp" data-wow-delay={`${index * 100}ms`}>
<Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
<img loading="lazy" 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>
<h5 className="blog-title mb-20 mt-15">
<Link href={`/${blog.slug}`}>{blog.title}</Link>
</h5>
<div className="blog-footer">
<div className="blog-link-learn">
<Link href={`/${blog.slug}`} className="learn-more-link">
Learn More <span>+</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
))}
</Slider>
))}
</div>
</div>
) : (
<div className="row g-4">
{currentBlogs.map((blog) => (

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

@ -1,6 +1,5 @@
"use client";
import React, { useState, useEffect } from "react";
import Slider from "react-slick";
import Link from "next/link";
import GoogleReviewsBranding from "@/components/common/GoogleReviewsBranding";
@ -26,36 +25,70 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
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
? [...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) {
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>
</div>
) : displayedReviews.length > 0 ? (
<Slider {...settings}>
{displayedReviews.map((slide, index) => {
const profileImg = getProfileImage(slide, index);
const name = slide.user?.name || slide.author_name || "Valued Client";
const rating = slide.rating || 5;
return (
<div key={index} style={{ outline: 'none', padding: '10px 15px 40px 10px' }}>
<div className="testimonials-two-box-solid">
<div className="author-image-solid">
<img loading="lazy" src={profileImg} alt={name} />
</div>
<div className="icon-quote-testi">
<i className="fa-solid fa-quote-right"></i>
</div>
<div className="content-solid">
<h4>{name}</h4>
<span className="tag">Verified Google Review</span>
<ul className="ratings-solid">
{[...Array(rating)].map((_, i) => (
<li key={i}><i className="fa-solid fa-star"></i></li>
))}
</ul>
<p>
&quot;{getReviewText(slide)}&quot;
</p>
<div className="swiper testimonials-two__carousel">
<div className="swiper-wrapper">
{displayedReviews.map((slide, index) => {
const profileImg = getProfileImage(slide, index);
const name = slide.user?.name || slide.author_name || "Valued Client";
const rating = slide.rating || 5;
return (
<div key={index} className="swiper-slide" style={{ outline: 'none', padding: '10px 15px 40px 10px' }}>
<div className="testimonials-two-box-solid wow fadeInUp" data-wow-delay={`${index * 100}ms`}>
<div className="author-image-solid">
<img loading="lazy" src={profileImg} alt={name} />
</div>
<div className="icon-quote-testi">
<i className="fa-solid fa-quote-right"></i>
</div>
<div className="content-solid">
<h4>{name}</h4>
<span className="tag">Verified Google Review</span>
<ul className="ratings-solid">
{[...Array(rating)].map((_, i) => (
<li key={i}><i className="fa-solid fa-star"></i></li>
))}
</ul>
<p>
&quot;{getReviewText(slide)}&quot;
</p>
</div>
</div>
</div>
</div>
);
})}
</Slider>
);
})}
</div>
<div className="testimonials-two__swiper-pagination swiper-pagination mt-40 text-center"></div>
</div>
) : (
<div className="text-center py-5">
<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)}
style={{
cursor: 'pointer',
background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important',
background: '#3779b9 !important',
padding: '10px 25px',
borderRadius: '10px',
border: '1px solid rgba(55, 121, 185, 0.2)',
transition: 'all 0.3s'
}}
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)';
}}
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)';
}}
>

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

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

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

@ -99,18 +99,18 @@ const BannerBottom = () => {
onClick={() => setIsContactOpen(true)}
style={{
cursor: 'pointer',
background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important',
background: '#3779b9 !important',
padding: '10px 25px',
borderRadius: '10px',
border: '1px solid rgba(55, 121, 185, 0.2)',
transition: 'all 0.3s'
}}
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)';
}}
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)';
}}
>

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

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