-
-
-
-
-
+ METATRONCUBE SOLUTIONS
-Build Your Dream App with Experts
-Who Care About Your Success!
-- From idea to launch — we design, develop, and deliver powerful - mobile apps that help your business grow. -
-
+
- {/* Button to open Contact Popup */}
-
+
+
+
-
+
+
+
-
-
+
+ METATRONCUBE SOLUTIONS
+
+ + Build Your Dream App with Experts Who Care! +
++ From idea to launch — we design, develop, and deliver powerful mobile apps that help your business grow with cutting-edge technology. +
+ -
-
+
- 
-
-
-
- 
-
+
-
+
+ 
+
+
+
+
+
+
+
+
+
+
+
-
+
+
Cross-Platform Apps
iOS & Android
-
+
+
UI/UX
Intuitive Design
-
+
+
Performance
Fast & Smooth
-
+
+
+
+
+ );
+};
+
+export default PortfolioSection;
diff --git a/src/components/Mobile-app-development-service/about-our-team.js b/src/components/Mobile-app-development-service/about-our-team.js
index 87c88c9..b1e547b 100644
--- a/src/components/Mobile-app-development-service/about-our-team.js
+++ b/src/components/Mobile-app-development-service/about-our-team.js
@@ -1,13 +1,11 @@
"use client";
import { useState } from "react";
import Link from "next/link";
-import { Accordion } from "react-bootstrap";
import ConsenHead from "@/src/ConsenHead";
import ContactPopup from "./ContactPopup";
const AboutOurTeam = () => {
const [showPopup, setShowPopup] = useState(false);
- const [activeFaq, setActiveFaq] = useState(1);
const faqData = [
{
@@ -15,100 +13,159 @@ const AboutOurTeam = () => {
title: "Native Development",
content: "iOS & Android apps built to perfection.",
animationDelay: ".3s",
+ icon: "fas fa-mobile-alt"
},
{
id: 2,
title: "Cross-Platform Solutions",
content: "Flutter & React Native for cost-effective development.",
animationDelay: ".4s",
+ icon: "fas fa-sync-alt"
},
{
id: 3,
title: "Enterprise Solutions",
content: "Apps tailored for businesses & startups.",
animationDelay: ".5s",
+ icon: "fas fa-building"
},
{
id: 4,
title: "End-to-End Support",
content: "From planning to launch, we handle everything.",
animationDelay: ".6s",
+ icon: "fas fa-rocket"
},
];
return (
<>
-
+
diff --git a/src/components/Mobile-app-development-service/PortfolioSection.js b/src/components/Mobile-app-development-service/PortfolioSection.js
new file mode 100644
index 0000000..381e8f5
--- /dev/null
+++ b/src/components/Mobile-app-development-service/PortfolioSection.js
@@ -0,0 +1,264 @@
+"use client";
+
+import { useState } from "react";
+
+const PortfolioSection = () => {
+ const [activeTab, setActiveTab] = useState("all");
+
+ const liveApps = [
+ {
+ id: 1,
+ name: "ClicksToCart",
+ icon: "/assets/images/Mobile-app-development-service/clickstocart.jpg",
+ status: "live"
+ }
+ ];
+
+ const comingSoon = [
+ {
+ id: 2,
+ name: "Data4autos",
+ icon: "/assets/images/Mobile-app-development-service/data4autos.png",
+ status: "soon"
+ },
+ {
+ id: 3,
+ name: "SocialBuddy",
+ icon: "/assets/images/Mobile-app-development-service/socialbuddy.png",
+ status: "soon"
+ }
+ ];
+
+ const allApps = [...liveApps, ...comingSoon];
+
+ const getDisplayedApps = () => {
+ if (activeTab === "all") return allApps;
+ if (activeTab === "live") return liveApps;
+ return comingSoon;
+ };
+
+ return (
+ Secure Apps
Data Safe
+
+
+
+
+
+
+ Proven Results
+Our Project Portfolio
+
+
+ + We take pride in delivering high-quality mobile applications tailored to real business needs. Explore our completed projects now live on the Play Store and discover the innovative solutions currently in development. +
+
+
+
+ setActiveTab('all')}
+ >
+ All
+
+ setActiveTab('live')}
+ >
+ Live Apps
+
+ setActiveTab('soon')}
+ >
+ Coming Soon
+
+
+ {getDisplayedApps().map((app) => (
+
+
+
+ ))}
+
+ 
+
+
+ {app.name}
+
+ {app.status === 'live' ? 'Live Project' : 'Under Development'}
+
+
+
+
-
-
-
-
- What We Do for You
-
-
- {faqData.map((faq) => (
-
- setActiveFaq(faq.id === activeFaq ? null : faq.id)}
- className={faq.id === activeFaq ? "active" : ""}
- >
- {faq.title}
-
-
-
-
- ))}
-
-
-
- {faq.content}
-
-
-
-
- {
- e.preventDefault();
- setShowPopup(true);
- }}
- >
- Download Our Service Brochure
-
-
+ {/* Left Column: Image (Swapped from Right) */}
+
+
-
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
-
-
+ {/* Right Column: Process List */}
+
+ {/* Right Column: Process List */}
+
+
+
- What We Do for You
+We provide comprehensive app development services that turn your innovative ideas into successful digital products.
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
+
diff --git a/src/components/Mobile-app-development-service/faq.js b/src/components/Mobile-app-development-service/faq.js
index d8ec95a..470cb9d 100644
--- a/src/components/Mobile-app-development-service/faq.js
+++ b/src/components/Mobile-app-development-service/faq.js
@@ -3,8 +3,46 @@ import Accordion from 'react-bootstrap/Accordion';
import React, { useState } from "react";
import Link from "next/link";
import ConsenHead from '@/src/ConsenHead';
-import SubCard from '../AboveFooter';
import SubCardNew from '../Website-development-service/web-sub-card';
+import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
+
+const CustomToggle = ({ children, eventKey, activeKey, callback }) => {
+ const isCurrentEventKey = activeKey === eventKey;
+ const decoratedOnClick = useAccordionToggle(
+ eventKey,
+ () => callback && callback(activeKey === eventKey ? null : eventKey),
+ );
+
+ return (
+
+
+ {faqData.map((item) => (
+
+
+
+
+ ))}
+
+
+
+
+
{item.title}
+{item.content}
+
+
+ );
+};
const Faq = () => {
// First 5 FAQs
@@ -25,8 +63,8 @@ const Faq = () => {
{ id: 10, title: "How do I get started?", content: "Just fill out our inquiry form or book a free consultation. Our team will guide you through the next steps.", animationDelay: ".5s" },
];
- const [activeLeft, setActiveLeft] = useState(faqDataPart1[0].id);
- const [activeRight, setActiveRight] = useState(faqDataPart2[0].id);
+ const [activeKeyLeft, setActiveKeyLeft] = useState("1"); // Default open: Item 1
+ const [activeKeyRight, setActiveKeyRight] = useState("6"); // Default open: Item 6
return (
<>
@@ -35,59 +73,99 @@ const Faq = () => {
description="Explore FAQs about Web & App Development, SEO, digital marketing, and graphic design. Uncover expert insights and solutions with Metatroncube."
/>
- + {children} +
+
+
+
+
-
-
-
+
- - Frequently Asked Questions -
-
- {/* Left Column - First 5 FAQs */}
-
-
- {faqDataPart1.map((faq) => (
-
- setActiveLeft(faq.id === activeLeft ? null : faq.id)}
- className={faq.id === activeLeft ? "active" : ""}
- >
- {faq.title}
-
-
-
-
- ))}
-
+
{faq.content}
-
+
+
+
+
+
- {/* Right Column - Next 5 FAQs */}
-
+
Frequently Asked Questions
+
-
- {faqDataPart2.map((faq) => (
-
- setActiveRight(faq.id === activeRight ? null : faq.id)}
- className={faq.id === activeRight ? "active" : ""}
- >
- {faq.title}
-
-
-
-
- ))}
-
+
{faq.content}
-
+ {/* Left Column - First 5 FAQs */}
+
+
+ {faqDataPart1.map((faq) => (
+
+
+
+ {/* Right Column - Next 5 FAQs */}
+
+
+ {faq.title}
+
+
+
+
+ ))}
+
+ {faq.content}
+
+
+
+ {faqDataPart2.map((faq) => (
+
+
+
+ {faq.title}
+
+
+
+
+ ))}
+
+ {faq.content}
+
+
+
-
-
- setShowPopup(false)} />
);
diff --git a/src/components/Mobile-app-development-service/key-feacture.js b/src/components/Mobile-app-development-service/key-feacture.js
index ec034dc..d26452f 100644
--- a/src/components/Mobile-app-development-service/key-feacture.js
+++ b/src/components/Mobile-app-development-service/key-feacture.js
@@ -1,3 +1,4 @@
+"use client";
import ConsenHead from "@/src/ConsenHead";
import Link from "next/link";
import { useState } from "react";
@@ -5,6 +6,45 @@ import ContactPopup from "./ContactPopup";
const KeyFeatures = () => {
const [showPopup, setShowPopup] = useState(false);
+
+ const features = [
+ {
+ img: "/assets/images/Mobile-app-development-service/user-friendly.webp",
+ title: "User-Friendly & Engaging Designs",
+ desc: "Intuitive interfaces designed to delight every user."
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/speed.webp",
+ title: "High Performance & Speed",
+ desc: "Optimized code for ultra-fast and lag-free response."
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/secure.webp",
+ title: "100% Secure & Scalable",
+ desc: "Advanced security built to grow with your business."
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/cloud.webp",
+ title: "Cloud-Integrated Solutions",
+ desc: "Reliable cloud storage for seamless accessibility."
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/app.webp",
+ title: "App Store Optimization Support",
+ desc: "Data-driven ASO strategy to maximize downloads."
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/post.webp",
+ title: "Post-Launch Maintenance",
+ desc: "Reliable ongoing support and regular app updates."
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/dedicated.webp",
+ title: "Dedicated Project Managers",
+ desc: "Clear communication and expert management."
+ }
+ ];
+
return (
<>
@@ -13,16 +53,108 @@ const KeyFeatures = () => {
description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth."
/>
-
-
- {/* Contact Popup */}
Let’s Build the App Your Users Will Love!
-- Whether you’re a startup with a fresh idea or a business ready to scale, -we’ll turn your vision into a high-performing mobile app. +
+
+
-
+
+ Let’s Build the App Your Users Will Love!
++ Turn your vision into a high-performing digital product with Waterloo's expert development team.
-
+
@@ -66,7 +91,6 @@ we’ll turn your vision into a high-performing mobile app.
+
+
+
-
-
+
+
- setShowPopup(false)} />
diff --git a/src/components/Mobile-app-development-service/our-development.js b/src/components/Mobile-app-development-service/our-development.js
index ff29464..9bdb8b2 100644
--- a/src/components/Mobile-app-development-service/our-development.js
+++ b/src/components/Mobile-app-development-service/our-development.js
@@ -3,7 +3,7 @@
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper";
import "swiper/css";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import ContactPopup from "./ContactPopup";
import Link from "next/link";
import ConsenHead from "@/src/ConsenHead";
@@ -18,78 +18,173 @@ const caseStudies = [
export default function OurDevelopment() {
const [showPopup, setShowPopup] = useState(false);
+ const [isClient, setIsClient] = useState(false);
+
+ useEffect(() => {
+ setIsClient(true);
+ }, []);
return (
<>
Why Our Apps Stand Out
-
+
+
+
+ {features.map((feature, index) => (
+
+
+
+
+ ))}
+
+
+
+ 
+
+ {feature.title}
+{feature.desc}
+ + {/*
+
+
*/}
+
+
- {/* Features Grid */}
-
- {[
- {
- img: "/assets/images/Mobile-app-development-service/user-friendly.webp",
- text: "User-Friendly & Engaging Designs",
- },
- {
- img: "/assets/images/Mobile-app-development-service/speed.webp",
- text: "High Performance & Speed",
- },
- {
- img: "/assets/images/Mobile-app-development-service/secure.webp",
- text: "100% Secure & Scalable",
- },
- {
- img: "/assets/images/Mobile-app-development-service/cloud.webp",
- text: "Cloud-Integrated Solutions",
- },
- {
- img: "/assets/images/Mobile-app-development-service/app.webp",
- text: "App Store Optimization Support",
- },
- {
- img: "/assets/images/Mobile-app-development-service/post.webp",
- text: "Post-Launch Maintenance",
- },
- {
- img: "/assets/images/Mobile-app-development-service/dedicated.webp",
- text: "Dedicated Project Managers",
- }
- ].map((feature, index) => (
-
-
- ))}
-
-
-
-
-
- {feature.text}
-
+
+
+
-
-
+
+
-
-
-
A Proven Process for App Success
+A Proven Process for App Success
++ We follow a structured methodology to ensure every app we build is scalable, secure, and user-friendly. +
+
+ {isClient && (
- {caseStudies.concat(caseStudies).map((item, idx) => (
+ {caseStudies.map((item, idx) => (
-
diff --git a/src/components/Mobile-app-development-service/testimonial.js b/src/components/Mobile-app-development-service/testimonial.js
index 6ba0ff6..d01ea71 100644
--- a/src/components/Mobile-app-development-service/testimonial.js
+++ b/src/components/Mobile-app-development-service/testimonial.js
@@ -1,102 +1,358 @@
-// import {testimonial_list_slider} from "@/src/sliderProps";
-import { Autoplay } from "swiper";
-import { Swiper, SwiperSlide } from "swiper/react"
-
+import { Autoplay, Navigation, Pagination } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import GoogleReviewsBranding from "../GoogleReviewsBranding";
const testimonial_list_slider = {
- spaceBetween: 30,
- slidesPerView: 1,
- navigation: false,
- pagination: { clickable: false },
- loop: true,
- autoplay: {
- delay: 3000,
- disableOnInteraction: false,
- },
+ spaceBetween: 40,
+ slidesPerView: 3,
+ centeredSlides: true,
+ loop: true,
+ autoplay: {
+ delay: 5000,
+ disableOnInteraction: false,
+ },
+ navigation: {
+ nextEl: ".testimonial-next",
+ prevEl: ".testimonial-prev",
+ },
+ pagination: {
+ clickable: true,
+ el: ".testimonial-pagination",
+ },
+ modules: [Autoplay, Navigation, Pagination],
+ breakpoints: {
+ 0: { slidesPerView: 1, spaceBetween: 20 },
+ 768: { slidesPerView: 2, spaceBetween: 30 },
+ 1200: { slidesPerView: 3, spaceBetween: 40 },
+ }
};
-const testimonials = [
- {
- id: 1,
- text: " They built our app in record time with remarkable precision and creativity. The process was smooth, the team was always available for support, and the final product exceeded expectations. Thanks to their expertise, we not only launched on schedule but also impressed investors, secured vital funding, and built strong credibility in our industry. ",
- author: "Startup Founder",
- role: "Happy Customer",
- },
- {
- id: 2,
- text: "The entire journey was professional, transparent, and stress-free. From the planning phase to launch, their team guided us with valuable insights and delivered an app with a sleek, modern UI. Our customers love the easy navigation and overall experience. Within just a few months, our sales doubled, our brand visibility grew, and we gained a loyal customer base.",
- author: "E-commerce Owner",
- role: "Happy Customer",
- },
- {
- id: 3,
- text: "As a healthcare provider, our requirements were complex — we needed reliability, strong security, and a platform tailored to our specific needs. Their team delivered a flawless solution that met compliance standards and streamlined our daily operations. The app improved efficiency, enhanced patient trust, and gave us the confidence to scale our services.",
- author: "Healthcare Brand",
- role: "Happy Customer",
- }
-];
-
const TestimonialSection = () => {
- return (
-
-
+
+ )}
+
-
+
))}
-
-
+
-
- {item.category}
-{item.title}
-
-
-
-
+
{item.category}
+{item.title}
-
-
-
-
- );
-
+
+ );
};
-export default TestimonialSection;
\ No newline at end of file
+
+export default TestimonialSection;
+
diff --git a/src/components/Mobile-app-development-service/we-serve.js b/src/components/Mobile-app-development-service/we-serve.js
index e383e0a..c9bb9e9 100644
--- a/src/components/Mobile-app-development-service/we-serve.js
+++ b/src/components/Mobile-app-development-service/we-serve.js
@@ -1,3 +1,4 @@
+"use client";
import { useState } from "react";
import Link from "next/link";
import ConsenHead from "@/src/ConsenHead";
@@ -5,88 +6,208 @@ import ContactPopup from "./ContactPopup";
const WeServe = () => {
const [showPopup, setShowPopup] = useState(false);
- const [activeIndex, setActiveIndex] = useState(0);
+ // Using specific colors and icons to match a premium aesthetic.
+ // Fallback images are retained, but we prioritise a clean icon look if possible.
const features = [
- { img: "/assets/images/Mobile-app-development-service/retail.webp", text: "E-commerce & Retail" },
- { img: "/assets/images/Mobile-app-development-service/fitness.webp", text: "Healthcare & Fitness" },
- { img: "/assets/images/Mobile-app-development-service/education.webp", text: "Education & E-learning" },
- { img: "/assets/images/Mobile-app-development-service/finance.webp", text: "Finance & Banking" },
- { img: "/assets/images/Mobile-app-development-service/food.webp", text: "Food Delivery & Restaurants" },
- { img: "/assets/images/Mobile-app-development-service/transport.webp", text: "Transport & Logistics" },
- { img: "/assets/images/Mobile-app-development-service/entertainment.webp", text: "Entertainment & Media" },
+ {
+ img: "/assets/images/Mobile-app-development-service/retail.webp",
+ text: "E-commerce & Retail",
+ bgColor: "#E3F2FD", // Light Blue
+ iconColor: "#2196F3",
+ delay: ".1s",
+ icon: "fas fa-shopping-cart"
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/fitness.webp",
+ text: "Healthcare & Fitness",
+ bgColor: "#FBE9E7", // Light Orange
+ iconColor: "#FF5722",
+ delay: ".2s",
+ icon: "fas fa-heartbeat"
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/education.webp",
+ text: "Education & E-learning",
+ bgColor: "#F3E5F5", // Light Purple
+ iconColor: "#9C27B0",
+ delay: ".3s",
+ icon: "fas fa-graduation-cap"
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/finance.webp",
+ text: "Finance & Banking",
+ bgColor: "#E8F5E9", // Light Green
+ iconColor: "#4CAF50",
+ delay: ".4s",
+ icon: "fas fa-university"
+ },
+ // Second Row
+ {
+ img: "/assets/images/Mobile-app-development-service/food.webp",
+ text: "Food Delivery & Restaurants",
+ bgColor: "#FFF3E0", // Light Amber
+ iconColor: "#FF9800",
+ delay: ".15s",
+ icon: "fas fa-utensils"
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/transport.webp",
+ text: "Transport & Logistics",
+ bgColor: "#E0F2F1", // Light Teal
+ iconColor: "#009688",
+ delay: ".25s",
+ icon: "fas fa-truck"
+ },
+ {
+ img: "/assets/images/Mobile-app-development-service/entertainment.webp",
+ text: "Entertainment & Media",
+ bgColor: "#FFEBEE", // Light Red
+ iconColor: "#E91E63",
+ delay: ".35s",
+ icon: "fas fa-music"
+ },
];
+ const firstRow = features.slice(0, 4);
+ const secondRow = features.slice(4, 7);
+
return (
<>
-
- {/*
- OUR TESTIMONIALS
*/} -Hear From Our
-- {" "} - Happy Clients -
-
+ const [reviews, setReviews] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [isClient, setIsClient] = useState(false);
-
-
-
- {testimonials.map((item, id) => (
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
- {item.text}
+ useEffect(() => { + setIsClient(true); + async function loadReviews() { + try { + const res = await fetch("/api/reviews"); + const data = await res.json(); + const cleaned = (data.reviews || []).filter(r => + (r.text || r.description || r.snippet || r.review_text || r.body || r.content) && + r.rating >= 4 + ); + setReviews(cleaned); + } catch (error) { + console.error("Mobile: Failed to fetch reviews", error); + } finally { + setLoading(false); + } + } + loadReviews(); + }, []); + + const displayedReviews = reviews; + + function getReviewText(r) { + return r.text || r.description || r.snippet || r.review_text || r.body || r.content || ""; + } + + function truncateText(text) { + return text.length > 180 ? text.substring(0, 180) + "..." : text; + } + + function getProfileImage(r) { + const url = r.profile_photo_url || + r.author_profile_photo_url || + r.user?.thumbnail || + r.user?.profile_photo_url || + r.thumbnail || + r.profile_picture || + r.avatar; + + if (!url) return null; + if (url.startsWith("http")) return url; + return `https://lh3.googleusercontent.com/${url}`; + } + + function getInitials(name) { + if (!name) return "U"; + return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase(); + } + + return ( +
+
+
+ );
+ })}
+
+ {/* Custom Navigation */}
+
+
+
+
+ {displayedReviews.map((r, index) => {
+ const fullText = getReviewText(r);
+ const profileImg = getProfileImage(r);
+ const name = r.user?.name || r.author_name || "Valued Client";
+ const designation = r.user?.job_title || "Verified Customer";
-
+ return (
+
+ {/* What our customers say about us */}
+
+
+ Testimonials
+
+
-
-
+ {item.author}
- {item.role} + {/*Testimonials
*/}
+
+ {loading ? (
+
-
- ))}
-
+ ) : isClient && (
+ <>
+
+
- Loading the latest reviews...
+
+
+ {profileImg ? (
+ 
(e.target.style.display = 'none')} />
+ ) : (
+ {getInitials(name)}
+ )}
+
+
+
+ {name}
+ {designation} +
+
+ "{truncateText(fullText)}"
+
+
+
+
+
+
+
+ {/* Custom Pagination */}
+
+
+ )}
+
+
+
+ View All Reviews on Google
+
+
+
-
-
-
- 
-
-
-
+
-
-
+
+
- Apps That Power Every Industry
+We build scalable solutions tailored to your specific business needs.
-
-
-
-
- -
- {features.map((feature, index) => (
-
- setActiveIndex(index)} - > - {feature.text} - - ))} -
+ {/* First Row: 4 Items */}
+
-
+ {firstRow.map((feature, index) => (
+
+ ))}
+
-
+
+ {/* Using FontAwesome for cleaner scalable icons as per screenshot aesthetic
+ If you prefer images, uncomment the image tag and comment out the i tag */}
+
+ {/* */}
+
+
+
+ {feature.text}
+
- setShowPopup(false)} />
-
-
);
};
diff --git a/src/components/Mobile-app-development-service/who-can-benifit.js b/src/components/Mobile-app-development-service/who-can-benifit.js
index 8dda731..0bf59fd 100644
--- a/src/components/Mobile-app-development-service/who-can-benifit.js
+++ b/src/components/Mobile-app-development-service/who-can-benifit.js
@@ -8,78 +8,172 @@ import ConsenHead from "@/src/ConsenHead";
const WhoCanBenifit = () => {
const [showPopup, setShowPopup] = useState(false);
+ const benefits = [
+ {
+ icon: "fas fa-rocket",
+ title: "Startups",
+ desc: "Turn your vision into a scalable mobile product."
+ },
+ {
+ icon: "fas fa-chart-line",
+ title: "Enterprises",
+ desc: "Streamline operations with high-performance apps."
+ },
+ {
+ icon: "fas fa-lightbulb",
+ title: "Entrepreneurs",
+ desc: "Bring your innovative ideas to the hands of millions."
+ },
+ {
+ icon: "fas fa-store",
+ title: "Small Businesses",
+ desc: "Engage customers and boost loyalty with direct access."
+ }
+ ];
+
return (
<>
-
-
-
@@ -95,19 +216,6 @@ const WeServe = () => {
- ![{features[activeIndex].text}]({features[activeIndex].img})
-
- {features[activeIndex].text} -
+ {/* Second Row: 3 Items */} +
+ {secondRow.map((feature, index) => (
+
+ ))}
+
-
+
+
+
+
+
+ {feature.text}
+
+
-
- setShowPopup(false)} />
);
};
-export default WhoCanBenifit;
\ No newline at end of file
+export default WhoCanBenifit;
diff --git a/src/components/Mobile-app-development-service/why-choose-us.js b/src/components/Mobile-app-development-service/why-choose-us.js
index 6f0b7a4..d05209c 100644
--- a/src/components/Mobile-app-development-service/why-choose-us.js
+++ b/src/components/Mobile-app-development-service/why-choose-us.js
@@ -3,10 +3,36 @@ import { useState } from "react";
import ContactPopup from "./ContactPopup";
import ConsenHead from "@/src/ConsenHead";
-
const Whychooseus = () => {
const [showPopup, setShowPopup] = useState(false);
+ const features = [
+ {
+ number: "1",
+ title: "Expert Developers",
+ desc: "10+ years of experience in iOS, Android & cross-platform apps.",
+ icon: "fas fa-user-tie"
+ },
+ {
+ number: "2",
+ title: "Fast Turnaround",
+ desc: "Agile process for quicker time-to-market.",
+ icon: "fas fa-bolt"
+ },
+ {
+ number: "3",
+ title: "Custom UI/UX",
+ desc: "Apps that users love to use every day.",
+ icon: "fas fa-paint-brush"
+ },
+ {
+ number: "4",
+ title: "Secure & Scalable",
+ desc: "Built for long-term growth.",
+ icon: "fas fa-shield-alt"
+ }
+ ];
+
return (
<>
{
description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth."
/>
-
-
- {/* Popup */}
+
+
+
+
+
+
+
+ Is This Service Right for You?
+We empower diverse clients to succeed in the mobile-first world.
+
+
+
+
+
+
+
+ {benefits.map((item, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ {item.title}
+{item.desc}
+
+
-
- {/* Right Content */}
-
-
-
- {/* Shape on bottom right */}
- {/*
- {/*
-
-
-
-
- Why Choose Us?
*/} - -Is This Service Right for You?
- {/*- Appropriately enhance principle-centered innovation rather than high standards in platforms. - Credibly orchestrate functional. -
*/} -
- 
-
*/}
-
+
+
+
-
-
-
-
- 
-
- {/*
-
- {/*
- 
-
*/}
-
- {/*
-
-
-
*/}
+
-
+
-
+
+
+ Why Partner With Our
Why Partner With Our
App Development Team?
-
-
-
+
+ );
+};
+
+export default WorkProcess;
diff --git a/src/layout/header/App-header.js b/src/layout/header/App-header.js
index 94a603d..6d84f8a 100644
--- a/src/layout/header/App-header.js
+++ b/src/layout/header/App-header.js
@@ -11,6 +11,7 @@ const Header9 = () => {
const homeSection = document.getElementById("home");
const aboutSection = document.getElementById("about");
const serviceSection = document.getElementById("service");
+ const portfolioSection = document.getElementById("portfolio");
const faqSection = document.getElementById("faq");
const handleScroll = () => {
@@ -19,11 +20,14 @@ const Header9 = () => {
const homeTop = homeSection?.offsetTop || 0;
const aboutTop = aboutSection?.offsetTop || 0;
const serviceTop = serviceSection?.offsetTop || 0;
+ const portfolioTop = portfolioSection?.offsetTop || 0;
const faqTop = faqSection?.offsetTop || 0;
// ✅ Highlight section logic
if (scrollPos >= faqTop) {
setActiveSection("faq");
+ } else if (scrollPos >= portfolioTop) {
+ setActiveSection("portfolio");
} else if (scrollPos >= serviceTop) {
setActiveSection("service");
} else if (scrollPos >= aboutTop) {
@@ -47,12 +51,50 @@ const Header9 = () => {
return (
<>
+
{/* Top Bar */}
Why Partner With Our App Development Team?
+
+ {features.map((feature, index) => (
+
-
+
+ ))}
+
+ {feature.number}
+
+
+
+
+
+ {index < features.length - 1 && (
+
+
+
+ )}
+
+
{feature.title}
+{feature.desc}
+
-
@@ -109,4 +248,4 @@ cross-platform apps.
);
};
-export default Whychooseus;
\ No newline at end of file
+export default Whychooseus;
diff --git a/src/components/Mobile-app-development-service/work-process.js b/src/components/Mobile-app-development-service/work-process.js
new file mode 100644
index 0000000..abce813
--- /dev/null
+++ b/src/components/Mobile-app-development-service/work-process.js
@@ -0,0 +1,229 @@
+"use client";
+import React from "react";
+import ConsenHead from "@/src/ConsenHead";
+
+const WorkProcess = () => {
+ const steps = [
+ {
+ number: "1",
+ subtitle: "Innovative technology strategy by Metatron Cube Solutions.",
+ title: "Expert Developers",
+ desc: "10+ years of experience in iOS, Android & cross-platform apps.",
+ icon: "fas fa-user-tie",
+ color: "#3779b9"
+ },
+ {
+ number: "2",
+ subtitle: "Collaborative team at Metatron Cube Solutions.",
+ title: "Fast Turnaround",
+ desc: "Agile process for quicker time-to-market.",
+ icon: "fas fa-bolt",
+ color: "#3779b9"
+ },
+ {
+ number: "3",
+ subtitle: "Future-ready innovation by Metatron Cube Solutions.",
+ title: "Custom UI/UX",
+ desc: "Apps that users love to use every day.",
+ icon: "fas fa-paint-brush",
+ color: "#3779b9"
+ },
+ {
+ number: "4",
+ subtitle: "Shaping the digital future with Metatron Cube Solutions.",
+ title: "Secure & Scalable",
+ desc: "Built for long-term growth.",
+ icon: "fas fa-shield-alt",
+ color: "#3779b9"
+ }
+ ];
+
+ return (
+
-
-
-
- 
-
-
-
-
- Expert Developers
-10+ years of experience in iOS, Android & -cross-platform apps. -
-
-
-
-
- 
-
-
-
-
- Fast Turnaround
-Agile process for quicker time-to-market.
-
-
-
-
- 
-
-
-
-
- Custom UI/UX
-Apps that users love to use every day.
-
-
-
-
-
-
-
-
-
- Secure & Scalable
-Built for long-term growth.
-
+
+
+
+
+
+
+
+
+
+
+
+ Why Partner With Our App Development Team?
+Was are delightful solicitude discovered collecting man day. Resolving neglected sir tolerably.
+
+ {steps.map((step, index) => (
+
+
+
+ ))}
+
+ {step.number}
+
+
+
+
+
+
+ {index < steps.length - 1 && (
+
+
+
+ )}
+
+ {step.subtitle}
+
+ {step.title}
+{step.desc}
+
-
+
{/* Social Icons */}
-
- @@ -84,7 +126,7 @@ const Header9 = () => {
+
{
SERVICES
+
+ PORTFOLIO
+
FAQ
diff --git a/styles/mobile-app-landing.css b/styles/mobile-app-landing.css
new file mode 100644
index 0000000..4fd02f5
--- /dev/null
+++ b/styles/mobile-app-landing.css
@@ -0,0 +1,956 @@
+/* Mobile App Landing Page Specific Styles */
+
+/* Why Choose Us Section Styles */
+.mobile-app-landing-features {
+ padding: 80px 0;
+ background: #fff;
+ position: relative;
+ overflow: hidden;
+}
+
+.mobile-app-landing-features .section-title {
+ text-align: center;
+ margin-bottom: 60px;
+}
+
+.mobile-app-landing-features .section-title h2 {
+ font-size: 36px;
+ font-weight: 700;
+ color: #1a1f2b;
+ margin-bottom: 15px;
+}
+
+.mobile-app-landing-features .section-title h2 span {
+ color: #3779b9;
+}
+
+.app-feature-item {
+ text-align: center;
+ padding: 30px 20px;
+ border-radius: 15px;
+ background: #fff;
+ transition: all 0.4s ease;
+ position: relative;
+ z-index: 1;
+ margin-bottom: 30px;
+ border: 1px solid transparent;
+}
+
+.app-feature-item:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ border-color: #f0f0f0;
+}
+
+.app-feature-thumb {
+ margin-bottom: 25px;
+ position: relative;
+ display: inline-block;
+}
+
+.app-feature-thumb img {
+ max-width: 100%;
+ height: auto;
+ transition: transform 0.5s ease;
+}
+
+.app-feature-item:hover .app-feature-thumb img {
+ transform: scale(1.1) rotate(2deg);
+}
+
+.app-feature-content h3 {
+ font-size: 22px;
+ font-weight: 700;
+ margin-bottom: 15px;
+ color: #1a1f2b;
+}
+
+.app-feature-content p {
+ color: #666;
+ font-size: 15px;
+ line-height: 1.6;
+ margin-bottom: 25px;
+}
+
+.step-number {
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ background: linear-gradient(135deg, #3779b9 0%, #00b4d8 100%);
+ color: #fff;
+ font-size: 18px;
+ font-weight: 700;
+ border-radius: 50%;
+ margin: 0 auto;
+ box-shadow: 0 4px 15px rgba(55, 121, 185, 0.3);
+ position: relative;
+ z-index: 2;
+ transition: all 0.4s ease;
+}
+
+.app-feature-item:hover .step-number {
+ transform: scale(1.2);
+ background: linear-gradient(135deg, #ff3366 0%, #ff6699 100%);
+ box-shadow: 0 4px 15px rgba(255, 51, 102, 0.3);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 40px, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInUp {
+ animation-name: fadeInUp;
+ animation-fill-mode: both;
+}
+
+.app-feature-item.animated {
+ animation-duration: 0.8s;
+}
+
+.delay-100 {
+ animation-delay: 0.1s;
+}
+
+.delay-200 {
+ animation-delay: 0.2s;
+}
+
+.delay-300 {
+ animation-delay: 0.3s;
+}
+
+.delay-400 {
+ animation-delay: 0.4s;
+}
+
+/* Floating Shapes Background */
+.shape-1,
+.shape-2,
+.shape-3 {
+ position: absolute;
+ z-index: 0;
+ opacity: 0.1;
+ pointer-events: none;
+}
+
+.shape-1 {
+ top: 10%;
+ left: 5%;
+ animation: float 6s ease-in-out infinite;
+}
+
+.shape-2 {
+ bottom: 15%;
+ right: 5%;
+ animation: float 8s ease-in-out infinite reverse;
+}
+
+@keyframes float {
+ 0% {
+ transform: translateY(0px);
+ }
+
+ 50% {
+ transform: translateY(-20px);
+ }
+
+ 100% {
+ transform: translateY(0px);
+ }
+}
+
+/* Process/Accordion Section Styles - ADDED FOR STEP 2 */
+.mobile-app-process-area {
+ padding: 80px 0;
+ background-color: #f9f9f9;
+ position: relative;
+ overflow: hidden;
+}
+
+.mobile-app-process-area .consen-section-title h2 {
+ font-size: 36px;
+ font-weight: 700;
+ color: #1a1f2b;
+ margin-bottom: 20px;
+}
+
+.mobile-app-process-area .consen-section-title h2 span {
+ color: #3779b9;
+}
+
+/* Process List timeline style */
+.process-list {
+ position: relative;
+ border-left: 2px solid #e0e0e0;
+ /* Vertical line connecting items */
+ margin-left: 30px;
+ /* Space for the line */
+ padding-left: 40px;
+ margin-top: 30px;
+}
+
+.process-item {
+ position: relative;
+ margin-bottom: 40px;
+ transition: all 0.3s ease;
+}
+
+.process-item:last-child {
+ margin-bottom: 0;
+}
+
+/* Icon - Circle on the line */
+.process-icon {
+ position: absolute;
+ left: -72px;
+ /* Adjust to center on the vertical line */
+ top: 0;
+ width: 64px;
+ height: 64px;
+ line-height: 60px;
+ /* Center align icon vertically */
+ text-align: center;
+ border-radius: 50%;
+ background: #fff;
+ border: 2px solid #3779b9;
+ /* Default border color */
+ color: #3779b9;
+ font-size: 24px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ transition: all 0.4s ease;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.process-content {
+ position: relative;
+}
+
+.process-content h3 {
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 10px;
+ color: #1a1f2b;
+ transition: color 0.3s ease;
+}
+
+.process-content p {
+ color: #666;
+ font-size: 15px;
+ line-height: 1.6;
+ margin: 0;
+}
+
+/* Hover Effects */
+.process-item:hover .process-icon {
+ background: linear-gradient(135deg, #3779b9 0%, #00b4d8 100%);
+ /* Highlight background color */
+ color: #fff;
+ transform: scale(1.1);
+ border-color: transparent;
+ /* Remove border when showing gradient */
+ box-shadow: 0 8px 20px rgba(55, 121, 185, 0.4);
+}
+
+.process-item:hover .process-content h3 {
+ color: #3779b9;
+}
+
+/* Image styling adjustments */
+.mobile-app-process-area .why-choose-us-thumb img {
+ max-width: 100%;
+ height: auto;
+ /* border-radius: 20px; */
+ /* box-shadow: 0 15px 40px rgba(0,0,0,0.1); */
+}
+
+/* Industry/WeServe Section Styles - ADDED FOR STEP 3 */
+.industry-serve-area {
+ padding: 80px 0;
+ overflow: hidden;
+}
+
+.industry-serve-area .consen-section-title {
+ margin-bottom: 50px !important;
+ text-align: center;
+}
+
+.industry-serve-area .consen-section-title h2 {
+ font-size: 36px;
+ font-weight: 700;
+ color: #1a1f2b;
+ margin-bottom: 20px;
+}
+
+.industry-serve-area .consen-section-title h2 span {
+ color: #3779b9;
+}
+
+.section-subtitle {
+ font-size: 16px;
+ color: #666;
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.industry-grid-container {
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.industry-card {
+ display: flex;
+ align-items: center;
+ padding: 20px 25px;
+ border-radius: 50px;
+ /* Pill shape */
+ background: #fff;
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+ margin-bottom: 20px;
+ height: 100%;
+}
+
+.industry-icon {
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ border-radius: 50%;
+ background: #fff;
+ font-size: 20px;
+ margin-right: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.4s ease;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+ flex-shrink: 0;
+ /* Prevent icon shrinking */
+}
+
+.industry-text h4 {
+ font-size: 17px;
+ font-weight: 600;
+ margin: 0;
+ color: #333;
+ transition: color 0.3s ease;
+}
+
+/* Hover Animations */
+.industry-card:hover {
+ transform: translateY(-5px) scale(1.02);
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+}
+
+.industry-card:hover .industry-text h4 {
+ /* color: #3779b9; */
+ /* Optional textual highlight */
+}
+
+/* Specific styling for the 3-column row to look centered nicely */
+.industry-row.col-3 {
+ justify-content: center;
+}
+
+/* Benefit/Who Can Benefit Section - ADDED FOR STEP 4 */
+.benefit-section {
+ padding: 80px 0;
+ position: relative;
+ background: #fff;
+ overflow: hidden;
+}
+
+.benefit-section .consen-section-title {
+ margin-bottom: 20px;
+}
+
+.benefit-section .consen-section-title h2 {
+ font-size: 36px;
+ font-weight: 700;
+ color: #1a1f2b;
+ margin-bottom: 20px;
+}
+
+.benefit-section .consen-section-title h2 span {
+ color: #3779b9;
+}
+
+.benefit-image-wrapper {
+ position: relative;
+ border-radius: 20px;
+ overflow: hidden;
+ height: 100%;
+}
+
+.benefit-image-wrapper img {
+ border-radius: 20px;
+ width: 100%;
+ /* height: 100%; */
+ object-fit: cover;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.benefit-dark-card {
+ background-color: #0b1c3c;
+ /* Dark Navy Blue */
+ padding: 50px 40px;
+ border-radius: 20px;
+ color: #fff;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0 15px 40px rgba(11, 28, 60, 0.2);
+}
+
+.benefit-dark-card .list-title {
+ font-size: 24px;
+ font-weight: 700;
+ margin-bottom: 30px;
+ color: #fff;
+}
+
+.benefit-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.benefit-list-item {
+ display: flex;
+ align-items: center;
+ /* Center icon vertically with first line of text */
+ margin-bottom: 25px;
+ transition: transform 0.3s ease;
+}
+
+.benefit-list-item:hover {
+ transform: translateX(10px);
+}
+
+.benefit-list-item:last-child {
+ margin-bottom: 0;
+}
+
+.benefit-icon {
+ flex-shrink: 0;
+ width: 50px;
+ height: 50px;
+ margin-right: 20px;
+ font-size: 28px;
+ color: #3779b9;
+ /* Highlight color for icon */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* Optional: Add background circle if desired, but screenshot shows plain icon */
+}
+
+.benefit-text h4 {
+ color: #fff;
+ font-size: 18px;
+ font-weight: 600;
+ margin: 0;
+}
+
+.benefit-text p {
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 14px;
+ margin: 5px 0 0;
+ line-height: 1.5;
+}
+
+/* Button inside card if needed */
+.benefit-btn {
+ margin-top: 40px;
+ display: inline-block;
+ padding: 12px 30px;
+ background: #3779b9;
+ color: #fff;
+ border-radius: 30px;
+ font-weight: 600;
+ text-decoration: none;
+ transition: all 0.3s ease;
+}
+
+.benefit-btn:hover {
+ background: #fff;
+ color: #1a1f2b;
+}
+
+/* Key Features / Why Our Apps Stand Out Section - ADDED FOR STEP 5 */
+.stand-out-area {
+ padding: 80px 0;
+ background-color: #f7fbff;
+ overflow: hidden;
+}
+
+.stand-out-area .consen-section-title h2 {
+ font-size: 38px;
+ font-weight: 800;
+ color: #0a1c36;
+ margin-bottom: 20px;
+}
+
+.stand-out-area .consen-section-title h2 span {
+ color: #3779b9;
+}
+
+.stand-out-card {
+ background: #fff;
+ padding: 50px 30px;
+ border-radius: 40px;
+ text-align: center;
+ box-shadow: 0 20px 40px rgba(55, 121, 185, 0.05);
+ position: relative;
+ transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+ border: 1px solid rgba(55, 121, 185, 0.08);
+ height: 100%;
+ z-index: 1;
+ overflow: hidden;
+}
+
+.stand-out-card::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(55, 121, 185, 0.03) 0%, transparent 60%);
+ z-index: -1;
+ transition: all 0.5s ease;
+}
+
+.stand-out-card:hover {
+ transform: translateY(-15px);
+ box-shadow: 0 30px 60px rgba(55, 121, 185, 0.15);
+ border-color: #3779b9;
+}
+
+.stand-out-card:hover::before {
+ background: radial-gradient(circle, rgba(55, 121, 185, 0.08) 0%, transparent 70%);
+}
+
+/* Diamond Shape Icon Container */
+.stand-out-icon-box {
+ width: 90px;
+ height: 90px;
+ background: #f0f7ff;
+ border-radius: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 30px;
+ transition: all 0.5s ease;
+ box-shadow: 0 10px 20px rgba(55, 121, 185, 0.1);
+ position: relative;
+}
+
+.stand-out-card:hover .stand-out-icon-box {
+ background: #3779b9;
+ transform: rotate(15deg);
+ box-shadow: 0 15px 30px rgba(55, 121, 185, 0.3);
+}
+
+.stand-out-icon-box img {
+ max-width: 45px;
+ transition: all 0.5s ease;
+ z-index: 2;
+}
+
+.stand-out-card:hover .stand-out-icon-box img {
+ filter: brightness(0) invert(1);
+ transform: rotate(-15deg) scale(1.1);
+}
+
+.stand-out-title {
+ font-size: 22px;
+ font-weight: 700;
+ color: #0a1c36;
+ margin-bottom: 15px;
+ transition: color 0.3s ease;
+}
+
+.stand-out-card:hover .stand-out-title {
+ color: #3779b9;
+}
+
+.stand-out-desc {
+ font-size: 15px;
+ color: #6a7c92;
+ line-height: 1.7;
+ margin-bottom: 0;
+}
+
+/* Circle Arrow Button at Bottom */
+.stand-out-arrow {
+ position: absolute;
+ bottom: -25px;
+ /* Halfway out */
+ left: 50%;
+ transform: translateX(-50%);
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ background: #3779b9;
+ color: #fff;
+ border-radius: 50%;
+ font-size: 20px;
+ opacity: 0;
+ transition: all 0.4s ease;
+ box-shadow: 0 5px 15px rgba(55, 121, 185, 0.4);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.stand-out-card:hover .stand-out-arrow {
+ bottom: -25px;
+ opacity: 1;
+}
+
+/* Call to Action Section - ADDED FOR STEP 6 */
+/* .cta-area-new {
+ padding: 100px 0;
+ background: linear-gradient(135deg, #7b68ee 0%, #a8a4e6 100%);
+} */
+
+.cta-card-new {
+ background: #fff;
+ border-radius: 30px;
+ overflow: hidden;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+}
+
+.cta-content-new {
+ padding: 60px 50px;
+ text-align: left;
+}
+
+.cta-content-new .sub-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #7b68ee;
+ /* Matching accent color */
+ margin-bottom: 15px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.cta-content-new h2 {
+ font-size: 36px;
+ font-weight: 700;
+ color: #1a1f2b;
+ margin-bottom: 20px;
+ line-height: 1.3;
+}
+
+.cta-content-new p {
+ font-size: 16px;
+ color: #555;
+ line-height: 1.8;
+ margin-bottom: 40px;
+ max-width: 500px;
+}
+
+.cta-buttons {
+ display: flex;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+.btn-primary-new {
+ background: #7b68ee;
+ color: #fff;
+ padding: 14px 30px;
+ border-radius: 8px;
+ font-weight: 600;
+ text-decoration: none;
+ border: 2px solid #7b68ee;
+ transition: all 0.3s ease;
+}
+
+.btn-primary-new:hover {
+ background: #5d4bc4;
+ border-color: #5d4bc4;
+ color: #fff;
+ transform: translateY(-2px);
+}
+
+.btn-secondary-new {
+ background: transparent;
+ color: #333;
+ padding: 14px 30px;
+ border-radius: 8px;
+ font-weight: 600;
+ text-decoration: none;
+ border: 2px solid #ddd;
+ transition: all 0.3s ease;
+}
+
+.btn-secondary-new:hover {
+ border-color: #7b68ee;
+ color: #7b68ee;
+ transform: translateY(-2px);
+}
+
+.cta-image-new {
+ width: 100%;
+ height: 100%;
+ min-height: 400px;
+ /* Ensure height if image doesn't fill */
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ /* transform: scale(1.1); */
+ /* Slight zoom for effect if desired */
+}
+
+
+/* Responsive adjustments */
+@media (max-width: 991px) {
+ .process-list {
+ margin-left: 0;
+ padding-left: 0;
+ border-left: none;
+ margin-top: 20px;
+ }
+
+ .process-item {
+ display: flex;
+ align-items: flex-start;
+ padding-left: 0;
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .process-icon {
+ position: relative;
+ left: 0;
+ margin: 0 auto 20px;
+ }
+
+ /* Industry section mobile updates */
+ .industry-card {
+ flex-direction: column;
+ text-align: center;
+ border-radius: 20px;
+ padding: 30px;
+ }
+
+ .industry-icon {
+ margin-right: 0;
+ margin-bottom: 15px;
+ }
+
+ /* Benefit section */
+ .benefit-dark-card {
+ margin-top: 30px;
+ padding: 30px;
+ }
+
+ .stand-out-card {
+ margin-bottom: 40px;
+ /* Space for the floating arrow */
+ }
+
+ /* CTA Section */
+ .cta-content-new {
+ padding: 40px 30px;
+ text-align: center;
+ }
+
+ .cta-content-new p {
+ margin: 0 auto 30px;
+ }
+
+ .cta-buttons {
+ justify-content: center;
+ }
+
+ .cta-image-new {
+ min-height: 300px;
+ }
+}
+
+.consen_nav_manu.style-three.sticky {
+ padding: 10px 0 !important;
+}
+
+@media (max-width: 768px) {
+ .benefit-dark-card {
+ padding: 20px !important;
+ }
+}
+
+/* Nav Styles moved from globals.css and updated */
+.nav_scroll_web li {
+ transition: background-color 0.3s ease;
+}
+
+.nav_scroll_web li.active {
+ background-color: #3779b9;
+ color: #fff;
+}
+
+.nav_scroll_web li.active a {
+ color: #fff;
+}
+
+.nav_scroll_web li a {
+ display: block;
+ padding: 8px 14px;
+}
+
+.nav_scroll_mobile li {
+ transition: background-color 0.3s ease;
+}
+
+.nav_scroll_mobile li.active {
+ background-color: #3779b9;
+ color: #fff;
+}
+
+.nav_scroll_mobile li.active a {
+ color: #fff;
+}
+
+.nav_scroll_mobile li a {
+ display: block;
+ padding: 8px 14px;
+}
+
+/* Bottom Info Strip Styles moved from globals.css and updated */
+.bottom-info-strip {
+ position: relative;
+ z-index: 2;
+ top: -80px;
+ background: linear-gradient(135deg, #1d4d7c 0%, #0a1c36 100%);
+ border-radius: 25px;
+ padding: 20px 20px;
+ margin-top: 20px;
+ box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
+ transition: all 0.4s ease;
+ border: none !important;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: stretch;
+}
+
+.bottom-info-strip .info-card {
+ flex: 0 0 25%;
+ text-align: center;
+ border: none !important;
+ padding: 0 15px;
+ transition: all 0.3s ease;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.info-icon {
+ color: #ffffff;
+ font-size: 24px;
+ margin-bottom: 15px;
+ display: block;
+}
+
+/* Headings */
+.bottom-info-strip .info-card h4 {
+ font-size: 18px;
+ color: #ffffff;
+ font-weight: 700;
+ margin-bottom: 5px;
+ text-transform: capitalize;
+}
+
+/* Paragraph text */
+.bottom-info-strip .info-card p {
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.6);
+ margin-bottom: 0;
+ font-weight: 400;
+}
+
+@media (max-width: 1199px) {
+ .bottom-info-strip .info-card h4 {
+ font-size: 14px;
+ }
+}
+
+@media (max-width: 992px) {
+ .bottom-info-strip {
+ top: -50px;
+ padding: 30px 15px;
+ }
+
+ .bottom-info-strip .info-card {
+ flex: 0 0 50%;
+ margin-bottom: 20px;
+ }
+
+ .bottom-info-strip .info-card h4 {
+ font-size: 16px;
+ }
+}
+
+@media (max-width: 768px) {
+ .bottom-info-strip {
+ flex-direction: column;
+ padding: 20px;
+ gap: 10px;
+ margin: 0 15px;
+ }
+
+ .bottom-info-strip .info-card {
+ flex: 0 0 100%;
+ text-align: center;
+ border: none !important;
+ padding: 10px 0;
+ }
+}
+
+@media screen and (max-width: 425px) {
+ .bottom-info-strip .info-card h4 {
+ font-size: 14px;
+ }
+
+ .bottom-info-strip .info-card p {
+ font-size: 12px !important;
+ }
+}
+
+@media (max-width: 500px) {
+ .tab-item {
+ padding: 5px 10px !important;
+ }
+
+ .tab-nav {
+ gap: 5px !important;
+ }
+}
+
+@media (max-width: 991px) {
+ .image-section {
+ margin-top: 50px !important;
+ }
+}
\ No newline at end of file