-
-
- 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: "info@metatroncubesolutions.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;
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 Build Something Great
+Partner with Canada's leading web development agency to scale your business.
+ +
+
+
+
+
+
+
+
+
+ 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..a2faa2c
--- /dev/null
+++ b/src/components/layout/CTA/CTA.tsx
@@ -0,0 +1,56 @@
+"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..20c8745
--- /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 Build a Website That Generates Leads & Sales?
+ +Stop losing customers to outdated websites. Let’s create a powerful online presence for your business today.
+ + {/* */} +
+ 
+ 
Get Free Consultation
+
+ {/* Light overlay to ensure text readability */}
+
+
+ {topSpace && (
+ <>
+
+
+
+ )}
+
+ );
+};
+
+export default Footer;
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 high-converting, fast, and SEO-optimized websites that generate leads, increase sales, and accelerate your business growth. +
+ +
+ {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..fe98522
--- /dev/null
+++ b/src/components/sections/Home1/BannerBottom.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useState } from "react";
+import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
+
+const floatingItems = [
+ {
+ className: "item-1",
+ icon: "/assets/img/home/section1/custom.webp",
+ title: "Custom Solutions",
+ desc: "Built for your goals",
+ },
+ {
+ className: "item-2",
+ icon: "/assets/img/home/section1/seo.webp",
+ title: "SEO Optimized",
+ desc: "Better visibility",
+ },
+ {
+ className: "item-3",
+ icon: "/assets/img/home/section1/end.webp",
+ title: "End-to-End Support",
+ desc: "Design to launch",
+ },
+ {
+ className: "item-4",
+ icon: "/assets/img/home/section1/responsive.webp",
+ title: "Responsive Design",
+ desc: "All devices perfect",
+ },
+];
+
+const BannerBottom = () => {
+ const [isContactOpen, setIsContactOpen] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
About MetatronCube IT Solution
+ Your Growth-Focused Website Development Partner
+Your website is more than just a digital presence — it's your 24/7 sales machine.
+ + +
+
+
+
+ We specialize in:
+
+
+ -
+
- Business Websites +
- Corporate Websites +
- Landing Pages +
-
+
- E-commerce Stores +
- Custom Web Applications +
+
+
+ Our team combines strategy, design, development, and marketing expertise to create websites that don’t just look good — they perform.
+
+
+
+
+
+
+
+
+
+ {/* Left Column */}
+
+
+
+
+ {/* Center Column - Illustration with Floating Icons */}
+
+
+ We Guarantee
+Complete Website Development Solutions
++ We design and develop high-performing websites tailored to your business goals. From strategy and UI/UX design to development and launch, every project is built for speed, scalability, and lead generation. Our focus is not just design — it’s measurable growth. +
+
+
+
+ {/* Right Column */}
+
+ 
+
+
+ {floatingItems.map((item, idx) => (
+
+
+ {/* Central hero image */}
+
+
+ ))}
+
+ 
+
+
+
+ {item.title}
+{item.desc}
+
+
+
+
+
+
+ High-Performance, Secure & Future-Ready Websites
++ Our websites are designed for performance, speed, and scalability. With strong technical architecture and modern frameworks, we deliver fast-loading, secure, and user-friendly digital experiences that convert visitors into customers. +
+ setIsContactOpen(true)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+ 
+
+
+
+ Speak With Our Experts Today
+
+
+
+
+ );
+};
+
+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..11e6cc8
--- /dev/null
+++ b/src/components/sections/Home1/CaseStudies.tsx
@@ -0,0 +1,202 @@
+"use client";
+import React, { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import Slider from "react-slick";
+import { WebServicesData } from "@/utils/constant.utils";
+import GsapReveal from "@/components/common/GsapReveal";
+import ImageLightbox from "@/components/common/ImageLightbox";
+
+const tabs = [
+ { label: "All items", value: "*" },
+ { label: "Next.js", value: "web" },
+ { label: "Shopify Store", value: "shopify" },
+ { label: "WordPress", value: "wordpress" },
+];
+
+const CaseStudies = () => {
+ const [activeTab, setActiveTab] = useState("*");
+ const [selectedImage, setSelectedImage] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Our Partners
+ Trusted by Growing Brands & Ambitious Businesses
++ From startups to enterprise clients, businesses trust us to build scalable and performance-driven websites. +
+
+
+ {brands.map((brand) => (
+
+
+
+ 
+
+ ))}
+ 
+ 
+
+ {/* Floating Elements - Right (4) */}
+ 
+ 
+
+
+
+
+ {/* Title Section */}
+
+
+ {/* Lightbox Component */}
+
+
+
+ {/* Portfolio Slider */}
+
+
+
+ {/* Tabs */}
+
+
+
+
+
+
+
+
+ Websites That Deliver
+
+
+
+
+
+
+
+ Case Studies
+
+
+ Websites That Deliver
+ Real Results
+
+
+ Here are some of the websites we've developed across industries including healthcare,
education, real estate, finance, and e-commerce.
+
+
+
+
+
+
+
+ -
+ {tabs.map((tab) => (
+
- setActiveTab(tab.value)} + > + {tab.label} + + ))} +
+
+ {filteredItems.map((item) => (
+
+
+
+
+ ))}
+
+ {/* Monitor 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..72dd088
--- /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 long does it take to build a website?",
+ a: "Typically 2–6 weeks depending on complexity.",
+ },
+ {
+ q: "Will my website be mobile-friendly?",
+ a: "Yes, all our websites are fully responsive.",
+ },
+ {
+ q: "Do you provide SEO services?",
+ a: "Yes, we offer SEO optimization during development and advanced SEO packages.",
+ },
+ {
+ q: "Can you integrate payment gateways?",
+ a: "Yes, we integrate Razorpay, Stripe, PayPal and more.",
+ },
+ {
+ q: " Do you offer support after launch?",
+ a: "Yes, we provide maintenance and support packages.",
+ },
+];
+
+const rightFAQs = [
+ {
+ q: "What platform do you use for website development?",
+ a: "We work with WordPress, Shopify, custom HTML, React, and other platforms depending on your business needs.",
+ },
+ {
+ q: "Can I update the website myself after launch?",
+ a: "Yes. We build user-friendly websites and provide basic training so you can update content easily.",
+ },
+ {
+ q: "Do you provide hosting and domain services?",
+ a: "Yes, we can help you purchase domain, set up hosting, and manage everything technically.",
+ },
+ {
+ q: "Will my website be secure?",
+ a: "Absolutely. We implement SSL, security plugins, firewall protection, and regular updates to ensure your website is protected.",
+ },
+ {
+ q: "Do you build websites for specific industries?",
+ a: "Yes. We develop websites for healthcare, education, real estate, finance, e-commerce, startups, and many more industries.",
+ },
+];
+
+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..179ca01
--- /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/section5/conversion.webp",
+ title: "Conversion-Focused Website Architecture",
+ desc: "We design every page with one goal — turning visitors into leads or customers. From clear CTAs to strategic layout flow, your website will guide users toward action.",
+ },
+ {
+ img: "/assets/img/home/section5/speed.webp",
+ title: "Speed & Performance Optimized",
+ desc: "A slow website kills conversions. We build lightweight, optimized websites that load fast, improve user experience, and boost your Google rankings.",
+ },
+ {
+ img: "/assets/img/home/section5/seo.webp",
+ title: "SEO-Ready Development",
+ desc: "Your website is built with clean code, proper structure, meta setup, schema basics, and search-friendly URLs — helping you rank better on Google from day one.",
+ },
+ {
+ img: "/assets/img/home/section5/mobile.webp",
+ title: "Mobile-First & Fully Responsive",
+ desc: "Over 70% of traffic comes from mobile. We ensure your website looks perfect and functions smoothly on smartphones, tablets, and desktops.",
+ }
+];
+
+// 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; // 2 columns
+
+ 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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Websites That Drive Real Business Growth
+We build fast, SEO-optimized websites that drive leads and sales.
+Whether you're a startup or an established business, we create powerful websites that turn visitors into customers.
+
+
+ View Our Work
+
+
+
+
+
+
+ 
+
+ {/*
+
+ 
+
*/}
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+ {/* Left – Single Full Image */}
+
+
+ );
+};
+
+export default Pricing;
\ No newline at end of file
diff --git a/src/components/sections/Home1/Service.tsx b/src/components/sections/Home1/Service.tsx
new file mode 100644
index 0000000..58829b0
--- /dev/null
+++ b/src/components/sections/Home1/Service.tsx
@@ -0,0 +1,71 @@
+"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 (
+ ([]);
+ 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..d4300fb
--- /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/Pricing.tsx b/src/components/sections/Home1/Pricing.tsx
new file mode 100644
index 0000000..b89733a
--- /dev/null
+++ b/src/components/sections/Home1/Pricing.tsx
@@ -0,0 +1,101 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+import GsapReveal from '@/components/common/GsapReveal';
+import { pricingPlans } from '@/assets/data';
+
+const Pricing = () => {
+ return (
+
+
+
+ + Key Features +
+
+
+
+ {/* Dots */}
+
+ {columns.map((column, colIdx) => (
+
+
+ {column.map((feature, idx) => (
+
+ ))}
+
+
+ ))}
+ {column.length < 2 && }
+
+ 
+
+
+
+ {feature.title}
++ {feature.desc} +
+
+ {Array.from({ length: maxIndex + 1 }).map((_, idx) => (
+
+
+ setCurrentIndex(idx)}
+ />
+ ))}
+
+
+ {/* Controls + CTA */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Flexible Pricing for Your
+
+
+
+
+ Pricing Plans
+
+
+ Flexible Pricing for Your
+ Business Needs
+
+
+ {pricingPlans.map((plan, index) => (
+
+
+
+ ))}
+
+ {plan.isPopular && (
+
+
+ Popular
+
+ )}
+
+
+
+ {plan.plan}
+
+
+ ${plan.price}
+ /{plan.period} +-
+ {plan.features.map((feature, i) => (
+
- + + {feature} + + ))} +
+
+ Choose Plan
+
+
+
+
+ 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..bd45e95
--- /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
+ Website Development Services Designed to Elevate Your Business
++ 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..6e30349
--- /dev/null
+++ b/src/components/sections/Home1/Work.tsx
@@ -0,0 +1,106 @@
+"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 */}
+
+
+
+
+ How It Works
+ Why Our Websites Stand Out
++ At MetatronCube, we make IT simple. Our proven four-step process ensures every engagement — from initial consultation to ongoing support — is transparent, efficient, and tailored to deliver measurable results for your business. +
+
+ {[
+ { num: '01', title: 'Conversion-Focused Strategy', desc: 'We build websites that are designed to generate leads and sales.' },
+
+ { num: '02', title: 'Mobile-First Development', desc: 'Fully responsive across mobile, tablet, and desktop.' },
+
+ { num: '03', title: 'SEO-Optimized Structure', desc: 'Built with clean code and optimized for search engine visibility.' },
+
+ { num: '04', title: 'Fast Loading Speed', desc: 'Performance-optimized websites that load in under 3 seconds.' },
+
+ { num: '05', title: 'Secure & Scalable', desc: ' Secure architecture designed to grow with your business.' },
+
+ { num: '06', title: 'Marketing-Ready Integration', desc: 'Facebook Pixel, Google Analytics, CRM & Automation ready.' },
+ ].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..990773c
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,50 @@
+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;
+}
+
+export interface PricingType {
+ id: number;
+ plan: string;
+ price: string;
+ period: string;
+ features: string[];
+ isPopular?: boolean;
+ link: string;
+}
diff --git a/src/utils/constant.utils.ts b/src/utils/constant.utils.ts
new file mode 100644
index 0000000..d14737b
--- /dev/null
+++ b/src/utils/constant.utils.ts
@@ -0,0 +1,269 @@
+export const WebServicesData = [
+ {
+ id: 101,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/events.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Aakriti Design Events",
+ title: "Web Development",
+ name: "Aakriti Design Events",
+ link: "https://events.aakritidesign.com/",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/events.png",
+ },
+ {
+ id: 73,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/repharehab.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "rapharehab",
+ title: "Web Development",
+ name: "Rapharehab",
+ link: "https://rapharehab.ca/",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/repharehab.png",
+ },
+ {
+ id: 75,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/Maisondetreats.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Maison de treats",
+ title: "Web Development",
+ name: "Maison de treats",
+ link: "https://maisondetreats.com/",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/Maisondetreats.png",
+ },
+ {
+ id: 74,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/Sixty5Street.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Sixty5Street",
+ title: "Web Development",
+ name: "Sixty5Street",
+ link: "https://sixty5street.com/",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/Sixty5Street.png",
+ },
+ {
+ id: 5,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/vg-fence.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "VG Fence",
+ title: "Web Development",
+ name: "VG Fence",
+ link: "https://vgfence.metatronnest.com/",
+ videoLink: "https://youtu.be/Jv0d_kj0RDs",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/vg-fence.png",
+ },
+ // {
+ // id: 68,
+ // category: "web",
+ // image: "/assets/img/images/portfolio/web-development/web-development/janahanlaw.png",
+ // colClass: "col-lg-4 col-md-6",
+ // alt: "janahanlaw",
+ // title: "Web Development",
+ // name: "Janahan Law",
+ // link: "https://janahanlaw.com/",
+ // videoLink: "https://youtu.be/zWAMAYFctVQ",
+ // imagePopup: "/assets/img/images/portfolio/web-development/web-development/janahanlaw.png",
+ // },
+ {
+ id: 80,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/data4autos.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Data4Autos",
+ title: "Web Development",
+ name: "Data4Autos",
+ link: "https://data4autos.com/",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/data4autos.png",
+ },
+ {
+ id: 76,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/Cybus.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Cibus Industries",
+ title: "Web Development",
+ name: "Cibus Industries",
+ link: "https://cibusindustries.com/",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/Cybus.png",
+ },
+ {
+ id: 72,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/TCA.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Tamil Culture Association",
+ title: "Web Development",
+ name: "Tamil Culture Association",
+ link: "https://tamilculturewaterloo.org/",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/TCA.png",
+ },
+ {
+ id: 4,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/shivas-dosa.jpg",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Shiva's Dosa",
+ title: "Web Development",
+ name: "Shiva's Dosa",
+ link: "https://shivasdosa.com/",
+ videoLink: "https://www.youtube.com/embed/0vVvnfX9GJk",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/shivas-dosa.jpg",
+ },
+ {
+ id: 2,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/chennora.jpg",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Chennora",
+ title: "Web Development",
+ name: "Chennora",
+ link: "https://chennora.com/",
+ videoLink: "https://www.youtube.com/embed/6Xahi_OvmqE",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/chennora.jpg",
+ },
+ {
+ id: 3,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/dine-360.jpg",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Dine 360 Ads",
+ title: "Web Development",
+ name: "Dine 360 Ads",
+ link: "https://dine360ads.com/",
+ videoLink: "https://www.youtube.com/embed/n0xh0hIjMEo",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/dine-360.jpg",
+ },
+ {
+ id: 6,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/metatroncube.webp",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Metatroncube Ads",
+ title: "Web Development",
+ name: "Metatroncube Ads",
+ link: "https://ad.metatroncubesolutions.com/",
+ videoLink: "https://youtu.be/aSZknWnggmQ?si=8fruUAyDZqEzLIDs",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/metatroncube.webp",
+ },
+ {
+ id: 7,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/metatron-academy.jpg",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Metatroncube Academy",
+ title: "Web Development",
+ name: "Metatroncube Academy",
+ link: "https://metatroncubeacademy.com/",
+ videoLink: "https://www.youtube.com/embed/3I0r5_-a0ac",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/metatron-academy.jpg",
+ },
+ {
+ id: 8,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/life-as-house.jpg",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Life As A House",
+ title: "Web Development",
+ name: "Life As A House",
+ link: "https://lifeasahouse.ca/",
+ videoLink: "https://www.youtube.com/embed/X1gkTfmPzHs",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/life-as-house.jpg",
+ },
+ {
+ id: 9,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/latha-homes.jpg",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Latha Homes",
+ title: "Web Development",
+ name: "Latha Homes",
+ link: "https://lathahomes.com/",
+ videoLink: "https://www.youtube.com/embed/zXu0j259bCA",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/latha-homes.jpg",
+ },
+ {
+ id: 10,
+ category: "wordpress",
+ image: "/assets/img/images/portfolio/web-development/web-development/brit-lanka.webp",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Brit Lanka",
+ title: "Web Development",
+ name: "Brit Lanka",
+ link: "https://thebritlanka.uk/",
+ videoLink: "https://youtu.be/oZZTyioVczE?si=FgxEjP7GXparE1g0",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/brit-lanka.webp",
+ },
+ {
+ id: 1,
+ category: "web",
+ image: "/assets/img/images/portfolio/web-development/web-development/murugan-temple.jpg",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Murugan Temple",
+ title: "Web Development",
+ name: "Murugan Temple",
+ link: "https://murugantemple.ca/",
+ videoLink: "https://youtu.be/QjUAdO3p5E8",
+ imagePopup: "/assets/img/images/portfolio/web-development/web-development/murugan-temple.jpg",
+ },
+ // {
+ // id: 11,
+ // category: "web",
+ // image: "/assets/img/images/portfolio/web-development/web-development/janahanlaw.png",
+ // colClass: "col-lg-4 col-md-6",
+ // alt: "janahanlaw",
+ // title: "Web Development",
+ // name: "Janahan Law",
+ // link: "https://janahanlaw.com/",
+ // videoLink: "https://youtu.be/zWAMAYFctVQ",
+ // imagePopup: "/assets/img/images/portfolio/web-development/web-development/janahanlaw.png",
+ // },
+ {
+ id: 12,
+ category: "shopify",
+ image: "/assets/img/images/portfolio/web-development/shopify/race-werks.jpeg",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Race Werks",
+ title: "Shopify Store",
+ name: "Race Werks",
+ link: "https://racewerks.co/",
+ videoLink: "https://youtu.be/4DevCRFDUN0",
+ imagePopup: "/assets/img/images/portfolio/web-development/shopify/race-werks.jpeg",
+ },
+ {
+ id: 13,
+ category: "shopify",
+ image: "/assets/img/images/portfolio/web-development/shopify/race-nation.jpeg",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Race Nation",
+ title: "Shopify Store",
+ name: "Race Nation",
+ link: "https://racenation.in/",
+ videoLink: "https://www.youtube.com/embed/30ssXs6iNkg?si=D6Sgsih7UsKZ093p",
+ imagePopup: "/assets/img/images/portfolio/web-development/shopify/race-nation.jpeg",
+ },
+ {
+ id: 77,
+ category: "shopify",
+ image: "/assets/img/images/portfolio/web-development/shopify/2.0.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "2.0 Multistore",
+ title: "Shopify Store",
+ name: "2.0 Multistore",
+ link: "https://megamultistore.com/",
+ imagePopup: "/assets/img/images/portfolio/web-development/shopify/2.0.png",
+ },
+ {
+ id: 78,
+ category: "wordpress",
+ image: "/assets/img/images/portfolio/web-development/wordpress/TNCSC.png",
+ colClass: "col-lg-4 col-md-6",
+ alt: "Tamil Nadu Cultural Society of Canada",
+ title: "WordPress",
+ name: "Tamil Nadu Cultural Society of Canada",
+ link: "https://tncsc.com/",
+ imagePopup: "/assets/img/images/portfolio/web-development/wordpress/TNCSC.png",
+ },
+];
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
+
+
+ Strategy & Planning
+ +We understand your business, competitors, and target audience.
+
+
+ 02
+
+
+ UI/UX Design
+ +We design wireframes and layouts focused on conversions.
+
+
+
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ 03
+
+
+ Development
+ +Clean coding, speed optimization, and responsive build.
+
+
+ 04
+
+
+ Testing & Launch
+ +Complete testing before going live.
+