Compare commits
2 Commits
4905708ac8
...
eb2c3f061f
| Author | SHA1 | Date | |
|---|---|---|---|
|
eb2c3f061f | ||
|
|
6c861517f2 |
@ -32,8 +32,10 @@ const Index5 = () => {
|
||||
<div id="about"><Whychooseus /></div>
|
||||
<div id="team"><AboutOurTeam /></div>
|
||||
<div id="service"><WeServe /></div>
|
||||
<OurDevelopment />
|
||||
|
||||
<div id="blog"><WhoCanBenifit /></div>
|
||||
|
||||
<OurDevelopment />
|
||||
<KeyFeatures />
|
||||
<HookClosing />
|
||||
<TestimonialSection />
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
a.logo_img img {
|
||||
width: 170px !important;
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
.header-button a {
|
||||
|
||||
@ -2821,7 +2821,7 @@ p.choose-text1 {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
zz .why-choose-us-area .dreamit-icon-list ul li i {
|
||||
.why-choose-us-area .dreamit-icon-list ul li i {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
@ -9644,4 +9644,31 @@ ul.social-box li a:hover {
|
||||
}
|
||||
.blog-section.details .blog-content-text a {
|
||||
color: #3779b9;
|
||||
}
|
||||
}
|
||||
/* ===== Testimonial Section - Right Side Image Shape ===== */
|
||||
.benefit-image-layout {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.benefit-image-layout img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||
object-fit: cover;
|
||||
max-height: 520px;
|
||||
}
|
||||
|
||||
.benefit-image-layout::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: -15px;
|
||||
bottom: -15px;
|
||||
left: 15px;
|
||||
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||
background: #0d1b3e;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@ -42,6 +42,11 @@ new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.cre
|
||||
sizes="56x56"
|
||||
href="/assets/images/fav-icon/icon.webp"
|
||||
/>
|
||||
{/* Google Fonts */}
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
{/* bootstrap CSS */}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
||||
@ -12,14 +12,14 @@ const Banner1 = () => {
|
||||
<>
|
||||
<Swiper {...heroSlider} className="banner-list">
|
||||
<SwiperSlide>
|
||||
<div className="banner-area-1 d-flex align-items-center custom-banner mb-3">
|
||||
<div className="banner-area-1 d-flex align-items-center custom-banner">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-7 col-md-12">
|
||||
<div className="banner-content">
|
||||
<h3>METATRONCUBE SOLUTIONS</h3>
|
||||
<h1>
|
||||
Build a Website
|
||||
Build a Website
|
||||
<br />
|
||||
That Wins Customers & Grows Your Business!
|
||||
</h1>
|
||||
@ -60,33 +60,98 @@ const Banner1 = () => {
|
||||
</Swiper>
|
||||
|
||||
<section
|
||||
className="bottom-info-strip-section"
|
||||
className="bottom-info-strip-section website-service-strip"
|
||||
>
|
||||
<div className="container">
|
||||
<div className="bottom-info-strip mt-5">
|
||||
<div className="row justify-content-center g-3 text-center">
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<div className="info-card">
|
||||
<h4>Custom Solutions</h4>
|
||||
<p>Built for your goals</p>
|
||||
<div className="bottom-info-strip">
|
||||
<div className="row align-items-center g-4">
|
||||
{/* Left Column */}
|
||||
<div className="col-lg-3 col-md-12">
|
||||
<div className="info-column-left">
|
||||
<h5 className="script-font">We Guarantee</h5>
|
||||
<h4 className="title-font">Complete Digital Solutions</h4>
|
||||
<p className="desc-font">
|
||||
We create custom digital solutions tailored to your business goals, ensuring strategic design and seamless development from concept to launch. Every project is built for performance, scalability, and long-term growth.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<div className="info-card info-none-new">
|
||||
<h4>End-to-End Support</h4>
|
||||
<p>Design to launch</p>
|
||||
|
||||
{/* Center Column - Illustration */}
|
||||
<div className="col-lg-6 col-md-12 text-center">
|
||||
<div className="central-illustration-wrap position-relative">
|
||||
{/* Floating Circular Items in an Arc */}
|
||||
<div className="floating-items-container">
|
||||
<div className="floating-item item-1">
|
||||
<div className="floating-circle">
|
||||
<img src="/assets/images/about/teamwork.webp" alt="Map" />
|
||||
</div>
|
||||
<div className="floating-content">
|
||||
<h6>Custom Solutions</h6>
|
||||
<p>Built for your goals</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="floating-item item-2">
|
||||
<div className="floating-circle">
|
||||
<img src="/assets/images/about/teamwork.webp" alt="Support" />
|
||||
</div>
|
||||
<div className="floating-content">
|
||||
<h6>SEO Optimized </h6>
|
||||
<p> Better visibility</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="floating-item item-3">
|
||||
<div className="floating-circle">
|
||||
<img src="/assets/images/about/teamwork.webp" alt="SEO" />
|
||||
</div>
|
||||
<div className="floating-content">
|
||||
<h6>End-to-End Support</h6>
|
||||
<p>Design to launch</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="floating-item item-4">
|
||||
<div className="floating-circle">
|
||||
<img src="/assets/images/about/teamwork.webp" alt="Responsive" />
|
||||
</div>
|
||||
<div className="floating-content">
|
||||
<h6>Responsive Design</h6>
|
||||
<p>All devices perfect</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="/assets/images/home/delivery-illustration.webp"
|
||||
alt="Delivery Illustration"
|
||||
className="main-delivery-img img-fluid mt-2"
|
||||
onError={(e) => {
|
||||
e.target.src = 'https://img.freepik.com/free-vector/delivery-service-with-mask-concept_23-2148497067.jpg';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<div className="info-card ">
|
||||
<h4>SEO Optimized</h4>
|
||||
<p>Better visibility</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<div className="info-card info-none">
|
||||
<h4>Responsive Design</h4>
|
||||
<p>All devices perfect </p>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="col-lg-3 col-md-12">
|
||||
<div className="info-column-right text-md-end text-center">
|
||||
<h4 className="title-font">Optimized, Responsive & Future-Ready
|
||||
</h4>
|
||||
|
||||
<p className="desc-font mt-2">
|
||||
Our websites are SEO-optimized for better online visibility and designed to work perfectly across all devices. With a strong technical foundation, we deliver fast, responsive, and user-friendly digital experiences.
|
||||
</p>
|
||||
<div className="call-info-box d-flex align-items-center mt-3">
|
||||
<div className="call-icon-bg">
|
||||
<img src="/assets/images/home/scooter-icon.webp" alt="Scooter Icon" className="scooter-mini-icon" onError={(e) => { e.target.src = 'https://cdn-icons-png.flaticon.com/512/3132/3132688.png'; }} />
|
||||
</div>
|
||||
<div className="call-details ms-3">
|
||||
<span>Call Us Free :</span>
|
||||
<h3 className="phone-number"> +1-647-679-7651</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,7 +50,7 @@ const AboutOurTeam = () => {
|
||||
<div className="abouts-button">
|
||||
<div className="new-button">
|
||||
<Link legacyBehavior href="/about">
|
||||
<a className="mt-3"
|
||||
<a className="mt-3"
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import ConsenHead from "@/src/ConsenHead";
|
||||
import ContactPopup from "./ContactPopup";
|
||||
|
||||
const KeyFeatures = () => {
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [visibleCols, setVisibleCols] = useState(2);
|
||||
|
||||
const features = [
|
||||
{
|
||||
@ -41,6 +42,47 @@ const KeyFeatures = () => {
|
||||
},
|
||||
];
|
||||
|
||||
// Group features into columns of 2 cards each
|
||||
const columns = [];
|
||||
for (let i = 0; i < features.length; i += 2) {
|
||||
columns.push(features.slice(i, i + 2));
|
||||
}
|
||||
|
||||
const totalCols = columns.length; // 4 columns
|
||||
|
||||
// Responsive column count
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth <= 576) setVisibleCols(1);
|
||||
else if (window.innerWidth <= 1200) setVisibleCols(2);
|
||||
else setVisibleCols(2);
|
||||
};
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
const maxIndex = Math.max(0, totalCols - visibleCols);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
setCurrentIndex((prev) => (prev < maxIndex ? prev + 1 : 0));
|
||||
}, [maxIndex]);
|
||||
|
||||
const handlePrev = useCallback(() => {
|
||||
setCurrentIndex((prev) => (prev > 0 ? prev - 1 : maxIndex));
|
||||
}, [maxIndex]);
|
||||
|
||||
// Auto-slide every 5s
|
||||
useEffect(() => {
|
||||
const timer = setInterval(handleNext, 5000);
|
||||
return () => clearInterval(timer);
|
||||
}, [handleNext]);
|
||||
|
||||
// Clamp index on resize
|
||||
useEffect(() => {
|
||||
if (currentIndex > maxIndex) setCurrentIndex(maxIndex);
|
||||
}, [maxIndex, currentIndex]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConsenHead
|
||||
@ -48,88 +90,105 @@ const KeyFeatures = () => {
|
||||
description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth."
|
||||
/>
|
||||
|
||||
<div className="testimonial-area color-bg">
|
||||
<div className="container">
|
||||
<div className="row case-study-bg align-items-center mb-40">
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="consen-section-title">
|
||||
<h2>
|
||||
Why Our Websites <span>Stand Out</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="consen-button text-right">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
>
|
||||
Book a Free Demo Call
|
||||
</a>
|
||||
</div>
|
||||
{/* ===== Key Features Slider Section ===== */}
|
||||
<section className="kf-section kf-section-light">
|
||||
<div className="kf-container">
|
||||
{/* Left – Featured Image */}
|
||||
<div className="kf-image-column">
|
||||
<div className="kf-image-wrapper">
|
||||
<img
|
||||
src="/assets/images/Website-development-service/support.webp"
|
||||
alt="Key features of Metatroncube websites"
|
||||
className="kf-featured-image"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="row justify-content-center mb-4">
|
||||
<div className="col-lg-12">
|
||||
<div className="portfolio_nav">
|
||||
<div className="portfolio_menu">
|
||||
<ul className="menu-filtering d-flex justify-content-center flex-wrap gap-3 list-unstyled">
|
||||
{features.map((feature, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`c-pointer ${
|
||||
activeIndex === index ? "current_menu_item" : ""
|
||||
}`}
|
||||
onClick={() => setActiveIndex(index)}
|
||||
>
|
||||
{feature.text}
|
||||
</li>
|
||||
{/* Right – Slider */}
|
||||
<div className="kf-slider-column">
|
||||
<div className="kf-header">
|
||||
<span className="kf-subtitle">Key Features</span>
|
||||
<h2 className="kf-title">
|
||||
Why Our Websites <span className="kf-highlight">Stand Out</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="kf-slider-window">
|
||||
<div
|
||||
className="kf-slider-track"
|
||||
style={{
|
||||
transform: `translateX(calc(-${currentIndex} * (100% + 1.5rem) / ${visibleCols}))`,
|
||||
}}
|
||||
>
|
||||
{columns.map((column, colIdx) => (
|
||||
<div
|
||||
key={colIdx}
|
||||
className="kf-column-wrapper"
|
||||
style={{
|
||||
flexBasis: `calc((100% - (${visibleCols} - 1) * 1.5rem) / ${visibleCols})`,
|
||||
width: `calc((100% - (${visibleCols} - 1) * 1.5rem) / ${visibleCols})`,
|
||||
}}
|
||||
>
|
||||
{column.map((feature, idx) => (
|
||||
<div key={idx} className="kf-card">
|
||||
<div className="kf-icon-box">
|
||||
<img
|
||||
src={feature.img}
|
||||
alt={feature.text}
|
||||
className="kf-card-img"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="kf-card-name">{feature.text}</h3>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{column.length < 2 && (
|
||||
<div className="kf-card-placeholder" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dots */}
|
||||
<div className="kf-dots">
|
||||
{Array.from({ length: maxIndex + 1 }).map((_, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`kf-dot${currentIndex === idx ? " kf-dot-active" : ""}`}
|
||||
onClick={() => setCurrentIndex(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Prev / Next controls + Book Demo */}
|
||||
<div className="kf-controls-row">
|
||||
<div className="kf-controls">
|
||||
<button className="kf-control-btn" onClick={handlePrev} aria-label="Previous">
|
||||
←
|
||||
</button>
|
||||
<button className="kf-control-btn" onClick={handleNext} aria-label="Next">
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className="kf-demo-btn"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
>
|
||||
Book a Free Demo Call
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active Card */}
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-3 col-md-4 col-sm-6 d-flex">
|
||||
<div className="testimonial-single-box text-center p-4 shadow rounded w-100 d-flex flex-column justify-content-between">
|
||||
<div className="testimonial-content1">
|
||||
<img
|
||||
src={features[activeIndex].img}
|
||||
alt={features[activeIndex].text}
|
||||
className="img-fluid"
|
||||
/>
|
||||
<h4 className="testimonial-text new-text">
|
||||
{features[activeIndex].text}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
|
||||
<style jsx>{`
|
||||
.tab-pill {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.tab-pill:hover {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Autoplay } from "swiper";
|
||||
import { Autoplay, EffectCoverflow } from "swiper";
|
||||
import "swiper/css";
|
||||
import "swiper/css/effect-coverflow";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/navigation";
|
||||
import { useState } from "react";
|
||||
import ContactPopup from "./ContactPopup";
|
||||
import Link from "next/link";
|
||||
@ -16,6 +19,7 @@ const caseStudies = [
|
||||
{ id: 5, img: "/assets/images/Website-development-service/support.webp", category: " Support & Growth", title: " Continuous updates & maintenance", link: "/portfolio-details" },
|
||||
];
|
||||
|
||||
|
||||
export default function OurDevelopment() {
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
|
||||
@ -26,63 +30,49 @@ export default function OurDevelopment() {
|
||||
description="Explore case studies showcasing how Metatroncube Software Solutions delivers innovative, user-centric digital products that drive growth."
|
||||
/>
|
||||
|
||||
<div className="case-study-area color-bg">
|
||||
<div className="container">
|
||||
<div className="row case-study-bg align-items-center mb-40">
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="consen-section-title">
|
||||
<div className="case-study-area gallery-museum-theme">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row mb-40 text-center">
|
||||
<div className="col-lg-12">
|
||||
<div className="consen-section-title white">
|
||||
<h2>A Step-by-Step Process <span> for Website Success</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="consen-button text-right">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
>
|
||||
Start My Website Journey
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="gallery-carousel-wrapper">
|
||||
<Swiper
|
||||
modules={[Autoplay]}
|
||||
spaceBetween={30}
|
||||
slidesPerView={3}
|
||||
modules={[Autoplay, EffectCoverflow]}
|
||||
effect="coverflow"
|
||||
grabCursor={true}
|
||||
centeredSlides={true}
|
||||
slidesPerView={"auto"}
|
||||
loop={true}
|
||||
loopedSlides={caseStudies.length} // loop all slides
|
||||
speed={4000} // sliding speed
|
||||
coverflowEffect={{
|
||||
rotate: 0, /* Reduced for clarity */
|
||||
stretch: 0,
|
||||
depth: 200,
|
||||
modifier: 1,
|
||||
slideShadows: false, /* Remove internal shadows for crystal clear center slide */
|
||||
}}
|
||||
autoplay={{
|
||||
delay: 0, // no delay, continuous movement
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: false,
|
||||
}}
|
||||
allowTouchMove={true}
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1 },
|
||||
768: { slidesPerView: 3 },
|
||||
1200: { slidesPerView: 3 },
|
||||
}}
|
||||
className="case-study owl-carousel"
|
||||
className="gallery-swiper"
|
||||
>
|
||||
{caseStudies.concat(caseStudies).map((item, idx) => (
|
||||
<SwiperSlide key={idx}>
|
||||
<div className="case-study-single-box" style={{ textAlign: "left" }}>
|
||||
<div className="case-study-thumb">
|
||||
{caseStudies.map((item, idx) => (
|
||||
<SwiperSlide key={idx} className="gallery-slide">
|
||||
<div className="gallery-card">
|
||||
<div className="card-main-image">
|
||||
<img src={item.img} alt={item.title} />
|
||||
<div className="case-study-content">
|
||||
<div className="case-study-title content-new">
|
||||
<h6>{item.category}</h6>
|
||||
<h3>{item.title}</h3>
|
||||
</div>
|
||||
<div className="case-button">
|
||||
<Link href={item.link}></Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Blur Overlay */}
|
||||
<div className="card-bottom-info">
|
||||
<div className="info-text">
|
||||
<p>{item.category}</p>
|
||||
<h3>{item.title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,10 +80,18 @@ export default function OurDevelopment() {
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-5">
|
||||
<div className="new-button">
|
||||
<a href="#" className="mt-0" onClick={(e) => { e.preventDefault(); setShowPopup(true); }}>
|
||||
Start My Website Journey
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,102 +1,172 @@
|
||||
// import {testimonial_list_slider} from "@/src/sliderProps";
|
||||
"use client";
|
||||
import { Autoplay } from "swiper";
|
||||
import { Swiper, SwiperSlide } from "swiper/react"
|
||||
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import "swiper/css";
|
||||
import GoogleReviewsBranding from "../GoogleReviewsBranding";
|
||||
import Link from "next/link";
|
||||
|
||||
const testimonial_list_slider = {
|
||||
spaceBetween: 30,
|
||||
slidesPerView: 1,
|
||||
navigation: false,
|
||||
pagination: { clickable: false },
|
||||
pagination: false,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
modules: [Autoplay],
|
||||
};
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: 1,
|
||||
text: " Our new website completely transformed the way customers find and connect with us. The design is modern, fast, and user-friendly. Within just two months of launch, our inquiries more than doubled, giving us more qualified leads and helping our business grow faster than we expected. ",
|
||||
author: "Startup Owner",
|
||||
role: "Happy Customer",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "Launching our online store with their team was the best decision we made. The site is beautifully designed, easy to manage, and customers love the seamless shopping experience. After going live, our sales jumped significantly, and we gained more repeat buyers than ever before.",
|
||||
author: "E-commerce Brand Sales",
|
||||
role: "Happy Customer",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "The team was professional, responsive, and consistently went above and beyond to deliver what we needed. Every detail was handled with care, and they completed the project ahead of schedule. The final outcome was polished, effective, and helped us showcase our brand with confidence.",
|
||||
author: "Corporate Client",
|
||||
role: "Happy Customer",
|
||||
}
|
||||
];
|
||||
|
||||
const TestimonialSection = () => {
|
||||
const [reviews, setReviews] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
async function loadReviews() {
|
||||
try {
|
||||
const res = await fetch("/api/reviews");
|
||||
const data = await res.json();
|
||||
const cleaned = (data.reviews || []).filter(r =>
|
||||
(r.text || r.description || r.snippet || r.review_text || r.body || r.content) &&
|
||||
r.rating >= 4
|
||||
);
|
||||
setReviews(cleaned);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch reviews", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadReviews();
|
||||
}, []);
|
||||
|
||||
const displayedReviews = reviews.length > 0 && reviews.length < 3
|
||||
? [...reviews, ...reviews, ...reviews]
|
||||
: reviews;
|
||||
|
||||
function renderStars(rating) {
|
||||
return [...Array(5)].map((_, i) => (
|
||||
<span key={i} className={`fa fa-star ${i < rating ? "text-warning" : ""}`}></span>
|
||||
));
|
||||
}
|
||||
|
||||
function getReviewText(r) {
|
||||
return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
|
||||
}
|
||||
|
||||
function getProfileImage(r) {
|
||||
const url = r.profile_photo_url || r.author_profile_photo_url || r.user?.thumbnail || r.user?.profile_photo_url || r.thumbnail || r.profile_picture || r.avatar;
|
||||
if (!url) return null;
|
||||
if (url.startsWith("http")) return url;
|
||||
return `https://lh3.googleusercontent.com/${url}`;
|
||||
}
|
||||
|
||||
function getInitials(name) {
|
||||
if (!name) return "U";
|
||||
return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="team_area color-bg" id="team">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="consen-section-title pb-40">
|
||||
{/* <h5>OUR TESTIMONIALS</h5> */}
|
||||
<h2> Hear from Businesses </h2>
|
||||
<h2>
|
||||
{" "}
|
||||
<span> We’ve Helped Grow</span>
|
||||
</h2>
|
||||
<GoogleReviewsBranding />
|
||||
</div>
|
||||
<div className="row">
|
||||
|
||||
<div className="col-lg-12">
|
||||
<div className="testimonial-icon-thumb">
|
||||
<img src="/assets/images/elements/quotation.webp" alt />
|
||||
</div>
|
||||
<div className="testimonial-ratting">
|
||||
<i className="fas fa-star" />
|
||||
<i className="fas fa-star" />
|
||||
<i className="fas fa-star" />
|
||||
<i className="fas fa-star" />
|
||||
<i className="fas fa-star" />
|
||||
</div>
|
||||
<Swiper {...testimonial_list_slider} className="testimonial_list">
|
||||
{testimonials.map((item, id) => (
|
||||
<SwiperSlide key={id}>
|
||||
<div className="testimonial-content">
|
||||
<div className="testimonial-text">
|
||||
<p>{item.text}</p>
|
||||
</div>
|
||||
<div className="testimonial-title">
|
||||
<h2>{item.author}</h2>
|
||||
<span>{item.role}</span>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
{loading ? (
|
||||
<div className="text-center">
|
||||
<p>Loading reviews...</p>
|
||||
</div>
|
||||
) : isClient && (
|
||||
<Swiper {...testimonial_list_slider} className="testimonial_list">
|
||||
{displayedReviews.map((r, index) => {
|
||||
const fullText = getReviewText(r);
|
||||
const profileImg = getProfileImage(r);
|
||||
const name = r.user?.name || r.author_name || "Customer";
|
||||
|
||||
return (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="google-review-card-service">
|
||||
<div className="google-review-header d-flex align-items-center mb-3">
|
||||
<div className="google-avatar" style={{
|
||||
width: '55px',
|
||||
height: '55px',
|
||||
minWidth: '55px',
|
||||
borderRadius: '50%',
|
||||
overflow: 'hidden',
|
||||
background: '#eee',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px solid #ddd'
|
||||
}}>
|
||||
{profileImg ? (
|
||||
<img
|
||||
src={profileImg}
|
||||
alt={name}
|
||||
onError={(e) => (e.target.style.display = 'none')}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<span style={{ fontSize: '18px', fontWeight: 'bold', color: '#555' }}>{getInitials(name)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="google-user-info ml-3">
|
||||
<h4 className="google-name" style={{ fontSize: '18px', fontWeight: '700', margin: 0, color: '#333', lineHeight: '1.2' }}>
|
||||
{name}
|
||||
</h4>
|
||||
<div className="google-stars" style={{ fontSize: '14px', marginTop: '4px', color: '#ffc107' }}>
|
||||
{renderStars(r.rating)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonial-content">
|
||||
<div className="testimonial-text">
|
||||
<p>{fullText}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
);
|
||||
})}
|
||||
</Swiper>
|
||||
)}
|
||||
|
||||
<div className="new-button d-flex justify-content-center pb-30">
|
||||
<Link
|
||||
legacyBehavior
|
||||
href="https://www.google.com/maps/place/Metatron+Cube+Software+Solutions/@34.0518468,-56.3267266,3z/data=!4m8!3m7!1s0x89d4d4dc0e01490b:0xf0ca6a97298a109c!8m2!3d34.0518468!4d-56.3267266!9m1!1b1!16s%2Fg%2F11k197xnvf?entry=ttu&g_ep=EgoyMDI1MTAxMy4wIKXMDSoASAFQAw%3D%3D"
|
||||
>
|
||||
<a target="_blank">Review us on Google</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-12 text-center">
|
||||
<div className="process-text">
|
||||
<img
|
||||
src="/assets/images/Website-development-service/section-8.webp"
|
||||
alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
|
||||
alt="Businesses Grow"
|
||||
className="img-fluid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
export default TestimonialSection;
|
||||
export default TestimonialSection;
|
||||
|
||||
@ -12,87 +12,86 @@ const WeServe = () => {
|
||||
<>
|
||||
<ConsenHead title="About - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo" description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth." />
|
||||
|
||||
<div className="testimonial-area">
|
||||
<div className="industry-infographic-area">
|
||||
{/* Background Image Overlay */}
|
||||
<div className="infographic-bg-overlay"></div>
|
||||
|
||||
<div className="container">
|
||||
<div className="row align-items-center mb-3 text-center justify-content-center">
|
||||
<div className="col-lg-7 col-md-6">
|
||||
<div className="consen-section-title">
|
||||
<h2>
|
||||
Websites for Every <span> Business Type</span>
|
||||
</h2>
|
||||
<div className="infographic-main-wrapper">
|
||||
{/* Left Side: Central Heading Circle */}
|
||||
|
||||
<div className="infographic-left-side">
|
||||
<div className="central-circle-container">
|
||||
<div className="central-circle-outer-ring">
|
||||
<div className="central-circle">
|
||||
<div className="central-content">
|
||||
<i className="bi bi-globe"></i>
|
||||
<h3>Websites for Every <br /> Business Type</h3>
|
||||
</div>
|
||||
<div className="pulse-ring"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="outer-glow-shade"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="testi-shape-thumb1 rotateme">
|
||||
<img
|
||||
src="/assets/images/Website-development-service/section-3.webp"
|
||||
alt="A diverse team engaged in a strategic discussion."
|
||||
/>
|
||||
{/* Right Side: Industry Items Arc */}
|
||||
<div className="infographic-right-side">
|
||||
<div className="semi-circle-path"></div>
|
||||
<div className="industries-arc">
|
||||
{[
|
||||
{
|
||||
num: "01",
|
||||
img: "/assets/images/Website-development-service/corporates.webp",
|
||||
text: "Enterprises & Corporates",
|
||||
},
|
||||
{
|
||||
num: "02",
|
||||
img: "/assets/images/Website-development-service/retail.webp",
|
||||
text: "Retail & E-commerce",
|
||||
},
|
||||
{
|
||||
num: "03",
|
||||
img: "/assets/images/Website-development-service/healthcare.webp",
|
||||
text: "Healthcare & Clinics",
|
||||
},
|
||||
{
|
||||
num: "04",
|
||||
img: "/assets/images/Website-development-service/education.webp",
|
||||
text: "Education & Training",
|
||||
},
|
||||
{
|
||||
num: "05",
|
||||
img: "/assets/images/Website-development-service/travel.webp",
|
||||
text: "Hospitality & Travel",
|
||||
}
|
||||
].map((industry, index) => (
|
||||
<div key={index} className={`industry-arc-item item-${index + 1}`}>
|
||||
<div className="item-junction-dot"></div>
|
||||
<div className="item-connector-arm"></div>
|
||||
<div className="item-icon-wrap">
|
||||
<img src={industry.img} alt={industry.text} />
|
||||
</div>
|
||||
<div className="item-content-arrow">
|
||||
<div className="item-step-tag">{industry.num}</div>
|
||||
<h4>{industry.text}</h4>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="row g-4 justify-content-center">
|
||||
{[
|
||||
{
|
||||
img: "/assets/images/Website-development-service/corporates.webp",
|
||||
text: " Corporates & Enterprises",
|
||||
},
|
||||
{
|
||||
img: "/assets/images/Website-development-service/retail.webp",
|
||||
text: "Retail & E-commerce",
|
||||
},
|
||||
{
|
||||
img: "/assets/images/Website-development-service/healthcare.webp",
|
||||
text: "Healthcare & Clinics",
|
||||
},
|
||||
{
|
||||
img: "/assets/images/Website-development-service/education.webp",
|
||||
text: " Education & Training ",
|
||||
},
|
||||
{
|
||||
img: "/assets/images/Website-development-service/travel.webp",
|
||||
text: "Hospitality & Travel",
|
||||
},
|
||||
{
|
||||
img: "/assets/images/Website-development-service/startups.webp",
|
||||
text: "Startups & Entrepreneurs",
|
||||
},
|
||||
{
|
||||
img: "/assets/images/Website-development-service/media.webp",
|
||||
text: "Media & Entertainment",
|
||||
}
|
||||
].map((feature, index) => (
|
||||
<div key={index} className="col-lg-3 col-md-4 col-sm-6 d-flex col-6">
|
||||
<div className="testimonial-single-box text-center p-4 shadow rounded w-100 d-flex flex-column justify-content-between">
|
||||
<div className="testimonial-content1">
|
||||
<img
|
||||
src={feature.img}
|
||||
alt={feature.text}
|
||||
className="img-fluid"
|
||||
/>
|
||||
<h4 className="testimonial-text new-text">{feature.text}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="infographic-footer text-center">
|
||||
<div className="new-button">
|
||||
<a className="mt-0" href="#" onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}>
|
||||
See Case Studies in Your Industry
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12 pl-0 text-center">
|
||||
<div className="abouts-button">
|
||||
<div className="new-button mb-3">
|
||||
|
||||
<a className="mt-4"
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
>
|
||||
See Case Studies in Your Industry
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
|
||||
@ -14,85 +14,74 @@ const Whychooseus = () => {
|
||||
description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth."
|
||||
/>
|
||||
|
||||
<div className="about-area new-style bg-white">
|
||||
<div className="about-area new-style-v2 bg-white">
|
||||
<div className="bg-text">DEVELOP</div>
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
|
||||
<div class="col-lg-6 col-md-12 text-center">
|
||||
<div class="dreamit-about-thumb-new mr-lg-4">
|
||||
<img src="/assets/images/Website-development-service/section-1.webp" alt="About Metatroncube Canada" />
|
||||
{/* Left Column: Staggered Cards */}
|
||||
<div className="col-lg-6 col-md-12">
|
||||
<div className="staggered-cards-container">
|
||||
|
||||
{/* <div class="about-shape-thumb1 bounce-animate2">
|
||||
<img src="/assets/images/about/about-shpe.png" alt="Decorative Shape 1" />
|
||||
</div> */}
|
||||
{/* Card 1: Custom Design (Column 1 - Shifted Up) */}
|
||||
<div className="staggered-card card-col-1 card-row-1">
|
||||
<div className="card-icon">
|
||||
<img src="/assets/images/about/innovative.webp" alt="Custom Design" />
|
||||
</div>
|
||||
<h5>Custom Design</h5>
|
||||
<p>Tailored to your brand identity.</p>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Fast & Responsive (Column 2 - Shifted Down) */}
|
||||
<div className="staggered-card card-col-2 card-row-1">
|
||||
<div className="card-icon">
|
||||
<img src="/assets/images/about/teamwork.webp" alt="Fast & Responsive" />
|
||||
</div>
|
||||
<h5>Fast & Responsive</h5>
|
||||
<p>Websites that work on every device.</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3: E-commerce Ready (Column 1 - Shifted Up) */}
|
||||
<div className="staggered-card card-col-1 card-row-2">
|
||||
<div className="card-icon">
|
||||
<img src="/assets/images/about/future.webp" alt="E-commerce Ready" />
|
||||
</div>
|
||||
<h5>E-commerce Ready</h5>
|
||||
<p>Online stores that boost sales.</p>
|
||||
</div>
|
||||
|
||||
{/* Card 4: Secure & Scalable (Column 2 - Shifted Down) */}
|
||||
<div className="staggered-card card-col-2 card-row-2">
|
||||
<div className="card-icon">
|
||||
<img src="/assets/images/about/future.webp" alt="Secure & Scalable" />
|
||||
</div>
|
||||
<h5>Secure & Scalable</h5>
|
||||
<p>Built to last and grow with you.</p>
|
||||
</div>
|
||||
|
||||
{/* <div class="about-shape-thumb3 bounce-animate4">
|
||||
<img src="/assets/images/elements/element-2 .webp" alt="Decorative Shape 2" />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="consen-section-title mb-4">
|
||||
<div className="consen-section-title">
|
||||
<h2>Why Partner With Our <span>Web Development Team?</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Column: Text Content */}
|
||||
<div className="col-lg-6 col-md-12">
|
||||
<div className="consen-section-title pl-lg-5">
|
||||
<h2>Why Partner With Our <span>Web Development Team?</span></h2>
|
||||
<p className="section-desc pt-0 pb-0">
|
||||
At Metatron Cube Solutions, we deliver innovative, custom-designed websites that reflect your brand identity and perform seamlessly across all devices.
|
||||
</p>
|
||||
|
||||
<div className="row g-3">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12">
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<img src="/assets/images/about/innovative.webp" alt="Innovative technology strategy by Metatron Cube Solutions." className="me-3 pr-3" />
|
||||
<div>
|
||||
<h5 className="consone-des">Custom Design</h5>
|
||||
<p>Tailored to your brand identity.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6 col-md-6 col-sm-12">
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<img src="/assets/images/about/teamwork.webp" alt="Teamwork at Metatron Cube Solutions." className="me-3 pr-3" />
|
||||
<div>
|
||||
<h5 className="consone-des">Fast & Responsive</h5>
|
||||
<p>Websites that work on every device.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6 col-md-6 col-sm-12">
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<img src="/assets/images/about/future.webp" alt="Future-ready innovation strategies by Metatron Cube Solutions." className="me-3 pr-3" />
|
||||
<div>
|
||||
<h5 className="consone-des">E-commerce Ready</h5>
|
||||
<p>Online stores that boost sales.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6 col-md-6 col-sm-12">
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<img src="/assets/images/about/future.webp" alt="Future-ready digital innovation by Metatron Cube Solutions." className="me-3 pr-3" />
|
||||
<div>
|
||||
<h5 className="consone-des">Secure & Scalable</h5>
|
||||
<p>Built to last and grow with you.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-12">
|
||||
<div className="abouts-button">
|
||||
<div className="new-button">
|
||||
<a className="mt-2"
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
>
|
||||
Let’s Start Building Your Website
|
||||
</a>
|
||||
</div>
|
||||
<div className="abouts-button">
|
||||
<div className="new-button">
|
||||
<a
|
||||
href="#"
|
||||
className="mt-0"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
>
|
||||
Let’s Start Building Your Website
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
2478
styles/globals.css
2478
styles/globals.css
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user