-
-
- To get started, edit the page.tsx file.
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-
+
+ );
+};
+
+export default BlogCard;
diff --git a/src/components/cards/CaseStudyCard.tsx b/src/components/cards/CaseStudyCard.tsx
new file mode 100644
index 0000000..b90a481
--- /dev/null
+++ b/src/components/cards/CaseStudyCard.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Link from 'next/link';
+import { CaseStudyType } from '@/types';
+
+interface CaseStudyCardProps {
+ caseStudy: CaseStudyType;
+}
+
+const CaseStudyCard: React.FC
+ 
+
+
+
+
+
+
+ -
+
-
+
+
{blog.date} |
+
+
+ -
+
+
{blog.authorName}
+
+
+
+ {blog.title} +
+ +{blog.description}
+
+
+
+
+
+
+
+ );
+};
+
+export default CaseStudyCard;
diff --git a/src/components/cards/MemberCard.tsx b/src/components/cards/MemberCard.tsx
new file mode 100644
index 0000000..59a4859
--- /dev/null
+++ b/src/components/cards/MemberCard.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Link from 'next/link';
+import { TeamMemberType } from '@/types';
+
+interface MemberCardProps {
+ member: TeamMemberType;
+}
+
+const MemberCard: React.FC
+ 
+
+
+
+ {caseStudy.tag}
+ + {caseStudy.title} +
+
+
+ 
+
+ );
+};
+
+export default ServiceCard;
diff --git a/src/components/common/CircularProgress/CircularProgress.tsx b/src/components/common/CircularProgress/CircularProgress.tsx
new file mode 100644
index 0000000..18c1202
--- /dev/null
+++ b/src/components/common/CircularProgress/CircularProgress.tsx
@@ -0,0 +1,53 @@
+"use client";
+import React from 'react';
+
+interface CircularProgressProps {
+ percent: number;
+ radius: number;
+ strokeColor: string;
+ strokeWidth: number;
+}
+
+const CircularProgress: React.FC
+ 
+
+
+
+ {service.title}
+ +{service.description}
+
+
+
+ {service.id.toString().padStart(2, '0')}
+Budget: ${formData.budgetRange}
Requirement: ${formData.projectRequirement}`, + to: "selvipalanikumarn@gmail.com", + senderName: "Metatroncube Contact Popup", + recaptchaToken: captchaToken, + }; + + try { + const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, { + headers: { "Content-Type": "application/json" }, + }); + + setAlert({ + show: true, + type: "success", + message: res?.data?.message || "Message sent successfully!", + }); + + setFormData({ + name: "", + phone: "", + email: "", + businessName: "", + projectRequirement: "", + budgetRange: "", + }); + setCaptchaToken(null); + setFormErrors({}); + // Close after delay + setTimeout(onClose, 2000); + } catch (error) { + console.error("❌ Error sending email:", error); + setAlert({ + show: true, + type: "danger", + message: "Failed to send message. Please try again later.", + }); + } finally { + setIsSubmitting(false); + } + }; + + useEffect(() => { + if (alert.show) { + const timer = setTimeout(() => { + setAlert((prev) => ({ ...prev, show: false })); + }, 5000); + return () => clearTimeout(timer); + } + }, [alert.show]); + + if (!mounted || !isOpen) return null; + + const modalContent = ( +
+
+ );
+
+ return typeof document !== 'undefined'
+ ? createPortal(modalContent, document.body)
+ : null;
+};
+
+export default ContactPopup;
\ No newline at end of file
diff --git a/src/components/common/GoogleReviewsBranding.tsx b/src/components/common/GoogleReviewsBranding.tsx
new file mode 100644
index 0000000..32ad85d
--- /dev/null
+++ b/src/components/common/GoogleReviewsBranding.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+const GoogleReviewsBranding = ({ centered = false }) => {
+ return (
+ e.stopPropagation()}>
+
+
+
+
+ {/* Left Side: Info */}
+
+
+
+
+
+ {/* Right Side: Form */}
+
+
+ Let’s Discuss Your App Idea
+Fill out the form and our team will contact you within 24 hours.
+ +
+
+
+
+
+
+
+
+
+ Email Us
+info@metatroncubesolutions.com
+
+
+
+
+
+ Call Us Free
++1-647-679-7651
+
+
+
+
+ Start Your Project
+ + {alert.show && ( +
+ {alert.message}
+
+ )}
+
+
+
+
+ );
+};
+
+export default GoogleReviewsBranding;
diff --git a/src/components/common/GsapReveal.tsx b/src/components/common/GsapReveal.tsx
new file mode 100644
index 0000000..5c0d1a2
--- /dev/null
+++ b/src/components/common/GsapReveal.tsx
@@ -0,0 +1,48 @@
+"use client";
+import React, { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface GsapRevealProps {
+ children: React.ReactNode;
+ y?: number;
+ duration?: number;
+ delay?: number;
+}
+
+const GsapReveal: React.FC
+ G
+ o
+ o
+ g
+ l
+ e
+
+
+ Reviews
+
+
+ ★
+ ★
+ ★
+ ★
+ ★
+
+ {children}
;
+};
+
+export default GsapReveal;
+
diff --git a/src/components/common/ImageLightbox.tsx b/src/components/common/ImageLightbox.tsx
new file mode 100644
index 0000000..37759b0
--- /dev/null
+++ b/src/components/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
+
+ );
+
+};
+
+export default ImageLightbox;
diff --git a/src/components/common/VideoModal/VideoModal.tsx b/src/components/common/VideoModal/VideoModal.tsx
new file mode 100644
index 0000000..1774c73
--- /dev/null
+++ b/src/components/common/VideoModal/VideoModal.tsx
@@ -0,0 +1,46 @@
+"use client";
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+interface VideoModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ videoUrl: string;
+}
+
+const VideoModal: React.FC
+
+
+
+
+ 
+
+
+
+ );
+
+ return typeof document !== 'undefined'
+ ? createPortal(modalContent, document.body)
+ : null;
+};
+
+export default VideoModal;
diff --git a/src/components/layout/CTA/CTA.tsx b/src/components/layout/CTA/CTA.tsx
new file mode 100644
index 0000000..f61fe48
--- /dev/null
+++ b/src/components/layout/CTA/CTA.tsx
@@ -0,0 +1,65 @@
+"use client";
+import React, { useState } from 'react';
+import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
+
+const CTA = () => {
+ const [isContactOpen, setIsContactOpen] = useState(false);
+ return (
+ e.stopPropagation()}>
+
+
+
+
+
+
+
+
+
+
+ setIsContactOpen(false)} />
+
+ );
+};
+
+export default CTA;
diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx
new file mode 100644
index 0000000..a34d89b
--- /dev/null
+++ b/src/components/layout/Footer/Footer.tsx
@@ -0,0 +1,201 @@
+import Link from 'next/link';
+import React from 'react';
+
+const Footer = ({ logo = '/assets/img/home/footer/footer-logo-black.webp', containerClass = 'vl-footer1-section-area', topSpace = false }) => {
+ const currentYear = new Date().getFullYear();
+
+ const companyLinks = [
+ { label: 'Home', link: '#home' },
+ { label: 'About Us', link: '#about' },
+ { label: 'Portfolio', link: '#portfolio' },
+ { label: 'Faq', link: '#faq' },
+ { label: 'Contact', link: '/pages/contact' },
+ ];
+
+ const serviceLinks = [
+ { label: 'Website Development', link: '#services' },
+ ];
+
+ const socialLinks = [
+ { icon: 'fa-facebook-f', link: 'https://www.facebook.com/metatroncubecanada', bg: '#0866ff' },
+ { icon: 'fa-instagram', link: 'https://www.instagram.com/metatron_digitalagency', bg: '#d62976' },
+ { icon: 'fa-x-twitter', link: 'https://x.com/MetatroncubeDA', bg: '#000' },
+ { icon: 'fa-linkedin-in', link: 'https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all', bg: '#0077b5' },
+ { icon: 'fa-youtube', link: 'https://www.youtube.com/@metatron_digitalagency', bg: '#ff0000' },
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ 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. +
+
+ 
+ 
Get Free Consultation
+
+ {/* Light overlay to ensure text readability */}
+
+
+ {topSpace && (
+ <>
+
+
+
+ )}
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/layout/Header/Header.tsx b/src/components/layout/Header/Header.tsx
new file mode 100644
index 0000000..9732d9f
--- /dev/null
+++ b/src/components/layout/Header/Header.tsx
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import useSticky from '@/hooks/useSticky';
+import NavItems from './NavItems';
+import MobileMenu from './MobileMenu';
+import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
+
+const Header = () => {
+ const { sticky } = useSticky();
+ const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+ const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+ useEffect(() => {
+ const handleOpenPopup = () => setIsPopupOpen(true);
+ window.addEventListener('openContactPopup', handleOpenPopup);
+ return () => window.removeEventListener('openContactPopup', handleOpenPopup);
+ }, []);
+
+ const toggleMobileMenu = () => {
+ setIsMobileMenuOpen(!isMobileMenuOpen);
+ };
+
+ return (
+ <>
+
+
+
+ {/* Column 1: Logo & Description */}
+
+
+
+
+
+
+ {/* Column 2: Company */}
+
+ 
+
+
+ + We build secure, scalable, high-performance mobile apps that drive growth and deliver real business results. +
+ +
+ {socialLinks.map((social, idx) => (
+ ) => { e.currentTarget.style.transform = 'translateY(-5px)'; }}
+ onMouseLeave={(e: React.MouseEvent) => { e.currentTarget.style.transform = 'translateY(0)'; }}
+ >
+
+
+ ))}
+
+
+
+
+
+ {/* Column 3: Services */}
+
+
+ + Company + +
+-
+ {companyLinks.map((item, idx) => (
+
-
+ ) => { e.currentTarget.style.color = '#3779b9'; }}
+ onMouseLeave={(e: React.MouseEvent
) => { e.currentTarget.style.color = '#1a1f2b'; }} + > + {item.label} + +
+ ))}
+
+
+
+
+ {/* Column 4: Newsletter */}
+ {/* Column 4: Location */}
+
+
+ + Services + +
+-
+ {serviceLinks.map((item, idx) => (
+
-
+ ) => { e.currentTarget.style.color = '#3779b9'; }}
+ onMouseLeave={(e: React.MouseEvent
) => { e.currentTarget.style.color = '#1a1f2b'; }} + > + {item.label} + +
+ ))}
+
+
+
+
+
+ + Get In Touch + +
+
+ {/* Email */}
+
+
+ {/* Location */}
+
+
+
+
+ {/* Phone */}
+
+
+
+
+
+
+ + Waterloo, Ontario Canada +
+
+
+
+
+
+
+ © Copyright {currentYear} - MetatronCube. All Right Reserved
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MobileMenu;
diff --git a/src/components/layout/Header/NavItems.tsx b/src/components/layout/Header/NavItems.tsx
new file mode 100644
index 0000000..0b75406
--- /dev/null
+++ b/src/components/layout/Header/NavItems.tsx
@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface NavItemsProps {
+ themeBtn?: string;
+ arrow?: boolean;
+ arrow2?: boolean;
+ btnSpace?: 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 NavItems: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+ {navItems.map((item, index) => (
+
- + { + if (item.link === '#contact-trigger') { + e.preventDefault(); + window.dispatchEvent(new CustomEvent('openContactPopup')); + } + }} + > + {item.title} + + + ))} +
+ 
+ setIsContactOpen(false)} />
+
+ );
+};
+
+export default About;
diff --git a/src/components/sections/Home1/BannerBottom.tsx b/src/components/sections/Home1/BannerBottom.tsx
new file mode 100644
index 0000000..a7f5d52
--- /dev/null
+++ b/src/components/sections/Home1/BannerBottom.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+const floatingItems = [
+ {
+ className: "item-1",
+ icon: "/assets/img/home/section1/user.webp",
+ title: "User-Centered UI/UX Design",
+ desc: "Intuitive User Experience",
+ },
+ {
+ className: "item-2",
+ icon: "/assets/img/home/section1/custom.webp",
+ title: "Custom App Development",
+ desc: "Tailored App Solutions",
+ },
+ {
+ className: "item-3",
+ icon: "/assets/img/home/section1/end.webp",
+ title: "End-to-End Project Management",
+ desc: "Complete Project Execution",
+ },
+ {
+ className: "item-4",
+ icon: "/assets/img/home/section1/platform.webp",
+ title: "Cross-Platform & Native Apps",
+ desc: "Multi-Platform Development",
+ },
+];
+
+const BannerBottom = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
About MetatronCube Solutions
+ Complete App Development Solutions
+We don’t just build apps — we create digital products that solve real business problems.
+From idea validation and wireframing to UI/UX design, development, and deployment, our team ensures your app is strategically built for performance, user engagement, and long-term scalability.
+Whether you need a customer-facing mobile app, an internal business app, or a scalable startup MVP — we deliver solutions that perform. +
+ + + {/*
+
*/}
+
+ {/*
+ We specialize in:
+
+
+ -
+
- iOS App Development +
- Android App Development +
- Cross-Platform Apps +
-
+
- UI/UX Design +
- App Store Optimization +
+
*/}
+
+ Our team combines strategy, design, development, and marketing expertise to create mobile apps that don’t just look great — they perform flawlessly.
+
+
+
+
+
+
+
+
+
+ {/* Left Column */}
+
+
+
+
+ {/* Center Column - Illustration with Floating Icons */}
+
+
+ We Build Powerful Mobile Apps
+End-to-End App Development Services
++ We create high-performance mobile applications tailored to your business goals and user needs. From in-depth research and wireframing to intuitive UI/UX design, development, API integration, testing, and launch — we manage the complete lifecycle. +
++ Our apps are built for speed, security, scalability, and seamless performance across devices. Whether it’s Android, iOS, or cross-platform, we ensure your product is future-ready and built to grow with your business.
+
+
+
+ {/* Right Column */}
+
+ 
+
+
+ {floatingItems.map((item, idx) => (
+
+
+ {/* Central hero image */}
+
+
+ ))}
+
+ 
+
+
+
+ {item.title}
+{item.desc}
+
+
+
+
+
+
+ Secure, High-Performance & Future-Ready Apps
++ Our mobile apps are optimized for speed, security, and scalability. We use modern development frameworks and strong backend architecture to ensure smooth functionality, data protection, and long-term growth. +
++ We build apps that are reliable, fast-loading, and ready for future upgrades.
+
+
+
+ 
+
+
+
+ Speak With Our App Experts Today
+
+ + +1-647-679-7651 +
+
+
+ );
+};
+
+export default BrandSlider;
diff --git a/src/components/sections/Home1/CaseStudies.tsx b/src/components/sections/Home1/CaseStudies.tsx
new file mode 100644
index 0000000..ea36ed3
--- /dev/null
+++ b/src/components/sections/Home1/CaseStudies.tsx
@@ -0,0 +1,199 @@
+"use client";
+import React, { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import Slider from "react-slick";
+import { MobileAppServicesData } from "@/utils/constant.utils";
+import GsapReveal from "@/components/common/GsapReveal";
+import ImageLightbox from "@/components/common/ImageLightbox";
+
+const tabs = [
+ { label: "All", value: "*" },
+ { label: "Live", value: "live" },
+ { label: "Coming Soon", value: "coming-soon" },
+];
+
+const CaseStudies = () => {
+ const [activeTab, setActiveTab] = useState("*");
+ const [selectedImage, setSelectedImage] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Our Partners
+ Trusted by Growing Businesses & Startups
++ We’ve helped businesses across industries build successful mobile apps that improve customer experience and accelerate growth. +
+
+
+ {brands.map((brand) => (
+
+
+
+ 
+
+ ))}
+ 
+ 
+
+ {/* Floating Elements - Right (4) */}
+ 
+ 
+
+
+
+
+ {/* Title Section */}
+
+
+ {/* Lightbox Component */}
+
+
+
+ {/* Portfolio Slider */}
+
+
+
+ {/* Tabs */}
+
+
+
+
+
+
+
+
+ Apps That Deliver
+
+
+
+
+
+
+
+ Case Studies
+
+
+ Apps That Deliver
+ Real Results
+
+
+ We have developed applications across industries including
healthcare, education, finance, e-commerce, logistics, and startups.
+
+
+
+
+
+
+
+ -
+ {tabs.map((tab) => (
+
- setActiveTab(tab.value)} + > + {tab.label} + + ))} +
+
+ {filteredItems.map((item) => (
+
+
+
+
+ ))}
+
+ {/* Mobile Frame */}
+
+ openLightbox(item.image)}
+ title="View Full Image"
+ >
+
+
+ {/* Content */}
+
+
+
+
+
+
+ {/*
+ {item.title}
*/} ++ (e.currentTarget.style.color = '#3779b9')} + onMouseLeave={(e) => (e.currentTarget.style.color = '#1a1f2b')} + > + {item.name} + +
+
+
+ );
+};
+
+export default CaseStudy;
diff --git a/src/components/sections/Home1/FAQ.tsx b/src/components/sections/Home1/FAQ.tsx
new file mode 100644
index 0000000..1679277
--- /dev/null
+++ b/src/components/sections/Home1/FAQ.tsx
@@ -0,0 +1,169 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import GsapReveal from "@/components/common/GsapReveal";
+
+const leftFAQs = [
+ {
+ q: "How much does app development cost?",
+ a: "The cost depends on features, platform, and complexity. Contact us for a customized quote.",
+ },
+ {
+ q: "How long does it take to build an app?",
+ a: "Typically 6–12 weeks depending on project requirements.",
+ },
+ {
+ q: "Do you publish the app on App Store & Play Store?",
+ a: "Yes, we assist with full deployment and approval process.",
+ },
+ {
+ q: "Will my app be scalable?",
+ a: "Absolutely. We build apps with scalable architecture to support future growth.",
+ },
+ {
+ q: "Do you provide post-launch support?",
+ a: "Yes, we offer ongoing maintenance and support packages.",
+ },
+];
+
+const rightFAQs = [
+ {
+ q: "Can you help refine my app idea?",
+ a: "Yes. If you have an idea but are unsure about features or structure, our team will help you validate, refine, and plan your app strategically before development begins.",
+ },
+ {
+ q: "Will I own the complete source code?",
+ a: "Absolutely. Once the project is completed and payment terms are fulfilled, you receive full ownership of the source code and intellectual property.",
+ },
+ {
+ q: "How do you ensure app security?",
+ a: "We implement secure coding standards, data encryption, authentication protocols, and regular testing to ensure your app is protected against vulnerabilities.",
+ },
+ {
+ q: "Can you integrate third-party services or APIs?",
+ a: "Yes. We can integrate payment gateways, CRM systems, chat systems, analytics tools, maps, and other third-party APIs based on your business requirements.",
+ },
+ {
+ q: "What happens if I need new features after launch?",
+ a: "No problem. We offer ongoing maintenance and upgrade services, allowing you to add new features and scale your app as your business grows.",
+ },
+];
+
+const AccordionItem = ({
+ faq,
+ isOpen,
+ onToggle,
+ align,
+}: {
+ faq: { q: string; a: string };
+ isOpen: boolean;
+ onToggle: () => void;
+ align: "left" | "right";
+}) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 01
+
+ Discovery Consultation
+
+
+ With our intuitive interface and robust features, you buy, sell.
+
+
+
+ Customized IT Strategy
+
+
+ Plus, our commitment to the security means that PayCoin.
+
+
+ 02
+
+
+
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ 03
+
+ Quality Assurance
+
+
+ Trusted partner in the world of crypto trading Join us today.
+
+
+
+ 24/7 Support
+
+
+ Resources designed to help navigate best the dynamic
+
+
+ 04
+
+
+
+);
+
+const FAQ = () => {
+ const [openId, setOpenId] = useState
+
+ {faq.a}
+
+
+
+ {/* 3-Column Layout: Left FAQs | Center Image | Right FAQs */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+
+ */}
+
+
+
+ FAQ
+
+ Frequently Asked Questions
++ Everything you need to know about our IT services. Can't find the answer you're looking for? Talk to our team. +
+
+
+
+
+ {/* ===== LEFT: 5 FAQs ===== */}
+
+
+
+
+
+ {leftFAQs.map((faq, idx) => (
+ toggleFaq(`left-${idx}`)}
+ align="left"
+ />
+ ))}
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ {rightFAQs.map((faq, idx) => (
+ toggleFaq(`right-${idx}`)}
+ align="right"
+ />
+ ))}
+
+
+ 
+ 
+ setIsVideoOpen(false)} videoUrl="https://www.youtube.com/embed/7e90gBu4pas" />
+ setIsContactOpen(false)} />
+
+ );
+};
+
+export default Hero;
diff --git a/src/components/sections/Home1/KeyFeatures.tsx b/src/components/sections/Home1/KeyFeatures.tsx
new file mode 100644
index 0000000..1c23f3e
--- /dev/null
+++ b/src/components/sections/Home1/KeyFeatures.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
+
+const features = [
+ {
+ img: "/assets/img/home/section4/increase.png",
+ text: "Increased Customer Engagement",
+ },
+ {
+ img: "/assets/img/home/section4/brand.png",
+ text: "Improved Brand Visibility",
+ },
+ {
+ img: "/assets/img/home/section4/operational.png",
+ text: "Better Operational Efficiency",
+ },
+ {
+ img: "/assets/img/home/section4/customer.png",
+ text: "Higher Customer Retention",
+ },
+ {
+ img: "/assets/img/home/section4/scalable.png",
+ text: "Scalable Digital Infrastructure",
+ },
+ {
+ img: "/assets/img/home/section4/revenue.png",
+ text: "Revenue Growth Opportunities",
+ },
+];
+
+// Group features into pairs (columns of 2 cards each)
+const columns: typeof features[] = [];
+for (let i = 0; i < features.length; i += 2) {
+ columns.push(features.slice(i, i + 2));
+}
+
+const KeyFeatures = () => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [visibleCols, setVisibleCols] = useState(2);
+ const [isContactOpen, setIsContactOpen] = useState(false);
+
+ const totalCols = columns.length; // 4
+
+ useEffect(() => {
+ const handleResize = () => {
+ if (window.innerWidth <= 576) setVisibleCols(1);
+ 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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Build Powerful Mobile Apps That Drive Growth & Revenue
+High-performance Android, iOS, cross-platform apps for businesses
+From startups to enterprises, we create scalable, secure, and user-friendly mobile apps that increase engagement, automate operations, and generate revenue.
+
+
+ {/* View Our Work */}
+
+
+
+
+
+
+ 
+
+ {/*
+
+ 
+
*/}
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+ {/* Left – Single Full Image */}
+ ([]);
+ 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 (
+ setIsContactOpen(false)} />
+
+ );
+};
+
+export default Work;
diff --git a/src/components/sections/Home1/WorkProcess.tsx b/src/components/sections/Home1/WorkProcess.tsx
new file mode 100644
index 0000000..0348201
--- /dev/null
+++ b/src/components/sections/Home1/WorkProcess.tsx
@@ -0,0 +1,100 @@
+"use client";
+import React from 'react';
+import Slider from 'react-slick';
+import GsapReveal from '@/components/common/GsapReveal';
+import CaseStudyCard from '@/components/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 (
+
+ 
+
+
+ {/* Right – Slider */}
+
+
+ setIsContactOpen(false)} />
+
+
+ );
+};
+
+export default KeyFeatures;
diff --git a/src/components/sections/Home1/Service.tsx b/src/components/sections/Home1/Service.tsx
new file mode 100644
index 0000000..c629f84
--- /dev/null
+++ b/src/components/sections/Home1/Service.tsx
@@ -0,0 +1,69 @@
+"use client";
+import React, { useState } from 'react';
+import GsapReveal from '@/components/common/GsapReveal';
+import ServiceCard from '@/components/cards/ServiceCard';
+import { services } from '@/assets/data';
+import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
+
+const Service = () => {
+ const [isContactOpen, setIsContactOpen] = useState(false);
+ return (
+
+ BENEFITS
+
+
+ + What You Get With Our App Development +
+
+
+
+ {/* Dots */}
+
+ {columns.map((column, colIdx) => (
+
+
+ {column.map((feature, idx) => (
+
+ ))}
+
+
+ ))}
+ {column.length < 2 && }
+
+ 
+
+ {feature.text}
+
+ {Array.from({ length: maxIndex + 1 }).map((_, idx) => (
+
+
+ setCurrentIndex(idx)}
+ />
+ ))}
+
+
+ {/* Controls + CTA */}
+
+
+
+
+
+
+
+
+
+ setIsContactOpen(false)} />
+
+ );
+};
+
+export default Service;
diff --git a/src/components/sections/Home1/Testimonial.tsx b/src/components/sections/Home1/Testimonial.tsx
new file mode 100644
index 0000000..9f590cc
--- /dev/null
+++ b/src/components/sections/Home1/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/common/GsapReveal';
+import GoogleReviewsBranding from '@/components/common/GoogleReviewsBranding';
+
+const Testimonial = () => {
+ const [reviews, setReviews] = useState
+ {/* Header + intro image row */}
+
+
+
+
+ {/* Service Cards */}
+
+
+
+
+
+
+
+
+
+ {/*
+
+ */}
+
+ Our Services
+ 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. +
+
+
+
+ 
+
+
+
+ {services.slice(0, 6).map((service, i) => (
+
+
+ {/* Bottom CTA Area */}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Testimonial;
diff --git a/src/components/sections/Home1/Work.tsx b/src/components/sections/Home1/Work.tsx
new file mode 100644
index 0000000..f1ac43e
--- /dev/null
+++ b/src/components/sections/Home1/Work.tsx
@@ -0,0 +1,100 @@
+"use client";
+import React, { useState } from 'react';
+import Link from 'next/link';
+import GsapReveal from '@/components/common/GsapReveal';
+import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
+
+const Work = () => {
+ const [isContactOpen, setIsContactOpen] = useState(false);
+ return (
+ <>
+
+ {/* Section Header */}
+
+
+
+
+ {/* Content Row */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Testimonials
+ What Our Clients Say
+
+
+
+ {/* Left: Single Primary Image */}
+
+
+
+
+
+
+ {/* Right: Slider */}
+
+ 
+
+
+
+
+
+ {loading ? (
+
+
+
+ ) : displayedReviews.length > 0 ? (
+
+ Loading reviews...
+
+ Fetching live Google reviews...
+
+
+
+ {displayedReviews.map((slide, index) => {
+ const profileImg = getProfileImage(slide);
+ const name = slide.user?.name || slide.author_name || "Valued Client";
+ return (
+
+
+ ) : (
+
+
+ );
+ })}
+
+ 
+
+ {/* Stars */}
+
+
+
+
+ {/* Stars */}
+
+ {[...Array(slide.rating || 5)].map((_, i) => (
+
+ ))}
+
+
+ + "{getReviewText(slide)}" +
+
+
+
+ {profileImg ? (
+ 
+ ) : (
+ {getInitials(name)}
+ )}
+
+
+
+ {name}
+ {/*
+
+
*/}
+ Verified Google Reviewer
+
+
+ )}
+
+ {/* Google Action Button */}
+ Professional services you can trust.
+
+
+
+ Review us on Google
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+ {/* LEFT: Full Image */}
+
+
+
+
+ 
+
+
+
+ {/* RIGHT: Heading + Paragraph + Steps List + CTA */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Step List */}
+
+
+
+
+ OUR DEVELOPMENT PROCESS
+ Our Proven App Development Process
+
+ {[
+ { 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}
+
+
+ );
+};
+
+export default WorkProcess;
diff --git a/src/hooks/useSticky.ts b/src/hooks/useSticky.ts
new file mode 100644
index 0000000..c8f35f7
--- /dev/null
+++ b/src/hooks/useSticky.ts
@@ -0,0 +1,25 @@
+"use client";
+import { useEffect, useState } from "react";
+
+const useSticky = () => {
+ const [sticky, setSticky] = useState(false);
+
+ const stickyHeader = () => {
+ if (window.scrollY > 100) {
+ setSticky(true);
+ } else {
+ setSticky(false);
+ }
+ };
+
+ useEffect(() => {
+ window.addEventListener("scroll", stickyHeader);
+ return () => {
+ window.removeEventListener("scroll", stickyHeader);
+ };
+ }, []);
+
+ return { sticky };
+};
+
+export default useSticky;
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..4324e70
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,40 @@
+export interface ServiceType {
+ id: number;
+ icon: string;
+ title: string;
+ description: string;
+}
+
+export interface CaseStudyType {
+ id: number;
+ image: string;
+ tag: string;
+ title: string;
+ link?: string;
+}
+
+export interface TestimonialType {
+ rating?: number;
+ message: string;
+ image: string;
+ name: string;
+ role: string;
+}
+
+export interface BlogType {
+ id: number;
+ image: string;
+ date: string;
+ title: string;
+ description?: string;
+ authorName?: string;
+ aosClass?: string;
+ link?: string;
+}
+
+export interface TeamMemberType {
+ id: number;
+ name: string;
+ image: string;
+ role: string;
+}
diff --git a/src/utils/constant.utils.ts b/src/utils/constant.utils.ts
new file mode 100644
index 0000000..70b1872
--- /dev/null
+++ b/src/utils/constant.utils.ts
@@ -0,0 +1,29 @@
+export const MobileAppServicesData = [
+ {
+ id: 1,
+ category: "live",
+ image: "/assets/img/home/section6/clickstocart.jpg",
+ alt: "ClicksToCart",
+ title: "E-Commerce App",
+ name: "ClicksToCart",
+ link: "#",
+ },
+ {
+ id: 2,
+ category: "coming-soon",
+ image: "/assets/img/home/section6/socialbuddy.png",
+ alt: "Social Buddy",
+ title: "Social Networking",
+ name: "Social Buddy",
+ link: "#",
+ },
+ {
+ id: 3,
+ category: "coming-soon",
+ image: "/assets/img/home/section6/data4autos.png",
+ alt: "Data4Autos",
+ title: "Automotive Analytics",
+ name: "Data4Autos",
+ link: "#",
+ }
+];
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index cf9c65d..34939b2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
{
"compilerOptions": {
"target": "ES2017",
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -11,7 +15,7 @@
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "react-jsx",
+ "jsx": "preserve",
"incremental": true,
"plugins": [
{
@@ -19,7 +23,9 @@
}
],
"paths": {
- "@/*": ["./src/*"]
+ "@/*": [
+ "./src/*"
+ ]
}
},
"include": [
@@ -30,5 +36,7 @@
".next/dev/types/**/*.ts",
"**/*.mts"
],
- "exclude": ["node_modules"]
+ "exclude": [
+ "node_modules"
+ ]
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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.
+