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

Compare commits

base: MetatroncubeSoftwareSolutions:eb2c3f061fd550abf1c0e94123eac02ad5ac335a
Branches Tags
MetatroncubeSoftwareSolutions:main
MetatroncubeSoftwareSolutions:team
..
compare: MetatroncubeSoftwareSolutions:4905708ac87f37ea97013ce00d5d783fb133ca13
Branches Tags
MetatroncubeSoftwareSolutions:team
MetatroncubeSoftwareSolutions:main

No commits in common. "eb2c3f061fd550abf1c0e94123eac02ad5ac335a" and "4905708ac87f37ea97013ce00d5d783fb133ca13" have entirely different histories.
eb2c3f061f ... 4905708ac8

12 changed files with 361 additions and 3029 deletions
Show Stats Expand all files Collapse all files

4
pages/website-development-service.js
View File

@ -32,10 +32,8 @@ 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 />

2
public/assets/css/responsive.css
View File

@ -6,7 +6,7 @@
}
a.logo_img img {
width: 200px !important;
width: 170px !important;
}
.header-button a {

31
public/assets/css/style.css
View File

@ -2821,7 +2821,7 @@ p.choose-text1 {
margin-bottom: 9px;
}
.why-choose-us-area .dreamit-icon-list ul li i {
zz .why-choose-us-area .dreamit-icon-list ul li i {
width: inherit;
height: inherit;
line-height: inherit;
@ -9644,31 +9644,4 @@ 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;
}
}

5
src/ConsenHead.js
View File

@ -42,11 +42,6 @@ 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"

111
src/components/Home/Banner1.js
View File

@ -12,14 +12,14 @@ const Banner1 = () => {
<>
<Swiper {...heroSlider} className="banner-list">
<SwiperSlide>
<div className="banner-area-1 d-flex align-items-center custom-banner">
<div className="banner-area-1 d-flex align-items-center custom-banner mb-3">
<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,98 +60,33 @@ const Banner1 = () => {
</Swiper>
<section
className="bottom-info-strip-section website-service-strip"
className="bottom-info-strip-section"
>
<div className="container">
<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 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>
</div>
{/* 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 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>
</div>
</div>
{/* 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 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>
</div>
</div>
</div>

2
src/components/Website-development-service/about-our-team.js
View File

@ -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();

205
src/components/Website-development-service/key-feacture.js
View File

@ -1,11 +1,10 @@
import { useState, useEffect, useCallback } from "react";
import { useState } from "react";
import ConsenHead from "@/src/ConsenHead";
import ContactPopup from "./ContactPopup";
const KeyFeatures = () => {
const [showPopup, setShowPopup] = useState(false);
const [currentIndex, setCurrentIndex] = useState(0);
const [visibleCols, setVisibleCols] = useState(2);
const [activeIndex, setActiveIndex] = useState(0);
const features = [
{
@ -42,47 +41,6 @@ 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
@ -90,105 +48,88 @@ 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."
/>
{/* ===== 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 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>
</div>
</div>
{/* 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>
{/* 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>
))}
{column.length < 2 && (
<div className="kf-card-placeholder" />
)}
</div>
))}
</ul>
</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">
&#8592;
</button>
<button className="kf-control-btn" onClick={handleNext} aria-label="Next">
&#8594;
</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>
</section>
</div>
<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>
</>
);
};

92
src/components/Website-development-service/our-development.js
View File

@ -1,11 +1,8 @@
"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, EffectCoverflow } from "swiper";
import { Autoplay } 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";
@ -19,7 +16,6 @@ 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);
@ -30,49 +26,63 @@ 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 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">
<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">
<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="gallery-carousel-wrapper">
<div className="row">
<Swiper
modules={[Autoplay, EffectCoverflow]}
effect="coverflow"
grabCursor={true}
centeredSlides={true}
slidesPerView={"auto"}
modules={[Autoplay]}
spaceBetween={30}
slidesPerView={3}
loop={true}
coverflowEffect={{
rotate: 0, /* Reduced for clarity */
stretch: 0,
depth: 200,
modifier: 1,
slideShadows: false, /* Remove internal shadows for crystal clear center slide */
}}
loopedSlides={caseStudies.length} // loop all slides
speed={4000} // sliding speed
autoplay={{
delay: 4000,
delay: 0, // no delay, continuous movement
disableOnInteraction: false,
pauseOnMouseEnter: false,
}}
className="gallery-swiper"
allowTouchMove={true}
breakpoints={{
0: { slidesPerView: 1 },
768: { slidesPerView: 3 },
1200: { slidesPerView: 3 },
}}
className="case-study owl-carousel"
>
{caseStudies.map((item, idx) => (
<SwiperSlide key={idx} className="gallery-slide">
<div className="gallery-card">
<div className="card-main-image">
{caseStudies.concat(caseStudies).map((item, idx) => (
<SwiperSlide key={idx}>
<div className="case-study-single-box" style={{ textAlign: "left" }}>
<div className="case-study-thumb">
<img src={item.img} alt={item.title} />
</div>
{/* Bottom Blur Overlay */}
<div className="card-bottom-info">
<div className="info-text">
<p>{item.category}</p>
<h3>{item.title}</h3>
<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>
</div>
</div>
@ -80,18 +90,10 @@ 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)} />
</>
);
}
}

186
src/components/Website-development-service/testimonial.js
View File

@ -1,172 +1,102 @@
"use client";
// import {testimonial_list_slider} from "@/src/sliderProps";
import { Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { useEffect, useState } from "react";
import "swiper/css";
import GoogleReviewsBranding from "../GoogleReviewsBranding";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react"
const testimonial_list_slider = {
spaceBetween: 30,
slidesPerView: 1,
navigation: false,
pagination: false,
pagination: { clickable: 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 align-items-center">
<div className="row">
<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">
{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 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>
</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="Businesses Grow"
alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
className="img-fluid"
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default TestimonialSection;
export default TestimonialSection;

145
src/components/Website-development-service/we-serve.js
View File

@ -12,86 +12,87 @@ 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="industry-infographic-area">
{/* Background Image Overlay */}
<div className="infographic-bg-overlay"></div>
<div className="testimonial-area">
<div className="container">
<div className="infographic-main-wrapper">
{/* Left Side: Central Heading Circle */}
<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>
</div>
<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 className="testi-shape-thumb1 rotateme">
<img
src="/assets/images/Website-development-service/section-3.webp"
alt="A diverse team engaged in a strategic discussion."
/>
</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 className="outer-glow-shade"></div>
</div>
</div>
))}
</div>
<div className="col-lg-12 pl-0 text-center">
<div className="abouts-button">
<div className="new-button mb-3">
{/* 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>
<a className="mt-4"
href="#"
onClick={(e) => {
e.preventDefault();
setShowPopup(true);
}}
>
See Case Studies in Your Industry
</a>
</div>
))}
</div>
</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>
</div>
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />

129
src/components/Website-development-service/why-choose-us.js
View File

@ -14,74 +14,85 @@ 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-v2 bg-white">
<div className="bg-text">DEVELOP</div>
<div className="about-area new-style bg-white">
<div className="container">
<div className="row align-items-center">
{/* Left Column: Staggered Cards */}
<div className="col-lg-6 col-md-12">
<div className="staggered-cards-container">
<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" />
{/* 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-thumb1 bounce-animate2">
<img src="/assets/images/about/about-shpe.png" alt="Decorative Shape 1" />
</div> */}
{/* <div class="about-shape-thumb3 bounce-animate4">
<img src="/assets/images/elements/element-2 .webp" alt="Decorative Shape 2" />
</div> */}
</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="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>
<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 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>
</div>
</div>

2478
styles/globals.css
View File

File diff suppressed because it is too large Load Diff