app landing page new structures updated
This commit is contained in:
parent
d1e8cf4bd0
commit
a54bd48c42
@ -3,6 +3,7 @@ import ConsenHead from "@/src/ConsenHead";
|
||||
import Preloader from "@/src/layout/Preloader";
|
||||
import "@/styles/globals.css";
|
||||
import "@/styles/google-reviews.css";
|
||||
import "@/styles/mobile-app-landing.css";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
//import clarity from "@microsoft/clarity"; // ✅ add this
|
||||
|
||||
|
||||
@ -6,13 +6,13 @@ import Banner2 from "@/src/components/Home/Banner2";
|
||||
import Whychooseus from "@/src/components/Mobile-app-development-service/why-choose-us";
|
||||
import AboutOurTeam from "@/src/components/Mobile-app-development-service/about-our-team";
|
||||
import WeServe from "@/src/components/Mobile-app-development-service/we-serve";
|
||||
import OurDevelopment from "@/src/components/Mobile-app-development-service/our-development";
|
||||
import WhoCanBenifit from "@/src/components/Mobile-app-development-service/who-can-benifit";
|
||||
import KeyFeatures from "@/src/components/Mobile-app-development-service/key-feacture";
|
||||
import HookClosing from "@/src/components/Mobile-app-development-service/hook-closing";
|
||||
import TestimonialSection from "@/src/components/Mobile-app-development-service/testimonial";
|
||||
import Faq from "@/src/components/Mobile-app-development-service/faq";
|
||||
import CaseStudie from "@/src/components/Mobile-app-development-service/CaseStudies";
|
||||
import OurDevelopment from "@/src/components/Mobile-app-development-service/our-development";
|
||||
import PortfolioSection from "@/src/components/Mobile-app-development-service/PortfolioSection";
|
||||
|
||||
const CaseStudies2 = dynamic(() => import("@/src/components/isotope/CaseStudies2"), { ssr: false });
|
||||
|
||||
@ -35,13 +35,9 @@ const Index4 = () => {
|
||||
<OurDevelopment />
|
||||
<div id="blog"><WhoCanBenifit /></div>
|
||||
<KeyFeatures />
|
||||
<div id="portfolio"><PortfolioSection /></div>
|
||||
<HookClosing />
|
||||
<TestimonialSection />
|
||||
{/* <div className="case-study-area style-three pt-0">
|
||||
<div id="portfolio" className="container">
|
||||
<CaseStudie />
|
||||
</div>
|
||||
</div> */}
|
||||
<div id="faq"><Faq /></div>
|
||||
</Layout>
|
||||
</>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
@ -10,75 +10,214 @@ const Banner2 = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Swiper {...heroSlider} className="banner-list">
|
||||
<SwiperSlide>
|
||||
<div className="banner-area-new d-flex align-items-center custom-banner mb-3">
|
||||
<div className="modern-hero-section">
|
||||
<style jsx>{`
|
||||
.modern-hero-section {
|
||||
min-height: 85vh;
|
||||
background: radial-gradient(circle at top right, #1d4d7c 0%, #0a1c36 100%);
|
||||
position: relative;
|
||||
padding: 80px 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.modern-hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/assets/images/Mobile-app-development-service/banner-bg.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.15;
|
||||
z-index: 0;
|
||||
}
|
||||
.hero-content-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 8px 20px;
|
||||
background: rgba(55, 121, 185, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50px;
|
||||
color: #3779b9;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 25px;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 64px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 30px;
|
||||
animation: fadeInUp 1s ease-out;
|
||||
}
|
||||
.hero-title span {
|
||||
color: #3779b9;
|
||||
background: -webkit-linear-gradient(#3779b9, #00b4d8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-desc {
|
||||
font-size: 19px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 45px;
|
||||
max-width: 600px;
|
||||
animation: fadeInUp 1.2s ease-out;
|
||||
}
|
||||
.hero-btn {
|
||||
background: #3779b9;
|
||||
color: #ffffff;
|
||||
padding: 18px 40px;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.3);
|
||||
animation: fadeInUp 1.4s ease-out;
|
||||
}
|
||||
.hero-btn:hover {
|
||||
background: #ffffff;
|
||||
color: #3779b9;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.hero-image-box {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
animation: fadeInRight 1.5s ease-out;
|
||||
}
|
||||
.main-phone-img {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
object-fit: contain;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
.floating-icon {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
|
||||
z-index: 3;
|
||||
animation: floating 3s ease-in-out infinite;
|
||||
}
|
||||
.icon-apple { top: 20%; left: 0%; animation-delay: 0s; }
|
||||
.icon-android { bottom: 20%; left: 5%; animation-delay: 1s; }
|
||||
.icon-flutter { top: 50%; right: 0%; animation-delay: 2s; }
|
||||
|
||||
@keyframes floating {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-15px); }
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeInRight {
|
||||
from { opacity: 0; transform: translateX(50px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.modern-hero-section {
|
||||
padding: 140px 0 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-title { font-size: 42px; }
|
||||
.hero-desc { margin-left: auto; margin-right: auto; }
|
||||
.hero-image-box { margin-top: 60px; padding-left: 0; }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-7 col-md-12">
|
||||
<div className="banner-content">
|
||||
<h3>METATRONCUBE SOLUTIONS</h3>
|
||||
<h1>Build Your Dream App with Experts</h1>
|
||||
<h1> Who Care About Your Success!</h1>
|
||||
<p>
|
||||
From idea to launch — we design, develop, and deliver powerful
|
||||
mobile apps that help your business grow.
|
||||
<div className="col-lg-7">
|
||||
<div className="hero-content-wrapper">
|
||||
<span className="hero-badge">METATRONCUBE SOLUTIONS</span>
|
||||
<h1 className="hero-title">
|
||||
Build Your <span>Dream App</span> with Experts Who Care!
|
||||
</h1>
|
||||
<p className="hero-desc">
|
||||
From idea to launch — we design, develop, and deliver powerful mobile apps that help your business grow with cutting-edge technology.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Button to open Contact Popup */}
|
||||
<div className="banner-button mb-5">
|
||||
<div className="hero-actions">
|
||||
<a
|
||||
href="#"
|
||||
className="hero-btn"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
>
|
||||
Get a Free App Strategy Session
|
||||
Get a Free Strategy Session
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5 col-md-6 ">
|
||||
<div className="banner-year-thumb rotateme">
|
||||
<img src="/assets/images/home/banner/since .webp" alt ="Metatron Cube Solutions since banner showcasing years of expertise."/>
|
||||
</div>
|
||||
<div className="banner-thumb">
|
||||
<img src="/assets/images/Mobile-app-development-service/front.webp" alt ="Mobile app development service by Metatron Cube Solutions." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div className="col-lg-5">
|
||||
<div className="hero-image-box">
|
||||
<img src="/assets/images/Mobile-app-development-service/banner-right.png" alt="Mobile App Development" className="main-phone-img" />
|
||||
|
||||
<section
|
||||
className="bottom-info-strip-section"
|
||||
>
|
||||
<div className="floating-icon icon-apple">
|
||||
<i className="fab fa-apple" style={{ color: '#000', fontSize: '28px' }}></i>
|
||||
</div>
|
||||
<div className="floating-icon icon-android">
|
||||
<i className="fab fa-android" style={{ color: '#3ddc84', fontSize: '28px' }}></i>
|
||||
</div>
|
||||
<div className="floating-icon icon-flutter">
|
||||
<i className="fas fa-layer-group" style={{ color: '#02569b', fontSize: '24px' }}></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="bottom-info-strip-section" style={{ marginBottom: '-100px' }}>
|
||||
<div className="container">
|
||||
<div className="bottom-info-strip mt-5">
|
||||
<div className="bottom-info-strip">
|
||||
<div className="row justify-content-center g-3">
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<div className="info-card">
|
||||
<i className="fas fa-mobile-alt info-icon mt-2"></i>
|
||||
<h4>Cross-Platform Apps</h4>
|
||||
<p>iOS & Android</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<div className="info-card info-none-new">
|
||||
<div className="info-card">
|
||||
<i className="fas fa-layer-group info-icon mt-2"></i>
|
||||
<h4>UI/UX</h4>
|
||||
<p>Intuitive Design</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<div className="info-card ">
|
||||
<div className="info-card">
|
||||
<i className="fas fa-tachometer-alt info-icon mt-2"></i>
|
||||
<h4>Performance</h4>
|
||||
<p>Fast & Smooth</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-6 col-lg-3">
|
||||
<div className="info-card info-none">
|
||||
<div className="info-card">
|
||||
<i className="fas fa-shield-alt info-icon mt-2"></i>
|
||||
<h4>Secure Apps</h4>
|
||||
<p>Data Safe</p>
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
<section className="portfolio-v4-section">
|
||||
<style jsx>{`
|
||||
.portfolio-v4-section {
|
||||
padding: 100px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.portfolio-header {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.portfolio-header h5 {
|
||||
color: #3779b9;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.portfolio-header h2 {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
color: #0a1c36;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.portfolio-header p {
|
||||
font-size: 17px;
|
||||
color: #666;
|
||||
line-height: 1.7;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Tab Styles */
|
||||
.tab-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.tab-item {
|
||||
padding: 12px 35px;
|
||||
border-radius: 50px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
color: #0a1c36;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
.tab-item.active {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
border-color: #3779b9;
|
||||
box-shadow: 0 10px 20px rgba(55, 121, 185, 0.2);
|
||||
}
|
||||
|
||||
/* Mobile Mockup Grid */
|
||||
.portfolio-grid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mobile-mockup-card {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background: #111; /* Sleek black phone body */
|
||||
border: 8px solid #222;
|
||||
border-radius: 50px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.15);
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Phone Top Notch */
|
||||
.mobile-mockup-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 150px;
|
||||
height: 25px;
|
||||
background: #222;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.app-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: contain;
|
||||
transition: all 0.5s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Background Pattern for Screen */
|
||||
.app-screen::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(#3779b9 0.5px, transparent 0.5px);
|
||||
background-size: 20px 20px;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
.hover-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(rgba(10, 28, 54, 0) 40%, rgba(10, 28, 54, 0.95) 90%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 60px;
|
||||
opacity: 0;
|
||||
transition: all 0.4s ease;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.mobile-mockup-card:hover {
|
||||
transform: translateY(-20px) scale(1.02);
|
||||
box-shadow: 0 40px 80px rgba(55, 121, 185, 0.2);
|
||||
}
|
||||
|
||||
.mobile-mockup-card:hover .hover-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mobile-mockup-card:hover .app-logo {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.app-name {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.app-status {
|
||||
color: #3779b9;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.mobile-mockup-card { width: 280px; height: 500px; }
|
||||
.portfolio-header h2 { font-size: 32px; }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="container">
|
||||
<div className="row portfolio-header align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<h5>Proven Results</h5>
|
||||
<h2>Our Project <span>Portfolio</span></h2>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tab-nav">
|
||||
<div
|
||||
className={`tab-item ${activeTab === 'all' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('all')}
|
||||
>
|
||||
All
|
||||
</div>
|
||||
<div
|
||||
className={`tab-item ${activeTab === 'live' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('live')}
|
||||
>
|
||||
Live Apps
|
||||
</div>
|
||||
<div
|
||||
className={`tab-item ${activeTab === 'soon' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('soon')}
|
||||
>
|
||||
Coming Soon
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="portfolio-grid">
|
||||
{getDisplayedApps().map((app) => (
|
||||
<div key={app.id} className="mobile-mockup-card animate__animated animate__fadeInUp">
|
||||
<div className="app-screen">
|
||||
<img src={app.icon} alt={app.name} className="app-logo" />
|
||||
<div className="hover-overlay">
|
||||
<span className="app-name">{app.name}</span>
|
||||
<span className="app-status">
|
||||
{app.status === 'live' ? 'Live Project' : 'Under Development'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default PortfolioSection;
|
||||
@ -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,65 +13,136 @@ 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 (
|
||||
<>
|
||||
<ConsenHead
|
||||
title="About - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo"
|
||||
description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth."
|
||||
/>
|
||||
<style jsx>{`
|
||||
.mobile-app-process-area {
|
||||
padding: 80px 0;
|
||||
background-color: #f9fbfd;
|
||||
}
|
||||
.process-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.03);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.process-item:hover {
|
||||
transform: translateX(10px);
|
||||
box-shadow: 0 8px 25px rgba(55, 121, 185, 0.1);
|
||||
border-color: #3779b9;
|
||||
}
|
||||
.process-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
min-width: 50px;
|
||||
background: #f0f4f8;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3779b9;
|
||||
font-size: 20px;
|
||||
margin-right: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.process-item:hover .process-icon {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
}
|
||||
.process-content h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0a1c36;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.process-content p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.why-choose-us-thumb {
|
||||
position: relative;
|
||||
}
|
||||
.main-img {
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="why-choose-us-area">
|
||||
<div className="mobile-app-process-area">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
|
||||
<div className="col-lg-5 col-md-12 col-sm-12">
|
||||
<div className="consen-section-title mb-2">
|
||||
<h2>What We Do <span>for You</span></h2>
|
||||
{/* Left Column: Image (Swapped from Right) */}
|
||||
<div className="col-lg-5 col-md-12 text-center mb-5 mb-lg-0">
|
||||
<div className="why-choose-us-thumb">
|
||||
<img src="/assets/images/Mobile-app-development-service/big-img.webp" alt="App Development Process" />
|
||||
<div className="why-choose-us-image">
|
||||
<div className="why-choose-us-shape-thumb bounce-animate">
|
||||
<img src="/assets/images/elements/dot .webp" alt="shape" />
|
||||
</div>
|
||||
<div className="why-choose-us-shape-thumb2 rotateme new-rotate">
|
||||
<img src="/assets/images/Mobile-app-development-service/top.webp" alt="shape" />
|
||||
</div>
|
||||
<div className="why-choose-us-shape-thumb3 bounce-animate2 new-rotate">
|
||||
<img src="/assets/images/elements/element-1.webp" alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="faq-section faq-padding">
|
||||
<Accordion defaultActiveKey="1" as="ul" className="accordion">
|
||||
{faqData.map((faq) => (
|
||||
<li key={faq.id} className="wow fadeInUp" data-wow-delay={faq.animationDelay}>
|
||||
<Accordion.Toggle
|
||||
as="a"
|
||||
eventKey={faq.id.toString()}
|
||||
onClick={() => setActiveFaq(faq.id === activeFaq ? null : faq.id)}
|
||||
className={faq.id === activeFaq ? "active" : ""}
|
||||
>
|
||||
<span>{faq.title}</span>
|
||||
</Accordion.Toggle>
|
||||
<Accordion.Collapse eventKey={faq.id.toString()}>
|
||||
<p>{faq.content}</p>
|
||||
</Accordion.Collapse>
|
||||
</li>
|
||||
{/* Right Column: Process List */}
|
||||
<div className="col-lg-5 offset-lg-2 col-md-12">
|
||||
<div className="consen-section-title mb-4">
|
||||
<h2 style={{ fontSize: '38px' }}>What We Do <span>for You</span></h2>
|
||||
<p className="mt-3" style={{ color: '#666' }}>We provide comprehensive app development services that turn your innovative ideas into successful digital products.</p>
|
||||
</div>
|
||||
|
||||
<div className="process-list mt-4">
|
||||
{faqData.map((item) => (
|
||||
<div key={item.id} className="process-item wow fadeInRight" data-wow-delay={item.animationDelay}>
|
||||
<div className="process-icon">
|
||||
<i className={item.icon}></i>
|
||||
</div>
|
||||
<div className="process-content">
|
||||
<h3>{item.title}</h3>
|
||||
<p>{item.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-12 mb-4 pl-0">
|
||||
<div className="abouts-button">
|
||||
<div className="abouts-button mt-4">
|
||||
<div className="new-button">
|
||||
<Link legacyBehavior href="/about">
|
||||
<a
|
||||
@ -83,6 +152,16 @@ const AboutOurTeam = () => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
style={{
|
||||
padding: '12px 30px',
|
||||
background: '#3779b9',
|
||||
color: '#fff',
|
||||
borderRadius: '30px',
|
||||
textDecoration: 'none',
|
||||
display: 'inline-block',
|
||||
fontWeight: '600',
|
||||
transition: '0.3s'
|
||||
}}
|
||||
>
|
||||
Download Our Service Brochure
|
||||
</a>
|
||||
@ -90,28 +169,6 @@ const AboutOurTeam = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-7 col-md-12 text-start">
|
||||
<div className="why-choose-us-thumb">
|
||||
<img src="/assets/images/Mobile-app-development-service/big-img.webp" alt="Why Choose Us Main Image" />
|
||||
|
||||
<div className="why-choose-us-image">
|
||||
<div className="why-choose-us-shape-thumb bounce-animate">
|
||||
<img src="/assets/images/elements/dot .webp" alt="Decorative Shape 1" />
|
||||
</div>
|
||||
<div className="why-choose-us-shape-thumb2 rotateme new-rotate">
|
||||
<img src="/assets/images/Mobile-app-development-service/top.webp" alt="Top mobile app development service by Metatron Cube Solutions." />
|
||||
</div>
|
||||
<div className="why-choose-us-shape-thumb3 bounce-animate2 new-rotate">
|
||||
<img src="/assets/images/elements/element-1.webp" alt="Metatron Cube Solutions." />
|
||||
</div>
|
||||
<div className="why-choose-us-shape-thumb4">
|
||||
<img src="/assets/images/elements/element-2 .webp" alt="Metatron Cube Solutions." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
<div
|
||||
className="faq-header d-flex justify-content-between align-items-center p-3 cursor-pointer"
|
||||
onClick={decoratedOnClick}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
background: isCurrentEventKey ? '#f0f4f8' : '#fff',
|
||||
transition: '0.3s'
|
||||
}}
|
||||
>
|
||||
<h5 className="m-0" style={{ fontSize: '16px', fontWeight: 'bold', color: '#0a1a36' }}>
|
||||
{children}
|
||||
</h5>
|
||||
<div
|
||||
className="faq-icon d-flex justify-content-center align-items-center"
|
||||
style={{
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#3779b9',
|
||||
color: '#fff',
|
||||
transform: isCurrentEventKey ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
transition: 'transform 0.3s ease'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-chevron-down" style={{ fontSize: '12px' }}></i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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."
|
||||
/>
|
||||
|
||||
<div className="faq pb-90">
|
||||
<style jsx>{`
|
||||
.faq-section-wrapper {
|
||||
background-image: url('/assets/images/Mobile-app-development-service/banner-bg.webp');
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
.faq-overlay {
|
||||
padding: 80px 0;
|
||||
// margin-bottom: -46px;
|
||||
}
|
||||
.faq-item-card {
|
||||
background: #fff;
|
||||
border: 1px solid #eef2f6;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.faq-item-card:hover {
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.faq-body-content {
|
||||
background: #f9fbfd;
|
||||
padding: 25px;
|
||||
font-size: 15px;
|
||||
color: #444;
|
||||
line-height: 1.7;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="faq-section-wrapper">
|
||||
<div className="faq-overlay">
|
||||
<div className="container">
|
||||
<div className="text-center mb-5">
|
||||
<h2>
|
||||
Frequently Asked <span>Questions</span>
|
||||
</h2>
|
||||
<div className="section-title">
|
||||
<h2 className='text-white'>Frequently Asked <span>Questions</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
{/* Left Column - First 5 FAQs */}
|
||||
<div className="col-md-6">
|
||||
<Accordion defaultActiveKey={faqDataPart1[0].id.toString()} as="ul" className="accordion">
|
||||
<Accordion defaultActiveKey={activeKeyLeft} className="accordion-custom">
|
||||
{faqDataPart1.map((faq) => (
|
||||
<li key={faq.id} className="wow fadeInUp" data-wow-delay={faq.animationDelay}>
|
||||
<Accordion.Toggle
|
||||
as="a"
|
||||
<div key={faq.id} className="faq-item-card wow fadeInUp" data-wow-delay={faq.animationDelay}>
|
||||
<CustomToggle
|
||||
eventKey={faq.id.toString()}
|
||||
onClick={() => setActiveLeft(faq.id === activeLeft ? null : faq.id)}
|
||||
className={faq.id === activeLeft ? "active" : ""}
|
||||
activeKey={activeKeyLeft}
|
||||
callback={setActiveKeyLeft}
|
||||
>
|
||||
<span>{faq.title}</span>
|
||||
</Accordion.Toggle>
|
||||
{faq.title}
|
||||
</CustomToggle>
|
||||
<Accordion.Collapse eventKey={faq.id.toString()}>
|
||||
<p>{faq.content}</p>
|
||||
<div className="faq-body-content">
|
||||
{faq.content}
|
||||
</div>
|
||||
</Accordion.Collapse>
|
||||
</li>
|
||||
</div>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Next 5 FAQs */}
|
||||
<div className="col-md-6">
|
||||
<Accordion defaultActiveKey={faqDataPart2[0].id.toString()} as="ul" className="accordion">
|
||||
<Accordion defaultActiveKey={activeKeyRight} className="accordion-custom">
|
||||
{faqDataPart2.map((faq) => (
|
||||
<li key={faq.id} className="wow fadeInUp" data-wow-delay={faq.animationDelay}>
|
||||
<Accordion.Toggle
|
||||
as="a"
|
||||
<div key={faq.id} className="faq-item-card wow fadeInUp" data-wow-delay={faq.animationDelay}>
|
||||
<CustomToggle
|
||||
eventKey={faq.id.toString()}
|
||||
onClick={() => setActiveRight(faq.id === activeRight ? null : faq.id)}
|
||||
className={faq.id === activeRight ? "active" : ""}
|
||||
activeKey={activeKeyRight}
|
||||
callback={setActiveKeyRight}
|
||||
>
|
||||
<span>{faq.title}</span>
|
||||
</Accordion.Toggle>
|
||||
{faq.title}
|
||||
</CustomToggle>
|
||||
<Accordion.Collapse eventKey={faq.id.toString()}>
|
||||
<p>{faq.content}</p>
|
||||
<div className="faq-body-content">
|
||||
{faq.content}
|
||||
</div>
|
||||
</Accordion.Collapse>
|
||||
</li>
|
||||
</div>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sub">
|
||||
<div className="container">
|
||||
<SubCardNew />
|
||||
|
||||
@ -2,63 +2,88 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import ContactPopup from "./ContactPopup";
|
||||
import ConsenHead from "@/src/ConsenHead";
|
||||
|
||||
const HookClosing = () => {
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConsenHead
|
||||
title="About - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo"
|
||||
description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth."
|
||||
/>
|
||||
<style jsx>{`
|
||||
.cta-wrapper-area {
|
||||
padding: 100px 0;
|
||||
background-image: linear-gradient(rgba(10, 28, 54, 0.85), rgba(10, 28, 54, 0.85)), url('/assets/images/Mobile-app-development-service/banner-bg.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
overflow: visible;
|
||||
}
|
||||
.cta-content-box h2 {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cta-content-box p {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
line-height: 1.7;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cta-action {
|
||||
text-align: right;
|
||||
}
|
||||
.cta-btn-premium {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
padding: 18px 45px;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
transition: all 0.4s ease;
|
||||
box-shadow: 0 10px 25px rgba(55, 121, 185, 0.3);
|
||||
}
|
||||
.cta-btn-premium:hover {
|
||||
background: #fff;
|
||||
color: #3779b9;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(255,255,255,0.2);
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.cta-content-box h2 { font-size: 32px; text-align: center; }
|
||||
.cta-content-box p { text-align: center; }
|
||||
.cta-action { text-align: center; margin-top: 40px; }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div
|
||||
className="call-do-action-area"
|
||||
style={{
|
||||
backgroundImage: "url('/assets/images/Mobile-app-development-service/section-7.webp')",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center center",
|
||||
padding: "100px 0",
|
||||
textAlign: "center",
|
||||
color: "#fff",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div className="cta-wrapper-area" id="contact">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="consen-section-title white upper mb-10">
|
||||
<h5 style={{ color: "#1a1f2b", letterSpacing: "2px", fontWeight: 700, fontSize: "22px", }}>Let’s Build the App Your Users Will Love!</h5>
|
||||
<p className="color-white" style={{ fontWeight: 700, fontSize: "17px", }}
|
||||
>
|
||||
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.
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-7 col-md-12">
|
||||
<div className="cta-content-box">
|
||||
<h2>Let’s Build the App Your Users Will Love!</h2>
|
||||
<p>
|
||||
Turn your vision into a high-performing digital product with Waterloo's expert development team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="new-button text-center">
|
||||
<a className="mt-3"
|
||||
<div className="col-lg-5 col-md-12">
|
||||
<div className="cta-action">
|
||||
<a
|
||||
href="#"
|
||||
className="cta-btn-premium"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: "#3779b9",
|
||||
color: "#fff",
|
||||
padding: "12px 30px",
|
||||
borderRadius: "50px",
|
||||
fontWeight: "600",
|
||||
textDecoration: "none",
|
||||
transition: "0.3s",
|
||||
}}
|
||||
onMouseOver={(e) => (e.currentTarget.style.opacity = "0.8")}
|
||||
onMouseOut={(e) => (e.currentTarget.style.opacity = "1")}
|
||||
>
|
||||
Get Started with a Free Consultation
|
||||
Claim Your Free Consultation <i className="fas fa-arrow-right ms-3"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -66,7 +91,6 @@ we’ll turn your vision into a high-performing mobile app.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Popup */}
|
||||
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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."
|
||||
/>
|
||||
|
||||
<div className="testimonial-area color-bg">
|
||||
<style jsx>{`
|
||||
.stand-out-area {
|
||||
padding: 80px 0;
|
||||
background-image: linear-gradient(rgba(10, 28, 54, 0.9), rgba(10, 28, 54, 0.9)), url('/assets/images/Mobile-app-development-service/banner-bg.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.consen-section-title h2 {
|
||||
color: #fff !important;
|
||||
}
|
||||
.stand-out-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
padding: 40px 30px;
|
||||
transition: all 0.4s ease;
|
||||
height: 100%;
|
||||
}
|
||||
.stand-out-title {
|
||||
color: #fff !important;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.stand-out-desc {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
.stand-out-icon-box {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.stand-out-icon-box img {
|
||||
max-width: 35px;
|
||||
filter: brightness(0) invert(1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.stand-out-card:hover {
|
||||
transform: translateY(-10px);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: #3779b9;
|
||||
}
|
||||
.consen-button a {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
padding: 15px 40px;
|
||||
border-radius: 50px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
box-shadow: 0 10px 25px rgba(55, 121, 185, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.consen-button a:hover {
|
||||
background: #fff;
|
||||
color: #3779b9;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="stand-out-area">
|
||||
<div className="container">
|
||||
<div className="row case-study-bg align-items-center mb-40">
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="row align-items-center mb-50">
|
||||
<div className="col-lg-12 text-center">
|
||||
<div className="consen-section-title">
|
||||
<h2>Why Our Apps <span> Stand Out </span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="consen-button text-right">
|
||||
</div>
|
||||
|
||||
<div className="row justify-content-center">
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className="col-lg-3 col-md-6 mb-4">
|
||||
<div className="stand-out-card wow fadeInUp" data-wow-delay={`${0.1 * (index + 1)}s`}>
|
||||
<div className="stand-out-icon-box">
|
||||
<img
|
||||
src={feature.img}
|
||||
alt={feature.title}
|
||||
className="img-fluid"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="stand-out-title">{feature.title}</h4>
|
||||
<p className="stand-out-desc">{feature.desc}</p>
|
||||
|
||||
{/* <div className="stand-out-arrow">
|
||||
<i className="bi bi-arrow-right"></i>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12 text-center mt-4">
|
||||
<div className="consen-button">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
@ -36,52 +168,6 @@ const KeyFeatures = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="row g-4 justify-content-center">
|
||||
{[
|
||||
{
|
||||
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) => (
|
||||
<div key={index} className="col-lg-3 col-md-4 col-sm-6 d-flex col-6">
|
||||
<div className="testimonial-single-box text-center p-4 shadow rounded w-100 d-flex flex-column justify-content-between">
|
||||
<div className="testimonial-content1">
|
||||
<img
|
||||
src={feature.img}
|
||||
alt={feature.text}
|
||||
className="img-fluid"
|
||||
/>
|
||||
<h4 className="testimonial-text new-text colored-testi">{feature.text}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<ConsenHead
|
||||
title="Case Studies - Metatroncube Software Solutions | Innovative Tech in Waterloo"
|
||||
description="Explore case studies showcasing how Metatroncube Software Solutions delivers innovative, user-centric digital products that drive growth."
|
||||
description="Explore case studies showcasing how Metatroncube Software Solutions delivers innovative, user-centric digital products that power your growth."
|
||||
/>
|
||||
|
||||
<div className="case-study-area color-bg">
|
||||
<style jsx>{`
|
||||
.process-swiper-area {
|
||||
padding: 80px 0;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.swiper-full-container {
|
||||
width: 100%;
|
||||
padding: 80px 0 120px;
|
||||
overflow: visible;
|
||||
}
|
||||
.process-swiper {
|
||||
padding: 30px 0 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.process-card {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity: 0.5;
|
||||
transform: scale(0.85);
|
||||
filter: grayscale(100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
:global(.swiper-slide-active) .process-card {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
z-index: 10;
|
||||
filter: grayscale(0);
|
||||
}
|
||||
.process-img-box {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
.process-img-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.process-info-box {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
background: #fff;
|
||||
padding: 25px 30px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
box-shadow: 0 15px 45px rgba(0,0,0,0.1);
|
||||
text-align: left;
|
||||
border-left: 5px solid #3779b9;
|
||||
z-index: 5;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.process-info-box h6 {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #3779b9;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.process-info-box h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #0a1c36;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.section-header {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.process-img-box { height: 400px; }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.process-img-box { height: 350px; }
|
||||
.process-info-box { left: 10px; right: 10px; padding: 20px; }
|
||||
.process-info-box h3 { font-size: 18px; }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="process-swiper-area">
|
||||
<div className="container">
|
||||
<div className="row case-study-bg align-items-center mb-40">
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="row align-items-center mb-50 section-header">
|
||||
<div className="col-lg-8">
|
||||
<div className="consen-section-title">
|
||||
<h2>A Proven Process <span> for App Success</span></h2>
|
||||
<h2 style={{ fontSize: '42px', fontWeight: 800 }}>A Proven Process <span> for App Success</span></h2>
|
||||
<p className="mt-3" style={{ fontSize: '17px', color: '#666', maxWidth: '600px' }}>
|
||||
We follow a structured methodology to ensure every app we build is scalable, secure, and user-friendly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="consen-button text-right">
|
||||
<div className="col-lg-4 d-flex justify-content-lg-end justify-content-center">
|
||||
<div className="cta-action">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
className="cta-btn-premium"
|
||||
onClick={(e) => { e.preventDefault(); setShowPopup(true); }}
|
||||
style={{
|
||||
background: '#3779b9',
|
||||
color: '#fff',
|
||||
padding: '16px 40px',
|
||||
borderRadius: '50px',
|
||||
textDecoration: 'none',
|
||||
fontWeight: '700',
|
||||
display: 'inline-block',
|
||||
boxShadow: '0 10px 25px rgba(55, 121, 185, 0.3)',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
>
|
||||
Start My App Journey
|
||||
Start My App Journey <i className="fas fa-arrow-right ms-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="swiper-full-container">
|
||||
{isClient && (
|
||||
<Swiper
|
||||
modules={[Autoplay]}
|
||||
spaceBetween={30}
|
||||
slidesPerView={3}
|
||||
slidesPerView={1.2}
|
||||
centeredSlides={true}
|
||||
loop={true}
|
||||
loopedSlides={caseStudies.length} // loop all slides
|
||||
speed={4000} // sliding speed
|
||||
speed={1000}
|
||||
autoplay={{
|
||||
delay: 0, // no delay, continuous movement
|
||||
delay: 3500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: false,
|
||||
}}
|
||||
allowTouchMove={true}
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1 },
|
||||
768: { slidesPerView: 3 },
|
||||
1200: { slidesPerView: 3 },
|
||||
768: { slidesPerView: 2.2 },
|
||||
1200: { slidesPerView: 3.2 },
|
||||
}}
|
||||
className="case-study owl-carousel"
|
||||
className="process-swiper"
|
||||
>
|
||||
{caseStudies.concat(caseStudies).map((item, idx) => (
|
||||
{caseStudies.map((item, idx) => (
|
||||
<SwiperSlide key={idx}>
|
||||
<div className="case-study-single-box" style={{ textAlign: "left" }}>
|
||||
<div className="case-study-thumb">
|
||||
<div className="process-card">
|
||||
<div className="process-img-box">
|
||||
<img src={item.img} alt={item.title} />
|
||||
<div className="case-study-content">
|
||||
<div className="case-study-title content-new">
|
||||
</div>
|
||||
<div className="process-info-box">
|
||||
<h6>{item.category}</h6>
|
||||
<h3>{item.title}</h3>
|
||||
</div>
|
||||
<div className="case-button">
|
||||
<Link href={item.link}></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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 },
|
||||
spaceBetween: 40,
|
||||
slidesPerView: 3,
|
||||
centeredSlides: true,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
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 (
|
||||
<div className="team_area color-bg" id="team">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="consen-section-title pb-40">
|
||||
{/* <h5>OUR TESTIMONIALS</h5> */}
|
||||
<h2> Hear From Our </h2>
|
||||
<h2>
|
||||
{" "}
|
||||
<span>Happy Clients</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="row">
|
||||
const [reviews, setReviews] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
async function loadReviews() {
|
||||
try {
|
||||
const res = await fetch("/api/reviews");
|
||||
const data = await res.json();
|
||||
const cleaned = (data.reviews || []).filter(r =>
|
||||
(r.text || r.description || r.snippet || r.review_text || r.body || r.content) &&
|
||||
r.rating >= 4
|
||||
);
|
||||
setReviews(cleaned);
|
||||
} catch (error) {
|
||||
console.error("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 (
|
||||
<section className="testimonial-area-v2">
|
||||
<style jsx>{`
|
||||
.testimonial-area-v2 {
|
||||
padding: 80px 0;
|
||||
background-color: #f7fbff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.section-header {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.bg-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 110px;
|
||||
font-weight: 900;
|
||||
color: rgba(0,0,0,0.03);
|
||||
z-index: -1;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sub-title-orange {
|
||||
color: #ff7e5f;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
.main-title {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
background: #fff;
|
||||
padding: 50px 30px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
height: 520px; /* Fixed height for consistency */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 50px 0; /* Space for zoom effect */
|
||||
opacity: 0.5;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
:global(.swiper-slide-active) .testimonial-card {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.slider-wrapper-outer {
|
||||
position: relative;
|
||||
padding: 40px 0;
|
||||
overflow: visible;
|
||||
}
|
||||
:global(.swiper) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.card-avatar-box {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 25px;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
.card-avatar-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.card-initials {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #3779b9;
|
||||
}
|
||||
|
||||
.reviewer-info h4 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.reviewer-info span {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
display: block;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.review-content {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
line-height: 1.7;
|
||||
font-style: italic;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.slider-controls {
|
||||
position: relative;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
}
|
||||
.nav-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
border: 1px solid #eee;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 20;
|
||||
}
|
||||
.testimonial-prev { left: -60px; }
|
||||
.testimonial-next { right: -60px; }
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
border-color: #3779b9;
|
||||
}
|
||||
|
||||
:global(.testimonial-pagination) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
:global(.swiper-pagination-bullet) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ddd;
|
||||
opacity: 1;
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
:global(.swiper-pagination-bullet-active) {
|
||||
background: #3779b9;
|
||||
width: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.testimonial-prev { left: 10px; }
|
||||
.testimonial-next { right: 10px; }
|
||||
.testimonial-card { height: 480px; }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.bg-text { font-size: 60px; }
|
||||
.main-title { font-size: 32px; }
|
||||
.nav-btn { display: none; }
|
||||
.testimonial-card { height: auto; min-height: 400px; padding: 40px 20px; }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="container">
|
||||
<div className="row text-center section-header">
|
||||
<div className="col-lg-12">
|
||||
<div className="testimonial-icon-thumb">
|
||||
<img src="/assets/images/elements/quotation.webp" alt />
|
||||
{/* <span className="sub-title-orange">What our customers say about us</span> */}
|
||||
<h2 className="main-title">Testimonials</h2>
|
||||
<div className="d-flex justify-content-center">
|
||||
<GoogleReviewsBranding />
|
||||
</div>
|
||||
<div className="testimonial-ratting">
|
||||
<i className="fas fa-star" />
|
||||
<i className="fas fa-star" />
|
||||
<i className="fas fa-star" />
|
||||
<i className="fas fa-star" />
|
||||
<i className="fas fa-star" />
|
||||
{/* <div className="bg-text">Testimonials</div> */}
|
||||
</div>
|
||||
<Swiper {...testimonial_list_slider} className="testimonial_list">
|
||||
{testimonials.map((item, id) => (
|
||||
<SwiperSlide key={id}>
|
||||
<div className="testimonial-content">
|
||||
<div className="testimonial-text">
|
||||
<p>{item.text}</p>
|
||||
</div>
|
||||
<div className="testimonial-title">
|
||||
<h2>{item.author}</h2>
|
||||
<span>{item.role}</span>
|
||||
|
||||
<div className="slider-wrapper-outer" style={{ position: 'relative' }}>
|
||||
{loading ? (
|
||||
<div className="text-center py-5">
|
||||
<p>Loading the latest reviews...</p>
|
||||
</div>
|
||||
) : isClient && (
|
||||
<>
|
||||
<Swiper {...testimonial_list_slider}>
|
||||
{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 (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="testimonial-card">
|
||||
<div className="card-avatar-box">
|
||||
{profileImg ? (
|
||||
<img src={profileImg} alt={name} onError={(e) => (e.target.style.display = 'none')} />
|
||||
) : (
|
||||
<span className="card-initials">{getInitials(name)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="reviewer-info">
|
||||
<h4>{name}</h4>
|
||||
<span>{designation}</span>
|
||||
</div>
|
||||
<div className="review-content">
|
||||
<p>"{truncateText(fullText)}"</p>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</Swiper>
|
||||
|
||||
{/* Custom Navigation */}
|
||||
<div className="nav-btn testimonial-prev">
|
||||
<i className="fas fa-chevron-left"></i>
|
||||
</div>
|
||||
<div className="nav-btn testimonial-next">
|
||||
<i className="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-12 text-center">
|
||||
<div className="process-text">
|
||||
<img
|
||||
src="/assets/images/Mobile-app-development-service/section-8.webp"
|
||||
alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
|
||||
className="img-fluid"
|
||||
/>
|
||||
</div>
|
||||
{/* Custom Pagination */}
|
||||
<div className="testimonial-pagination"></div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-5">
|
||||
<Link legacyBehavior href="https://www.google.com/maps/place/Metatron+Cube+Software+Solutions/@34.0518468,-56.3267266,3z/data=!4m8!3m7!1s0x89d4d4dc0e01490b:0xf0ca6a97298a109c!8m2!3d34.0518468!4d-56.3267266!9m1!1b1!16s%2Fg%2F11k197xnvf">
|
||||
<a target="_blank" className="btn-review-google" style={{
|
||||
background: '#3779b9',
|
||||
color: '#fff',
|
||||
padding: '14px 40px',
|
||||
borderRadius: '50px',
|
||||
fontWeight: '700',
|
||||
textDecoration: 'none',
|
||||
display: 'inline-block',
|
||||
transition: '0.3s'
|
||||
}}>
|
||||
View All Reviews on Google
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default TestimonialSection;
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import ConsenHead from "@/src/ConsenHead";
|
||||
@ -5,78 +6,197 @@ 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 (
|
||||
<>
|
||||
<ConsenHead
|
||||
title="About - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo"
|
||||
description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth."
|
||||
/>
|
||||
<style jsx>{`
|
||||
.industry-serve-area {
|
||||
padding: 80px 0;
|
||||
background-image: linear-gradient(rgba(10, 28, 54, 0.92), rgba(10, 28, 54, 0.92)), url('/assets/images/Mobile-app-development-service/banner-bg.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.consen-section-title h2 {
|
||||
color: #fff !important;
|
||||
}
|
||||
.section-subtitle {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
.industry-card {
|
||||
background: rgba(255, 255, 255, 0.07) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.industry-text h4 {
|
||||
color: #fff !important;
|
||||
}
|
||||
.industry-icon {
|
||||
background: rgba(255, 255, 255, 0.15) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.industry-icon i {
|
||||
color: #fff !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.industry-card:hover .industry-icon {
|
||||
background: #3779b9 !important;
|
||||
}
|
||||
.industry-card:hover .industry-icon i {
|
||||
color: #fff !important;
|
||||
}
|
||||
.industry-card:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
transform: translateY(-8px) scale(1.03);
|
||||
border-color: rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
.abouts-button a {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
padding: 15px 35px;
|
||||
border-radius: 50px;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 10px 25px rgba(55, 121, 185, 0.3);
|
||||
}
|
||||
.abouts-button a:hover {
|
||||
background: #fff;
|
||||
color: #3779b9;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="testimonial-area">
|
||||
<div className="industry-serve-area">
|
||||
<div className="container">
|
||||
|
||||
<div className="row align-items-center mb-3 text-center justify-content-center">
|
||||
<div className="col-lg-7 col-md-6">
|
||||
<div className="row justify-content-center text-center">
|
||||
<div className="col-lg-12">
|
||||
<div className="consen-section-title">
|
||||
<h2>
|
||||
Apps That Power <span>Every Industry</span>
|
||||
</h2>
|
||||
<p className="section-subtitle">We build scalable solutions tailored to your specific business needs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row justify-content-center mb-4">
|
||||
<div className="col-lg-12">
|
||||
<div className="portfolio_nav">
|
||||
<div className="portfolio_menu">
|
||||
<ul className="menu-filtering d-flex justify-content-center flex-wrap gap-3 list-unstyled">
|
||||
{features.map((feature, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`c-pointer ${activeIndex === index ? "current_menu_item" : ""}`}
|
||||
onClick={() => setActiveIndex(index)}
|
||||
<div className="industry-grid-container">
|
||||
{/* First Row: 4 Items */}
|
||||
<div className="row industry-row mb-4 justify-content-center">
|
||||
{firstRow.map((feature, index) => (
|
||||
<div className="col-lg-3 col-md-6 mb-4" key={index}>
|
||||
<div
|
||||
className="industry-card wow fadeInUp"
|
||||
data-wow-delay={feature.delay}
|
||||
>
|
||||
{feature.text}
|
||||
</li>
|
||||
<div className="industry-icon">
|
||||
{/* Using FontAwesome for cleaner scalable icons as per screenshot aesthetic
|
||||
If you prefer images, uncomment the image tag and comment out the i tag */}
|
||||
<i className={feature.icon}></i>
|
||||
{/* <img src={feature.img} alt={feature.text} className="img-fluid" /> */}
|
||||
</div>
|
||||
<div className="industry-text">
|
||||
<h4>{feature.text}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-3 col-md-4 col-sm-6 d-flex">
|
||||
<div className="testimonial-single-box text-center p-4 shadow rounded w-100 d-flex flex-column justify-content-between">
|
||||
<div className="testimonial-content1">
|
||||
<img
|
||||
src={features[activeIndex].img}
|
||||
alt={features[activeIndex].text}
|
||||
className="img-fluid"
|
||||
/>
|
||||
<h4 className="testimonial-text new-text">
|
||||
{features[activeIndex].text}
|
||||
</h4>
|
||||
{/* Second Row: 3 Items */}
|
||||
<div className="row industry-row justify-content-center">
|
||||
{secondRow.map((feature, index) => (
|
||||
<div className="col-lg-4 col-md-6 mb-4" key={index + 4}>
|
||||
<div
|
||||
className="industry-card wow fadeInUp"
|
||||
data-wow-delay={feature.delay}
|
||||
>
|
||||
<div className="industry-icon">
|
||||
<i className={feature.icon}></i>
|
||||
</div>
|
||||
<div className="industry-text">
|
||||
<h4>{feature.text}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-12 pl-0 text-center mt-4">
|
||||
<div className="abouts-button">
|
||||
<div className="new-button mb-3">
|
||||
<Link legacyBehavior href="/about">
|
||||
<a
|
||||
className="mt-4"
|
||||
href="#"
|
||||
@ -87,6 +207,7 @@ const WeServe = () => {
|
||||
>
|
||||
See Case Studies in Your Industry
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,19 +216,6 @@ const WeServe = () => {
|
||||
</div>
|
||||
|
||||
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
|
||||
<style jsx>{`
|
||||
.tab-pill {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.tab-pill:hover {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -8,75 +8,169 @@ 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 (
|
||||
<>
|
||||
<ConsenHead
|
||||
title="About - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo"
|
||||
description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth."
|
||||
/>
|
||||
<style jsx>{`
|
||||
.benefit-section {
|
||||
padding: 80px 0;
|
||||
background-color: #f7fbff;
|
||||
}
|
||||
.benefit-dark-card {
|
||||
background: linear-gradient(135deg, #0a1c36 0%, #1d4d7c 100%);
|
||||
padding: 50px;
|
||||
border-radius: 30px;
|
||||
color: #fff;
|
||||
box-shadow: 0 20px 50px rgba(10, 28, 54, 0.2);
|
||||
height: 100%;
|
||||
}
|
||||
.benefit-list-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 20px 25px;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.benefit-list-item:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
transform: translateX(15px);
|
||||
border-color: #3779b9;
|
||||
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.2);
|
||||
}
|
||||
.benefit-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(55, 121, 185, 0.15);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3779b9;
|
||||
font-size: 22px;
|
||||
margin-right: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.benefit-list-item:hover .benefit-icon {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
.benefit-text h4 {
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
.benefit-text p {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.benefit-image-box {
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
|
||||
height: 100%;
|
||||
}
|
||||
.benefit-image-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.benefit-btn {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
padding: 16px 35px;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.benefit-btn:hover {
|
||||
background: #fff;
|
||||
color: #3779b9;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="about-area new-style-new color-bg-white">
|
||||
<div className="benefit-section">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6 col-md-12 text-center">
|
||||
<div className="process-text mb-4">
|
||||
<div className="row justify-content-center text-center mb-60">
|
||||
<div className="col-lg-12">
|
||||
<div className="consen-section-title">
|
||||
<h2 style={{ fontSize: '38px', fontWeight: 800 }}>Is This Service <span>Right for You?</span></h2>
|
||||
<p className="mt-3" style={{ color: '#666', fontSize: '17px' }}>We empower diverse clients to succeed in the mobile-first world.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row align-items-stretch">
|
||||
<div className="col-lg-6">
|
||||
<div className="benefit-dark-card wow fadeInLeft">
|
||||
<div className="benefit-list">
|
||||
{benefits.map((item, index) => (
|
||||
<div key={index} className="benefit-list-item">
|
||||
<div className="benefit-icon">
|
||||
<i className={item.icon}></i>
|
||||
</div>
|
||||
<div className="benefit-text">
|
||||
<h4>{item.title}</h4>
|
||||
<p>{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
className="benefit-btn"
|
||||
onClick={() => setShowPopup(true)}
|
||||
>
|
||||
Check If We Are a Good Fit <i className="fas fa-arrow-right ms-3"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="benefit-image-box wow fadeInRight image-section">
|
||||
<img
|
||||
src="/assets/images/Mobile-app-development-service/section-5.webp"
|
||||
alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
|
||||
className="img-fluid"
|
||||
src="/assets/images/Mobile-app-development-service/wireframing.webp"
|
||||
alt="Benefits of App Development"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content */}
|
||||
<div class="col-lg-6">
|
||||
<div class="consen-section-title mb-2">
|
||||
{/* <h5>Why Choose Us?</h5> */}
|
||||
|
||||
<h2>Is This Service <span> Right for You?</span></h2>
|
||||
{/* <p class="choose-text1">
|
||||
Appropriately enhance principle-centered innovation rather than high standards in platforms.
|
||||
Credibly orchestrate functional.
|
||||
</p> */}
|
||||
</div>
|
||||
|
||||
<div class="dreamit-icon-list balanced-icon-list">
|
||||
<ul>
|
||||
<li><i class="bi bi-arrow-right-circle"></i><span className="pack"> <b>Startups</b> launching their first app</span></li>
|
||||
<li><i class="bi bi-arrow-right-circle"></i><span className="pack"> <b>Enterprises</b> scaling with mobile solutions </span></li>
|
||||
<li><i class="bi bi-arrow-right-circle"></i><span className="pack"> <b>Entrepreneurs </b> bringing ideas to life </span></li>
|
||||
<li><i class="bi bi-arrow-right-circle"></i><span className="pack"> <b>Businesses</b> going digital to reach customers</span></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-12 mb-4 pl-0">
|
||||
<div className="abouts-button">
|
||||
<div className="new-button">
|
||||
<Link legacyBehavior href="/about">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
>
|
||||
Check If This Is Right for You
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
{/* Shape on bottom right */}
|
||||
{/* <div className="about-shape-thumb2 bounce-animate4">
|
||||
<img src="/assets/images/resource/all-shape.png" alt="shape" />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Popup */}
|
||||
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<ConsenHead
|
||||
@ -14,75 +40,191 @@ const Whychooseus = () => {
|
||||
description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth."
|
||||
/>
|
||||
|
||||
<div className="about-area new-style bg-white">
|
||||
<style jsx>{`
|
||||
.why-partner-process {
|
||||
padding: 100px 0;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.process-header {
|
||||
margin-bottom: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.process-header h2 {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
color: #0a1c36;
|
||||
}
|
||||
.process-header h2 span {
|
||||
color: #3779b9;
|
||||
}
|
||||
.process-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.icon-wrapper {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: #fff;
|
||||
border: 2px dashed #e0e0e0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 30px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.process-item:hover .icon-wrapper {
|
||||
border-color: #3779b9;
|
||||
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.15);
|
||||
}
|
||||
.step-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: #f0f4f8;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3779b9;
|
||||
font-size: 28px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.process-item:hover .step-icon {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
}
|
||||
.step-number {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-110px); /* Position it to the left of the main icon */
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #88c8e8; /* Light blue from screenshot */
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: #666; /* Grey text from screenshot */
|
||||
z-index: 5;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
.process-content {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.process-content h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #0a1c36;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.process-content p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.connector-line {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
left: 60%;
|
||||
z-index: -1;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.top-shape {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
color: #0a1c36;
|
||||
}
|
||||
.top-shape svg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.why-partner-process {
|
||||
padding: 100px 0;
|
||||
}
|
||||
.process-header h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.process-item {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.step-number {
|
||||
left: 50%;
|
||||
transform: translateX(-90px) translateY(-10px);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.icon-wrapper {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.step-icon {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="why-partner-process">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
|
||||
<div class="col-lg-6 col-md-12 text-center">
|
||||
<div class="dreamit-about-thumb-new mr-lg-4">
|
||||
<img src="/assets/images/Mobile-app-development-service/section-1.webp" alt="About Metatroncube Canada" />
|
||||
|
||||
{/* <div class="about-shape-thumb1 bounce-animate2">
|
||||
<img src="/assets/images/about/about-shpe.png" alt="Decorative Shape 1" />
|
||||
</div> */}
|
||||
|
||||
{/* <div class="about-shape-thumb3 bounce-animate4">
|
||||
<img src="/assets/images/elements/element-2 .webp" alt="Decorative Shape 2" />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="consen-section-title mb-4">
|
||||
<div className="consen-section-title">
|
||||
<h2>Why Partner With Our <span>App Development Team?</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row g-3">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12">
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<img src="/assets/images/about/innovative.webp" alt="Innovative technology strategy by Metatron Cube Solutions." className="me-3 pr-3" />
|
||||
<div>
|
||||
<h5 className="consone-des">Expert Developers</h5>
|
||||
<p>10+ years of experience in iOS, Android &
|
||||
cross-platform apps.
|
||||
</p>
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-12 text-center">
|
||||
<div className="process-header">
|
||||
<h2>Why Partner With Our <br /> <span>App Development Team?</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6 col-md-6 col-sm-12">
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<img src="/assets/images/about/teamwork.webp" alt="Collaborative team at Metatron Cube Solutions." className="me-3 pr-3" />
|
||||
<div>
|
||||
<h5 className="consone-des">Fast Turnaround</h5>
|
||||
<p>Agile process for quicker time-to-market.</p>
|
||||
<div className="row justify-content-center">
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className="col-lg-3 col-md-6">
|
||||
<div className="process-item">
|
||||
<span className="step-number">{feature.number}</span>
|
||||
<div className="icon-wrapper">
|
||||
<div className="step-icon">
|
||||
<i className={feature.icon}></i>
|
||||
</div>
|
||||
{index < features.length - 1 && (
|
||||
<div className="connector-line d-none d-lg-block">
|
||||
<svg width="150" height="40" viewBox="0 0 150 40" fill="none">
|
||||
<path d="M10 30 C 40 5, 110 5, 140 30" stroke="#0a1c36" strokeWidth="1" strokeDasharray="5 5" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="process-content">
|
||||
<h3>{feature.title}</h3>
|
||||
<p>{feature.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6 col-md-6 col-sm-12">
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<img src="/assets/images/about/future.webp" alt="Future-ready innovation by Metatron Cube Solutions." className="me-3 pr-3" />
|
||||
<div>
|
||||
<h5 className="consone-des">Custom UI/UX</h5>
|
||||
<p>Apps that users love to use every day.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6 col-md-6 col-sm-12">
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<img src="/assets/images/about/future.webp" alt="Shaping the digital future with Metatron Cube Solutions." className="me-3 pr-3" />
|
||||
<div>
|
||||
<h5 className="consone-des">Secure & Scalable</h5>
|
||||
<p>Built for long-term growth.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-12">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 text-center mt-4">
|
||||
<div className="abouts-button">
|
||||
<div className="new-button">
|
||||
<a className="mt-2"
|
||||
@ -99,9 +241,6 @@ cross-platform apps.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
|
||||
229
src/components/Mobile-app-development-service/work-process.js
Normal file
229
src/components/Mobile-app-development-service/work-process.js
Normal file
@ -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 (
|
||||
<section className="work-process-area pt-100 pb-100" style={{ backgroundColor: "#fff" }}>
|
||||
<ConsenHead
|
||||
title="Our Process - Metatroncube Software Solutions"
|
||||
description="Learn about our proven mobile app development process, from registration to launch and beyond."
|
||||
/>
|
||||
<style jsx>{`
|
||||
.work-process-area {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.process-header {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.process-header h2 {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
color: #0a1c36;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.process-header h2 span {
|
||||
color: #3779b9;
|
||||
}
|
||||
.process-header p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.process-step-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.process-item {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.icon-wrapper {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: #fff;
|
||||
border: 2px dashed #e0e0e0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 30px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.process-item:hover .icon-wrapper {
|
||||
border-color: #3779b9;
|
||||
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.15);
|
||||
}
|
||||
.step-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: #f0f4f8;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3779b9;
|
||||
font-size: 28px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.process-item:hover .step-icon {
|
||||
background: #3779b9;
|
||||
color: #fff;
|
||||
}
|
||||
.step-number {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 25%;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.process-content .subtitle {
|
||||
font-size: 13px;
|
||||
color: #3779b9;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
.process-content h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #0a1c36;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.process-content p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.connector-line {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
left: 60%;
|
||||
z-index: -1;
|
||||
opacity: 0.2;
|
||||
display: block;
|
||||
}
|
||||
.connector-line svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.connector-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.top-shape {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
color: #0a1c36;
|
||||
}
|
||||
.top-shape svg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-12 text-center">
|
||||
<div className="top-shape">
|
||||
<svg viewBox="0 0 100 100" fill="currentColor">
|
||||
<path d="M50 80c-2-2-15-13-22-20-7-7-10-14-10-20 0-10 8-18 18-18 6 0 11 3 14 8 3-5 8-8 14-8 10 0 18 8 18 18 0 6-3 13-10 20-7 7-20 18-22 20z" opacity="0.1" />
|
||||
<circle cx="50" cy="40" r="3" fill="#3779b9" />
|
||||
<circle cx="40" cy="30" r="2" fill="#3779b9" />
|
||||
<circle cx="60" cy="30" r="2" fill="#3779b9" />
|
||||
<circle cx="35" cy="45" r="2" fill="#3779b9" />
|
||||
<circle cx="65" cy="45" r="2" fill="#3779b9" />
|
||||
<circle cx="50" cy="55" r="2" fill="#3779b9" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="process-header">
|
||||
<h2>Why Partner With Our <span>App Development Team?</span></h2>
|
||||
<p>Was are delightful solicitude discovered collecting man day. Resolving neglected sir tolerably.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row justify-content-center" style={{ position: 'relative' }}>
|
||||
{steps.map((step, index) => (
|
||||
<div key={index} className="col-lg-3 col-md-6">
|
||||
<div className="process-item">
|
||||
<span className="step-number">{step.number}</span>
|
||||
<div className="icon-wrapper">
|
||||
<div className="step-icon">
|
||||
<i className={step.icon}></i>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div className="connector-line d-none d-lg-block">
|
||||
<svg width="150" height="40" viewBox="0 0 150 40" fill="none">
|
||||
<path d="M10 30 C 40 5, 110 5, 140 30" stroke="#0a1c36" strokeWidth="1" strokeDasharray="5 5" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="process-content">
|
||||
<span className="subtitle">{step.subtitle}</span>
|
||||
<h3>{step.title}</h3>
|
||||
<p>{step.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkProcess;
|
||||
@ -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 (
|
||||
<>
|
||||
<style jsx>{`
|
||||
.nav_scroll_mobile li {
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.nav_scroll_mobile li.active {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.nav_scroll_mobile li.active a {
|
||||
color: #3779b9 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.nav_scroll_mobile li a {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.nav_scroll_mobile li::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #3779b9;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.nav_scroll_mobile li.active::after {
|
||||
width: 50%;
|
||||
}
|
||||
.sticky .nav_scroll_mobile li a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.sticky .nav_scroll_mobile li.active a {
|
||||
color: #3779b9 !important;
|
||||
}
|
||||
`}</style>
|
||||
<Fragment>
|
||||
{/* Top Bar */}
|
||||
<div className="header-top-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<div className="col-lg-9">
|
||||
<div className="header-top-address">
|
||||
<ul>
|
||||
<li>
|
||||
@ -84,7 +126,7 @@ const Header9 = () => {
|
||||
</div>
|
||||
|
||||
{/* Social Icons */}
|
||||
<div className="col-lg-4">
|
||||
<div className="col-lg-3">
|
||||
<div className="header-top-social">
|
||||
<a
|
||||
href="https://www.facebook.com/metatroncubecanada"
|
||||
@ -164,6 +206,9 @@ const Header9 = () => {
|
||||
<li className={activeSection === "service" ? "active" : ""}>
|
||||
<a href="#service">SERVICES</a>
|
||||
</li>
|
||||
<li className={activeSection === "portfolio" ? "active" : ""}>
|
||||
<a href="#portfolio">PORTFOLIO</a>
|
||||
</li>
|
||||
<li className={activeSection === "faq" ? "active" : ""}>
|
||||
<a href="#faq">FAQ</a>
|
||||
</li>
|
||||
|
||||
956
styles/mobile-app-landing.css
Normal file
956
styles/mobile-app-landing.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user