+
+ {/* Left – Single Full Image */}
+
+
+
+
+ {/* Right – Slider */}
+
+
+ BENEFITS
+
+ What You Get With Our App Development
+
+
+
+
+
+ {columns.map((column, colIdx) => (
+
+ {column.map((feature, idx) => (
+
+
+
+
+
{feature.text}
+
+ ))}
+ {column.length < 2 &&
}
+
+ ))}
+
+
+
+ {/* Dots */}
+
+ {Array.from({ length: maxIndex + 1 }).map((_, idx) => (
+
setCurrentIndex(idx)}
+ />
+ ))}
+
+
+ {/* Controls + CTA */}
+
+
+
+ ←
+
+
+ →
+
+
+
setIsContactOpen(true)} className="kf-demo-btn">
+ Book Free Strategy Call
+
+
+
+
+
setIsContactOpen(false)} />
+
+
+ );
+};
+
+export default KeyFeatures;
diff --git a/src/components/mobile-app-development-service/Pricing.tsx b/src/components/mobile-app-development-service/Pricing.tsx
new file mode 100644
index 0000000..1ead6ca
--- /dev/null
+++ b/src/components/mobile-app-development-service/Pricing.tsx
@@ -0,0 +1,101 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
+import { pricingPlans } from '@/assets/data';
+
+const Pricing = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Flexible Pricing for Your Business Needs
+
+
+
+
+
+
+
+ {pricingPlans.map((plan, index) => (
+
+
+ {plan.isPopular && (
+
+ Popular
+
+ )}
+
+
{plan.plan}
+
+
${plan.price}
+ /{plan.period}
+
+
+
+
+ {plan.features.map((feature, i) => (
+
+
+ ))}
+
+
+
+
+
+
+ ))}
+
+
+ );
+};
+
+export default Pricing;
diff --git a/src/components/mobile-app-development-service/Service.tsx b/src/components/mobile-app-development-service/Service.tsx
new file mode 100644
index 0000000..7978b8e
--- /dev/null
+++ b/src/components/mobile-app-development-service/Service.tsx
@@ -0,0 +1,69 @@
+"use client";
+import React, { useState } from 'react';
+import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
+import ServiceCard from '@/components/mobile-app-development-service/support/cards/ServiceCard';
+import { services } from '@/assets/data';
+import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';
+
+const Service = () => {
+ const [isContactOpen, setIsContactOpen] = useState(false);
+ return (
+
+
+
+ {/* Header + intro image row */}
+
+
+
+
+
+
+
+ App Development Services Designed for Business Growth
+
+ {/*
+
+
+ From cybersecurity and cloud solutions to software development and managed support — we deliver end-to-end IT services that drive growth, efficiency and resilience for your business.
+
+ */}
+
+
+
+
+
+
+
+
+
+ {/* Service Cards */}
+
+ {services.slice(0, 6).map((service, i) => (
+
+
+ ))}
+
+
+ {/* Bottom CTA Area */}
+
+
+
+ setIsContactOpen(true)} className="vl-btn1">
+ Request Free Proposal
+
+
+
+
+
setIsContactOpen(false)} />
+
+ );
+};
+
+export default Service;
diff --git a/src/components/mobile-app-development-service/Testimonial.tsx b/src/components/mobile-app-development-service/Testimonial.tsx
new file mode 100644
index 0000000..022c086
--- /dev/null
+++ b/src/components/mobile-app-development-service/Testimonial.tsx
@@ -0,0 +1,227 @@
+"use client";
+import React, { useState, useRef, useEffect } from 'react';
+import Slider from 'react-slick';
+import Link from 'next/link';
+import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
+import GoogleReviewsBranding from '@/components/mobile-app-development-service/support/common/GoogleReviewsBranding';
+
+const Testimonial = () => {
+ const [reviews, setReviews] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const sliderRef = useRef(null);
+
+ useEffect(() => {
+ async function loadReviews() {
+ try {
+ const res = await fetch("/api/reviews");
+ const data = await res.json();
+ // Filter for reviews with text (showing ALL reviews as requested)
+ const cleaned = (data.reviews || []).filter((r: any) =>
+ (r.snippet || r.text || r.review_text || r.description || r.body || r.content)
+ );
+ setReviews(cleaned);
+ } catch (error) {
+ console.error("Failed to fetch reviews", error);
+ } finally {
+ setLoading(false);
+ }
+ }
+ loadReviews();
+ }, []);
+
+ // If reviews are sparse, duplicate them to ensure infinite slider works perfectly
+ const displayedReviews = reviews.length > 0 && reviews.length < 3
+ ? [...reviews, ...reviews, ...reviews]
+ : reviews;
+
+ const settings = {
+ dots: false,
+ arrows: false,
+ infinite: displayedReviews.length > 1,
+ speed: 600,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ autoplay: true,
+ autoplaySpeed: 5000,
+ responsive: [
+ {
+ breakpoint: 1024,
+ settings: {
+ slidesToShow: 1,
+ }
+ }
+ ]
+ };
+
+ function getReviewText(r: any) {
+ return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
+ }
+
+ function getProfileImage(r: any) {
+ 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 || r.author_image;
+ if (!url) return null;
+ if (url.startsWith("http")) return url;
+ return `https://lh3.googleusercontent.com/${url}`;
+ }
+
+ function getInitials(name: string) {
+ if (!name) return "U";
+ return name.split(' ').map(n => n.charAt(0)).join('').substring(0, 2).toUpperCase();
+ }
+
+ return (
+
+
+
+ {/* Section Header */}
+
+
+
+
+
+
+
+ What Our Clients Say
+
+
+
+
+
+
+
+
+
+
+ {/* Content Row */}
+
+ {/* Left: Single Primary Image */}
+
+
+
+
+
+
+
+ {/* Right: Slider */}
+
+
+ {loading ? (
+
+
+ Loading reviews...
+
+
Fetching live Google reviews...
+
+ ) : displayedReviews.length > 0 ? (
+
+
+
+ {displayedReviews.map((slide, index) => {
+ const profileImg = getProfileImage(slide);
+ const name = slide.user?.name || slide.author_name || "Valued Client";
+ return (
+
+
+
+
+ {/* Stars */}
+
+ {[...Array(slide.rating || 5)].map((_, i) => (
+
+
+
+ "{getReviewText(slide)}"
+
+
+
+
+
+ {profileImg ? (
+
+ ) : (
+
{getInitials(name)}
+ )}
+
+
+
{name}
+ {/*
+
+
Verified Google Reviewer
+
*/}
+
+
+
+
+ ) : (
+
+
Professional services you can trust.
+
+ )}
+
+ {/* Google Action Button */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* LEFT: Full Image */}
+
+
+
+
+
+ {/* RIGHT: Heading + Paragraph + Steps List + CTA */}
+
+
+
+
+
+
+ Our Proven App Development Process
+
+
+
+
+ {/* Step List */}
+
+ {[
+ { num: '01', title: 'Requirement Analysis', desc: 'Understanding your business model, audience, and goals.' },
+
+ { num: '02', title: 'Wireframing & UI/UX Design', desc: 'Creating user-friendly and engaging app layouts.' },
+
+ { num: '03', title: ' Development', desc: 'Frontend & backend development using modern frameworks.' },
+
+ { num: '04', title: 'Testing & Quality Assurance', desc: 'Thorough testing for performance, security, and usability.' },
+
+ { num: '05', title: 'Deployment', desc: 'App Store & Google Play submission support.' },
+
+ { num: '06', title: 'Post-Launch Support', desc: 'Ongoing maintenance and feature enhancements.' },
+ ].map((step, i) => (
+
+
{step.num}
+
+
{step.title}
+
{step.desc}
+
+
+ ))}
+
+
+
+
+ setIsContactOpen(true)} className="vl-btn1">
+ Let’s Build Your App
+
+
+
+
+
+ {/*
*/}
+
+
setIsContactOpen(false)} />
+
+ );
+};
+
+export default Work;
diff --git a/src/components/mobile-app-development-service/WorkProcess.tsx b/src/components/mobile-app-development-service/WorkProcess.tsx
new file mode 100644
index 0000000..a75b395
--- /dev/null
+++ b/src/components/mobile-app-development-service/WorkProcess.tsx
@@ -0,0 +1,100 @@
+"use client";
+import React from 'react';
+import Slider from 'react-slick';
+import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
+import CaseStudyCard from '@/components/mobile-app-development-service/support/cards/CaseStudyCard';
+import { caseStudies } from '@/assets/data';
+
+const WorkProcess = () => {
+ const settings = {
+ dots: false,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ autoplay: true,
+ arrows: false,
+ responsive: [
+ {
+ breakpoint: 991,
+ settings: {
+ slidesToShow: 2,
+ }
+ },
+ {
+ breakpoint: 767,
+ settings: {
+ slidesToShow: 2,
+ }
+ }
+ ]
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
01
+
+
Scalable App Architecture
+
+
We build apps with strong backend infrastructure that can handle growth, increased users, and future feature expansions without performance issues.
+
+
+
+
+
02
+
+
High-Speed Performance
+
+
Optimized coding and lightweight frameworks ensure fast loading times, smooth navigation, and lag-free user experience.
+
+
+
+
+
+
+
03
+
+
Secure & Protected Systems
+
+
Advanced security protocols, data encryption, secure APIs, and authentication systems protect your users and business data.
+
+
+
+
+
04
+
+
App Store & Play Store Deployment
+
+
Complete assistance with submission, compliance, approval process, and successful publishing on both platforms.
+
+
+
+
+
+
+
+
+
+
= ({ blog }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
{blog.description}
+
+
+
+
= ({ caseStudy }) => {
+ return (
+
+
+
+
+
+
{caseStudy.tag}
+
+
{caseStudy.title}
+
+
+
+
= ({ member }) => {
+ return (
+
+
+
+
+
+
+
{member.name}
+
+
{member.role}
+
+
+
+
+
+
+
= ({ service }) => {
+ return (
+
+
+
+
+
+
+
{service.title}
+
+
{service.description}
+
+
+
{service.id.toString().padStart(2, '0')}
+
+
= ({ percent, radius, strokeColor, strokeWidth }) => {
+ const normalizedRadius = radius - strokeWidth * 2;
+ const circumference = normalizedRadius * 2 * Math.PI;
+ const strokeDashoffset = circumference - (percent / 100) * circumference;
+
+ return (
+
+
+ {percent}%
+
+
+ );
+};
+
+export default CircularProgress;
diff --git a/src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx b/src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx
new file mode 100644
index 0000000..4a8898a
--- /dev/null
+++ b/src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx
@@ -0,0 +1,472 @@
+"use client";
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
+
+interface ContactPopupProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+const ContactPopup: React.FC = ({ isOpen, onClose }) => {
+ const [formData, setFormData] = useState({
+ name: "",
+ phone: "",
+ email: "",
+ businessName: "",
+ projectRequirement: "",
+ budgetRange: "",
+ });
+
+ const [formErrors, setFormErrors] = useState({});
+ const [captchaToken, setCaptchaToken] = useState(null);
+ const [alert, setAlert] = useState({ show: false, type: "", message: "" });
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ // Close on ESC key
+ useEffect(() => {
+ const handleEsc = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose();
+ };
+ window.addEventListener('keydown', handleEsc);
+ return () => window.removeEventListener('keydown', handleEsc);
+ }, [onClose]);
+
+ const handleChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target;
+ setFormData((prev) => ({ ...prev, [name]: value }));
+ };
+
+ const handleCaptchaChange = (token: string | null) => {
+ setCaptchaToken(token);
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ const errors: any = {};
+ if (!formData.name.trim()) errors.name = "Name is required.";
+ if (!formData.phone.trim()) errors.phone = "Phone is required.";
+ if (!formData.email.trim()) errors.email = "Email is required.";
+ if (!formData.businessName.trim()) errors.businessName = "Business name requested.";
+ if (!formData.projectRequirement.trim()) errors.projectRequirement = "Requirement details needed.";
+ if (!formData.budgetRange) errors.budgetRange = "Please select a budget range.";
+ // if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
+
+ setFormErrors(errors);
+ if (Object.keys(errors).length > 0) return;
+
+ setIsSubmitting(true);
+
+ const emailData = {
+ ...formData,
+ message: `Business: ${formData.businessName}
+
e.stopPropagation()}>
+
+ {/* Left Side: Info */}
+
+
+
+
Let’s Discuss Your App Idea
+
Fill out the form and our team will contact you within 24 hours.
+
+
+
+
+
+
Email Us
+
info@metatroncubesolutions.com
+
+
+
+
+
+
+
+
+
+ {/* Right Side: Form */}
+
+
+
+
+
Start Your Project
+
+ {alert.show && (
+
+ {alert.message}
+
+ )}
+
+
+
+
+
+
+
+
+
+ G
+ o
+ o
+ g
+ l
+ e
+
+
+
Reviews
+
+ ★
+ ★
+ ★
+ ★
+ ★
+
+
+
= ({ children, y = 50, duration = 1, delay = 0 }) => {
+ const revealRef = useRef(null);
+
+ useEffect(() => {
+ const el = revealRef.current;
+ if (!el) return;
+
+ const tween = gsap.fromTo(el,
+ { opacity: 0, y: y },
+ {
+ opacity: 1,
+ y: 0,
+ duration: duration,
+ delay: delay,
+ ease: 'power2.out',
+ scrollTrigger: {
+ trigger: el,
+ start: 'top 90%',
+ toggleActions: 'play none none none',
+ once: true,
+ },
+ }
+ );
+
+ return () => {
+ tween.kill();
+ };
+ }, [y, duration, delay]);
+
+ return {children}
;
+};
+
+export default GsapReveal;
+
diff --git a/src/components/mobile-app-development-service/support/common/ImageLightbox.tsx b/src/components/mobile-app-development-service/support/common/ImageLightbox.tsx
new file mode 100644
index 0000000..37759b0
--- /dev/null
+++ b/src/components/mobile-app-development-service/support/common/ImageLightbox.tsx
@@ -0,0 +1,37 @@
+"use client";
+import React from 'react';
+
+interface ImageLightboxProps {
+ isOpen: boolean;
+ onClose: () => void;
+ imageUrl: string;
+}
+
+const ImageLightbox: React.FC = ({ isOpen, onClose, imageUrl }) => {
+ if (!isOpen) return null;
+
+ return (
+
+
+
+
+
+
+
+
+
= ({ isOpen, onClose, videoUrl }) => {
+ const [mounted, setMounted] = React.useState(false);
+
+ React.useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted || !isOpen) return null;
+
+ const modalContent = (
+
+
e.stopPropagation()}>
+
+
+
+
+
+
+
+
Ready to Turn Your App Idea Into Reality?
+
+
Let’s build a powerful, scalable mobile application that drives engagement and business growth.
+
+ {/*
*/}
+
+
+
+ No hidden charges. Transparent process. Dedicated support.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
setIsContactOpen(false)} />
+
+ {/* Light overlay to ensure text readability */}
+
+
+ {topSpace && (
+ <>
+
+
+
+ )}
+
+
+ {/* Column 1: Logo & Description */}
+
+
+
+
+
+ We build secure, scalable, high-performance mobile apps that drive growth and deliver real business results.
+
+
+
+ {socialLinks.map((social, idx) => (
+
+ ))}
+
+
+
+
+ {/* Column 2: Company */}
+
+
+
+
+ Company
+
+
+ {companyLinks.map((item, idx) => (
+
+ ) => { e.currentTarget.style.color = '#1a1f2b'; }}
+ >
+ {item.label}
+
+
+ ))}
+
+
+
+
+ {/* Column 3: Services */}
+
+
+
+
+ Services
+
+
+ {serviceLinks.map((item, idx) => (
+
+ ) => { e.currentTarget.style.color = '#1a1f2b'; }}
+ >
+ {item.label}
+
+
+ ))}
+
+
+
+
+ {/* Column 4: Newsletter */}
+ {/* Column 4: Location */}
+
+
+
+
+ Get In Touch
+
+
+ {/* Email */}
+
+
+ {/* Location */}
+
+
+
+
+
+ Waterloo, Ontario Canada
+
+
+
+
+ {/* Phone */}
+
+
+
+
+
+
+
+
+
+
+
© Copyright {currentYear} - MetatronCube . All Right Reserved
+
+
+
+
+
setIsPopupOpen(false)} />
+
+ );
+};
+
+export default Header;
diff --git a/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx b/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx
new file mode 100644
index 0000000..a01ba86
--- /dev/null
+++ b/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx
@@ -0,0 +1,86 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+
+interface MobileMenuProps {
+ isMobileMenuOpen: boolean;
+ toggleMobileMenu: () => void;
+ themeBtn?: string;
+ arrow?: boolean;
+ arrow2?: boolean;
+}
+
+const navItems = [
+ { title: 'Home', link: '#home' },
+ { title: 'About', link: '#about' },
+ { title: 'Services', link: '#services' },
+ { title: 'Portfolio', link: '#portfolio' },
+ { title: 'FAQ', link: '#faq' },
+ { title: 'Contact', link: '#contact-trigger' },
+];
+
+const MobileMenu: React.FC = ({ isMobileMenuOpen, toggleMobileMenu }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {navItems.map((item, index) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
= () => {
+ return (
+
+ {navItems.map((item, index) => (
+
+
+ ))}
+
+ );
+};
+
+export default NavItems;
diff --git a/src/components/mobile-app-development-service/support/layout/MainLayout.tsx b/src/components/mobile-app-development-service/support/layout/MainLayout.tsx
new file mode 100644
index 0000000..2a6a252
--- /dev/null
+++ b/src/components/mobile-app-development-service/support/layout/MainLayout.tsx
@@ -0,0 +1,26 @@
+"use client";
+import React, { useEffect } from 'react';
+import AOS from 'aos';
+import Header from './Header/Header';
+import Footer from './Footer/Footer';
+import CTA from './CTA/CTA';
+
+const MainLayout = ({ children }: { children: React.ReactNode }) => {
+ useEffect(() => {
+ AOS.init({
+ duration: 1000,
+ once: true,
+ });
+ }, []);
+
+ return (
+ <>
+
+ {children}
+ 
+ 
+ 
+ 
About MetatronCube Solutions
+ 
+ 
+ 
+
+ {/* Floating Elements - Right (4) */}
+ 
+ 
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ {/* Stars */}
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
{blog.date} 
{blog.authorName}
+ 
+ 
+ 
Get Free Consultation
+ 
+
+