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

Compare commits

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

2 Commits
4905708ac8 ... eb2c3f061f

Author SHA1 Message Date
akash
eb2c3f061f Merge branch 'team' of https://git.metatroncube.in/MetatroncubeSoftwareSolutions/MetatroncubeSolutions_Website into team 2026-02-20 21:51:55 +05:30
akash
6c861517f2 web services page new sections updated 2026-02-20 21:51:07 +05:30
12 changed files with 3029 additions and 361 deletions
Show Stats Expand all files Collapse all files

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

@ -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 />

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

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

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

@ -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;
@ -9645,3 +9645,30 @@ 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,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"

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

@ -12,7 +12,7 @@ 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">
@ -60,36 +60,101 @@ 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>
<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>
{/* 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="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 className="floating-item item-2">
<div className="floating-circle">
<img src="/assets/images/about/teamwork.webp" alt="Support" />
</div>
</div>
<div className="col-6 col-md-6 col-lg-3">
<div className="info-card ">
<h4>SEO Optimized</h4>
<div className="floating-content">
<h6>SEO Optimized </h6>
<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>
<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>
{/* 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>
</div>
</div>
</section>

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

@ -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,20 +90,91 @@ 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>
{/* ===== 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>
{/* 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>
))}
{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">
&#8592;
</button>
<button className="kf-control-btn" onClick={handleNext} aria-label="Next">
&#8594;
</button>
</div>
<div className="col-lg-6 col-md-6">
<div className="consen-button text-right">
<a
href="#"
className="kf-demo-btn"
onClick={(e) => {
e.preventDefault();
setShowPopup(true);
@ -71,65 +184,11 @@ const KeyFeatures = () => {
</a>
</div>
</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>
))}
</ul>
</div>
</div>
</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>
</>
);
};

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

@ -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,70 +30,64 @@ 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>
</div>
{/* Bottom Blur Overlay */}
<div className="card-bottom-info">
<div className="info-text">
<p>{item.category}</p>
<h3>{item.title}</h3>
</div>
<div className="case-button">
<Link href={item.link}></Link>
</div>
</div>
</div>
</div>
</SwiperSlide>
))}
</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>

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

@ -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" />
{loading ? (
<div className="text-center">
<p>Loading reviews...</p>
</div>
) : isClient && (
<Swiper {...testimonial_list_slider} className="testimonial_list">
{testimonials.map((item, id) => (
<SwiperSlide key={id}>
{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>{item.text}</p>
<p>{fullText}</p>
</div>
<div className="testimonial-title">
<h2>{item.author}</h2>
<span>{item.role}</span>
</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;

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

@ -12,89 +12,88 @@ 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."
/>
</div>
</div>
{/* Features Grid */}
<div className="row g-4 justify-content-center">
{/* 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: " Corporates & Enterprises",
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",
},
{
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>
].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 className="col-lg-12 pl-0 text-center">
<div className="abouts-button">
<div className="new-button mb-3">
</div>
</div>
<a className="mt-4"
href="#"
onClick={(e) => {
<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>
</div>
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
</>
);

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

@ -14,77 +14,67 @@ 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> */}
{/* <div class="about-shape-thumb3 bounce-animate4">
<img src="/assets/images/elements/element-2 .webp" alt="Decorative Shape 2" />
</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>
</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>
<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>
<h5>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>
{/* 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>
</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>
{/* 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>
</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>
{/* 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>
</div>
<div className="col-lg-12">
{/* 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="abouts-button">
<div className="new-button">
<a className="mt-2"
<a
href="#"
className="mt-0"
onClick={(e) => {
e.preventDefault();
setShowPopup(true);
@ -96,7 +86,6 @@ const Whychooseus = () => {
</div>
</div>
</div>
</div>
</div>
</div>

2458
styles/globals.css
View File

File diff suppressed because it is too large Load Diff