Compare commits
3 Commits
d5f2a2a59e
...
08366424d1
| Author | SHA1 | Date | |
|---|---|---|---|
| 08366424d1 | |||
| acd6934e71 | |||
| 8acf71c69c |
@ -8,6 +8,8 @@ import FaqPageSection from "@/components/faq/FaqPageSection";
|
|||||||
import FaqVideoSection from "@/components/careers/FaqVideoSection";
|
import FaqVideoSection from "@/components/careers/FaqVideoSection";
|
||||||
import PageHeader from "@/components/common/PageHeader";
|
import PageHeader from "@/components/common/PageHeader";
|
||||||
import FaqSection from "@/components/home/home-3/FaqSection";
|
import FaqSection from "@/components/home/home-3/FaqSection";
|
||||||
|
import FaqFour from "@/components/home/FaqFour";
|
||||||
|
import FaqFive from "@/components/home/FaqFive";
|
||||||
|
|
||||||
export default function FaqPage() {
|
export default function FaqPage() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -27,8 +29,10 @@ export default function FaqPage() {
|
|||||||
<main>
|
<main>
|
||||||
<PageHeader title="FAQ" />
|
<PageHeader title="FAQ" />
|
||||||
<FaqPageSection />
|
<FaqPageSection />
|
||||||
|
<FaqFour />
|
||||||
|
<FaqFive />
|
||||||
<FaqVideoSection />
|
<FaqVideoSection />
|
||||||
<FaqSection/>
|
{/* <FaqSection/> */}
|
||||||
</main>
|
</main>
|
||||||
<Footer1 />
|
<Footer1 />
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -9021,7 +9021,7 @@ body {
|
|||||||
/* Why Choose Us Section Styles */
|
/* Why Choose Us Section Styles */
|
||||||
.why-choose-us {
|
.why-choose-us {
|
||||||
padding: 80px 0;
|
padding: 80px 0;
|
||||||
background: #eaf0f9;
|
background: #eaf0f9 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
@ -9130,6 +9130,7 @@ body {
|
|||||||
|
|
||||||
.why-choose-us .main-image img {
|
.why-choose-us .main-image img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 550px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -10101,7 +10102,7 @@ body {
|
|||||||
|
|
||||||
/* FAQ Page Section Styles */
|
/* FAQ Page Section Styles */
|
||||||
.faq-page-section {
|
.faq-page-section {
|
||||||
background: #f8fbff;
|
/* background: #f8fbff; */
|
||||||
padding: 80px 0;
|
padding: 80px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -11232,9 +11233,9 @@ body {
|
|||||||
/* ============================================================
|
/* ============================================================
|
||||||
BLOG SECTION & PAGINATION (GLOBAL)
|
BLOG SECTION & PAGINATION (GLOBAL)
|
||||||
============================================================ */
|
============================================================ */
|
||||||
.blog-section-one.section-space {
|
/* .blog-section-one.section-space {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
} */
|
||||||
|
|
||||||
.pagination-wrapper {
|
.pagination-wrapper {
|
||||||
padding-top: 60px;
|
padding-top: 60px;
|
||||||
|
|||||||
@ -3,11 +3,11 @@ import Header1 from "@/components/layout/Header1";
|
|||||||
import Footer1 from "@/components/layout/Footer1";
|
import Footer1 from "@/components/layout/Footer1";
|
||||||
import PageHeader from "@/components/common/PageHeader";
|
import PageHeader from "@/components/common/PageHeader";
|
||||||
import ServiceDetails from "@/components/services-digital-solutions/ServiceDetails";
|
import ServiceDetails from "@/components/services-digital-solutions/ServiceDetails";
|
||||||
import { psychologyServices } from "@/utils/data";
|
import { ourServices } from "@/utils/data";
|
||||||
import { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
|
|
||||||
export async function generateStaticParams() {
|
export async function generateStaticParams() {
|
||||||
return psychologyServices.map((service) => ({
|
return ourServices.map((service) => ({
|
||||||
slug: service.slug,
|
slug: service.slug,
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
@ -15,7 +15,7 @@ export async function generateStaticParams() {
|
|||||||
export default async function ServiceDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
|
export default async function ServiceDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||||
const { slug } = await params;
|
const { slug } = await params;
|
||||||
|
|
||||||
const service = psychologyServices.find((s) => s.slug === slug);
|
const service = ourServices.find((s) => s.slug === slug);
|
||||||
|
|
||||||
if (!service) {
|
if (!service) {
|
||||||
notFound();
|
notFound();
|
||||||
|
|||||||
@ -24,6 +24,7 @@ import WorkProcessSection2 from "@/components/careers/WorkProcessSection";
|
|||||||
import AboutService from "@/components/services-digital-solutions/AboutService";
|
import AboutService from "@/components/services-digital-solutions/AboutService";
|
||||||
import PageHeader from "@/components/common/PageHeader";
|
import PageHeader from "@/components/common/PageHeader";
|
||||||
import AboutTwo from "@/components/home/AboutTwo";
|
import AboutTwo from "@/components/home/AboutTwo";
|
||||||
|
import ResultsSection from "@/components/about/Results";
|
||||||
|
|
||||||
export default function Home3() {
|
export default function Home3() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -49,6 +50,7 @@ export default function Home3() {
|
|||||||
<ServiceSection2 />
|
<ServiceSection2 />
|
||||||
<WorkProcessSection />
|
<WorkProcessSection />
|
||||||
<AboutTwo />
|
<AboutTwo />
|
||||||
|
<ResultsSection />
|
||||||
{/* <AboutService /> */}
|
{/* <AboutService /> */}
|
||||||
{/* <FeaturesSection2 /> */}
|
{/* <FeaturesSection2 /> */}
|
||||||
{/* <ProjectsSection /> */}
|
{/* <ProjectsSection /> */}
|
||||||
|
|||||||
74
src/components/about/Results.tsx
Normal file
74
src/components/about/Results.tsx
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const ResultsSection = () => {
|
||||||
|
return (
|
||||||
|
<section className="why-choose-us section-space">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row align-items-center">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="content-area pr-50">
|
||||||
|
<div className="sec-title-wrapper mb-30">
|
||||||
|
<div className="sec-title">
|
||||||
|
<div className="sec-title__shape"></div>
|
||||||
|
<h6 className="sec-title__tagline">Discover Our Process</h6>
|
||||||
|
<h3 className="sec-title__title">How We Deliver Exceptional Results</h3>
|
||||||
|
</div>
|
||||||
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||||
|
<p>
|
||||||
|
Delve into Metatroncube’s unique approach to delivering exceptional results. Our ‘Discover Our Process’ section illuminates the meticulous steps we take in transforming your digital vision into tangible success.
|
||||||
|
</p>
|
||||||
|
<p className="section-desc">
|
||||||
|
From the initial consultation to the final launch and beyond, we blend strategic planning, innovative design, and cutting-edge technology to craoft digital solutions that stand out. This journey is not just about reaching yur goals; it’s about exceeding them and setting new standards in the digital world. Explore our proven process that combines expertise, creativity, and client collaboration to achieve extraordinary outcomes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* <div className="feature-list mb-40">
|
||||||
|
<div className="feature-item d-flex align-items-center mb-30">
|
||||||
|
<div className="feature-icon">
|
||||||
|
<i className="fa-solid fa-handshake-angle"></i>
|
||||||
|
</div>
|
||||||
|
<div className="feature-content">
|
||||||
|
<h4>We Are Improve Choose Business.</h4>
|
||||||
|
<p>Market research branding of engagement.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="feature-item d-flex align-items-center mb-0 border-top-line">
|
||||||
|
<div className="feature-icon">
|
||||||
|
<i className="fa-solid fa-lightbulb"></i>
|
||||||
|
</div>
|
||||||
|
<div className="feature-content">
|
||||||
|
<h4>Business Consulting This Network.</h4>
|
||||||
|
<p>Business tailored design, management & off support.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bottom-note">
|
||||||
|
<div className="note-item">
|
||||||
|
<i className="fa-solid fa-circle-arrow-right"></i>
|
||||||
|
<span>We are business many variations of passages of this business magical solution.</span>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="image-area-wrapper p-relative">
|
||||||
|
<div className="main-image">
|
||||||
|
<img src="/assets/img-app/about/about-img5.png" alt="Business Meeting" />
|
||||||
|
</div>
|
||||||
|
<div className="circular-image">
|
||||||
|
<div className="inner-circle">
|
||||||
|
<img src="/assets/img-app/about/about-img5.png" alt="Profile" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ResultsSection;
|
||||||
@ -93,8 +93,9 @@ const FaqVideoSection = () => {
|
|||||||
<div className="col-lg-8 wow fadeInUp" data-wow-delay="0ms">
|
<div className="col-lg-8 wow fadeInUp" data-wow-delay="0ms">
|
||||||
<div className="contact-form-card">
|
<div className="contact-form-card">
|
||||||
<div className="section-title-wrapper text-center mb-40">
|
<div className="section-title-wrapper text-center mb-40">
|
||||||
<span className="section-subtitle">Get In Touch</span>
|
<span className="section-subtitle">Let's Connect</span>
|
||||||
<h2 className="section-heading text-white">Have a Project in Mind?</h2>
|
<h2 className="section-heading text-white">Get In Touch With Metatroncube</h2>
|
||||||
|
<p className="text-white">Your Questions and Ideas Matter to Us</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{alert.show && (
|
{alert.show && (
|
||||||
@ -201,7 +202,12 @@ const FaqVideoSection = () => {
|
|||||||
<div className="video-content-overlay">
|
<div className="video-content-overlay">
|
||||||
<h2 className="consultation-title">Take the First Step Towards Digital Excellence.</h2>
|
<h2 className="consultation-title">Take the First Step Towards Digital Excellence.</h2>
|
||||||
<p className="consultation-text">Book Your Personalized Consultation with Our Experts Today.</p>
|
<p className="consultation-text">Book Your Personalized Consultation with Our Experts Today.</p>
|
||||||
<a href="/contact" className="primary-btn-1-link mt-30">
|
<a
|
||||||
|
href="https://calendly.com/metatroncubeswsolutions/request-consultation?month=2025-05"
|
||||||
|
className="primary-btn-1 mt-4"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
Schedule Consultation | <i className="fa-solid fa-calendar-check"></i>
|
Schedule Consultation | <i className="fa-solid fa-calendar-check"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { psychologyServices } from "@/utils/data";
|
import { ourServices } from "@/utils/data";
|
||||||
|
|
||||||
const ServiceSection2 = () => {
|
const ServiceSection2 = () => {
|
||||||
const sectionRef = useRef<HTMLDivElement>(null);
|
const sectionRef = useRef<HTMLDivElement>(null);
|
||||||
@ -44,7 +44,7 @@ const ServiceSection2 = () => {
|
|||||||
return () => observer.disconnect();
|
return () => observer.disconnect();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const services = psychologyServices;
|
const services = ourServices;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section ref={sectionRef} className="service-three">
|
<section ref={sectionRef} className="service-three">
|
||||||
@ -61,7 +61,7 @@ const ServiceSection2 = () => {
|
|||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
|
<h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
|
||||||
<h3 className="sec-title__title">We Are Service Your Business</h3>
|
<h3 className="sec-title__title">We Run All Kinds Of Services <br /> From Technologies</h3>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,12 +35,12 @@ const WorkProcessSection2 = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const processCards = [
|
const processCards = [
|
||||||
{ id: 1, text: "Brainstorming \n Ideas", icon: "tolak-icons-two-lamp" },
|
{ id: 1, text: "Consultation & Strategy Development", icon: "tolak-icons-two-lamp" },
|
||||||
{ id: 2, text: "Product \n Design", icon: "tolak-icons-two-settings-2" },
|
{ id: 2, text: "Design & Development", icon: "tolak-icons-two-settings-2" },
|
||||||
{ id: 3, text: "Back-End \n Development", icon: "tolak-icons-two-optimization" },
|
{ id: 3, text: "Implementation & Optimization", icon: "tolak-icons-two-optimization" },
|
||||||
{ id: 4, text: "SEO \n Optimization", icon: "tolak-icons-two-business-analysis" },
|
{ id: 4, text: "Testing & Launch", icon: "tolak-icons-two-business-analysis" },
|
||||||
{ id: 6, text: "Digital SEO \n Marketing", icon: "tolak-icons-two-support" },
|
{ id: 5, text: "Ongoing Support & Analysis", icon: "tolak-icons-two-support" },
|
||||||
{ id: 7, text: "Mobile \n Development", icon: "tolak-icons-two-smart-solution" },
|
{ id: 6, text: "Client Engagement & Feedback", icon: "tolak-icons-two-smart-solution" },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -69,14 +69,13 @@ const WorkProcessSection2 = () => {
|
|||||||
<div className="sec-title-wrapper wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
|
<div className="sec-title-wrapper wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">HOW WE DO</h6>
|
<h6 className="sec-title__tagline">digital transformation journey</h6>
|
||||||
<h3 className="sec-title__title">Amazing Solutions<br />For Business</h3>
|
<h3 className="sec-title__title">Embark on a digital transformation journey with Metatroncube</h3>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||||
</div>
|
</div>
|
||||||
<p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
|
<p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
|
||||||
We don't believe in a one-size-fit-all approach. Our services are carefully
|
Our process begins with consultation and strategy development, where we understand your vision and create a customized plan aligned with your goals. We then move into design and development, combining creativity and technology to build functional and visually appealing solutions. Next, we implement and optimize the strategy to ensure efficiency, performance, and measurable impact. After thorough testing, we launch your project smoothly with a focus on quality and reliability. Finally, we provide ongoing support, continuous analysis, and client feedback integration to ensure long-term growth and sustained digital success.
|
||||||
customized to suit your specific need, ensuring you to achieve your goals.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -97,10 +97,11 @@ const ContactSection = () => {
|
|||||||
<div className="sec-title-wrapper">
|
<div className="sec-title-wrapper">
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">CONTACT WITH US</h6>
|
<h6 className="sec-title__tagline">Let's Connect</h6>
|
||||||
<h3 className="sec-title__title">Feel Free to Get in Touch</h3>
|
<h3 className="sec-title__title">Drop us a Line.</h3>
|
||||||
|
<p>Whether you have a question, a project idea, or just want to chat about your digital needs, our team is here to listen and provide tailored solutions. Reach out to Metatroncube Software Solutions and start your journey towards innovative digital success.</p>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||||
</div>
|
</div>
|
||||||
<div className="contact-info-list">
|
<div className="contact-info-list">
|
||||||
<div className="contact-info-item d-flex align-items-center mb-30">
|
<div className="contact-info-item d-flex align-items-center mb-30">
|
||||||
@ -126,8 +127,8 @@ const ContactSection = () => {
|
|||||||
<i className="fa-solid fa-location-dot"></i>
|
<i className="fa-solid fa-location-dot"></i>
|
||||||
</div>
|
</div>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<span>Visit Now</span>
|
<span>Location</span>
|
||||||
<h6>Canada</h6>
|
<h6>Waterloo, Ontario Canada</h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,123 +3,47 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
|
||||||
const FaqPageSection = () => {
|
const FaqPageSection = () => {
|
||||||
const [activeId, setActiveId] = useState<number | null>(1);
|
const [activeLeftId, setActiveLeftId] = useState<number | null>(1);
|
||||||
|
const [activeRightId, setActiveRightId] = useState<number | null>(null);
|
||||||
|
|
||||||
const toggleAccordion = (id: number) => {
|
const toggleLeftAccordion = (id: number) => {
|
||||||
setActiveId(activeId === id ? null : id);
|
setActiveLeftId(activeLeftId === id ? null : id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleRightAccordion = (id: number) => {
|
||||||
|
setActiveRightId(activeRightId === id ? null : id);
|
||||||
};
|
};
|
||||||
|
|
||||||
const leftFaqs = [
|
const leftFaqs = [
|
||||||
{
|
{ id: 1, question: "What is digital transformation, and why is it important for traditional businesses?", answer: "Digital transformation involves integrating digital technology into all areas of a business, fundamentally changing how you operate and deliver value to customers. It's crucial for staying competitive and relevant in the ever-evolving digital landscape.", animationDelay: ".5s" },
|
||||||
id: 1,
|
{ id: 2, question: "How can we transition to digital without losing the essence of our brand?", answer: "We focus on understanding your brand’s core values and message to ensure that your digital presence reflects your brand's unique identity. This involves creating a consistent brand voice and imagery across all digital platforms.", animationDelay: ".5s" },
|
||||||
question: "How does Metatron Cube ensure project success?",
|
{ id: 3, question: "What are the benefits of effective online marketing for restaurants?", answer: "Online marketing can significantly increase your restaurant's visibility, attract new customers, and enhance customer engagement through social media, online reviews, and a strong online presence.", animationDelay: ".5s" },
|
||||||
answer: "We follow a rigorous discovery process, Agile development cycles, and continuous quality assurance to ensure every project meets client goals on time and within budget."
|
{ id: 4, question: "How can Metatroncube help in managing negative online reviews?", answer: "We provide strategies for proactive review management, encouraging positive reviews, and professionally responding to negative feedback, turning challenges into opportunities to showcase excellent customer service.", animationDelay: ".5s" },
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
question: "What tech stacks do you specialize in?",
|
|
||||||
answer: "Our expertise spans modern frameworks including React, Next.js, Node.js, and Python, along with specialized platforms like Shopify and custom ERP solutions."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
question: "How do you handle intellectual property (IP)?",
|
|
||||||
answer: "Upon project completion and final payment, full ownership and IP rights of the source code and assets are transferred to the client, as stipulated in our standard agreements."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
question: "Can you work with our existing in-house team?",
|
|
||||||
answer: "Absolutely. We offer staff augmentation and dedicated team models that integrate seamlessly with your internal workflows and communication tools."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
question: "What is your communication model during development?",
|
|
||||||
answer: "We use Slack, Jira, and regular Zoom check-ins to provide transparent updates. You'll have a dedicated project manager acting as your primary point of contact."
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const rightFaqs = [
|
const rightFaqs = [
|
||||||
{
|
{ id: 5, question: "Can digital lead generation truly benefit real estate agents?", answer: "Absolutely. Digital lead generation, through targeted online ads and local SEO, can significantly increase your visibility to potential clients, helping you stand out in the competitive real estate market.", animationDelay: ".5s" },
|
||||||
id: 6,
|
{ id: 6, question: "What strategies do you recommend for real estate agents to improve their online presence?", answer: "We recommend a combination of an updated, user-friendly website, active social media engagement, and targeted digital marketing campaigns to enhance your online presence and attract potential clients.", animationDelay: ".5s" },
|
||||||
question: "How do you maintain code quality and standards?",
|
{ id: 7, question: "How can mortgage agents build a trustworthy online brand?", answer: "Building a trustworthy online brand involves creating consistent, valuable content, showcasing client testimonials, and engaging with your audience to establish credibility and authority in your field.", animationDelay: ".5s" },
|
||||||
answer: "Our developers follow strict linting rules, conduct peer code reviews, and implement automated testing to maintain a clean, scalable, and bug-free codebase."
|
{ id: 8, question: "How can small businesses manage social media effectively?", answer: "Small businesses can manage social media effectively by maintaining a consistent posting schedule, creating engaging and relevant content, and actively interacting with their audience to build a loyal community.", animationDelay: ".5s" },
|
||||||
},
|
{ id: 9, question: "What are the key elements of a successful e-commerce platform for physical stores?", answer: "A successful e-commerce platform should offer an easy-to-navigate layout, mobile optimization, secure payment options, and a seamless shopping experience that mirrors the in-store experience.", animationDelay: ".5s" },
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
question: "What are your post-launch support options?",
|
|
||||||
answer: "We offer tiered maintenance packages that include security patches, performance monitoring, regular backups, and feature enhancements to keep your platform running smoothly."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
question: "How quickly can you start a new project?",
|
|
||||||
answer: "Depending on the scope and resource availability, we can typically kick off a project within 1 to 2 weeks after the discovery phase and agreement signing."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
question: "Do you provide UI/UX design services?",
|
|
||||||
answer: "Yes, our design-led approach ensures that every project starts with a focus on user experience, creating intuitive and visually stunning interfaces."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 10,
|
|
||||||
question: "How do you handle security and data protection?",
|
|
||||||
answer: "We implement industry-standard encryption, secure API protocols, and regular security audits to protect your data and ensure compliance with global standards."
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const leftFaqs2 = [
|
// const leftFaqs2 = [
|
||||||
{
|
// { id: 10, question: "How can Metatroncube assist in setting up an e-commerce site for my store?", answer: " We can help by designing a user-friendly e-commerce website, ensuring mobile optimization, and integrating secure payment gateways to provide a smooth online shopping experience for your customers.", animationDelay: ".5s" },
|
||||||
id: 11,
|
// { id: 11, question: "What's the importance of content marketing for service-based businesses?", answer: "Content marketing helps establish your business as an industry authority, increases engagement, and drives lead generation. It's a vital tool for building long-term relationships with your audience.", animationDelay: ".5s" },
|
||||||
question: "How does Metatron Cube ensure project success?",
|
// { id: 12, question: "How can I ensure my content marketing strategy is effective?", answer: "Your strategy should focus on creating valuable, relevant content that addresses your audience's needs and interests. Storytelling and regular engagement are key to connecting with potential clients.", animationDelay: ".5s" },
|
||||||
answer: "We follow a rigorous discovery process, Agile development cycles, and continuous quality assurance to ensure every project meets client goals on time and within budget."
|
// { id: 13, question: "How does Metatroncube address the challenges faced by businesses in digital transformation?", answer: "We offer tailored solutions that simplify the digital transition, provide comprehensive support throughout the process, and create strategies that align with your business objectives.", animationDelay: ".5s" },
|
||||||
},
|
// { id: 14, question: "Can digital marketing strategies be cost-effective for small businesses?", answer: "Yes, digital marketing offers cost-effective solutions with measurable results. We focus on strategies that provide the best ROI, tailored to fit the budget and goals of small businesses.", animationDelay: ".5s" },
|
||||||
{
|
// ];
|
||||||
id: 12,
|
|
||||||
question: "What tech stacks do you specialize in?",
|
|
||||||
answer: "Our expertise spans modern frameworks including React, Next.js, Node.js, and Python, along with specialized platforms like Shopify and custom ERP solutions."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 13,
|
|
||||||
question: "How do you handle intellectual property (IP)?",
|
|
||||||
answer: "Upon project completion and final payment, full ownership and IP rights of the source code and assets are transferred to the client, as stipulated in our standard agreements."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 14,
|
|
||||||
question: "Can you work with our existing in-house team?",
|
|
||||||
answer: "Absolutely. We offer staff augmentation and dedicated team models that integrate seamlessly with your internal workflows and communication tools."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 15,
|
|
||||||
question: "What is your communication model during development?",
|
|
||||||
answer: "We use Slack, Jira, and regular Zoom check-ins to provide transparent updates. You'll have a dedicated project manager acting as your primary point of contact."
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const rightFaqs2 = [
|
// const rightFaqs2 = [
|
||||||
{
|
// { id: 15, question: "How can we measure the success of our digital marketing efforts?", answer: "Success can be measured using various metrics such as website traffic, engagement rates, conversion rates, and ROI. We also provide detailed analytics to track and optimize your digital marketing campaigns.", animationDelay: ".5s" },
|
||||||
id: 16,
|
// { id: 16, question: "What kind of support does Metatroncube offer for maintaining an online presence?", answer: "We offer ongoing support in website maintenance, content creation, social media management, and digital marketing strategies to ensure your online presence remains strong and effective.", animationDelay: ".5s" },
|
||||||
question: "How do you maintain code quality and standards?",
|
// { id: 17, question: "How often should we update our digital marketing strategies?", answer: "The digital landscape is constantly evolving, so it's important to regularly review and update your strategies. We recommend a quarterly review to stay ahead of trends and adjust tactics as needed.", animationDelay: ".5s" },
|
||||||
answer: "Our developers follow strict linting rules, conduct peer code reviews, and implement automated testing to maintain a clean, scalable, and bug-free codebase."
|
// { id: 18, question: "What makes Metatroncube unique in digital marketing services?", answer: "Our approach is client-centric, focusing on customized solutions that align with your specific business goals. Our team stays updated with the latest trends to ensure innovative and effective strategies.", animationDelay: ".5s" },
|
||||||
},
|
// { id: 19, question: "How can we start working with Metatroncube for our digital needs?", answer: "Getting started is easy. Simply contact us for a consultation, and we'll discuss your business needs, goals, and how we can assist in achieving your digital transformation objectives.", animationDelay: ".5s" },
|
||||||
{
|
// ];
|
||||||
id: 17,
|
|
||||||
question: "What are your post-launch support options?",
|
|
||||||
answer: "We offer tiered maintenance packages that include security patches, performance monitoring, regular backups, and feature enhancements to keep your platform running smoothly."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 18,
|
|
||||||
question: "How quickly can you start a new project?",
|
|
||||||
answer: "Depending on the scope and resource availability, we can typically kick off a project within 1 to 2 weeks after the discovery phase and agreement signing."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 19,
|
|
||||||
question: "Do you provide UI/UX design services?",
|
|
||||||
answer: "Yes, our design-led approach ensures that every project starts with a focus on user experience, creating intuitive and visually stunning interfaces."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 20,
|
|
||||||
question: "How do you handle security and data protection?",
|
|
||||||
answer: "We implement industry-standard encryption, secure API protocols, and regular security audits to protect your data and ensure compliance with global standards."
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="faq-page-section">
|
<section className="faq-page-section">
|
||||||
@ -127,10 +51,9 @@ const FaqPageSection = () => {
|
|||||||
<div className="row align-items-end mb-60">
|
<div className="row align-items-end mb-60">
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<div className="section-title-wrapper">
|
<div className="section-title-wrapper">
|
||||||
<span className="section-subtitle">
|
<div className="sec-title__shape"></div>
|
||||||
Digital Mastery Unlocked
|
<h6 className="sec-title__tagline">Digital Mastery Unlocked</h6>
|
||||||
</span>
|
<h2 className="section-title mt-4" style={{ margin: 0 }}>Metatroncube FAQs: Web-Apps, SEO, & Digital Marketing</h2>
|
||||||
<h2 className="section-title" style={{ margin: 0 }}>Metatroncube FAQs: Web-Apps, SEO, & Digital Marketing</h2>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
@ -143,20 +66,26 @@ const FaqPageSection = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Section 1: 3-Column with Image */}
|
{/* Section 1: 3-Column with Image */}
|
||||||
<div className="row align-items-center mb-40">
|
<div className="row align-items-center">
|
||||||
{/* Left Side FAQs */}
|
{/* Left Side FAQs */}
|
||||||
<div className="col-lg-4 col-md-12">
|
<div className="col-lg-4 col-md-12">
|
||||||
<div className="accordion-custom">
|
<div className="faq-one__accordion pelocis-accrodion">
|
||||||
{leftFaqs.map((faq) => (
|
{leftFaqs.map((faq) => (
|
||||||
<div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
|
<div key={faq.id} className={`accrodion ${activeLeftId === faq.id ? 'active' : ''}`}>
|
||||||
<button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
|
<div className="accrodion-title" onClick={() => toggleLeftAccordion(faq.id)}>
|
||||||
<span className="question-text">{faq.question}</span>
|
<div className="accrodion-title__shape"></div>
|
||||||
<span className="faq-icon">
|
<div className="accrodion-title__icon">
|
||||||
<i className="fa-solid fa-chevron-down"></i>
|
<i className="fa fa-check"></i>
|
||||||
</span>
|
</div>
|
||||||
</button>
|
<h4 style={{ fontSize: '14px', lineHeight: '1.4' }}>
|
||||||
<div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
|
{faq.question}
|
||||||
<div className="answer-inner">{faq.answer}</div>
|
<i className="icon-right-arrow-white"></i>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div className="accrodion-content" style={{ display: activeLeftId === faq.id ? 'block' : 'none' }}>
|
||||||
|
<div className="inner">
|
||||||
|
<p>{faq.answer}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@ -172,17 +101,23 @@ const FaqPageSection = () => {
|
|||||||
|
|
||||||
{/* Right Side FAQs */}
|
{/* Right Side FAQs */}
|
||||||
<div className="col-lg-4 col-md-12">
|
<div className="col-lg-4 col-md-12">
|
||||||
<div className="accordion-custom">
|
<div className="faq-one__accordion pelocis-accrodion">
|
||||||
{rightFaqs.map((faq) => (
|
{rightFaqs.map((faq) => (
|
||||||
<div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
|
<div key={faq.id} className={`accrodion ${activeRightId === faq.id ? 'active' : ''}`}>
|
||||||
<button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
|
<div className="accrodion-title" onClick={() => toggleRightAccordion(faq.id)}>
|
||||||
<span className="question-text">{faq.question}</span>
|
<div className="accrodion-title__shape"></div>
|
||||||
<span className="faq-icon">
|
<div className="accrodion-title__icon">
|
||||||
<i className="fa-solid fa-chevron-down"></i>
|
<i className="fa fa-check"></i>
|
||||||
</span>
|
</div>
|
||||||
</button>
|
<h4 style={{ fontSize: '14px', lineHeight: '1.4' }}>
|
||||||
<div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
|
{faq.question}
|
||||||
<div className="answer-inner">{faq.answer}</div>
|
<i className="icon-right-arrow-white"></i>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div className="accrodion-content" style={{ display: activeRightId === faq.id ? 'block' : 'none' }}>
|
||||||
|
<div className="inner">
|
||||||
|
<p>{faq.answer}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@ -191,7 +126,7 @@ const FaqPageSection = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Section 2: 2-Column Standard Layout */}
|
{/* Section 2: 2-Column Standard Layout */}
|
||||||
<div className="row section-space-top">
|
{/* <div className="row section-space-top">
|
||||||
<div className="col-lg-6 col-md-12">
|
<div className="col-lg-6 col-md-12">
|
||||||
<div className="accordion-custom">
|
<div className="accordion-custom">
|
||||||
{leftFaqs2.map((faq) => (
|
{leftFaqs2.map((faq) => (
|
||||||
@ -226,7 +161,7 @@ const FaqPageSection = () => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -31,29 +31,34 @@ const AboutTwo = () => {
|
|||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
{/* <span className="about-two__dot-circle"></span> */}
|
{/* <span className="about-two__dot-circle"></span> */}
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">OUR ABOUT COMPANY</h6>
|
<h6 className="sec-title__tagline">Why Choose Us</h6>
|
||||||
<h3 className="sec-title__title">Psychology Seeks To Explore The About Workings of Human</h3>
|
<h3 className="sec-title__title">Comprehensive Digital Solutions Expertise</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className="about-two__text">
|
{/* <p className="about-two__text">
|
||||||
Business tailored design, management & support services Business
|
Business tailored design, management & support services Business
|
||||||
business agency elit, sed do eiusmod tempor majority have
|
business agency elit, sed do eiusmod tempor majority have
|
||||||
in some we form, by injected humour solution.
|
in some we form, by injected humour solution.
|
||||||
</p>
|
</p> */}
|
||||||
<ul className="about-two__list">
|
<ul className="about-two__list">
|
||||||
<li>
|
<li>
|
||||||
<span className="icon-social-care"></span>
|
<span className="icon-social-care"></span>
|
||||||
<div className="about-two__list__content">
|
<div className="about-two__list__content">
|
||||||
<h3 className="about-two__list__title">Behavioral Psychology</h3>
|
<h3 className="about-two__list__title">Latest Technology</h3>
|
||||||
<p className="about-two__list__text">Supporting individuals inovercoming and for their
|
<p className="about-two__list__text">Harness advanced tech for top-notch web, app, and digital projects.</p>
|
||||||
quality of life whether solution.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span className="icon-social-care"></span>
|
<span className="icon-social-care"></span>
|
||||||
<div className="about-two__list__content">
|
<div className="about-two__list__content">
|
||||||
<h4 className="about-two__list__title">Behavioral Psychology</h4>
|
<h4 className="about-two__list__title">Certified Experts</h4>
|
||||||
<p className="about-two__list__text">Supporting individuals inovercoming and for their
|
<p className="about-two__list__text">Trust our certified team for expert guidance in all digital realms.</p>
|
||||||
quality of life whether solution.</p>
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span className="icon-social-care"></span>
|
||||||
|
<div className="about-two__list__content">
|
||||||
|
<h4 className="about-two__list__title">Get Reasonable Price</h4>
|
||||||
|
<p className="about-two__list__text">Get value-driven solutions at prices tailored for your business needs.</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -11,9 +11,9 @@ const CallAreaThree: React.FC = () => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="call-area-three__content">
|
<div className="call-area-three__content">
|
||||||
<h2 className="call-area-three__title wow fadeInUp" data-wow-delay="0.1s">
|
<h2 className="call-area-three__title wow fadeInUp" data-wow-delay="0.1s">
|
||||||
We Are Always Ready For Every Challenge <br /> Please Trust Us
|
MetatronCube Finished this Achivement <br /> in 10 Years
|
||||||
</h2>
|
</h2>
|
||||||
<p className="call-area-three__text wow fadeInUp" data-wow-delay="0.2s">
|
{/* <p className="call-area-three__text wow fadeInUp" data-wow-delay="0.2s">
|
||||||
Business tailored design, management & support services Business agency, sed <br />
|
Business tailored design, management & support services Business agency, sed <br />
|
||||||
tempor majority have in some we form, by injected solution.
|
tempor majority have in some we form, by injected solution.
|
||||||
</p>
|
</p>
|
||||||
@ -23,7 +23,7 @@ const CallAreaThree: React.FC = () => {
|
|||||||
Get A Free Quote <i className="icon-right-arrow-white"></i>
|
Get A Free Quote <i className="icon-right-arrow-white"></i>
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -20,47 +20,45 @@ const CounsellingSolutions: React.FC = () => {
|
|||||||
className="counselling-solutions__image__two"
|
className="counselling-solutions__image__two"
|
||||||
/>
|
/>
|
||||||
<div className="counselling-solutions__image__watch-btn">
|
<div className="counselling-solutions__image__watch-btn">
|
||||||
<Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup">
|
{/* <Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup"> */}
|
||||||
<i className="icon-play"></i>
|
<i className="fa-solid fa-award"></i>
|
||||||
</Link>
|
{/* </Link> */}
|
||||||
<span>WATCH VIDEO</span>
|
<span>Metatroncube Solutions</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<div className="counselling-solutions__title">
|
<div className="counselling-solutions__title">
|
||||||
<div className="sec-title">
|
<div className="sec-title mt-50">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">BEST COUNSELLING SOLUTION</h6>
|
<h6 className="sec-title__tagline">METATRONCUBE</h6>
|
||||||
<h3 className="sec-title__title">
|
<h3 className="sec-title__title">
|
||||||
Psychology is a Broad Field So <br /> Consider Skill Solution
|
Why Choose Metatroncube Solution.
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="counselling-solutions__content">
|
<div className="counselling-solutions__content">
|
||||||
<p className="counselling-solutions__text">
|
{/* <p className="counselling-solutions__text">
|
||||||
Business tailored design, management & support services Business
|
Business tailored design, management & support services Business
|
||||||
business agency elit, sed do eiusmod tempor majority have
|
business agency elit, sed do eiusmod tempor majority have
|
||||||
in some we form, by injected humour solution.
|
in some we form, by injected humour solution.
|
||||||
|
</p> */}
|
||||||
|
<p className="counselling-solutions__text">
|
||||||
|
<strong>Client-Centric Approach</strong>: Our dedication to client success sets us apart. We prioritize understanding your unique business needs, ensuring our digital solutions are tailored to your specific goals and objectives.
|
||||||
</p>
|
</p>
|
||||||
<p className="counselling-solutions__text">
|
<p className="counselling-solutions__text">
|
||||||
<strong>Psychology:</strong> The scientific study of behavior and mental processes It explores
|
<strong>Continuous Innovation & Learning</strong>: At Metatroncube, we're committed to staying ahead of industry trends. Our team regularly undergoes training and adopts new methodologies to deliver the most current and effective solutions.
|
||||||
various aspects of human behavior such as perception, cognition, emotion,
|
</p>
|
||||||
personality, development, and social interactions.
|
<p className="counselling-solutions__text">
|
||||||
|
<strong>Collaborative Project Management</strong>: We believe in transparent and collaborative project management. Our clients are involved at every step, ensuring a seamless process from initial concept to final implementation.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ul className="counselling-solutions__list--two">
|
{/* <div className="about-btn-box mt-4">
|
||||||
<li>
|
|
||||||
<span className="icon-arrow-circle-check"></span>
|
|
||||||
The right therapist can help you develop the skills to manage
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div className="about-btn-box mt-4">
|
|
||||||
<Link className="primary-btn-1 btn-hover" href="/about">
|
<Link className="primary-btn-1 btn-hover" href="/about">
|
||||||
Discover More | <i className="fa-solid fa-arrow-right"></i>
|
Discover More | <i className="fa-solid fa-arrow-right"></i>
|
||||||
<span className="btn-hover-span"></span>
|
<span className="btn-hover-span"></span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -49,28 +49,28 @@ const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
|
|||||||
|
|
||||||
const counterItems = [
|
const counterItems = [
|
||||||
{
|
{
|
||||||
icon: "/assets/imgs/icon/icon-1.png",
|
icon: "/assets/imgs/icon/icon-4.png",
|
||||||
count: 950,
|
count: 100,
|
||||||
suffix: "k+",
|
suffix: "+",
|
||||||
text: "Projects Succefull"
|
text: "Projects Completed"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/assets/imgs/icon/icon-2.png",
|
icon: "/assets/imgs/icon/icon-2.png",
|
||||||
count: 256,
|
count: 50,
|
||||||
suffix: "k+",
|
suffix: "+",
|
||||||
text: "Happy Customers"
|
text: "Active Clients"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/assets/imgs/icon/icon-3.png",
|
icon: "/assets/imgs/icon/icon-3.png",
|
||||||
count: 852,
|
count: 20,
|
||||||
suffix: "k+",
|
suffix: "+",
|
||||||
text: "Consultants Planing"
|
text: "Expert People"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/assets/imgs/icon/icon-4.png",
|
icon: "/assets/imgs/icon/icon-4.png",
|
||||||
count: 965,
|
count: 50,
|
||||||
suffix: "+",
|
suffix: "+",
|
||||||
text: "Awards Winners"
|
text: "Happy Clients"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@ -49,28 +49,28 @@ const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
|
|||||||
|
|
||||||
const counterItems = [
|
const counterItems = [
|
||||||
{
|
{
|
||||||
icon: "/assets/imgs/icon/icon-1.png",
|
icon: "/assets/imgs/icon/icon-2.png",
|
||||||
count: 950,
|
count: 100,
|
||||||
suffix: "k+",
|
suffix: "+",
|
||||||
text: "Projects Succefull"
|
text: "Projects Completed"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/assets/imgs/icon/icon-2.png",
|
icon: "/assets/imgs/icon/icon-2.png",
|
||||||
count: 256,
|
count: 50,
|
||||||
suffix: "k+",
|
suffix: "+",
|
||||||
text: "Happy Customers"
|
text: "Active Clients"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/assets/imgs/icon/icon-3.png",
|
icon: "/assets/imgs/icon/icon-3.png",
|
||||||
count: 852,
|
count: 20,
|
||||||
suffix: "k+",
|
suffix: "+",
|
||||||
text: "Consultants Planing"
|
text: "Expert People"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/assets/imgs/icon/icon-4.png",
|
icon: "/assets/imgs/icon/icon-4.png",
|
||||||
count: 965,
|
count: 100,
|
||||||
suffix: "+",
|
suffix: "+",
|
||||||
text: "Awards Winners"
|
text: "Happy Clients"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
83
src/components/home/FaqFive.tsx
Normal file
83
src/components/home/FaqFive.tsx
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
const FaqFive = () => {
|
||||||
|
const [activeIndex, setActiveIndex] = useState(0);
|
||||||
|
|
||||||
|
const toggleAccordion = (index: number) => {
|
||||||
|
setActiveIndex(index === activeIndex ? -1 : index);
|
||||||
|
};
|
||||||
|
|
||||||
|
const faqItems = [
|
||||||
|
{
|
||||||
|
question: "How can we measure the success of our digital marketing efforts?",
|
||||||
|
answer: "Success can be measured using various metrics such as website traffic, engagement rates, conversion rates, and ROI. We also provide detailed analytics to track and optimize your digital marketing campaigns."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "What kind of support does Metatroncube offer for maintaining an online presence?",
|
||||||
|
answer: "We offer ongoing support in website maintenance, content creation, social media management, and digital marketing strategies to ensure your online presence remains strong and effective."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "How often should we update our digital marketing strategies?",
|
||||||
|
answer: "The digital landscape is constantly evolving, so it's important to regularly review and update your strategies. We recommend a quarterly review to stay ahead of trends and adjust tactics as needed."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "What makes Metatroncube unique in digital marketing services?",
|
||||||
|
answer: "Our approach is client-centric, focusing on customized solutions that align with your specific business goals. Our team stays updated with the latest trends to ensure innovative and effective strategies."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "How can we start working with Metatroncube for our digital needs?",
|
||||||
|
answer: "Getting started is easy. Simply contact us for a consultation, and we'll discuss your business needs, goals, and how we can assist in achieving your digital transformation objectives."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="faq-four section-space">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-xl-6">
|
||||||
|
<div className="pelocis-stretch-element-inside-column">
|
||||||
|
<div className="faq-four__image2">
|
||||||
|
<img
|
||||||
|
src="https://bracketweb.com/pelocishtml/assets/images/resources/faq-4-1.jpg"
|
||||||
|
alt="pelocis"
|
||||||
|
/>
|
||||||
|
<div className="faq-four__image2__icon">
|
||||||
|
<i className="icon-faq"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-xl-6">
|
||||||
|
<div className="faq-four__content">
|
||||||
|
<div className="faq-one__accordion pelocis-accrodion">
|
||||||
|
{faqItems.map((item, index) => (
|
||||||
|
<div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
|
||||||
|
<div className="accrodion-title" onClick={() => toggleAccordion(index)}>
|
||||||
|
<div className="accrodion-title__shape"></div>
|
||||||
|
<div className="accrodion-title__icon">
|
||||||
|
<i className="fa fa-check"></i>
|
||||||
|
</div>
|
||||||
|
<h4>
|
||||||
|
{item.question}
|
||||||
|
<i className="icon-right-arrow-white"></i>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
|
||||||
|
<div className="inner">
|
||||||
|
<p>{item.answer}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FaqFive;
|
||||||
@ -11,30 +11,37 @@ const FaqFour = () => {
|
|||||||
|
|
||||||
const faqItems = [
|
const faqItems = [
|
||||||
{
|
{
|
||||||
question: "What are the different branches of psychology?",
|
question: "How can Metatroncube assist in setting up an e-commerce site for my store?",
|
||||||
answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
|
answer: " We can help by designing a user-friendly e-commerce website, ensuring mobile optimization, and integrating secure payment gateways to provide a smooth online shopping experience for your customers."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: "How does psychology differ from psychiatry?",
|
question: "What's the importance of content marketing for service-based businesses?",
|
||||||
answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
|
answer: "Content marketing helps establish your business as an industry authority, increases engagement, and drives lead generation. It's a vital tool for building long-term relationships with your audience."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: "How do psychologists diagnose mental disorders?",
|
question: "How can I ensure my content marketing strategy is effective?",
|
||||||
answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
|
answer: "Your strategy should focus on creating valuable, relevant content that addresses your audience's needs and interests. Storytelling and regular engagement are key to connecting with potential clients."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: "What are the common methods used in psychological?",
|
question: "How does Metatroncube address the challenges faced by businesses in digital transformation?",
|
||||||
answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
|
answer: "We offer tailored solutions that simplify the digital transition, provide comprehensive support throughout the process, and create strategies that align with your business objectives."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Can digital marketing strategies be cost-effective for small businesses?",
|
||||||
|
answer: "Yes, digital marketing offers cost-effective solutions with measurable results. We focus on strategies that provide the best ROI, tailored to fit the budget and goals of small businesses."
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="faq-four">
|
<section
|
||||||
|
className="faq-four section-space"
|
||||||
|
style={{ backgroundColor: "#f8fbff" }}
|
||||||
|
>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-xl-6">
|
<div className="col-xl-6">
|
||||||
<div className="faq-four__content">
|
<div className="faq-four__content">
|
||||||
<div className="sec-title">
|
{/* <div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">OUR FAQ US</h6>
|
<h6 className="sec-title__tagline">OUR FAQ US</h6>
|
||||||
<h3 className="sec-title__title">We Providing Psychology People Choose of Promoting</h3>
|
<h3 className="sec-title__title">We Providing Psychology People Choose of Promoting</h3>
|
||||||
@ -42,7 +49,7 @@ const FaqFour = () => {
|
|||||||
<p className="faq-four__content__text">
|
<p className="faq-four__content__text">
|
||||||
Business tailored design, management & support services Business business agency elit,
|
Business tailored design, management & support services Business business agency elit,
|
||||||
sed do eiusmod tempor majority have in some we form, by injected humour solution.
|
sed do eiusmod tempor majority have in some we form, by injected humour solution.
|
||||||
</p>
|
</p> */}
|
||||||
<div className="faq-one__accordion pelocis-accrodion">
|
<div className="faq-one__accordion pelocis-accrodion">
|
||||||
{faqItems.map((item, index) => (
|
{faqItems.map((item, index) => (
|
||||||
<div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
|
<div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
|
||||||
@ -58,9 +65,9 @@ const FaqFour = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
|
<div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
|
||||||
<div className="inner">
|
<div className="inner">
|
||||||
<div className="accrodion-content__icon">
|
{/* <div className="accrodion-content__icon">
|
||||||
<span className="icon-faq1"></span>
|
<span className="icon-faq1"></span>
|
||||||
</div>
|
</div> */}
|
||||||
<p>{item.answer}</p>
|
<p>{item.answer}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -8,8 +8,10 @@ const HistoryTwo = () => {
|
|||||||
<div className="history-two__title text-center">
|
<div className="history-two__title text-center">
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">OUR HISTORY</h6>
|
<h6 className="sec-title__tagline">Experience US</h6>
|
||||||
<h3 className="sec-title__title">Psychology Diverse And Multidisciplinary <br />Field Encompassing Areas</h3>
|
<h3 className="sec-title__title">We Offer & Do
|
||||||
|
More than Ever Platforms.</h3>
|
||||||
|
<p>Appropriately enhance principle-centered innovation rather than high standards in platforms. <br /> Credibly orchestrate functional.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row history-two__wrapper">
|
<div className="row history-two__wrapper">
|
||||||
@ -18,26 +20,23 @@ const HistoryTwo = () => {
|
|||||||
<div className="history-two__content">
|
<div className="history-two__content">
|
||||||
<div className="history-two__content__count"></div>
|
<div className="history-two__content__count"></div>
|
||||||
<p className="history-two__content__text">
|
<p className="history-two__content__text">
|
||||||
History company support continue
|
Our mission is to empower businesses with state-of-the-art digital products that drive growth, efficiency, and connectivity. We strive to be at forefront of innovation, delivering web & mobile solutions that exceed expectations.
|
||||||
to explore new frontiers, including
|
|
||||||
team stands ready to our reliable
|
|
||||||
or assistance of and technical.
|
|
||||||
</p>
|
</p>
|
||||||
<h3 className="history-two__content__title">Psychology Today</h3>
|
<h3 className="history-two__content__title">Our Mission</h3>
|
||||||
<span className="history-two__content__date">02-08-2021</span>
|
{/* <span className="history-two__content__date">02-08-2021</span> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<div className="history-two__images">
|
<div className="history-two__images">
|
||||||
<span className="history-two__images__date">2021</span>
|
<span className="history-two__images__date"></span>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
|
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<div className="history-two__images history-two__images--right">
|
<div className="history-two__images history-two__images--right">
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
|
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
|
||||||
<span className="history-two__images__date">2021</span>
|
{/* <span className="history-two__images__date">2021</span> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
@ -45,13 +44,11 @@ const HistoryTwo = () => {
|
|||||||
<div className="history-two__content history-two__content--left">
|
<div className="history-two__content history-two__content--left">
|
||||||
<div className="history-two__content__count"></div>
|
<div className="history-two__content__count"></div>
|
||||||
<p className="history-two__content__text">
|
<p className="history-two__content__text">
|
||||||
History company support continue
|
Redefining digital innovation to create smarter, connected experiences for businesses worldwide.
|
||||||
to explore new frontiers, including
|
Building a future where technology drives efficiency, growth, and sustainable success.
|
||||||
team stands ready to our reliable
|
|
||||||
or assistance of and technical.
|
|
||||||
</p>
|
</p>
|
||||||
<h3 className="history-two__content__title">Psychology Today</h3>
|
<h3 className="history-two__content__title">Our Vision</h3>
|
||||||
<span className="history-two__content__date">02-08-2021</span>
|
{/* <span className="history-two__content__date">02-08-2021</span> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -60,19 +57,16 @@ const HistoryTwo = () => {
|
|||||||
<div className="history-two__content">
|
<div className="history-two__content">
|
||||||
<div className="history-two__content__count"></div>
|
<div className="history-two__content__count"></div>
|
||||||
<p className="history-two__content__text">
|
<p className="history-two__content__text">
|
||||||
History company support continue
|
Integrity and Trust, Innovation and Excellence, Collaboration and Empowerment, Adaptability and Learning, Customer-Centric Approach, Sustainability and Responsibility.
|
||||||
to explore new frontiers, including
|
|
||||||
team stands ready to our reliable
|
|
||||||
or assistance of and technical.
|
|
||||||
</p>
|
</p>
|
||||||
<h3 className="history-two__content__title">Psychology Today</h3>
|
<h3 className="history-two__content__title">Our Values</h3>
|
||||||
<span className="history-two__content__date">02-08-2021</span>
|
{/* <span className="history-two__content__date">02-08-2021</span> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<div className="history-two__images">
|
<div className="history-two__images">
|
||||||
<span className="history-two__images__date">2021</span>
|
<span className="history-two__images__date"></span>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
|
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -214,7 +214,7 @@ export default function PortfolioSection() {
|
|||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">PORTFOLIO</h6>
|
<h6 className="sec-title__tagline">PORTFOLIO</h6>
|
||||||
<h3 className="sec-title__title">Our Latest <span className="inner-text">Work </span></h3>
|
<h3 className="sec-title__title">We Serve the Best Works<span className="inner-text"></span></h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -14,13 +14,14 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
|||||||
<div className="why-choose-two__content">
|
<div className="why-choose-two__content">
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">WHY CHOOSE US</h6>
|
<h6 className="sec-title__tagline">Watch Us Live</h6>
|
||||||
<h3 className="sec-title__title">We Providing Psychology People <br /> Choose of Promoting</h3>
|
<h3 className="sec-title__title">An Agency That Gets Excited <br /> About Your Mission</h3>
|
||||||
</div>
|
</div>
|
||||||
|
<p>
|
||||||
|
Every project we take on is personal. We get excited about your goals, your grit, and the journey you’re on.
|
||||||
|
</p>
|
||||||
<p className="why-choose-two__text">
|
<p className="why-choose-two__text">
|
||||||
Business tailored design, management & support services Business
|
Whether you’re launching something new or leveling up an existing brand, we bring fresh energy, deep expertise, and full-stack creativity to your table. We don’t just work for you, we work with you, as committed collaborators invested in your long-term growth.
|
||||||
business agency elit, sed do eiusmod tempor majority have
|
|
||||||
in some we form, by injected humour solution.
|
|
||||||
</p>
|
</p>
|
||||||
<div className="why-choose-two__box">
|
<div className="why-choose-two__box">
|
||||||
<ul className="why-choose-two__list">
|
<ul className="why-choose-two__list">
|
||||||
@ -30,10 +31,10 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
|||||||
<span className="fa-solid fa-lightbulb"></span>
|
<span className="fa-solid fa-lightbulb"></span>
|
||||||
</div>
|
</div>
|
||||||
<div className="why-choose-two__item__content">
|
<div className="why-choose-two__item__content">
|
||||||
<h3 className="why-choose-two__item__title">Family Service Psychology</h3>
|
<h3 className="why-choose-two__item__title">Urgent development solutions</h3>
|
||||||
<p className="why-choose-two__item__text">
|
{/* <p className="why-choose-two__item__text">
|
||||||
Supporting individuals in overcoming service
|
Supporting individuals in overcoming service
|
||||||
</p>
|
</p> */}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li className="why-choose-two__item">
|
<li className="why-choose-two__item">
|
||||||
@ -42,10 +43,10 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
|||||||
<span className="fa-solid fa-brain"></span>
|
<span className="fa-solid fa-brain"></span>
|
||||||
</div>
|
</div>
|
||||||
<div className="why-choose-two__item__content">
|
<div className="why-choose-two__item__content">
|
||||||
<h3 className="why-choose-two__item__title">Cognitive off Psychology</h3>
|
<h3 className="why-choose-two__item__title">Top quality services with reasonable price</h3>
|
||||||
<p className="why-choose-two__item__text">
|
{/* <p className="why-choose-two__item__text">
|
||||||
Supporting individuals in overcoming service
|
Supporting individuals in overcoming service
|
||||||
</p>
|
</p> */}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li className="why-choose-two__item">
|
<li className="why-choose-two__item">
|
||||||
@ -54,10 +55,10 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
|
|||||||
<span className="fa-solid fa-people-roof"></span>
|
<span className="fa-solid fa-people-roof"></span>
|
||||||
</div>
|
</div>
|
||||||
<div className="why-choose-two__item__content">
|
<div className="why-choose-two__item__content">
|
||||||
<h3 className="why-choose-two__item__title">Relationship Psychology</h3>
|
<h3 className="why-choose-two__item__title">Professional & experienced team</h3>
|
||||||
<p className="why-choose-two__item__text">
|
{/* <p className="why-choose-two__item__text">
|
||||||
Supporting individuals in overcoming service
|
Supporting individuals in overcoming service
|
||||||
</p>
|
</p> */}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -19,18 +19,18 @@ const AboutSection = () => {
|
|||||||
<div className="image-2-area">
|
<div className="image-2-area">
|
||||||
<div className="image-2 p-relative">
|
<div className="image-2 p-relative">
|
||||||
<img src="/assets/img/about/about-img7.png" alt="" />
|
<img src="/assets/img/about/about-img7.png" alt="" />
|
||||||
<div className="play-btn">
|
{/* <div className="play-btn">
|
||||||
<div className="video_player_btn">
|
<div className="video_player_btn">
|
||||||
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
|
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="working-area float-bob-y">
|
<div className="working-area float-bob-y">
|
||||||
<div className="inner p-relative">
|
<div className="inner p-relative">
|
||||||
<div className="icon-box">
|
<div className="icon-box">
|
||||||
<i className="fa-solid fa-award"></i>
|
<i className="fa-solid fa-award"></i>
|
||||||
<h4><span className="counter">25</span> Years</h4>
|
<h4><span className="counter">10+</span> Years</h4>
|
||||||
<p>Working Experience</p>
|
<p>Working Experience</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -42,19 +42,19 @@ const AboutSection = () => {
|
|||||||
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
|
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">ABOUT US</h6>
|
<h6 className="sec-title__tagline">Digital Excellence</h6>
|
||||||
<h3 className="sec-title__title">Selecting the Finest IT<br />Service Provider</h3>
|
<h3 className="sec-title__title">Let's Work Together.<br /></h3>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||||
</div>
|
</div>
|
||||||
<p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
<p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">Partner with Metatroncube Software Solutions and unlock a world of digital possibilities in web & app development, SEO, digital marketing, and graphic design services. Our commitment extends beyond mere product delivery; we focus on enhancing your market presence and driving business success with comprehensive digital strategies. Experience the unique Metatroncube advantage in every aspect of digital transformation.</p>
|
||||||
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
|
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
|
||||||
<div className="icon">
|
<div className="icon">
|
||||||
<img src="/assets/imgs/about/about-three-icon1.png" alt="img" />
|
<img src="/assets/imgs/about/about-three-icon1.png" alt="img" />
|
||||||
</div>
|
</div>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<h5><a href="#">Business Growth</a></h5>
|
<h5><a href="#">Exceptional Digital Quality</a></h5>
|
||||||
<p>Embarrassing hidden in the middle All the Lorem Ipsum generators on the Internet repeat predefined chunks</p>
|
<p>High-quality graphics and precise web app development ensuring excellence.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
|
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
|
||||||
@ -62,8 +62,17 @@ const AboutSection = () => {
|
|||||||
<img src="/assets/imgs/about/about-three-icon2.png" alt="img" />
|
<img src="/assets/imgs/about/about-three-icon2.png" alt="img" />
|
||||||
</div>
|
</div>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<h5><a href="#">Technology Consultancy</a></h5>
|
<h5><a href="#">Expertise in innovation</a></h5>
|
||||||
<p>Embarrassing hidden in the middle All the Lorem Ipsum generators on the Internet repeat predefined chunks</p>
|
<p>Skilled developers leading in SEO, digital marketing, and technological advancements.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
|
||||||
|
<div className="icon">
|
||||||
|
<img src="/assets/imgs/about/about-three-icon2.png" alt="img" />
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
<h5><a href="#">Comprehensive web solutions</a></h5>
|
||||||
|
<p>Robust web and mobile development with strategic SEO and marketing.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="about-btn-box wow fadeInLeft" data-wow-delay="1s">
|
<div className="about-btn-box wow fadeInLeft" data-wow-delay="1s">
|
||||||
|
|||||||
@ -59,7 +59,7 @@ const BlogSection = ({ hideHeader = false, isPaginated = false }: { hideHeader?:
|
|||||||
<h6 className="sec-title__tagline">LATEST BLOG</h6>
|
<h6 className="sec-title__tagline">LATEST BLOG</h6>
|
||||||
<h3 className="sec-title__title">Latest Blog Insights</h3>
|
<h3 className="sec-title__title">Latest Blog Insights</h3>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="row g-4">
|
<div className="row g-4">
|
||||||
|
|||||||
@ -10,27 +10,19 @@ const ChooseSection = () => (
|
|||||||
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
|
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">WHY CHOOSE US</h6>
|
<h6 className="sec-title__tagline">WELCOME TO METATRONCUBE</h6>
|
||||||
<h3 className="sec-title__title text-white">What's Make Us Different</h3>
|
<h3 className="sec-title__title text-white">Driving Client Success with Cutting-Edge Digital Solutions in Web & App Development, SEO, and Digital Marketing</h3>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||||
</div>
|
</div>
|
||||||
{[
|
<div className="choose-content text-white wow fadeInRight" data-wow-delay=".7s">
|
||||||
{ icon: "fa-solid fa-building", title: "Commercial Service", delay: ".5s" },
|
<p className="text-white">
|
||||||
{ icon: "fa-solid fa-bullseye", title: "Mission Statement Metatron", delay: ".7s" },
|
At Metatroncube Software Solutions, we're not just about web design and mobile app development; we're a hub of innovation in SEO, digital marketing, and graphic design services. Located in the Kitchener and Waterloo regions, our services stand out through a unique blend of innovative design and advanced technology.
|
||||||
{ icon: "fa-solid fa-handshake-angle", title: "Safety And Reliability", delay: ".9s" }
|
</p>
|
||||||
].map((item, i) => (
|
<p className="text-white">
|
||||||
<React.Fragment key={i}>
|
Our expertise spans across AngularJS, ReactJS, HTML5, Node.js, PHP, and comprehensive frameworks for native Android, iOS, and Flutter. This is complemented by our strength in SEO strategies and digital marketing solutions, ensuring your brand not only looks good but also ranks high.
|
||||||
<div className={`choose-area-icon-box mb-15 wow fadeInRight`} data-wow-delay={item.delay}>
|
</p>
|
||||||
<div className="icon-box p-relative"><i className={item.icon}></i></div>
|
</div>
|
||||||
<div className="content">
|
|
||||||
<h5><a href="#">{item.title}</a></h5>
|
|
||||||
<p>Embarrassing hidden in the middle All the Lorem Ipsum generators on the Internet repeat predefined chunks</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xxl-6 col-xl-6 col-lg-6 wow fadeInLeft" data-wow-delay="1.2s">
|
<div className="col-xxl-6 col-xl-6 col-lg-6 wow fadeInLeft" data-wow-delay="1.2s">
|
||||||
<figure className="image m-img"><img src="/assets/imgs/resources/choose-1.png" alt="" /></figure>
|
<figure className="image m-img"><img src="/assets/imgs/resources/choose-1.png" alt="" /></figure>
|
||||||
|
|||||||
@ -11,8 +11,8 @@ const CtaSection = () => (
|
|||||||
<div className="content p-relative">
|
<div className="content p-relative">
|
||||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-12.png)" }}></div>
|
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-12.png)" }}></div>
|
||||||
<div className="icon-box"><i className="fa-solid fa-phone-volume"></i></div>
|
<div className="icon-box"><i className="fa-solid fa-phone-volume"></i></div>
|
||||||
<h3 className="mb-15">Need Any Help?</h3>
|
<h3>Let’s Discuss How to Make your Business Better.</h3>
|
||||||
<h5><a href="tel:2085550112">+208-555-0112</a></h5>
|
{/* <h5><a href="tel:2085550112">+208-555-0112</a></h5> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -53,16 +53,16 @@ const ArrowIcon = () => (
|
|||||||
|
|
||||||
const features: FeatureItem[] = [
|
const features: FeatureItem[] = [
|
||||||
{
|
{
|
||||||
title: "The future Latest Technology",
|
title: "Comprehensive digital development",
|
||||||
desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun",
|
desc: "Expert web, app development and e-commerce solutions.",
|
||||||
icon: <IdeaIcon />,
|
icon: <IdeaIcon />,
|
||||||
image: "/assets/img-app/about/about-img2.png",
|
image: "/assets/img-app/about/about-img2.png",
|
||||||
imageAlt: "Versatile Latest Technology",
|
imageAlt: "Versatile Latest Technology",
|
||||||
delay: 0,
|
delay: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Business Planning Strategies",
|
title: "Strategic online growth solutions",
|
||||||
desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun",
|
desc: "Strategic SEO and digital marketing for growth.",
|
||||||
icon: <GrowthIcon />,
|
icon: <GrowthIcon />,
|
||||||
image: "/assets/img-app/about/about-img4.png",
|
image: "/assets/img-app/about/about-img4.png",
|
||||||
imageAlt: "Business Planning Strategies",
|
imageAlt: "Business Planning Strategies",
|
||||||
@ -70,8 +70,8 @@ const features: FeatureItem[] = [
|
|||||||
delay: 200,
|
delay: 200,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Professional Team Members",
|
title: "Creative design and branding excellence",
|
||||||
desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun",
|
desc: "Creative graphic design and branding strategy services.",
|
||||||
icon: <TeamIcon />,
|
icon: <TeamIcon />,
|
||||||
image: "/assets/img-app/about/about-img1.png",
|
image: "/assets/img-app/about/about-img1.png",
|
||||||
imageAlt: "Professional Team Members",
|
imageAlt: "Professional Team Members",
|
||||||
@ -118,8 +118,8 @@ const FeaturesSection = () => {
|
|||||||
<div className="history-two__title text-center">
|
<div className="history-two__title text-center">
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">OUR HISTORY</h6>
|
<h6 className="sec-title__tagline">Strategic Digital Services</h6>
|
||||||
<h3 className="sec-title__title">Psychology Diverse And Multidisciplinary <br />Field Encompassing Areas</h3>
|
<h3 className="sec-title__title">Innovation & Growth</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="fo-row">
|
<div className="fo-row">
|
||||||
@ -143,9 +143,9 @@ const FeaturesSection = () => {
|
|||||||
{feature.icon}
|
{feature.icon}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="fo-hover-title">{feature.title}</h3>
|
<h3 className="fo-hover-title">{feature.title}</h3>
|
||||||
<Link href="#" className="fo-hover-btn">
|
{/* <Link href="#" className="fo-hover-btn">
|
||||||
<ArrowIcon />
|
<ArrowIcon />
|
||||||
</Link>
|
</Link> */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main card */}
|
{/* Main card */}
|
||||||
|
|||||||
@ -2,11 +2,11 @@
|
|||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { psychologyServices } from "@/utils/data";
|
import { ourServices } from "@/utils/data";
|
||||||
import { ServiceType } from "@/types";
|
import { ServiceType } from "@/types";
|
||||||
|
|
||||||
const ServiceThreeSlider = () => {
|
const ServiceThreeSlider = () => {
|
||||||
const services: ServiceType[] = psychologyServices;
|
const services: ServiceType[] = ourServices;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#07172b" }}>
|
<section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#07172b" }}>
|
||||||
@ -16,17 +16,18 @@ const ServiceThreeSlider = () => {
|
|||||||
|
|
||||||
<div className="small-container">
|
<div className="small-container">
|
||||||
<div className="row align-items-end">
|
<div className="row align-items-end">
|
||||||
<div className="col-xxl-6 col-xl-6">
|
<div className="col-xxl-10 col-xl-6">
|
||||||
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
|
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
|
||||||
<div className="sec-title sec-title--light">
|
<div className="sec-title sec-title--light">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
|
<h6 className="sec-title__tagline">OUR SERVICEs</h6>
|
||||||
<h3 className="sec-title__title text-white">We Are Service Your Business</h3>
|
<h3 className="sec-title__title text-white">We Shape the Perfect Solution.</h3>
|
||||||
|
<p className="text-white mt-4">At Metatroncube, we sculpt digital excellence, meticulously blending innovation with user-centric design to manifest your business vision. Partner with us to experience a seamless fusion of web & app development, SEO, digital marketing, and graphic design services. Our strategic solutions and unparalleled execution pave the way for your digital voyage. We are your navigators in the digital realm, steering your project from conception to completion with precision and creativity.</p>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xxl-6 col-xl-6">
|
<div className="col-xxl-2 col-xl-6">
|
||||||
<div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
|
<div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
|
||||||
<div className="common-slider-navigation">
|
<div className="common-slider-navigation">
|
||||||
<button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>
|
<button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>
|
||||||
|
|||||||
@ -99,7 +99,7 @@ const TestimonialsSection = () => {
|
|||||||
<GoogleReviewsBranding />
|
<GoogleReviewsBranding />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="testi-slider-wrapper" style={{ position: 'relative', zIndex: 2, marginTop: '70px' }}>
|
<div className="testi-slider-wrapper" style={{ position: 'relative', zIndex: 2, marginTop: '70px' }}>
|
||||||
|
|||||||
@ -20,7 +20,7 @@ const About2Section = () => (
|
|||||||
</div>
|
</div>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<h3 className="mb-10"><span className="counter">10</span>+</h3>
|
<h3 className="mb-10"><span className="counter">10</span>+</h3>
|
||||||
<p>World Best Business Award Got</p>
|
<p>Experience</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-29.png)" }}></div>
|
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-29.png)" }}></div>
|
||||||
@ -32,28 +32,44 @@ const About2Section = () => (
|
|||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">ABOUT US</h6>
|
<h6 className="sec-title__tagline">ABOUT US</h6>
|
||||||
<h3 className="sec-title__title">We Strive To Offer Intelligent<br />Business Solutions</h3>
|
<h3 className="sec-title__title">Our Story</h3>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||||
</div>
|
</div>
|
||||||
<p className="mb-35">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
<p className="mb-35">Metatroncube Software Solutions was born from a passion for technology and a vision to revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have been pioneering custom software solutions since 2019.</p>
|
||||||
<div className="row mb-45">
|
<div className="about-features-list mb-45">
|
||||||
<div className="col-lg-6">
|
<div className="about-feature-item-3 mb-25 wow fadeInRight" data-wow-delay=".6s">
|
||||||
<ul className="list-area">
|
<div className="icon">
|
||||||
<li className="mb-10">Technology Consultancy</li>
|
<i className="fa-solid fa-microchip"></i>
|
||||||
<li className="mb-10">We Provide best services</li>
|
</div>
|
||||||
<li className="mb-10">Maintenance And Support</li>
|
<div className="content">
|
||||||
</ul>
|
{/* <span className="tagline">Innovative technology and strategy by Metatron Cube Solutions.</span> */}
|
||||||
|
<h4 className="title">Innovative Solutions</h4>
|
||||||
|
<p>Tailoring cutting-edge web and mobile applications that set industry standards.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-6">
|
<div className="about-feature-item-3 wow fadeInRight" data-wow-delay=".7s">
|
||||||
<ul className="list-area">
|
<div className="icon">
|
||||||
<li className="mb-10">300+ Successful Projects done</li>
|
<i className="fa-solid fa-users-gear"></i>
|
||||||
<li className="mb-10">Professional Engineers Provide</li>
|
</div>
|
||||||
<li className="mb-10">Requirements Gathering</li>
|
<div className="content">
|
||||||
</ul>
|
{/* <span className="tagline">digital solutions team</span> */}
|
||||||
|
<h4 className="title">Expert Teamwork</h4>
|
||||||
|
<p>A synergy of skilled developers and creative designers committed to your success.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="about-feature-item-3 wow fadeInRight" data-wow-delay=".8s">
|
||||||
|
<div className="icon">
|
||||||
|
<i className="fa-solid fa-chess-knight"></i>
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
{/* <span className="tagline">Future-ready strategy by Metatron Cube Solutions.</span> */}
|
||||||
|
<h4 className="title">Future-Ready Approach</h4>
|
||||||
|
<p>Anticipating market trends to keep your business ahead of the curve.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="about-2-btn-area">
|
{/* <div className="about-2-btn-area">
|
||||||
<a className="primary-btn-1 btn-hover" href="/about">
|
<a className="primary-btn-1 btn-hover" href="/about">
|
||||||
about us | <i className="fa-solid fa-arrow-right"></i>
|
about us | <i className="fa-solid fa-arrow-right"></i>
|
||||||
<span className="btn-hover-span"></span>
|
<span className="btn-hover-span"></span>
|
||||||
@ -67,7 +83,7 @@ const About2Section = () => (
|
|||||||
<h5><a href="tel:2085550112">+208-555-0112</a></h5>
|
<h5><a href="tel:2085550112">+208-555-0112</a></h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,16 +7,17 @@ const WorkProcessSection = () => (
|
|||||||
<div className="sec-title-wrapper text-center wow fadeInLeft" data-wow-delay=".5s">
|
<div className="sec-title-wrapper text-center wow fadeInLeft" data-wow-delay=".5s">
|
||||||
<div className="sec-title">
|
<div className="sec-title">
|
||||||
<div className="sec-title__shape"></div>
|
<div className="sec-title__shape"></div>
|
||||||
<h6 className="sec-title__tagline">WORKING PROCESS</h6>
|
<h6 className="sec-title__tagline">Get To Know Us More</h6>
|
||||||
<h3 className="sec-title__title">Our Development Process</h3>
|
<h3 className="sec-title__title">We’re Reliable & Cost Efficient <br /> Digital Agency.</h3>
|
||||||
|
<p>Appropriately enhance principle-centered innovation rather than high standards in platforms. <br /> Credibly orchestrate functional.</p>
|
||||||
</div>
|
</div>
|
||||||
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
|
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
|
||||||
</div>
|
</div>
|
||||||
<div className="row g-4">
|
<div className="row g-4">
|
||||||
{[
|
{[
|
||||||
{ num: 1, title: "Define Requirements", icon: "icon-4.png" },
|
{ num: 1, title: "Our Mission", icon: "icon-4.png", desc: "Empowering businesses with innovative digital growth solutions."},
|
||||||
{ num: 2, title: "Design & Prototyping", icon: "icon-5.png" },
|
{ num: 2, title: "Our Vision", icon: "icon-5.png", desc: "Redefining digital innovation for a connected, efficient future."},
|
||||||
{ num: 3, title: "Final Solution", icon: "icon-6.png" }
|
{ num: 3, title: "Our Values", icon: "icon-6.png", desc: "Redefining digital innovation for a connected, efficient future."}
|
||||||
].map((proc, i) => (
|
].map((proc, i) => (
|
||||||
<div key={i} className="col-xxl-4 col-xl-4 col-lg-4">
|
<div key={i} className="col-xxl-4 col-xl-4 col-lg-4">
|
||||||
<div className="work-process-box text-center">
|
<div className="work-process-box text-center">
|
||||||
@ -26,7 +27,7 @@ const WorkProcessSection = () => (
|
|||||||
</div>
|
</div>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<h4 className="pt-25 pb-25">{proc.title}</h4>
|
<h4 className="pt-25 pb-25">{proc.title}</h4>
|
||||||
<p>In a free hour, when our power of choice is untrammelled and when nothing prevents dolor sit amet, consectetur</p>
|
<p>{proc.desc}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -15,11 +15,11 @@ const ChooseSection = () => (
|
|||||||
<div className="image-3-area">
|
<div className="image-3-area">
|
||||||
<div className="image-3 p-relative">
|
<div className="image-3 p-relative">
|
||||||
<img src="/assets/imgs/about/about-2.jpg" alt="" />
|
<img src="/assets/imgs/about/about-2.jpg" alt="" />
|
||||||
<div className="play-btn">
|
{/* <div className="play-btn">
|
||||||
<div className="video_player_btn">
|
<div className="video_player_btn">
|
||||||
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
|
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h1>Metatron</h1>
|
<h1>Metatron</h1>
|
||||||
@ -28,12 +28,12 @@ const ChooseSection = () => (
|
|||||||
<div className="col-xxl-6 col-xl-6 col-lg-6">
|
<div className="col-xxl-6 col-xl-6 col-lg-6">
|
||||||
<div className="choose-3-content-area pl-60 pt-20 p-relative">
|
<div className="choose-3-content-area pl-60 pt-20 p-relative">
|
||||||
<SectionTitle
|
<SectionTitle
|
||||||
tagline="WHY CHOOSE US"
|
tagline="Our Services"
|
||||||
title="Elevate Your Achievements Using Premier IT Solutions"
|
title="Crafting Tailored Digital Solutions for Every Need"
|
||||||
className="wow fadeInLeft"
|
className="wow fadeInLeft"
|
||||||
/>
|
/>
|
||||||
<p>It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
<p>At Metatroncube, we blend innovation with expertise to shape bespoke digital solutions. Furthermore, our services range from cutting-edge web & app development, leveraging technologies like HTML, CSS, Node.js, and Angular, to strategic SEO and impactful digital marketing. Additionally, in creative graphic design, we meticulously craft each project to meet your unique business objectives. Moreover, in the realm of mobile app development, we utilize platforms such as Flutter, Android, and Swift to deliver exceptional user experiences. Consequently, we’re not just developers and designers; we’re architects of your digital success.</p>
|
||||||
<div className="row g-4 pt-35">
|
{/* <div className="row g-4 pt-35">
|
||||||
{[
|
{[
|
||||||
{ icon: "fa-solid fa-microchip", label: "Quality Materials", isIcon: true },
|
{ icon: "fa-solid fa-microchip", label: "Quality Materials", isIcon: true },
|
||||||
{ icon: "icon-8.png", label: "Best Services", isIcon: false },
|
{ icon: "icon-8.png", label: "Best Services", isIcon: false },
|
||||||
@ -49,7 +49,7 @@ const ChooseSection = () => (
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
|
import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
|
||||||
import ServiceCard from '@/components/mobile-app-development-service/support/cards/ServiceCard';
|
import ServiceCard from '@/components/mobile-app-development-service/support/cards/ServiceCard';
|
||||||
import { services } from '@/utils/data';
|
import { services1 } from '@/utils/data';
|
||||||
import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';
|
import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';
|
||||||
|
|
||||||
const Service = () => {
|
const Service = () => {
|
||||||
@ -43,7 +43,7 @@ const Service = () => {
|
|||||||
|
|
||||||
{/* Service Cards */}
|
{/* Service Cards */}
|
||||||
<div className="row g-4">
|
<div className="row g-4">
|
||||||
{services.slice(6, 12).map((service, i) => (
|
{services1.slice(0, 6).map((service, i) => (
|
||||||
<div key={service.id} className="col-lg-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-duration={800 + i * 100}>
|
<div key={service.id} className="col-lg-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-duration={800 + i * 100}>
|
||||||
<ServiceCard service={service} />
|
<ServiceCard service={service} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ServiceType } from "@/types";
|
import { ServiceType } from "@/types";
|
||||||
import { psychologyServices } from "@/utils/data";
|
import { ourServices } from "@/utils/data";
|
||||||
|
|
||||||
interface ServiceDetailsProps {
|
interface ServiceDetailsProps {
|
||||||
service: ServiceType;
|
service: ServiceType;
|
||||||
@ -30,7 +30,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
|||||||
<div className="service-sidebar__single">
|
<div className="service-sidebar__single">
|
||||||
<h3 className="service-sidebar__title">All Services</h3>
|
<h3 className="service-sidebar__title">All Services</h3>
|
||||||
<ul className="list-unstyled service-sidebar__nav">
|
<ul className="list-unstyled service-sidebar__nav">
|
||||||
{psychologyServices.map((item) => (
|
{ourServices.map((item) => (
|
||||||
<li key={item.id} className={item.slug === service.slug ? "active" : ""}>
|
<li key={item.id} className={item.slug === service.slug ? "active" : ""}>
|
||||||
<Link href={`/services-digital-solutions/${item.slug}`}>
|
<Link href={`/services-digital-solutions/${item.slug}`}>
|
||||||
{item.title}
|
{item.title}
|
||||||
|
|||||||
@ -37,42 +37,6 @@ export const services: ServiceType[] = [
|
|||||||
title: 'Website Maintenance & Support',
|
title: 'Website Maintenance & Support',
|
||||||
description: 'Ongoing updates, security monitoring, and performance optimization.',
|
description: 'Ongoing updates, security monitoring, and performance optimization.',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
icon: '/assets/img-app/home/section3/android.webp',
|
|
||||||
title: 'Android App Development',
|
|
||||||
description: 'Custom Android apps built for performance and scalability.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
icon: '/assets/img-app/home/section3/ios.webp',
|
|
||||||
title: 'iOS App Development',
|
|
||||||
description: 'High-quality iPhone and iPad applications optimized for Apple ecosystem.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
icon: '/assets/img-app/home/section3/cross.webp',
|
|
||||||
title: 'Cross-Platform App Development',
|
|
||||||
description: 'One codebase, multiple platforms — cost-effective and scalable.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 10,
|
|
||||||
icon: '/assets/img-app/home/section3/mvp.webp',
|
|
||||||
title: 'MVP Development',
|
|
||||||
description: 'Launch faster with a Minimum Viable Product to validate your idea.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11,
|
|
||||||
icon: '/assets/img-app/home/section3/ui.webp',
|
|
||||||
title: 'UI/UX App Design',
|
|
||||||
description: 'Visually stunning and conversion-focused mobile app interfaces.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 12,
|
|
||||||
icon: '/assets/img-app/home/section3/app.webp',
|
|
||||||
title: 'App Maintenance & Support',
|
|
||||||
description: 'Ongoing updates, bug fixes, security monitoring, and feature upgrades.',
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export const features2 = [
|
export const features2 = [
|
||||||
@ -82,26 +46,41 @@ export const features2 = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export const services1: ServiceType[] = [
|
export const services1: ServiceType[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
icon: '/assets/imgs/icon/icon.png',
|
icon: '/assets/img-app/home/section3/android.webp',
|
||||||
image: '/assets/imgs/service/service-img1.png',
|
title: 'Android App Development',
|
||||||
title: 'Custom Website Development',
|
description: 'Custom Android apps built for performance and scalability.',
|
||||||
description: 'Tailor-made websites built specifically for your business goals and audience.',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
icon: '/assets/imgs/icon/icon-2.png',
|
icon: '/assets/img-app/home/section3/ios.webp',
|
||||||
image: '/assets/imgs/service/service-img2.png',
|
title: 'iOS App Development',
|
||||||
title: 'E-commerce Development',
|
description: 'High-quality iPhone and iPad applications optimized for Apple ecosystem.',
|
||||||
description: 'High-converting online stores with seamless checkout and payment integration.',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
icon: '/assets/imgs/icon/icon-3.png',
|
icon: '/assets/img-app/home/section3/cross.webp',
|
||||||
image: '/assets/imgs/service/service-img3.png',
|
title: 'Cross-Platform App Development',
|
||||||
title: 'Mobile App Development',
|
description: 'One codebase, multiple platforms — cost-effective and scalable.',
|
||||||
description: 'Custom iOS and Android applications built for performance and scalability.',
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
icon: '/assets/img-app/home/section3/mvp.webp',
|
||||||
|
title: 'MVP Development',
|
||||||
|
description: 'Launch faster with a Minimum Viable Product to validate your idea.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
icon: '/assets/img-app/home/section3/ui.webp',
|
||||||
|
title: 'UI/UX App Design',
|
||||||
|
description: 'Visually stunning and conversion-focused mobile app interfaces.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
icon: '/assets/img-app/home/section3/app.webp',
|
||||||
|
title: 'App Maintenance & Support',
|
||||||
|
description: 'Ongoing updates, bug fixes, security monitoring, and feature upgrades.',
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -547,7 +526,7 @@ export const pricingPlans: PricingType[] = [
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
export const psychologyServices = [
|
export const ourServices = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: "Website Development",
|
title: "Website Development",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user